HTML Tutorials

What is HTML Why HTML How HTML Works HTML vs Other Languages Prerequisites

HTML Definition and Meaning HTML Full Form Explanation HTML History and Evolution HTML Version 1.0 Features HTML Version 2.0 Features HTML Version 3.2 Features HTML Version 4.01 Features HTML5 Complete Overview HTML Living Standard WHATWG

Importance of HTML in Web Development HTML as Backbone of Websites Career Opportunities with HTML Salary Expectations for HTML Developers

HTML Browser Rendering Process DOM Tree Creation Parser and Render Engine Critical Rendering Path

HTML vs CSS HTML vs JavaScript HTML vs XML HTML vs XHTML Differences HTML vs Markdown HTML vs Rich Text Format

Basic Computer Skills Needed Understanding File Extensions Knowledge of Folder Structure Basic Typing Skills Understanding Web Browsers Internet Basics Knowledge

Free Editors Paid Editors

Live Server Extension Install Live Server Usage Tutorial HTML CSS Support Extension Auto Rename Tag Extension Auto Close Tag Extension Prettier Extension Setup Prettier Format on Save HTML Snippets Extension IntelliSense for CSS Path Intellisense Extension Color Highlight Extension Bracket Pair Colorizer Material Icon Theme Live Share Extension REST Client Extension

Create New File Shortcut Save File Shortcut Ctrl+S Save All Files Shortcut Open Command Palette F1 Toggle Sidebar Shortcut Zen Mode Shortcut Split Editor Shortcut Close Editor Shortcut Find and Replace Shortcut Go to Line Shortcut Comment Line Shortcut Duplicate Line Shortcut Move Line Up Down Format Document Shortcut Open Terminal Shortcut

CodePen Introduction CodePen First HTML JSFiddle Introduction JSFiddle First HTML Replit Introduction Replit HTML Setup Glitch Introduction Glitch HTML Project StackBlitz Introduction CodeSandbox HTML OneCompiler HTML Editor W3Schools TryIt Editor Tutorialspoint Coding Ground

Chrome DevTools Opening Elements Tab Overview Inspecting HTML Elements Editing HTML Live Console Tab Usage Sources Tab Overview Network Tab Monitoring Application Tab Storage Lighthouse Performance Tool Firefox Developer Tools Safari Web Inspector Edge DevTools Mobile Device Emulation Responsive Design Mode DOM Tree Visualization Event Listeners Inspection Accessibility Inspector

New File Creation Steps Save as .html Extension File Naming Conventions index.html as Homepage about.html Page Creation contact.html Page Creation

DOCTYPE Declaration Purpose DOCTYPE for HTML5 DOCTYPE for HTML 4.01 HTML Tag Opening Closing HTML lang Attribute en HTML lang Attribute for Hindi HTML lang Attribute for Arabic Head Tag Purpose Explained Body Tag Purpose Explained Head vs Body Differences

Title Tag Syntax Title Display on Browser Tab Title for SEO Optimization Title Length Best Practices Title with Special Characters Dynamic Title with JavaScript

Open in Chrome Browser Open in Firefox Browser Open in Safari Browser Open in Edge Browser Drag and Drop to Browser Right Click Open With Live Server Auto Reload Browser Refresh Shortcut F5 Hard Refresh Ctrl+F5

Forgot Closing Tag Misspelled Tag Names Wrong Case Sensitivity Missing Quotes in Attributes Wrong Folder File Path Browser Cache Issues Validation Errors Fix

Indentation Rules Lowercase Tag Names Quote Attributes Double Add Comments for Clarity Semantic Structure First

DOCTYPE HTML5 Exclamation Mark DOCTYPE Case Sensitivity DOCTYPE Placement Top Line DOCTYPE Effect on Browser Mode DOCTYPE Quirks Mode vs Standards DOCTYPE No DOCTYPE Behavior

HTML Tag Attributes HTML Tag xmlns Attribute HTML Tag lang for Accessibility Nested HTML Tag Rules

Head Tag Children Elements Head Tag Order Importance Head Tag Multiple Elements Head Tag Optional Elements Head Tag in HTML vs XHTML

Body Tag Background Attribute Body Tag Text Attribute Body Tag Link Attribute Body Tag VLink Attribute Body Tag ALink Attribute Body Tag Top Margin Attribute Body Tag Left Margin Attribute Body Tag CSS Styling Modern Body Tag Onload Event Body Tag Onunload Event Body Tag Onbeforeunload Event

Script Tag in Head vs Body Style Tag in Head Only Link Tag in Head Meta Tags in Head Visible vs Invisible Content

Single Line Comment Syntax Multi Line Comment Syntax Comment Keyboard Shortcut Comment for Debugging Comment to Hide Code Comment Conditional Statements Comment IE Conditional Comment Best Practices Comment for Documentation Comment for TODO Tasks

Multiple Spaces Handling Line Breaks Handling Tabs and Spaces in HTML Pre Tag Preserve Whitespace CSS White Space Property

ASCII Character Set ANSI Character Set ISO-8859-1 Latin UTF-8 Universal Encoding UTF-16 vs UTF-8 Meta Charset UTF-8 Special Characters Display Emoji Support in UTF-8

What are HTML Elements Element vs Tag Difference Start Tag and End Tag Empty Elements Void Elements Self Closing Tag Syntax Nested Elements Rules Element Hierarchy Tree Parent Child Relationship Sibling Elements Concept Ancestor Descendant Terms

Block Level Elements List Inline Elements List Inline Block Elements Replaced Elements Non Replaced Elements Interactive Elements Phrasing Content Elements Flow Content Elements Sectioning Content Elements Heading Content Elements Embedded Content Elements

Html Tag Root Element Html Tag xmlns Namespace Html Tag lang for Language Html Tag dir for Direction Html Tag manifest for Cache Html Tag version Deprecated Multiple Html Tags Invalid

Head Tag Container for Metadata Head Tag Optional in HTML5 Head Tag Multiple Head Invalid Head Tag Position After DOCTYPE

Title Tag Required in HTML Title Tag Maximum Length Title Tag with Line Break Title Tag Dynamic Change JS Title Tag for SEO Ranking

Meta Tag Name Attribute Meta Tag Content Attribute Meta Tag Description SEO Meta Tag Keywords Deprecated Meta Tag Author Information Meta Tag Viewport Responsive Meta Tag Robots Index Follow Meta Tag Refresh Redirect Meta Tag Charset UTF-8 Meta Tag HTTP-Equiv Meta Tag Content-Type Meta Tag Content-Language Meta Tag Open Graph Facebook Meta Tag Twitter Cards Meta Tag Theme Color Meta Tag Application Name Meta Tag Generator Meta Tag Rating Content Meta Tag Revisit After

Link Tag Rel Stylesheet CSS Link Tag Rel Icon Favicon Link Tag Rel Preconnect Link Tag Rel Preload Link Tag Rel Prefetch Link Tag Rel DNS Prefetch Link Tag Rel Prerender Link Tag Rel Module Preload Link Tag Rel Alternate Link Tag Rel Canonical URL Link Tag Href Attribute Link Tag Type Attribute Link Tag Media Attribute Link Tag Sizes Attribute Link Tag Title Attribute Link Tag As Attribute Preload Link Tag Crossorigin Attribute Link Tag Integrity Subresource Link Tag Referrer Policy

Style Tag Internal CSS Style Tag Type Attribute Style Tag Media Attribute Style Tag Scoped Attribute Deprecated Style Tag Multiple Style Tags Style Tag Placement Head Body Style Tag CSS Rules Inside

Base Tag for Relative URLs Base Tag Href Attribute Base Tag Target Attribute Base Tag Single Base per Page Base Tag Placement in Head Base Tag Affects All Relative URLs Base Tag JavaScript Override

Script Tag for JavaScript Script Tag Src External File Script Tag Async Attribute Script Tag Defer Attribute Script Tag Type Text JavaScript Script Tag Module Type Script Tag Integrity Attribute Script Tag Crossorigin Attribute Script Tag Referrer Policy Script Tag Noscript Fallback Script Tag Placement Performance Script Tag Inline vs External

Noscript Tag for No JavaScript Noscript Tag Content Display Noscript Tag Browser Support Noscript Tag Fallback Message Noscript Tag Meta Refresh Alternative

Body Tag Main Content Container Body Tag Background Color CSS Body Tag Background Image CSS Body Tag Text Color CSS Body Tag Font Family CSS Body Tag Margin Default Removal Body Tag Padding Default Removal Body Tag Height 100vh Viewport Body Tag Onload Event Handler Body Tag Onunload Event Handler Body Tag Onbeforeunload Event Body Tag Onpageshow Event Body Tag Onpagehide Event Body Tag Onresize Event Body Tag Onscroll Event Body Tag ononline Event Body Tag onoffline Event Body Tag onpopstate Event Body Tag onhashchange Event

<math> <mi> <mn> <mo> <ms> <mfrac> <msqrt> <mrow> <msub> <msup> <msubsup> <munder> <mover> <munderover> <mtable> <mtr> <mtd>

<ruby> <rt> <rp> Japanese Characters Chinese Characters

<bdi> <wbr> <search> <hgroup> <portal> <fencedframe> <selectlist> <model>

inert Modal Implementation

H1 to H6 Tags Overview H1 Tag Most Important H2 Subheading Tag H3 Sub-subheading Tag H4 Level Heading H5 Level Heading H6 Least Important

Heading Tag Opening Closing Heading Text Inside Heading Self Closing Invalid Heading Nested Rules

H1 Default Font Size 32px H2 Default Font Size 24px H3 Default Font Size 18px H4 Default Font Size 16px H5 Default Font Size 13px H6 Default Font Size 10px Heading Font Weight Bold Heading Margin Default Values

Heading Color Change CSS Heading Background Color Heading Font Family Change Heading Text Transform Heading Letter Spacing Heading Word Spacing Heading Text Shadow Effect Heading Border Bottom Underline Heading Padding and Margin Heading Inline Block Display

One H1 Per Page Rule H1 for Page Title Only Headings Hierarchy Importance Skip Heading Levels Bad Practice Keywords in Headings Boost SEO Headings for Content Structure Heading Length Best Practices H1 vs Title Tag Difference

Screen Readers Headings Skip to Content Link Headings for Navigation ARIA Heading Role

Blog Post Headings Structure Product Page Headings FAQ Page Headings Documentation Headings

P Tag for Text Paragraphs P Tag Block Level Element P Tag Automatic Line Break P Tag Margin Default Multiple P Tags Spacing Empty P Tag Behavior P Tag Nested Invalid

P Tag Align Left Default P Tag Align Center CSS P Tag Align Right CSS P Tag Justify CSS

P Tag Line Height Property P Tag Margin Bottom CSS P Tag Margin Top CSS P Tag Padding Inside

Text Indent First Line P Tag Indent CSS Property Hanging Indent Style

P Tag Font Size CSS P Tag Font Family CSS P Tag Font Weight Bold P Tag Font Style Italic

P Tag Text Color CSS P Tag Background Color P Tag Highlight Text

P Tag with Anchor Links P Tag Internal Page Links

P Tag with Inline Images P Tag Background Image

About Us Paragraph Product Description Paragraph Blog Content Paragraphs

Line Break Tag Syntax Br Tag Self Closing Br Tag No End Tag Needed Multiple Br Tags for Spacing Br Tag vs P Tag Difference Br Tag in Address Block Br Tag in Poem Formatting Br Tag Accessibility Concerns CSS Margin Instead of Br

Horizontal Rule Tag Syntax Hr Tag Self Closing Hr Tag Thematic Break Hr Tag Default Styling Hr Tag Width Attribute Deprecated Hr Tag Size Attribute Deprecated Hr Tag Color Attribute Deprecated Hr Tag CSS Width Property Hr Tag CSS Height Property Hr Tag CSS Background Color Hr Tag CSS Border None Hr Tag CSS Margin Property Hr Tag CSS Gradient Effect Hr Tag CSS Shadow Effect Hr Tag Examples in Content

B Tag for Bold Text Strong Tag for Importance B vs Strong Difference Strong for Screen Readers B Tag No Semantic Meaning CSS Font Weight Bold Alternative

I Tag for Italic Text Em Tag for Emphasis I vs Em Difference Em for Screen Reader Emphasis I Tag for Technical Terms I Tag for Foreign Words CSS Font Style Italic

Mark Tag for Highlighting Mark Tag Yellow Background Default Mark Tag CSS Styling Mark Tag for Search Results Mark Tag for Important Terms

Small Tag for Side Comments Small Tag Legal Disclaimers Small Tag Copyright Text Small Tag Fine Print Small Tag CSS Font Size Small

Del Tag for Removed Text Del Tag Strike-through Default Del Tag Cite Attribute Del Tag Datetime Attribute Del Tag for Document Changes

Ins Tag for Added Text Ins Tag Underline Default Ins Tag Cite Attribute Ins Tag Datetime Attribute Ins Tag for Version Control

Sub Tag for Subscript Sub Tag Chemical Formulas H2O Sub Tag Mathematical Variables Sub Tag CSS Vertical Align Sub Tag Font Size Smaller

Sup Tag for Superscript Sup Tag Mathematical Exponents x2 Sup Tag Ordinal Numbers 1st 2nd Sup Tag Trademark Symbol TM Sup Tag CSS Vertical Align

U Tag for Underline U Tag for Misspelled Words U Tag Proper Names Chinese U Tag CSS Text Decoration U Tag Avoid for Links Confusion

Pre Tag Preserve Formatting Pre Tag Preserve Spaces Pre Tag Preserve Line Breaks Pre Tag Monospace Font Default Pre Tag for Code Blocks Pre Tag with Code Tag Inside Pre Tag CSS Overflow Auto Pre Tag White Space Pre Wrap

Code Tag for Inline Code Code Tag Monospace Font Code Tag for HTML Tags Example Code Tag Escape Characters &lt; Code Tag with Pre for Blocks Code Tag CSS Font Family Code Tag Background Color Highlight

Kbd Tag for Keyboard Input Kbd Tag Ctrl+C Display Kbd Tag for Shortcut Keys Kbd Tag for Voice Commands

Samp Tag for Program Output Samp Tag Monospace Font Samp Tag Error Messages Display

Var Tag for Mathematical Variables Var Tag x+y Display Var Tag Italic Font Default

Blockquote for Long Quotations Blockquote Indent Default Blockquote Cite Attribute URL Blockquote CSS Margin Left Right Blockquote with Footer for Source Blockquote Nested Quotations

Q Tag for Short Quotations Q Tag Automatic Quotes Q Tag Cite Attribute Q Tag Browser Quote Marks Q Tag CSS Quotes Property

Abbr Tag for Abbreviations Abbr Tag Title Attribute Full Form Abbr Tag Dotted Underline Default Abbr Tag HTML CSS JavaScript Examples Abbr Tag Accessibility Screen Readers Abbr Tag SEO Benefits

Address Tag for Contact Info Address Tag Italic Default Address Tag Physical Address Format Address Tag Email Phone Links Inside Address Tag Block Level Element

Cite Tag for Work Title Cite Tag Book Movie Song Names Cite Tag Italic Default Cite Tag for References Bibliography

Bdo Tag Override Text Direction Bdo Tag dir Attribute ltr rtl Bdo Tag for Arabic Hebrew Text Bdo Tag CSS Direction Property

Dfn Tag for Defining Terms Dfn Tag Italic Default Dfn Tag First Definition of Term Dfn Tag Title Attribute Tooltip

HTML Colors Importance Browser Color Support

Standard 140 Color Names Red Color Name Green Color Name Blue Color Name Black Color Name White Color Name Gray and Grey Color Silver Color Name Maroon Color Name Olive Color Name Lime Color Name Aqua Color Name Teal Color Name Navy Color Name Fuchsia Color Name Purple Color Name Orange Color Name Yellow Color Name Pink Color Name Brown Color Name Coral Color Name Tomato Color Name Salmon Color Name Gold Color Name Crimson Color Name Indigo Color Name Violet Color Name Lavender Color Name Beige Color Name Cyan Color Name Magenta Color Name Turquoise Color Name Khaki Color Name Plum Color Name Orchid Color Name Chocolate Color Name SkyBlue Color Name Light Colors List Dark Colors List Warm Colors List Cool Colors List Neutral Colors List

Hex Color Code Structure Hex Code RRGGBB Format Hex 00 to FF Values Hex Red FF0000 Hex Green 00FF00 Hex Blue 0000FF Hex Black 000000 Hex White FFFFFF Hex Gray 808080 Hex Dark Gray 555555 Hex Light Gray CCCCCC Hex Yellow FFFF00 Hex Purple 800080 Hex Orange FF6600 Hex Pink FF69B4 Hex Brown A52A2A Hex Navy 000080 Hex Teal 008080 Hex Maroon 800000 Hex Olive 808000 Hex Lime 00FF00 Hex Aqua 00FFFF Hex Fuchsia FF00FF Hex Silver C0C0C0 Hex Gold FFD700 Hex Coral FF7F50 Hex Tomato FF6347 Hex Salmon FA8072 Hex Crimson DC143C Hex Indigo 4B0082 Hex Violet EE82EE 3 Digit Hex Code Shortcut 3 Digit Hex Red F00 3 Digit Hex Black 000 3 Digit Hex White FFF Hex Color Picker Tools Hex to RGB Conversion Hex to HSL Conversion

RGB Color Structure rgb() RGB 0 to 255 Values RGB Red rgb(255 RGB Green rgb(0 RGB Blue rgb(0 RGB Black rgb(0 RGB White rgb(255 RGB Gray rgb(128 RGB Yellow rgb(255 RGB Purple rgb(128 RGB Orange rgb(255 RGB Pink rgb(255 RGB Percentage Values

RGBA Color Structure rgba() RGBA Alpha Transparency 0 to 1 RGBA Fully Transparent 0 RGBA Fully Opaque 1 RGBA Semi Transparent 0.5 RGBA Red Semi Transparent RGBA for Overlay Effects RGBA vs Opacity CSS

HSL Color Structure Hue 0 to 360 Degrees Saturation 0 to 100 Percent Lightness 0 to 100 Percent HSL Red hsl(0 HSL Green hsl(120 HSL Blue hsl(240 HSL Black hsl(0 HSL White hsl(0 HSL Gray hsl(0 HSL Light Colors High Lightness HSL Dark Colors Low Lightness

HSLA Color Structure hsla() HSLA with Alpha Transparency HSLA Semi Transparent Example

Text Background Contrast Ratio WCAG AA 4.5 Ratio Requirement WCAG AAA 7.1 Ratio Requirement Large Text Lower Requirement Color Contrast Checker Tools Accessible Color Combinations

Body Background Color Text Color for Readability Link Colors Default Visited Hover Border Color Styling Table Background Color Form Input Border Color Button Background Color Gradient Background Colors Transparent Background

Browser Color Picker Input HTML5 Color Input Type Color Picker JavaScript Library

CSS Definition Cascading Style Sheets CSS Purpose Styling HTML CSS Version History CSS1 CSS2 CSS3 CSS Syntax Selector Declaration CSS Rule Set Structure

Inline CSS Style Attribute Inline CSS Example h1 style Inline CSS Pros Quick Testing Inline CSS Cons Hard to Maintain Inline CSS Specificity Highest Internal CSS Style Tag Internal CSS in Head Section Internal CSS Multiple Selectors Internal CSS Pros Single File Internal CSS Cons Page Specific External CSS Separate File External CSS Link Tag Rel Stylesheet External CSS Href Attribute Path External CSS Multiple Pages Share External CSS Pros Reusable Cache External CSS Cons Extra HTTP Request

Browser Default Styles External CSS Priority Internal CSS Override External Inline CSS Override All Important Flag Highest Priority Same Level Last One Wins

Element Selector p h1 div Class Selector Dot Notation ID Selector Hash Notation Universal Selector Asterisk Group Selector Comma Separated Descendant Selector Space Child Selector Greater Than Adjacent Sibling Selector Plus General Sibling Selector Tilde Attribute Selector Square Brackets Pseudo Class Selector Colon Pseudo Element Selector Double Colon

CSS Color Property Text Color CSS Background Color Property CSS Border Color Property CSS Outline Color Property CSS Color Names Keywords CSS Hex Color Codes CSS RGB and RGBA Colors CSS HSL and HSLA Colors CSS CurrentColor Keyword CSS Transparent Keyword

CSS Background Color CSS Background Image url() CSS Background Repeat CSS Background Position CSS Background Size Cover Contain CSS Background Attachment Fixed Scroll CSS Background Shorthand CSS Multiple Backgrounds CSS Linear Gradient CSS Radial Gradient CSS Conic Gradient

CSS Text Color CSS Text Alignment Left Right Center Justify CSS Text Decoration Underline Overline CSS Text Transform Uppercase Lowercase CSS Text Indent First Line CSS Letter Spacing CSS Word Spacing CSS Line Height CSS White Space CSS Text Shadow

CSS Font Family Generic Names CSS Font Family Specific Fonts CSS Font Size Pixels Ems Rems CSS Font Weight Bold Normal Lighter CSS Font Style Italic Normal Oblique CSS Font Variant Small Caps CSS Font Shorthand Property

CSS Box Model Concept Content Area Width Height CSS Padding Inner Space CSS Border Around Padding CSS Margin Outer Space Box Sizing Border Box Box Sizing Content Box Default

CSS Padding Top Property CSS Padding Right Property CSS Padding Bottom Property CSS Padding Left Property CSS Padding Shorthand 4 Values CSS Padding Shorthand 2 Values CSS Padding Shorthand 1 Value

CSS Margin Top Property CSS Margin Right Property CSS Margin Bottom Property CSS Margin Left Property CSS Margin Shorthand 4 Values CSS Margin Auto for Centering CSS Margin Collapse Adjacent

CSS Border Width Property CSS Border Style Solid Dotted Dashed CSS Border Color Property CSS Border Shorthand Property CSS Border Radius Rounded Corners CSS Border Radius Circle 50% CSS Border Image Property

CSS Outline vs Border Difference CSS Outline Width Style Color CSS Outline Offset Space

CSS Width Property Auto Value CSS Width Percentage Viewport CSS Max Width Property CSS Min Width Property CSS Height Property Auto CSS Height Viewport 100vh CSS Max Height Property CSS Min Height Property

Display Block Value Display Inline Value Display Inline Block Value Display None Hidden Element Display Flex for Flexbox Display Grid for Grid Layout

Position Static Default Position Relative Shift Position Absolute Relative to Parent Position Fixed Viewport Position Sticky Scroll Z Index Stack Order

Flex Container Display Flex Flex Direction Row Column Justify Content Main Axis Align Items Cross Axis Flex Wrap Wrap Nowrap Align Self Individual Item Flex Grow Factor Flex Shrink Factor Flex Basis Size

Grid Container Display Grid Grid Template Columns Grid Template Rows Grid Gap Property Grid Column Start End Grid Row Start End Grid Template Areas

A Tag Hyperlink Element A Tag Href Attribute URL A Tag Target _blank New Tab A Tag Target _self Same Tab A Tag Target _parent Parent Frame A Tag Target _top Full Window A Tag Download Attribute A Tag Rel Attribute Noopener A Tag Rel Noreferrer Security A Tag Hreflang Language Code A Tag Type Attribute MIME A Tag Ping Tracking URLs A Tag Media Attribute

Unvisited Link Blue Default Visited Link Purple Default Active Link Red During Click Hover Link Mouse Over Style CSS Link Selectors a:link CSS Visited Selector a:visited CSS Hover Selector a:hover CSS Active Selector a:active Remove Underline Text Decoration None Custom Link Color CSS Custom Visited Link Color Custom Hover Link Color Custom Active Link Color Link Button Styling CSS

Internal Page Links with ID Hash Symbol in Href Linking to Same Page Section Linking to Another Page Section Back to Top Link Smooth Scroll Behavior CSS Scroll Margin Top Fixed Header

Email Link mailto Protocol Email Link with Subject Email Link with CC and BCC Email Link with Body Text Phone Link tel Protocol Phone Link International Format SMS Link sms Protocol WhatsApp Link wa.me Telegram Link t.me Signal Link signal.me Skype Link skype Protocol Zoom Link zoom.us Join Google Meet Link meet.google

Image Inside Anchor Tag Image Link with Border Image Link Hover Effect Image Link Accessibility Alt Text

Descriptive Link Text Avoid Click Here Text External Link Indicator Icon Link Opening Confirmation Broken Link Checking Link Title Attribute Tooltip

Screen Reader Link Announcement Skip to Content Link ARIA Label for Links Link Focus Indicator Outline

Img Tag for Images Img Tag Self Closing Void Element Img Tag Src Attribute Source URL Img Tag Alt Attribute Alternative Text Img Tag Alt for Accessibility Screen Reader Img Tag Alt for Broken Image Display Img Tag Alt for SEO Keywords Img Tag Width Attribute Pixels Img Tag Height Attribute Pixels Img Tag Title Attribute Tooltip Img Tag Loading Lazy Attribute Img Tag Loading Eager Attribute Img Tag Decoding Async Attribute Img Tag Fetch Priority High Low Img Tag Referrer Policy Attribute

JPG Format PNG Format GIF Format SVG Format WebP Format AVIF Format

Compression Tools File Size Tips Lazy Loading

Horizontal Alignment Vertical Alignment Text Wrapping

Image Border CSS Image Shadow

Clickable Images

Width 100 Percent Max Width 100 Percent Height Auto Object Fit Cover Object Fit Contain Srcset Attribute Sizes Attribute

Picture Tag Syntax Source Tag Art Direction Format Fallback

Map Tag Definition Map Tag Name Attribute Area Tag Shape Area Tag Coords Area Tag Href Area Tag Target Area Tag Alt Practical Examples

Figure Tag Figcaption Tag Multiple Images

Background Image Property Background Repeat Background Position Background Size Cover Background Size Contain Background Attachment Fixed Background Attachment Scroll Background Shorthand Multiple Backgrounds

Favicon Definition Favicon Sizes Favicon Formats Favicon Implementation Favicon Generator Favicon Best Practices Dynamic Favicon Apple Touch Icon

Table Element

Table Tag Opening Table Tag Closing Table Border Attribute

TR Tag

TD Tag

TH Tag

Table Head Table Body Table Foot

Caption Tag

Border Attribute CSS Border Property

Table Width Table Height Column Width Row Height

Cell Padding Cell Spacing

Colspan Attribute Rowspan Attribute Complex Headers

Striped Rows Hover Effect Responsive Tables

Colgroup Tag Col Tag

Nested Tables Sortable Tables Filterable Tables Pagination Tables Editable Tables

Scope Attribute Header Attribute Caption Tag Summary Attribute

Types of Lists Use Cases

UL Tag LI Tag Bullet Styles Custom Bullets

OL Tag LI Tag Number Types Start Attribute Reversed Attribute Value Attribute

DL Tag DT Tag DD Tag Multiple Terms Use Cases

Multi-level Lists Indentation

CSS Properties Horizontal Lists Margin Padding

Semantic Lists Navigation Lists

Breadcrumb Navigation To-Do List Shopping List Nested Menu Table of Contents

Definition List of Blocks

Definition List of Inlines

Span Definition Span Uses Span vs Div

Change Display Hide Elements

Definition Characteristics Uses

Header Section Navigation Section Content Section Sidebar Section Footer Section Card Component Modal Popup

CSS Styling Box Model

Flexbox Container Grid Container Positioning

Definition Syntax Multiple Classes Naming Rules Case Sensitivity

Dot Notation Specificity Multiple Classes

ClassName Property ClassList Methods

Meaningful Names Reusability BEM Methodology BEM Examples

Differences Specificity When to Use

Definition Syntax Naming Rules Uniqueness Multiple IDs

Hash Notation Specificity Overriding

Get Element By ID Direct Access

Internal Links Smooth Scroll Cross Page Links

Label Connection Accessibility

Use Cases Avoid Overuse

Definition Syntax Type Attribute Name Attribute Value Attribute Disabled Attribute Autofocus Attribute Form Attribute Formaction Attribute Formmethod Attribute Formenctype Attribute Formtarget Attribute

CSS Basics Hover Effects Active Effect Focused Style

Primary Button Secondary Button Success Button Danger Button Warning Button Info Button Outline Button Ghost Button

Small Button Medium Button Large Button Full Width Button

Icon Placement Icon Only Button Icon Libraries

Grouped Buttons Button Toolbar

Onclick Event Alert Example Console Log Change Text Show Hide Element

When to Use Button When to Use Link

ARIA Label Disabled State

Definition Syntax Self Closing

Src Attribute Width Attribute Height Attribute Name Attribute Title Attribute Sandbox Attribute Sandbox Value Allow Attribute Loading Attribute Referrer Policy Src Doc Attribute

YouTube Embed Code YouTube Parameters

Google Maps Embed Google Maps Parameters

Vimeo Embed Code Vimeo Parameters

Twitter Embed Twitter Timeline

Facebook Embed Facebook Video

Instagram Embed Instagram Reels

Spotify Embed Spotify Podcast

Remove Border Border Radius Box Shadow Responsive Iframe

Clickjacking Prevention Sandbox Security

Post Message

Impact on SEO Best Practices

What is JavaScript JavaScript vs Java

Head Section Body End Async Attribute Defer Attribute Async vs Defer

External File Link Script Benefits

document.write console.log alert confirm prompt innerHTML

Variable Declaration Naming Rules

String Number Boolean Array Object Undefined Null

Function Declaration Function Expression Arrow Function Parameters Return Value

Common Events Keyboard Events Form Events Window Events

Selecting Elements Change Content Change CSS Create Elements Remove Elements

Show Hide Element Change Text on Click Form Validation Dynamic List Counter App Image Slider Accordion Tab Component Dark Mode Back to Top

jQuery React Vue Angular

Full URL External Resources External Images CDN Usage

Same Folder Subfolder Parent Folder Two Levels Up Root Relative

Organize Files Lowercase Names No Spaces Descriptive Names

Incorrect Case Wrong Slash Missing Extension Double Dot Error

HTML to CSS HTML to JS HTML to Image CSS to Image HTML to Font

SEO Meta Social Media Viewport Mobile

Preconnect Preload Prefetch DNS Prefetch Alternate

Page Structure Wireframe Common Patterns

Float Layout Flexbox Layout Grid Layout

Mobile First Desktop First Breakpoints Responsive Navigation Responsive Columns Responsive Images Responsive Text Responsive Tables

Blog Layout Ecommerce Layout Portfolio Layout Landing Page Admin Dashboard Social Media

CSS Grid + Flexbox Container Queries Subgrid

Viewport Tag Viewport Properties

Syntax Media Types Common Breakpoints CSS Example

Srcset Attribute Srcset Example Sizes Attribute Picture Element Image Set

Viewport Units Clamp Function Calc Function Media Queries Font Line Height

Flexbox Wrap Grid Auto Fit Grid MinMax Order Property

Hamburger Menu Off Canvas Menu Top Navigation

Inline Code Monospace Font Escape HTML

Preformatted Block Preserve Spaces Pre with Code Scroll Overflow Syntax Highlighting

Keyboard Input Key Combinations Key Styling

Sample Output Error Messages Command Output

Variable Name Math Expressions Italic Style

Definition Importance Non Semantic Semantic

<header>

<nav>

<main>

<section>

<article>

<aside>

<footer>

<figure>

<figcaption>

<time>

<mark>

<details> <summary> Open Attribute

<address>

SEO Impact Screen Readers

Reserved Characters Why Entities

Emoji Support

Decimal Code Hexadecimal Code Direct Copy Paste

Smiling Face Smiling Eyes Tears of Joy Heart Eyes Smiling Halo Winking Face Kissing Face

Sad Face Loud Cry Angry Face Pouting Face Dizzy Face Exploding Head

Thumbs Up Thumbs Down Clapping Hands Folded Hands OK Hand Prayer Beads

Red Heart Orange Heart Yellow Heart Green Heart Blue Heart Purple Heart Broken Heart Heart Exclamation

Dog Face Cat Face Monkey Face Panda Face Lion Face Tiger Face Fox Face

Pizza Slice Burger Fries Ice Cream Cake Apple

India Flag USA Flag UK Flag Canada Flag Australia Flag

ASCII ANSI ISO-8859-1 UTF-8 UTF-16

HTML4 Charset HTML5 Charset Charset Position

Why Encode Format Space

Forward Slash Colon Semicolon Equal Sign Question Mark Ampersand Hash Percent

Form Element Purpose Submission

Action Attribute Method Attribute GET Method POST Method Target Attribute Enctype Attribute Novalidate Attribute Autocomplete Attribute Name Attribute

Input Element Textarea Element Select Element Option Element Optgroup Element Button Element Label Element Fieldset Element Legend Element Datalist Element Output Element

Text Type Password Type Email Type Number Type Range Type Date Type Time Type Datetime Local Month Type Week Type Color Type Checkbox Type Radio Type File Type Submit Type Reset Type Button Type Hidden Type Image Type Search Type Tel Type URL Type

Name Attribute Value Attribute Placeholder Attribute Required Attribute Readonly Attribute Disabled Attribute Autofocus Attribute Size Attribute Maxlength Attribute Minlength Attribute Min Attribute Max Attribute Step Attribute Pattern Attribute Autocomplete Attribute Multiple Attribute Form Attribute Formaction Attribute Formmethod Attribute Formnovalidate List Attribute

Textarea Name Textarea Rows Textarea Cols Textarea Wrap Textarea Placeholder Textarea Maxlength

Select Name Select Size Select Multiple Option Value Option Selected Option Disabled Optgroup Label Optgroup Disabled

Button Type Button Name Button Value Button Disabled Formaction Formmethod

Label For Label Accessibility Click Label Focus Input

Fieldset Border Fieldset Disabled Legend Styling

Datalist ID Option Value Option Label

HTML5 Validation Required Validation Email Validation Number Validation Pattern Validation Validation Styling Custom Validation Validation Message

Login Form Registration Form Contact Form Feedback Form Search Form Newsletter Form Payment Form Address Form Survey Form File Upload Form

CSS Input Styling CSS Input Focus CSS Invalid Input CSS Submit Button Responsive Form

ARIA Labels ARIA Required Error Announcement Fieldset Legend

Canvas Element Canvas Size Fallback Content

Canvas Bitmap SVG Vector Canvas Use Case SVG Use Case

Get Context 2D Context

Rects Rounded Rect

Begin Path Move To Line To Stroke

Arc Method Full Circle

Fill Style Stroke Style Gradient

Fill Text Stroke Text Font Size

Draw Image Image Scaling

Translate Rotate Scale Save Restore

Request Animation Frame Clear Canvas

Drawing Circle Smiley Face Rectangle Shape Line Drawing Colorful Gradient Animated Square Bouncing Ball

SVG Element ViewBox Width Height

Rectangle Rectangle Rounded Circle Ellipse Line Polyline Polygon

Path Element Move To Line To Horizontal Line Vertical Line Close Path Arc Quadratic Bezier Cubic Bezier

Text Element Text Styling Text Path

Fill Color Stroke Color Stroke Width Opacity

Group Element

Translate Rotate Scale

Simple Circle Flag SVG Logo SVG Icon SVG Chart SVG

SMIL Animation

WebGPU GPUDevice GPUCanvasContext GPURenderPipeline GPUComputePipeline GPUCommandEncoder GPUBuffer GPUTexture WebGPU vs WebGL

WebGL2RenderingContext Sampler Objects 3D Textures Transform Feedback Uniform Buffer Objects Vertex Array Objects

WebXR Device API XRSession XRFrame XRViewerPose XRInputSource XRWebGLLayer Augmented Reality Virtual Reality Hit Testing Plane Detection Hand Tracking Light Estimation Immersive Web

<video>

Src Attribute Controls Attribute Autoplay Attribute Loop Attribute Muted Attribute Poster Attribute Preload Attribute Width Height

Source Element MP4 Format WebM Format OGG Format Type Attribute

JavaScript Control

Current Time Duration Volume

Onloadedmetadata Onplay Onpause Onended Onerror

Border Radius Box Shadow Object Fit

Responsive Video Aspect Ratio Padding Trick

<audio>

Controls Attribute Autoplay Attribute Loop Attribute Muted Attribute Preload Attribute

MP3 Format OGG Format WAV Format

JavaScript Control

CurrentTime

YouTube Iframe YouTube URL Format YouTube Parameters

Local Storage Session Storage Cookies vs Storage

Set Item Get Item Remove Item Clear All Store Objects Check Support Storage Limit Data Persistence

Set Item Get Item Remove Item Clear All Tab Specific Session End

Storage Event Event Properties Cross Tab Communication

Introduction Browser Support Privacy

Success Callback Error Callback Options Object

Latitude Longitude Altitude Accuracy Speed Timestamp

watchPosition() clearWatch()

Permission Denied Position Unavailable Timeout

Google Maps API Leaflet JS Show User Location

Introduction Draggable Attribute draggable dragstart dragenter setData getData File Drag and Drop

Dragstart Event Drag Event Dragend Event Dragenter Event Dragover Event Dragleave Event Drop Event

setData() getData() Data Types

Default Drag

File Drag and Drop

Introduction Main Thread Worker Thread Create Worker Post Message On Message Terminate Worker Error Handling Dedicated Worker Shared Worker Worker Limitations Use Cases

Introduction EventSource Object On Message Event Types Error Handling Close Connection vs WebSocket Use Cases

pushState() replaceState() popstate Event State Object SPA Navigation popstate state SPA Routing

getContext() drawImage() getImageData() putImageData() toDataURL()

requestFullscreen() exitFullscreen() fullscreenchange Event fullscreenElement fullscreenEnabled Video Player Fullscreen Game Fullscreen

writeText() readText() Permissions navigator.clipboard write read ClipboardItem Permission Required Copy Image

requestPermission() new Notification() Notification Options onclick Event Notification close onclick onclose PermissionState Silent Notification

document.hidden visibilitychange Event Use Cases document.visibilityState Pause Video on Tab Switch Stop Animation on Tab Switch

navigator.getBattery() charging chargingTime dischargingTime level chargingchange Event levelchange Event

level

navigator.connection effectiveType downlink rtt change Event Adaptive Loading

navigator.vibrate() Vibration Pattern cancel Game Haptics

Accelerometer Gyroscope

Payment Request show() PaymentRequest abort canMakePayment PaymentResponse complete Basic Card Payment Google Pay Integration Apple Pay Integration

navigator.credentials store() get preventSilentAccess Password Storage Password AutoFill

Speech Recognition Speech Synthesis Synth SpeechRecognition SpeechGrammar SpeechRecognitionEvent SpeechRecognitionAlternative SpeechSynthesis SpeechSynthesisUtterance speak cancel pause resume getVoices Voice Recognition Screen Reader

getUserMedia RTCPeerConnection Video Chat MediaDevices addIceCandidate createOffer createAnswer setLocalDescription setRemoteDescription DataChannel Video Call Implementation Screen Sharing

requestDevice open selectConfiguration claimInterface controlTransferOut transferIn transferOut

requestPort open readable writable Arduino Connection

requestDevice open sendReport receiveReport Gamepad Support

requestDevice gatt getPrimaryService getCharacteristic readValue writeValue startNotifications

requestMIDIAccess MIDIInput MIDIOutput onmidimessage Keyboard Connection

request query Cross Tab Coordination

showOpenFilePicker showSaveFilePicker showDirectoryPicker getFile createWritable write close remove Local File Editor

IdleDetector requestPermission threshold

keyboard.lock keyboard.unlock Kiosk Mode

requestPointerLock exitPointerLock movementX movementY First Person Game

wakeLock.request release Video Player

screen.orientation.type screen.orientation.lock screen.orientation.unlock orientationchange Event

deviceorientation deviceorientationabsolute devicemotion rotationRate acceleration interval Permission Required Gyroscope Access

AudioContext OscillatorNode GainNode StereoPannerNode AnalyserNode BiquadFilterNode ConvolverNode DynamicsCompressorNode DelayNode MediaElementSource MediaStreamAudioSource createMediaStreamDestination Audio Visualization

MediaRecorder start stop pause resume ondataavailable mimeType audioBitsPerSecond videoBitsPerSecond Screen Recorder

getUserMedia getDisplayMedia MediaStreamTrack getTracks clone addTrack removeTrack Video Recorder

PaymentHandler canMakePayment handlePayment

getDetails listProducts acknowledge consume

SecurePaymentConfirmation isSecurePaymentConfirmationAvailable WebAuthn Integration

navigator.share Share Data Share Files canShare

Web Share Target manifest.json Shared Content Handling

WebTransport datagrams streams WebTransport API vs WebSocket

VideoEncoder VideoDecoder AudioEncoder AudioDecoder Low Latency Video

document.startViewTransition ViewTransition updateCallback finished ready skipTransition SPA Transitions MPA Transitions

popover attribute popovertarget popovertargetaction showPopover hidePopover togglePopover beforetoggle Event toggle Event Popover vs Dialog

showModal show close returnValue Modal Dialog

open Attribute name Attribute

navigate back forward traverseTo currentEntry

Sanitizer sanitize sanitizeFor setHTML XSS Prevention

TrustedTypePolicy createPolicy TrustedHTML TrustedScript TrustedScriptURL DOM XSS Prevention

navigator.permissions query request revoke Permissions List

ReportingObserver Report Report Types Report Endpoint

IntersectionObserver observe unobserve threshold rootMargin Lazy Loading Images Infinite Scroll

ResizeObserver observe unobserve Responsive Components

MutationObserver observe attributes childList subtree DOM Change Tracking

Federated Credential Management Identity Provider API IdP Sign In

Web Accessibility WCAG WAI-ARIA Screen Readers

Use Semantic Tags Avoid Div Spam

Images Alt Attribute Decorative Images Complex Images

Proper Heading Order No Skipping Levels One H1 Per Page

Descriptive Link Text Link Purpose Open in New Tab

Label Elements Fieldset Legend Error Messages Focus Indicators ARIA Required

ARIA Label ARIA Labelledby ARIA Describedby ARIA Expanded ARIA Hidden ARIA Live

Landmark Roles Widget Roles Document Roles

Minimum Ratio Large Text Ratio Non Text Ratio Color Blindness

Tab Index Skip to Content Focus Order Focus Trap No Keyboard Trap

CSS Class Offscreen

Text Resize Content Reflow

Lighthouse WAVE axe Screen Reader Testing

Beginner Projects Intermediate Projects Advanced Projects

Basic Exercises Intermediate Exercises Advanced Exercises

30 Day Challenge Code Pen Challenge Responsive Challenge Accessibility Challenge Performance Challenge

Basic Questions Intermediate Questions Advanced Questions Top 100 Questions

Document Tags Metadata Tags Sectioning Tags Text Formatting Lists Tags Table Tags Form Tags Media Tags

Core Attributes Event Attributes Form Attributes Accessibility Data Attributes

Mouse Events Keyboard Events Form Events Window Events Touch Events

Color Names Hex Codes RGB Values HSL Values

Canvas Methods Canvas Paths Canvas Text Canvas Images

Media Properties Media Methods Media Events

HTML5 HTML 4.01 Strict HTML 4.01 Transitional XHTML 1.0 Strict

1xx Information 2xx Success 3xx Redirection 4xx Client Error 5xx Server Error

GET Method POST Method PUT Method PATCH Method DELETE Method HEAD Method OPTIONS Method

PX to EM Formula Base Font Size Common Conversions REM vs EM

VS Code Shortcuts Browser Shortcuts Mac Shortcuts

data-* Syntax JavaScript Access CSS Access Use Cases Examples

Microdata Introduction itemscope Attribute itemtype Attribute itemprop Attribute Example SEO Benefits Social Media Twitter Cards

Shadow DOM Introduction attachShadow Method Mode Open vs Closed Shadow Host Shadow Root Slot Element

define Method Lifecycle Callbacks Attributes Extending HTML

Combination Template Element Slot Usage

Template Tag Clone Template Use Cases

Contenteditable Attribute execCommand Use Cases

Spellcheck Attribute lang Attribute

Translate Attribute

Inert Attribute

Popover Attribute Popover Target showPopover Method Popover Auto State Popover Light Dismiss Popover Nesting Popover Anchor Positioning

<dialog> showModal Method show Method close Method

Details Marker CSS Webkit Details Marker

Output For

<progress> value max Attributes

<meter> min max value low high optimum

datetime Attribute Pubdate Attribute

<ruby> <rt> <rp>

Bidirectional Override dir Attribute

Bidirectional Isolation

Word Break Opportunity

<search>

elementtiming Attribute

Native Lazy Loading Decoding Attribute

fetchpriority Attribute Fetch Priority Use

RequestAdapter RequestDevice ConfigureCanvas CreateRenderPipeline CreateCommandEncoder CreateBuffer CreateTexture CreateBindGroup ComputeShader ComputePipeline GPU Queue WebGPU vs WebGL WebGPU Best Practices

RequestSession XRReferenceSpace XRFrame XRView XRInputSource XRHitTestSource XRPlane XRMesh XRLightEstimate XRAnchor WebXR Layers Immersive VR Immersive AR

MathML Examples MathML Browser Support

Ruby Use Cases Ruby CSS Styling

Portal Tag Usage Portal Tag Example Fenced Frame Usage Selectlist Tag Model Tag

Cross Document View Transitions Same Document View Transitions View Transition Classes View Transition Names

Sanitizer Default Configuration Sanitizer Custom Configuration Sanitizer Drop Elements

Trusted Types Default Policy Trusted Types CSP Header Trusted Types Polyfill

Cross Origin Isolated Context COOP Same Origin COEP Require CORP CORP Header

Permissions Policy Directives Permissions Policy Allow List Permissions Policy Reporting

Deprecation Reporting Intervention Reporting Crash Reporting Reporting Endpoint Configuration

Speculation Rules Inline Speculation Rules External Prefetch Rules Prerender Rules Speculation Rules Conditions Speculation Rules Eagerness

Signed Exchanges Generation Signed Exchanges Serving Signed Exchanges Debugging

IWA Manifest IWA Installation IWA Permissions

FLEDGE API Fenced Frame Config Fenced Frame Reporting

Private Aggregation Reporting Private Aggregation Debugging

Shared Storage Write Shared Storage SelectURL Shared Storage Run

Attribution Reporting Source Registration Attribution Reporting Trigger Registration Attribution Reporting Aggregation

Topics API Call Topics API Observer Topics API Header

Partitioned Cookie Example CHIPS vs Third Party Cookies

First Party Sets Declaration First Party Sets Use Cases

FedCM API Call FedCM Identity Provider Config FedCM Account Selection FedCM Logout

WebRTC Signaling WebRTC STUN Server WebRTC TURN Server WebRTC Data Channel WebRTC Bandwidth Control WebRTC Recording

WebUSB Claim Interface WebUSB Control Transfer WebUSB Bulk Transfer WebUSB Interrupt Transfer

WebSerial Signatures WebSerial Parity WebSerial Stop Bits

WebHID Feature Reports WebHID Input Reports WebHID Output Reports

WebBluetooth Services WebBluetooth Characteristics WebBluetooth Descriptors

WebAudio PannerNode WebAudio WaveShaperNode WebAudio GainNode Automation

WebCodecs Video Frame WebCodecs Encoded Video Chunk WebCodecs Audio Data

MediaRecorder Timeslice MediaRecorder Error Handling MediaRecorder MIME Types

Clipboard Read Images Clipboard Write HTML Clipboard Custom Data

Notification Badge Notification Actions Notification Renotify

Intersection Observer Threshold Array Intersection Observer Root Element Intersection Observer Performance

Resize Observer Box Size Resize Observer Performance

Mutation Observer Character Data Mutation Observer Performance

Performance Observer Buffered Performance Observer Types

HTTP/3 Server Push HTTP/3 QPACK HTTP/3 Migration

Brotli Levels Brotli vs Gzip

Zstd Levels Zstd Dictionary

Early Hints Implementation Early Hints CDN

<center> <font> <big> <strike> <tt> <frame> <frameset> <noframes> <applet> <acronym> <basefont> <blink> <marquee>

bgcolor background border on Tables align valign cellpadding cellspacing width on Specific Elements height on Specific Elements clear nowrap scrolling on Iframe frame on Tables rules on Tables vspace hspace text on Body link on Body vlink on Body alink on Body

Presentational Elements Frame Based Layouts Applets Plugins

caniuse.com

Modern Browsers

Minify HTML Compress Images Lazy Loading Images Async Defer Scripts Preload Critical Resources Preconnect to Origins DNS Prefetch Prefetch Next Pages Reduce HTTP Requests Use CDN Enable Gzip/Brotli Cache Static Assets Avoid Render Blocking Optimize Critical Rendering Path Reduce DOM Size Avoid Large Layout Shifts Optimize Web Fonts Use HTTP/2 or HTTP/3

Largest Contentful Paint Optimize Hero Images Optimize Text Elements

First Input Delay Reduce JavaScript Execution Use Web Workers

Cumulative Layout Shift Set Image Dimensions Avoid Dynamic Content Insertion Use Aspect Ratio Containers

LCP FID CLS INP Interaction to Next Paint TTFB Time To First Byte FCP First Contentful Paint TBT Total Blocking Time SI Speed Index

Google PageSpeed Insights Lighthouse WebPageTest.org Chrome DevTools Performance Tab GTmetrix

Preload Prefetch Preconnect DNS Prefetch Prerender Module Preload

Inline Critical CSS Load Non Critical CSS Critical Path

Async Attribute Defer Attribute Module Script Nomoduletag

font-display Preload Fonts Unicode Range Variable Fonts

Cache Headers ETag Last Modified Service Worker Cache Workbox Library

elementtiming PerformanceElementTiming LCP Element

LayoutShift hadRecentInput CLS Measurement

EventTiming firstInputDelay Processing Duration

Server-Timing Header PerformanceServerTiming Backend Performance

PerformanceResourceTiming initiatorType transferSize

performance.mark performance.measure PerformanceMeasure

PerformanceObserver observe takeRecords

Speculation Rules prefetch prerender speculationrules.json

Cross Site Scripting Sanitize HTML Use textContent CSP Header HTTP Only Cookies

Cross Site Request Forgery SameSite Cookies

X-Frame-Options CSP frame-ancestors

Sandbox Attribute Allow Attribute

Input Validation HTTPS Only CSRF Tokens Rate Limiting

Validate File Type Scan for Malware Store Outside Web Root

Use Prepared Statements Escape Input

No Passwords in HTML No API Keys in Frontend Minimize Data Exposure

CSP Header default-src script-src style-src img-src connect-src frame-ancestors report-uri

Random Nonce

Script Hash

Trusted Scripts

Trusted Types API Policy Creation Enforcement

Permissions-Policy Geolocation Camera Microphone

COOP COEP Cross Origin Opener Policy Cross Origin Embedder Policy Cross Origin Resource Policy Shared Memory Access

Cross Origin Resource Policy

Cross Origin Read Blocking

Permissions-Policy Feature Control

Cookies Having Independent Partitioned State Partitioned Attribute Third Party Cookies

Title Optimization Title Length Brand in Title

Description Length Description Content

H1 Strategy H2 H3 Structure Keyword Distribution

Use Semantic Tags Proper HTML Structure

Alt Text Optimization File Names Image Compression

Internal Linking Anchor Text External Links Nofollow Attribute

Canonical URL Self Referencing Canonical

index follow noindex nofollow noarchive

JSON-LD Format Organization Schema Local Business Schema Product Schema Article Schema Breadcrumb Schema FAQ Schema HowTo Schema Event Schema Recipe Schema

og:title og:description og:image og:url og:type

twitter:card twitter:site

Viewport Meta Responsive Design AMP Pages

hreflang Tag lang Attribute Content Negotiation

HTML Sitemap XML Sitemap Sitemap Index

Robots.txt File User-agent Sitemap Location

SEO Friendly URLs Lowercase URLs Hyphens vs Underscores

rel="prev" and "next"

301 Permanent Redirect 302 Temporary Redirect

SXG Google Search Support

HTML5 Validation Attributes Custom Validation Validation Pseudo Classes Constraint Validation API

Validation Styling Success Styling Error Messages

FormData API Fetch API AJAX Submit multipart/form-data

CSRF Protection Input Sanitization HTTPS Required

ARIA Attributes Error Announcement Focus Management Fieldset Legend

Multiple File Upload Accept Attribute File Size Limit Preview Images Drag and Drop Upload Upload Progress

Autocomplete Values Address Autocomplete Payment Autocomplete

Autocomplete List Option Value Dynamic Datalist

Calculation Output for Attribute form Attribute

Determinate Progress Indeterminate Progress JavaScript Update

Low Value High Value Optimum Value

Disable Fieldset

Fieldset Border Legend Positioning

Reset Button Custom Reset

Sprite Technique

Cloudinary Imgix ImageKit Bunny.net

srcset with x Descriptor srcset with w Descriptor sizes Attribute picture Element type Attribute

DPR Header Viewport-Width Header Width Header

WebP Conversion AVIF Format Lossless Compression Lossy Compression Lazy Loading Decoding Fetch Priority Responsive Breakpoints

Alt Text Best Practices Decorative Images Complex Images Figure and Figcaption

Inline SVG SVG Sprites Remove Unnecessary Code

Horizontal Scroll Collapse on Mobile Stack on Mobile Data Labels

Sortable Tables Filterable Tables Pagination Export to Excel Copy to Clipboard Print Styling

Scope Attribute Header Attribute Caption Element Summary Attribute

Striped Rows Hover Effect Border Collapse Sticky Header Sticky First Column

Colgroup Styling Col Width Col Class

Deep Nesting CSS Styling Accessibility

Navigation Menu Dropdown Menu Breadcrumb

CSS Counters Numbered Nested Lists Content Property

::marker Pseudo-element List Style Image Emoji Bullets

Definition Lists FAQ Pages Metadata Display

:link :visited :hover :active :focus-visible :target

scroll-behavior:smooth JavaScript Scroll Offset for Fixed Header

Link Preview Metadata Social Media Cards

Download Attribute Download Filename

mailto with Subject mailto with Body mailto with CC mailto with BCC Multiple Recipients

tel Protocol SMS Protocol

wa.me Link WhatsApp API

t.me Link

signal.me

skype:username

zoom.us Join

meet.google.com

App Deep Links Universal Links Android App Links

requestAnimationFrame Frame Rate Delta Time

Translate Rotate Scale Transform Matrix

save() restore()

clip()

shadowColor shadowBlur shadowOffsetX shadowOffsetY

Linear Gradient Radial Gradient Conic Gradient

createPattern

globalCompositeOperation

filter Property

getImageData putImageData createImageData

OffscreenCanvas requestAnimationFrame Avoid Canvas Resize

isPointInPath isPointInStroke

toDataURL() toBlob()

<animate> <animateTransform> <animateMotion> SMIL vs CSS

JavaScript in SVG Event Listeners Manipulate SVG

<filter> feGaussianBlur feColorMatrix feDropShadow feMerge feBlend feComposite

<textPath> <tspan> <textArea>

<linearGradient> <radialGradient>

<pattern>

<clipPath>

<mask>

SVG Optimization Tools Remove Metadata Inline vs External

<title> <desc> role="img"

loadedmetadata canplay play waiting error

Custom Controls Play Pause Button Volume Slider Progress Bar Fullscreen Button Playback Speed

<track> Element WebVTT Format kind="subtitles" kind="captions" kind="descriptions" kind="chapters" kind="metadata"

HLS Streaming DASH Streaming Adaptive Bitrate

Encrypted Media Extensions Widevine PlayReady FairPlay

canplay through play pause ended timeupdate

Web Audio API Analyser Node Canvas Drawing

MediaRecorder API getUserMedia Save Recording

AudioContext Oscillator Node Gain Node Stereo Panner

MIDI Access Input Output

Bluetooth Device Characteristics

USB Device Access

Serial Port Communication

Human Interface Device

Near Field Communication

navigator.share

Share Target API

navigator.locks Cross Tab Coordination

setAppBadge clearAppBadge

selectContacts Contact Properties

showOpenFilePicker showSaveFilePicker showDirectoryPicker

IdleDetector Idle State Permission Required

keyboard.lock Unlock Method

requestPointerLock Pointer Movement

wakeLock.request Release Wake Lock

screen.orientation orientationchange Event

deviceorientation devicemotion Permission Required

Payment Handler canMakePayment

SPC API

Digital Goods Get Details

Progressive Web App

HTTPS Required

manifest.json

name short_name start_url display theme_color background_color icons orientation scope

Service Worker Registration Install Event Activate Event Fetch Event Cache Strategies Cache Storage Offline Support Push Notifications Notification Click Background Sync

Install Prompt Install Button User Choice

Update Flow skipWaiting clients.claim

HTTPS Required Content Security Policy

Lighthouse PWA Audit Chrome DevTools

PWA Examples

Web Components Standard Browser Support

define Method Class Definition Lifecycle Callbacks Attribute Observation Adopted Callback Autonomous Elements Customized Built-in Elements Naming Rules

Encapsulation attachShadow Mode Open Mode Closed Shadow Host Shadow Root Light DOM Slot Element Named Slot Default Slot Slotted Pseudo-element Part Attribute Constructable Stylesheets

<template> Tag cloneNode importNode Adopt Styles

<slot> Element slotchange Event Slot Assignment

part Attribute ::part() Pseudo-class Export Parts

attachInternals setFormValue setValidity Form Associated Custom Elements ARIA Reflection

Custom Button Custom Card Custom Tooltip Custom Rating Custom Tabs Custom Modal

React with Web Components

Container Queries

Container Type Container Name @container Query Container Units Browser Support

Container Style Queries Style Query Example

New Units vi vb

svw svh

lvw lvh

dvw dvh

clamp() Function clamp Syntax Clamp Example Viewport Units

Clamp for Margin

auto-fit vs auto-fill minmax() repeat() Grid Template Columns

Image Resolution Switching Art Direction Format Fallback

Aspect Ratio Object Fit Embedded Video

Overflow Scroll Cards on Mobile Hide Columns

Hamburger Menu CSS Only Hamburger Off Canvas Menu Top Navigation Stack Bottom Navigation

Chrome DevTools Responsively App BrowserStack

Micro Frontends

Iframe Integration Web Components Module Federation Import Maps

Custom Elements Shadow DOM Event Communication

import-map Module Resolution

Expose Modules Consume Modules

Email HTML

Table Based Layout Inline CSS Only No JavaScript No Flexbox Grid

Table Layout Width 100% Inline Styles Background Color Image Hosting Alt Text Preview Text Spam Words

Email Testing Tools Send Test Emails

Gmail Support Outlook Support Apple Mail Thunderbird

Canvas Games RequestAnimationFrame

Game Loop Structure Input Handling Collision Detection

Snake Game Pong Game Space Invaders Platformer Memory Card Game Flappy Bird Clone

Phaser JS PixiJS Three JS Babylon JS

Matter JS Planck JS

WebSockets PeerJS Game State Sync

Ad Integration In App Purchases Subscription

Three.js

Scene Camera Renderer

Scene Background

PerspectiveCamera

WebGLRenderer

BoxGeometry SphereGeometry CylinderGeometry TorusGeometry

MeshBasicMaterial MeshStandardMaterial

AmbientLight DirectionalLight PointLight

requestAnimationFrame Rotate Scale

OrbitControls

GLTFLoader

TextureLoader

Babylon.js

Engine Scene

Create Box Sphere

Standard Material

Hemispheric Light

ArcRotateCamera

WebGL API

Vertex Shader Fragment Shader

WebGPU API

Performance

Print Stylesheet Print Specific Styles Page Breaks Print Links

window.print() Before Print Event After Print Event

Print Colors Print Fonts Print Margins

Service Worker Cache API IndexedDB

Database Creation Object Store Transaction CRUD Operations Cursor Indexes

caches.open cache.addAll cache.match cache.delete

BackgroundSync sync.register Retry Failed Requests

PeriodicBackgroundSync minInterval Permission Required

hreflang Annotation

x-default Self Referential

Cross Domain Canonical Parameter Handling Pagination Canonical

Product Schema Review Schema Local Business Schema Organization Schema Event Schema Recipe Schema FAQ Schema HowTo Schema Breadcrumb Schema Sitelinks Searchbox Video Schema Article Schema Job Posting Schema Course Schema Software Application Schema

JavaScript Object Notation @context @type Nested Objects Array Values

Rich Snippets Testing Tool Search Console

LCP Optimization FID Optimization CLS Optimization INP TTFB

Viewport Configuration Mobile First Indexing Responsive Design Dynamic Serving Separate Mobile URLs Page Speed Mobile

Server Logs Crawl Budget Crawl Frequency

Client Side Rendering Server Side Rendering Dynamic Rendering Hybrid Rendering

Product Schema Category Structure Faceted Navigation Product Variants

WCAG 2.1

polite assertive aria-live attribute role="status" role="alert" role="log" role="progressbar" aria-atomic aria-relevant

Focus Trap Focus Return Focus Indicators Focus Order Skip Navigation Link

Tabindex Values Arrow Keys Space Enter Escape Key

NVDA JAWS VoiceOver TalkBack Narrator

WCAG Contrast Checker Color Blindness Simulator High Contrast Mode

Accordion Tabs Carousel Modal Dialog Tooltip Date Picker Slider Tree View Menu Bar Progress Bar

ADA Section 508 EAA AODA Accessibility Lawsuits

W3C Validator HTMLHint Nu HTML Checker

Prettier JS Beautify

HTMLMinifier Minify

Markdown to HTML Rich Text to HTML CSV to HTML Table

WYSIWYG Editors CodePen JSFiddle CodeSandbox Replit

Cross Browser Testing Responsive Testing Performance Testing Accessibility Testing

Favicon Generator Social Card Generator SVG Placeholder Lorem Ipsum Generator

MDN Web Docs W3Schools HTML Spec Can I Use CSS Tricks

HTML Tag Cheat Sheet HTML Attribute Cheat Sheet HTML5 Cheat Sheet Accessibility Cheat Sheet

HTML 1.0 HTML 2.0 HTML 3.2 HTML 4.01 XHTML 1.0 HTML5 HTML Living Standard

Birth of Web First Browser HTML as Standard W3C Formation XHTML Failure WHATWG Formation HTML5 Standard

HTML6 Possibilities Web Components Maturity AI Integration Immersive Web

Job Market Freelance Opportunities Full Stack Role Frameworks Relation

Semantic HTML Validation Accessibility Performance SEO Friendly Clean Code File Organization Version Control

Forgetting Closing Tags Wrong Nesting Case Sensitivity Missing Alt Text Inline Styles Avoid Divitis Ignoring Semantics Not Responsive Slow Loading

Beginner Portfolio Business Website Blog Platform Ecommerce Site Landing Page Restaurant Website Travel Blog Fitness Website Educational Site News Website Social Media Dashboard Admin Panel Portfolio Gallery Event Website Wedding Invitation Real Estate Site Job Portal Recipe Website Weather App Todo App Calculator App Quiz App Memory Game Snake Game Tic Tac Toe Connect Four Flappy Bird Clone Pong Game Space Invaders Platformer Game Drawing App Photo Editor Video Player Audio Player Podcast Website Music Streaming Chart Generator File Explorer Markdown Editor Code Editor Calendar App Clock App Stopwatch Timer Weather Dashboard Currency Converter Unit Converter Color Picker Image Slider Modal Popup Accordion FAQ Tabs Component Tooltip Component Progress Bar Skeleton Loader Infinite Scroll Parallax Effect Typewriter Effect Particle Background 3D Cube Animation Product Card Pricing Table Testimonials Team Section Contact Form Login Signup Search Bar Navigation Menu Breadcrumb Navigation Pagination Load More Button Star Rating Like Button Share Button Copy Button Notification Toast Loading Spinner Pulse Animation Ripple Effect Flip Card Glassy Morphism Neumorphism Glassmorphism Claymorphism Wireframe Prototype

Complete HTML Coverage Tags Covered Attributes Covered CSS Integration JavaScript Integration Responsive Design Accessibility Performance Security SEO APIs Covered PWA Web Components Canvas SVG Media Forms Tables Lists Links Images

Beginner Questions

Intermediate Questions

Advanced Questions

Expert Questions

Build a Website Code Review

Completion Certificate Badge

HTML and CSS Book HTML5 The Missing Manual Learning Web Design

FreeCodeCamp Coursera Udemy

Traversy Media Web Dev Simplified FreeCodeCamp

MDN Web Docs W3Schools WHATWG Spec

Stack Overflow Dev.to Reddit r/html Discord Servers GitHub Reddit Discord

HTML Weekly Frontend Focus CSS Tricks Web Tools Weekly

HTML Boilerplate HTML5 Please HTML Reference

CSS Tricks Snippets 30 Seconds of Code Codepen Patterns

HTML Editors Online Editors Validators Converters Generators Testing Tools Performance Tools Accessibility Tools Color Tools Font Tools Image Tools

Complete HTML Tutorial

CodePen JSFiddle Replit CodeSandbox StackBlitz

W3C Validator HTMLHint nu validator

PageSpeed Insights Lighthouse WebPageTest GTmetrix

axe DevTools WAVE Color Contrast Checker Screen Readers

Google Search Console Rich Results Test Mobile Friendly Test

Adobe Color Coolors Color Hunt

Google Fonts Font Squirrel System Font Stack

TinyPNG Squoosh Cloudinary Placeholder Images

MDN Web Docs W3Schools FreeCodeCamp Coursera Udemy YouTube

HTML and CSS by Jon Duckett Learning Web Design by Robbins Responsive Web Design by Marcotte HTML5 The Missing Manual

FreeCodeCamp W3Schools Google Digital Garage

Week 1 Week 2 Week 3 Week 4 Week 5 Week 6 Week 7 Week 8 Week 9 Week 10 Week 11 Week 12

Basic Tags Text Elements Formatting Lists Tables Forms Media Links Semantic Attributes HTML5 Features Responsive Accessibility Performance SEO APIs PWA Web Components

Question 1 Question 2 Question 3 Question 4 Question 5 Question 6 Question 7 Question 8 Question 9 Question 10 Question 11 Question 12 Question 13 Question 14 Question 15 Question 16 Question 17 Question 18 Question 19 Question 20 Question 21 Question 22 Question 23 Question 24 Question 25 Question 26 Question 27 Question 28 Question 29 Question 30 Question 31 Question 32 Question 33 Question 34 Question 35 Question 36 Question 37 Question 38 Question 39 Question 40 Question 41 Question 42 Question 43 Question 44 Question 45 Question 46 Question 47 Question 48 Question 49 Question 50

Project 1 Project 2 Project 3 Project 4 Project 5 Project 6 Project 7 Project 8 Project 9 Project 10 Project 11 Project 12 Project 13 Project 14 Project 15 Project 16 Project 17 Project 18 Project 19 Project 20 Project 21 Project 22 Project 23 Project 24 Project 25 Project 26 Project 27 Project 28 Project 29 Project 30 Project 31 Project 32 Project 33 Project 34 Project 35 Project 36 Project 37 Project 38 Project 39 Project 40 Project 41 Project 42 Project 43 Project 44 Project 45 Project 46 Project 47 Project 48 Project 49 Project 50

Basic Structure Text Tags Formatting Tags Links Images Lists Tables Forms

Input Types Input Attributes Form Attributes Table Elements Table Attributes Semantic Tags Media Tags Graphics Tags Embed Tags

HTML5 Tags Global Attributes Event Attributes Data Attributes ARIA Attributes Meta Tags Link Tags

Selectors Box Model Display Position Flexbox Grid Background Text

DOM Selection DOM Manipulation Events Storage Fetch API

Viewport Media Queries Images Units

Title Tag Meta Description Headings Images Canonical

Alt Text Labels ARIA Focus Semantic

Lazy Loading Async Defer Preload Compression Caching

Common Tags Void Elements Deprecated Tags New HTML5 Tags Form Input Types Global Attributes Event Attributes CSS Units Color Formats Media Formats

Absolute Path Accessibility Alt Text API ARIA Async

Block Element Box Model

Canvas Child Element Class CLS CORS CSP

Data Attribute Defer Deprecated DOM Drag and Drop

Element Em Entity

Favicon FCP FID Flexbox

Geolocation Grid

HTML HTTP HTTPS

ID Iframe Inline Element INP

JavaScript JSON JSON-LD

Lazy Loading LCP LocalStorage

Media Query Meta Tag Microdata

Nested Element

Open Graph

Padding Parent Element Preload Pseudo Class Pseudo Element PWA

Rem Responsive RGB

Semantic Server-Sent Events Service Worker Shadow DOM Slot SVG

TTFB Template

UTF-8

Viewport Void Element

WCAG Web Component Web Storage Web Worker WebP WebSocket

XHTML XSS

Congratulations Next Steps Keep Learning Thank You

<center> <font> <big> <strike> <tt> <u> <s> <acronym> <plaintext> <listing> <xmp> <nobr> <spacer> <multicol> <bgsound>

<frame> <frameset> <noframes> <layer> <ilayer>

<applet> <embed> <noembed> <param>

<blink> <marquee>

<keygen> <isindex> <nextid>

<dir> <menu>

<colgroup> <col>

<script language>

<meta http-equiv> <basefont> <link rev>

contenteditable execCommand WYSIWYG Editor

HTTP/3 QUIC Protocol 0 RTT Connection Migration

103 Early Hints Link Header Performance Optimization

Brotli Zstandard Accept-Encoding

WebBundle Signed Exchanges Bundling

Isolated Web Apps Trust Tokens

<fencedframe> Interest Groups

PrivateAggregation contributeToHistogram

SharedStorage worklet

Attribution Reporting registerSource registerTrigger

Topics API document.browsingTopics Privacy Sandbox

First Party Sets owner version

ChildSubcategory

Course Complete

Learn CSS Learn JavaScript Build Projects Get Certified

Documentation Community Tools