PageSourceSearch

https://w3collective.com/

html w3collective.com collected 2026-09-25 21:46:23 UTC 30,393 bytes, 382 lines download raw bytes

1<!doctype html>
2<html lang="en-US">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1">
6	<link rel="profile" href="https://gmpg.org/xfn/11">
7	<title>w3collective - Practical HTML, CSS, &amp; JavaScript tutorials!</title>
8<!-- This site is running CAOS for WordPress -->
9
10<!-- The SEO Framework by Sybre Waaijer -->
11<meta name="robots" content="max-snippet:-1,max-image-preview:standard,max-video-preview:-1" />
12<link rel="canonical" href="https://w3collective.com/" />
13<link rel="next" href="https://w3collective.com/page/2/" />
14<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://w3collective.com/#/schema/WebSite","url":"https://w3collective.com/","name":"w3collective","description":"Practical HTML, CSS, & JavaScript tutorials!","inLanguage":"en-US","potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://w3collective.com/search/{search_term_string}/"},"query-input":"required name=search_term_string"},"publisher":{"@id":"https://w3collective.com/#/schema/Organization"}},{"@type":"WebPage","@id":"https://w3collective.com/","url":"https://w3collective.com/","name":"w3collective - Practical HTML, CSS, & JavaScript tutorials!","inLanguage":"en-US","isPartOf":{"@id":"https://w3collective.com/#/schema/WebSite"},"breadcrumb":{"@type":"BreadcrumbList","@id":"https://w3collective.com/#/schema/BreadcrumbList","itemListElement":{"@type":"ListItem","position":1,"name":"w3collective"}},"about":{"@id":"https://w3collective.com/#/schema/Organization"}},{"@type":"Organization","@id":"https://w3collective.com/#/schema/Organization","name":"w3collective","url":"https://w3collective.com/","logo":{"@type":"ImageObject","url":"https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png","contentUrl":"https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png","width":300,"height":300,"contentSize":"4655"}}]}</script>
14
15<!-- / The SEO Framework by Sybre Waaijer | 10.54ms meta | 9.06ms boot -->
16
17<link rel='preconnect' href='//www.google-analytics.com' />
18<link rel="alternate" type="application/rss+xml" title="w3collective &raquo; Feed" href="https://w3collective.com/feed/" />
19<link rel="alternate" type="application/rss+xml" title="w3collective &raquo; Comments Feed" href="https://w3collective.com/comments/feed/" />
20<script>
21window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/w3collective.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=30f576594eb8592d17f2554cdcaae6b6"}};
22/*! This file is auto-generated */
23!function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings);
24</script>
24
25<style id='wp-emoji-styles-inline-css'>
26
27	img.wp-smiley, img.emoji {
28		display: inline !important;
29		border: none !important;
30		box-shadow: none !important;
31		height: 1em !important;
32		width: 1em !important;
33		margin: 0 0.07em !important;
34		vertical-align: -0.1em !important;
35		background: none !important;
36		padding: 0 !important;
37	}
38</style>
39<link rel='stylesheet' id='wp-block-library-css' href='https://w3collective.com/wp-includes/css/dist/block-library/style.min.css?ver=30f576594eb8592d17f2554cdcaae6b6' media='all' />
40<link rel='stylesheet' id='syntax-highlighting-code-block-theme-css' href='https://w3collective.com/wp-content/plugins/syntax-highlighting-code-block/vendor/scrivo/highlight-php/styles/nord.css?ver=1.5.0' media='all' />
41<style id='syntax-highlighting-code-block-inline-css'>
42.wp-block-code {
43	border: 0;
44	padding: 0;
45	-webkit-text-size-adjust: 100%;
46	text-size-adjust: 100%;
47}
48
49.wp-block-code > span {
50	display: block;
51	overflow: auto;
52}
53
54.shcb-language {
55	border: 0;
56	clip: rect(1px, 1px, 1px, 1px);
57	-webkit-clip-path: inset(50%);
58	clip-path: inset(50%);
59	height: 1px;
60	margin: -1px;
61	overflow: hidden;
62	padding: 0;
63	position: absolute;
64	width: 1px;
65	word-wrap: normal;
66	word-break: normal;
67}
68
69.hljs {
70	box-sizing: border-box;
71}
72
73.hljs.shcb-code-table {
74	display: table;
75	width: 100%;
76}
77
78.hljs.shcb-code-table > .shcb-loc {
79	color: inherit;
80	display: table-row;
81	width: 100%;
82}
83
84.hljs.shcb-code-table .shcb-loc > span {
85	display: table-cell;
86}
87
88.wp-block-code code.hljs:not(.shcb-wrap-lines) {
89	white-space: pre;
90}
91
92.wp-block-code code.hljs.shcb-wrap-lines {
93	white-space: pre-wrap;
94}
95
96.hljs.shcb-line-numbers {
97	border-spacing: 0;
98	counter-reset: line;
99}
100
101.hljs.shcb-line-numbers > .shcb-loc {
102	counter-increment: line;
103}
104
105.hljs.shcb-line-numbers .shcb-loc > span {
106	padding-left: 0.75em;
107}
108
109.hljs.shcb-line-numbers .shcb-loc::before {
110	border-right: 1px solid #ddd;
111	content: counter(line);
112	display: table-cell;
113	padding: 0 0.75em;
114	text-align: right;
115	-webkit-user-select: none;
116	-moz-user-select: none;
117	-ms-user-select: none;
118	user-select: none;
119	white-space: nowrap;
120	width: 1%;
121}
122
123.hljs > mark.shcb-loc { background-color: #4D525C; }
124</style>
125<style id='classic-theme-styles-inline-css'>
126/*! This file is auto-generated */
127.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none}
128</style>
129<style id='global-styles-inline-css'>
130body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);
130--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}body .is-layout-flex{flex-wrap: wrap;align-items: center;}body .is-layout-flex > *{margin: 0;}body .is-layout-grid{display: grid;}body .is-layout-grid > *{margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}
130.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;}
131.wp-block-navigation a:where(:not(.wp-element-button)){color: inherit;}
132:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}
133:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}
134.wp-block-pullquote{font-size: 1.5em;line-height: 1.6;}
135</style>
136<link rel='stylesheet' id='bodiggity-style-css' href='https://w3collective.com/wp-content/themes/w3c/style.css?ver=1.08' media='all' />
137<script data-cfasync="false" async src="https://w3collective.com/wp-content/uploads/caos/f736314d.js?id=G-EETERXBF9E" id="caos-gtag-js"></script>
vendor: 1 bytes, line 137
137
138<script data-cfasync="false" id="caos-gtag-js-after">
vendor: 156 bytes, lines 139-146
139window.dataLayer = window.dataLayer || [];
140
141    function gtag() {
142        dataLayer.push(arguments);
143    }
144
145    gtag('js', new Date());
146    gtag('config', '
146G-EETERXBF9E
vendor: 110 bytes, lines 146-147
146', {"cookie_domain":"w3collective.com","cookie_flags":"samesite=none;secure","allow_google_signals":true});
147	
148</script>
148
149<link rel="https://api.w.org/" href="https://w3collective.com/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://w3collective.com/xmlrpc.php?rsd" />
150<link rel="icon" href="https://w3collective.com/wp-content/uploads/2023/04/w3-profile-150x150.png" sizes="32x32" />
151<link rel="icon" href="https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png" sizes="192x192" />
152<link rel="apple-touch-icon" href="https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png" />
153<meta name="msapplication-TileImage" content="https://w3collective.com/wp-content/uploads/2023/04/w3-profile.png" />
154	<link rel="preconnect" href="https://fonts.gstatic.com">
155	<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
156</head>
157<body class="home blog">
158<div id="top-banner">
159	<a target="_blank" rel="nofollow noopener" href="https://click.linksynergy.com/fs-bin/click?id=vSh04XehcDw&offerid=507388.1541&subid=0&type=4">
160	<span>#AD</span> Top Online Web Development &amp; Programming Courses | Udemy
161    </a>
162</div>
163<div id="header-wrapper">
164	<header id="header" class="container">					
165		<a id="header-site" href="https://w3collective.com/" rel="home">w3collective</a>
166					<nav>
167				<div class="menu-header-container"><ul id="menu-header" class="menu"><li id="menu-item-1813" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1813"><a href="https://w3collective.com/tag/html/">HTML</a></li>
168<li id="menu-item-1814" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1814"><a href="https://w3collective.com/tag/css/">CSS</a></li>
169<li id="menu-item-1815" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1815"><a href="https://w3collective.com/tag/js/">JavaScript</a></li>
170<li id="menu-item-1816" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1816"><a href="https://w3collective.com/tag/react/">React</a></li>
171<li id="menu-item-1817" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1817"><a href="https://w3collective.com/tag/node/">Node.js</a></li>
172</ul></div>			</nav>		
173				<form role="search" method="get" id="searchform" class="searchform" action="https://w3collective.com/" >
174    <div><label class="screen-reader-text" for="s">Search for:</label>
175    <input type="text" value="" name="s" id="s" />
176    <input type="submit" id="searchsubmit" value="Search" />
177    </div>
178    </form>	</header>	
179	<div id="newsletter">
180		<img src="https://w3collective.com/wp-content/uploads/2023/03/ipad-screen.png" width="143" height="205" alt="Newsletter Screenshot" />		
181		<div class="email-octopus-form-wrapper"> 			
182			<p>Join more than 1,300 web developers who are subscribed to w3collective email newsletter. Simply drop your email address below to get actionable tips, free tools, tutorials, and more to help you grow as a developer.</p>   
183			<p class="email-octopus-success-message"></p>
184			<p class="email-octopus-error-message"></p>
185			<form method="post"
186			action="https://emailoctopus.com/lists/186c2b82-e8fc-11ea-a3d0-06b4694bee2a/members/embedded/1.3/add"
187			class="email-octopus-form"
188			data-sitekey="6LdYsmsUAAAAAPXVTt-ovRsPIJ_IVhvYBBhGvRV6"
189			>        
190				<div class="email-octopus-form-row">            
191					<input id="field_0" name="field_0" type="email" placeholder="">
192				</div>
193				<div class="email-octopus-form-row-hp" aria-hidden="true">
194					<!-- Do not remove this field, otherwise you risk bot sign-ups -->
195					<input type="text" name="hp186c2b82-e8fc-11ea-a3d0-06b4694bee2a"
196					tabindex="-1"
197					autocomplete="nope">
198				</div>
199				<div class="email-octopus-form-row-subscribe">
200					<input type="hidden"
201					name="successRedirectUrl"
202					value="">
203					<button type="submit">Subscribe</button>
204				</div>
205			</form> 
206			<p class="email-octopus-spam">No Spam. We Respect Your Privacy. Unsubscribe at any Time.</p>  			
207		</div>
208	</div>
209</div>
210<div id="content" class="container">
211	<main id="main">
212<div id="front">	
213	
213<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYDCKQ7&placement=w3collectivecom" id="_carbonads_js"></script>
213		
214	<div id="popular-posts">
215		<h3>Popular Posts<br/><span>Not sure where to start? Why not check out some of the most popular tutorials.</span></h3>
216		<div id="sticky">
217			<article id="post-2024" class="post-2024 post type-post status-publish format-standard sticky hentry category-tutorial tag-js">
218		
219		<!-- TEASER -->	
220		<a class="teaser" href="https://w3collective.com/restrict-file-size-javascript/" rel="bookmark">
221			Restrict file upload size using JavaScript			
222		</a>		
223		
224</article><article id="post-2110" class="post-2110 post type-post status-publish format-standard sticky hentry category-tutorial tag-css tag-html tag-js">
225		
226		<!-- TEASER -->	
227		<a class="teaser" href="https://w3collective.com/double-range-slider-html-css-js/" rel="bookmark">
228			Code a double range price slider using HTML, CSS &#038; JavaScript			
229		</a>		
230		
231</article><article id="post-1783" class="post-1783 post type-post status-publish format-standard sticky hentry category-tutorial tag-css tag-html tag-js">
232		
233		<!-- TEASER -->	
234		<a class="teaser" href="https://w3collective.com/responsive-step-progress-bar/" rel="bookmark">
235			Code a responsive step progress bar with HTML, CSS &#038; JavaScript			
236		</a>		
237		
238</article><article id="post-1622" class="post-1622 post type-post status-publish format-standard sticky hentry category-tutorial tag-alpine">
239		
240		<!-- TEASER -->	
241		<a class="teaser" href="https://w3collective.com/modal-dialog-alpine-js/" rel="bookmark">
242			Creating a modal dialog with Alpine.js			
243		</a>		
244		
245</article><article id="post-74" class="post-74 post type-post status-publish format-standard sticky hentry category-tutorial tag-js">
246		
247		<!-- TEASER -->	
248		<a class="teaser" href="https://w3collective.com/fetch-display-api-data-javascript/" rel="bookmark">
249			Fetch &#038; display API data using JavaScript			
250		</a>		
251		
252</article><article id="post-12" class="post-12 post type-post status-publish format-standard sticky hentry category-tutorial tag-js">
253		
254		<!-- TEASER -->	
255		<a class="teaser" href="https://w3collective.com/get-domain-name-url-javascript/" rel="bookmark">
256			How to get the domain name from a URL in JavaScript			
257		</a>		
258		
259</article>		</div>
260	</div>
261	<h3>Latest Posts<br/><span>Browse the latest from our collection of free HTML, CSS, & JavaScript tutorials.</span></h3>
262	<div id="articles">
263		<article id="post-2199" class="post-2199 post type-post status-publish format-standard hentry category-tutorial tag-css tag-html tag-js">
264		
265		<!-- TEASER -->	
266		<a class="teaser" href="https://w3collective.com/sidebar-navigation-menu/" rel="bookmark">
267			Create a sidebar navigation menu with HTML, CSS &amp; JavaScript			
268		</a>		
269		
270</article><article id="post-2091" class="post-2091 post type-post status-publish format-standard hentry category-tutorial tag-vue">
271		
272		<!-- TEASER -->	
273		<a class="teaser" href="https://w3collective.com/modal-component-vue-js/" rel="bookmark">
274			Building a custom modal popup component in Vue.js			
275		</a>		
276		
277</article><article id="post-2068" class="post-2068 post type-post status-publish format-standard hentry category-tutorial tag-vue">
278		
279		<!-- TEASER -->	
280		<a class="teaser" href="https://w3collective.com/fetch-display-api-data-vue/" rel="bookmark">
281			Vue.js &#8211; Fetch &#038; display data from an API			
282		</a>		
283		
284</article><article id="post-2052" class="post-2052 post type-post status-publish format-standard hentry category-tutorial tag-css">
285		
286		<!-- TEASER -->	
287		<a class="teaser" href="https://w3collective.com/pure-css-tabs-no-javascript/" rel="bookmark">
288			How to create tabs using CSS (no JavaScript required)			
289		</a>		
290		
291</article><article id="post-2024" class="post-2024 post type-post status-publish format-standard sticky hentry category-tutorial tag-js">
292		
293		<!-- TEASER -->	
294		<a class="teaser" href="https://w3collective.com/restrict-file-size-javascript/" rel="bookmark">
295			Restrict file upload size using JavaScript			
296		</a>		
297		
298</article><article id="post-2110" class="post-2110 post type-post status-publish format-standard sticky hentry category-tutorial tag-css tag-html tag-js">
299		
300		<!-- TEASER -->	
301		<a class="teaser" href="https://w3collective.com/double-range-slider-html-css-js/" rel="bookmark">
302			Code a double range price slider using HTML, CSS &#038; JavaScript			
303		</a>		
304		
305</article><article id="post-2001" class="post-2001 post type-post status-publish format-standard hentry category-tutorial tag-js">
306		
307		<!-- TEASER -->	
308		<a class="teaser" href="https://w3collective.com/unit-testing-javascript-jest/" rel="bookmark">
309			Introduction to unit testing in JavaScript with Jest			
310		</a>		
311		
312</article><article id="post-1973" class="post-1973 post type-post status-publish format-standard hentry category-tutorial tag-react">
313		
314		<!-- TEASER -->	
315		<a class="teaser" href="https://w3collective.com/checkbox-component-react/" rel="bookmark">
316			How to create a checkbox component in React			
317		</a>		
318		
319</article><article id="post-1951" class="post-1951 post type-post status-publish format-standard hentry category-tutorial tag-html tag-js">
320		
321		<!-- TEASER -->	
322		<a class="teaser" href="https://w3collective.com/currency-converter-html-javascript/" rel="bookmark">
323			Build a simple currency converter with HTML &#038; JavaScript			
324		</a>		
325		
326</article><article id="post-1938" class="post-1938 post type-post status-publish format-standard hentry category-tutorial tag-js">
327		
328		<!-- TEASER -->	
329		<a class="teaser" href="https://w3collective.com/file-extension-javascript/" rel="bookmark">
330			How to get the file extension from an upload using JavaScript			
331		</a>		
332		
333</article><article id="post-1920" class="post-1920 post type-post status-publish format-standard hentry category-tutorial tag-js">
334		
335		<!-- TEASER -->	
336		<a class="teaser" href="https://w3collective.com/keyboard-shortcuts-javascript/" rel="bookmark">
337			Creating keyboard shortcuts for web apps with JavaScript			
338		</a>		
339		
340</article><article id="post-1889" class="post-1889 post type-post status-publish format-standard hentry category-tutorial tag-react">
341		
342		<!-- TEASER -->	
343		<a class="teaser" href="https://w3collective.com/react-component-pdf/" rel="bookmark">
344			Exporting a React component to a PDF file on click			
345		</a>		
346		
347</article>
348	<nav class="navigation pagination" aria-label="Posts">
349		<h2 class="screen-reader-text">Posts navigation</h2>
350		<div class="nav-links"><span aria-current="page" class="page-numbers current">1</span>
351<a class="page-numbers" href="https://w3collective.com/page/2/">2</a>
352<span class="page-numbers dots">&hellip;</span>
353<a class="page-numbers" href="https://w3collective.com/page/11/">11</a>
354<a class="next page-numbers" href="https://w3collective.com/page/2/">Next</a></div>
355	</nav>			
356	</div>
357</div>
358
359	</main>		
360</div>
361
362<footer id="footer" class="container">
363	<a id="footer-hosting" href="https://www.dreamhost.com/r.cgi?2267735" target="_blank">
364		<img src="https://w3collective.com/wp-content/themes/w3c/img/logo-dreamhost.png" width="150" alt="Dreamhost Logo" />		
365	</a>
366	<a href="https://homegardeningonline.com/" id="footer-ext">Home Gardening Online</a>
367	<nav>	    
368		<div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-1146" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1146"><a href="https://w3collective.com/" aria-current="page">Home</a></li>
369<li id="menu-item-1147" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-1147"><a rel="privacy-policy" href="https://w3collective.com/privacy-policy/">Privacy Policy</a></li>
370<li id="menu-item-1950" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1950"><a href="https://w3collective.com/affiliate-disclosure/">Affiliate Disclosure</a></li>
371<li id="menu-item-1148" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1148"><a href="https://w3collective.com/contact/">Contact</a></li>
372</ul></div>	
373		<span>&copy;2026 w3collective - Practical HTML, CSS, & JavaScript tutorials.</span>	 
374	</nav>	
375</footer>
376<script async src="https://emailoctopus.com/bundles/emailoctopuslist/js/1.5/formEmbed.js"></script>
376	
377</body>
378</html>
379<!-- Dynamic page generated in 0.662 seconds. -->
380<!-- Cached page generated by WP-Super-Cache on 2026-09-26 07:24:12 -->
381
382<!-- Compression = gzip -->

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.