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, & 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 » Feed" href="https://w3collective.com/feed/" /> 19<link rel="alternate" type="application/rss+xml" title="w3collective » 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 & 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 & 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 & 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 & 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 & 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 – Fetch & 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 & 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 & 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">…</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>©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.