Web foundations
Learn it by doing it.

Find a specific skill

1. 01HTML basics: Document shellThe doctype selects standards mode; html contains metadata in head and visible content in body.Practice
2. 02HTML basics: Page title and languageA descriptive title names the browser tab; the lang attribute identifies the language of the document.Practice
3. 03HTML basics: Heading hierarchyHeading levels describe nested sections, not a choice of font size.Practice
4. 04HTML basics: Readable paragraphsA paragraph groups related sentences. Separate ideas deserve separate p elements rather than repeated line breaks.Practice
5. 05HTML basics: Ordered task listsUse ol when the order of steps changes the meaning of the task.Practice
6. 06HTML basics: Unordered feature listsUse ul for a set whose items have no required sequence.Practice
7. 07HTML basics: Description listsA description list connects terms in dt to explanations in dd.Practice
8. 08HTML basics: Emphasis and importanceem conveys stress emphasis; strong conveys importance, seriousness, or urgency. Neither is a generic styling hook.Practice
9. 09HTML basics: Quoted contentblockquote identifies an extended quotation; cite names a work, not merely a person.Practice
10. 10HTML basics: Dates and machine-readable timetime can display a friendly label while datetime supplies an unambiguous machine-readable date.Practice
11. 11HTML basics: Data attributesdata-* attributes store page-specific information without pretending that it is visible text or a standard HTML behavior.Practice
12. 12HTML basics: Reusable class namesClasses let multiple elements share presentation. IDs should identify a single element within a document.Practice
13. 13Semantic structure: Site headerA top-level header introduces the page or site. It is not a replacement for the main content landmark.Practice
14. 14Semantic structure: Primary navigationA nav landmark groups major navigation links; a label distinguishes it from another navigation region.Practice
15. 15Semantic structure: Main landmarkThe main landmark contains the page-specific content, excluding repeated site navigation.Practice
16. 16Semantic structure: Named sectionsA section groups a distinct topic. aria-labelledby can give the region its name from a visible heading.Practice
17. 17Semantic structure: Independent articlesAn article is a self-contained composition that could make sense when distributed independently.Practice
18. 18Semantic structure: Supporting asidesAn aside contains related but secondary material. Essential task instructions belong in the main flow.Practice
19. 19Semantic structure: Page footerA footer contains information about its nearest section or the page, such as related links or authorship.Practice
20. 20Semantic structure: Contact informationaddress marks contact information for its nearest article or body, not every postal address mentioned in text.Practice
21. 21Semantic structure: Nested heading orderHeading order follows the relationship between topics. A subsection of h2 normally starts at h3.Practice
22. 22Semantic structure: Complete page outlineA clear page outline separates site navigation, the primary task, and supporting information.Practice
23. 23Links and media: Relative navigation linksA root-relative href resolves from the site root; a fragment targets an element in the same document.Practice
24. 24Links and media: Descriptive link textA link should communicate its destination without requiring the reader to guess from nearby sentences.Practice
25. 25Links and media: Current-page navigationaria-current="page" identifies the active page within navigation without making the link disappear.Practice
26. 26Links and media: Images with useful alt textAlternative text communicates the relevant content of an informative image. Purely decorative images use empty alt text.Practice
27. 27Links and media: Figures and captionsfigure groups a self-contained image with a figcaption that provides visible context.Practice
28. 28Links and media: Responsive image dimensionsIntrinsic width and height let the browser reserve the image aspect ratio before loading the asset.Practice
29. 29Links and media: Downloadable resourcesThe download attribute suggests downloading a same-origin resource; meaningful text still identifies the file.Practice
30. 30Links and media: Media fallback copyMedia needs usable alternatives. A transcript link provides access to spoken information beyond player controls.Practice
31. 31CSS basics: Element selectorsAn element selector applies declarations to every matching element in its scope.Practice
32. 32CSS basics: Class selectorsA class selector targets an intentional reusable hook rather than every element of a type.Practice
33. 33CSS basics: Color tokensCustom properties centralize reusable values; var() reads a token and can provide a fallback.Practice
34. 34CSS basics: Readable typographyFont size, line height, and line length work together. Line height without a unit scales with the text.Practice
35. 35CSS basics: Spacing with paddingPadding creates space inside the border; it does not separate the element from its neighbors.Practice
36. 36CSS basics: Spacing with marginMargin creates space outside an element. Block margins can collapse in normal flow.Practice
37. 37CSS basics: BordersA visible border needs a style as well as a width and color; it participates in box sizing.Practice
38. 38CSS basics: Background surfacesA background should keep foreground content readable rather than carry meaning alone.Practice
39. 39CSS basics: Reusable utility classesSmall utility classes should have a predictable job and avoid accidental changes to unrelated components.Practice
40. 40CSS basics: Hover statesHover is one interaction state, not the only indication that a control can be used.Practice
41. 41CSS basics: Focus-visible statesKeyboard focus needs a visible indicator. focus-visible can provide one without relying on hover.Practice
42. 42CSS basics: Cascade reviewWith equal origin, importance, layer, and specificity, a later declaration wins for the same property.Practice
43. 43Layout and responsive: Flexible rowsA flex container lays out its direct children along a main axis; gap separates items.Practice
44. 44Layout and responsive: Wrapping navigationAllow a navigation row to wrap rather than force links beyond a narrow viewport.Practice
45. 45Layout and responsive: Two-column gridFractional grid tracks share available space. minmax(0,1fr) lets long content shrink within a track.Practice
46. 46Layout and responsive: Repeatable card gridauto-fit repeats as many tracks as fit; the minimum controls when cards wrap.Practice
47. 47Layout and responsive: Minmax tracksminmax defines a lower and upper track size; a zero minimum prevents intrinsic text width from forcing overflow.Practice
48. 48Layout and responsive: Stable gapsUse gap for space between flex or grid items instead of manually adding margins to every child.Practice
49. 49Layout and responsive: Intrinsic sizingA flexible image can use its natural ratio while fitting its container.Practice
50. 50Layout and responsive: Content-width constraintsA width cap keeps long lines readable while inline padding protects small viewports.Practice
51. 51Layout and responsive: Responsive imagesA percentage width responds to the containing block; automatic height preserves aspect ratio.Practice
52. 52Layout and responsive: Mobile media queryA max-width media query applies at and below its boundary; the base layout should remain usable without it.Practice
53. 53Layout and responsive: Desktop media queryA min-width query layers a wider arrangement on top of a simple mobile-first layout.Practice
54. 54Layout and responsive: Source orderVisual reordering can differ from keyboard and reading order. Preserve meaningful source order instead.Practice
55. 55Layout and responsive: Overflow preventionShrinkable tracks and wrapping text solve causes of overflow without hiding inaccessible content.Practice
56. 56Layout and responsive: Responsive layout checkpointA robust layout combines intrinsic sizing, bounded tracks, and spacing that survives narrow widths.Practice
57. 57Visual polish: Button hierarchyA primary action deserves stronger visual emphasis than secondary controls without making either unreadable.Practice
58. 58Visual polish: Focus ringsA separated, visible outline makes the keyboard target identifiable without shifting layout.Practice
59. 59Visual polish: Card rhythmConsistent internal spacing makes repeated content easier to compare than arbitrary per-card offsets.Practice
60. 60Visual polish: Readable contrastForeground and background work as a pair. Color choice still needs contrast measurement in the real product.Practice
61. 61Visual polish: Status colorsColor can reinforce a written status but should never be its only carrier.Practice
62. 62Visual polish: Subtle shadowsA restrained shadow can separate surfaces; it is not a substitute for content hierarchy.Practice
63. 63Visual polish: Consistent radiiA small radius system keeps related controls consistent without making every surface look like a pill.Practice
64. 64Visual polish: Visual polish checkpointReadable typography, one action hierarchy, and a keyboard focus treatment are useful polish before decorative effects.Practice
65. 65JavaScript basics: Constantsconst prevents reassignment of a binding. It does not deeply freeze an object stored in that binding.Practice
66. 66JavaScript basics: Mutable valueslet allows a value to change; choose it when reassignment is part of the task.Practice
67. 67JavaScript basics: Readable stringsStrings represent text; quotes delimit the value, while concatenation combines text without changing its meaning.Practice
68. 68JavaScript basics: Number calculationsArithmetic operates on numbers. Converting units explicitly keeps an otherwise correct expression from answering the wrong question.Practice
69. 69JavaScript basics: Boolean decisionsComparisons produce booleans. Strict equality avoids implicit conversion when checking a known type.Practice
70. 70JavaScript basics: Conditional branchesAn if statement chooses a path from a condition; the else branch handles the other case.Practice
71. 71JavaScript basics: ArraysArrays hold ordered values. Index zero refers to the first item.Practice
72. 72JavaScript basics: Array lengthlength counts the array slots; the last valid index is normally length minus one.Practice
73. 73JavaScript basics: Named functionsA named function groups a reusable operation; calling it runs its body.Practice
74. 74JavaScript basics: Function parametersParameters let the same function work with different inputs without duplicating its body.Practice
75. 75JavaScript basics: Return valuesreturn supplies a result to the caller. A function without an executed return yields undefined.Practice
76. 76JavaScript basics: Template stringsBacktick template strings can interpolate expressions with ${...}; ordinary quoted strings do not interpolate them.Practice
77. 77DOM and events: Query one elementquerySelector returns the first matching element or null. Guard a lookup before updating an optional element.Practice
78. 78DOM and events: Query a buttonA selector should identify the intended control rather than an unrelated first button.Practice
79. 79DOM and events: Click listenersAn event listener registers behavior for a future event; pass a function rather than its return value.Practice
80. 80DOM and events: Text updatestextContent inserts text rather than parsing HTML, making it the appropriate choice for a plain status message.Practice
81. 81DOM and events: Class additionsclassList.add adds a class without replacing unrelated classes already on the element.Practice
82. 82DOM and events: Class togglesclassList.toggle alternates membership unless given an explicit force boolean.Practice
83. 83DOM and events: Data attributesdataset exposes data-* values as strings; data-lesson-id becomes dataset.lessonId.Practice
84. 84DOM and events: Keyboard-friendly buttonsA native button already supports keyboard activation. A click listener can serve mouse, touch, and keyboard users.Practice
85. 85DOM and events: Status announcementsUpdating an existing live region can communicate a status without moving focus away from the user.Practice
86. 86DOM and events: DOM behavior checkpointA reliable interaction finds its elements, guards their absence, and makes one deliberate update in response to an event.Practice
87. 87Forms and validation: Form structureA form groups related input controls. This lab practices structure without submitting any data.Practice
88. 88Forms and validation: Explicit labelsThe for attribute on a label connects it to the input with the matching id.Practice
89. 89Forms and validation: Email input typestype="email" provides browser-level format validation. It does not prove that the mailbox exists.Practice
90. 90Forms and validation: Required fieldsrequired participates in native constraint validation; identify the requirement in visible copy too.Practice
91. 91Forms and validation: Help text relationshipsaria-describedby associates a control with help text identified by an existing element id.Practice
92. 92Forms and validation: Error messagesAn error needs both a specific explanation and a programmatic relationship to the invalid control.Practice
93. 93Forms and validation: Input descriptionsA placeholder is not a replacement for a visible label or persistent help text.Practice
94. 94Forms and validation: Grouped choicesfieldset and legend give a related set of form controls a shared accessible name.Practice
95. 95Forms and validation: Confirmation statesA status region can announce a completed action while leaving focus on the current control.Practice
96. 96Forms and validation: Validation checkpointAn accessible input combines a label, the appropriate type, a visible requirement, and connected help.Practice
97. 97Accessibility: Accessible namesVisible text usually gives a native button its accessible name. Icon-only controls need an equivalent name.Practice
98. 98Accessibility: Image alternativesWrite alt text for the image purpose in this context, not every visual detail. Decorative images use alt="".Practice
99. 99Accessibility: Landmark labelsDistinct names help people differentiate multiple navigation landmarks.Practice
100. 100Accessibility: Keyboard orderNative links and buttons participate in keyboard navigation in source order. Positive tabindex usually creates surprising jumps.Practice
101. 101Accessibility: Visible focusA keyboard target needs an obvious focus indicator. Do not remove outlines without an equally visible replacement.Practice
102. 102Accessibility: Status announcementsrole="status" communicates non-urgent updates without requiring an interrupting alert or focus change.Practice
103. 103Accessibility: Heading structureHeadings organize navigable topics. Styling a paragraph to look large does not give it heading semantics.Practice
104. 104Accessibility: Accessibility checkpointAccessible structure should survive without color, hover, or a pointing device.Practice
105. 105SEO, performance, and hosting: Unique page titlesA page title should describe this page rather than repeat the same vague label across the site.Practice
106. 106SEO, performance, and hosting: Meta descriptionsA useful description summarizes the specific page. Search engines may choose a different snippet.Practice
107. 107SEO, performance, and hosting: Canonical pathsA canonical link identifies the preferred URL for duplicate content; it is not a redirect or an indexing guarantee.Practice
108. 108SEO, performance, and hosting: Viewport metadataA device-width viewport lets responsive layouts use the device width rather than a wide desktop layout viewport.Practice
109. 109SEO, performance, and hosting: Asset dimensionsExplicit image dimensions reserve layout space. Below-the-fold images may be lazy-loaded; a hero usually should not be.Practice
110. 110SEO, performance, and hosting: Robots guidanceA robots meta noindex directive asks compatible crawlers not to index a page; they must be allowed to fetch it to see the directive.Practice
111. 111SEO, performance, and hosting: Helpful 404 pagesA useful not-found page offers recovery links, but the server must still return HTTP 404 rather than disguising it as success.Practice
112. 112SEO, performance, and hosting: Launch checklistA static page needs clear metadata and crawlable links; testing rendering alone does not verify HTTP behavior or indexing.Practice
113. 113Capstone builds: Personal profileA profile should introduce its subject, expose relevant work, and provide clear navigation rather than a collection of unlabeled boxes.Practice
114. 114Capstone builds: Event landing pageAn event page should answer what, when, and where before asking someone to take action.Practice
115. 115Capstone builds: Accessible signup flowA signup interface combines labeled controls, a visible requirement, help, and a non-submitting review action in this sandbox.Practice
116. 116Capstone builds: Course dashboardA course dashboard should show an honest progress measure and the next useful action.Practice
117. 117Capstone builds: Service status pageStatus needs a readable state, an observation time, and context that distinguishes an incident from an assumption.Practice
118. 118Capstone builds: Resource directoryA directory groups resources under meaningful headings and uses links that identify their destinations.Practice
119. 119Capstone builds: Portfolio case studyA case study explains the problem, the work, and the evidence for the result without inventing impact metrics.Practice
120. 120Capstone builds: Web foundations finaleThe final page brings together document metadata, semantic structure, readable navigation, and a usable primary action.Practice

Workshop reference

Use Run & inspect to examine the current code, Check lesson to verify the complete pattern, and the file tabs to switch between HTML, CSS, and JavaScript. Examples are cumulative; use the hint only when you need it.

HTML and CSS use a safe inert preview. JavaScript is structurally checked, not executed.