Grokking CSS for Web Development
Learn CSS from your first rule to responsive layouts: selectors, the cascade, the box model, Flexbox, Grid, media queries, and animations, tested in a browser.
Course Overview
CSS decides how every web page looks: its colors, its spacing, its fonts, and where each box sits on the screen. Writing a rule is easy. Knowing what the browser will do with it is harder. Several rules can target the same element, and a layout can change with the width of the screen. This course teaches you to predict the result before you open the browser. You start with how a rule is written, how to connect CSS to a page, and how to inspect it with the browser developer tools. Then you learn selectors and the cascade, which decides the winning value when rules conflict. Next come colors, backgrounds, and gradients, the box model with margins, padding, borders, and overflow, and typography with web fonts. The middle of the course covers layout: display and positioning, floats, Flexbox, and CSS Grid. Later chapters make pages work on every screen with media queries, a mobile-first approach, responsive images, and container queries. You also learn pseudo-classes, combinators, units, CSS functions, and transitions and animations. Every example was rendered and measured in a real browser. Diagrams show what each rule does. The teaching chapters end with an assessment that explains every answer, and the course closes with practical challenges that combine what you learned.
What you'll learn in Grokking CSS for Web Development
- Write CSS rules, connect a style sheet to an HTML page, and find mistakes with the browser developer tools.
- Predict which value wins when rules conflict, using the cascade, specificity, and inheritance.
- Use color names, hex, RGB, HSL, and OKLCH colors, background images, and gradients.
- Place elements with display values, relative, absolute, fixed, and sticky positioning, and z-index.
- Make pages responsive with the viewport meta tag, fluid layouts, media queries, and a mobile-first approach.
- Style states and add decorative content with pseudo-classes and pseudo-elements, including visible focus styles.
- Add transitions and keyframe animations that respect the reduced motion setting.
- Target elements with type, class, ID, and universal selectors, and combine them with combinators.
- Style text with font families, web fonts, sizes, weights, line height, alignment, and spacing.
- Explain the box model and control width, height, margin, padding, borders, rounded corners, and overflow.
- Build one-dimensional layouts with Flexbox and two-dimensional layouts with CSS Grid.
- Serve the right image size with srcset and picture, and adapt components with container queries.
- Choose between px, rem, em, and viewport units, and use calc(), clamp(), var(), and custom properties.
Course Content
CSS - Margin, Padding, and Element Size
The Box Model in CSS
Display and Positioning Basics
Float and Clear
Combining Selectors and Combinators
CSS Units and Sizing
CSS Transitions and Animations
CSS Practical Challenges
What people say about our courses
About the Author
Arslan Ahmad
Industry Expertise & Leadership
Arslan Ahmad is the lead author of Grokking CSS for Web Development. As the founder of Design Gurus and a former FAANG hiring manager, he has worked at industry giants like Facebook (now Meta) and Microsoft.
He has conducted hundreds of system design interviews, giving him unique insight into what top tech companies look for in candidates.
The course also incorporates expertise from senior engineers at Google, Meta, Amazon, Microsoft, and Uber, ensuring you learn system design best practices from professionals who have built and scaled real-world systems.
500+
Interviews Conducted
10k+
Students Taught
Related Courses
$197
$48
$48
FAQs
What is Grokking CSS for Web Development?
It is a course on CSS, the language that controls how web pages look. It starts with how a rule is written and how the browser decides which rule wins, then covers colors, the box model, typography, positioning, Flexbox, Grid, responsive design, pseudo-classes, units, CSS functions, and animations, and ends with practical challenges that combine them.
Who is this course for?
It is for beginners who know some HTML and want to style pages with confidence, and for developers who already write CSS by trial and error and want to understand why the browser renders what it does.
What do I need to know before I start?
You need basic HTML: elements, attributes, and how a page is structured. If you are new to HTML, take Grokking HTML first. You do not need any JavaScript.
What do I need to follow along?
You need a current web browser and a plain-text code editor. Every example is a complete page that you can paste into a file and open in your browser. The course does not include a coding environment in the browser, so you run the examples on your own computer.
Is the course up to date with current CSS?
Yes. It teaches current practice, like gap for Flexbox, display: flow-root for containing floats, dynamic viewport units, focus-visible, cascade layers, container queries, and OKLCH colors. When a feature is not yet available in every major browser, the lesson says so.
How were the examples checked?
Every example was rendered in Chrome during the review, and the sizes, positions, and colors that the lessons state were measured in the browser rather than estimated. Diagrams next to the examples show the same measured values.
Are there quizzes or assessments?
Yes. Every chapter except the introduction and the practical challenges ends with an assessment, and each attempt draws a set of questions from a larger pool, so a second attempt gives you different questions. Most questions describe a rule and ask what the browser renders, and every option comes with an explanation.
Does the course cover Flexbox and CSS Grid?
Yes. You learn the main and cross axes, how a flex container shares free space, and the flex and align-self item properties. For Grid you define columns and rows with fr units, repeat(), and minmax(), place items on grid lines, and draw layouts with template areas.
Does the course teach responsive design?
Yes. You learn the viewport meta tag, fluid layouts and flexible images, responsive images with srcset and picture, media queries, the mobile-first approach, and container queries for components that adapt to the space they are given.
Does it cover Sass, Tailwind, or other frameworks?
No. The course teaches CSS itself, which every framework and preprocessor builds on. Native nesting, subgrid, anchor positioning, and scroll snap are also outside its scope.
