/Module1-Challenge

Code Refactor

Primary LanguageHTML

Module 1 - Code Refactor

DEMO

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 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

Contribution

  • Changed "Webpage" title to "Horiseon" to match company title.
  • Changed the color of the "SEO" span in company's name.
  • Fixed the Navbar link to allow users to be sent directly to specified sections of the page.
  • Added hover animations to navbar
  • Added alt tags to the images for better SEO and to help screen-reading tools.
  • Consolidated CSS to minimize file size and reuse code.
  • Compressed images file size.
  • Compressed jpg/png images, converted images to webp. (original image folder size 50.1MB. compressed image folder size 39.2MB. webp folder size 6.6MB)