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

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

Immutable class with mutable member fields in java

Immutable class is a class which once created, it's content can not be changed. Immutable classes are good choice for HashMap key as their state cannot be changed once they are created. Objects of immuable classes are also thread safe as threads can not change the value of its fields once it is created. Creating a basic immutable class is very easy, but as you dig deep you will start facing many challenges. This makes Immutability a very famous interview topic for mid level java developers. This article is a continuation of our article  How to create Immutable Class in Java   where we have discussed about creating basic immutable class using traditional approach as well as using Builder Design Pattern approach. In this article, we will discuss about How we will achieve immutability, if it has member variables of any third party class which is mutable. Or what will you do if you have reference of any...
Post a Comment
Read more