Web
48 free lessons across 2 courses in this category.
Courses
Topics across courses
Getting started
- Your First HTML PageHTML · Create a valid HTML5 document, save it, and view it in a browser.
- Comments and Character EntitiesHTML · Add helpful HTML comments and safely represent reserved characters.
- The Document Head and Meta TagsHTML · Configure a page title, encoding, viewport, and other document metadata.
- HeadingsHTML · Build a clear, accessible heading hierarchy with h1 through h6.
- Paragraphs and Line BreaksHTML · Mark up readable paragraphs, deliberate line breaks, and text emphasis.
- What Is CSS?CSS · Understand how CSS turns structured HTML into a visually designed page.
- Adding CSS to HTMLCSS · Connect an external stylesheet and understand the other ways CSS can be included.
- CSS SyntaxCSS · Write valid rules with selectors, properties, values, and comments.
Text and media
- LinksHTML · Create understandable internal, external, email, and in-page links.
- ImagesHTML · Embed responsive images with useful alternatives and stable dimensions.
- Audio and VideoHTML · Embed HTML5 media with controls, fallback formats, captions, and transcripts.
- Figures and CaptionsHTML · Associate an image or illustration with a meaningful visible caption.
Page structure
- ListsHTML · Create semantic unordered, ordered, and description lists.
- TablesHTML · Create an accessible data table with captions and associated headers.
- div and spanHTML · Use generic containers only when a semantic element does not fit.
- Semantic TagsHTML · Structure a modern page with HTML5 landmarks and content elements.
- Block vs Inline ElementsHTML · Understand normal-flow behavior without confusing HTML meaning with CSS display.
Forms and interactivity
Attributes, accessibility, and SEO
- AttributesHTML · Configure HTML elements with global, element-specific, and Boolean attributes.
- Accessibility BasicsHTML · Apply essential accessibility practices from the start of every HTML page.
- SEO-Friendly Meta TagsHTML · Create useful search snippets and sharing metadata without outdated tricks.
- FaviconsHTML · Add a recognizable browser-tab icon with modern link markup.
Going further
- Adding CSS to a PageHTML · Connect CSS to HTML with an external stylesheet or small embedded styles.
- Adding JavaScript to a PageHTML · Load JavaScript safely and progressively enhance semantic HTML.
- iframesHTML · Embed permitted external content with titles, restrictions, and responsive sizing.
- Validating HTMLHTML · Find markup errors with a validator, browser tools, and accessibility checks.
Selectors and text
- CSS SelectorsCSS · Target elements with type, descendant, child, attribute, and grouped selectors.
- Classes and IDsCSS · Choose reusable classes and use IDs for unique document targets.
- Fonts and TextCSS · Create readable typography with font stacks, spacing, alignment, and line length.
- Links and ListsCSS · Style navigation and content lists without removing useful interaction cues.
Box model and layout
- The Box ModelCSS · Understand content, padding, border, margin, sizing, and overflow.
- Margin and PaddingCSS · Create consistent inner and outer spacing with logical properties and shorthand.
- Display and VisibilityCSS · Control box behavior and hide content without confusing users.
- PositioningCSS · Use relative, absolute, fixed, and sticky positioning while preserving document flow.
- FlexboxCSS · Arrange items in one dimension with flexible sizing, alignment, wrapping, and gaps.
- CSS GridCSS · Build two-dimensional layouts with tracks, gaps, placement, and responsive repetition.
Colors, backgrounds, and images
Responsive design
- CSS UnitsCSS · Select absolute, font-relative, viewport, percentage, and container-aware units.
- Media QueriesCSS · Adapt layouts to available space and user preferences with mobile-first queries.
- Responsive ImagesCSS · Prevent image overflow and deliver suitable image dimensions for different screens.
Modern CSS
- CSS VariablesCSS · Define reusable custom properties, local overrides, fallbacks, and design tokens.
- TransitionsCSS · Animate state changes with focused transitions that respect motion preferences.
- Hover and Focus StatesCSS · Design clear interaction feedback for pointer, keyboard, and touch users.
- SpecificityCSS · Predict which declaration wins and keep the cascade easy to maintain.