--- title: Best HTML posts of 2023 | daily.dev description: The most upvoted HTML posts of 2023, curated by the daily.dev community. canonical: https://daily.dev/tags/html/best-of/2023 twitter:card: summary_large_image twitter:site: @dailydotdev og:url: https://daily.dev/tags/html/best-of/2023 og:type: website og:site_name: daily.dev og:title: Best HTML posts of 2023 | daily.dev og:description: The most upvoted HTML posts of 2023, curated by the daily.dev community. og:image: https://media.daily.dev/image/upload/s--VAY5ToZt--/f_auto/v1724209435/public/daily.dev%20-%20open%20graph --- # Best of HTML — 2023 1. 1 [](/posts/html-can-do-this-part-1-bboctxbfd "HTML can do this? Part 1") Article DEV · 3y HTML can do this? Part 1 Discover some cool things that HTML can do, including creating open/close widgets, linking to email addresses and telephone numbers, using autocomplete in a list, and modifying text directly. 451 14 2. 2 [](/posts/optimal-images-in-html-jns-kqls "Optimal Images in HTML") Article Community Picks · 4y Optimal Images in HTML Shopify Storefront Build is the most powerful no-code solution for Shopify merchants to drive growth Pricing Blog.io & Elastic Path on 12/13 Use Cases Landing Pages Customize and optimize high performing landing pages within your existing site or app Headless CMS. Visually create and seamlessly manage content on any tech stack. 320 20 3. 3 [](/posts/float-ui-v2---free-tailwind-ui-components-in-html-react-vue-svelte-lubomndvt "Float UI v2 - Free Tailwind UI components in Html, React, Vue, Svelte") Article Product Hunt · 3y Float UI v2 - Free Tailwind UI components in Html, React, Vue, Svelte Float UI is an open-source and free Tailwind UI library for HTML, React, Vue, and Svelte, with production-ready templates. 321 4 4. 4 [](/posts/create-a-virtual-world-with-javascript-5gtzoschy "Create a Virtual World with JavaScript") Article freeCodeCamp · 3y Create a Virtual World with JavaScript Learn how to create a virtual world using JavaScript, HTML, and CSS. The course covers building a spatial graph, user-friendly interfaces, generating road borders and buildings, loading real-world data, and more. 291 8 5. 5 [](/posts/you-don-t-need-javascript-for-that-ghdrvlg6e "You don't need JavaScript for that") Article Hacker News · 3y You don't need JavaScript for that The article discusses the rule of least power in web development, which advocates for choosing the least powerful language suitable for a given purpose. It highlights examples of using native HTML and CSS instead of JavaScript, such as creating custom switches, using the datalist element for autosuggest, utilizing the native color picker, implementing accordions, and using dialog modals. The article also mentions future features that will further reduce the need for JavaScript. 284 14 6. 6 [](/posts/astro-3-0-zeb8kzxrr "Astro 3.0") Article Community Picks · 3y Astro 3.0 Astro 3.0 is the first major web framework to support the View Transitions API. Fade, slide, morph, and even persist stateful elements across page navigation with ease. New features include Image Optimization (stable) and faster Rendering Performance. 279 12 7. 7 [](/posts/why-tailwind-css-won-ley4dakbz "Why Tailwind CSS Won") Article Matt Rickard · 3y Why Tailwind CSS Won Tailwind CSS has become synonymous to some degree with the UI components shipped through Tailwind UI (which is a UI framework) It replaces a generation of sites built with Twitter Bootstrap. Tailwind is tree-shaken by default and doesn’t have its own ideas of grids or flexboxes. 259 26 8. 8 [](/posts/full-stack-engineer-career-guide-m0b42nnwr "Full Stack Engineer – Career Guide") Article freeCodeCamp · 3y Full Stack Engineer – Career Guide Full Stack engineering roles have been growing in popularity over the last decade. But what exactly are full-stack engineers? What do they do on a day-to-day basis? And how can you become a full- Stack engineer yourself? In this article, I will go over the definition of full- stack engineering. 186 2 9. 9 [](/posts/tailwind-css-15-component-libraries-ui-kits--lfr4yosb "Tailwind CSS: 15 Component Libraries & UI Kits") Article Community Picks · 4y Tailwind CSS: 15 Component Libraries & UI Kits Tailwind CSS has surpassed Bulma, Semantic UI, Foundation, and other prominent CSS frameworks in just a few years. It is now the 2nd most popular framework in the world, with Bootstrap holding a sturdy number one position. With several hundred custom components, it's also one of the most complete libraries. 172 24 10. 10 [](/posts/web-apps---my-mental-cheat-sheet-d6491whot "Web apps - my mental cheat-sheet") Article DEV · 4y Web apps - my mental cheat-sheet The default is now to deliver software over the internet, piggy-banking on the cross-platform-runs-everything-silver-bullet aka. With great power comes great complexity. But what does that mean exactly? What does the browser flicker when you change the page inside the web app? 169 6 11. 11 [](/posts/javascript-playground-a-no-fuss-pure-javascript-playground-with-a-live-feedback-loop-04z7olcju "JavaScript Playground – A no-fuss pure JavaScript playground with a live feedback loop") Article Community Picks · 3y JavaScript Playground – A no-fuss pure JavaScript playground with a live feedback loop JavaScript Playground is a small web application that provides a JavaScript playground for free. You can think of it as a tiny editor for you to quickly test any JavaScript supported by your browser. It functions pretty much like a REPL, where you are given immediate feedback on the Console screen as you change your code. 159 12 12. 12 [](/posts/the-roadmap-to-web-dev-mastery-best-resources--yfvsltyo0 "The Roadmap to Web Dev Mastery (Best Resources)") Article DEV · 3y The Roadmap to Web Dev Mastery (Best Resources) Learn about the complexities of today's web development landscape, including frameworks and libraries. Acquire skills for free through resources and avoid critical mistakes. Grasp the workings of a website, delve into front-end mastery with HTML, CSS, and JavaScript, optimize workflow with JavaScript frameworks, build a portfolio, and explore back-end mastery. Bright Data provides a valuable tool for accessing web data. 158 4 13. 13 [](/posts/top-front-end-tools-of-2022-smashing-magazine-8d3ucysrm "Top Front-End Tools Of 2022 — Smashing Magazine") Article Smashing Magazine · 4y Top Front-End Tools Of 2022 — Smashing Magazine Top Front-End Tools Of 2022 are the most popular tools in the developer community. Almost all of these tools are practical tools you can use in your projects today. Piling.js is a JavaScript library that allows you to build interfaces where large amounts of items can be dragged and dropped into “piles” It’s built on top of PixiJS. 136 6 14. 14 [](/posts/the-art-of-micro-frontends-spu9tdp5s "The Art of Micro Frontends") Article Sysco LABS Sri Lanka · 3y The Art of Micro Frontends The Art of Micro Frontends is a modular architecture design for web. The concept of micro frontends is an extension of the micro services used in backend. Companies such as Netflix, Zalando and Capital One have pushed the pattern to the front, preparing the groundwork for micro-frontends. 135 2 15. 15 [](/posts/htmx-building-interactive-web-apps-without-javascript-a8jhknjtq "HTMX: Building Interactive Web Apps Without JavaScript") Article DEV · 3y HTMX: Building Interactive Web Apps Without JavaScript HTMX is a lightweight JavaScript library that enables developers to create interactive web experiences without writing JavaScript code. It offers simplicity, performance, maintainability, and SEO benefits. The key features of HTMX include asynchronous HTTP requests, DOM manipulation, client-side routing, and WebSockets support. 127 9 16. 16 [](/posts/10-essential-vscode-extensions-for-newbie-web-developers-pll176on7 "10 Essential VSCode Extensions for Newbie Web Developers") Article OSSPH · 3y 10 Essential VSCode Extensions for Newbie Web Developers VSCode is a powerful and popular code editor that provides an extensive range of functionalities. For beginner web developers, these extensions can significantly improve productivity and streamline the development process. We will explore ten useful VSCode extensions that every aspiring web developer should consider adding to their toolbox. 125 19 17. 17 [](/posts/nuejs-nuejs-build-user-interfaces-with-cleaner-code-alternative-to-react-vue-and-svelte-eic7ellxu "nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte") Article Pointer · 3y nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte Nue JS is a small JavaScript library for building web interfaces with cleaner code. It offers a minimalist approach and easy-to-understand code, making it easier to scale. Nue supports server-side rendering and can be used for UI library development, progressive enhancement, static website generators, and single-page applications. 123 6 18. 18 [](/posts/float-ui---product-information-latest-updates-and-reviews-2024-w9su4nfxp "Float UI - Product Information, Latest Updates, and Reviews 2024") Article Product Hunt · 4y Float UI - Product Information, Latest Updates, and Reviews 2024 Float UI is an open-source library of high-quality UI components and customizable templates built on top of Tailwind CSS and modern JS frameworks. It recently launched Float UI v2 and is looking for expert tips and contributions. 118 12 19. 19 [](/posts/adding-custom-html-and-css-to-github-readme-yb6cg9w26 "Adding custom HTML and CSS to GitHub README") Article Changelog · 4y Adding custom HTML and CSS to GitHub README Learn how to add custom HTML and CSS to your GitHub README using SVG. 114 29 20. 20 [](/posts/web-scraping---a-complete-guide-9rau2th6e "Web Scraping - A Complete Guide") Article DEV · 4y Web Scraping - A Complete Guide Web Scraping, also known as data extraction or data scraping, is the process of extracting or collecting data from websites or other sources in the form of text, images, videos, links, etc. It is helpful when a particular website does not have an official API or has a limit on the access of data. 113 4 21. 21 [](/posts/11-lesser-known-html-tags-that-can-enhance-your-web-development-skills-dqusonv2g "11 Lesser-Known HTML Tags That Can Enhance Your Web Development Skills") Article OSSPH · 3y 11 Lesser-Known HTML Tags That Can Enhance Your Web Development Skills These tags are not widely known, but can be incredibly handy in specific circumstances. Jackson Sophat/ Unsplash HTML (Hypertext Markup Language) is the backbone of web development. Here are some uncommon and unique HTML tags that you may not be aware of but can bring added value to your web development projects. 108 6 22. 22 [](/posts/all-of-learn-html-is-available-loujrbxt4 "All of Learn HTML! is available") Article web.dev · 4y All of Learn HTML! is available All modules of the Learn HTML course have been published. It provides an in-depth journey to understand HTML and includes modules on forms, images, audio and video, HTML APIs, and more. The course is written by Estelle Weyl. 106 6 23. 23 [](/posts/javascript-game-tutorial-build-a-stick-hero-clone-with-html-canvas-javascript-2ve8iokbq "JavaScript Game Tutorial – Build a Stick Hero Clone with HTML Canvas + JavaScript") Article freeCodeCamp · 3y JavaScript Game Tutorial – Build a Stick Hero Clone with HTML Canvas + JavaScript Learn how to create a Stick Hero clone game using pure JavaScript and HTML canvas. This tutorial covers game initialization, different game phases, drawing platforms, hero, and sticks, the main animation loop, and event handling. 103 1 24. 24 [](/posts/how-to-learn-to-code-get-a-developer-job-in-2023-full-book--vdni5bxw1 "How to Learn to Code & Get a Developer Job in 2023 [Full Book]") Article freeCodeCamp · 4y How to Learn to Code & Get a Developer Job in 2023 \[Full Book\] How to Learn to Code & Get a Developer Job in 2023 is the full book – for free – right here on freeCodeCamp.org. More than a million people visit this website each day to learn about math, programming, and computer science. The book is for anyone who is considering a career in software development. 103 7 25. 25 [](/posts/10-css-techniques-for-hiding-elements-oxeavbiar "10 CSS Techniques for Hiding Elements") Article asayer · 3y 10 CSS Techniques for Hiding Elements This article explores ten different methods for hiding content using CSS, including using the display property, visibility property, and opacity property. The techniques discussed can improve the user experience and create more dynamic and interactive web pages. 95 4 [See all HTML archives](/tags/html/best-of) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@graph":[{"@type":"CollectionPage","@id":"https://daily.dev/tags/html/best-of/2023#page","url":"https://daily.dev/tags/html/best-of/2023","name":"Best HTML Posts of 2023","description":"The most upvoted HTML posts of 2023, curated by the daily.dev community.","isPartOf":{"@type":"WebSite","url":"https://daily.dev"}},{"@type":"ItemList","@id":"https://daily.dev/tags/html/best-of/2023#items","numberOfItems":25,"itemListElement":[{"@type":"ListItem","position":1,"url":"https://daily.dev/posts/html-can-do-this-part-1-bboctxbfd","name":"HTML can do this? Part 1"},{"@type":"ListItem","position":2,"url":"https://daily.dev/posts/optimal-images-in-html-jns-kqls","name":"Optimal Images in HTML"},{"@type":"ListItem","position":3,"url":"https://daily.dev/posts/float-ui-v2---free-tailwind-ui-components-in-html-react-vue-svelte-lubomndvt","name":"Float UI v2 - Free Tailwind UI components in Html, React, Vue, Svelte"},{"@type":"ListItem","position":4,"url":"https://daily.dev/posts/create-a-virtual-world-with-javascript-5gtzoschy","name":"Create a Virtual World with JavaScript"},{"@type":"ListItem","position":5,"url":"https://daily.dev/posts/you-don-t-need-javascript-for-that-ghdrvlg6e","name":"You don't need JavaScript for that"},{"@type":"ListItem","position":6,"url":"https://daily.dev/posts/astro-3-0-zeb8kzxrr","name":"Astro 3.0"},{"@type":"ListItem","position":7,"url":"https://daily.dev/posts/why-tailwind-css-won-ley4dakbz","name":"Why Tailwind CSS Won"},{"@type":"ListItem","position":8,"url":"https://daily.dev/posts/full-stack-engineer-career-guide-m0b42nnwr","name":"Full Stack Engineer – Career Guide"},{"@type":"ListItem","position":9,"url":"https://daily.dev/posts/tailwind-css-15-component-libraries-ui-kits--lfr4yosb","name":"Tailwind CSS: 15 Component Libraries & UI Kits"},{"@type":"ListItem","position":10,"url":"https://daily.dev/posts/web-apps---my-mental-cheat-sheet-d6491whot","name":"Web apps - my mental cheat-sheet"},{"@type":"ListItem","position":11,"url":"https://daily.dev/posts/javascript-playground-a-no-fuss-pure-javascript-playground-with-a-live-feedback-loop-04z7olcju","name":"JavaScript Playground – A no-fuss pure JavaScript playground with a live feedback loop"},{"@type":"ListItem","position":12,"url":"https://daily.dev/posts/the-roadmap-to-web-dev-mastery-best-resources--yfvsltyo0","name":"The Roadmap to Web Dev Mastery (Best Resources)"},{"@type":"ListItem","position":13,"url":"https://daily.dev/posts/top-front-end-tools-of-2022-smashing-magazine-8d3ucysrm","name":"Top Front-End Tools Of 2022 — Smashing Magazine"},{"@type":"ListItem","position":14,"url":"https://daily.dev/posts/the-art-of-micro-frontends-spu9tdp5s","name":"The Art of Micro Frontends"},{"@type":"ListItem","position":15,"url":"https://daily.dev/posts/htmx-building-interactive-web-apps-without-javascript-a8jhknjtq","name":"HTMX: Building Interactive Web Apps Without JavaScript"},{"@type":"ListItem","position":16,"url":"https://daily.dev/posts/10-essential-vscode-extensions-for-newbie-web-developers-pll176on7","name":"10 Essential VSCode Extensions for Newbie Web Developers"},{"@type":"ListItem","position":17,"url":"https://daily.dev/posts/nuejs-nuejs-build-user-interfaces-with-cleaner-code-alternative-to-react-vue-and-svelte-eic7ellxu","name":"nuejs/nuejs: Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte"},{"@type":"ListItem","position":18,"url":"https://daily.dev/posts/float-ui---product-information-latest-updates-and-reviews-2024-w9su4nfxp","name":"Float UI - Product Information, Latest Updates, and Reviews 2024"},{"@type":"ListItem","position":19,"url":"https://daily.dev/posts/adding-custom-html-and-css-to-github-readme-yb6cg9w26","name":"Adding custom HTML and CSS to GitHub README"},{"@type":"ListItem","position":20,"url":"https://daily.dev/posts/web-scraping---a-complete-guide-9rau2th6e","name":"Web Scraping - A Complete Guide"},{"@type":"ListItem","position":21,"url":"https://daily.dev/posts/11-lesser-known-html-tags-that-can-enhance-your-web-development-skills-dqusonv2g","name":"11 Lesser-Known HTML Tags That Can Enhance Your Web Development Skills"},{"@type":"ListItem","position":22,"url":"https://daily.dev/posts/all-of-learn-html-is-available-loujrbxt4","name":"All of Learn HTML! is available"},{"@type":"ListItem","position":23,"url":"https://daily.dev/posts/javascript-game-tutorial-build-a-stick-hero-clone-with-html-canvas-javascript-2ve8iokbq","name":"JavaScript Game Tutorial – Build a Stick Hero Clone with HTML Canvas + JavaScript"},{"@type":"ListItem","position":24,"url":"https://daily.dev/posts/how-to-learn-to-code-get-a-developer-job-in-2023-full-book--vdni5bxw1","name":"How to Learn to Code & Get a Developer Job in 2023 [Full Book]"},{"@type":"ListItem","position":25,"url":"https://daily.dev/posts/10-css-techniques-for-hiding-elements-oxeavbiar","name":"10 CSS Techniques for Hiding Elements"}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Tags","item":"https://daily.dev/tags"},{"@type":"ListItem","position":3,"name":"HTML","item":"https://daily.dev/tags/html"},{"@type":"ListItem","position":4,"name":"Best of","item":"https://daily.dev/tags/html/best-of"},{"@type":"ListItem","position":5,"name":"2023"}]}]} ```