taubman33 / fashion-blog

Fashion Blog

Hone your skills in HTML & CSS by building a page that is based on a mock up!

Prerequisites

• HTML & CSS
• Flexbox and Grid

Instructions

You do not have the necessary rights to update this repository. Therefore, you must fork it, make changes to your fork, and then send a pull request to the owners of this repository:

1. Fork and clone this repository.
2. Change into the new directory and create a development branch to work on.
3. 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.

Prep for JavaScript Data Types

Once you've completed the requirements, review this short video on JavaScript Data Types so you're ready for the upcoming lectures.

Requirements

Faithfully reproduce the mockup in HTML & CSS.

Build Your HTML

1. Create your html boilerplate in the index.html file.
2. Add a new file called styles.css and link it to the HTML file.
3. In the body of your HTML, use header, main, and footer tags to clearly define the different parts of the page.
4. Use an h1 tag for the site title and an h2 for the subtitle inside the page header.
5. 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:
   1. Wrap each link in an anchor tag
   2. Wrap each anchor tag in a list item
   3. Wrap all of the list item tags in an unordered list tag
   4. Place the unordered list inside the the nav tag and give it attributes for aria-label="Main Navigation" and role="navigation"
6. Mark up both of the blog posts using the article tag.
7. 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 typing p>lorem and pressing tab)!
8. Make sure your images all have alt attributes so that they are accessible.
9. 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.
10. 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!

Style Your Page

1. Use a border only on the left side of the page's html element. It should have a width of 5px and a color of lightgray.
2. Set the body element's min-height to be at least 100% of the viewport height. Also, use the font-family property to set the entire page to use sans-serif fonts.
3. Give the body a max-width of 1000px and center it on the page with the margin auto technique.
4. 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 the header, main and footer elements of 1rem on the top and bottom and 2rem on the left and right to fix these issues.
5. For the h1 on the page we want the color to be tomato.
6. Set all of the images to have a width of 100%.
7. For your site navigation, you'll need to remove all of the padding on the ul elements and then set it's list-style-type to none. 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 the ul for the navigation elements. On the top navigation use the space-between rule to have the menu items spread across their container evenly. Set the color for the anchors inside the main navigation to be lightgray and the footer navigation to be tomato.
8. Style the title of each of your blog posts so that they are larger.
9. Style the 'continues...' anchor tags so that they are aligned to the right and are bold and tomato colored.
10. Set the margin on the bottom the article tags to be 4rem. Also, add a 1px solid border in lightgray to the bottom of each one and give each padding on the bottom of 2rem.
11. For the p tag inside your article, use the pseudo-element ::first-letter to style the drop cap and set it's color to lightgray.
12. Style the copyright so it is lightgray.

Awesome job, add, commit and push changes to create your pull request!

Bonus

• Use Google Fonts.