An explainer for doing web development using only vanilla techniques.
html
HTML attributes are like little instructions that we add to the markup of elements to make them do certain things or behave in certain ways. For example, most of us know that the `target` attribute with a value of `_blank` opens the link in a new tab or window. But did you know that you can use it on the `form` element, too? John Rhea presents several lesser-known uses for common HTML attributes.
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.
HTML Canvas is an element I don't see very often in the wild, but when I do, there's always something...
There are hundreds of semantic tags available to help describe the meaning of your HTML documents....
Something happened earlier this year where I got on a run making checkbox animations and just couldn’t stop.
While browsing Stack Overflow, I generally browse one or two links from the sidebar 'Hot Network Questions'. It brings me to several interesting topics, not necessarily related to development. And this time, I found an interesting post: how do ASCII art image conversion algorithms work?
In the first part of our series, we'll explore two Hotwire methods to make modals accessible in your Rails application.
There are many ways to code graphics for the web. You can create art with CSS. You can code an SVG image as part of an HTML file. Or you can generate graphics from JavaScript using the Canvas API. In this article, we'll explore how to use JavaScript ...
Master the most commonly used HTML tags with this comprehensive cheatsheet. This comprehensive HTML cheatsheet covers the most commonly used HTML tags you need to know, from structural tags to text formatting tags to image and link tags. It's the perfect resource for web developers and beginners alike.
With the new CSS `linear()` easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what we can expect from `linear()`, including handy tools to get your hands on it today.
Hello Frondend developers, today i will show you how to create a circular element layout with css...
CSS is indispensable when we talk about web design and development. Basic selectors like classes (.)...
HTML and CSS may be the bedrock of 2D web design, but hidden within their virtual toolbox are the...
Time to define tooltips and share best practices. Explore tooltip types and its examples in our blog post coming from a prototyping tool.
AI Use Disclaimer: I wrote this post and then GPT-4 fixed my grammer and spelling
A collection of 10 cool and exciting front-end demos shared on CodePen during July 2023
Live Demo / Download -- In this tutorial, we will utilize the power of HTML canvas to...
TLDR: Demo is at , code is at . The Problem When building a website or app using HTML Canvas, it’s often a requirement to support a flood fill. That is, when the user chooses a colour and cli…
Chris James, London - Software Engineer
With over a 100 HTML attributes available, it's almost impossible to remember them all. While we are...
Custom Data Attributes in HTML: A Guide to data-* When developing web applications,...
The subject of canonical reference has been touched thousand times. But since some content writers...
CSS shorthand is a group of CSS properties that allow you to write multiple CSS properties in a...
Semantic HTML refers to the use of HTML elements that convey meaning beyond just the presentation of...
In this tutorial we’ll be using the HTML Geolocation API to display the current location of a user on...
Smashing Magazine — front-end, UX and design for front-end engineers and designers
SVG `` provides a way to define how an element moves along a motion path. In this article, Paul Scanlon shares an idea of how to use it by animating race cars in an infinite loop as easy as one-two-three!
John Mueller from Google advises placing JavaScript code underneath the HTML element to ensure that search engines can clearly understand your website.
A grid is like invisible glue that holds a design together. Even when elements are physically separated from each other, something invisible connects them together. Grids help designers to build better products by tying different design elements together to achieve effective hierarchy, alignment and consistency, with little effort. If executed properly, your designs will appear thoughtful and organized. In this article Nick Babich aims to give you a good understanding of grid systems, what they are, and how they can be applied to your design process. Understanding how to use grids will come from practical experience.
InnerHTML, innerText and textContent can each help to manipulate JavaScript code, but they contain subtle differences. Here’s what to know
Do you know where your site traffic comes from? Which of your campaigns drives the most traffic? Let's investigate UTM parameters best practices.
Using more specific HTML elements instead of the tag can help improve the readability,...
Ever wondered does HTML always have to be boring? No way! Here are 6 cool things you can do with HTML...
Were you left in tears while searching for cool HTML elements? Don’t worry! This article contains 7 elements to up your Coolness…
So you want an auto-playing looping video without sound? In popular vernacular this is the very meaning of the word GIF. The word has stuck around but the
What are canonical tags and why are they important? Read our simple guide to learn how to apply rel=canonical to your pages.
The HTML capture attribute is interesting because it allows you to activate a user's camera with just HTML. This article covers it in more depth.
In this article, Olushuyi explores a mental model that helps you decide between the `` and `` elements when writing documents. You will explore how grouping content affects accessibility and how you can make it all count for users.
How to use Fieldset and Legend to create an amazing border effect.
Should You Place a CTA Above the Fold? Experts in the design and digital marketing world have frequently claimed that if you want to get the best results with a CTA , you need to place it above the fold. Just look at this landing page from Lyft, for instance, you immediately see what you need to do…
The use of correct headings within your HTML pages is vital for visually impaired users. This article explains how to use them correctly.
Even with a lot of help from a good text editor, writing HTML can be a drag. Nice documents end up as tag-swamps with little bits of content perched atop hills of tabs. Editing them becomes a test of patience and we get sick at the thought of having to look at our once-loved text. It doesn't have to be like this! There's a lightweight, easygoing way to write HTML that's been around since the beginning of the web.
Found amazing resources which will save you tons of time as a web developer👇 1. 10015...
html-css-google-keep-complete by akhilboddu using parcel-bundler
Chapter 1 - What is responsive images? In this guide, we will learn everything related to...
Let’s make 2021... fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.
Specific link text sets sincere expectations and fulfills them, and is substantial enough to stand alone while remaining succinct.
Let’s make 2021... fast! An annual front-end performance checklist, with everything you need to know to create fast experiences on the web today, from metrics to tooling and CSS/JavaScript techniques.
A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering.
A guide for front-end developers to equip themselves with latest learning resources and development tools in front-end engineering.
That's all for now. We have covered images and captions in detail. In the next article, we'll move it up a gear, looking at how to use HTML to embed video and audio content in web pages.
To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.
A simple guide to HTML elements
Gapless, draggable grid layouts
A visual tool that provides naming-suggestions for CSS classes using BEM naming convention.
The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. How well does your browser support HTML5?
Exploring the relationship between JavaScript and the modern HTML DOM
The ultimate showcase of the best high-quality free HTML website templates on the internet. Free Download without registration!
A showcase of problems once hard or impossible to solve with CSS alone, now made trivially easy with Flexbox.
Guide to using HTTP headers for a better web. Learn about HTTPS, HSTS, CSP, Cacheable, immutable resources, serving WebP images, Feature-Policy and more.
One of the most important parts of any webpage's performance is the content and organization of the head element. We'll take a deep dive on some easy optimiz...
HTML tags tell the browser how to structure, and display the content for the web pages. Semantic HTML...
Elements in HTML have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
If you are using CSS for frontend web development, you may be interested in this article. The gist of...
I ran across this 30 seconds of code website the other day, and they have a CSS section which is really good! The first example snippet I looked at was this
The HTML element contains a set of elements that represent the permissible or recommended options available to choose from within other controls.
and tags are among of the most useful tags that HTML gives us. I'm...
Using for a menu may be an interesting idea, but perhaps not something to actually ship in production. See "More Details on "
Every element I use for the basic structure of a HTML document, with explanations why.
This free online tool lets you convert a HTML file into a YAML file. No need to download or install any software. Click to convert your file now.
Create a tooltip, with zero dependencies, great browser support and in less than 10 charaters to impliment!
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
Learn how to use the details and summary elements of HTML5 to create collapsable user interface widgets for your web applications.
Beyond using media queries and modern CSS layouts, like flexbox and grid, to create responsive websites, there are certain overlooked things we can do well to
htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext htmx is small (~14k min.gz’d), dependency-free, extendable, IE11 compatible & has reduced code base sizes by 67% when compared with react
You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right?
The front-end is everything involved with what the user sees, including design and some languages like HTML and CSS.
A tutorial about a HTML parser for Python 3. Learn about the basic of a library for easily parsing web pages and extracting useful information.
Client-side navigation is supposed to make your pages load faster. But when I tried it, it was actually slower! Why?
We share with you a collection of interesting Sass libraries that you should check out.