Scribd
Upload
3K views

HTML Learning Roadmap

George Moller is an expert in HTML and web development. His learning roadmap covers 12 sections that progress from HTML fundamentals to advanced topics like forms, events, and web APIs. The roadmap provides over 100 individual lessons to take students from beginner to expert level skills.

Uploaded by

Hruday charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3K views

HTML Learning Roadmap

George Moller is an expert in HTML and web development. His learning roadmap covers 12 sections that progress from HTML fundamentals to advanced topics like forms, events, and web APIs. The roadmap provides over 100 individual lessons to take students from beginner to expert level skills.

Uploaded by

Hruday charan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

George Moller

_georgemoller

HTML

LEARNING

ROADMAP
START

1 2

FUNDAMENTALS SEMANTIC HTML: SECTIONS


1.1 How the browser parses HTML files.
2.1 Learn the purpose of the following elements:
2.2 <body>

1.2 Syntax of an HTML element; open and


closing tag, element name, attributes, 2.2 <article>

content.
2.3 <section>

1.3 Learn the structure of an HTML 2.4 <nav>

document, <html> <head> <title> &


2.5 <aside>

<body> elements.

2.6 <h1...h6>

1.4 Learn document meta data: <base>,


2.7 <header>

<link>, <meta>, <style> elements.


2.8 <footer>

2.9 <address>
3 4

SEMANTIC HTML: GROUPING ELEMENTS SEMANTIC HTML: TEXT LEVEL


3.1 Learn the purpose of the following elements: 3.1 Learn the purpose of the following elements:

3.2 <main>
3.2 <a>

3.2 <div>
3.2 <em>

3.3 <p>
3.3 <strong>

3.4 <hr>
3.4 <time>

3.5 <ul><ol><li><dl><dt><dd>
3.5 <code>

3.6 <figure>
3.6 <span>

3.7 <figcaption>
3.7 <br>

3.8 <pre>
3.8 <abbr>

5 6

LINKS IMAGES
5.1 Learn href property.
6.1 How to embed an image using the src attribute.

6.2 Learn the supported image formats.

5.2 Learn target property and the difference


between possible values.
6.2 Learn the importance of the alt attribute.

6.3 How to use the loading attribute to lazy load


5.3 Difference between absolute and relative images.

urls.

6.4 How to size an image with the height and width


5.4 Learn how to use the download and rel properties.

attribute.
6.5 Adaptive images: the <picture> and <source>
elements.

5.5 Learn how to navigate to a specific part of


the page. 6.6 Adaptive images: the srcset attribute for <img>
and <source> elements.

7 8

BASIC FORM ELEMENTS FORMS


7.1 Learn the basic input types: button, checkbox, 8.1 How to structure a web form.

radio, date, email, file, number, password, reset,


search.
8.2 How to configure a form to comunicate with
server with attributes: action, enctypes, method,
7.2 How to handle the onchange event.
target.

7.2 Learn the <label> element and how to use the for 8.2 How Form submission attributes work.

attribute, how to properly group a <label> with an


<input>.
8.3 How to perform client side form validation.

7.3 Learn the <button> element: the different type 8.4 How to make a button to submit a form.

values. Learn how to handle the onclick event.

8.4 How to reset a form.


7.4 Learn the <textarea> <select>,<optgroup>,
<fieldset>, <legend>.
9 10

EVENTS: PART 1 EVENTS: PAR 2


9.1 Window events
10.1 Common global events
onbeforeunloa
onloa
onchang
onunloa
onresize
onclic
9.2 Keyboard events onclos
onkeydow onresiz
onkeypres
onsubmit

onkeyup

9.3 Mouse events

onclic
ondbclic
onmousedow
onmousemov
onmouseout
11 12

The window object WEB APiS & INTERFACES

11.1 How to get inner height and width values.


12.1 Web storage: Local storage, session storage.

11.2 Learn pageXOffset and pageYOffset 12.2 URLSeachParams Interface.

properties.
12.3 Geolocation API.

11.3 Learn setInterval, setTimeout, 12.4 ResizeObserver Api.

clearInterval, clearTimeout methods.

12.5 Drag and drop API.

11.4 Learn scrollTo method.

12.6 History API.

11.5 Learn the window.location object.


12.7 Intersection Observer API.

12.8 Fetch API.

12.9 Web notifications.

You might also like