M2 Overview & To Do

CSS Module Overview

This module introduces learners to the fundamentals of CSS, guiding them through syntax, selectors, properties, and values. They will engage with hands-on coding activities using CodePen, identify and correct errors, and reflect on their learning through discussion posts. The module emphasizes both theory and practice to ensure mastery of foundational CSS concepts.

Module Purpose

The purpose of this module is to develop learners' foundational skills in CSS by exploring syntax, selectors, properties, and values. Through practice and reflection, learners will build confidence in applying CSS to style web pages and gain the resources to continue their CSS journey independently.

🎯 Module Objectives

By the end of this module, learners will be able to:

  1. Recognize and apply CSS syntax to style HTML elements.
  2. Debug common CSS errors using a hands-on coding environment (CodePen).
  3. Identify and utilize CSS selectors effectively in web styling.
  4. Correctly apply CSS properties to achieve desired visual effects.
  5. Understand how CSS values work in relation to various properties.
  6. Synthesize their knowledge to create CSS code from scratch.
  7. Engage in peer-to-peer learning by summarizing knowledge and providing feedback on others’ work.
  8. Access additional CSS resources to further their understanding beyond the module.

📋 To-Do List

    1. Learn CSS Syntax
      • Read about basic CSS syntax.
    2. Practice Syntax Debugging in CodePen
      • Open CodePen with pre-filled CSS syntax.
      • Identify and fix four errors.
      • Submit a screenshot of the corrected CodePen results.
    3. Read about CSS Selectors
      • Study the different types of CSS selectors (class, ID, universal, etc.).
    4. Debug CSS Selectors in CodePen
      • Open CodePen with CSS selectors already filled in.
      • Find and fix errors, then submit a screenshot of the results.
    5. Learn about CSS Properties
      • Read material covering CSS properties and how they control element appearance (e.g., color, margin, font).
    6. Fix Errors in CSS Properties Code
      • Use a pre-filled CodePen focusing on CSS properties.
      • Correct the errors and submit a screenshot of the working code.
    7. Study CSS Values
      • Read about how values are assigned to properties (e.g., px, %, em).
    8. Explore Additional CSS Resources (Optional)
      • Browse and use the provided resources (blogs, documentation, videos) for further learning.
    9. Review the CSS Infographic
      • Study the infographic summarizing CSS syntax, selectors, properties, and values.
    10. Create CSS Using CodePen
      • Use the information from the infographic to write your own CSS code in CodePen.
      • Submit a screenshot of your results.
    11. Reflect in a Discussion Post
      • Write a summary of what you’ve learned in the CSS module.
      • Respond to at least two classmates' posts to foster discussion and exchange ideas.