CSS Styling

Week 1: Introduction to CSS

  • Class 1: Cascading Style Sheets (CSS) Introduction

    • What is CSS and its role in web development

    • Inline vs. internal vs. external CSS

    • Basic CSS syntax and selectors

  • Class 2: CSS Selectors and Properties

    • Understanding CSS selectors: element, class, ID, and pseudo-classes

    • Applying styles with CSS properties: colour, font-size, margin, padding, etc.

    • Using the "box model" concept

Week 2: CSS Layout and Box Model

  • Class 3: Box Model in Depth

    • Understanding the box model: content, padding, border, margin

    • Box sizing and how it affects layout

    • Creating responsive layouts with CSS

  • Class 4: CSS Positioning and Display

    • CSS positioning: static, relative, absolute, fixed

    • Display property: block, inline, inline-block

    • Centering elements horizontally and vertically

Week 3: CSS Flexbox and Grid

  • Class 5: Introduction to CSS Flexbox

    • Flexbox fundamentals: containers and items

    • Creating flexible and responsive layouts with Flexbox

    • Solving common layout challenges

  • Class 6: CSS Grid Layout

    • Introduction to CSS Grid

    • Defining grid containers and grid items

    • Building complex grid-based layouts

Week 4: Responsive Web Design

  • Class 7: Media Queries and Responsive Design

    • Media queries and breakpoints

    • Creating responsive designs for various devices

    • Mobile-first vs. desktop-first approaches

  • Class 8: CSS Best Practices and Optimization

    • CSS performance optimization techniques

    • Organising CSS with methodologies like BEM or SMACSS

    • Review and recap of Month 2 content

Throughout the month, students will practice applying styles to HTML content, building progressively more complex layouts. They will also work on responsive design projects to ensure their websites adapt to different screen sizes.

Practical exercises and assignments will reinforce the concepts learned in each class, and students will have access to resources for self-paced learning. By the end of Month 2, students should have a strong foundation in CSS styling and layout techniques.

Last updated