fullstackist - Fullstack Developer Blog

Fullstackist » Profile for fullstackist

fullstackist

Just another HTMLy user

Posts by this author

The `` Tag: A Niche but Powerful HTML Element on January 2026 - Posted in HTML
Creating a Multi-Level Dropdown Navigation with Nested Lists on January 2026 - Posted in HTML
Setting the Language of Your Page with the `lang` Attribute on January 2026 - Posted in HTML
Using Lists for Navigation Menus: The Standard Practice on January 2026 - Posted in HTML
How to Tell Search Engines What to Index with `robots` Meta Tags on January 2026 - Posted in HTML
Are Tables for Layout Ever Okay? (Spoiler: No) on January 2026 - Posted in HTML
Structured Data 101: An Introduction to JSON-LD and Schema.org on January 2026 - Posted in HTML
Styling Tables for Readability (A Future CSS Crossover) on January 2026 - Posted in HTML
Canonical URLs: Using `rel="canonical"` to Avoid Duplicate Content on January 2026 - Posted in HTML
Creating a Simple Calendar or Schedule with HTML Tables on January 2026 - Posted in HTML
Using the `` Tag Effectively for SEO and UX</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/building-an-accessible-data-table-table-thead-th-scope-caption">Building an Accessible Data Table: `<table>`, `<thead>`, `<th scope>`, `<caption>`</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/customizing-list-markers-with-css-sneak-peek-into-css">Customizing List Markers with CSS (Sneak Peek into CSS)</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/nesting-html-lists-creating-complex-menu-structures">Nesting HTML Lists: Creating Complex Menu Structures</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/when-to-use-ordered-ol-unordered-ul-and-definition-dl-lists">When to Use Ordered (`<ol>`), Unordered (`<ul>`), and Definition (`<dl>`) Lists</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/creating-a-simple-back-to-top-button-with-just-an-anchor">Creating a Simple "Back to Top" Button with Just an Anchor</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/linking-to-pdfs-and-other-file-types-best-practices">Linking to PDFs and Other File Types: Best Practices</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/the-anatomy-of-a-hyperlink-all-possible-attributes">The Anatomy of a Hyperlink: All Possible Attributes</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/building-a-table-of-contents-for-long-articles-with-anchor-links">Building a Table of Contents for Long Articles with Anchor Links</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/html">HTML</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/css-font-loading-with-custom-web-fonts">CSS Font Loading with custom web fonts</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/css">CSS</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/css-color-functions-with-modern-color-spaces">CSS Color Functions with modern color spaces</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/css">CSS</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/css-math-functions-with-min-max-and-clamp">CSS Math Functions with min, max, and clamp</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/css">CSS</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/css-conic-gradients-with-circular-color-transitions">CSS Conic Gradients with circular color transitions</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/css">CSS</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/css-backdrop-filter-with-frosted-glass-effects">CSS Backdrop Filter with frosted glass effects</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/css">CSS</a></span> </li> <li class="item"> <span><a href="https://fullstack.ist/post/css-box-shadow-with-creating-depth-and-elevation">CSS Box Shadow with creating depth and elevation</a></span> on <span>January 2026</span> - Posted in <span><a href="https://fullstack.ist/category/css">CSS</a></span> </li> </ul> </div> </div> </div> </section> <div class="pagination"><ul class="pagination"><li class="page-item"><a class="page-link" href="/author/fullstackist?page=43">« Newer</a></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=1">1</a></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=2">2</a></li><li class="page-item disabled"><span class="page-link">...</span></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=42">42</a></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=43">43</a></li><li class="page-item active"><span class="page-link">44</span></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=45">45</a></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=46">46</a></li><li class="page-item disabled"><span class="page-link">...</span></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=93">93</a></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=94">94</a></li><li class="page-item"><a class="page-link" href="/author/fullstackist?page=45">Older »</a></li></ul></div> </section> </section> <section class="vSeperator"></section> <section class="third"> <section class="content"> <div id="blogDescription"> <img src="themes/fullstackist/assets/images/icon.png" alt="Fullstackist aims to provide immersive and explanatory content for full stack developers"> Fullstackist aims to provide immersive and explanatory content for full stack developers </div> </section> <section class="hSeperator"></section> <section class="content"> <aside class="category-list aside section"> <div class="section-inner"> <div class="content"> <div class="tagcloud"> <a class="tag-cloud-link" href="https://fullstack.ist/tag/accessibility" style="font-size:11.75pt;">accessibility</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/collaboration" style="font-size:11.4pt;">collaboration</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/css" style="font-size:12.65pt;">css</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/eloquent" style="font-size:12.95pt;">eloquent</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/flask" style="font-size:12.2pt;">flask</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/fullstack developer" style="font-size:11.25pt;">fullstack developer</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/fullstack developers" style="font-size:11.45pt;">fullstack developers</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/fullstack development" style="font-size:17.35pt;">fullstack development</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/git" style="font-size:11.95pt;">git</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/html" style="font-size:11.95pt;">html</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/javascript" style="font-size:22pt;">javascript</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/laravel" style="font-size:18pt;">laravel</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/nodejs" style="font-size:13.2pt;">nodejs</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/performance" style="font-size:11.35pt;">performance</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/react" style="font-size:12.05pt;">react</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/scalability" style="font-size:13.4pt;">scalability</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/security" style="font-size:11.15pt;">security</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/user experience" style="font-size:12.95pt;">user experience</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/vuejs" style="font-size:11.1pt;">vuejs</a> <a class="tag-cloud-link" href="https://fullstack.ist/tag/web development" style="font-size:15.85pt;">web development</a> </div> </div> </div> </aside> </section> <section class="hSeperator"></section> <section class="content categoryList">  <span class="category"> <a href="https://fullstack.ist/category/backend-developer">Backend Developer <span class="categoryCount">103</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/being-a-fullstack-developer">Being a Fullstack Developer <span class="categoryCount">107</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/css">CSS <span class="categoryCount">109</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/devops-cloud">Devops and Cloud <span class="categoryCount">70</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/flask">Flask <span class="categoryCount">108</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/frontend-developer">Frontend Developer <span class="categoryCount">357</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/fullstack-testing">Fullstack Testing <span class="categoryCount">99</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/html">HTML <span class="categoryCount">171</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/intermediate-developer">Intermediate Developer <span class="categoryCount">105</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/javascript">JavaScript <span class="categoryCount">206</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/junior-developer">Junior Developer <span class="categoryCount">124</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/laravel">Laravel <span class="categoryCount">221</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/react">React <span class="categoryCount">110</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/senior-lead-developer">Senior Lead Developer <span class="categoryCount">124</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/vcs-version-control-systems">VCS Version Control Systems <span class="categoryCount">99</span></a> </span><span class="category"> <a href="https://fullstack.ist/category/vue-js">Vue.js <span class="categoryCount">108</span></a> </span> </section> <section class="hSeperator"></section> <section class="content recent"> <h2 class="hide">Recent Posts</h2> <div class="item"> <h3 class="title"><a href="https://fullstack.ist/post/web-development-learning-resources-and-communities-for-beginners">Web development learning resources and communities for beginners...</a></h3> <div class="content"> <p>TL;DR As a beginner in web development, navigating the vast expanse of online resources can be daunting but with the right resources and communities by your side, you'll be well-equipped to tackle any challenge that comes your way. Unlocking the World of Web Development: Essential Learning Resources and Communities for Beginners As a beginner in web development, navigating the vast expanse of online resources can be daunting. With so many tutorials, courses, and communities vying for attention, it's easy to get lost in the sea of information. But fear not! In this article, we'll guide you through the most valuable learning resources and communities that will help you kickstart your web development journey.</p> <a class="more-link" href="https://fullstack.ist/post/web-development-learning-resources-and-communities-for-beginners"><i class="fa fa-link"></i> Read more</a> </div> </div> <div class="item"> <h3 class="title"><a href="https://fullstack.ist/post/understanding-component-based-architecture-for-ui-development">Understanding component-based architecture for UI development...</a></h3> <div class="content"> <p>Component-based architecture breaks down complex user interfaces into smaller, reusable components, improving modularity, reusability, maintenance, and collaboration in UI development. It allows developers to build, maintain, and update large-scale applications more efficiently by creating independent units that can be used across multiple pages or even applications.</p> <a class="more-link" href="https://fullstack.ist/post/understanding-component-based-architecture-for-ui-development"><i class="fa fa-link"></i> Read more</a> </div> </div> <div class="item"> <h3 class="title"><a href="https://fullstack.ist/post/what-is-a-single-page-application-spa-vs-a-multi-page-site">What is a Single Page Application (SPA) vs a multi-page site?...</a></h3> <div class="content"> <p>Single Page Applications (SPAs) load a single HTML file initially, handling navigation and interactions dynamically with JavaScript, while Multi-Page Sites (MPS) load multiple pages in sequence from the server. SPAs are often preferred for complex applications requiring dynamic updates and real-time data exchange, but MPS may be suitable for simple websites with minimal user interactions.</p> <a class="more-link" href="https://fullstack.ist/post/what-is-a-single-page-application-spa-vs-a-multi-page-site"><i class="fa fa-link"></i> Read more</a> </div> </div> </section> <section class="hSeperator"></section> <section class="content"> <div class="commonninja_component pid-c8234aa5-c0e4-4ca4-b95a-20355bbb45ec"></div> </section> </section> </section> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-9XNT6TQV7Q"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-9XNT6TQV7Q'); </script> </div> <footer>  <span class="copyright">© Fullstackist</span> <span class="credit">Powered by <a href="http://www.htmly.com" target="_blank" rel="nofollow">HTMLy</a></span><br><span>Courtesy of <a href="https://www.youds.com/" target="_blank" rel="nofollow">Youds Media Ltd</a></span> </footer> <script> document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('pre').forEach(function (pre) { const copyBtn = document.createElement('a'); copyBtn.textContent = 'Copy'; copyBtn.className = 'copy'; copyBtn.style.cssText = 'position:absolute;right:10px;top:10px;background:#e1e1e1;padding:3px 14px;border-radius:5px;cursor:pointer;font-size:12px;'; copyBtn.addEventListener('click', function () { const code = pre.querySelector('code'); const text = code ? code.textContent : pre.textContent; navigator.clipboard.writeText(text).then(function () { const originalText = copyBtn.textContent; copyBtn.textContent = 'Copied!'; setTimeout(function () { copyBtn.textContent = originalText; }, 2000); }).catch(err => { console.error('Failed to copy: ', err); }); }); pre.appendChild(copyBtn); }); document.querySelectorAll('code').forEach(function (code) { if (code.parentElement.tagName !== 'PRE') { const tooltip = document.createElement('div'); tooltip.className = 'tooltip'; tooltip.textContent = 'Click to copy'; code.appendChild(tooltip); code.addEventListener('mouseover', function (e) { const rect = code.getBoundingClientRect(); const tooltipRect = tooltip.getBoundingClientRect(); tooltip.style.left = (rect.left + (rect.width - tooltipRect.width) / 2) + 'px'; tooltip.style.top = (rect.top - 30) + 'px'; tooltip.style.display = 'block'; }); code.addEventListener('mouseout', function () { tooltip.style.display = 'none'; }); code.addEventListener('click', function () { navigator.clipboard.writeText(code.textContent.replace('Click to copy', '')).then(function () { tooltip.textContent = 'Copied!'; setTimeout(function () { tooltip.textContent = 'Click to copy'; }, 2000); }).catch(err => { console.error('Failed to copy: ', err); }); }); } }); }); </script> </body> <script>  var html = document.getElementById("bodyId"); themeToggle = () => { if (html.className.includes("dark")) { html.classList.remove('dark'); html.classList.add('light'); localStorage.setItem("tw-theme", 'light'); } else { html.classList.remove('light'); html.classList.add('dark'); localStorage.setItem("tw-theme", 'dark'); } } document.getElementById("theme-toggle").addEventListener("click", themeToggle) document.getElementById("theme-toggle-bar").addEventListener("click", themeToggle) function setCookie(cname, cvalue, exdays) { const d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); let expires = "expires="+ d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } function getCookie(cname) { let name = cname + "="; let decodedCookie = decodeURIComponent(document.cookie); let ca = decodedCookie.split(';'); for (let i = 0; i <ca.length; i++) { let c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } setCookie('dark', false); var html = document.getElementById("bodyId"); if (localStorage.getItem("tw-theme") === "dark") { html.classList.remove('light'); html.classList.add('dark'); } else if (localStorage.getItem("tw-theme") === "light") { html.classList.remove('dark'); html.classList.add('light'); } if (getCookie('dark') != true && localStorage.getItem("tw-theme") !== 'light' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { html.classList.remove('light'); html.classList.add('dark'); setCookie('dark', true); } </script> </html>