Best of HTML — November 2023

1. 1
   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.

   320

   4
2. 2
   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.

   128

   9
3. 3
   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.

   104

   1
4. 4
   Article

   builder.io·3y

   Figma to HTML: Convert designs to clean HTML code in a click

   Learn how AI technology can streamline the process of converting Figma designs to HTML code with Visual Copilot. The tool generates clean and responsive HTML code, supports various frameworks, and allows for customization.

   92

   2
5. 5
   Article

   builder.io·3y

   Creating a Scrolling Logo Animation with Tailwind CSS

   Learn how to create a horizontal scrolling logo animation using HTML and Tailwind CSS. Explore how Visual Copilot, an AI powered Figma to Code plugin, can accelerate the code generation process. Customize the animation and code to match your design requirements. Add interactivity by pausing the animation on hover.

   74

   2
6. 6
   Article

   Hacker News·3y

   abi/screenshot-to-code: Drop in a screenshot and convert it to clean HTML/Tailwind/JS code

   A simple app that converts a screenshot to clean HTML/Tailwind/JS code using GPT-4 Vision and DALL-E 3.

   68

   3
7. 7
   Article

   DEV·2y

   Exploring a 3D city with just HTML and CSS

   Learn how to convert 3D objects into HTML/CSS elements and explore a customizable city using just HTML and CSS. Discover how to create a 3D city-building game with peak performance and track metrics like population. Also, find out how to approximate any surface using triangles.

   53

   1
8. 8
   Article

   Laravel News·3y

   Laravel Htmx

   Laravel htmx is a package that provides a nice way of working with htmx, a library that allows you to access modern browser features directly from HTML. The package outlines features such as Htmx Request, Htmx Response, and rendering Blade fragments with htmx.

   51

   1
9. 9
   Article

   asayer·3y

   Three plugins to Convert your Figma Designs into Code

   This article explores three plugins that automate the design-to-code process for Figma designs, saving time and ensuring accuracy. The plugins discussed are Figma-to-HTML, TeleportHQ, and Locofy. They empower designers and developers to convert designs into code effortlessly, maintain consistency, embrace modern tools, and support various frameworks. Each plugin has its own capabilities and limitations, but they all aim to streamline the design-to-code translation process.

   49

   1
10. 10
    Article

    freeCodeCamp·3y

    How to Write Components that Work in Any Framework

    The article explains the concept of web components and the technologies that make them up, including custom elements, Shadow DOM, and HTML Templates. It highlights the challenges of writing web components and introduces Lit, a library that simplifies the process by reducing boilerplate code. Lit allows developers to write performant and interoperable web components that can work in any frontend framework.

    40
11. 11
    Article

    freeCodeCamp·2y

    Practice HTML, CSS, and JavaScript in Spanish by Building 7 Projects

    Learn how to build 7 projects in Spanish using HTML, CSS, and JavaScript. Practice and understand key concepts and techniques with courses on freeCodeCamp's Spanish YouTube channel.

    34
12. 12
    Article

    gitconnected·3y

    CSS and Responsive Design

    CSS and Responsive Design aims to create webpages that automatically adapt and adjust their layout, content, and functionality based on the characteristics of the device being used to access the webpage. In the old days, developers would create two different versions of the same webpage, one for desktops and the other for mobile devices.

    33
13. 13
    Article

    freeCodeCamp·2y

    How to Create HTML Accordion Elements With and Without JavaScript

    Learn how to create HTML accordion elements with and without JavaScript. The article demonstrates the use of the `<details>` element for creating accordion-like functionality without JavaScript and then explains how to add JavaScript to make the accordion elements behave differently. The tutorial provides code examples and explanations.

    28
14. 14
    Article

    Medium·3y

    Frontend Weekly Digest #337 (13–19 November 2023)

    This digest includes articles on web development, CSS, JavaScript, React, Vue, and Angular.

    25
15. 15
    Article

    freeCodeCamp·3y

    DOM Manipulation in JavaScript – A Comprehensive Guide for Beginners

    Learn the fundamentals of DOM manipulation in JavaScript, including accessing elements, modifying styles, handling events, creating and modifying elements, and avoiding common pitfalls. DOM manipulation is essential for creating dynamic and interactive web pages.

    24