Responsive layouts and container queries
Build flexible grids, choose viewport breakpoints, and let a reusable component respond to its container with a working query example.
Read lessonLessons and tutorials
Work through a specific problem, then follow the links to the concepts behind it. Learning paths put the lessons in order.
Motion and reduced-motion preferences
Use motion for state feedback, keep changes understandable without animation, and test prefers-reduced-motion with a working toggle.
Read lessonCSS cascade, inheritance, and specificity
Understand why a CSS declaration wins: matching, origin, importance, layers, specificity, inheritance, and source order.
Read lessonWhat npm devDependencies means
Declare build and test tools as development dependencies while distinguishing installation categories from bundled output.
Read lessonMake a readable table with Tailwind 3
Use real table headers and a caption, then keep wide data inside an accessible horizontal scroll region.
Read lessonBuild navigation that stays available with Tailwind 3
Create a wrapping Tailwind 3 navigation bar with real links, a landmark name, and visible keyboard focus.
Read lessonBuild a working dialog with Tailwind 3
Style a native modal dialog with Tailwind 3 and verify opening, Escape, closing, and focus return.
Read lessonStyle real lists with Tailwind 3
Use Tailwind 3 list utilities while preserving list structure and choosing marker placement deliberately.
Read lessonBuild responsive grids with Tailwind 3
Compare fixed grid columns with Tailwind 3 responsive variants and inspect the compiled grid rules.
Read lessonStyle a labeled form with Tailwind 3
Build a Tailwind 3 form with associated labels, native validation, visible focus, and local-only feedback.
Read lessonBuild a content card with Tailwind 3
Create a Tailwind 3 card with a real heading, stable artwork and a descriptive navigation link.
Read lessonStyle usable buttons with Tailwind 3
Build a Tailwind 3 button with a working action, focus feedback, and a genuinely disabled comparison.
Read lessonSet up Tailwind help in VS Code
Configure Tailwind IntelliSense and optional Prettier class sorting for the project’s actual major version.
Read lessonTailwind CSS and Bootstrap: different starting points
Compare utility-first styling with component-oriented defaults without assuming either framework guarantees speed or accessibility.
Read lessonA practical way to learn Tailwind CSS
Learn native CSS first, choose a Tailwind version, and practice translating small layouts into utilities.
Read lessonSet up Tailwind CSS 3 or 4 deliberately
Choose a Tailwind major version, build a small stylesheet, and verify that utility classes appear in the generated CSS.
Read lessonFlexbox vs. Grid: Understanding the Differences
Compare Flexbox lines with shared Grid tracks, see both layouts working, and choose the right model for a real interface.
Read lessonFive ways to center content with Tailwind 3
Compare margins, flex, grid and positioned centering with Tailwind 3, including each layout’s prerequisites.
Read lesson27 Adobe Fonts candidates to compare
Compare verified Adobe Fonts destinations with realistic reading and interface samples, rather than a universal best-font ranking.
Read lessonThe CSS child combinator: match direct children with >
Compare direct-child and descendant selectors using valid nested HTML without adding specificity weight.
Read lessonHTML comments: syntax, useful notes, and what they do not hide
Write HTML comments that explain decisions, inspect their source, and avoid treating them as privacy or access control.
Read lessonWhat version control records
Use commits to record project history, distinguish local work from remote sharing, and understand Git’s distributed model.
Read lessonWhat an IDE helps you do
Distinguish editors and integrated development environments, and evaluate them with a small HTML and CSS task.
Read lessonSize responsive video with Tailwind 3
Use aspect-video, full width, and native controls for a self-contained responsive Tailwind 3 video example.
Read lessonMultiple h1 headings: structure, accessibility, and search
Give a page a clear main heading and a logical hierarchy without treating h1 count as a simple ranking rule.
Read lessonSemantic HTML: choose elements for meaning and behavior
Use landmarks, headings, lists, links, and controls for their actual meaning rather than visual resemblance.
Read lessonThe fr unit in Grid: a fraction of remaining space
Size Grid tracks with fractions after gaps and fixed tracks, and understand intrinsic minimum sizing.
Read lessonBuild useful breadcrumb navigation
Show the current page’s place in a hierarchy with named navigation, real parent links and an optional current-page marker.
Read lessonWhat an XML sitemap does
List canonical pages for discovery, keep sitemap entries consistent, and avoid treating submission as indexing proof.
Read lessonWrite CSS for printing
Use @media print to adapt a document for paper, then inspect actual print preview before relying on pagination.
Read lessonBuild a toggle button with a clear state
Use aria-pressed for a button with an on/off state, keep its label stable, and choose a checkbox for form choices.
Read lessonWhat a CSS framework can help with
Evaluate shared design rules, reusable styles, and setup costs without treating a framework as a compatibility guarantee.
Read lessonWhat CSS keyframes do
Define an animation’s states with @keyframes, apply it with animation, and respect reduced-motion preferences.
Read lessonIDs, classes, and element selectors: what to use and why
Use reusable classes for styling, unique IDs for document relationships, and specificity within the complete cascade.
Read lessonTurn off double-space periods in macOS Ventura
Find Ventura’s double-space punctuation setting, verify it in a text field, and distinguish newer macOS interfaces.
Read lessonObserve a task through usability testing
Choose a realistic task, watch without coaching, and distinguish observed difficulties from general conclusions.
Read lessonWhat responsive web design means
Build layouts that adapt to available space with flexible sizing, media queries, and usable content at zoom.
Read lessonWhat Jamstack means in a web project
Understand prebuilt presentation and decoupled services without assuming static pages guarantee speed or security.
Read lessonWhat href means in HTML links and related resources
Use real href destinations, understand fragments and relative URLs, and distinguish links from buttons.
Read lessonWhat below the fold means on a web page
Organize content beyond the first viewport without treating normal scrolling as hidden content.
Read lessonAbsolute URLs and filesystem paths
Distinguish a complete web URL from a root-relative URL and a local filesystem path.
Read lessonWhat above the fold means on a web page
Identify what is initially visible while accounting for viewport height, zoom and content instead of a fixed universal fold.
Read lessonWhat an A/B test can tell you
Compare randomly assigned variants with planned metrics, uncertainty and checks for unintended harm.
Read lessonWhat WYSIWYG editing shows you
Understand visual editing, its preview limits, and why generated HTML still needs inspection.
Read lessonWhat a wireframe helps you decide
Plan a page’s information hierarchy and layout before committing to detailed visuals.
Read lessonWhat an email capture page should explain
Explain the offer and use of an email address clearly, keep fields labeled, and avoid assuming an exchange creates trust.
Read lessonHow relative URLs resolve
Distinguish same-directory, parent-directory and root-relative URLs, including the effect of a document’s base URL.
Read lessonMeta elements: charset, viewport, description, and indexing
Put valid metadata in the document head and distinguish meta from title and search ranking promises.
Read lessonWhat a hero section is for
Use a prominent introduction when it helps orient readers, without inventing a hero HTML element.
Read lessonWhat a headless CMS separates
Understand API-delivered content, editorial interfaces, and the front-end responsibilities a headless CMS leaves to you.
Read lessonWrite a clear call to action
Use a descriptive action label, choose link or button semantics, and explain what happens next.
Read lessonA useful 404 page needs a 404 response
Pair a helpful missing-page message with the correct HTTP status, and distinguish it from a soft 404.
Read lessonWhat UX means for a website
Review the whole task, including clarity, recovery and the outcome beyond the screen’s appearance.
Read lessonWhat UI means in a web interface
Understand controls, content hierarchy and feedback as parts of the user interface, then inspect a small example.
Read lessonWhat src means in HTML, and how it differs from href
Load image, script, or media resources with src and resolve URLs without confusing them with navigation links.
Read lessonThe rem unit: root-relative size without nested compounding
Use root-relative dimensions and spacing while distinguishing explicit rem values from CSS inheritance.
Read lessonWhat rel="nofollow" means
Use nofollow, sponsored and ugc deliberately, and distinguish link qualification from preventing indexing.
Read lessonHow feature branches keep a change focused
Use a Git branch for a scoped change and understand what remains shared in a working directory.
Read lessonThe em unit: local font-relative sizing and compounding
Resolve em from the correct font size, compare nested font sizing, and distinguish media-query units from element styles.
Read lessonWhat people mean by a dofollow link
Understand ordinary HTML links, why dofollow is not an HTML attribute, and when a rel qualifier is needed.
Read lessonImage alt text: the attribute, its purpose, and useful examples
Write context-appropriate image alternatives and distinguish informative, decorative, and linked images.
Read lessonHow UI and UX fit together
Distinguish the interface people operate from the broader experience of completing a task.
Read lessonFive practical checks for front-end code
Review readable structure, maintainability, accessibility, measured performance and proportionate reuse.
Read lessonAdd a favicon and verify where it appears
Declare a square site icon with rel="icon", use suitable formats and sizes, and test browser and search requirements separately.
Read lessonWhen a detailed design prototype helps
Use a detailed prototype to test typography, content and states without treating a static mockup as a finished interface.
Read lessonUse a rough prototype to test the structure
Use sketches and simple prototypes for early questions, and recognize which behavior they cannot establish.
Read lessonWhat front-end design involves
Connect content, visual decisions and working HTML and CSS through a small, testable interface.
Read lessonChoose responsive breakpoints from the content
Use media queries when a layout needs room, test between widths, and avoid treating breakpoints as device labels.
Read lessonInline and block: CSS boxes and HTML content are different
Compare inline, block, and inline-block behavior without treating display as an HTML content-model rule.
Read lessonHTML wrappers: choosing div, span, or a semantic container
Choose a wrapper by its meaning and content model, then apply layout without confusing CSS display with HTML semantics.
Read lessonWhat developer experience includes
Evaluate documentation, feedback loops and recovery steps with a concrete development task.
Read lessonWrite useful CSS comments
Use valid CSS comment syntax to explain constraints and decisions without restating declarations.
Read lessonControl textarea resizing with CSS
Use resize on a textarea, keep its label, and prefer vertical resizing when a fixed width matters.
Read lessonIs there a CSS parent selector?
Use :has() to style a parent from its descendants or sibling relationships, with keyboard interaction, specificity, limitations, and support.
Read lessonChange an input’s placeholder color
Style placeholder text with ::placeholder while keeping a visible label and readable contrast.
Read lessonCenter text vertically with CSS
Use flex or grid alignment for multiline text and understand the limits of line-height and vertical-align.
Read lessonCenter an element horizontally with CSS
Choose horizontal centering for a block, inline content, or items in a layout container.
Read lessonChoose useful professional development spending
Match a learning budget to a concrete skill gap, verify reimbursement rules, and evaluate current course or event details.
Read lessonMake text bold with font-weight
Use font-weight for visual weight, strong for importance, and account for the weights your font provides.
Read lessonWhen to use margin, padding, or gap
Distinguish outside spacing, inside spacing, and spacing between flex or grid items.
Read lessonRemove a link underline without hiding the link
Use text-decoration for link underlines and retain visible link and keyboard-focus cues.
Read lessonWhen to use user-select: none
Limit user-select: none to interface fragments that should not be selected; keep article text copyable.
Read lesson