Course Badge

HTML and CSS

Project: Design you 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!

Student Solutions

Submit a link below to this file on The Odin Project’s curriculum GitHub repo with your files in it by using a pull request. See the section on Contributing for how.

▸ Show Student Solutions
Additional Resources
  • Add Some!

Improve this lesson on GitHub

Have a question?

Chat with our friendly Odin community in our Discord chatrooms!

Are you interested in accelerating you web development learning experience?

Thinkful
Calendar
5-6 months
Shield
Job Guarantee
Mentor
1-on-1 Mentorship