Page Title box sizing border box Style the body body font family Arial, Helvetica, sans serif margin 0 Header logo Title header padding 80px text align center background 1abc9c color white Increase the font size of the heading header h1 font size 40px Style the top navigation bar navbar overflow hidden background color 333 Style the navigation bar links navbar a float left display block color white text align center padding 14px 20px text decoration none Right aligned link navbar a right float right Change color on hover navbar a hover background color ddd color black Column container row display ms flexbox IE10 display flex ms flex wrap wrap IE10 flex wrap wrap Create two unequal columns that sits next to each other Sidebar left column side ms flex 30 IE10 flex 30 background color f1f1f1 padding 20px Main column main ms flex 70 IE10 flex 70 background color white padding 20px Fake image, just for this example fakeimg background color aaa width 100 padding 20px Footer footer padding 20px text align center background ddd Responsive layout when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other media screen and (max width 700px) row flex direction column Responsive layout when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other media screen and (max width 400px) navbar a float none width 100 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

The Answer is in the image, click to view ...

Answered step by step

Verified Expert Solution

Link Copied!

Question

1 Approved Answer

Posted on Sep 11, 2024

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

Page 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

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

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.