Skip to content

Latest commit

 

History

History
120 lines (93 loc) · 5.66 KB

README.md

File metadata and controls

120 lines (93 loc) · 5.66 KB
Raw

Project Summary

In this project, you will be given three levels of practice using HTML and CSS. Each level will contain three or less steps. Each step will build on the last step and will contain an image file. You will use the image file as a reference for what the result should look like. The goal is to try to get as close as possible to the image's layout, using HTML and CSS that you write yourself.

If you get stuck on a level you can view the solution folder provided in each level. Try to only use this folder as a last resort.

Don't worry about being pixel perfect and don't worry if your code doesn't match the solution exactly. As long as it looks close to the provided image, you're doing it right.

Level 1

Step 1

  • Open level-1/index.html && level-1/step-1.css && level-1/step-1.jpg.
  • Locate the element with the class of content-left.
    • Position this element to the left side of the screen using float.
  • Locate the element with the class of content-mid.
    • Position this element with float to appear just to the right of content-left and take up the remaining space.
  • Locate the element with the class of footer.
    • Position this element to appear at the bottom of the page using the clear property.

Step 2

  • Open level-1/index.html && level-1/step-2.css && level-1/step-2.jpg.
  • Locate the element with the class of content-left.
    • Add padding of 20 pixels on the top, left, right, and bottom.
  • Locate the element with the class of header.
    • Add padding of 20 pixels on the top, left, right, and bottom.
  • Locate the element with the class of profile-image-container.
    • Assign a width, height, and margin-bottom.
  • Locate the element with the class of profile-links-container.
    • Assign a width and height.
  • Locate the element with the class of logo-container.
    • Assign a width, height, and float.
  • Locate the element with the class of menu-container.
    • Assign a width, height, and float.

Step 3

  • Open level-1/index.html && level-1/step-3.css && level-1/step-3.jpg.
  • Locate the element with the class of content-mid.
    • Add padding of 80 pixels on the top, left, right, and bottom.
  • Locate the element with the class of content-mid-header.
    • Assign a width and height.
  • Locate the element with the class of content-container.
    • Assign a width and height.
  • Locate the element with the class of content.
    • Add padding of 20 pixels on the top, left, right, and bottom.
    • Assign a width, height, and text-align.
    • Add some random text inside the div.

Level 2

Step 1

  • Open level-2/index.html && level-2/step-1.css && level-1/step-1.jpg.
  • Locate the element with the class of menu, logo and sign-in.
    • Assign a display that will allow these elements to appear on the same line.
  • Locate the element with the class of menu.
    • Use float to position the element to the left.
  • Locate the element with the class of sign-in.
    • Use float to position the element to the right.

Step 2

  • Open level-2/index.html && level-2/step-2.css && level-2/step-2.jgp.
  • Locate the element with the class of main-bottom-section.
    • Add a text-align.
  • Locate the element with the class of item.
    • Add a width, height, and display.
  • Locate the element with the class of full-width-item.
    • Add a width, height, and margin.
  • Locate the element with the class of large-item.
    • Add a width, height, and margin.

Level 3

In level three, you will see some CSS properties that you haven't been exposed to just yet. Take this opportunity to do a little sefl study but know that you will be exposed to it during a later lecture.

Step 1

  • Open level-3/index.html && level-3/step-1.css && level-3/step-1.css.
  • Locate the element with the class of main-top-section.
    • Add a background color of #F2EFE5.
  • Locate the element with the class of menu-icon.
    • Link the src path to level-3/img/icons/MENU.
  • Locate the element with the class of logo-icon.
    • Link the src path to level-3/img/icons/dev-shop.
  • Locate the element with the class of sign-in.
    • Link the src path to level-3/img/icons/Sign_In.
  • Locate the element with the class of shop-icon.
    • Link the src path to level-3/img/icons/Shop_Deals.

Step 2

  • Locate the element with the class of item-image and alt of tops.
    • Link the src path to level-3/img/Tops.png.
  • Locate the element with the class of item-image and alt of bottoms.
    • Link the src path to level-3/img/bottoms.png.
  • Locate the element with the class of item-image and alt of accessories.
    • Link the src path to level-3/img/accessories.png.
  • Locate the element with the class of item-image and alt of collection.
    • Link the src path to level-3/img/collection.png.
  • Locate the element with the class of item-image and alt of kicks.
    • Link the src path to level-3/img/kicks.png.
  • Locate the element with the class of item-image and alt of hats.
    • Link the src path to level-3/img/hats.png

Contributions

If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.

Copyright

© DevMountain LLC, 2019. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.