Skip to main content

HTML5 30-Day Course Outline

 

🗓️ Week 1: HTML5 Fundamentals and Structure

🎯 Goal: Understand the structure of HTML5 and core elements.

Day 1: Introduction to HTML5

✅ Concepts

  • What is HTML5 and its role in web development
  • <!DOCTYPE html> declaration
  • Basic HTML structure (<html>, <head>, <body>)
  • Character encoding (UTF-8)

✅ Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First HTML5 Page</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

✅ Task:
👉 Create a basic HTML page with a title and h1 element.

Day 2: HTML Elements and Semantics

✅ Concepts

  • Block vs Inline Elements
  • <div>, <span>, <article>, <section>, <aside>, <main>, <footer>
  • Importance of semantic HTML for SEO

✅ Example Code

html

<article>
  <header>
    <h1>My Blog Post</h1>
  </header>
  <p>This is the content of my blog post.</p>
</article>

✅ Task:
👉 Create a webpage with an article section and a sidebar.

Day 3: Headings and Paragraphs

✅ Concepts

  • <h1> to <h6> hierarchy
  • <p> for paragraphs
  • Proper use of heading levels for accessibility

✅ Example Code

html

<h1>Welcome to My Website</h1>
<h2>About Us</h2>
<p>This is a paragraph of text about our company.</p>

✅ Task:
👉 Create a webpage with proper heading structure.

Day 4: Lists and Navigation

✅ Concepts

  • Ordered and Unordered Lists (<ol>, <ul>, <li>)
  • <nav> element for accessibility

✅ Example Code

html

<nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

✅ Task:
👉 Create a website navigation menu using <nav>.

Day 5: Links and Buttons

✅ Concepts

  • <a> for links (href, target, rel)
  • <button> for clickable actions
  • ARIA attributes for screen readers

✅ Example Code

html

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Visit Example
</a>
<button aria-label="Submit Form">Submit</button>

✅ Task:
👉 Create a navigation bar with buttons and links.

Day 6: Images and Multimedia

✅ Concepts

  • <img> (alt, loading, width, height)
  • <audio> and <video>
  • Best practices for loading media

✅ Example Code

html

<img src="image.jpg" alt="Example Image" loading="lazy" width="300">
<video controls width="600">
  <source src="video.mp4" type="video/mp4">
</video>

✅ Task:
👉 Create a multimedia page with images and a video.

Day 7: Forms - Part 1

✅ Concepts

  • <form>, <input>, <label>, <textarea>
  • Form attributes (required, placeholder)

✅ Example Code

html

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" required>
</form>

✅ Task:
👉 Create a contact form with basic validation.

🗓️ Week 2: Forms, Tables, and Multimedia

🎯 Goal: Build interactive forms and media elements.

Day 8: Forms - Part 2

✅ Concepts

  • HTML5 form validation (pattern, min, max)
  • novalidate attribute

✅ Example Code

html

<form>
  <input type="email" required pattern=".+@example\.com">
</form>

✅ Task:
👉 Add form validation for email and phone number.

Day 9: Tables

✅ Concepts

  • <table>, <thead>, <tbody>, <tfoot>
  • Accessibility for tables

✅ Example Code

html

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

✅ Task:
👉 Create a responsive table.

Day 10: Inline vs Block Elements

✅ Concepts

  • Difference between inline and block elements

✅ Example Code

html

<span>This is inline</span>
<div>This is block</div>

✅ Task:
👉 Mix inline and block elements in a page.

Day 11: Advanced Form Elements

✅ Concepts

  • input[type="date"], input[type="color"]
  • datalist, fieldset, legend

✅ Example Code

html

<fieldset>
  <legend>Personal Info</legend>
  <input type="date">
</fieldset>

✅ Task:
👉 Create a form with different input types.

Day 12: Canvas Basics

✅ Concepts

  • <canvas> for graphics and animations

✅ Example Code

html

<canvas id="myCanvas"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillRect(20, 20, 100, 100);
</script>

✅ Task:
👉 Draw a rectangle on a canvas.

Day 13: Canvas Advanced

✅ Concepts

  • Animation using Canvas
  • Gradients and text rendering

✅ Example Code

html

ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2);
ctx.fillStyle = 'blue';
ctx.fill();

✅ Task:
👉 Create a bouncing ball animation.

Day 14: SVG Basics

✅ Concepts

  • <svg> for vector graphics
  • <circle>, <rect>, <path>

✅ Example Code

html

✅ Task:
👉 Create an SVG logo.

Comments

Post a Comment

Popular posts from this blog

Yahoo! Calendar "Add Event" Seed URL Parameters

I can't seem to find any official documentation on this, so here are my notes. Some information gathered from  http://richmarr.wordpress.com/tag/calendar/ Other information gathered through trial and error, and close examination of the "Add Event" form on Yahoo!'s site. Yahoo! Calendar URL Parameters Parameter Required Example Value Notes v Required 60 Must be  60 . Possibly a version number? TITLE Required Event title Line feeds will appear in the confirmation screen, but will not be saved. May not contain HTML. ST Required 20090514T180000Z Event start time in UTC. Will be converted to the user's time zone. 20090514T180000 Event start time in user's local time 20090514 Event start time for an all day event. DUR value is ignored if this form is used. DUR 0200 Duration of the event. Format is HHMM, zero-padded. MM may range up to 99, and is converted into hours appropriately. HH values over 24 hours appear to be modulated by 24. Durations t...
1 comment
Read more

HTML5 Learning Roadmap

  ✅ HTML5 Learning Roadmap 🏆 Goal: Become proficient in writing clean, accessible, and SEO-friendly HTML5 code for production. Day Topic Learning Focus Output/Exercise 1 Introduction to HTML5 HTML document structure, DOCTYPE, head, body, metadata Create a basic HTML5 page 2 HTML Elements and Semantics Elements ( <div> , <span> , <article> , <section> ) and their semantic meaning Build a semantic HTML5 layout 3 Headings and Paragraphs <h1> to <h6> , <p> , proper heading hierarchy for SEO Create a structured blog post 4 Lists and Navigation Ordered ( <ol> ), unordered ( <ul> ), and navigation ( <nav> ) Create a navigation menu 5 Links and Buttons <a> , <button> , attributes like target , rel , aria-label Create a navigation bar with working links 6 Images and Multimedia <img> , <audio> , <video> , lazy loading, alt attributes Embed responsive images and a video 7 Forms - Part 1 <input...
Post a Comment
Read more

Java Identifiers

Language Fundamentals Java Identifiers: A name in a java Program is called an Identifier, Which can be used for representing classes, methods, variables and labels. Rules: 1. Java Identifier is composed of a sequence of characters, where each character may be a   ASCII Latin letters A–Z(\u0041–\u005a), and a–z (\u0061–\u007a) and for historical reasons , the ASCII underscore (_, or \u005f) and dollar sign ($, or \u0024) and ASCII digits 0-9 (\u0030–\u0039). i.e A-Z,a-z,_,$,0-9 The $ character should be used only in mechanically generated source code or, rarely, to access pre-existing names on legacy systems. If we use other character we will get compiled time error saying illegal character. 2. No identifier starts with the digit. 3. There is no length limit for java identifier, but SUN highly recommended up to 15 characters. 4. Identifiers in java are case sensitive. 5. We are not allowed to use reserved words (java keywords) as identifier. 6 . All predefin...
Post a Comment
Read more