Best of HTML — August 2023
- 1
- 2
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.
- 3
Community Picks·3y
Why Does Email Development Have to Suck?
An email is essentially just an HTML document, like a web page, except it's visualized in an email client, rather than a web browser. Both browsers and email clients rendered HTML pretty much the same way and had the same functionalities. While web standards evolved and browsers started implementing them, email clients didn't change much.
- 4
Tuts+·3y
How to Implement Drag and Drop With JavaScript
Drag and drop is a user interface (UI) interaction that allows users to click and hold on an element, drag it to a target location, and drop it there. In this tutorial, we'll create a simple example of a list where you can reorder the items using drag and drop.
- 5
asayer·3y
Building a drawing application with HTML5 Canvas
The HTML5 Canvas element provides a drawing surface allowing you to manipulate pixels and programmatically create various shapes and graphics. Drawing applications built with HTML5 canvas allow users to interact with the canvas, capturing mouse movements and clicks to draw, erase, or manipulate elements in real-time.
- 6
BEM 101 | CSS-Tricks
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. It gives developers a standard on which to write better, maintainable code. BEM gives everyone on a project a declarative syntax that they can share so that they're on the same page.
- 7
Impossible⁉️ CSS only syntax highlighting 😱 ...with a single element and GRADIENTS 🤯
CSS only syntax highlighting system uses just a single element and can function in pure CSS (for displaying snippets) No elements for each different part of syntax that is highlighted, no bulky JavaScript libraries to render everything. So while the demo may not look that impressive, the 99.8% data saving is pretty impressive.
- 8
Meet htmx: HTML on steroids
Introducing htmx: High power tools for HTML HTMX, or Hypertext Markup Extension, is a lightweight library that allows programmers to build highly interactive websites using only HTML. It allows you to access modern browser features directly from HTML without using JavaScript. It is small, dependency-free, extendable and extendable.
- 9
- 10
freeCodeCamp·3y
How to Build an Online Image-to-PDF Converter with HTML, CSS, JS, and NodeJS
An online image-to-PDF converter is a website that helps you convert your images to PDFs. This tool is useful because it provides an efficient way to store your images. In this tutorial, you'll learn how you can create your online photo converter with HTML, CSS, JavaScript, and NodeJS.
- 11
The Top Ten Rendering Patterns in Modern Web Development
The Top Ten Rendering Patterns in Modern Web Development Back How to render your website most optimally? This article introduces the ten most commonly used rendering design patterns applied by current frameworks. In each case, we will look at the concept of the rendering pattern, the benefits and drawbacks, the use cases, the relevant frameworks concerned.
- 12
- 13
Building Interactive Dashboards with Gridstack.js
This article is a guide on how to use GridStack.js to create a drag-and-drop interface in a dashboard. The article would also explain how to install Gridstack.js, how you can use the library to build a functional dashboard, and would detail a comparison between Grid Stack.js and Muuri.
- 14
CSS Selectors: A Visual Guide & Reference
CSS selectors are used in CSS to select and style HTML elements on a page. Pseudo-classes allow us to define styles based on an element's state or its relation to other elements. This guide serves as your map, detailing and visualizing these essential selectors.
- 15
Hacker News·3y
I'm betting on HTML
With the advent of large language model-based artificial intelligence, semantic HTML is more important now than ever. At its core, the internet is used to transmit data that helps humans interact with the world as they perceive it. The freedom that HTML/CSS/JS provide is a double-edged sword because access to data has become limited.
- 16
Which is easier to customize: Tailwind CSS or Material UI?
Back Tailwind CSS and Material UI are well-known, widely used CSS frameworks. This article will compare them both, so you can decide which one better suits your needs in terms of allowing all kinds of customization. In this tutorial, we will walk through which is easier to customize, TailwindCSS or Material-UI.
- 17
Cheerio & Moment.js: Web Data Scraping
js is a javascript package used to parse and manipulate HTML and XML documents in a jQuery-like manner but without the overhead of involving a DOM. It offers an approach to parse, validate, manipulate, and display dates and times in JavaScript. It also supports multiple localizations to display dates in different languages.
- 18
Chrome Developers·3y
Astro View Transitions
Astro View Transitions is a JavaScript web framework that server-renders your UI components to lightweight HTML for faster page load performance. Astro could provide the same routing features that JavaScript-heavy SPA web frameworks offered, but without the performance and complexity overhead of client-side routing. Astro intentionally moves as much work off the client.
- 19
Learn HTML and CSS – Handbook for Beginners
Learn HTML and CSS - Handbook for Beginners Greetings, and welcome to this comprehensive HTML andCSS handbook. My goal is to teach you everything you need to know about building fast and beautiful websites that look great on any device. For a start, you will need a code editor, like Visual Studio Code, Sublime Text, Atom and so on.
- 20
LambdaTest·3y
Introduction to Bootstrap Dropdowns And Bootstrap Collapse [Bootstrap Tutorial: Part I]
Introduction to Bootstrap Dropdowns and Bootstrap Collapse. Bootstrap provides several classes and attributes for styling and controlling the behavior of the dropdowns. The classes enrich your dropdowns with features such as headers and dividers. Dropdowns are toggleable overlays or floats that can render a list of links, buttons, forms.
- 21
Creating a custom 404 error page with HTML and CSS
The 404 error page is what a browser displays when a page doesn’t exist on a website. The 404 status code, “Not Found” error, indicates that the web server cannot find a requested page. This error code is triggered when a user tries to access a page that’s been deleted or moved.
- 22
- 23
How to Build a Calculator App with Svelte
Svelte is an open-source front-end JavaScript framework used for building web applications. It is designed to make interactive user interfaces more efficient and performant. It shifts much of the work to the build process, compiling components into highly optimized JavaScript code. In this tutorial, you will learn how to build a simple calculator.
- 24
- 25
Learn to Code HTML & CSS
Learn to Code HTML & CSS is an interactive beginner’s guide with one express goal: teach you how to develop and style websites with HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development. Also available at Amazon and Barnes & Noble Looking for Advanced HTML &CSS Lessons.
