Web DevelopmentHTML, CSS, JavaScript & Full Stack Foundations
A structured web development course covering HTML, CSS, JavaScript, browser APIs, frontend engineering and full stack integration.
Your Learning Progress
Module 1: HTML Foundations and Page Structure
HTML defines the structure and meaning of web page content. It is the starting point of web development because every visible page element, from headings to forms, is built with HTML tags.w3schools+1
- What HTML Is Definition: HTML stands for HyperText Markup Language and is the standard language used to structure web pages.w3schools Detailed explanation: HTML does not control appearance directly; instead, it tells the browser what each piece of content is. For example, the browser reads a heading tag as a heading, a paragraph tag as text, and a link tag as a clickable link. This structure is important for accessibility, search engines, and clean page organization.developer.mozilla+1 Code
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>My First Page</title>6</head>7<body>8 <h1>Hello HTML</h1>9 <p>This is my first web page.</p>10</body>11</html>Example: The <h1> tag displays the main heading, while the <p> tag displays a paragraph.w3schools Practice notes: Learn the purpose of each section first: <!DOCTYPE html>, <html>, <head>, and <body>. Then practice identifying which content belongs in the head and which belongs in the body.codewithharry+1 2. HTML Document Structure Definition: An HTML document has a root structure made of nested elements, with <html> as the root, <head> for metadata, and <body> for visible content.codewithharry+1 Detailed explanation: The <!DOCTYPE html> declaration tells the browser to use HTML5 standards. The <head> contains information like page title, metadata, and links to CSS or JavaScript. The <body> contains everything the user sees on the page.codewithharry+1 Code
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Page Structure</title>7</head>8<body>9 <h1>Welcome</h1>10 <p>This page follows standard HTML structure.</p>11</body>12</html>Example: In a browser tab, the title appears from <title>, and the visible content appears from <body>.w3schools Practice notes: Create 3 pages with the same structure and change only the title and body content. This helps you memorize the skeleton faster. 3. Comments Definition: HTML comments are notes inside the code that the browser ignores.w3schools Detailed explanation: Comments help developers document code, explain sections, or temporarily disable content during testing. They are written using <!-- -->, and they can span one or multiple lines. Code
1<!-- This is a comment -->2<p>This paragraph is visible.</p>3 4<!--This block is hidden from the browser. Useful for notes or temporary removal. --> Example: You can comment out a section while debugging without deleting it. Practice notes: Use comments to label sections like header, main content, and footer. Avoid over-commenting obvious code. 4. Headings and Paragraphs Definition: Headings (<h1> to <h6>) represent title levels, and paragraphs (<p>) represent blocks of text.w3schools Detailed explanation: Headings create a hierarchy from most important to least important. <h1> should usually be the main page title, and lower headings should be used for subtopics. Paragraphs are used for normal text content and are the most common text element on a page.developer.mozilla+1 Code
1<h1>Web Development Course</h1>2<h2>Module 1</h2>3<p>This module teaches HTML structure and basic tags.</p>Example: A blog post might use one <h1> for the article title and multiple <h2> tags for section headings. Practice notes: Keep one main <h1> per page in most cases. Practice creating a heading hierarchy for a sample article. 5. Links Definition: The <a> tag creates hyperlinks that connect one resource to another.w3schools Detailed explanation: The href attribute defines the destination URL. target="_blank" opens the link in a new tab, and rel can describe the relationship or improve security when opening new tabs. Links can point to websites, email addresses, phone numbers, or messages.w3schools Code
1<a href="https://quickref.me">QuickRef</a>2<a href="mailto:jack@abc.com">Email</a>3<a href="tel:+12345678">Call</a>Example: Clicking the first link takes the user to a website; clicking the email link opens the mail app. Practice notes: Practice external links, internal links, email links, and phone links. Learn to add target="_blank" with proper rel when needed. 6. Images Definition: The <img> tag embeds an image into a web page.w3schools Detailed explanation: src gives the image location, and alt provides text for accessibility and fallback use. width, height, and loading help control display and performance. The image tag is an empty element, so it does not have a closing tag.w3schools Code
1<img src="photo.jpg" alt="My profile photo" width="300" height="300" loading="lazy">Example: If the image fails to load, the alt text describes it to the user. Practice notes: Always write meaningful alt text. Use loading="lazy" for below-the-fold images. 7. Text Formatting Definition: Text formatting tags change the emphasis or presentation of text content.w3schools Detailed explanation: Tags like <strong>, <em>, <b>, <i>, <u>, <mark>, <del>, and <ins> help communicate meaning or styling. Use semantic tags like <strong> and <em> when the meaning matters, not just the appearance.developer.mozilla Code
1<p><strong>Important:</strong> Submit before the deadline.</p>2<p><em>This text is emphasized.</em></p>3<p><mark>Highlighted text</mark></p>Example: <strong> can indicate warning text, while <em> can indicate stress or emphasis. Practice notes: Focus on semantic meaning first, visual style second. Avoid using formatting tags just to make text look different when CSS would be better. 8. Division and Layout Tags Definition: <div> and <span> are container elements used to group content.w3schools Detailed explanation: <div> is a block-level container, so it usually starts on a new line. <span> is inline, so it stays within a line of text. These tags are useful for grouping content for styling or scripting. Code
1<div>2 <p>This is inside a div.</p>3 <span>This is inline text.</span>4</div>Example: A card layout might use one <div> for the card and one <span> for a label inside it. Practice notes: Use semantic elements when possible before defaulting to generic containers. Use <div> for layout grouping and <span> for short inline pieces. 9. Semantic HTML5 Tags Definition: Semantic tags describe the role of content, such as <header>, <nav>, <main>, <section>, <article>, and <footer>.developer.mozilla+1 Detailed explanation: Semantic tags make your HTML easier to read and improve accessibility and SEO. They help browsers, screen readers, and search engines understand the structure of the page. Use them to organize the page into logical regions instead of relying only on <div> elements.developer.mozilla Code
1<header>2 <nav>3 <a href="/">Home</a>4 <a href="/about">About</a>5 </nav>6</header>7 8<main>9 <article>10 <h1>HTML Basics</h1>11 <p>HTML defines web content structure.</p>12 </article>13</main>14 15<footer>16 <p>© 2026 My Website</p>17</footer>Example: A news website can use <article> for each news story and <aside> for side content. Practice notes: Redesign one old page using semantic tags only. This builds strong structure habits. 10. Lists Definition: Lists organize related items using <ul>, <ol>, and <dl>.w3schools Detailed explanation: <ul> creates unordered lists with bullets, <ol> creates ordered lists with numbers, and <dl> is used for term-definition pairs. Lists are common in menus, steps, features, and glossaries. Code
1<ul>2 <li>HTML</li>3 <li>CSS</li>4 <li>JavaScript</li>5</ul>6 7<ol>8 <li>Plan</li>9 <li>Code</li>10 <li>Test</li>11</ol>Example: A to-do list is usually best represented as an ordered list if the order matters. Practice notes: Choose ordered vs unordered based on meaning, not appearance. Practice making a glossary with <dl>. 11. Tables Definition: Tables display data in rows and columns using <table>, <tr>, <th>, and <td>.w3schools Detailed explanation: Tables are best for structured data, not for page layout. Use <th> for header cells and <td> for regular data cells. Add <thead>, <tbody>, and <tfoot> when the table needs better organization. Code
1<table>2 <thead>3 <tr>4 <th>Name</th>5 <th>Age</th>6 </tr>7 </thead>8 <tbody>9 <tr>10 <td>Roberta</td>11 <td>39</td>12 </tr>13 </tbody>14</table>Example: A student marks table can list names, subjects, and scores. Practice notes: Never use tables for page layout in modern web design. Practice adding column and row headers correctly. 12. Forms Definition: Forms collect user input and send it to a server or process it with JavaScript.developer.mozilla+1 Detailed explanation: A form uses <form> plus controls like <input>, <textarea>, <select>, <button>, and <label>. Attributes like action, method, and enctype define how data is sent. Labels improve usability and accessibility by connecting text to input fields.w3schools Code
1<form method="POST" action="/login">2 <label for="mail">Email:</label>3 <input type="email" id="mail" name="mail">4 5 <label for="pw">Password:</label>6 <input type="password" id="pw" name="pw">7 8 <input type="submit" value="Login">9</form>Example: A login form asks for email and password and sends them when the user clicks submit. Practice notes: Always pair every important input with a label. Practice creating a registration form with text, email, password, checkbox, and submit controls. 13. Input Types and Attributes Definition: Input types define what kind of data a field accepts, and attributes control behavior and validation.w3schools Detailed explanation: Common input types include text, password, email, radio, checkbox, number, date, file, and search. Attributes like required, placeholder, readonly, disabled, min, max, maxlength, and pattern help control user input. These features reduce errors and improve user experience.w3schools Code
1<input type="text" name="username" placeholder="Enter username" required>2<input type="email" name="email" required>3<input type="number" name="age" min="18" max="60">Example: An email input can prompt the browser to check if the entered text looks like an email address. Practice notes: Test each input type in the browser. Try building one form field for each major input type from your cheat sheet. 14. Media and Embedded Content Definition: HTML can embed audio, video, and external content using tags like <audio>, <video>, and <iframe>.w3schools Detailed explanation: Video and audio elements often use <source> for better compatibility. <iframe> is used to embed another page, such as a map or video. These elements expand what can be shown directly on a page without leaving it.w3schools Code
1<video controls width="400">2 <source src="video.mp4" type="video/mp4">Sorry, your browser doesn't support video. </video>
<audio controls src="audio.mp3"> Your browser does not support the audio element. </audio> Example: A course page can embed a tutorial video or a map showing the institute location. Practice notes: Always include fallback text. Practice creating one page with audio, one with video, and one with iframe. 15. Script, Style, and Meta Definition: <script>, <style>, and <meta> help control behavior, presentation, and metadata.codewithharry+1 Detailed explanation: <script> adds JavaScript to the page, <style> adds internal CSS, and <meta> provides information like charset and viewport settings. The viewport meta tag is especially important for mobile-friendly design.codewithharry+1 **Code** ```xml <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meta Example</title> <style> h1 { color: purple; } </style> </head> <body> <h1>Hello</h1> <script> alert("Welcome"); </script> </body> ```Example: The page title appears in the tab, the style changes the heading color, and the script shows an alert. Practice notes: Memorize the most important meta tags early. Use external CSS and JS files after you understand internal usage. 16. Accessibility Basics Definition: Accessibility means making web content usable for more people, including users with disabilities.developer.mozilla Detailed explanation: Good HTML structure helps screen readers, keyboard users, and search engines understand the page. Meaningful headings, labels, alt text, and semantic elements are key accessibility habits. Accessible HTML is usually also cleaner and easier to maintain.developer.mozilla Code
1<label for="name">Name:</label>2<input id="name" type="text" name="name" aria-label="Name">Example: A properly labeled form field is easier to use with a screen reader. Practice notes: Check whether every image has alt, every form field has a label, and every page has a logical heading order. Module 1 Practice Plan Build a personal profile page using headings, paragraphs, links, images, lists, and semantic tags. Create a login form with email, password, checkbox, and submit button. Make a table of your weekly study plan. Add a video, audio, and iframe embed to a practice page. Rewrite the same page using semantic HTML and compare readability. Module 1 Revision Focus Spend most of your time on document structure, semantic tags, forms, and input attributes because these are the most tested HTML fundamentals. After that, revise the cheat-sheet topics in small chunks until you can write them without looking.
Practice Drill
Module 1 Quiz
Practice Drill Bank
Every practice drill from the course, organised by module. Rehearse these until they feel automatic.
Final Revision Checklist
Tick items as you master them — progress saves automatically.
Module 1 – Module 1: HTML Foundations and Page Structure
Module 2 – Module 2: CSS Fundamentals and Styling
Module 3 – Module 3: JavaScript Essentials
Module 4 – Module 4: Advanced JavaScript and Browser APIs
Module 5 – Module 5: Frontend Engineering
Module 6 – Module 6: Full Stack Integration and Projects
Congratulations!
You've finished the CodeStudio Web Development course. Revise, drill, and keep building.