Skip to main content
grasp.study
About
Explore
Pricing
Log in
Try it for free
Back to course
👋
Welcome to a Grasp lesson
Create a free account
to keep studying and create your own study path.
Full-stack web development with Vue.js
·
Module 3
CSS Refresher: Layout and Responsive Design
1
Mastering the CSS Box Model
Apply the CSS box model and explain how margin, padding, border, and content interact.
2
Building Common Layout Patterns with Flexbox
Use Flexbox to create common layout patterns like centered elements, navigation bars, and card grids.
3
Building a Portfolio Layout with CSS Grid
Use CSS Grid to build a two-dimensional portfolio layout.
4
Responsive Layouts with Media Queries
Write media queries to make layouts responsive across mobile, tablet, and desktop breakpoints.
5
Solving Basic Merge Conflicts in Project Styles
Resolve a basic merge conflict that may arise when updating project styles.
6
Responsive Profile Site: Navigation, Cards, and Mobile-First Design
Mini Project: Style the profile site with a responsive navigation bar, a card-based layout section, and a mobile-first approach.
Previous module
HTML Refresher: Structure and Semantics
Next module
JavaScript: Core Concepts and DOM Interaction