Practice What You Learned

Fashion Blog (BUILD IN PLAIN HTML, Make locally, Push to Github, Deploy on Github Pages & Then remake in react and deploy to Netlify)

This will be submitted on Canvas, follow all below instructions carefully

The submission will be a link to your GitHub

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

Prerequisites

  • HTML & CSS
  • Flexbox
  • React

Instructions

Download the following images

Requirements

Faithfully reproduce the mockup in HTML & CSS.

goal

Build Your HTML

  1. Create your html boilerplate in the index.html file.
  2. Add a new file called style.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!

Part 2

  • REMAKE ENTIRE PROJECT IN REACT and deploy to NETLIFY
  • Use App.js, Header.js, Nav.js, Article.js, Footer.js

Deploy on Netlify

Run Build command in your app in the command line (For React app only)

npm run build

Drag and drop folder from your computer into netlify

Submission

In the github readme for your React Application - Remove all the React boilerplate information and replace with the following:

# [Netlify Live Link](netlify link here)
# [Github pages Live Link](github pages link of html version)
# [Github link of html version](github for html version here)

Copyright © Per Scholas 2023