Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

freeCodeCamp

CSS Grid Course

via freeCodeCamp

Overview

This course on CSS Grid aims to teach learners how to create website layouts efficiently by simplifying HTML and CSS, providing more layout control. By completing the course, students will gain the skills to build website layouts, image grids, and article layouts using CSS Grid. The course covers core concepts such as grid creation, fraction units, positioning items, template areas, and advanced topics like named lines and grid vs. Flexbox. The teaching method includes interactive tutorials and practical exercises. This course is intended for individuals interested in web development, specifically those looking to enhance their CSS layout skills using CSS Grid.

Syllabus

1. Course Introduction.
2. Your first grid.
3. Fraction units and repeat.
4. Positioning items.
5. Template areas.
6. Auto-fit and minmax.
7. Implicit rows.
8. An awesome image grid.
9. Bonus: Named Lines.
10. Bonus: Justify-content and align-content.
11. Bonus: Justify-items and align-items.
12. Bonus: Auto-fit vs. auto-fill.
13. Bonus: Creating an article layout.
14. Bonus: Grid vs. Flexbox.

Taught by

freeCodeCamp.org

Reviews

Start your review of CSS Grid Course

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.