Welcome to HTML! An Interactive Course<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&family=Baloo+2:wght@700&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n \r\n \r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f7faff; \/* Light blue-white *\/\r\n color: #334155; \/* Slate 700 *\/\r\n }\r\n .font-display {\r\n font-family: 'Baloo 2', cursive;\r\n }\r\n .lesson-code-block {\r\n background-color: #1e293b; \/* Slate 900 *\/\r\n color: #e2e8f0; \/* Slate 200 *\/\r\n padding: 1rem;\r\n border-radius: 0.5rem;\r\n font-family: monospace;\r\n white-space: pre-wrap;\r\n line-height: 1.5;\r\n }\r\n .nav-link.active {\r\n font-weight: 700;\r\n color: #4f46e5; \/* Indigo 600 *\/\r\n }\r\n .lesson-button {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .lesson-button.active {\r\n background-color: #4f46e5; \/* Indigo 600 *\/\r\n color: white;\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n }\r\n .lesson-button .completion-check {\r\n display: none;\r\n color: #22c55e; \/* Green 500 *\/\r\n }\r\n .lesson-button.completed .completion-check {\r\n display: inline;\r\n }\r\n .lesson-button.completed:not(.active) {\r\n background-color: #f0fdf4; \/* Green 50 *\/\r\n border: 1px solid #22c55e;\r\n color: #166534; \/* Green 800 *\/\r\n }\r\n .explanation-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n }\r\n .explanation-tag {\r\n background-color: #e0e7ff; \/* Indigo 100 *\/\r\n color: #3730a3; \/* Indigo 800 *\/\r\n font-family: monospace;\r\n padding: 0.25rem 0.5rem;\r\n border-radius: 0.25rem;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n <header class=\"bg-white\/90 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200\">\r\n <nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\r\n <div class=\"text-2xl font-display text-indigo-600\">\ud83d\ude80 Web Builder Course<\/div>\r\n <div class=\"hidden md:flex space-x-8 text-sm font-semibold\">\r\n <a href=\"#welcome\" class=\"nav-link text-slate-600 hover:text-indigo-600 transition-colors\">Welcome<\/a>\r\n <a href=\"#lessons\" class=\"nav-link text-slate-600 hover:text-indigo-600 transition-colors\">Lessons<\/a>\r\n <a href=\"#project\" class=\"nav-link text-slate-600 hover:text-indigo-600 transition-colors\">Your Project<\/a>\r\n <\/div>\r\n <\/nav>\r\n <\/header>\r\n\r\n <main class=\"container mx-auto px-6 py-8 md:py-16\">\r\n\r\n <section id=\"welcome\" class=\"text-center mb-16 md:mb-24\">\r\n <h1 class=\"text-4xl md:text-6xl font-display text-slate-800 mb-4\">Welcome, Future Web Builder!<\/h1>\r\n <p class=\"max-w-3xl mx-auto text-lg md:text-xl text-slate-600 mb-8\">\r\n Ready to learn the secret language of websites? It's called HTML, and it's like a box of digital LEGOs. You'll use special \"tags\" to build anything you can imagine online. Let's start your adventure!\r\n <\/p>\r\n <\/section>\r\n\r\n <section id=\"lessons\" class=\"mb-16 md:mb-24\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl md:text-5xl font-display text-slate-800\">Our Lessons<\/h2>\r\n <p class=\"mt-2 text-lg text-slate-600\">Click a lesson to see the code and learn what it does.<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col lg:flex-row gap-8\">\r\n <div class=\"flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 lg:w-1\/4\">\r\n <button data-lesson=\"1\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 1:<\/span> The Secret Handshake<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <button data-lesson=\"2\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 2:<\/span> Headlines & Stories<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <button data-lesson=\"3\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 3:<\/span> Making Awesome Lists<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <button data-lesson=\"4\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 4:<\/span> Adding Pictures!<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <button data-lesson=\"5\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 5:<\/span> Linking to the Web<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"lesson-display\" class=\"lg:w-3\/4 bg-white p-6 md:p-8 rounded-xl shadow-lg border border-slate-200\">\r\n <div id=\"lesson-content-area\">\r\n <div class=\"text-center text-slate-500 py-16\">\r\n <p class=\"text-3xl font-display\">Select a lesson to get started!<\/p>\r\n <p>Your learning adventure begins here.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"project\" class=\"text-center bg-indigo-50 py-16 md:py-20 rounded-xl border border-indigo-100\">\r\n <div class=\"max-w-4xl mx-auto px-6\">\r\n <h2 class=\"text-3xl md:text-5xl font-display text-slate-800 mb-4\">Your Awesome Final Project!<\/h2>\r\n <p class=\"text-lg text-slate-600 mb-8\">\r\n Now it's time to be the builder! Use all your new skills to make a simple, one-page website about something you love. Be creative and show everyone what you can do!\r\n <\/p>\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-6\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all\">\r\n <div class=\"text-5xl mb-2\">\ud83d\udc36<\/div><h3 class=\"font-semibold text-lg\">Favorite Animal<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all\">\r\n <div class=\"text-5xl mb-2\">\ud83c\udfae<\/div><h3 class=\"font-semibold text-lg\">Favorite Game<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all\">\r\n <div class=\"text-5xl mb-2\">\ud83c\udfac<\/div><h3 class=\"font-semibold text-lg\">Favorite Movie<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all\">\r\n <div class=\"text-5xl mb-2\">\u26bd<\/div><h3 class=\"font-semibold text-lg\">Favorite Hobby<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <footer class=\"text-center py-8 mt-16 border-t border-slate-200\">\r\n <p class=\"text-slate-500\">You've got the power to build for the web. Keep exploring!<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const lessonsData = {\r\n '1': {\r\n title: 'Lesson 1: The Secret Handshake',\r\n description: \"Every webpage needs a few essential tags to tell the browser what it is. These tags wrap around all your content.\",\r\n code: `<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>My First Page<\/title>\r\n<\/head>\r\n<body>\r\n Hello, world!\r\n<\/body>\r\n<\/html>`,\r\n explanation: [\r\n { tag: '<!DOCTYPE html>', meaning: 'Tells the browser this is an HTML5 document. It always goes at the very top!' },\r\n { tag: '<html>', meaning: 'The main container for the entire webpage. All other elements go inside it.' },\r\n { tag: '<head>', meaning: 'Holds information *about* the page, like the title. You don\\'t see this content on the page itself.' },\r\n { tag: '<title>', meaning: 'Sets the title that appears in the browser tab.' },\r\n { tag: '<body>', meaning: 'The most important tag! Everything you can *see* on the webpage goes inside here.' }\r\n ]\r\n },\r\n '2': {\r\n title: 'Lesson 2: Headlines and Stories',\r\n description: \"Use headline tags (<h1>, <h2>, etc.) for titles and the paragraph tag (<p>) for regular text. This helps structure your page like a real document.\",\r\n code: `<h1>My Awesome Headline<\/h1>\r\n<p>This is my first paragraph.<\/p>\r\n<h2>A smaller headline<\/h2>\r\n<p>This is another paragraph.<\/p>`,\r\n explanation: [\r\n { tag: '<h1>', meaning: 'The main headline. Use this only once per page for the most important title.' },\r\n { tag: '<h2>', meaning: 'A sub-headline. Good for section titles. You can use h1 through h6.' },\r\n { tag: '<p>', meaning: 'A paragraph tag. Use this for any block of normal text.' }\r\n ]\r\n },\r\n '3': {\r\n title: 'Lesson 3: Making Awesome Lists',\r\n description: \"Lists are great for organizing things! Use <ul> for a bulleted list and <ol> for a numbered list. Each item in the list gets its own <li> tag.\",\r\n code: `<h3>My Favorite Foods:<\/h3>\r\n<ul>\r\n <li>Pizza<\/li>\r\n <li>Ice Cream<\/li>\r\n<\/ul>\r\n\r\n<h3>My Top 2 Steps:<\/h3>\r\n<ol>\r\n <li>Wake up<\/li>\r\n <li>Be awesome<\/li>\r\n<\/ol>`,\r\n explanation: [\r\n { tag: '<ul>', meaning: 'Stands for \"Unordered List\". It creates a list with bullet points.' },\r\n { tag: '<ol>', meaning: 'Stands for \"Ordered List\". It creates a list with numbers.' },\r\n { tag: '<li>', meaning: 'Stands for \"List Item\". Every item in both <ul> and <ol> lists must be wrapped in this tag.' },\r\n { tag: '<h3>', meaning: 'Another headline tag, smaller than h1 and h2. Good for titling your lists!' }\r\n ]\r\n },\r\n '4': {\r\n title: 'Lesson 4: Adding Pictures!',\r\n description: \"Pictures make a page fun! Use the <img> tag to add images. It's a special 'self-closing' tag and uses 'attributes' to work.\",\r\n code: `<img decoding=\"async\" src=\"https:\/\/placehold.co\/300x200\/a78bfa\/ffffff?text=Hi!\" alt=\"A purple placeholder image\">`,\r\n explanation: [\r\n { tag: '<img>', meaning: 'The image tag. It places an image on the page.' },\r\n { tag: 'src=\"...\"', meaning: 'The \"source\" attribute. This tells the <img> tag WHERE to find the picture (its URL or address).' },\r\n { tag: 'alt=\"...\"', meaning: 'The \"alternative text\" attribute. This describes the image for screen readers or if the image fails to load. It\\'s very important for accessibility!' }\r\n ]\r\n },\r\n '5': {\r\n title: 'Lesson 5: Linking to the Web',\r\n description: \"Links connect your page to the rest of the internet! Use the <a> tag, which stands for 'anchor'.\",\r\n code: `<a href=\"https:\/\/www.google.com\" target=\"_blank\">Go to Google<\/a>`,\r\n explanation: [\r\n { tag: '<a>', meaning: 'The anchor tag. It creates a clickable link.' },\r\n { tag: 'href=\"...\"', meaning: 'The \"hypertext reference\" attribute. This tells the <a> tag WHERE to go when you click it (the website URL).' },\r\n { tag: 'target=\"_blank\"', meaning: 'This special attribute tells the browser to open the link in a new tab.' }\r\n ]\r\n }\r\n };\r\n\r\n const lessonButtons = document.querySelectorAll('.lesson-button');\r\n const contentArea = document.getElementById('lesson-content-area');\r\n let completedLessons = new Set();\r\n\r\n function displayLesson(lessonId) {\r\n const lesson = lessonsData[lessonId];\r\n if (!lesson) return;\r\n\r\n const explanationsHtml = lesson.explanation.map(item => `\r\n <div class=\"explanation-item mb-4\">\r\n <div class=\"explanation-tag\">${item.tag}<\/div>\r\n <div class=\"flex-1\">${item.meaning}<\/div>\r\n <\/div>\r\n `).join('');\r\n\r\n contentArea.innerHTML = `\r\n <h3 class=\"text-2xl font-bold text-slate-800 mb-2\">${lesson.title}<\/h3>\r\n <p class=\"text-slate-600 mb-6\">${lesson.description}<\/p>\r\n \r\n <div class=\"mb-8\">\r\n <h4 class=\"font-semibold mb-2 text-slate-700\">Code Example:<\/h4>\r\n <div class=\"lesson-code-block\">${lesson.code.replace(\/<\/g, \"<\").replace(\/>\/g, \">\")}<\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-semibold mb-4 text-slate-700\">\u2b50 Elements Explained:<\/h4>\r\n <div class=\"space-y-4\">${explanationsHtml}<\/div>\r\n <\/div>\r\n `;\r\n\r\n lessonButtons.forEach(btn => {\r\n btn.classList.toggle('active', btn.dataset.lesson === lessonId);\r\n });\r\n \r\n completedLessons.add(lessonId);\r\n document.querySelector(`.lesson-button[data-lesson=\"${lessonId}\"]`).classList.add('completed');\r\n }\r\n\r\n lessonButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n const lessonId = button.dataset.lesson;\r\n displayLesson(lessonId);\r\n });\r\n });\r\n \r\n displayLesson('1');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Welcome to HTML! An Interactive Course \ud83d\ude80 Web Builder Course Welcome Lessons Your Project Welcome, Future Web Builder! Ready to learn the secret language of websites? It’s called HTML, and it’s like a box of digital LEGOs. You’ll use special “tags” to build anything you can imagine online. Let’s start your adventure! Our Lessons Click […]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4245","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/comments?post=4245"}],"version-history":[{"count":4,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4245\/revisions"}],"predecessor-version":[{"id":4249,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4245\/revisions\/4249"}],"wp:attachment":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/media?parent=4245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/categories?post=4245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/tags?post=4245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Welcome to HTML! An Interactive Course<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&family=Baloo+2:wght@700&display=swap\" rel=\"stylesheet\">\r\n \r\n \r\n \r\n \r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f7faff; \/* Light blue-white *\/\r\n color: #334155; \/* Slate 700 *\/\r\n }\r\n .font-display {\r\n font-family: 'Baloo 2', cursive;\r\n }\r\n .lesson-code-block {\r\n background-color: #1e293b; \/* Slate 900 *\/\r\n color: #e2e8f0; \/* Slate 200 *\/\r\n padding: 1rem;\r\n border-radius: 0.5rem;\r\n font-family: monospace;\r\n white-space: pre-wrap;\r\n line-height: 1.5;\r\n }\r\n .nav-link.active {\r\n font-weight: 700;\r\n color: #4f46e5; \/* Indigo 600 *\/\r\n }\r\n .lesson-button {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .lesson-button.active {\r\n background-color: #4f46e5; \/* Indigo 600 *\/\r\n color: white;\r\n transform: translateY(-2px);\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.1);\r\n }\r\n .lesson-button .completion-check {\r\n display: none;\r\n color: #22c55e; \/* Green 500 *\/\r\n }\r\n .lesson-button.completed .completion-check {\r\n display: inline;\r\n }\r\n .lesson-button.completed:not(.active) {\r\n background-color: #f0fdf4; \/* Green 50 *\/\r\n border: 1px solid #22c55e;\r\n color: #166534; \/* Green 800 *\/\r\n }\r\n .explanation-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 1rem;\r\n }\r\n .explanation-tag {\r\n background-color: #e0e7ff; \/* Indigo 100 *\/\r\n color: #3730a3; \/* Indigo 800 *\/\r\n font-family: monospace;\r\n padding: 0.25rem 0.5rem;\r\n border-radius: 0.25rem;\r\n font-weight: 600;\r\n white-space: nowrap;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased\">\r\n\r\n <header class=\"bg-white\/90 backdrop-blur-lg sticky top-0 z-50 border-b border-slate-200\">\r\n <nav class=\"container mx-auto px-6 py-3 flex justify-between items-center\">\r\n <div class=\"text-2xl font-display text-indigo-600\">\ud83d\ude80 Web Builder Course<\/div>\r\n <div class=\"hidden md:flex space-x-8 text-sm font-semibold\">\r\n <a href=\"#welcome\" class=\"nav-link text-slate-600 hover:text-indigo-600 transition-colors\">Welcome<\/a>\r\n <a href=\"#lessons\" class=\"nav-link text-slate-600 hover:text-indigo-600 transition-colors\">Lessons<\/a>\r\n <a href=\"#project\" class=\"nav-link text-slate-600 hover:text-indigo-600 transition-colors\">Your Project<\/a>\r\n <\/div>\r\n <\/nav>\r\n <\/header>\r\n\r\n <main class=\"container mx-auto px-6 py-8 md:py-16\">\r\n\r\n <section id=\"welcome\" class=\"text-center mb-16 md:mb-24\">\r\n <h1 class=\"text-4xl md:text-6xl font-display text-slate-800 mb-4\">Welcome, Future Web Builder!<\/h1>\r\n <p class=\"max-w-3xl mx-auto text-lg md:text-xl text-slate-600 mb-8\">\r\n Ready to learn the secret language of websites? It's called HTML, and it's like a box of digital LEGOs. You'll use special \"tags\" to build anything you can imagine online. Let's start your adventure!\r\n <\/p>\r\n <\/section>\r\n\r\n <section id=\"lessons\" class=\"mb-16 md:mb-24\">\r\n <div class=\"text-center mb-12\">\r\n <h2 class=\"text-3xl md:text-5xl font-display text-slate-800\">Our Lessons<\/h2>\r\n <p class=\"mt-2 text-lg text-slate-600\">Click a lesson to see the code and learn what it does.<\/p>\r\n <\/div>\r\n \r\n <div class=\"flex flex-col lg:flex-row gap-8\">\r\n <div class=\"flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 lg:w-1\/4\">\r\n <button data-lesson=\"1\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 1:<\/span> The Secret Handshake<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <button data-lesson=\"2\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 2:<\/span> Headlines & Stories<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <button data-lesson=\"3\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 3:<\/span> Making Awesome Lists<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <button data-lesson=\"4\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 4:<\/span> Adding Pictures!<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <button data-lesson=\"5\" class=\"lesson-button w-full text-left p-4 rounded-lg bg-white shadow-sm hover:bg-indigo-500 hover:text-white transition-all duration-300 ease-in-out\">\r\n <div><span class=\"font-semibold block\">Lesson 5:<\/span> Linking to the Web<\/div> <span class=\"completion-check text-2xl\">\u2713<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div id=\"lesson-display\" class=\"lg:w-3\/4 bg-white p-6 md:p-8 rounded-xl shadow-lg border border-slate-200\">\r\n <div id=\"lesson-content-area\">\r\n <div class=\"text-center text-slate-500 py-16\">\r\n <p class=\"text-3xl font-display\">Select a lesson to get started!<\/p>\r\n <p>Your learning adventure begins here.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section id=\"project\" class=\"text-center bg-indigo-50 py-16 md:py-20 rounded-xl border border-indigo-100\">\r\n <div class=\"max-w-4xl mx-auto px-6\">\r\n <h2 class=\"text-3xl md:text-5xl font-display text-slate-800 mb-4\">Your Awesome Final Project!<\/h2>\r\n <p class=\"text-lg text-slate-600 mb-8\">\r\n Now it's time to be the builder! Use all your new skills to make a simple, one-page website about something you love. Be creative and show everyone what you can do!\r\n <\/p>\r\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-6\">\r\n <div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all\">\r\n <div class=\"text-5xl mb-2\">\ud83d\udc36<\/div><h3 class=\"font-semibold text-lg\">Favorite Animal<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all\">\r\n <div class=\"text-5xl mb-2\">\ud83c\udfae<\/div><h3 class=\"font-semibold text-lg\">Favorite Game<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all\">\r\n <div class=\"text-5xl mb-2\">\ud83c\udfac<\/div><h3 class=\"font-semibold text-lg\">Favorite Movie<\/h3>\r\n <\/div>\r\n <div class=\"bg-white p-6 rounded-lg shadow-md hover:shadow-xl hover:-translate-y-1 transition-all\">\r\n <div class=\"text-5xl mb-2\">\u26bd<\/div><h3 class=\"font-semibold text-lg\">Favorite Hobby<\/h3>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <footer class=\"text-center py-8 mt-16 border-t border-slate-200\">\r\n <p class=\"text-slate-500\">You've got the power to build for the web. Keep exploring!<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const lessonsData = {\r\n '1': {\r\n title: 'Lesson 1: The Secret Handshake',\r\n description: \"Every webpage needs a few essential tags to tell the browser what it is. These tags wrap around all your content.\",\r\n code: `<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <title>My First Page<\/title>\r\n<\/head>\r\n<body>\r\n Hello, world!\r\n<\/body>\r\n<\/html>`,\r\n explanation: [\r\n { tag: '<!DOCTYPE html>', meaning: 'Tells the browser this is an HTML5 document. It always goes at the very top!' },\r\n { tag: '<html>', meaning: 'The main container for the entire webpage. All other elements go inside it.' },\r\n { tag: '<head>', meaning: 'Holds information *about* the page, like the title. You don\\'t see this content on the page itself.' },\r\n { tag: '<title>', meaning: 'Sets the title that appears in the browser tab.' },\r\n { tag: '<body>', meaning: 'The most important tag! Everything you can *see* on the webpage goes inside here.' }\r\n ]\r\n },\r\n '2': {\r\n title: 'Lesson 2: Headlines and Stories',\r\n description: \"Use headline tags (<h1>, <h2>, etc.) for titles and the paragraph tag (<p>) for regular text. This helps structure your page like a real document.\",\r\n code: `<h1>My Awesome Headline<\/h1>\r\n<p>This is my first paragraph.<\/p>\r\n<h2>A smaller headline<\/h2>\r\n<p>This is another paragraph.<\/p>`,\r\n explanation: [\r\n { tag: '<h1>', meaning: 'The main headline. Use this only once per page for the most important title.' },\r\n { tag: '<h2>', meaning: 'A sub-headline. Good for section titles. You can use h1 through h6.' },\r\n { tag: '<p>', meaning: 'A paragraph tag. Use this for any block of normal text.' }\r\n ]\r\n },\r\n '3': {\r\n title: 'Lesson 3: Making Awesome Lists',\r\n description: \"Lists are great for organizing things! Use <ul> for a bulleted list and <ol> for a numbered list. Each item in the list gets its own <li> tag.\",\r\n code: `<h3>My Favorite Foods:<\/h3>\r\n<ul>\r\n <li>Pizza<\/li>\r\n <li>Ice Cream<\/li>\r\n<\/ul>\r\n\r\n<h3>My Top 2 Steps:<\/h3>\r\n<ol>\r\n <li>Wake up<\/li>\r\n <li>Be awesome<\/li>\r\n<\/ol>`,\r\n explanation: [\r\n { tag: '<ul>', meaning: 'Stands for \"Unordered List\". It creates a list with bullet points.' },\r\n { tag: '<ol>', meaning: 'Stands for \"Ordered List\". It creates a list with numbers.' },\r\n { tag: '<li>', meaning: 'Stands for \"List Item\". Every item in both <ul> and <ol> lists must be wrapped in this tag.' },\r\n { tag: '<h3>', meaning: 'Another headline tag, smaller than h1 and h2. Good for titling your lists!' }\r\n ]\r\n },\r\n '4': {\r\n title: 'Lesson 4: Adding Pictures!',\r\n description: \"Pictures make a page fun! Use the <img> tag to add images. It's a special 'self-closing' tag and uses 'attributes' to work.\",\r\n code: `<img decoding=\"async\" src=\"https:\/\/placehold.co\/300x200\/a78bfa\/ffffff?text=Hi!\" alt=\"A purple placeholder image\">`,\r\n explanation: [\r\n { tag: '<img>', meaning: 'The image tag. It places an image on the page.' },\r\n { tag: 'src=\"...\"', meaning: 'The \"source\" attribute. This tells the <img> tag WHERE to find the picture (its URL or address).' },\r\n { tag: 'alt=\"...\"', meaning: 'The \"alternative text\" attribute. This describes the image for screen readers or if the image fails to load. It\\'s very important for accessibility!' }\r\n ]\r\n },\r\n '5': {\r\n title: 'Lesson 5: Linking to the Web',\r\n description: \"Links connect your page to the rest of the internet! Use the <a> tag, which stands for 'anchor'.\",\r\n code: `<a href=\"https:\/\/www.google.com\" target=\"_blank\">Go to Google<\/a>`,\r\n explanation: [\r\n { tag: '<a>', meaning: 'The anchor tag. It creates a clickable link.' },\r\n { tag: 'href=\"...\"', meaning: 'The \"hypertext reference\" attribute. This tells the <a> tag WHERE to go when you click it (the website URL).' },\r\n { tag: 'target=\"_blank\"', meaning: 'This special attribute tells the browser to open the link in a new tab.' }\r\n ]\r\n }\r\n };\r\n\r\n const lessonButtons = document.querySelectorAll('.lesson-button');\r\n const contentArea = document.getElementById('lesson-content-area');\r\n let completedLessons = new Set();\r\n\r\n function displayLesson(lessonId) {\r\n const lesson = lessonsData[lessonId];\r\n if (!lesson) return;\r\n\r\n const explanationsHtml = lesson.explanation.map(item => `\r\n <div class=\"explanation-item mb-4\">\r\n <div class=\"explanation-tag\">${item.tag}<\/div>\r\n <div class=\"flex-1\">${item.meaning}<\/div>\r\n <\/div>\r\n `).join('');\r\n\r\n contentArea.innerHTML = `\r\n <h3 class=\"text-2xl font-bold text-slate-800 mb-2\">${lesson.title}<\/h3>\r\n <p class=\"text-slate-600 mb-6\">${lesson.description}<\/p>\r\n \r\n <div class=\"mb-8\">\r\n <h4 class=\"font-semibold mb-2 text-slate-700\">Code Example:<\/h4>\r\n <div class=\"lesson-code-block\">${lesson.code.replace(\/<\/g, \"<\").replace(\/>\/g, \">\")}<\/div>\r\n <\/div>\r\n\r\n <div>\r\n <h4 class=\"font-semibold mb-4 text-slate-700\">\u2b50 Elements Explained:<\/h4>\r\n <div class=\"space-y-4\">${explanationsHtml}<\/div>\r\n <\/div>\r\n `;\r\n\r\n lessonButtons.forEach(btn => {\r\n btn.classList.toggle('active', btn.dataset.lesson === lessonId);\r\n });\r\n \r\n completedLessons.add(lessonId);\r\n document.querySelector(`.lesson-button[data-lesson=\"${lessonId}\"]`).classList.add('completed');\r\n }\r\n\r\n lessonButtons.forEach(button => {\r\n button.addEventListener('click', () => {\r\n const lessonId = button.dataset.lesson;\r\n displayLesson(lessonId);\r\n });\r\n });\r\n \r\n displayLesson('1');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Welcome to HTML! An Interactive Course \ud83d\ude80 Web Builder Course Welcome Lessons Your Project Welcome, Future Web Builder! Ready to learn the secret language of websites? It’s called HTML, and it’s like a box of digital LEGOs. You’ll use special “tags” to build anything you can imagine online. Let’s start your adventure! Our Lessons Click […]<\/p>","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4245","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4245","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/comments?post=4245"}],"version-history":[{"count":4,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4245\/revisions"}],"predecessor-version":[{"id":4249,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/posts\/4245\/revisions\/4249"}],"wp:attachment":[{"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/media?parent=4245"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/categories?post=4245"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aaaschoolkh.com\/km\/wp-json\/wp\/v2\/tags?post=4245"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}