PROWIDIT Education Academy

Blog
About us
How it works
FAQ

+994 77 333 38 36 Trial lesson Account

AZ RU EN

← Back to account

Switch courseHTML & CSS course

AI for developers course104
Algorithms and data structures course129
Django & FastAPI course140
Docker & deployment course103
Full Stack Developer course270
Git & GitHub course103
HTML & CSS course154
JavaScript course169
Laravel course136
Provider Networks: MPLS, BGP and BNG81
Next.js course113
Node.js course123
PHP course144
Python course153
React course122
SQL & databases course122
TypeScript course112
Vue.js course111

Introduction: the Web, Tools and Your First Page
How the Web Works: Browser, Server, HTTP, Domain and Hosting Free
Dev Environment: VS Code, Extensions, Live Server and Emmet
Your First HTML Page: Tags, Elements, Attributes and Nesting
HTML Document Structure: doctype, html, head and body
Browser DevTools: Element Inspector, DOM and Device Mode
HTML Content: Text, Links, Tables and Media
Headings h1–h6 and Paragraphs: Text Hierarchy
Inline Text Elements: strong, em, mark, small, sub, sup, abbr, time
Quotes, Code and Special Characters: blockquote, q, pre, code, kbd and Entities
Lists: ul, ol, dl and Nested Lists
Links: the a Tag, href, Absolute and Relative Paths
Anchors, mailto, tel, download and the target/rel Attributes
Tables: table, tr, td, th and caption
Table Structure: thead, tbody, tfoot, colspan, rowspan and colgroup
Images: the img Tag, alt, width/height, Lazy Loading and figure
Image Formats: JPEG, PNG, WebP, AVIF and SVG
Responsive Images: srcset, sizes and picture
Audio and Video: audio, video, source and track Captions
Embedding Content: iframe, YouTube, Maps, embed and object
Project: a Personal Business Card Site in Pure HTML
Semantics, Accessibility and SEO
Semantic Markup: header, nav, main and footer Instead of div
article, section and aside: Choosing the Right Element
Interactivity Without JavaScript: details/summary, dialog and popover
Global Attributes: id, class, title, lang, hidden, inert and data-*
HTML Validation: the W3C Validator and Common Markup Errors
SEO Basics: title, meta description, canonical, robots and hreflang
Open Graph, Social Media Previews and Favicons
Accessibility (a11y): WCAG, Screen Readers and Alt Text
ARIA Basics: Roles, aria-label, aria-labelledby and aria-hidden
Keyboard Navigation: Focus, tabindex and Skip Links
Project: a Semantic Blog Article Page
Forms
Forms: form, action, method, name and Submit Buttons
Text Inputs: Input Types, placeholder, autocomplete and inputmode
Choice and Special Inputs: checkbox, radio, range, color, date and file
Labels and Grouping: label, fieldset and legend
Dropdowns and Multiline Text: select, optgroup, datalist, textarea
Built-in Validation: required, pattern, min/max and minlength
Accessible Forms: Hints, Error Messages and Required Fields
Project: a Course Application Form in HTML
CSS Basics and Selectors
What CSS Is and How to Add It: style, link and Inline Styles
Basic Selectors: Type, Class, ID, Universal and Grouping
Attribute Selectors: [attr], ^=, $=, *= and the i Flag
Combinators: Descendant, Child, Adjacent and General Sibling
State Pseudo-classes: :hover, :focus-visible, :active, :checked, :disabled
Structural Pseudo-classes: :first-child, :nth-child() and :nth-of-type()
Functional Pseudo-classes: :is(), :where() and :not()
The :has() Parent Selector: Styling by Content
Pseudo-elements: ::before, ::after, ::marker, ::placeholder and ::selection
Cascade, Units and Color
The Cascade: Style Origins, Rule Order and !important
Selector Specificity: How to Calculate and Manage It
Inheritance and Global Values: inherit, initial, unset, revert
Cascade Layers with @layer: Controlled Style Order
Debugging CSS in DevTools: Styles, Computed, States and Layout
CSS Units: px, em, rem and Percentages
Viewport and Font Units: vw, vh, dvh, svh, vmin, ch and lh
Color in CSS: Named Colors, HEX, rgb() and hsl()
Modern Color: oklch(), color-mix(), currentColor and transparent
Math Functions: calc(), min(), max() and clamp()
Box Model, Display and Positioning
The Box Model: content, padding, border, margin and box-sizing
Margin Collapsing
Sizing: width, height, min-/max-, auto and min-content/max-content
The display Property: block, inline, inline-block, none, flow-root, contents
Overflow: Scrolling and Clipping Content
Hiding Elements: display: none, visibility, opacity and visually-hidden
Positioning: position relative and absolute, the inset Property
position: fixed and sticky: Fixed Headers and Sticky Blocks
z-index and the Stacking Context
float and clearfix: Text Wrapping and Why Not to Use Them for Layout
Typography and Visual Styling
Fonts: font-family, font-size, font-weight, font-style and the font Shorthand
Web Fonts: @font-face, Google Fonts and Variable Fonts
Text: line-height, text-align, text-decoration, text-transform, letter-spacing
Text Wrapping and Truncation: white-space, overflow-wrap, text-wrap, line-clamp
Backgrounds: background-color, background-image, repeat, position and size
Gradients: linear-gradient, radial-gradient and conic-gradient
Advanced Backgrounds: Multiple Layers, attachment, clip, origin and Shorthand
Borders: border, border-radius and outline
Shadows: box-shadow and text-shadow
Project: Styling the Blog Article and Author Card
Flexbox
Introduction to Flexbox: Flex Container, Items and Axes
flex-direction: the Direction of the Main Axis
flex-wrap, flex-flow and gap: Wrapping and Spacing
justify-content: Alignment Along the Main Axis
align-items: Alignment Along the Cross Axis
align-content: Aligning Lines in a Multi-line Container
flex-grow: How Items Share Free Space
flex-shrink: Shrinking Items When Space Runs Out
flex-basis and the flex Shorthand: 1, auto, none
order and align-self: Controlling Individual Items
margin: auto Tricks in Flexbox
Flexbox Patterns: Navbar, Cards, Sticky Footer and Media Object
Common Flexbox Bugs: min-width: 0, Overflow and Images
Project: Pricing Cards and a Site Header with Flexbox
CSS Grid: the Basics
Introduction to CSS Grid: Lines, Tracks, Cells and Areas
grid-template-columns, grid-template-rows and gap
The fr Unit: Fractions of Free Space
The repeat() Function: Repeating Tracks and Patterns
minmax() and Track Sizing: min-content, max-content, fit-content()
auto-fill vs auto-fit: a Responsive Grid Without Media Queries
Line-based Placement: grid-column, grid-row, span and Negative Lines
Named Grid Lines
grid-template-areas: Page Layout with Named Areas
Project: a Photo Gallery with CSS Grid
CSS Grid: Advanced Techniques
The Implicit Grid: grid-auto-rows and grid-auto-columns
grid-auto-flow and dense: Automatic Item Placement
Alignment in Grid: justify/align-items, -self, -content and place-*
Nested Grids and subgrid
Grid Layouts: Holy Grail, Gallery, Magazine Grid and Overlapping
Grid or Flexbox: Choosing the Right Tool
Project: an Admin Dashboard with CSS Grid
Responsive Design
Responsive Design: Viewport, Fluid Layouts and Approaches
Media Queries: @media Syntax, Types and Logical Operators
Media Features: hover, pointer, orientation and prefers-*
Mobile-first and Choosing Breakpoints
Fluid Typography and Spacing with clamp()
Responsive Media in CSS: aspect-ratio, object-fit and object-position
Container Queries: @container, container-type and cqi Units
Project: a Responsive Landing Page with a Mobile Menu
Modern CSS
CSS Custom Properties: Declaration, Scope and Fallbacks
Themes and Dark Mode: prefers-color-scheme, color-scheme and light-dark()
Native CSS Nesting and the & Selector
Logical Properties and writing-mode: inline/block Instead of left/right
Scrolling: scroll-behavior, scroll-margin, scroll-snap and overscroll
Feature Queries: @supports and Progressive Enhancement
Interaction: cursor, pointer-events, user-select and touch-action
Project: a Portfolio Site with Design Tokens and Dark Mode
Animations and Visual Effects
Transitions: transition, Timing Functions and @starting-style
2D Transforms: translate, rotate, scale, skew and transform-origin
3D Transforms: perspective, rotateX/Y and a Flip Card
@keyframes Animations: the animation Property and Its Settings
Animation Performance and Accessibility: will-change and prefers-reduced-motion
Filters and Blending: filter, backdrop-filter and mix-blend-mode
Clipping and Masking: clip-path and mask-image
Decorative Techniques with ::before and ::after
View Transitions: Smooth Page-to-Page Transitions with CSS
Project: a Set of Animated UI Components
Styling Lists, Tables and Forms
Styling Lists and CSS Counters
Styling Tables: border-collapse, Zebra Stripes, Sticky Header, Responsiveness
Styling Forms: Inputs, Buttons, Focus, appearance and accent-color
Custom Checkboxes, Radios and Switches in Pure CSS
Form States in CSS: :valid, :invalid, :user-invalid and :has()
Project: Styling the Course Application Form
CSS Architecture and Sass
Reset and Normalize: Base Styles for a Project
The BEM Methodology: Blocks, Elements and Modifiers
Organizing CSS in a Project: Files, Layers and Design Tokens
Sass: Installing dart-sass, Variables, Nesting and Partials
Sass Modules: @use, @forward and Built-in Modules
Sass: Mixins, Functions, Loops and Conditionals
Tailwind CSS v4
Tailwind CSS v4: the Utility-first Approach and Setup
Tailwind Utilities: Spacing, Typography, Colors, Flexbox and Grid
Tailwind Variants: Responsive, States, Dark Mode and group/peer
Customizing Tailwind v4: @theme, Custom Utilities and Components
Project: Landing Page Sections with Tailwind CSS
Performance and the Final Project
CSS Performance: Critical CSS, Font Loading and Core Web Vitals
From Figma Mockup to Code: Measurements, Assets and a Build Plan
Final Project: Building a Figma Mockup and Publishing It on GitHub Pages

HTML & CSS course · CSS Grid: the Basics

Named Grid Lines

🔒 This is the beginning of the lesson. The full lesson is available with a subscription.

Create account Log in

← Previous lesson🔒 Line-based Placement: grid-column, grid-row, span and Negative Lines Next lesson →🔒 grid-template-areas: Page Layout with Named Areas

PROWIDIT Education Academy

Online programming courses in Baku. Live lessons in Azerbaijani and Russian, 80% practice, mentor support and job placement assistance.

Front End

HTML & CSS JavaScript TypeScript React Next.js Vue.js

Back End

SQL (PostgreSQL, MySQL) PHP Laravel Python Algorithms Django & FastAPI Node.js Full Stack

Tools & AI

Git & GitHub Docker & deployment AI for developers

Useful links

Free trial lesson Mentoring & interviews For companies Blog FAQ

Contacts

+994 77 333 38 36 info@prowid.com Video lessons Send a request

© 2021–2026 Prowid — IT Education Academy. All rights reserved. Baku, Azerbaijan