01-HTML-Git-CSS-REFACTOR

Purpose:

A website that provide marketing services.

Build with:

• HTML
• CSS

Website:

https://hunterd3cd.github.io/01-HTML-Git-CSS-Refactor/

Contribution:

Made by Hunter

Image:

Refactor notes:

00: first thing will be setting up the project. it includes creating a new git repository, committing the work to git, and syncing the projec with GitHub;

01: by giving the website a descriptive tile "Horiseon", visitors can know what website they are in right now;

02: in the header part, build a logic structure in the body. remove div class="header" and replace it with header. In the CSS file, change the .header to header;

03: in the header part, change div to nav. the nav is a semantic elements that aid accessibility. and add descriptive notes to ul, li , and a. In the CSS file, change div to nav.

04: build a hero section for the hero image. add descriptive notes to CSS file.

05: in the "content" section, change div to section.This is the section for the main content of horiseon website.

06: in the "content" section, in order to build a logic structure, change div to article. because the style of the three contents are the same, we can merge it into one under "content". and combine the css file into ".content"; by doing so, we are reducing the repetition for the CSS code.

07: in the "benefit" aside, in order to build a decriptive structure, change div to aside.

08: in the "benefit" aside, in order to reduce the repetition of the css code, we can merge the content into "benefit class";

09: in the footer, in order to build a logic structure, change div to footer.

10: in the header, in order to have the list item link to the content below, add id to the specified article. and for images, add alt="description of the image" which provides alternative info of the images if a user for some reason can't view it;