Contents
HTML & CSS tutorial
A step-by-step HTML & CSS course from scratch: from your first program to advanced topics.
1.HTML basics
- What is HTMLWhat HTML is, what tags and elements consist of, how to nest them and how to write comments.
- Document structureThe skeleton of an HTML page — doctype, html, head and body, the encoding, the tab title, viewport and your first index.html file.
- Headings and paragraphsSix levels of headings, paragraphs, spaces and line breaks, the thematic break and quotes in HTML.
- Text formattingInline tags for text — strong and em, mark, del and ins, sub and sup, code, kbd and pre, abbr and q.
- LinksThe a tag and the href attribute, absolute and relative addresses, jumps within a page, a new tab, email and phone links.
- ImagesThe img tag, the src and alt attributes, sizes, captions with figure and figcaption, image formats and lazy loading.
- ListsBulleted and numbered lists, numbering options, nested lists and description lists in HTML.
- TablesTables in HTML — rows and cells, column headers, thead, tbody, tfoot and caption, merging cells.
- AttributesHow HTML attributes work, the global attributes id, class, title, lang, hidden and style, boolean attributes and data attributes.
- Semantic markupThe neutral div and span and the meaningful header, nav, main, article, section, aside and footer tags for page structure.
- Special charactersHTML entities — how to show reserved signs on a page, the non-breaking space, the copyright sign, the em dash and any character by its number.
2.Forms
- FormsHow a form works in HTML — the form tag, the input field, the name attribute, the submit button, action and the GET and POST methods.
- Input typesThe type attribute of input — text, email, password, numbers and sliders, dates, checkboxes, radio buttons, colour and file.
- Labels and field groupsThe label tag and linking a label to a field with for and id, nested labels, grouping fields with fieldset and legend.
- Select lists and multi-line textThe select dropdown and option, optgroup groups, choosing several options, textarea and datalist suggestions.
- ButtonsThe button tag and its submit, reset and button types, a button with an icon, a disabled button and the difference between a button and a link.
- Form validationBuilt-in field validation in the browser — required, minlength and maxlength, min and max, pattern, styling errors and novalidate.
3.HTML: next steps
- Audio and videoThe video and audio tags, the controls panel, autoplay, looping, several formats with source and subtitles.
- Embedding pages: iframeThe iframe tag — embedding another page, a map or a video, size and title, srcdoc, lazy loading and sandbox restrictions.
- Meta tags and SEOWhat goes into head — title, meta description, viewport, Open Graph for social networks, the site icon, canonical and robots.
- AccessibilityHow to make a page usable for everyone — keyboard use, focus, labels and alt, aria-label, contrast and meaningful tags.
- SVG graphicsSVG vector graphics right in HTML — shapes, viewBox and scaling, strokes and outlines, path, fill and currentColor.
- Disclosure widgets and dialogsThe details and summary tags, an accordion, the dialog modal window, closing with form method=dialog and popover blocks.
4.CSS basics
- What is CSSHow a CSS rule works, where to write styles, how to attach a separate file and why comments are useful.
- SelectorsHow to pick elements for styling — by tag, class, id, nesting and attribute.
- Cascade and specificityWhich rule wins when several set the same property: order, specificity, inheritance and !important.
- ColorsText and background color, ways to write a color in CSS — names, hex, rgb() and hsl() — and transparency.
- UnitsPixels, percentages, em, rem and viewport units — how they differ and when to use which.
- Text and fontsFont family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.
- The box modelWhat an element consists of in CSS — content, padding, border and margin, sizes, centering and box-sizing.
- Backgrounds and bordersBackground images, their repeat, size and position, border styles, rounded corners and outline.
- The display propertyBlock and inline elements, the values block, inline, inline-block and none, hiding elements.
- Pseudo-classesStyles for element states and positions — hover, focus, links, first-child, nth-child, not and form fields.
- Pseudo-elementsHow to style part of an element or add decorative content — before, after, first-letter, marker, placeholder and selection.
- CSS variablesCustom properties — how to declare a variable, read it with var(), override it and give a fallback value.
- Global valuesThe inherit, initial, unset and revert keywords that every CSS property accepts, and the all property that resets every style at once.
- Styling lists and tablesMarker types and list-style, custom markers with ::marker, a menu from a list without bullets, and table borders, padding, alignment, zebra stripes and the caption.
- Styling formsHow to style fields and buttons — padding and borders, the focus state, placeholder, disabled and invalid fields, accent-color and custom checkboxes with appearance: none.
- Web fontsHow to use your own font — the @font-face rule, the woff2 format, font-display, variable fonts, Google Fonts with preconnect, fallback fonts and choosing between self-hosting and a CDN.
- CSS countersAutomatic numbering with CSS — counter-reset, counter-increment, the counter() and counters() functions, numbered headings, nested numbering 1.1, 1.2 and the @counter-style rule.
5.Page layout
- PositioningThe position property — static, relative, absolute, fixed and sticky, the top, right, bottom, left and inset offsets.
- FlexboxLaying elements out in a row or a column with flexbox — axes, direction, gaps, alignment and wrapping.
- Flex itemsHow to control individual items in flexbox — flex-grow, flex-shrink, flex-basis, the flex shorthand, align-self, order and margin auto.
- GridCSS Grid — columns and rows, the fr unit, the repeat and minmax functions, gaps and a responsive grid without media queries.
- Grid lines and areasHow to put an item in the right place of a grid — line numbers, grid-column and grid-row, span, named areas with grid-template-areas.
- Media queriesResponsive layout with media queries — the viewport tag, the @media rule, min-width and max-width, the mobile first approach and rebuilding the skeleton.
- Responsive imagesHow pictures adapt to the screen — max-width, aspect-ratio, object-fit, the srcset and sizes attributes, the picture element.
- Overflow and layersWhat to do when content does not fit into a block — overflow, scrolling, an ellipsis — and how z-index decides which element lies on top.
- Container queriesHow a component adapts to the width of its block rather than the window — container-type, the @container rule, container names and cqi units.
- FloatsHow float works, wrapping text around an image, clear and display: flow-root, and why columns are built with flexbox and grid today.
- ScrollingSmooth scrolling with scroll-behavior, scroll-margin-top for anchors under a sticky header, a scroll-snap carousel and overscroll-behavior.
- SubgridThe subgrid value — how a nested block uses the lines of the parent grid, aligning headings, text and buttons across neighbouring cards, and browser support.
- Anchor positioningCSS anchor positioning — how to attach a tooltip or menu to another element: anchor-name, position-anchor, the anchor() function, position-area, fallback positions with position-try-fallbacks and browser support.
6.Effects and animation
- Shadows and gradientsBlock and text shadows — box-shadow and text-shadow, linear and radial gradients, color stops.
- TransitionsSmooth style changes with transition — duration, delay, timing functions, what can be animated and where to write the transition.
- TransformsThe transform property — moving, rotating, scaling and skewing an element, the transform-origin pivot and the separate translate, rotate and scale properties.
- AnimationsCSS animations — the @keyframes rule, the animation property, repeats and direction, percentage keyframes, fill-mode and prefers-reduced-motion.
- FiltersThe filter property — blur, black and white, brightness, contrast and the contour shadow drop-shadow, plus backdrop-filter for a frosted glass effect.
- View TransitionsSmoothly changing page states — document.startViewTransition(), the view-transition-name property, the ::view-transition pseudo-elements and transitions between pages.
- Clipping and masksHow to give an element any shape — clip-path with a circle, an ellipse and a polygon, a smooth fade with mask-image and a gradient, and text wrapping around a shape with shape-outside.
- Entry and exit animationsHow to show and hide an element smoothly — the @starting-style rule, transition-behavior: allow-discrete, transitions from display: none, dialog and popover open and close animations, and interpolate-size for height: auto.
- Scroll-driven animationsAnimations tied to scrolling — animation-timeline with the scroll() and view() functions, a reading progress bar, revealing blocks on scroll, animation-range, browser support and a fallback.
7.Modern CSS
- CSS functionsCalculations right in CSS — calc(), min(), max() and clamp(), mixing units, fluid sizes and functions together with variables.
- CSS nestingNative rule nesting in CSS — rules inside rules, the & symbol, nested media queries and browser support.
- Modern selectorsThe :is(), :where(), :not() with a list and :has() selectors — how to shorten long selectors and pick a parent by its content.
- Dark modeHow to make a dark theme for a site — the color-scheme property, the prefers-color-scheme media query, colors in variables, the light-dark() function and a theme switch.
- Logical propertiesProperties that depend on the text direction rather than the sides of the screen — margin-inline, padding-block, inline-size, inset-inline and writing-mode.
- Organizing CSSKeeping project styles in order — external files, base styles, BEM class names, comments and @layer cascade layers.
- Developer toolsHow to inspect and debug a layout in the browser — the Elements panel, styles and crossed-out rules, the box model, flex and grid overlays, device mode.
- Modern colorsThe oklch() function and why it makes palettes easy, mixing colors with color-mix() and the relative syntax oklch(from ...).
- Feature queries: @supportsThe @supports rule and feature queries, the not, and and or conditions, checking selectors with selector() and progressive enhancement.
- Cascade layers: @layerThe @layer rule — how layers change the cascade, the order of layers, unlayered styles, putting files and third-party libraries into a layer.
- Style scope: @scopeThe @scope rule — styles that apply only inside a component, the lower boundary to, the :scope pseudo-class, root proximity in conflicts, a comparison with BEM and nesting, and browser support.
- Typed variables: @propertyThe @property rule — how to give a CSS variable a type, inheritance and an initial value, why it can then be animated, a smooth gradient and a rotating angle.
- Page speedFast loading basics for HTML and CSS — render-blocking CSS and critical styles, preload and preconnect, image sizes, loading=lazy and fetchpriority, content-visibility and contain, layout shifts and checking in Lighthouse.
8.CSS methodologies and architecture
- Why CSS architecture mattersThe problems of large stylesheets — specificity wars, name conflicts, dead CSS — and what a methodology is.
- BEM: blocksA block in the BEM methodology is a standalone interface component: how to name it, why it is independent and how blocks nest inside each other.
- BEM: elementsAn element in BEM is a part of a block: the name syntax with two underscores, why names do not repeat the nesting and when a part should become a block of its own.
- BEM: modifiersA BEM modifier changes the look or state of a block or an element: boolean and key-value modifiers, element modifiers.
- BEM: mixesA BEM mix is several entities on one tag: a node that is both a block and an element, separating outer geometry from appearance.
- BEM rules in HTML and CSSHow to write CSS the BEM way: classes only, no tags or ids, flat specificity, allowed exceptions and a file structure by blocks.
- BEM and SassHow to write BEM more briefly with the Sass preprocessor: &__element and &--modifier, why this does not work in native CSS nesting and how not to spoil specificity.
- OOCSS, SMACSS and ITCSSOther approaches to CSS architecture: object-oriented CSS, SMACSS categories, the ITCSS inverted triangle and how they compare with BEM.
- Utility-first CSS and CSS modulesThe utility-first approach and the idea behind Tailwind, CSS modules and scoped styles in frameworks — how they differ from BEM and when to choose what.
- Practice: converting a component to BEMA step-by-step refactoring of a messy product card into BEM — finding the problems, the blocks, elements and modifiers, and the result before and after.