Submission for Module 2 of the University of Birmingham Skills Bootcamp in Front-End Web Development & UX
This assignment took a starter code package in commit 663bfc4 and developed it to meet the defined acceptance criteria.
The production website is deployed here.
This has been developed to meet the following Acceptance Criteria:
| Acceptance Criteria | Solution |
|---|---|
| When the page is loaded the page presents your name, a recent photo or avatar, and links to sections about you, your work, and how to contact you | Name included in h1 element Avatar included Links to section about me, my portfolio, and how to contact included Note: content is placeholder to protect privacy. |
| When one of the links in the navigation is clicked then the UI scrolls to the corresponding section | When links are clicked, user is taken to the associated section on the page. |
| When viewing the section about your work then the section contains titled images of your applications | Grid used to display bootcamp projects so far with titles and descriptions. |
| When presented with the your first application then that application's image should be larger in size than the others | First item in the grid is shown larger. |
| When images of the applications are clicked then the user is taken to that deployed application | Images for deployed applications when clicked will take the user to the deployed application. Other links are dummy links against the placeholder items. |
| When the page is resized or viewed on various screens and devices then the layout is responsive and adapts to my viewport | Media queries have been used to adjust the page layout with breakpoints at widths of 1024px and 768px. |
I used a combindation of resources in completing this challenge assignment, including taking different fragments of code and combining them to come up with a solution specific to my problem-- making the portfolio cards clickable as a link whilst maintaining accessibility for the anchor tags.
I have learned how to apply styles in layers in order to achieve a desired effect, and also the need to tidy up styles as my codebase evolves so as to remove any potential conflicts with other styles.
In completing this challenge exercise, I made use of the following resources:
| Item | Evidence |
|---|---|
| Satisfies all of the above acceptance criteria. | The built application satisfies the acceptance criteria, as set out above. |
| Item | Evidence |
|---|---|
| Application deployed at live URL. | Live application deployed at: https://stefan4d.github.io/uob-module-02-challenge/ |
| Application loads with no errors. | No visual defects No console errors |
| Application GitHub URL submitted. | URL submitted |
| GitHub repository that contains application code. | This repository contains all code. |
| Item | Evidence |
|---|---|
| Application resembles the mock-up functionality provided in the Challenge instructions. | Application resembles the model screenshot provided in the assignment instructions, with the addition of an avatar image as specified within the acceptance criteria. |
| Item | Evidence |
|---|---|
| Repository has a unique name. | Unique name used |
| Repository follows best practices for file structure and naming conventions. | Limited files but standard HTML and CSS file names used |
| Repository follows best practices for class/id naming conventions, indentation, quality comments, etc. | All multi-word CSS IDs and classes use lowercase and hyphens. Indentation within code follows best practice and document flow Comments have been included within the CSS. |
| Repository contains multiple descriptive commit messages. | Multiple commits included demonstrating incremental build of final submission. Each has a clear description of changes made. |
| Repository contains quality README file with description, screenshot, and link to deployed application. | This README document. |
Released under the MIT license. Full details in LICENSE.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent