This is a solution to the [HTML-Git-CSS Challenge from Course 1]. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
User Story:
AS A marketing agency
I WANT a codebase that follows accessibility standards
SO THAT our own site is optimized for search engines
Acceptance Criteria:
GIVEN a webpage meets accessibility standards
✔️WHEN I view the source code
✔️THEN I find semantic HTML elements
✔️WHEN I view the structure of the HTML elements
✔️THEN I find that the elements follow a logical structure independent of styling and positioning
✔️WHEN I view the icon and image elements
✔️THEN I find accessible alt attributes
✔️WHEN I view the heading attributes
✔️THEN they fall in sequential order
✔️WHEN I view the title element
✔️THEN I find a concise, descriptive title
- Horizeon Screenshot website
- Live Site URL: Github
To complete this challenge, I started by editing the title of the webpage so that it more accurately described the site. Once that was complete, I moved on to chaging the alt tags on the images so that they provided better accessability and improved SEO. Once that was complete, I moved on to changing the HTML tags so that they more accurately described the structure of the page, removing <div> tags where appropriate and giving them proper names instead. Finally, I worked through the CSS file to structure the document in line with the order of the HTML elements so that everything lined up between the documents. If I could have done my process differently with the benefit of hindsight, I probably would have started with renaming the HTML elements.
- Semantic HTML5 markup
- CSS custom properties
Through completing this challenge, I've learned the importance of using semantic HTML to provide organization and structure to a webpage. Semantic HTML has the benefit of making a site's structure both easy to read and easy to maintain. If I needed to go back to this website for changes, I'd easily be able to identify where each section begins and ends and where to focus my attention.
I would like to continue focusing on refining these skills as I go so that my webpages are always easy to read and maintain.
- Github - @isayahdurst
- Twitter - @isayahdurst
Frank Nguyen