isayahdurst / html-css-git-code-refactor

Refactors starting code to adhere to pre-defined accessibility requirements presented in the readme acceptance criteria.

HTML-Git-CSS Challenge 01 Solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

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

Screenshot

• Horizeon Screenshot website

Links

• Live Site URL: Github

My process

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.

Built with

• Semantic HTML5 markup
• CSS custom properties

What I learned

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.

Continued development

I would like to continue focusing on refining these skills as I go so that my webpages are always easy to read and maintain.

Author

• Github - @isayahdurst
• Twitter - @isayahdurst

Acknowledgments

Frank Nguyen