Full Notes on Notion.


Tutorial by Dave Gray

Free YouTube Tutorial.

"Keep striving for progress, not perfection. And a little progress every day goes a very long way." - Dave Gray


MDN provides detailed explaination on each classes and attributes.

Getting Started

Example of HTML5 Code.
<a href="https://leekaize.com"> leekaize.com </a>
<h1> Homepage | Lee Kai Ze </h1>
<p> Paragraph of words. </p>

Environment Setup

VS Code has became the go-to choice for most programming languages in 2023.

The Live Server Extension allows quick preview of development website without manually setting up local server.


  1. Head with Metadata
  2. Body with Semantic and Visuals Contents

HTML Validation

Use w3c tool for HTML validation by uploading the HTML files.

01 - Head Element

  1. Metadata through <meta> tags.
  2. Link to favicon and stylesheet through <link> tags.

02 - Text Basics


<h1>, <h2>, etc.
Gives Semantic Meanings
<hr>, <br>, etc.
Provides Visuals or Functions
Block-level (e.g., <p>), Inline-level (e.g., <em>, <strong>)

HTML Entities

Here are some HTML Entities: < © >
Typed as: &lt;&nbsp;&copy;&nbsp;&gt;

03 - List Types

Ordered List
Numbered Points with <li> as list items.
Unordered List
Bullet Points with <li> as list items.
Descriptive List
<dt> as item topic and <dd> as item description.

05 - Add Images

<img src="/img/kuching.jpg" alt="A photo taken at Kuching Riverside." title="Kuching Riverside" width="500" loading="lazy">
<figcaption>Kuching Riverside.</figcaption>

The `width` and `height` are recommended in `img` tag to give the browser an idea of the image size although it will be done on CSS too.
The `loading="lazy"` make the page only load that image until scrolled to there.

06 - Semantic Tags

Semantic - Provides Meaning rather than just visual. These are important for assistive technologies, try not to make everything just a generic <div> or <span> as they don't have any meanings by themselves, they are more useful in CSS.

07 - Create Tables

<caption>, <thead>, <tbody> and <tfoot> gives semantic section to the table.
Data within table are defined under <tr> (rows), <th> (heading data), <td> (data).

08 - Forms and Inputs

Get vs Post

  • get - will show all the parameters within URLs.
  • post -directly pass in the value to the endpoint.

Types of Inputs

  • text
  • password
  • email
  • Custom optgroup with select
  • radio
  • textarea
  • button
  • etc... Full list can be found on MDN.