project_css_frameworks.md

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](/courses/web-development-101/lessons/html-css) 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](http://960.gs) 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

• Add your solution below this line!
• ARaut9's solution - Framework - View in browser
• ARaut9's solution - Example Site - View in browser
• N00bG1rl's solution - View in browser
• Javier Machin's solution - View in Browser
• nmac's solution - View
• SarfrazAnjum's solution - View in Browser
• Henry Kirya's solution - View in Browser
• theghall's solution - View in Browser
• Jonathan Yiv's solution - Test website
• Jmooree's solution - Test website
• Axel's solution - Sass Framework - Test website
• Artur Janik's solution - Framework - Solution - website - View desktop version in browser - View mobile version in browser
• AtActionPark's solution - Framework - Example Site - HTML Preview
• Miguel Herrera's solution - Framework - The Odin Project Clone - View in browser
• Daunenok's solution - View in browser
• David Chapman's solution (minimal) - View in browser
• Beth Rathbone's solution- Framework - Example Site
• Austin's solution - Example Site
• Devon's solution - Example Site
• Neil Cudden's solution - View in browser
• husein ghafari's solution - Example Site
• Francisco Carlos's - Scaffold Framework - Example Site - View in browser
• aznafro's CSS Framework - Flik - Final Project Git Page - View site in browser
• Oluwadamilare Olusakin's CSS Framework - Sphinx
• Carlos Del Real's and Gabriela Cruz's Solutions - Example Site

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.

• Add some!