Hone your skills in HTML & CSS by building a page that is based on a mock up!
- HTML & CSS
- Flexbox
The owner is looking to have a similar webpage as the one below and has hired you for the J-O-B.
Be sure to:
- Fork and clone this repository.
- Fulfill the listed requirements.
When you have fulfilled the requirements below, make a pull request on this repository to turn in your work.
Unless otherwise specified on the calendar or by an instructor, homework is due the next morning by 9:00am ET.
Faithfully reproduce the mockup in HTML & CSS.
- Create your html boilerplate in the
index.html
file. - Add a new file called
styles.css
and link it to the HTML file. - In the body of your HTML, use
header
,main
, andfooter
tags to clearly define the different parts of the page. - Use an
h1
tag for the site title and anh2
for the subtitle inside the page header. - Use
nav
tags inside the page header to create an accessible navigation. Follow the example in the W3C Web Accessibility Initiative (WAI) Guidelines to format your navigation:- Wrap each link in an anchor tag
- Wrap each anchor tag in a list item
- Wrap all of the list item tags in an unordered list tag
- Mark up both of the blog posts using the
article
tag. - Use this W3C WAI Guideline example, to help you structure your blog post content. Follow the pattern! Make sure there is a
p
tag that contains some lorem ipsum text (Remember you can create this with Emmet by typingp>lorem
and pressing tab)! - Inside the page footer, use the same technique you used earlier to create a semantic and accessible navigation, using a wrapping
nav
tag, unordered list and the aria attributes. - Add a copyright in the
footer
. For the © symbol, use an html entity.
Make sure to add and commit your changes when you've got the html done!
- Use a
border
only on the left side of the page'shtml
element. It should have a width of5px
and a color oflightgray
. - Set the
body
element'smin-height
to be at least 100% of the viewport height. Also, use thefont-family
property to set the entire page to usesans-serif
fonts. - Give the
body
amax-width
of1000px
and center it on the page with the margin auto technique. - The border is too close to our text and we've got an issue with margin-collapse at the top of the page! Add
padding
to theheader
,main
andfooter
elements of1rem
on the top and bottom and2rem
on the left and right to fix these issues. - For the
h1
on the page we want the color to betomato
. - Set all of the images to have a
width
of100%
. - For your site navigation, you'll need to remove all of the padding on the
ul
elements and then set it'slist-style-type
tonone
. It would be a good idea to use a class to style the navigation so that you can still make a bulleted list on your page. Use Flexbox to style theul
for the navigation elements. On the top navigation use thespace-between
rule to have the menu items spread across their container evenly. Set the color for the anchors inside the main navigation to belightgray
and the footer navigation to betomato
. - Style the title of each of your blog posts so that they are larger.
- Style the 'continues...' anchor tags so that they are aligned to the right and are bold and tomato colored.
- Set the margin on the bottom the
article
tags to be4rem
. Also, add a1px
solid border inlightgray
to the bottom of each one and give each padding on the bottom of2rem
. - For the
p
tag inside yourarticle
, use the pseudo-element ::first-letter to style the drop cap and set it's color tolightgray
. - Style the copyright so it is
lightgray
.
Awesome job, add, commit and push changes to create your pull request!
- Use Google Fonts.
Once you've completed the requirements, review this short video on JavaScript Data Types so you're ready for the upcoming lectures.