CSS Syllabus for Beginners

---

Lesson 1: Introduction to CSS and Basic Selectors

• What is CSS and how it works (Introduction to Cascading Style Sheets)
• Adding CSS to HTML (Inline, Internal, External)
• Basic Syntax and Rules (Selectors, Properties, Values)
• CSS Selectors (Element, Class, ID)
• Understanding the Box Model (Content, Padding, Border, Margin)
• CSS Measurements: Understanding units (px, %, em, rem, vw, vh)

Assignment:

• Create an HTML page with external CSS that applies styles to headers, paragraphs, and buttons using element, class, and ID selectors.
• Experiment with different units (px, %, em, rem) for margins, paddings, and font sizes.
• Explore the Box Model by adding padding, borders, and margins to elements using different measurement units.

---

Lesson2: Styling Text, Colors, and Layout

• Text Properties (font-family, font-size, font-weight, line-height, text-align)
• Color Systems (Named colors, Hex, RGB, RGBA)
• Backgrounds (Color, Images, Repeat, Position)
• Borders and Shadows (border-radius, box-shadow)
• Display Property (Block, Inline, Inline-Block, None)
• CSS Measurements Continued: Relative units (em, rem, vw, vh) vs. absolute units (px)

Assignment:

• Style text elements (headings, paragraphs, links) with different fonts, sizes, colors, and text alignment.
• Use em and rem for font sizes and practice switching between relative and absolute units.
• Create a section with a colored background and a box-shadow effect.
• Experiment with the display property to adjust the layout.

---

3: Positioning, Flexbox, and Sizing

• CSS Positioning (Static, Relative, Absolute, Fixed)
• Z-index and Layering
• Floating and Clearing Elements
• Introduction to Flexbox (flex-container, flex-direction, justify-content, align-items)
• CSS Sizing: Widths and Heights using auto, %, vh, vw, and calc()

Assignment:

• Create a navigation bar using Flexbox for layout.
• Build a two-column layout using floats and practice clearing floated elements.
• Apply different measurements (%, vh, vw) to size containers and elements.
• Use the calc() function to create dynamic sizing, like width or height as a combination of different units.

---

Lesson 4: Responsive Design with Media Queries

• Introduction to Responsive Design (Mobile-First Approach)
• Understanding Viewport and Units (px, %, em, rem, vh, vw)
• Media Queries (min-width, max-width)
• Responsive Layout with Flexbox
• Responsive Images
• CSS Measurements in Responsive Design: Adapting measurements for different screen sizes

Assignment:

• Design a simple web page that adjusts the layout for different screen sizes (e.g., mobile, tablet, desktop) using media queries.
• Make the navigation bar and images responsive by applying media queries and flexible units like vw, vh, %.
• Practice changing font sizes and container widths/heights using relative units (em, rem) within media queries for a fully responsive design.

---

Lesson 5: Advanced CSS Techniques and Final Project

• CSS Grid (Grid Container, Grid Item, Columns, Rows, Template Areas)
• Transitions and Animations
• Combining Flexbox and Grid for Layout
• Final Overview of Responsive Design Best Practices
• CSS Measurement in Action: Combining units like em, rem, vw, vh, and calc() in a real-world project

Final Project:

• Create a responsive portfolio webpage using CSS Grid and Flexbox.
• Add transitions to buttons or images for hover effects.
• Use a combination of px, %, em, rem, vw, and vh units for flexible, responsive layouts.
• Ensure the webpage is fully responsive across different devices using media queries and appropriate CSS measurements.

---