HTML And CSS Tutorials

August 30, 2017 | by Vladimir Stepura

Collection of free HTML and CSS tutorials. Updated weekly.

Demo Image: How to Create Beautiful HTML & CSS Presentations with WebSlides

Author

  • Ivaylo Gerchev
  • sitepoint.com
  • 15.08.2017

Made with

  • HTML
  • CSS
  • JavaScript (webslides.js)

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"

Demo Image: Minimal Page Transitions with jQuery & CSS

Author

  • Adam Marsden
  • adam-marsden.co.uk
  • 14.08.2017

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

Demo Image: Mastering General Sibling Selectors: Custom Tab Navigation

Author

  • Gabrielle Wee
  • webdesign.tutsplus.com
  • 14.08.2017

Made with

  • HTML
  • CSS/SCSS

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!"

Demo Image: More CSS Charts, with Grid & Custom Properties

Author

  • Miriam Suzanne
  • css-tricks.com
  • 11.08.2017

Made with

  • HTML
  • CSS

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

Demo Image: Frame by Frame Animation Tutorial with CSS and JavaScript

Author

  • Michael Romanov
  • sitepoint.com
  • 10.08.2017

Made with

  • HTML
  • CSS/Sass
  • JavaScript/Babel

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.

Demo Image: CSS Grid Layout and Comics (as Explained by Barry the Cat)

Author

  • Ian Yates
  • webdesign.tutsplus.com
  • 08.08.2017

Made with

  • HTML
  • CSS

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

Demo Image: Making responsive grid with Flexbox and LessJS

Author

  • Hadi Javeed
  • codeburst.io
  • 29.07.2017

Made with

  • HTML
  • CSS/LESS

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

Demo Image: Building a responsive timeline in CSS with Sass and BEM

Author

  • Luke Whitehouse
  • assortment.io
  • 27.07.2017

Made with

  • HTML
  • CSS/SCSS

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

Demo Image: How to Create an App Prototype Using CSS and JavaScript

Author

  • Dennis Gaebel
  • webdesign.tutsplus.com
  • 26.07.2017

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel

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

Demo Image: How to create a beautiful animated loader with nothing but CSS

Author

  • Julien Benchetrit
  • codeburst.io
  • 24.07.2017

Made with

  • HTML
  • CSS/SCSS

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

Demo Image: Building a 3D Rotating Carousel with CSS and JavaScript

Author

  • Giulio Mainardi
  • sitepoint.com
  • 18.07.2017

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel

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

Demo Image: Building Mega Menus with Flexbox

Author

  • Kalpesh Singh
  • sitepoint.com
  • 05.07.2017

Made with

  • HTML
  • CSS

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

Demo Image: Build a smokin’ hot coffee cup animation using CSS

Author

  • Rajesh DN
  • codingislove.com
  • 27.06.2017

Made with

  • HTML
  • CSS

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

Demo Image: Build a Minimalist HTML Card in just 53 lines of code (with Flexbox)

Author

  • Brandon Morelli
  • codeburst.io
  • 13.06.2017

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

Demo Image: Hamburger button effects

Author

  • Rajesh DN
  • codingislove.com
  • 31.05.2017

Made with

  • HTML
  • CSS

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

Demo Image: Full Page Background Video Styles

Author

  • Chris Coyier
  • mediatemple.net
  • 24.05.2017

Made with

  • HTML
  • CSS
  • JavaScript

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

Demo Image: Image hover caption sliding effect

Author

  • Rajesh DN
  • codingislove.com
  • 19.05.2017

Made with

  • HTML
  • CSS

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

Demo Image: A step-by-step guide to making pure-CSS tooltips

Author

  • Youssouf El Azizi
  • medium.freecodecamp.org
  • 03.05.2017

Made with

  • HTML
  • CSS

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

Demo Image: Building a Horizontal Timeline With CSS and JavaScript

Author

  • George Martsoukos
  • webdesign.tutsplus.com
  • 27.04.2017

Made with

  • HTML
  • CSS
  • JavaScript/Babel (hammer.js)

About the tutorial

Building a Horizontal Timeline With CSS and JavaScript

"Today, I’ll cover the process of creating the associated horizontal timeline."

Demo Image: Customize the Browser's Scrollbar with CSS

Author

  • Akinjide Bankole
  • scotch.io
  • 12.04.2017

Made with

  • HTML
  • CSS

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

Demo Image: Create a Product Page with Interactive Colors in HTML, CSS3 & jQuery

Author

  • Raul Dronca
  • designmodo.com
  • 03.04.2017

Made with

  • HTML
  • CSS
  • JavaScript (jQuery)

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

Demo Image: Mastering General Sibling Selectors: Custom Form Elements

Author

  • Gabrielle Wee
  • webdesign.tutsplus.com
  • 03.04.2017

Made with

  • HTML
  • CSS
  • JavaScript

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

Demo Image: CSS Triangles from stretch to end with examples

Author

  • Rajesh DN
  • codingislove.com
  • 02.04.2017

Made with

  • HTML
  • CSS

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

Demo Image: How to Build a Shifting Underline Hover Effect With CSS and JavaScript

Author

  • George Martsoukos
  • webdesign.tutsplus.com
  • 28.03.2017

Made with

  • HTML
  • CSS
  • JavaScript/Babel

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

Demo Image: Animating your hero header

Author

  • Donovan Hutchinson
  • cssanimation.rocks
  • 08.03.2017

Made with

  • HTML
  • CSS

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

Demo Image: How to Create a “Sticky” Floating Video on Page Scroll

Author

  • Louie Rootfield
  • webdesign.tutsplus.com
  • 07.03.2017

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

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!"

Demo Image: How to use Flexbox to create a modern CSS card design layout

Author

  • Abbey Fitzgerald
  • getflywheel.com
  • 21.02.2017

Made with

  • HTML
  • CSS

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

Demo Image: Create a HTML 5 and CSS 3 Mobile Navigation Bar

Author

  • Adam Bray
  • adam-bray.com
  • 18.02.2017

Made with

  • HTML
  • CSS
  • JavaScript (jQuery)

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

Demo Image: HTML 5 Vertical Navigation Menu

Author

  • Adam Bray
  • adam-bray.com
  • 17.02.2017

Made with

  • HTML
  • CSS

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

Demo Image: Easy HTML 5 & CSS 3 Navigation Menu

Author

  • Adam Bray
  • adam-bray.com
  • 17.02.2017

Made with

  • HTML
  • CSS

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!"

Demo Image: Creating Hamburger navigation bar using HTML and CSS

Author

  • Rajesh DN
  • codingislove.com
  • 17.02.2017

Made with

  • HTML
  • CSS

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

Demo Image: Button background sliding animation effect using HTML and CSS

Author

  • Rajesh DN
  • codingislove.com
  • 16.02.2017

Made with

  • HTML
  • CSS

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

Demo Image: Image Mask Effect

Author

  • Claudia Romano
  • codyhouse.co
  • 15.02.2017

Made with

  • HTML
  • CSS
  • JavaScript

About the tutorial

Image Mask Effect

"An immersive transition effect powered by image masks and CSS transforms."

Demo Image: Creating Non-Rectangular Headers

Author

  • Erik Kennedy
  • css-tricks.com
  • 14.02..2017

Made with

  • HTML
  • CSS
  • SVG

About the tutorial

Creating Non-Rectangular Headers

"We're talking about headers (or, more generally, any container element) that have a non-rectangular shape."

Demo Image: Four Elements of Truly Mobile-Friendly Responsive Menus

Author

  • Vail Joy
  • webdesignerwall.com
  • 01.02.2017

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

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

Demo Image: Create a Full-Screen Slider Using HTML, CSS3 and jQuery

Author

  • Raul Dronca
  • designmodo.com
  • 31.01.2017

Made with

  • HTML
  • CSS
  • JavaScript (jQuery.js)

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

Demo Image: Building a Morphing Hamburger Menu with CSS

Author

  • Luis Manuel
  • scotch.io
  • 24.01.2017

Made with

  • HTML
  • CSS/SCSS

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

Demo Image: How to Make Magic, Animated Tooltips With CSS

Author

  • Jase Smith
  • webdesign.tutsplus.com
  • 24.01.2017

Made with

  • HTML
  • CSS

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

Demo Image: Little Fragments: Creating a Simple Image Poster Effect

Author

  • Mary Lou
  • tympanus.net
  • 19.01.2017

Made with

  • HTML
  • CSS
  • JavaScript

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

Demo Image: A Clean Responsive Web Design Menu Tutorial with CSS, HTML, and jQuery

Author

  • Alex Caldwell
  • brolik.com
  • 19.01.2017

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js)

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

Demo Image: A Beginner’s Guide to Pure CSS Images

Author

  • Michael Mangialardi
  • medium.com
  • 7.01.2017

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

FreeFrontend © 2016 - 2017

Back to top