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.
