Scribd
Upload
8 views4 pages

HTML5 30 Day Learning Plan

The document outlines a 30-day learning plan for HTML5, structured into four weeks focusing on HTML basics, forms and semantic tags, advanced concepts, and real projects. Each day includes specific topics, practices, and mini-projects to reinforce learning. The plan culminates in a final project where learners create a fully responsive website and share their work.

Uploaded by

masumakhtar9932
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views4 pages

HTML5 30 Day Learning Plan

The document outlines a 30-day learning plan for HTML5, structured into four weeks focusing on HTML basics, forms and semantic tags, advanced concepts, and real projects. Each day includes specific topics, practices, and mini-projects to reinforce learning. The plan culminates in a final project where learners create a fully responsive website and share their work.

Uploaded by

masumakhtar9932
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

HTML5 30-Day Learning Plan (2

Hours/Day)
Week 1: HTML Basics (Foundation)

Day 1
What is HTML?
- Basic structure of an HTML page
- Headings, Paragraphs, Line Breaks
- Practice: Make a basic 'About Me' page

Day 2
HTML Elements and Attributes
- Bold, Italic, Underline, Superscript, Subscript
- Comments, Horizontal Line
- Practice: Personal Bio page

Day 3
Links (Internal, External, Anchor)
- Images (with alt text and dimensions)
- Practice: Page with profile pic and links

Day 4
Lists: Ordered, Unordered, Description
- Practice: Create a shopping list or to-do list

Day 5
Tables (rows, columns, headers)
- Merging cells (colspan, rowspan)
- Practice: Timetable

Day 6
Div & Span tags
- HTML Entities ( , <, etc.)
- Practice: Info block layout using divs

Day 7
Full Review + Mini Project:
- Design a basic resume using only HTML
Week 2: HTML Forms + Semantic Tags

Day 8
Introduction to Forms
- Input types: text, email, password, checkbox, radio
- Labels, Placeholders

Day 9
Textarea, Select, Option, Buttons
- Fieldset, Legend
- Practice: Contact form

Day 10
Form attributes: action, method, required, etc.
- Input validation basics
- Practice: Registration form

Day 11
Semantic HTML5 Tags: <header>, <nav>, <main>, <section>, <article>, <footer>
- Why semantic tags matter (SEO, accessibility)
- Practice: Basic page layout using semantic tags

Day 12
Media in HTML: <audio>, <video>, <source>
- Practice: Embed YouTube video, audio clip

Day 13
Iframe and embedding external content (Google Map, YouTube)
- Practice: Create a media page

Day 14
Full Review + Mini Project:
- Create a blog layout with nav, articles, images, and footer

Week 3: Advanced Concepts + Page Structure

Day 15
Meta tags (charset, viewport, description, etc.)
- SEO basics with HTML
- Practice: Create a well-optimized webpage
Day 16
Favicons, title tag, linking CSS
- Use of <link> and <style>
- Practice: Add style tags and favicon

Day 17
Accessibility basics: alt text, ARIA roles, tab index
- Practice: Make your contact form more accessible

Day 18
HTML5 APIs overview (geolocation, web storage - just theory for now)
- Practice: Embed real map iframe + dummy local storage explanation

Day 19
Responsive structure (using meta viewport, container divs)
- Practice: Simple responsive layout using % widths

Day 20
Common Mistakes in HTML
- HTML validation with W3C
- Practice: Validate one of your previous projects

Day 21
Full Review + Mini Project:
- Design a simple travel website homepage with semantic layout and forms

Week 4: Real Projects + Practice + Hosting

Day 22
Mini Project: Personal Portfolio Page (with sections: About, Projects, Contact)

Day 23
Mini Project: Food Menu Page (with tables, images, and prices)

Day 24
Mini Project: Simple Blog Page (with articles and comment form)

Day 25
Create a multi-page website (3–4 pages linked together)

Day 26
Practice: Redesign one of your older pages with better structure
Day 27
Introduction to GitHub Pages (for free hosting)
- Practice: Host your HTML project online

Day 28
Final Project Planning: Choose a final HTML-only project idea

Day 29
Work on Final Project (Full responsive website)

Day 30
Finish Final Project + Review everything you learned
- Celebrate and Share your work!

You might also like