HTML5 & CSS3 has been around for a while now, but no matter how much you learn of the markup and styling languages there always seems to be more. Which isn’t necessarily a bad thing because it gives me a reason to find you the best HTML5 & CSS3 tutorials I can find.
I’m constantly brushing up on my skills and looking for innovative ways to implement the languages into working projects and every designer/developer should be doing exactly the same thing. It never hurts to learn and it’s also super easy.
Today I’ve compiled 25 HTML5 & CSS3 tutorials for your own personal development, it’s 25 more, because a couple years ago I wrote 20 Fresh HTML5 & CSS3 Menu Tutorials and I also wrote 20 Useful and Awesome HTML5 Tutorials.
Both of these articles have gotten a lot of attention and can be very useful for up and coming freelance designers/developers like yourself.
1. Beginner’s Guide To: Building HTML5/CSS3 Webpages
The title says it all and this is an excellent place to start learning it goes deeply into the markup language and provides huge value for beginners.
2. HTML5 & CSS3 Fundamentals: Development for Absolute Beginners
These videos focus on the fundamentals of HTML5 & CSS3. It’s an older video series, but covers all the essentials with HTML5 & CSS3.
3. Fullscreen Pageflip Layout – Build with HTML5 & CSS3
This is an amazing tutorial that shows you how to build a fullscreen pageflip layout using both HTML5 & CSS3.
4. Make an accordian style slider in CSS3
5. HTML 5 Tutorials and Courses
There is no point in buying a HTML 5 or CSS3 course. Sure you can buy the code if you’re looking to save time, but when it comes to learning there are just too many free resources out there not to take advantage of. This HTML 5 tutorial is literally a list compiled by fellow programmers of a whole wack of html5 tutorials.
This is the same site as above just for CSS3 tutorials insted of HTML5. Enjoy.
A very short tutorial, but see how css3 is used to create this pure CSS cheeseburger. I’m not going to lie, I didn’t choose this tutorial because it was really informative, I chose it because it’s a cheeseburger in css!!
Once you’ve successfully built a complex drop down navigation using nothing but cold hard coding then you have fully blossomed from a caterpillar to a butterfly 😉 Meaning you are ready to start building websites. When I first started developing websites the hardest part for me was writing the code for a navigation menu. This tutorial shows you exactly how to do that and uses nothing but html & css.
This is a simple animated text hover effect tutorial using css3. It utilizes some simple html markup and some css3 transitions. Its a codeplayer tutorial so analyze the code and walkthrough to see how this css3 effect works.
Another codeplayer tutorial, this awesome image that converts to a 3D canvas using css3. Please look at this one.
Tympanus.net a.k.a co drops is one of my favourite resources for css3/html5 tutorials. This tutorial is a set of flat 3D progress buttons that act as a progress indicator.
This tutorial is more for the advanced user, but any beginner is more than welcome to explore it. It looks complicated but that’s because there are a lot of versions of the buttons so make sure you read through the article to fully understand the demo.
In this tutorial you’ll learn how to create some slide and push menus using css3. If you don’t know what that is, you’ll have to check out that demo.
This is one of my favourite looking menus, it’s a demo of a fluid menu with transparent icons and it looks great. Be sure to check out this demo and decypher the code for your own development.
Understanding how HTML5 and CSS3 work for web design is extremely valuable. Whether you’re a beginner or an expert it never hurts to brush up on the fundamentals. This tutorial by covers exactly that.
I love product pages and ecommerce so this tutorial really stood out for me. In this tutorial you’ll learn how to create a simple product page using HTML5 and a little bit of jquery.
For all you WordPress lovers which is pretty much everyone. This tutorial here teaches you how to convert your wordpress theme to be HTML5 compatible.
Another Designmodo tutorial this time using some of the key features to HTML5. This tutorial covers how to create an audio player using both html5 & css3. This is definitely a more advanced tutorial.
This is a one of a kind tutorial. A tutorial about how to create a swatch book like component that let’s you open and rotate the single swatches revealing some details.
A unique tutorial that shows you how to build a creative product showcase using css3 and transitions.
This annotation overlay effect can be used for hundreds of different purposes. All built using CSS3.
First reverse animation I’ve ever seen, but it’s built with css3 and jquery and this tutorial will show you how to create it.
Codrops is one of my favourite CSS3 resouces for tutorials, sign up for their updates and check out their amazing tutorials. This here is an image accordion with CSS3.
Create this amazing CSS Lightbox gallery with jQuery, this gallery is also a drag and drop gallery which you modify the placement of the images. See the demo for the full experience.
Last but not least we have a handy parallax slider built in CSS3 that you can use for pretty much anything.
Did you enjoy this article? Please consider signing up to our newsletter by entering your email address in the form below. You will receive our recent blog updates, our exclusives, top resources and latest web trends all in your inbox. We value your privacy and will not re-distribute your email address. Plus no spam!