The purpose of this challenge was to improve the usage of semantic HTML elements and consolidate css selectors for a landing page website. I was required to use the correct structure, and improve the accessibility by using descriptive alt tags for images and the correct semantic elements where possible. The CSS elements had to be grouped to reduce the total lines of code on the file and improve efficiency. The project also required descriptive comments to be used throughout the project.
The motivation for this project was to take all the key learning in the first week of lessons and put them to use in a real world scenario.
The project was built to consolidate knowledge and usage of HTML, CSS and git best practices. It was also used to improve the seo of a landing page for a fictional marketing company to mimic a real world piece of work.
This project solves key problems such as making the webpage follow a more efficient structure, alt tags on images to improve accessability, grouped CSS selectors to reduce total lines of code. The changes made to the code should also provide search engine optimisation benefits when the code is crawled by a browser such as Google.
Key learnings:
- When to use semantic elements vs general Div and Spans
- How to use basic git commands such as add, commit and push to save changes in a repository such as Github
- How to structure the folders of a project and ensure that items such as images are using the correct path and appear correctly on the webpage
- How to consolidate CSS to make groupings and reduce lines of code
- How to comment on html and css files to provide better understanding of the code to others who may read the codebase.
- How to upload the code to a Github pages site and use the inspect tool to see how the code works.
Here is a list of criteria that has to be met to pass the challenge:
- Semantic HTML elements can be found throughout the source code
- HTML elements follow a logical structure independent of styling and positioning
- Image and icon elements contain accessible alt attributes
- Heading attributes fall in sequential order
- Title elements contain a concise, descriptive title
- The website is functional and deployed to Github pages
This was the user story provided to us at the start of the project to help us with the context of the work:
AS A marketing agency I WANT a codebase that follows accessibility standards SO THAT our own site is optimized for search engines
There is no installation needed for this website.
This application was built for the purpose of completing a bootcamp test.
1.Click here to access the reposity where the code for this project is stored
2.Click here to access the live website hosted on Github pages
Here is a screenshot of the finished landing page which can be accessed with the above link to Github pages:
Tutorials/resources used to assist with this project:
This project is licensed under MIT, please refer to the LICENSE file that is seen in the codeRefactor repo to find additional details related to the license used in this project.
© 2023 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.