Skip to content

Latest commit

 

History

History
 
 

project-htmlcss-l1-grid

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 
joshua.html
joshua.html
 
 

README.md

Project HTMLCSS I1 Grid

Topics:

Creating a Grid , Basic Grid , Creating Columns , Creating Rows , Grid Template , Fraction , Repeat , minmax , Grid Gap , Grid Items , Multiple Row Items , Grid Row , Grid Column , Grid Area

Project Title: Website Skeleton

  1. Create a html file with your name like john.html
  2. Add current code to that file:
<!DOCTYPE html>
<style>
  /* your css code here */
</style>
<html>
  <body>
    <!-- your html code here -->
  </body>
</html>

  1. Set all divs style to border-radius 10px and padding 10px

  2. Create a div and set class to container. Set display to grid.

  3. Add 4 divs inside container with following classes:

  • header: It wraps all width and background-color is gary. Content is Header.
  • sidebar: It is under header and covers 25% of width of the screen. background-color is yellow. Content is Sidebar
  • main: It is under header and next to sidebar and covers 75% of width of the screen. background-color is green. Content is Main
  • footer: It wraps all width. background-color is blue. Content is Footer
  1. Create 10px gap between sections.

Want to get reviewed?

Send Pull Request. Check how to deliver your code: https://codingwithbasir.com/how-to-deliver-projects/

Need help?

Download Free eBook https://codingwithbasir.com/download