Thursday, August 6, 2026

120-Day HTML 5 Study Plan

 

As a front-end developer, I think this is an excellent, deep-dive curriculum. HTML5 is often rushed through, but truly mastering its semantic tags, accessibility features, and native APIs (like Canvas and Web Storage) is what separates a junior developer from a senior one.

Because a detailed breakdown of all 120 days is too massive for a single response, I will provide Phase 1 (Days 1–30) and Phase 2 (Days 31–60) here.

Phase 1: Foundations (Days 1–30)

Day 1: HTML Document Structure

  • Define Goal: Understand the mandatory boilerplate required for a browser to render a modern web page correctly without triggering "quirks mode."

  • Instructions: Create an index.html file. Type <!DOCTYPE html> at the very top. Below it, add an <html> tag enclosing a <head> and a <body>. Open this file in your browser.

Day 2: Head Elements

  • Define Goal: Configure the invisible metadata that instructs the browser on how to handle the document, its encoding, and its title.

  • Instructions: Inside your <head>, add <meta charset="UTF-8"> (to support all characters), <title>My First Webpage</title>, and link a dummy CSS file using <link rel="stylesheet" href="style.css">.

Day 3: Text Elements

  • Define Goal: Establish a semantic typographic hierarchy so search engines and screen readers understand the structure of your content.

  • Instructions: Inside the <body>, write an <h1> tag for the page title. Add an <h2> for a subtitle, and write two paragraphs of text using <p> tags.

Day 4: Inline Elements

  • Define Goal: Apply text-level semantics to highlight specific words within a block of text without breaking the document flow.

  • Instructions: Inside your paragraphs, wrap a highly important word in <strong> (bold semantics), an emphasized word in <em> (italic semantics), and a generic word in a <span> (no semantics, used for styling later).

Day 5: Lists

  • Define Goal: Group related items together sequentially or non-sequentially.

  • Instructions: Create a recipe page. Use an unordered list <ul> with <li> tags for the ingredients (order doesn't matter) and an ordered list <ol> with <li> tags for the cooking steps (order matters).

Day 6: Links

  • Define Goal: Create the fundamental building block of the web: the hyperlink, allowing users to navigate between documents.

  • Instructions: Use the anchor tag <a>. Set the href attribute to "[https://google.com](https://google.com)". Add target="_blank" so it opens in a new tab.

Day 7: Images

  • Define Goal: Embed visual media while ensuring visually impaired users and search engine bots can understand what the image depicts.

  • Instructions: Add an <img> tag. Set the src to a local or remote image URL. You must add an alt="Description of image" attribute for accessibility.

Day 8: Tables

  • Define Goal: Display 2D tabular data using semantic row and column markup.

  • Instructions: Build a <table>. Inside, create a table row <tr>. Inside the row, add table headers <th> (e.g., Name, Age). Create another <tr> below it and fill it with table data <td> (e.g., John, 25).

Day 9: Forms Basics

  • Define Goal: Create the UI necessary to collect user input and submit it to a server.

  • Instructions: Create a <form>. Inside, add a text <input> and a submit <button>. Crucially, wrap the input's text description in a <label> tag.

Day 10: Form Attributes

  • Define Goal: Implement client-side validation and UX hints without writing JavaScript.

  • Instructions: Add the required attribute to your text input so the form cannot submit empty. Add placeholder="Enter your name" to give the user a hint inside the text box.

Day 11: Semantic Elements

  • Define Goal: Move away from "div soup" (using generic <div> tags for everything) by defining structural zones.

  • Instructions: Restructure your page. Wrap the top logo/nav in a <header>, your main content in a <main>, group a topic in a <section>, and wrap the copyright info in a <footer>.

Day 12: Navigation

  • Define Goal: Specifically define the main routing block of your website for assistive technologies.

  • Instructions: Create a <nav> element inside your <header>. Inside the <nav>, place a <ul> containing three <li> tags, each containing an <a> link (Home, About, Contact).

Day 13: Block vs Inline

  • Define Goal: Understand standard browser document flow (how elements stack vertically vs horizontally).

  • Instructions: Place two <div> elements next to each other in code; observe they stack vertically (Block). Place two <span> elements next to each other; observe they sit side-by-side (Inline).

Day 14: Iframes

  • Define Goal: Embed a completely separate HTML document (like a third-party widget or video) inside your current page.

  • Instructions: Go to YouTube, click "Share," then "Embed." Copy the <iframe> code and paste it into your <body>.

Day 15: HTML Entities

  • Define Goal: Render characters that are reserved by HTML syntax (like < or >) or special symbols.

  • Instructions: In your footer, write &copy; 2026 My Website. Use &lt;div&gt; if you ever need to display the literal text "" on screen without the browser trying to render it.

Day 16: Forms Advanced Inputs

  • Define Goal: Trigger specialized mobile keyboards and native browser UI pickers.

  • Instructions: Create a new form. Add <input type="email"> (forces @ symbol on mobile keyboards), <input type="date"> (triggers native calendar picker), and <input type="number">.

Day 17–18: Media Elements & Controls

  • Define Goal: Embed audio and video natively without requiring third-party plugins (like the old Flash player).

  • Instructions: Add an <audio> tag and a <video> tag. Provide src attributes pointing to media files. Add the controls attribute (boolean) so the browser renders play/pause/volume buttons. Try adding autoplay muted to the video.

Day 19: HTML5 Global Attributes

  • Define Goal: Attach unique identifiers and categorization tags used by CSS and JavaScript to target elements.

  • Instructions: Add an id="main-heading" to your H1 (IDs must be unique per page). Add class="text-bold card" to a paragraph (classes can be reused). Add title="Tooltip text" to see a native browser tooltip on hover.

Day 20: Data Attributes

  • Define Goal: Store custom data directly in the HTML DOM that you can later extract using JavaScript.

  • Instructions: On a button element, add data-product-id="4922" and data-category="shoes".

Day 21: Forms Validation (Pattern)

  • Define Goal: Use Regular Expressions (Regex) directly in HTML to enforce strict formatting rules.

  • Instructions: Create an <input type="text"> for a zip code. Add pattern="[0-9]{5}" and title="Five digit zip code" to ensure only 5 numbers can be submitted.

Day 22: Fieldset & Legend

  • Define Goal: Group related form inputs together visually and semantically (especially useful for groups of radio buttons).

  • Instructions: Wrap a group of radio buttons in a <fieldset> tag. The first child of the fieldset should be a <legend> tag that asks the question (e.g., <legend>Choose your shipping method</legend>).

Day 23–24: Progress & Meter Elements

  • Define Goal: Display native semantic gauges and progress bars.

  • Instructions: Add <progress value="75" max="100"></progress> to show a task is 75% complete. Add <meter value="0.2" min="0" max="1" low="0.3" high="0.8"> to show a disk-space warning gauge.

Day 25: HTML5 Accessibility (ARIA)

  • Define Goal: Provide context to screen readers when visual context (like icons) is not enough.

  • Instructions: Create a button that only contains an "X" icon for closing a modal. Add aria-label="Close dialog" to the <button> so screen readers announce its purpose.

Day 26: Comments

  • Define Goal: Leave notes in the source code that the browser ignores during rendering.

  • Instructions: Use <!-- This section contains the hero banner --> above your main header.

Day 27: Favicon

  • Define Goal: Add a brand icon to the browser tab next to the page title.

  • Instructions: In the <head>, add <link rel="icon" type="image/x-icon" href="favicon.ico">.

Day 28: Responsive Basics (Viewport)

  • Define Goal: Prevent mobile devices from zooming out and treating your webpage like a tiny desktop screen.

  • Instructions: Ensure <meta name="viewport" content="width=device-width, initial-scale=1.0"> is in your <head>. This is mandatory for modern responsive web design.

Day 29: Best Practices

  • Define Goal: Ensure your markup conforms strictly to W3C standards.

  • Instructions: Copy all your HTML code from the past 28 days and paste it into the W3C Markup Validation Service (validator.w3.org). Fix any missing closing tags or missing alt attributes.

Day 30: Review Phase 1 (Deliverable)

  • Define Goal: Synthesize standard document flow, semantics, and forms.

  • Instructions: Build a 3-page site (Home, Blog, Contact). Use strict semantic tags (<nav>, <main>, <article>), include a table of data, a video, and a fully labeled contact form.

Phase 2: Intermediate HTML5 APIs & Media (Days 31–60)

Day 31: Input Types (range, color, file)

  • Define Goal: Utilize the browser's native OS-level selection widgets.

  • Instructions: Create a form with <input type="color"> (opens the OS color wheel), <input type="range" min="1" max="100"> (creates a slider), and <input type="file" accept=".pdf"> (opens the file browser).

Day 32: Autocomplete Attribute

  • Define Goal: Improve conversion rates by allowing password managers and browsers to auto-fill user data.

  • Instructions: Add autocomplete="shipping street-address" to an address input, and autocomplete="cc-name" to a credit card name input.

Day 33: Datalist Element

  • Define Goal: Provide a native auto-suggest dropdown without needing a heavy JavaScript library.

  • Instructions: Create an <input list="browsers">. Below it, create a <datalist id="browsers"> containing <option value="Chrome">, <option value="Firefox">, etc.

Day 34: Output Element

  • Define Goal: Semantically display the result of a calculation derived from user inputs.

  • Instructions: Create a form with a range slider and a number input. Add an <output name="result"> tag. Use inline JS: <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">.

Day 35: Form Validation Attributes (min, max, step)

  • Define Goal: Strictly constrain numeric input data.

  • Instructions: Create <input type="number" min="0" max="100" step="10">. Try typing "15" and submitting; observe the native browser error tooltip.

Day 36: Hidden Input

  • Define Goal: Pass data to the server that the user doesn't need to see or interact with.

  • Instructions: Add <input type="hidden" name="user_id" value="9948"> to a form.

Day 37–38: Drag and Drop Basics

  • Define Goal: Understand the HTML5 native DnD attributes before tying them to JS events.

  • Instructions: Create an image and a div. Add draggable="true" to the image. Click and drag the image on the screen. (Note: It will drag, but won't "drop" anywhere until JS listeners are added).

Day 39: Contenteditable Attribute

  • Define Goal: Turn any standard HTML element into a rich-text input field.

  • Instructions: Create a <div contenteditable="true">Click here to type!</div>. Click it in the browser and watch it behave like a textarea.

Day 40: Spellcheck Attribute

  • Define Goal: Explicitly enable or disable the browser's red-squiggle spelling indicator.

  • Instructions: Add spellcheck="false" to a <textarea> where you expect users to type code or usernames that shouldn't be spell-checked.

Day 41–42: HTML5 Audio API & Formats

  • Define Goal: Ensure audio playback works across all browsers by providing fallback file formats.

  • Instructions: Create an <audio controls> tag without a src. Inside it, nest <source src="audio.ogg" type="audio/ogg"> and <source src="audio.mp3" type="audio/mpeg">. The browser will pick the first one it supports.

Day 43–45: Video API & Track Element (Subtitles)

  • Define Goal: Create an accessible, professional video player experience.

  • Instructions: Add a <video poster="thumbnail.jpg">. Inside, add <track kind="subtitles" src="subs_en.vtt" srclang="en" label="English">. The poster loads before the user clicks play, and the track provides closed captions.

Day 46–48: Canvas Basics & Rendering

  • Define Goal: Utilize the HTML5 <canvas> element for hardware-accelerated 2D bitmap drawing via JavaScript.

  • Instructions: Add <canvas id="game" width="400" height="400"></canvas>. In a <script> tag, get the element, call .getContext('2d'), and use ctx.fillStyle = "red" followed by ctx.fillRect(10, 10, 50, 50) to draw a square.

Day 49–51: SVG Integration & Styling

  • Define Goal: Write scalable vector graphics (math-based shapes) directly in HTML that won't lose quality when zoomed in, unlike Canvas.

  • Instructions: Write an <svg width="100" height="100">. Inside, add a <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="3" />. Build a basic "Home" icon using <path> coordinates.

Day 52: Accessibility Roles

  • Define Goal: Explicitly define the purpose of custom UI components for screen readers.

  • Instructions: If you built a custom styled dropdown out of divs, add role="listbox" to the container and role="option" to the items so a screen reader knows it functions like a <select> menu.

Day 53: Tabindex Attribute

  • Define Goal: Manage the sequential focus navigation order for keyboard users.

  • Instructions: Add tabindex="0" to a custom <div> button to make it focusable by the Tab key. (Never use tabindex > 0, as it ruins the natural document flow).

Day 54: Accessible Forms

  • Define Goal: Ensure clicking a label focuses its input, which is a massive UX win for checkboxes and radio buttons.

  • Instructions: Always assign an id to your input (e.g., id="terms"), and ensure the label explicitly targets it: <label for="terms">I agree</label>.

Day 55: Landmark Elements

  • Define Goal: Use structural tags to allow screen readers to skip directly to content.

  • Instructions: Refactor your page to ensure there is a clear <header>, exactly one <main>, and an <aside> for related sidebar links.

Day 56–57: Microdata & Schema.org

  • Define Goal: Inject machine-readable data into your HTML to generate Google "Rich Snippets" (like star ratings in search results).

  • Instructions: Wrap a product page in <article itemscope itemtype="[https://schema.org/Product](https://schema.org/Product)">. Tag the title with <h1 itemprop="name"> and the price with <span itemprop="price">.

Day 58: Responsive Images (srcset & sizes)

  • Define Goal: Save bandwidth by letting the browser choose which image file size to download based on the user's screen resolution.

  • Instructions: Add <img srcset="small.jpg 500w, large.jpg 1000w" sizes="(max-width: 600px) 100vw, 50vw" alt="A responsive photo">.

Day 59: Picture Element (Art Direction)

  • Define Goal: Force the browser to load a completely different image crop (e.g., a square image on mobile, a wide panorama on desktop).

  • Instructions: Use the <picture> tag. Inside, add <source media="(min-width: 800px)" srcset="wide-shot.jpg">, followed by a fallback <img src="close-up.jpg" alt="...">.

Day 60: Review Phase 2 (Deliverable)

  • Define Goal: Prove mastery over rich media, vectors, and advanced accessibility forms.

  • Instructions: Build a media-rich landing page. It must include an embedded video with a .vtt subtitle track, a <canvas> element drawing a simple chart, inline SVG icons, and a highly validated form using range, datalist, and schema.org microdata.



  • Day 61 (Paths): Use ctx.beginPath(), ctx.moveTo(), and ctx.lineTo() to draw complex custom shapes and polygons.

 

  • Day 62 (Gradients): Use ctx.createLinearGradient() or createRadialGradient() to apply multi-stop color transitions to shapes.

 

  • Day 63 (Images): Load an external image via JavaScript (new Image()) and render it onto the canvas using ctx.drawImage().

 

  • Day 64 (Transformations): Use ctx.rotate() and ctx.scale() wrapped inside ctx.save() and ctx.restore() states to animate drawing manipulations.

 

  • Day 65 (Compositing): Experiment with ctx.globalCompositeOperation (e.g., source-over, destination-atop) to blend overlapping shapes.

 

  • Day 66 (Game Background): Build a multi-layered parallax scrolling background loop using requestAnimationFrame.

 

Days 67–69: Advanced SVG & Vector Animation

Define Goal: Animate vector graphics declaratively and apply CSS/SVG filters for rich UI visual effects.

Instructions:



  • Day 67 (Animation): Inject the <animate> or <animateTransform> tag directly inside an SVG path to create looping scaling or rotation effects.

 

  • Day 68 (Filters): Apply SVG filters like <feGaussianBlur> or drop shadows to vector shapes.

 

  • Day 69 (Icon Set): Build a modular sprite-sheet style SVG icon set using <symbol> and <use> tags.

 

Days 70–71: Geolocation API

Define Goal: Request permission from the user's browser to access physical coordinates and display location-aware content.

Instructions:



  • Day 70: Write a script utilizing navigator.geolocation.getCurrentPosition(success, error). Handle the permission prompt pop-up cleanly in the UI.

 

  • Day 71: Pass the resulting latitude and longitude coordinates into an embedded map iframe URL or third-party mapping service.

 

Days 72–76: Client-Side Storage (LocalStorage, SessionStorage, & IndexedDB)

Define Goal: Understand the nuances of client storage: Key-value string stores vs. high-capacity structured NoSQL databases built directly into the browser.

Instructions:



  • Day 72 (LocalStorage): Use localStorage.setItem('key', JSON.stringify(data)) to persist settings across browser sessions.

 

  • Day 73 (To-Do List App): Build a full task manager application that loads, adds, and deletes items from LocalStorage automatically.

 

  • Day 74 (SessionStorage): Use sessionStorage to store temporary state (like multi-step form progress) that automatically wipes when the tab is closed.

 

  • Day 75 (IndexedDB Basics): Open an asynchronous database instance using indexedDB.open(), create an object store, and handle transaction requests.

 

  • Day 76 (Notes App): Build a structured notes application that saves and queries large text blocks using IndexedDB.

 

Days 77–80: Offline-First Architecture & Web Workers

Define Goal: Ensure web applications function seamlessly without an internet connection and run heavy computational tasks off the main UI thread.

Instructions:



  • Day 77 (Offline Cap): Explore legacy application cache definitions and modern service worker strategies.

 

  • Day 78 (Service Workers): Register a service worker script via navigator.serviceWorker.register() and listen to the install event to cache core static assets.

 

  • Day 79: Build a dedicated offline fallback HTML page that renders automatically when navigator.onLine returns false.

 

  • Day 80 (Security): Audit storage limits, CORS rules, and secure context requirements (https://) for data persistence.

 

  • Day 81–82 (Web Workers): Spin up a background thread using new Worker('worker.js'). Pass heavy computational loops (like prime number calculations) to it via postMessage() so the main UI thread never freezes.

 

Days 83–89: Browser Communication & Device APIs

Define Goal: Master cross-window messaging, browser history management, and native OS utility hooks.

Instructions:



  • Day 83 (Messaging API): Use window.postMessage() to securely pass data between an iframe and its parent window.

 

  • Day 84–85 (History API): Build a Single Page Application (SPA) navigation system using history.pushState() to update URLs without reloading the page.

 

  • Day 86 (Fullscreen API): Toggle a video or container into native full screen mode using element.requestFullscreen().

 

  • Day 87–88 (Clipboard API): Build a "Copy to Clipboard" button using the modern asynchronous navigator.clipboard.writeText() API with success feedback notifications.

 

  • Day 89 (Notifications API): Request user permission via Notification.requestPermission() and trigger desktop push alerts from the browser.

 

  • Day 90: Review Phase 3. Deliver an interactive dashboard incorporating local storage, canvas rendering, background workers, and service worker caching.

 

Phase 4: Mastery, Real-Time Systems, & Professional Deployment (Days 91–120)

Days 91–94: Real-Time Web Protocols (WebSockets & SSE)

Define Goal: Shift away from traditional HTTP request-response polling and implement persistent, two-way server-client communication channels.

Instructions:



  • Day 91 (WebSockets): Initialize a real-time connection using const socket = new WebSocket('ws://echo.websocket.events'). Handle onopen, onmessage, and onerror event listeners.

 

  • Day 92 (Live Chat): Build a responsive chat messaging interface that instantly appends incoming data packets to the UI.

 

  • Day 93–94 (Server-Sent Events): Use the EventSource API to establish a one-way server-to-client streaming connection. Build a live-updating news feed component.

 

Days 95–100: Progressive Web App (PWA) Architecture & Compliance

Define Goal: Package your web application so it behaves like an installable native application across mobile and desktop operating systems.

Instructions:



  • Day 95–96 (PWA Shell): Create a manifest.json file detailing app metadata, theme colors, icons, and display: standalone.

 

  • Day 97–98 (Advanced SW): Implement a robust caching strategy in your service worker (Cache-First for assets, Network-First for dynamic API calls).

 

  • Day 99–100 (Push Notifications & Audit): Integrate background push notifications and run a complete PWA compliance and accessibility audit via Chrome DevTools Lighthouse.

 

Days 101–108: Advanced Device & Hardware APIs

Define Goal: Tap directly into client device sensors, physical inputs, and mobile hardware capabilities.

Instructions:



  • Day 101–102 (Media Devices): Use navigator.mediaDevices.getUserMedia({ video: true }) to stream live webcam feeds directly into a <video> element and capture snapshots using a canvas context.

 

  • Day 103–104 (Battery API): Monitor device power status, charging events, and battery level percentages using navigator.getBattery().

 

  • Day 105–106 (Vibration API): Trigger physical tactile feedback on mobile devices using navigator.vibrate([200, 100, 200]).

 

  • Day 107–108 (Orientation API): Listen to deviceorientation events to detect physical device tilt and build a responsive, tilt-controlled interactive element.

 

Days 109–114: Voice, Accessibility, & SEO Optimization

Define Goal: Build hands-free user interfaces using speech recognition APIs and ensure strict semantic search engine optimization.

Instructions:



  • Day 109–110 (Speech Recognition): Utilize the Web Speech API (window.SpeechRecognition) to transcribe spoken user words into a text input form.

 

  • Day 111–112 (Speech Synthesis): Build a text-to-speech reader app using window.speechSynthesis.speak().

 

  • Day 113–114 (A11y Audit): Perform a comprehensive screen-reader test, ensuring all elements maintain pristine ARIA attributes and valid landmark structures.

 

Days 115–120: Performance, Build Tooling, & Deployment

Define Goal: Optimize code weight, strip unnecessary elements, and deploy a production-ready application to a live edge network.

Instructions:



  • Day 115–116 (SEO): Audit your markup for strict semantic tag usage, correct Open Graph metadata, and proper heading hierarchies.

 

  • Day 117–118 (Minification): Run HTML minification scripts to eliminate all whitespace and comments, achieving a 99+ Lighthouse performance rating.

 

  • Day 119 (Deployment Basics): Connect your project repository to Netlify or Vercel, configuring automated CI/CD pipeline deployments.

 

  • Day 120 (Final Project Showcase): Deliver the ultimate full-stack HTML5 web application. Your final live deployment must feature a PWA manifest, service worker caching, real-time WebSocket communication, device camera integration, and full WCAG accessibility compliance.

 


- No comments:
Subscribe to: Posts (Atom)

120-Day HTML 5 Study Plan

  As a front-end developer, I think this is an excellent, deep-dive curriculum. HTML5 is often rushed through, but truly mastering its seman...