Collection of free HTML and CSS tutorials. Updated weekly.
About the tutorial
How to Create Beautiful HTML & CSS Presentations with WebSlides
"Particularly on the web, presentations come in handy on many occasions, and there are loads of tools at your disposal to create some nifty ones. Today, I’ll introduce you to WebSlides — a small and compact library with a nice set of ready-to-use components, which you can leverage to build well-crafted and attractive web presentations"
Links
Made with
- HTML
- CSS
- JavaScript (jQuery.js)
About the tutorial
Minimal Page Transitions with jQuery & CSS
"Abrupt changes in an interface are hard for users to process. The best way to ease a user out of the current page they are on and into the new page they’re going to is by using a transition and in this tutorial I’m going to show you how to do exactly that."
About the tutorial
Mastering General Sibling Selectors: Custom Tab Navigation
"This tutorial will cover navigation elements using links and radio inputs. In addition to CSS selectors, the will-change property, and input states from the previous tutorial, we’ll also cover a border hack, Sass for loops, calc(), and accessibility!"
About the tutorial
More CSS Charts, With Grid & Custom Properties
"I loved Robin's recent post, experimenting with CSS Grid for bar-charts. I've actually been using a similar approach on a client project, building a day-planner with CSS Grid. It's a different use-case, but the same basic technique: using grid layouts to visualize data."
About the tutorial
Frame by Frame Animation Tutorial with CSS and JavaScript
This tutorial shows you the various ways you can create this type of animation with HTML, CSS, and JavaScript, while improving on each iteration to achieve the best result for your project.
About the tutorial
CSS Grid Layout and Comics (as Explained by Barry the Cat)
"It turns out that CSS Grid is pretty good at laying out online comics, especially if you want your comics to be flexible. In this tutorial we’ll use Barry the cat to demonstrate how to build a responsive comic."
About the tutorial
Making responsive grid with Flexbox and LessJS
"In this article, I will cover the concepts to create your own configurable Grid framework based on FlexBox."
About the tutorial
Building a responsive timeline in CSS with Sass and BEM
"Timeline's are funny components to build, especially when we're thinking responsively. In this post we'll look at how we might build such a component using the latest CSS techniques including pre-processing your CSS with Sass and using the BEM naming convention for your class names."
About the tutorial
How to Create an App Prototype Using CSS and JavaScript
"Animation really is one of the best features to hit CSS in a long time. After all, as we’ve come to realise, motion can enhance user experience and encourage actions where static contexts fall short. In this tutorial we’ll build a prototype for an app using CSS animations and a touch of JavaScript."
About the tutorial
How to create a beautiful animated loader with nothing but CSS
"tl;dr An example of how creative you can be with pseudo-elements and keyframe animations. Used in this case to build a loader animation without the need to fetch any JS or images."
About the tutorial
Building a 3D Rotating Carousel with CSS and JavaScript
"To illustrate the setup of the CSS 3D transforms, I’ll show you a CSS-only version of the component. Then, I’ll show you how to enhance it with JavaScript, developing a simple component script."
About the tutorial
Building Mega Menus with Flexbox
"In this article I will make use of this layout model to build a mega navigation menu and in the process you’ll see how simple it is to build and extend user interface components with flexbox."
About the tutorial
Build a smokin’ hot coffee cup animation using CSS
"In this article, I came up with something very cool stuff — Smoking hot coffee cup animation. I tried to create the smoke animation effect using box-shadow and CSS3 Keyframe Animations without using any other Animation frameworks. It’s really very simple to create the Smoky Cup."
Links
Made with
- HTML
- CSS
About the tutorial
Build a Minimalist HTML Card in just 53 lines of code (with Flexbox)
"Flexbox provides a more efficient way of laying out, aligning, and distributing items in containers. Today I’ll be showing you a practical Flexbox example: Learn How to make minimalist, elegant, HTML cards in just 53 lines of code."
About the tutorial
Hamburger button effects
"In this article, I’m going to show you guys how to create a few different kinds of Hamburger button effects. Just have a look at the above gif, so here we are going to explore these different kinds of Hamburger button effects in this article."
About the tutorial
Full Page Background Video Styles
"I bet you’ve seen it. A video background that takes up the entire browser window. There is text on top of it (hence, “background”), which is an interesting effect that you don’t see every day. The biggest reason you don’t, probably, is that you can’t set a movie file as the background-image in CSS. You’ll have to do some layout trickery to get it done."
About the tutorial
Image hover caption sliding effect
"In this article, we are going to explore the — Image hover caption sliding effect. and I’m going to show, how to create the different kinds of Image hover sliding caption effects."
About the tutorial
A step-by-step guide to making pure-CSS tooltips
"This article is a step-by-step tutorial that will help you understand these CSS tricks so you can make pure-CSS tooltips, too. By the end of this post, you’ll know how to add a tooltip to any element by adding a simple attribute."
About the tutorial
Building a Horizontal Timeline With CSS and JavaScript
"Today, I’ll cover the process of creating the associated horizontal timeline."
About the tutorial
Customize the Browser's Scrollbar with CSS
"Custom scrollbars are getting popular, and you might have come across websites that have unique scrollbars, making the sites feel and look different. There are basically a few ways to implement a custom scrollbar. In this tutorial we will be using CSS3, which is the most straightforward way."
About the tutorial
Create a Product Page with Interactive Colors in HTML, CSS3 & jQuery
"In this tutorial, we are going to create a website product page using HTML, CSS3 and jQuery. You can use it for product presentations on your shop website."
About the tutorial
Mastering General Sibling Selectors: Custom Form Elements
"One of the most powerful and underutilized CSS selectors is the general sibling combinator: ~. In the coming tutorials I will go over different ways to use ~ to create components that are not only visually appealing, but also functional and useful. This tutorial will cover form elements; radio, checkbox, and regular inputs."
About the tutorial
CSS Triangles from stretch to end with examples
"Triangles — Creating the different shapes of triangles using HTML and CSS is very simple and we can incorporate the triangles in websites in many ways."
About the tutorial
How to Build a Shifting Underline Hover Effect With CSS and JavaScript
"In today’s tutorial, we’re going to use a little bit of CSS and JavaScript to create a fancy menu hover effect. It’s not a complicated end result, yet building it will be a great opportunity to practice our front-end skills."
About the tutorial
Animating your hero header
"If you’ve ever arrived on a website and been greeted by a large image or video, and some titles on top, then you’ve encountered the “Hero Header”. It’s a popular way to introduce a website, and can be a great opportunity to help people quickly understand what it is your site does."
About the tutorial
How to Create a "Sticky" Floating Video on Page Scroll
"If you have found yourself browsing media websites recently–video streaming services, news websites, Facebook and so on–you might have noticed a trend regarding their video players. If we scroll down a page where a video is present, it will float and shrink the player, sticking it to the side of the viewport instead of losing it from view. This allows the users to keep an eye on the video, whilst looking through the other content at the same time. In this tutorial I’m going to show you how to recreate the same experience–so without further ado, let’s get started!"
About the tutorial
How to use Flexbox to create a modern CSS card design layout
"We will create a Flexbox card layout that has a row of four horizontal containers on larger screens, two on medium, and single column for small devices."
About the tutorial
Create a HTML 5 and CSS 3 Mobile Navigation Bar
"Responsive and mobile friendly menus are a must in web design nowadays. This tutorial will take you through exactly how to create one."
About the tutorial
HTML5 Vertical Navigation Menu
"There are two different types of navigation menus in HTML, vertical, and horizontal. This tutorial will take you through creating a stylish CSS3 vertical menu. I’ll show you how to create a basic menu, all the way through to an animated sliding menu – no Javascript needed."
About the tutorial
Easy HTML 5 & CSS 3 Navigation Menu
"With HTML 5 and CSS 3 now standard in most modern browsers, web developers can create interactive, attractive menus with ease. A few years ago we would be looking at using Javascript for many of the modern features, not now!"
About the tutorial
Creating Hamburger navigation bar using HTML and CSS
"Hamburger navigation bar is very useful in a mobile version of the websites, which acts has an alternative menu for a mobile version and the interface of Hamburger navigation bar will be great which avoids messy navigation bar in a mobile version."
About the tutorial
Button background sliding animation effect using HTML and CSS
"Today in this tutorial I’m going to explain you guys, how to create an amazing Button background sliding animation effect which is quite interesting animation effect and this is the animation effect, which everyone wants to learn."
About the tutorial
Image Mask Effect
"An immersive transition effect powered by image masks and CSS transforms."
About the tutorial
Creating Non-Rectangular Headers
"We're talking about headers (or, more generally, any container element) that have a non-rectangular shape."
About the tutorial
Four Elements of Truly Mobile-Friendly Responsive Menus
"There are hundreds of ways to create responsive navigation, limited only by your creativity and the boundaries of what CSS can accomplish. Good responsive navigation is a little harder – a responsive menu must become a mobile menu, adhering to the needs and rules of touch-driven devices. Mobile design is rapidly changing, and so the techniques also evolve. In this tutorial you’ll learn which qualities mobile-friendly responsive menus absolutely need nowadays and how you can solve some common problems."
About the tutorial
Create a Full-Screen Slider Using HTML, CSS3 and jQuery
"In this tutorial, we are going to create a full-screen slider using HTML, CSS3 and jQuery. You can us it for product presentations on your shop website."
About the tutorial
Building a Morphing Hamburger Menu with CSS
"In this tutorial I'll explain the entire process of how to do it with CSS only, without using a single line of JavaScript. So, we will be seeing some CSS (and SCSS) tricks that will allow us to achieve an animation almost as smooth as the animated gif."
About the tutorial
How to Make Magic, Animated Tooltips With CSS
"Tooltips are a great way to enhance a UI when your users need some extra context for that fancy icon, or when they want some reassurance for clicking a button, or maybe an Easter Egg caption to go along with an image. Let’s make some animated tooltips, right now, with nothing but HTML and CSS."
About the tutorial
Little Fragments: Creating a Simple Image Poster Effect
"A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path."
About the tutorial
A Clean Responsive Web Design Menu Tutorial with CSS, HTML and jQuery
"In this article, we’ll break down Brolik’s new responsive web design menu and explain how the code works line by line."
Links
Made with
- HTML
- CSS
About the tutorial
A Beginner’s Guide to Pure CSS Images
"What you’re getting into: 17 min read. A detailed explanation of how to creating pure CSS images. We will start with an overview and work our way to create a Koala in pure CSS."