Skip to main content
WPFSharp Academy
Syllabus

CSS

88 lessons Learn at your own pace

Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.

Start course Browse the syllabus

What you’ll learn

CSS Fundamentals & Setup

5 lessons

CSS Introduction & History: What Is CSS and Why It Matters · CSS Syntax & How Browsers Apply Styles · Setting Up Your CSS Workspace: Linking Files & Live Server

Start module

Item Properties

6 lessons

CSS flex-direction: Row, Column, Reverse Explained with Examples · CSS flex-wrap and flex-flow: Complete Guide with Examples · CSS justify-content: Align Flex Items on the Main Axis

Start module

Container Properties

6 lessons

CSS flex-direction: row, row-reverse, column & column-reverse Explained · CSS flex-wrap & flex-flow: Wrap Flex Items the Right Way · CSS justify-content: Align Flex Items on the Main Axis

Start module

Flexbox Foundations

4 lessons

Why Layout Evolved: Tables, Floats, Flexbox and Grid · Flexbox Introduction and Mental Model · Flex Container and Flex Items

Start module

Selectors & the Cascade

8 lessons

CSS Basic Selectors: Type, Class, ID, Universal & Grouping · CSS Combinators: Descendant, Child, Adjacent & General Sibling · CSS Attribute Selectors: [attr], ^=, $=, *= and More

Start module

Colors, Backgrounds & Effects

7 lessons

CSS Colors (HEX, RGB, HSL, OKLCH) · CSS Backgrounds · CSS Gradients (Linear, Radial, Conic)

Start module

Box Model & Spacing

7 lessons

The CSS Box Model: Content, Padding, Border and Margin · CSS Margin and Margin Collapse · CSS Padding: Shorthand, Percentages and Best Practices

Start module

Typography & Text

7 lessons

CSS Text Properties: Alignment, Spacing, Decoration and Wrapping · CSS Fonts and font-family: Font Stacks, Weights and System Fonts · Web Fonts: Google Fonts, @font-face and Variable Fonts

Start module

Display, Position & Layout Basics

7 lessons

Display & Inline-block · Position (relative, absolute, fixed, sticky) · Z-index & Stacking Contexts

Start module

The Modern CSS Toolkit

6 lessons

CSS Variables (Custom Properties) · Math Functions (calc, min, max, clamp) · Native CSS Nesting

Start module

Responsive Design

6 lessons

Mobile-First & the Viewport · Media Queries · Responsive Images & Video

Start module

Transitions & Animation

7 lessons

CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete · CSS 2D Transforms: translate, rotate, scale, skew and transform-origin · CSS 3D Transforms: perspective, preserve-3d, rotateX/Y and backface-visibility

Start module

UI Components

6 lessons

CSS Buttons: Variants, States, Sizes and Accessible Button Design · CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid · CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation

Start module

Pro Practices & Wrap-up

6 lessons

CSS Architecture & BEM · CSS Performance · CSS Accessibility (focus, contrast)

Start module

Keep learning

65 lessons

HTML

Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up. HTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step. This HTML course takes you through the fundamentals step by step, using simple explanations and practical examples.

Start learning