List of HTML Tutorial Series & Course List

Hello my friend! Welcome to the List of HTML Tutorial Series & Course List on dev.rean.me! Below is the complete step-by-step learning guide covering everything from basic HTML tags, lists, tables, modern forms, dropdown auto-complete, Google Fonts integration, and essential VS Code developer tools!

Click on any tutorial link below to open full step-by-step guide with video in a new tab! Let's get started!

📄 HTML Fundamentals, Elements & Lists

Learn the building blocks of website structure, ordered/unordered lists, semantic tables, and HTML5 best practice tips.

1. 01 - Lists in HTML (Ordered, Unordered, and Description Lists)
   Master <ol>, <ul>, and <dl> tags for building clean website navigation menus and content lists.

2. 02 - How to Use Table Tags in HTML (Table Headers, Rows & Cells)
   Learn <table>, <tr>, <th>, <td>, colspan, rowspan, and semantic <thead>/<tbody> table structure.

3. 03 - HTML Tips and Tricks with Examples
   Modern HTML5 best practices, semantic tags, accessibility attributes, and bad vs good code examples.

💡 Tip: Always use semantic HTML tags like <header>, <nav>, <main>, <article>, and <footer> instead of generic <div> everywhere! It helps Google search engine understand your website content better!

---

📝 Modern HTML Forms, Controls & Inputs

Master user interactive elements, fieldsets, radio buttons, checkboxes, custom dropdown lists, auto-complete datalists, and calculator layouts.

4. 04 - How to Use Fieldsets with Radios and Checkboxes in HTML
   Group related form fields using <fieldset> and <legend> for clean radio button and checkbox layouts.

5. 05 - Everything About Dropdown Lists in HTML (<select> & <option>)
   Master <select>, <option>, <optgroup>, multiple selection, disabled options, and default selected values.

6. 06 - How to Create Dropdown List with Auto-Complete in HTML (<datalist>)
   Create smart auto-suggest search dropdown inputs using native HTML <datalist> without heavy JavaScript libraries.

7. 07 - How to Create a Simple Calculator in HTML
   Build a functional calculator user interface using HTML input buttons, text display screen, and simple logic.

💡 Tip: Always add <label for="id_name"> connected to <input id="id_name">! When user click on label text, input field or checkbox will get focus automatically! Very good for user experience!

---

🎨 Web Typography & Fonts Setup

Learn how to import and pair multiple Google Fonts on your webpage and pick the best developer coding fonts for VS Code.

8. 08 - How to Add Multiple Google Fonts in HTML (Video Tutorial in Khmer)
   Step-by-step guide to import and pair multiple Google Fonts using <link> tag and CSS font-family property.

9. 09 - Best Free Coding Fonts for VS Code & Web Development
   Top developer programming fonts with ligatures (Fira Code, JetBrains Mono, Cascadia Code) for clean code reading.

💡 Tip: When loading Google Fonts in HTML, always add display=swap parameter inside Google Font link! This prevents invisible text flash (FOIT) while font is downloading!

---

🛠️ Developer Tools, IDEs & VS Code Extensions

Supercharge your development workflow with top code editors and essential frontend extensions for Visual Studio Code.

10. 10 - Essential VS Code Extensions for Modern HTML & Frontend Development
    15 must-have Visual Studio Code extensions to speed up HTML editing, auto-close tags, formatting, and live server preview.

11. 11 - Top IDEs and Code Editors for Web Developers
    Comparing top code editors (VS Code, WebStorm, Sublime Text, Brackets) for fast web development workflow.

💡 Tip: Install Live Server extension inside VS Code! You can right-click any HTML file and select "Open with Live Server" to auto-reload browser every time you press Ctrl+S! Save so much time!