HTML Fundamentals

What HTML is and how the browser reads it.

1. What is HTML?فيديو 8 د
2. ·
   How the Browser Reads Your Codeفيديو · أكمل الدرس السابق أولًا 7 د
3. ·
   Your First HTML Fileدرس · أكمل الدرس السابق أولًا
4. ·
   The Anatomy of an Elementدرس · أكمل الدرس السابق أولًا
5. ·
   My First Webpageتطبيق عملي · أكمل الدرس السابق أولًا

DOCTYPE, head, body, and what goes inside each.

1. ·
   DOCTYPE, html, head, bodyدرس · أكمل الدرس السابق أولًا
2. ·
   The title Tagدرس · أكمل الدرس السابق أولًا
3. ·
   meta charset and viewportدرس · أكمل الدرس السابق أولًا
4. ·
   Linking CSS and JS Filesدرس · أكمل الدرس السابق أولًا
5. ·
   Comments in HTMLدرس · أكمل الدرس السابق أولًا

Structuring and styling text content.

1. ·
   h1 to h6 — Hierarchy Mattersفيديو · أكمل الدرس السابق أولًا 6 د
2. ·
   Paragraphs with pدرس · أكمل الدرس السابق أولًا
3. ·
   strong, em, mark, and smallدرس · أكمل الدرس السابق أولًا
4. ·
   br and hrدرس · أكمل الدرس السابق أولًا
5. ·
   pre and codeدرس · أكمل الدرس السابق أولًا

Anchor tags, URLs, and building navigation.

1. ·
   The Anchor Tagدرس · أكمل الدرس السابق أولًا
2. ·
   Absolute vs Relative URLsدرس · أكمل الدرس السابق أولًا
3. ·
   target="_blank" and rel="noopener"درس · أكمل الدرس السابق أولًا
4. ·
   Linking to Page Sections with idدرس · أكمل الدرس السابق أولًا
5. ·
   The nav Elementدرس · أكمل الدرس السابق أولًا

Images, video, audio, and embedded content.

1. ·
   The img Tagدرس · أكمل الدرس السابق أولًا
2. ·
   File Formats — When to Use Whatدرس · أكمل الدرس السابق أولًا
3. ·
   figure and figcaptionدرس · أكمل الدرس السابق أولًا
4. ·
   video and audioدرس · أكمل الدرس السابق أولًا
5. ·
   iframe — Embedding External Contentدرس · أكمل الدرس السابق أولًا
6. ·
   Media Gallery Pageتطبيق عملي · أكمل الدرس السابق أولًا

Organising content with ul, ol, and dl.

1. ·
   Unordered and Ordered Listsدرس · أكمل الدرس السابق أولًا
2. ·
   ol type and startدرس · أكمل الدرس السابق أولًا
3. ·
   List Items and Best Practicesدرس · أكمل الدرس السابق أولًا
4. ·
   Description Listsدرس · أكمل الدرس السابق أولًا
5. ·
   Nesting Listsدرس · أكمل الدرس السابق أولًا

Structured data with HTML tables.

1. ·
   table, tr, td, thدرس · أكمل الدرس السابق أولًا
2. ·
   thead, tbody, tfootدرس · أكمل الدرس السابق أولًا
3. ·
   colspan and rowspanفيديو · أكمل الدرس السابق أولًا 8 د
4. ·
   caption and Accessibilityدرس · أكمل الدرس السابق أولًا
5. ·
   Pricing Tableتطبيق عملي · أكمل الدرس السابق أولًا

Building interactive forms.

1. ·
   form action and methodدرس · أكمل الدرس السابق أولًا
2. ·
   input Types — text, email, password, number, dateدرس · أكمل الدرس السابق أولًا
3. ·
   input Types — checkbox, radioدرس · أكمل الدرس السابق أولًا
4. ·
   label and the for Attributeفيديو · أكمل الدرس السابق أولًا 6 د
5. ·
   select Dropdownدرس · أكمل الدرس السابق أولًا
6. ·
   textareaدرس · أكمل الدرس السابق أولًا
7. ·
   button vs input type="submit"درس · أكمل الدرس السابق أولًا
8. ·
   fieldset and legendدرس · أكمل الدرس السابق أولًا
9. ·
   Form Validation Attributesدرس · أكمل الدرس السابق أولًا
10. ·
    Registration Formتطبيق عملي · أكمل الدرس السابق أولًا

Writing HTML that means something.

1. ·
   What is Semantic HTML and Why It Mattersفيديو · أكمل الدرس السابق أولًا 9 د
2. ·
   header, footer, mainدرس · أكمل الدرس السابق أولًا
3. ·
   section, article, asideدرس · أكمل الدرس السابق أولًا
4. ·
   details and summaryدرس · أكمل الدرس السابق أولًا
5. ·
   time, address, and abbrدرس · أكمل الدرس السابق أولًا
6. ·
   div vs span vs Semantic Elementsفيديو · أكمل الدرس السابق أولًا 8 د
7. ·
   Blog Post Page — Semantic Onlyتطبيق عملي · أكمل الدرس السابق أولًا

Attributes that work on every HTML element.

1. ·
   id and classدرس · أكمل الدرس السابق أولًا
2. ·
   style and titleدرس · أكمل الدرس السابق أولًا
3. ·
   data-* Custom Attributesدرس · أكمل الدرس السابق أولًا
4. ·
   hidden, tabindex, and contenteditableدرس · أكمل الدرس السابق أولًا
5. ·
   lang and dir — RTL Supportدرس · أكمل الدرس السابق أولًا

Making the web usable for everyone.

1. ·
   What is Accessibility and Who It Servesدرس · أكمل الدرس السابق أولًا
2. ·
   alt Text Done Rightدرس · أكمل الدرس السابق أولًا
3. ·
   ARIA Roles — role, aria-label, aria-hiddenفيديو · أكمل الدرس السابق أولًا 10 د
4. ·
   Keyboard Navigation and tabindexدرس · أكمل الدرس السابق أولًا
5. ·
   Semantic HTML as the First Layer of Accessibilityدرس · أكمل الدرس السابق أولًا
6. ·
   Audit and Fix an Inaccessible Pageتطبيق عملي · أكمل الدرس السابق أولًا

Understanding what the browser actually does with your HTML.

1. ·
   The DOM — What the Browser Actually Buildsفيديو · أكمل الدرس السابق أولًا 10 د
2. ·
   How Parsing Works — and What Breaks Itفيديو · أكمل الدرس السابق أولًا 8 د
3. ·
   Block vs Inline Elements Revisitedدرس · أكمل الدرس السابق أولًا
4. ·
   The head in Depth — Favicons, OG Tags, Canonicalدرس · أكمل الدرس السابق أولًا
5. ·
   script — defer, async, and Placementفيديو · أكمل الدرس السابق أولًا 8 د
6. ·
   link rel — Preload, Prefetch, DNS-Prefetchدرس · أكمل الدرس السابق أولًا
7. ·
   HTML Entities and Special Charactersدرس · أكمل الدرس السابق أولًا
8. ·
   Void Elements vs Container Elementsدرس · أكمل الدرس السابق أولًا

Put everything together.

1. ·
   Full Personal Portfolio Page — HTML Onlyتطبيق عملي · أكمل الدرس السابق أولًا