Web Dev 102: CSS (WD102)

Course Syllabus Contents

• Module 1 – CSS Basics
• Module 2 – Properties and Values
• Module 3 – The Box Model
• Module 4 – Floats and Media Queries
• Module 5 – Flexbox and CSS Grid
• Module 6 – Transitions and Interactivity
• Module 7 – Bootstrap
• Module 8 – Sass and Less
• Module 9 – Accessibility

Module 1 – CSS Basics

Introduction to CSS fundamentals, including its role in web development, ways to apply styles to HTML documents, and the organization of stylesheets. Learners will explore CSS syntax, selectors, and specificity rules.

After completing Module 1, the learner will:

• understand the purpose of CSS and how it styles web content
• apply CSS using inline, internal, and external stylesheets
• structure and organize CSS files for maintainability
• use basic CSS selectors and properties to apply styles
• understand specificity, inheritance, and the CSS cascade

Module 2 – Properties and Values

Exploration of core CSS properties used for styling elements, including colors, backgrounds, text, lists, images, and links. Learners will work with shorthand properties and understand their benefits.

After completing Module 2, the learner will:

• apply colors and background properties to enhance design
• style text using font families, sizes, spacing, and alignment
• format lists and hyperlinks with appropriate styling properties
• use shorthand properties for improved efficiency
• implement best practices for readable and accessible text

Module 3 – The Box Model

Introduction to the CSS box model and its role in element layout. Learners will explore spacing, borders, dimensions, and positioning techniques to control page structure.

After completing Module 3, the learner will:

• understand how the box model defines element boundaries
• manipulate margins, padding, borders, and width/height properties
• control content layout using different display properties
• work with positioning techniques, including static, relative, absolute, and fixed positioning
• use visibility and overflow properties to manage content display

Module 4 – Floats and Media Queries

Focus on layout techniques using floats, multi-column layouts, and media queries for responsive design. Learners will explore how to create adaptable designs across different screen sizes.

After completing Module 4, the learner will:

• create multi-column layouts using float-based techniques
• implement media queries for adaptive web design
• apply fluid design principles for flexible content display
• design layouts that adjust for various devices and screen sizes
• ensure consistency and usability across different viewports

Module 5 – Flexbox and CSS Grid

Introduction to modern layout techniques using Flexbox and CSS Grid. Learners will gain hands-on experience in structuring page content efficiently and responsively.

After completing Module 5, the learner will:

• apply Flexbox properties to arrange content dynamically
• structure page layouts using CSS Grid for complex designs
• control alignment, distribution, and responsiveness of elementst
• optimize page structures for different screen sizes

Module 6 – Transitions and Interactivity

Exploration of CSS animations, transitions, and interactivity. Learners will apply visual effects and responsive behaviors to enhance user experience.

After completing Module 6, the learner will:

• use transitions to create smooth animations and effects
• implement keyframe-based CSS animations
• apply hover, focus, and active states for interactive elements
• enhance user experience through animated interactions
• ensure performance optimization in animation-heavy designs

Module 7 – Bootstrap

Introduction to CSS frameworks, focusing on Bootstrap for rapid design and layout development. Learners will explore Bootstrap's grid system, utility classes, and components.

After completing Module 7, the learner will:

• understand the benefits of using CSS frameworks
• implement responsive design with the Bootstrap grid system
• use Bootstrap components to build consistent UI elements
• apply utility classes for faster and efficient styling
• customize Bootstrap with additional CSS for personalized designs

Module 8 – Sass and Less

Introduction to CSS preprocessors and how they streamline development. Learners will explore how Sass and Less improve efficiency through variables, mixins, and nested styling.

After completing Module 8, the learner will:

• understand the purpose of CSS preprocessors in modern development
• write reusable and scalable styles using Sass or Less
• work with variables, nesting, and mixins to simplify styling
• compile and integrate preprocessed CSS into projects
• optimize workflow by structuring CSS code efficiently

Module 9 – Accessibility

Using CSS to support accessibility through clear navigation, identifiable links, predictable layouts, readable contrast, scalable font sizes, readable fonts, and screen reader-friendly techniques.

After completing Module 9, the learner will:

• understand the importance of web accessibility and its legal requirements
• build clear and consistent styling to ensure elements are recognizable and predictable
• be able to create clear navigation with consistent menus and identifiable links
• know how to use simple and predictable layouts to avoid confusion and enhance accessibility
• know the importance of adjusting contrast and font sizes to improve readability for users with visual impairments
• understand techniques for screen reader accessibility, including hiding content visually while keeping it accessible to screen readers