Fixing Common HTML Mistakes
📖 Scenario: You are creating a simple webpage for a local bakery. The page should have a header, a navigation menu, a main section with a welcome message, and a footer with contact info.However, the initial HTML has some common mistakes that can cause problems in browsers or for people using assistive technology.
🎯 Goal: Fix the common HTML mistakes in the bakery webpage so it uses correct tags, proper nesting, and semantic structure. The page should be accessible and display correctly in browsers.
📋 What You'll Learn
Use semantic HTML5 elements like ,
Include with and sections
Add tags for charset and viewport inside
Use proper nesting of tags (no overlapping or missing closing tags)
Add accessible attributes like
Use or for emphasis instead of deprecated tags
Ensure the page title is inside tag</div></div></div></div><div class="project-faq-item"><div class="project-faq-header"><span class="project-faq-title">💡 Why This Matters</span><svg class="project-faq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg></div><div class="project-faq-body"><div class="project-context-grid"><div class="project-context-item"><div class="project-context-label">🌍 Real World</div><div class="project-context-value">Webpages must be correctly structured and accessible to work well on all devices and for all users, including those using screen readers.</div></div><div class="project-context-item job"><div class="project-context-label">💼 Career</div><div class="project-context-value">Understanding and fixing common HTML mistakes is essential for front-end developers and web designers to create professional, accessible websites.</div></div></div></div></div></div><div class="project-progress"><div class="project-progress-label"><span>Progress</span><span>0<!-- --> / <!-- -->4<!-- --> steps</span></div><div class="project-progress-bar"><div class="project-progress-fill" style="width:0%"></div></div></div><div class="project-step-nav"><button class="project-step-btn active ">1</button><button class="project-step-btn ">2</button><button class="project-step-btn ">3</button><button class="project-step-btn ">4</button></div></div></article><article class="content-card project-step-container active"><div class="code-articles-card-body "><div class="project-step-header d-flex align-items-center"><div class="project-step-badge ">1</div><div class="project-step-title-wrap "><div class="project-step-title">Create the basic HTML structure</div></div></div><div class="project-instruction">Write the basic HTML skeleton with <code><!DOCTYPE html></code>, <code><html lang="en"></code>, <code><head></code>, and <code><body></code> tags. Inside <code><head></code>, add a <code><title></code> with the text <code>"Local Bakery"</code>. Also add <code><meta charset="UTF-8"></code> and <code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code> tags.</div><div class="project-code-editor"><div class="code-editor-header"><span class="code-editor-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>HTML</span><div class="code-editor-actions"><button class="code-reset-btn">↺ Reset</button><button class="code-solution-btn"><span class="new-material-symbols icon-hw-22 me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M602.83-377.25q50.5-50.57 50.5-122.83 0-72.25-50.58-122.75-50.57-50.5-122.83-50.5-72.25 0-122.75 50.58-50.5 50.57-50.5 122.83 0 72.25 50.58 122.75 50.57 50.5 122.83 50.5 72.25 0 122.75-50.58ZM401.5-421.66q-32.17-32.32-32.17-78.5 0-46.17 32.33-78.34 32.32-32.17 78.5-32.17 46.17 0 78.34 32.33 32.17 32.32 32.17 78.5 0 46.17-32.33 78.34-32.32 32.17-78.5 32.17-46.17 0-78.34-32.33ZM234.83-274.67q-110.5-74.66-176.5-192.66-4.33-7.75-6.5-15.93-2.16-8.18-2.16-16.8 0-8.61 2.16-16.75 2.17-8.14 6.5-15.86 66-118 176.5-192.66Q345.33-800 480-800t245.17 74.67q110.5 74.66 176.5 192.66 4.33 7.75 6.5 15.93 2.16 8.18 2.16 16.8 0 8.61-2.16 16.75-2.17 8.14-6.5 15.86-66 118-176.5 192.66Q614.67-200 480-200t-245.17-74.67Z"></path></svg></span>Show Code</button></div></div><textarea class="project-code-textarea" spellCheck="false">
</textarea></div><button class="run-code-btn project-run-btn"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Run Code</button><div class="project-hint "><div class="hint-toggle-btn"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M480-80q-26.67 0-47.33-12.83Q412-105.67 404-128h-9.33q-27 0-46.84-19.83Q328-167.67 328-194.67v-142.66Q264.33-379 227.17-445 190-511 190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 79.67-37.17 145.33Q695.67-379 632-337.33v142.66q0 27-19.83 46.84Q592.33-128 565.33-128H556q-8 22.33-28.67 35.17Q506.67-80 480-80Zm-85.33-114.67h170.66V-236H394.67v41.33Zm0-81.33h170.66v-39.33H394.67V-276Zm110.66-106v-127.33L579-583q7.67-7.67 7.33-17.33-.33-9.67-8-17.34-7.66-7.66-17-7.66-9.33 0-17 7.66L480-553.33l-64.33-64.34q-7.67-7.66-17-7.33-9.34.33-17 8-7.67 7.67-7.67 17t7.67 17l73 73.67V-382h50.66Z"></path></svg></span>Need a hint?</div><div class="hint-content"><p>Start with the standard HTML5 document structure. The <code>lang</code> attribute helps screen readers. The <code>meta</code> tags set character encoding and make the page responsive.</p></div></div></div></article><article class="content-card project-step-container "><div class="code-articles-card-body "><div class="project-step-header d-flex align-items-center"><div class="project-step-badge ">2</div><div class="project-step-title-wrap "><div class="project-step-title">Add semantic page sections</div></div></div><div class="project-instruction">Inside the <code><body></code>, add a <code><header></code> with an <code><h1></code> that says <code>"Welcome to Our Bakery"</code>. Then add a <code><nav></code> with an <code>aria-label="Main navigation"</code> attribute. Inside <code><nav></code>, add an unordered list <code><ul></code> with three list items <code><li></code> containing links <code><a></code> to <code>#home</code>, <code>#menu</code>, and <code>#contact</code> with text <code>Home</code>, <code>Menu</code>, and <code>Contact</code> respectively.</div><div class="project-code-editor"><div class="code-editor-header"><span class="code-editor-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>HTML</span><div class="code-editor-actions"><button class="code-reset-btn">↺ Reset</button><button class="code-solution-btn"><span class="new-material-symbols icon-hw-22 me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M602.83-377.25q50.5-50.57 50.5-122.83 0-72.25-50.58-122.75-50.57-50.5-122.83-50.5-72.25 0-122.75 50.58-50.5 50.57-50.5 122.83 0 72.25 50.58 122.75 50.57 50.5 122.83 50.5 72.25 0 122.75-50.58ZM401.5-421.66q-32.17-32.32-32.17-78.5 0-46.17 32.33-78.34 32.32-32.17 78.5-32.17 46.17 0 78.34 32.33 32.17 32.32 32.17 78.5 0 46.17-32.33 78.34-32.32 32.17-78.5 32.17-46.17 0-78.34-32.33ZM234.83-274.67q-110.5-74.66-176.5-192.66-4.33-7.75-6.5-15.93-2.16-8.18-2.16-16.8 0-8.61 2.16-16.75 2.17-8.14 6.5-15.86 66-118 176.5-192.66Q345.33-800 480-800t245.17 74.67q110.5 74.66 176.5 192.66 4.33 7.75 6.5 15.93 2.16 8.18 2.16 16.8 0 8.61-2.16 16.75-2.17 8.14-6.5 15.86-66 118-176.5 192.66Q614.67-200 480-200t-245.17-74.67Z"></path></svg></span>Show Code</button></div></div><textarea class="project-code-textarea" spellCheck="false">
Local Bakery
</textarea></div><button class="run-code-btn project-run-btn"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Run Code</button><div class="project-hint "><div class="hint-toggle-btn"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M480-80q-26.67 0-47.33-12.83Q412-105.67 404-128h-9.33q-27 0-46.84-19.83Q328-167.67 328-194.67v-142.66Q264.33-379 227.17-445 190-511 190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 79.67-37.17 145.33Q695.67-379 632-337.33v142.66q0 27-19.83 46.84Q592.33-128 565.33-128H556q-8 22.33-28.67 35.17Q506.67-80 480-80Zm-85.33-114.67h170.66V-236H394.67v41.33Zm0-81.33h170.66v-39.33H394.67V-276Zm110.66-106v-127.33L579-583q7.67-7.67 7.33-17.33-.33-9.67-8-17.34-7.66-7.66-17-7.66-9.33 0-17 7.66L480-553.33l-64.33-64.34q-7.67-7.66-17-7.33-9.34.33-17 8-7.67 7.67-7.67 17t7.67 17l73 73.67V-382h50.66Z"></path></svg></span>Need a hint?</div><div class="hint-content"><p>Use semantic tags for page sections. The <code>aria-label</code> on <code>nav</code> helps screen readers understand the menu purpose.</p></div></div></div></article><article class="content-card project-step-container "><div class="code-articles-card-body "><div class="project-step-header d-flex align-items-center"><div class="project-step-badge ">3</div><div class="project-step-title-wrap "><div class="project-step-title">Add main content with proper tags</div></div></div><div class="project-instruction">Below the <code><nav></code>, add a <code><main></code> section. Inside <code><main></code>, add a paragraph <code><p></code> that says <code>"Freshly baked bread and pastries every day."</code> Use <code><strong></code> tags to emphasize the word <code>"Freshly"</code>.</div><div class="project-code-editor"><div class="code-editor-header"><span class="code-editor-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>HTML</span><div class="code-editor-actions"><button class="code-reset-btn">↺ Reset</button><button class="code-solution-btn"><span class="new-material-symbols icon-hw-22 me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M602.83-377.25q50.5-50.57 50.5-122.83 0-72.25-50.58-122.75-50.57-50.5-122.83-50.5-72.25 0-122.75 50.58-50.5 50.57-50.5 122.83 0 72.25 50.58 122.75 50.57 50.5 122.83 50.5 72.25 0 122.75-50.58ZM401.5-421.66q-32.17-32.32-32.17-78.5 0-46.17 32.33-78.34 32.32-32.17 78.5-32.17 46.17 0 78.34 32.33 32.17 32.32 32.17 78.5 0 46.17-32.33 78.34-32.32 32.17-78.5 32.17-46.17 0-78.34-32.33ZM234.83-274.67q-110.5-74.66-176.5-192.66-4.33-7.75-6.5-15.93-2.16-8.18-2.16-16.8 0-8.61 2.16-16.75 2.17-8.14 6.5-15.86 66-118 176.5-192.66Q345.33-800 480-800t245.17 74.67q110.5 74.66 176.5 192.66 4.33 7.75 6.5 15.93 2.16 8.18 2.16 16.8 0 8.61-2.16 16.75-2.17 8.14-6.5 15.86-66 118-176.5 192.66Q614.67-200 480-200t-245.17-74.67Z"></path></svg></span>Show Code</button></div></div><textarea class="project-code-textarea" spellCheck="false">
Local Bakery
Welcome to Our Bakery
Home
Menu
Contact
</textarea></div><button class="run-code-btn project-run-btn"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Run Code</button><div class="project-hint "><div class="hint-toggle-btn"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M480-80q-26.67 0-47.33-12.83Q412-105.67 404-128h-9.33q-27 0-46.84-19.83Q328-167.67 328-194.67v-142.66Q264.33-379 227.17-445 190-511 190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 79.67-37.17 145.33Q695.67-379 632-337.33v142.66q0 27-19.83 46.84Q592.33-128 565.33-128H556q-8 22.33-28.67 35.17Q506.67-80 480-80Zm-85.33-114.67h170.66V-236H394.67v41.33Zm0-81.33h170.66v-39.33H394.67V-276Zm110.66-106v-127.33L579-583q7.67-7.67 7.33-17.33-.33-9.67-8-17.34-7.66-7.66-17-7.66-9.33 0-17 7.66L480-553.33l-64.33-64.34q-7.67-7.66-17-7.33-9.34.33-17 8-7.67 7.67-7.67 17t7.67 17l73 73.67V-382h50.66Z"></path></svg></span>Need a hint?</div><div class="hint-content"><p>The <code>main</code> tag holds the main content. Use <code>strong</code> to highlight important words instead of deprecated tags like <code>b</code>.</p></div></div></div></article><article class="content-card project-step-container "><div class="code-articles-card-body "><div class="project-step-header d-flex align-items-center"><div class="project-step-badge ">4</div><div class="project-step-title-wrap "><div class="project-step-title">Add footer with contact information</div></div></div><div class="project-instruction">At the bottom of the <code><body></code>, add a <code><footer></code> section. Inside it, add a paragraph <code><p></code> with the text <code>"Contact us at "</code> followed by an email link <code><a href="mailto:info@localbakery.com">info@localbakery.com</a></code>. Make sure all tags are properly closed and nested.</div><div class="project-code-editor"><div class="code-editor-header"><span class="code-editor-label"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 18l6-6-6-6"></path><path d="M8 6l-6 6 6 6"></path></svg>HTML</span><div class="code-editor-actions"><button class="code-reset-btn">↺ Reset</button><button class="code-solution-btn"><span class="new-material-symbols icon-hw-22 me-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M602.83-377.25q50.5-50.57 50.5-122.83 0-72.25-50.58-122.75-50.57-50.5-122.83-50.5-72.25 0-122.75 50.58-50.5 50.57-50.5 122.83 0 72.25 50.58 122.75 50.57 50.5 122.83 50.5 72.25 0 122.75-50.58ZM401.5-421.66q-32.17-32.32-32.17-78.5 0-46.17 32.33-78.34 32.32-32.17 78.5-32.17 46.17 0 78.34 32.33 32.17 32.32 32.17 78.5 0 46.17-32.33 78.34-32.32 32.17-78.5 32.17-46.17 0-78.34-32.33ZM234.83-274.67q-110.5-74.66-176.5-192.66-4.33-7.75-6.5-15.93-2.16-8.18-2.16-16.8 0-8.61 2.16-16.75 2.17-8.14 6.5-15.86 66-118 176.5-192.66Q345.33-800 480-800t245.17 74.67q110.5 74.66 176.5 192.66 4.33 7.75 6.5 15.93 2.16 8.18 2.16 16.8 0 8.61-2.16 16.75-2.17 8.14-6.5 15.86-66 118-176.5 192.66Q614.67-200 480-200t-245.17-74.67Z"></path></svg></span>Show Code</button></div></div><textarea class="project-code-textarea" spellCheck="false">
Local Bakery
Welcome to Our Bakery
Home
Menu
Contact
Freshly baked bread and pastries every day.
</textarea></div><button class="run-code-btn project-run-btn"><svg viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>Run Code</button><div class="project-hint "><div class="hint-toggle-btn"><span class="new-material-symbols icon-hw-24"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="#d97706"><path d="M480-80q-26.67 0-47.33-12.83Q412-105.67 404-128h-9.33q-27 0-46.84-19.83Q328-167.67 328-194.67v-142.66Q264.33-379 227.17-445 190-511 190-590q0-121 84.5-205.5T480-880q121 0 205.5 84.5T770-590q0 79.67-37.17 145.33Q695.67-379 632-337.33v142.66q0 27-19.83 46.84Q592.33-128 565.33-128H556q-8 22.33-28.67 35.17Q506.67-80 480-80Zm-85.33-114.67h170.66V-236H394.67v41.33Zm0-81.33h170.66v-39.33H394.67V-276Zm110.66-106v-127.33L579-583q7.67-7.67 7.33-17.33-.33-9.67-8-17.34-7.66-7.66-17-7.66-9.33 0-17 7.66L480-553.33l-64.33-64.34q-7.67-7.66-17-7.33-9.34.33-17 8-7.67 7.67-7.67 17t7.67 17l73 73.67V-382h50.66Z"></path></svg></span>Need a hint?</div><div class="hint-content"><p>The footer usually contains contact info or copyright. Use <code>mailto:</code> links for email addresses.</p></div></div></div></article></div></div></main><div style="position:fixed;bottom:24px;right:24px;z-index:50"><button style="background:rgba(255,255,255,0.95);border:1px solid rgba(108,99,255,0.18);border-radius:10px;padding:10px 16px;color:#5f56fe;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:7px;backdrop-filter:blur(12px);box-shadow:0 2px 12px rgba(0,0,0,0.08), 0 0 0 1px rgba(108,99,255,0.06);transition:all 0.2s"><span style="font-size:14px">⚑</span>Report Issue</button></div></div> <script src="/_next/static/chunks/webpack-fd24bd8e19d2841a.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/b133bdac07c7940e.css\",\"style\"]\n2:HL[\"/_next/static/css/837a603cb1a59856.css\",\"style\"]\n3:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n4:HL[\"/_next/static/css/caf3ca742c7945f9.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"5:I[95751,[],\"\"]\n8:I[39275,[],\"\"]\ne:I[61343,[],\"\"]\nf:I[84080,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"\"]\n10:I[88726,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"Toaster\"]\n11:I[20154,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"9160\",\"static/chunks/app/not-found-c4181ddc3e64e5f3.js\"],\"default\"]\n12:I[70548,[\"8726\",\"static/chunks/8726-583188341cbc1496.js\",\"3185\",\"static/chunks/app/layout-7a1373330f6a4c98.js\"],\"default\"]\n14:I[76130,[],\"\"]\n9:[\"lang\",\"en\",\"d\"]\na:[\"subject\",\"html\",\"d\"]\nb:[\"part\",\"part-1\",\"d\"]\nc:[\"pattern\",\"html-common-html-mistakes\",\"d\"]\nd:[\"mode\",\"project\",\"oc\"]\n15:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b133bdac07c7940e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L5\",null,{\"buildId\":\"hN8t5By7h5nzsrdSose07\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/html/part-1/html-common-html-mistakes/project\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"html-common-html-mistakes\",\"d\"],{\"children\":[[\"mode\",\"project\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"html\",\"d\"],{\"children\":[[\"part\",\"part-1\",\"d\"],{\"children\":[[\"pattern\",\"html-common-html-mistakes\",\"d\"],{\"children\":[[\"mode\",\"project\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$L6\",\"$L7\"],null],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/837a603cb1a59856.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/caf3ca742c7945f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\",\"$c\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\",\"$b\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$a\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$9\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$Lf\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$Lf\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-17928224938\"}],[\"$\",\"$Lf\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-17928224938');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$Lf\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"link\",null,{\"href\":\"https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css\",\"rel\":\"stylesheet\",\"integrity\":\"sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB\",\"crossOrigin\":\"anonymous\"}],[\"$\",\"$Lf\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L10\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"div\",null,{\"className\":\"bg-grid\"}],[\"$\",\"$L8\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$Le\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L11\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/250d3fff07338fa3.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L12\",null,{}],\" \"]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L13\"],\"globalErrorComponent\":\"$14\",\"missingSlots\":\"$W15\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[51766,[\"8422\",\"static/chunks/66ec4792-a0fc378024be0c7b.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7240\",\"static/chunks/53c13509-506edbde2b5b3f55.js\",\"7699\",\"static/chunks/8e1d74a4-a085c2fbc868135a.js\",\"5706\",\"static/chunks/9c4e2130-11ecd4bfc78e4568.js\",\"1779\",\"static/chunks/0e762574-6b3bda54d2fd2e14.js\",\"6648\",\"static/chunks/6648-fff0cf0e0a1f8d25.js\",\"3463\",\"static/chunks/3463-09ee572e3d7819a2.js\",\"4889\",\"static/chunks/4889-956a916919971629.js\",\"9985\",\"static/chunks/9985-b39235669d2563e2.js\",\"7627\",\"static/chunks/7627-224bb765a4decf1d.js\",\"7652\",\"static/chunks/7652-412e201fe52797ee.js\",\"8935\",\"static/chunks/8935-c1c159349bf7da40.js\",\"9663\",\"static/chunks/9663-fdcd080af3916e3e.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-1fc9c577a9450e06.js\"],\"default\"]\n16:T43d,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"Common HTML mistakes - Mini Project: Build \u0026 Apply\",\"description\":\"Apply Common HTML mistakes in a hands-on mini project. Build something real with step-by-step guidance. Learn by doing, not just reading.\",\"url\":\"https://leyaa.ai/codefly/learn/html/part-1/html-common-html-mistakes/project\",\"learningResourceType\":\"Practice Exercise\",\"programmingLanguage\":\"HTML\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"Common HTML mistakes - Mini Project: Build \u0026 Apply\",\"provider\":{\"@type\":\"Organization\",\"url\":\"https://leyaa.ai\"},\"educationalLevel\":\"Beginner to Advanced\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://leyaa.ai\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Common HTML mistakes - Mini Project: Build \u0026 Apply\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-common-html-mistakes\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Project\",\"item\":\"https://leyaa.ai/codefly/learn/html/part-1/html-common-html-mistakes/project\"}]}}"])</script><script>self.__next_f.push([1,"7:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$16\"}}]],[\"$\",\"$L17\",null,{\"subject\":\"html\",\"dbSubject\":\"html\",\"part\":\"part-1\",\"pattern\":\"html_common_html_mistakes\",\"modeSlug\":\"project\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes/challenge\",\"active\":false},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes/project\",\"active\":true},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/html/part-1/html-common-html-mistakes/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"Common HTML mistakes - Mini Project: Build \u0026 Apply\",\"contentData\":{\"pattern_id\":\"html_common_html_mistakes\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"BRM\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"PMC\":{\"project_title\":\"Fixing Common HTML Mistakes\",\"mode\":\"PMC_v4.2\",\"language\":\"html\",\"content_type\":\"Web Development\",\"difficulty\":\"beginner\",\"scenario\":\"\u003cp\u003eYou are creating a simple webpage for a local bakery. The page should have a header, a navigation menu, a main section with a welcome message, and a footer with contact info.\u003c/p\u003e\u003cp\u003eHowever, the initial HTML has some common mistakes that can cause problems in browsers or for people using assistive technology.\u003c/p\u003e\",\"goal\":\"\u003cp\u003eFix the common HTML mistakes in the bakery webpage so it uses correct tags, proper nesting, and semantic structure. The page should be accessible and display correctly in browsers.\u003c/p\u003e\",\"requirements\":[\"Use semantic HTML5 elements like \u003cheader\u003e, \u003cnav\u003e, \u003cmain\u003e, and \u003cfooter\u003e\",\"Include \u003chtml\u003e with \u003chead\u003e and \u003cbody\u003e sections\",\"Add \u003cmeta\u003e tags for charset and viewport inside \u003chead\u003e\",\"Use proper nesting of tags (no overlapping or missing closing tags)\",\"Add accessible attributes like \u003cnav\u003e with aria-label\",\"Use \u003cstrong\u003e or \u003cem\u003e for emphasis instead of deprecated tags\",\"Ensure the page title is inside \u003ctitle\u003e tag\"],\"steps\":[{\"step_number\":1,\"title\":\"Create the basic HTML structure\",\"instruction\":\"Write the basic HTML skeleton with \u003ccode\u003e\u0026lt;!DOCTYPE html\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;html lang=\\\"en\\\"\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e, and \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e tags. Inside \u003ccode\u003e\u0026lt;head\u0026gt;\u003c/code\u003e, add a \u003ccode\u003e\u0026lt;title\u0026gt;\u003c/code\u003e with the text \u003ccode\u003e\\\"Local Bakery\\\"\u003c/code\u003e. Also add \u003ccode\u003e\u0026lt;meta charset=\\\"UTF-8\\\"\u0026gt;\u003c/code\u003e and \u003ccode\u003e\u0026lt;meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u0026gt;\u003c/code\u003e tags.\",\"starter_code\":\"\",\"placeholder_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003c!-- Your code here --\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"solution_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"validation_type\":\"code_contains\",\"validation_data\":[\"\u003c!DOCTYPE html\u003e\",\"\u003chtml lang=\\\"en\\\"\u003e\",\"\u003chead\u003e\",\"\u003cmeta charset=\\\"UTF-8\\\"\u003e\",\"\u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\",\"\u003ctitle\u003eLocal Bakery\u003c/title\u003e\",\"\u003c/head\u003e\",\"\u003cbody\u003e\",\"\u003c/body\u003e\",\"\u003c/html\u003e\"],\"hint\":\"\u003cp\u003eStart with the standard HTML5 document structure. The \u003ccode\u003elang\u003c/code\u003e attribute helps screen readers. The \u003ccode\u003emeta\u003c/code\u003e tags set character encoding and make the page responsive.\u003c/p\u003e\",\"timeout_seconds\":5},{\"step_number\":2,\"title\":\"Add semantic page sections\",\"instruction\":\"Inside the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e, add a \u003ccode\u003e\u0026lt;header\u0026gt;\u003c/code\u003e with an \u003ccode\u003e\u0026lt;h1\u0026gt;\u003c/code\u003e that says \u003ccode\u003e\\\"Welcome to Our Bakery\\\"\u003c/code\u003e. Then add a \u003ccode\u003e\u0026lt;nav\u0026gt;\u003c/code\u003e with an \u003ccode\u003earia-label=\\\"Main navigation\\\"\u003c/code\u003e attribute. Inside \u003ccode\u003e\u0026lt;nav\u0026gt;\u003c/code\u003e, add an unordered list \u003ccode\u003e\u0026lt;ul\u0026gt;\u003c/code\u003e with three list items \u003ccode\u003e\u0026lt;li\u0026gt;\u003c/code\u003e containing links \u003ccode\u003e\u0026lt;a\u0026gt;\u003c/code\u003e to \u003ccode\u003e#home\u003c/code\u003e, \u003ccode\u003e#menu\u003c/code\u003e, and \u003ccode\u003e#contact\u003c/code\u003e with text \u003ccode\u003eHome\u003c/code\u003e, \u003ccode\u003eMenu\u003c/code\u003e, and \u003ccode\u003eContact\u003c/code\u003e respectively.\",\"starter_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"placeholder_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003c!-- Your code here --\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"solution_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eWelcome to Our Bakery\u003c/h1\u003e\\n \u003c/header\u003e\\n \u003cnav aria-label=\\\"Main navigation\\\"\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"#home\\\"\u003eHome\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#menu\\\"\u003eMenu\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eContact\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"validation_type\":\"code_contains\",\"validation_data\":[\"\u003cheader\u003e\",\"\u003ch1\u003eWelcome to Our Bakery\u003c/h1\u003e\",\"\u003cnav aria-label=\\\"Main navigation\\\"\u003e\",\"\u003cul\u003e\",\"\u003cli\u003e\u003ca href=\\\"#home\\\"\u003eHome\u003c/a\u003e\u003c/li\u003e\",\"\u003cli\u003e\u003ca href=\\\"#menu\\\"\u003eMenu\u003c/a\u003e\u003c/li\u003e\",\"\u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eContact\u003c/a\u003e\u003c/li\u003e\",\"\u003c/ul\u003e\",\"\u003c/nav\u003e\"],\"hint\":\"\u003cp\u003eUse semantic tags for page sections. The \u003ccode\u003earia-label\u003c/code\u003e on \u003ccode\u003enav\u003c/code\u003e helps screen readers understand the menu purpose.\u003c/p\u003e\",\"timeout_seconds\":5},{\"step_number\":3,\"title\":\"Add main content with proper tags\",\"instruction\":\"Below the \u003ccode\u003e\u0026lt;nav\u0026gt;\u003c/code\u003e, add a \u003ccode\u003e\u0026lt;main\u0026gt;\u003c/code\u003e section. Inside \u003ccode\u003e\u0026lt;main\u0026gt;\u003c/code\u003e, add a paragraph \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e that says \u003ccode\u003e\\\"Freshly baked bread and pastries every day.\\\"\u003c/code\u003e Use \u003ccode\u003e\u0026lt;strong\u0026gt;\u003c/code\u003e tags to emphasize the word \u003ccode\u003e\\\"Freshly\\\"\u003c/code\u003e.\",\"starter_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eWelcome to Our Bakery\u003c/h1\u003e\\n \u003c/header\u003e\\n \u003cnav aria-label=\\\"Main navigation\\\"\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"#home\\\"\u003eHome\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#menu\\\"\u003eMenu\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eContact\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"placeholder_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eWelcome to Our Bakery\u003c/h1\u003e\\n \u003c/header\u003e\\n \u003cnav aria-label=\\\"Main navigation\\\"\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"#home\\\"\u003eHome\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#menu\\\"\u003eMenu\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eContact\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n \u003c!-- Your code here --\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"solution_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eWelcome to Our Bakery\u003c/h1\u003e\\n \u003c/header\u003e\\n \u003cnav aria-label=\\\"Main navigation\\\"\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"#home\\\"\u003eHome\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#menu\\\"\u003eMenu\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eContact\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n \u003cmain\u003e\\n \u003cp\u003e\u003cstrong\u003eFreshly\u003c/strong\u003e baked bread and pastries every day.\u003c/p\u003e\\n \u003c/main\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"validation_type\":\"code_contains\",\"validation_data\":[\"\u003cmain\u003e\",\"\u003cp\u003e\u003cstrong\u003eFreshly\u003c/strong\u003e baked bread and pastries every day.\u003c/p\u003e\",\"\u003c/main\u003e\"],\"hint\":\"\u003cp\u003eThe \u003ccode\u003emain\u003c/code\u003e tag holds the main content. Use \u003ccode\u003estrong\u003c/code\u003e to highlight important words instead of deprecated tags like \u003ccode\u003eb\u003c/code\u003e.\u003c/p\u003e\",\"timeout_seconds\":5},{\"step_number\":4,\"title\":\"Add footer with contact information\",\"instruction\":\"At the bottom of the \u003ccode\u003e\u0026lt;body\u0026gt;\u003c/code\u003e, add a \u003ccode\u003e\u0026lt;footer\u0026gt;\u003c/code\u003e section. Inside it, add a paragraph \u003ccode\u003e\u0026lt;p\u0026gt;\u003c/code\u003e with the text \u003ccode\u003e\\\"Contact us at \\\"\u003c/code\u003e followed by an email link \u003ccode\u003e\u0026lt;a href=\\\"mailto:info@localbakery.com\\\"\u0026gt;info@localbakery.com\u0026lt;/a\u0026gt;\u003c/code\u003e. Make sure all tags are properly closed and nested.\",\"starter_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eWelcome to Our Bakery\u003c/h1\u003e\\n \u003c/header\u003e\\n \u003cnav aria-label=\\\"Main navigation\\\"\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"#home\\\"\u003eHome\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#menu\\\"\u003eMenu\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eContact\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n \u003cmain\u003e\\n \u003cp\u003e\u003cstrong\u003eFreshly\u003c/strong\u003e baked bread and pastries every day.\u003c/p\u003e\\n \u003c/main\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"placeholder_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eWelcome to Our Bakery\u003c/h1\u003e\\n \u003c/header\u003e\\n \u003cnav aria-label=\\\"Main navigation\\\"\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"#home\\\"\u003eHome\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#menu\\\"\u003eMenu\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eContact\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n \u003cmain\u003e\\n \u003cp\u003e\u003cstrong\u003eFreshly\u003c/strong\u003e baked bread and pastries every day.\u003c/p\u003e\\n \u003c/main\u003e\\n \u003c!-- Your code here --\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"solution_code\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml lang=\\\"en\\\"\u003e\\n\u003chead\u003e\\n \u003cmeta charset=\\\"UTF-8\\\"\u003e\\n \u003cmeta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\"\u003e\\n \u003ctitle\u003eLocal Bakery\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n \u003cheader\u003e\\n \u003ch1\u003eWelcome to Our Bakery\u003c/h1\u003e\\n \u003c/header\u003e\\n \u003cnav aria-label=\\\"Main navigation\\\"\u003e\\n \u003cul\u003e\\n \u003cli\u003e\u003ca href=\\\"#home\\\"\u003eHome\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#menu\\\"\u003eMenu\u003c/a\u003e\u003c/li\u003e\\n \u003cli\u003e\u003ca href=\\\"#contact\\\"\u003eContact\u003c/a\u003e\u003c/li\u003e\\n \u003c/ul\u003e\\n \u003c/nav\u003e\\n \u003cmain\u003e\\n \u003cp\u003e\u003cstrong\u003eFreshly\u003c/strong\u003e baked bread and pastries every day.\u003c/p\u003e\\n \u003c/main\u003e\\n \u003cfooter\u003e\\n \u003cp\u003eContact us at \u003ca href=\\\"mailto:info@localbakery.com\\\"\u003einfo@localbakery.com\u003c/a\u003e\u003c/p\u003e\\n \u003c/footer\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"validation_type\":\"code_contains\",\"validation_data\":[\"\u003cfooter\u003e\",\"\u003cp\u003eContact us at \u003ca href=\\\"mailto:info@localbakery.com\\\"\u003einfo@localbakery.com\u003c/a\u003e\u003c/p\u003e\",\"\u003c/footer\u003e\"],\"hint\":\"\u003cp\u003eThe footer usually contains contact info or copyright. Use \u003ccode\u003emailto:\u003c/code\u003e links for email addresses.\u003c/p\u003e\",\"timeout_seconds\":5}],\"final_expected_output\":\"A complete, valid HTML5 webpage with semantic sections: header with a main heading, a navigation menu with accessible aria-label, a main content area with emphasized text, and a footer with a clickable email contact link. The page includes proper meta tags and uses correct nesting and closing of tags.\",\"summary\":[\"You learned how to create a valid HTML5 document structure.\",\"You used semantic tags like header, nav, main, and footer for better meaning.\",\"You added accessibility features like aria-label on navigation.\",\"You used proper nesting and closing of tags to avoid common HTML mistakes.\",\"You replaced deprecated tags with semantic alternatives like strong.\"],\"extensions\":[\"Add CSS styles to make the navigation horizontal and the footer background color different.\",\"Add keyboard navigation support by ensuring links are focusable and visible on focus.\",\"Include an image with alt text inside the main section to improve accessibility.\"],\"project_context\":{\"real_world_use\":\"Webpages must be correctly structured and accessible to work well on all devices and for all users, including those using screen readers.\",\"job_relevance\":\"Understanding and fixing common HTML mistakes is essential for front-end developers and web designers to create professional, accessible websites.\"},\"metadata\":{\"version\":\"4.2\",\"content_type\":\"markup\",\"total_steps\":4,\"estimated_time_minutes\":30}}},\"subject\":\"html\",\"title\":\"Common HTML mistakes\"},\"syllabusData\":{\"subject\":\"html\",\"part\":\"part-1\",\"difficulty\":\"beginner\",\"metadata\":{\"total_topics\":7,\"total_patterns\":43,\"patterns_with_content\":43,\"created_at\":\"2026-02-28T20:17:17.741100Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Core Structure \u0026 Content\",\"subjectTitle\":\"HTML\",\"topics\":[{\"topic_id\":\"html_p1_t1\",\"title\":\"HTML Basics \u0026 Web Fundamentals\",\"order\":1,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_is_html\",\"title\":\"What is HTML\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_role_of_html_in_web_development\",\"title\":\"Role of HTML in web development\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_how_browsers_read_html\",\"title\":\"How browsers read HTML\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_html_document_structure\",\"title\":\"HTML document structure\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_doctype_declaration\",\"title\":\"DOCTYPE declaration\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_head_and_body_sections\",\"title\":\"Head and body sections\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_first_html_page\",\"title\":\"First HTML page\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t2\",\"title\":\"HTML Elements \u0026 Tags\",\"order\":2,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_what_is_an_html_element\",\"title\":\"What is an HTML element\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_opening_and_closing_tags\",\"title\":\"Opening and closing tags\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_selfclosing_tags\",\"title\":\"Self-closing tags\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_nested_elements\",\"title\":\"Nested elements\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_blocklevel_elements\",\"title\":\"Block-level elements\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_inline_elements\",\"title\":\"Inline elements\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_common_html_mistakes\",\"title\":\"Common HTML mistakes\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t3\",\"title\":\"Text Content \u0026 Formatting\",\"order\":3,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"html_headings_h1h6\",\"title\":\"Headings (h1–h6)\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_paragraphs\",\"title\":\"Paragraphs\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_line_breaks_and_horizontal_rules\",\"title\":\"Line breaks and horizontal rules\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_bold_and_italic_text\",\"title\":\"Bold and italic text\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_strong_vs_b_tag\",\"title\":\"Strong vs b tag\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_em_vs_i_tag\",\"title\":\"Em vs i tag\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"html_preformatted_text\",\"title\":\"Preformatted text\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"html_p1_t4\",\"title\":\"Links \u0026 Navigation\",\"order\":4,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_anchor_tag_basics\",\"title\":\"Anchor tag basics\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_absolute_vs_relative_urls\",\"title\":\"Absolute vs relative URLs\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_opening_links_in_new_tab\",\"title\":\"Opening links in new tab\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_linking_to_sections_using_ids\",\"title\":\"Linking to sections using IDs\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_email_and_phone_links\",\"title\":\"Email and phone links\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_navigation_structure_basics\",\"title\":\"Navigation structure basics\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p1_t5\",\"title\":\"Images \u0026 Media\",\"order\":5,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"html_image_tag_usage\",\"title\":\"Image tag usage\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_image_source_and_alt_attribute\",\"title\":\"Image source and alt attribute\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_image_sizing_basics\",\"title\":\"Image sizing basics\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_audio_tag_basics\",\"title\":\"Audio tag basics\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_video_tag_basics\",\"title\":\"Video tag basics\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"html_media_formats_overview\",\"title\":\"Media formats overview\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"html_p1_t6\",\"title\":\"Lists\",\"order\":6,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_ordered_lists\",\"title\":\"Ordered lists\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_unordered_lists\",\"title\":\"Unordered lists\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_nested_lists\",\"title\":\"Nested lists\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_description_lists\",\"title\":\"Description lists\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_list_use_cases_in_layout\",\"title\":\"List use cases in layout\",\"order\":5,\"has_content\":true}]},{\"topic_id\":\"html_p1_t7\",\"title\":\"Tables\",\"order\":7,\"pattern_count\":5,\"patterns\":[{\"pattern_id\":\"html_table_structure\",\"title\":\"Table structure\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"html_table_rows_and_columns\",\"title\":\"Table rows and columns\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"html_table_headers\",\"title\":\"Table headers\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"html_cell_merging\",\"title\":\"Cell merging\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"html_table_accessibility_basics\",\"title\":\"Table accessibility basics\",\"order\":5,\"has_content\":true}]}]},\"modeCode\":\"PMC\",\"productId\":\"codefly\"}]]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"Common HTML mistakes Mini Project - Build \u0026 Apply | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Apply Common HTML mistakes in a hands-on mini project. Build something real with step-by-step guidance. Learn by doing, not just reading.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Leyaa.ai\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"learning intelligence,AI learning,personalized learning,adaptive learning,study guide,exam preparation,learning platform,education technology,edtech,smart learning\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"12\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-common-html-mistakes/project\"}],[\"$\",\"link\",\"13\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-common-html-mistakes/project\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/html/part-1/html-common-html-mistakes/project\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:title\",\"content\":\"Common HTML mistakes Mini Project - Build \u0026 Apply | Leyaa.ai\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:description\",\"content\":\"Apply Common HTML mistakes in a hands-on mini project. Build something real with step-by-step guidance. Learn by doing, not just reading.\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/html/part-1/html-common-html-mistakes/project\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:image:alt\",\"content\":\"Common HTML mistakes Mini Project - Build \u0026 Apply\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"26\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"27\",{\"name\":\"twitter:title\",\"content\":\"Common HTML mistakes Mini Project - Build \u0026 Apply | Leyaa.ai\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:description\",\"content\":\"Apply Common HTML mistakes in a hands-on mini project. Build something real with step-by-step guidance. Learn by doing, not just reading.\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"31\",{\"rel\":\"apple-touch-icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"meta\",\"32\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"6:null\n"])</script></body></html>