Course Overview

Grokking CSS for Web Development teaches you how to control the look of a web page with CSS, from the first rule you write to complete layouts that adapt to phones and wide screens. You need to know basic HTML, such as headings, paragraphs, links and lists, but you do not need any CSS experience.

Each lesson shows real code, the result the browser renders, and the reason the browser renders it that way. The examples are short, so you can paste them into a file, open it in a browser, and change values to see what happens.

Course Structure

The course has seventeen chapters after this introduction. Each one builds on the chapters before it.

1. CSS Basics: what CSS is, where it came from, how a rule is written, and the three ways to connect CSS to an HTML page. Then how to organize a CSS file, write comments, and inspect and test CSS with the browser developer tools.
2. CSS Selectors: element, class and ID selectors, the universal selector, how to group and combine selectors, and how the cascade, specificity and inheritance decide which value an element gets.
3. Colors and Backgrounds: color names, hex codes, RGB and HSL, background colors and images, background size and position, background attachment, the background shorthand, gradients, and outlines.
4. Margin, Padding, and Element Size: width, height, margin and padding, how they create space inside and around an element, and what happens when content overflows its box.
5. The Box Model: the four layers of every element box, how the box-sizing property changes the way width and height are measured, and borders, rounded corners and shadows.
6. Text Styling and Typography: font families and web fonts, font size, weight and style, text alignment, text decoration, line height, and letter and word spacing.
7. Display and Positioning Basics: block, inline and inline-block elements, the static, relative, absolute and fixed positions, and z-index for stacking elements.
8. Float and Clear: how floated elements let text wrap around them, and how to clear and contain floats.
9. Flexbox: the main axis and the cross axis, container properties such as justify-content and align-items, and item properties such as flex and align-self.
10. CSS Grid: grid containers and items, columns and rows, gaps, template areas, and automatic placement.
11. Responsive Design Basics: why responsive design matters, viewports and devices, fluid layouts and flexible images, responsive images with srcset and picture, media queries, the mobile-first approach, and container queries.
12. Pseudo-Classes and Pseudo-Elements: styling states such as hover, active and focus, selecting the first or last item in a list, and adding content with ::before and ::after.
13. Combining Selectors and Combinators: the descendant, child, next-sibling and subsequent-sibling combinators.
14. CSS Units and Sizing: absolute units such as px, relative units such as em, rem, vw and vh, and how to choose the right unit.
15. CSS Functions: attr(), calc(), env(), url() and var().
16. CSS Transitions and Animations: transitions, delays, keyframe animations, and looping and pausing animations.
17. CSS Practical Challenges: seven small projects that combine the earlier chapters. You build a responsive menu bar, a responsive card layout with hover effects, a modal popup, a tooltip, a themeable card that uses CSS variables, a loading spinner, and a bouncing button.

Who This Course Is For

The course is written for people who are new to CSS. That includes students and recent graduates starting in web development, back-end developers who need to style their own pages, and designers who want to build what they design.

It is also useful if you already write some CSS by copying snippets but cannot predict what a rule will do. The lessons explain how the browser reads your rules, so you can reason about a result instead of guessing.

How the Course Teaches

The lessons explain one idea at a time, in plain language, and define each term where it first appears. Many lessons follow one running example, such as a single card or a single page, and style it further in each section, so you can see how each new property changes something you already understand.

The course also teaches current practice. Where an older technique has a modern replacement, such as gap in flex layouts or flow-root for containing floats, the lessons show the modern way and say when the older one still appears in existing code. Lessons also point out accessibility needs, such as keeping a visible focus indicator and respecting users who ask for reduced motion.

Chapters 1 to 16 each end with an assessment. Each attempt draws a set of questions from a larger bank, so a second attempt asks different ones. Many questions ask you to predict what the browser will do with a piece of CSS, so they check understanding rather than memory of a sentence.

What You Will Be Able to Do

By the end of the course, you will be able to:

• write CSS rules and connect them to any HTML page,
• control color, text, spacing and the size of every element,
• build page layouts with Flexbox and Grid that adapt to small and large screens,
• style interactive states, and add transitions and animations,
• find out why a rule does or does not apply, using what you know about selectors and the box model.

These skills are also the base for CSS frameworks and design systems, because the styles they produce are ordinary CSS that the browser reads in the same way.