iDevMeet

Web Development · module 3 of 13

CSS Foundations

Use selectors, the cascade, the box model, typography, colors, spacing, variables, and calculated values.

Course map
margin — space pushed against the neighboursborder — the drawn edgepadding — breathing room inside the edgecontent — your text or imageWidth measures the content box by default. box-sizing: border-box measures to the border instead —which is why a 300px box can end up wider than 300px on screen.
CSS Foundations — the idea in one picture

What this module covers

5 steps · Web Development

  1. Step 1. Lesson: CSS Foundations

    Use selectors, the cascade, the box model, typography, colors, spacing, variables, and calculated values. Learning objectives - Recognize when css foundations is the right tool. - Explain the role of class, padding, color. - Build a small working example before combining it with a larger interface. - Identify one accessibility, maintainability, or error-handling improvement. Read the example, predict what it will do, then complete the small change described in the check question.

    Use selectors, the cascade, the box model, typography, colors, spacing, variables, and calculated values. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Use the example to demonstrate css foundations.

  2. Step 2. Quiz: CSS Foundations

    Check your understanding of CSS Foundations.

    Padding is the inner space between content and its border. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Complete the knowledge check.

  3. Step 3. Exercise: CSS Foundations

    Style a reusable card with padding, border, background, readable type, and a hover state.

    This exercise turns the CSS Foundations lesson into a working code change. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the solution use class and padding and color?

  4. Step 4. Review lab: Explain & improve CSS Foundations

    Rebuild the exercise without copying the solution. Then improve it in two ways: make the code easier to understand and add one useful edge case, responsive behavior, accessibility improvement, or error state. Finally, write a short explanation of how class, padding, color work together.

    Rebuilding from memory and improving an edge case turns recognition into durable skill. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the improved version still use class, padding, color clearly?

  5. Step 5. Mini project: CSS Foundations

    Design a small visual style guide showing color tokens, typography levels, spacing, buttons, and cards.

    The mini project combines the module lesson, quiz, and exercise into one portfolio-ready result. In HTML + CSS, make the state/interaction visible in the UI so completion is easy to verify.

    Check yourself: [HTML + CSS] Does the project apply the module's css foundations skills?

Loading code lab...