Creating a Website Structure
HTML describes the structure of content on a web page, but it's also important to define visual structure. Using a CSS grid system, we'll rearrange page elements into an aesthetically pleasing layout.
3 videos • 0 quizzes • 2 code challenges
-
Play
Preview
CSS Reset
4 minutes 26 seconds
-
Code Challenge
Preview
Code Challenge: CSS Reset
1 objective
-
Play
Preview
Adding Grid CSS
3 minutes 15 seconds
-
Play
Preview
Working with Grids
10 minutes 58 seconds
-
Code Challenge
Preview
Code Challenge: Using Classes
2 objectives
CSS Grids and Frameworks
We used a very basic pre-built CSS grid, but there are lots of options to choose from beyond our example. It's very common for web designers and developers to start with prebuilt code.
Here are some projects and frameworks created by various individuals and companies in the web community that can help you get started on your next website:
- HTML5 Boilerplate - HTML5 Boilerplate is a simple HTML template that gets the mundane setup out of the way.
- Bootstrap - Bootstrap is a robust framework that includes a responsive CSS grid system, JavaScript plugins, and more.
- Foundation - Zurb Foundation is similar to Bootstrap in that it provides a responsive CSS grid system. It also includes many other features and can help you prototype and build websites quickly.
There are tons of free and open source front-end frameworks available to try; too many to include in a single list. Similar to text editors, personal preference and the project come into play. Try searching the web for more and see which ones work best for you and the project.
