jaime-gg/01-horiseon

Challenge 1: Code Refractor - Making the provided code meet client and accessibility standards.

01 HTML, CSS, and Git: Code Refactor

I was given the provided code with the purpose of going through and refactoring it so that it could meet the criteria laid out by the client. In this case, the primary objective was to improve the overall accessibility standards of the site. This assignment was made all the more possible thanks to the acceptance criteria that was included in the original README file found in the downloaded content. This criteria will be included later on in this file alongside the given User Story.

When first viewing the code the primary thing that I did was to replace 'div' tags with the appropriate semantic elements and altered the css to work with these changes. I continued my work by cleaning up the given code by orgnizing the css by grouping similar selectors and provided comments to better distinguish the content. I then went into actually fixing the html in order to improve accessibility. This was accomplished by fixing missing links and by providing the necessary alt text for images and icons.

It is worthy of noting that due to the inclusion of the 'hero' image in the css file, the addiction of 'alt' text was not easily possible given the tools at my disposal. With the permission and encouragement of my instructors this image was moved to the html file and the appropriate css code was added or removed in order to preserve the desired placement of the image.

Given: User Story

AS A marketing agency
I WANT a codebase that follows accessibility standards
SO THAT our site is optimized for search engines

Given: Acceptance Criteria

GIVEN a webpage that 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 I find that they fall in sequential order
WHEN I view the title element
THEN I find a concise, descriptive title

Review

You are required to submit the following for review:

• The URL of the deployed application.

  • https://jaime-gg.github.io/01-horiseon/

• The URL of the GitHub repository. Give the repository a unique name and include a professional README describing the project.

  • https://github.com/jaime-gg/01-horiseon

---

© 2021 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.