HTML and CSS

PROJECT: DESIGN YOUR OWN GRID-BASED FRAMEWORK

Introduction

In this final project, you’ll get to take everything you’ve learned and use it to build your own simple grid-based framework. As with the other final projects, we’ll keep it relatively open-ended to give you a chance to exercise your creativity and problem-solving skills. It will be a great project to show off to potential employers as well. Once you’re done setting up your framework, you will use it to clone any website you like. If you’re out of ideas, try cloning The Odin Project!

Assignment

You’ll be creating your own grid-based framework.


  1. Follow the instructions atop the Google Homepage project to set up a GitHub repository for this project (of course you’ll need to change the title).
  2. Create a new CSS document.
  3. Think about the major elements that are required of a framework. This includes a CSS reset, a fixed number of grids separated by “gutters”, a way to make new rows, and default values for the font properties of elements.
  4. Write the CSS necessary to create a basic 12-column grid framework. Check out the 960 Grid System documentation for a look at how they do it. The complexity is up to you – there’s no need to go too crazy with details (you’re not trying to rebuild Bootstrap).
  5. Push your framework to GitHub.

Applying the Framework

  1. Create a new HTML document and a new GitHub repository.
  2. Identify the webpage you’d like to clone and break it down into its major elements like we have in the previous projects.
  3. Add your framework to your project.
  4. Use your framework to lay out the structure of the page.
  5. Fill in the necessary details/images etc.
  6. Push your solution to GitHub.
  7. Have a frosty beverage, you’re done with the HTML/CSS projects!


Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.



Solutions:
HTML and CSS: (Design Your Own Grid-Based Framework)
2
Alex
2
Zach-Mks
1
pudu
1
hackerman
0
igor
0
aptivonen
0
simalicrum
0
Collins Jumah
0
adi31252
0
reinimax

Showing 10 most liked submissions - View full list of solutions




Improve this lesson on Github



Have a question?

Chat with our friendly Odin community in our Discord chatrooms!


Thinkful
5-6 months
Job Guarantee
1-on-1 Mentorship