Skip to content

Latest commit

 

History

History
80 lines (63 loc) · 3.86 KB

README.md

File metadata and controls

80 lines (63 loc) · 3.86 KB

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.