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 can use that image file as reference. 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 the same as the provided image, you're doing it right.
- Open
level-1/index.html&&level-1/step-1.css&&level-1/step-1.jpg.
-
- Locate the element with the class of
content-left.
- Locate the element with the class of
-
- Position this element to the left side of the screen.
-
- Locate the element with the class of
content-mid.
- Locate the element with the class of
-
- Position this element to appear just to the right of
content-leftand take up the remaining space.
- Position this element to appear just to the right of
-
- Locate the element with the class of
footer.
- Locate the element with the class of
-
- Position this element to appear at the bottom of the page.
- Open
level-1/index.html&&level-1/step-2.css&&level-1/step-2.jpg. +* Locate the element with the class ofcontent-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
-
- Add padding of 20 pixels on the top, left, right, and bottom.
+* Locate the element with the class of
profile-image-container.
- Add padding of 20 pixels on the top, left, right, and bottom.
+* Locate the element with the class of
-
- Assign a width, height, and margin-bottom.
+* Locate the element with the class of
profile-links-container.
- Assign a width, height, and margin-bottom.
+* Locate the element with the class of
-
- Assign a width and height.
+* Locate the element with the class of
logo-container.
- Assign a width and height.
+* Locate the element with the class of
-
- Assign a width, height, and float.
+* Locate the element with the class of
menu-container.
- Assign a width, height, and float.
+* Locate the element with the class of
-
- Assign a width, height, and float.
+* 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.
- Add padding of 80 pixels on the top, left, right, and bottom.
+* Locate the element with the class of
-
- 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
-
- Assign a width and height.
+* Locate the element with the class of
content.
- Assign a width and height.
+* Locate the element with the class of
-
- 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.
- Add some random text inside the
+* 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.
- Assign a display that will allow these elements to appear on the same line.
+* Locate the element with the class of
-
- Assign a position, left, and top.
+* Locate the element with the class of
sign-in.
- Assign a position, left, and top.
+* Locate the element with the class of
-
- Assign a position, right, and top.
+* 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 text-align.
+* Locate the element with the class of
-
- Add a width, height, and display.
+* Locate the element with the class of
full-width-item.
- Add a width, height, and display.
+* Locate the element with the class of
-
- Add a width, height, and margin.
+* Locate the element with the class of
large-item.
- Add a width, height, and margin.
+* Locate the element with the class of
-
- Add a width, height, and margin.
+* 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 ofmenu-icon.
- Add a background color of
-
- Link the src path to
level-3/img/icons/MENU. +* Locate the element with the class oflogo-icon.
- Link the src path to
-
- Link the src path to
level-3/img/icons/dev-shop. +* Locate the element with the class ofsign-in.
- Link the src path to
-
- Link the src path to
level-3/img/icons/Sign_In. +* Locate the element with the class ofshop-icon.
- Link the src path to
-
- Link the src path to
level-3/img/icons/Shop_Deals.
- Link the src path to
+* 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 ofitem-imageand alt ofbottoms.
- Link the src path to
-
- Link the src path to
level-3/img/bottoms.png. +* Locate the element with the class ofitem-imageand alt ofaccessories.
- Link the src path to
-
- Link the src path to
level-3/img/accessories.png. +* Locate the element with the class ofitem-imageand alt ofcollection.
- Link the src path to
-
- Link the src path to
level-3/img/collection.png. +* Locate the element with the class ofitem-imageand alt ofkicks.
- Link the src path to
-
- Link the src path to
level-3/img/kicks.png. +* Locate the element with the class ofitem-imageand alt ofhats.
- Link the src path to
-
- Link the src path to
level-3/img/hats.png
- Link the src path to
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.
© DevMountain LLC, 2017. 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.
