CSS Essentials: Responsive Landing Pages
Turn a plain page into a responsive layout using the box model, Flexbox, and Grid.
2 min of content4 lessonsBeginnerEnglishUpdated Oct 2026
- Certificate
Created by EvalenceAI Demo Studio · Practical learning paths for testing
What you'll learn
- Explain margin, border, and padding
- Build flexible card layouts
- Adapt a layout to narrow screens
Curriculum
1 section · 4 lessons · 2 min
Learn, practice, and build4 lessons · 2 min
- CSS: guided video tutorial, ArticlePreview CSS: guided video tutorial1 min
- Study notes and worked starter, Article1 min
- Practice project and self-check, Article1 min
- Download the practice workbook, Downloadable resource
Requirements and who it's for
- A computer with internet access
- Self-paced learners
- Students testing the EvalenceAI learning experience
Description
CSS Essentials: Responsive Landing Pages
Turn a plain page into a responsive layout using the box model, Flexbox, and Grid.
Work through the tutorial at your own pace, review the study notes, then complete the practice project using the downloadable workbook. The workbook includes starter material and a checklist for reviewing your result.
What you will learn
- Explain margin, border, and padding
- Build flexible card layouts
- Adapt a layout to narrow screens
Your project
- Create three article elements inside a cards container.
- Apply the starter CSS and add a header and footer.
- Test at 320px, 768px, and 1280px and fix overflow.
Tutorial: CSS Tutorial - Zero to Hero (Complete Course) by freeCodeCamp.org. Videos remain freely available on YouTube and belong to their creators. This is an independent demo learning path; listed prices are test fixtures.
Instructor
EvalenceAI Demo Studio
Practical learning paths for testing · 10 courses · 0 students
Original exercises paired with credited public tutorials. Demo prices are for testing the learning and checkout experience.
Reviews
No reviews yet.