Prowid logo — programming courses PROWIDIT Education Academy

HTML & CSS

HTML & CSS course — Prowid
Course duration
2 months / 16 lessons
Individual
Per month 160 AZN
Group
Per month 130 AZN
Paying for the full course in a group
15% discount
Installments
50/50
Subscription
from 30 AZN a month
HTML and CSS are the two core languages for building web pages. In this course you will learn from scratch to build modern, responsive and accessible websites.

Enrollment for a new group is open — send a request to reserve your seat

Lessons are taught live in Azerbaijani and Russian.

Enroll in the course Free trial lesson

Or study on your own in your personal account → with a subscription from 30 AZN a month

Course curriculum

How the web works: browser, server, HTTP, domain and hosting
Tools: VS Code, DevTools, Emmet
HTML basics: document structure, text, links, images
Semantic HTML5: header, nav, main, article, section, footer
Lists, tables, iframe, audio and video
Forms, form elements and validation
Meta tags, SEO basics and Open Graph
Accessibility (a11y): alt text, ARIA, keyboard navigation
CSS basics: selectors, cascade, specificity, box model
Colors, fonts, backgrounds and units (px, rem, %, vw)
Flexbox
CSS Grid Layout
Responsive design: media queries, mobile-first, responsive images
CSS variables (custom properties) and at-rules
Transitions, transforms and animations (2D/3D)
Introduction to Sass and Tailwind CSS
Final project: building a Figma design and publishing it on GitHub Pages
How do we teach?

Learning stages

01

Webinar

Students join the lesson live. At the end of each lesson, students are sent a video recording of the class.

02

Homework

Every assignment is based on the topic covered in the webinar. Homework helps you reinforce the material and understand it better.

03

Working with a mentor

The teacher stays in touch with the group both during the course and outside class. Any questions get answered right away.

04

Portfolio

During the course you'll complete several projects on different topics — they'll show employers what you can do.

Self-paced learning

The full curriculum in your personal account

154 topics with theory, examples and practice. The first 8 are free, the rest come with a subscription. Interactive lessons with slides and coding trainers: 141.

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

Group and individual classes include a teacher, homework review and a certificate. The subscription gives you materials, exercises and progress tracking at your own pace, without teacher feedback.

HTML & CSS course: how to enroll

Fill in the form and we will tell you the start date of the next group, the schedule and payment terms. Or come to a free trial lesson first.

+994 77 333 38 36 Or message us on WhatsApp right away info@prowid.com

By submitting the form, you agree that your data will be used only to contact you.

WhatsApp