Page Title * { box-sizing: border-box; } /* Style the body */ body { font-family: Arial, Helvetica, sans-serif; margin: 0; } /* Header/logo Title */

My Website

A website created by me.

Link Link Link Link

About Me

Photo of me:

Image

Some text about me in culpa qui officia deserunt mollit anim..

More Text

Lorem ipsum dolor sit ame.

Image

Image

Image

TITLE HEADING

Title description, Dec 7, 2017

Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

TITLE HEADING

Title description, Sep 2, 2017

Image

Some text..

Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Footer

For this assignment, visit the W3 Schools website and work through the How To - Make a Website tutorial to create a 2 column website using flexbox.

NOTE: I highly recommend CSS-Trick's Complete Guide to Flexbox. It provides excellent graphical explanations for how Flexbox works.

STEP 1:

Copy the markup from the tutorial into Notepad++.

• Name the file index.html.

STEP 2:

Set up the head to comply with best practices.

• Add the lang attribute and set it to en-US.
• Add the charset attribute and set it to utf-8.
• Set the viewport.
• Add the author metatag.
• Remove the style tag and create an external style sheet instead.
• Add the HTML5Shiv below the style sheet.

• Add an appropriate title.

STEP 3:

Add semantic elements.

Replace the header div with header tags.

• Change the header so it says your name instead of My Website.
• Remove the

  below the header.

Replace the navbar div with nav tags.

• Change the names of your links. They should read (from left to right): Home, About Me, Projects, and Resume.

Add a set of div tags around the existing row div and the main div. The new div should have an id called wrapper.

• Replace the row div with aside tag.
• Replace the main div with main tags.
• Replace the footer div with footer tags.

IMPORTANT: Before you go any further, update your external style sheet so that it works with the new semantic elements that you replaced the existing elements with. If you do this correctly, the website will look the same as it did before you made the changes.

STEP 4:

Start adding content.

Add your image to the About Me section.

• Don't forget to add alt-text to your image.

• Inside of the

  tags, write: [First name] is currently pursuing a [insert degree] in [insert area of study] from Chattahoochee Technical College.

• Remove the moretext and the

  and

  tag below it, as well as the three fakeimg divs.

• For now, leave the two sections with the

  TITLE HEADING as they are.

Step 5:

• Change the background color of the header.
• Change the font for all headings within the html document.
• Change the hover color for the nav links.
• Change the background color, font color, and font family for the footer.

Step 6:

Validate both of your files and save the validation proofs as PDFs.

NOTE: You'll use a separate tool for each file type (this one for HTML, this one for CSS). Remember, no errors and no warnings!

Step 7:

ZIP your work into a folder called LASTNAME_Flexbox and submit it to the Dropbox.

Your submission should include:

• Your HTML file.
• Your CSS file.
• A validation file for each of the files above.
• NOTE: Don't forget to include any image files inside the folder or they won't show up on your page.

Indentation	Points: 1 (3.33333%) Work is properly indented.
Best Practices	Points: 10 (33.33333%) All element and attribute names are lowercase. Attribute values are inside of double quotes. There are no spaces around equal signs. Empty elements are closed. Lang attribute is set to utf-8. Viewport is set. Author metatag is present. HTML5Shiv is present. An appropriate title is included. Image has appropriate alt text.
Validation	Points: 5 (16.66666%) File(s) are validated with no errors and no warnings.
External Style Sheet	Points: 6 (20.00%) Student created an external style sheet as directed.
Semantic Elements	Points: 5 (16.66666%) Student has added header tags, nav tags, aside tags, main tags, and footer tags as directed.
Content	Points: 3 (10.00%) Student has added content as directed (added an image, set the width and height of the fakeimg divs, added the paragraph's content as directed, removed the additional content as directed.