# HTML Practice Assignment: Gumawa ng Mockup ng Blog ## Mga Layunin sa Pag-aaral I-apply ang iyong kaalaman sa HTML sa pamamagitan ng pagdidisenyo at pag-code ng kumpletong istruktura ng homepage ng blog. Ang hands-on na assignment na ito ay magpapalakas sa mga konsepto ng semantic HTML, pinakamahusay na mga kasanayan sa accessibility, at mga propesyonal na kasanayan sa pag-aayos ng code na magagamit mo sa buong paglalakbay mo sa web development. **Sa pagtatapos ng assignment na ito, ikaw ay:** - Magpapraktis sa pagpaplano ng layout ng website bago mag-code - Mag-aapply ng mga semantic HTML elements nang tama - Lilikha ng accessible at maayos na markup - Magde-develop ng propesyonal na coding habits gamit ang mga komento at organisasyon ## Mga Kinakailangan sa Proyekto ### Bahagi 1: Pagpaplano ng Disenyo (Visual Mockup) **Gumawa ng visual mockup ng iyong homepage ng blog na naglalaman ng:** - Header na may pamagat ng site at navigation - Pangunahing content area na may hindi bababa sa 2-3 preview ng blog post - Sidebar na may karagdagang impormasyon (about section, recent posts, categories) - Footer na may impormasyon sa contact o mga link **Mga Opsyon sa Paglikha ng Mockup:** - **Hand-drawn sketch**: Gumamit ng papel at lapis, pagkatapos kunan ng larawan o i-scan ang iyong disenyo - **Digital tools**: Figma, Adobe XD, Canva, PowerPoint, o anumang drawing application - **Wireframe tools**: Balsamiq, MockFlow, o katulad na wireframing software **Lagyan ng label ang mga seksyon ng iyong mockup** gamit ang mga HTML elements na balak mong gamitin (hal., "Header - `
`", "Blog Posts - `
`"). ### Bahagi 2: Pagpaplano ng HTML Element **Gumawa ng listahan na nagmamapa sa bawat seksyon ng iyong mockup sa mga partikular na HTML elements:** ``` Example: - Site Header →
- Main Navigation →