top of page

Week 1: HTML Basics Introduction to HTML What is HTML? (Hypertext Markup Language) Role of HTML in web development Basic structure of an HTML document (<html>, <head>, <body>) Basic Tags and Structure Learn about common tags: <h1>–<h6>, <p>, <a>, <img>, <ul>, <li>, <ol>, <div>, <span> Use the correct document structure Attributes Understanding attributes like id, class, href, src, and alt Practice Build simple web pages with headings, paragraphs, images, links, and lists Resources: MDN HTML Introduction FreeCodeCamp HTML Basics Week 2: Intermediate HTML Elements Forms and Input Learn about <form>, <input>, <button>, <select>, <textarea>, and <label> Form submission and method attributes (GET, POST) Tables Basic table structure: <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot> Using tables for layout (though it's recommended to use CSS for layout later) Multimedia Elements Embedding videos with <video>, audio with <audio>, and embedding content like YouTube using <iframe> Practice Create forms (contact form, login form, etc.) Build tables to display data Resources: HTML Forms Tutorial on MDN MDN Table Tutorial Week 3: Advanced HTML Concepts Semantic HTML Understand the importance of semantic HTML Tags like <header>, <footer>, <article>, <section>, <nav>, <main>, and <aside> Accessibility considerations (e.g., screen readers and keyboard navigation) HTML5 Features New HTML5 tags and features (e.g., <mark>, <progress>, <meter>, <canvas>) Understanding the <meta> tag for setting page encoding and descriptions Responsive Design Introduction Basic introduction to responsive design principles Using the <meta name="viewport" content="width=device-width, initial-scale=1"> tag Practice Refactor older HTML projects to use semantic elements Experiment with HTML5 features and responsive practices Resources: Semantic HTML Guide HTML5 Overview on MDN Week 4: Project Week Build a Portfolio Website Combine all your HTML knowledge to build a personal portfolio site Use a combination of headings, paragraphs, images, and forms to display your projects Validate Your HTML Learn how to use HTML validators (e.g., W3C Validator) Learn Basic HTML Styling (Introduction to CSS) While focusing on HTML, start learning how to link CSS files and apply simple styles (e.g., font-family, color, background) Final Project Build and deploy your portfolio website with HTML, some CSS for styling, and any multimedia content (images, videos, etc.) Resources: W3C HTML Validator CSS Basics Introduction Week 5 and Beyond: Practice and Refinement Continue building more projects: blogs, small business websites, etc. Join online coding challenges and contribute to open-source projects. Learn about best practices for HTML5 and web accessibility. Explore more advanced topics like Progressive Web Apps (PWAs), HTML APIs, and integrations with JavaScript. Resources: HTML Best Practices FreeCodeCamp HTML Challenges This learning plan is designed to give you a solid foundation in HTML. Once you're comfortable with these concepts, you can dive deeper into related technologies like CSS and JavaScript to enhance your web development skills.

bottom of page