25 HTML5 & CSS3 Tutorials For Every Web Designer

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.

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

A simple yet functional CSS3 accordian style slider that uses no javascript at all. This tutorial is from the codeplayer website, if you haven’t heard of codeplayer now is your chance to check it out. The name pretty much sums it up, you can literally watch the code as it’s being written to fully understand the fundamentals of how it is written.

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.

6. CSS3 Tutorials and Courses

This is the same site as above just for CSS3 tutorials insted of HTML5. Enjoy.

7. Pure CSS Cheeseburger

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

8. Create a Drop-Down Navigation Menu with HTML5 and CSS3

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.

9. Animated Text Hover Effect – Using CSS3

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.

10. 3D Hover Effect for Thumbnails and Images

Another codeplayer tutorial, this awesome image that converts to a 3D canvas using css3. Please look at this one.

11. Progress Button Styles

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.

12. CSS3 Hidden Social Buttons

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.

13. How to Create Responsive Off-Screen Menus with CSS3

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.

14. Fluid Menu with Transparent Icons Built with HTML5 & CSS3

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.

15. Understanding HTML5 and CSS3 for Web Design

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.

16. HTML5 Tutorial: How To Build a HTML5 Product Page

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.

17. Convert Your WordPress Theme to HTML5

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.

18. How to Create an Audio Player in jQuery, HTML5 & CSS3

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.

19. Swatch Book with CSS3 and jQuery

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.

20. Making an Impressive Product Showcase with CSS3

A unique tutorial that shows you how to build a creative product showcase using css3 and transitions.

21. Annotation Overlay Effect with CSS3

This annotation overlay effect can be used for hundreds of different purposes. All built using CSS3.

22. CSS3 with jQuery Reverse Animation

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.

23. Image Accordion with CSS3

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.

24. An Awesome CSS3 Lightbox Gallery With jQuery

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.

25. Fluid CSS3 Slideshow with Parallax Effect

Last but not least we have a handy parallax slider built in CSS3 that you can use for pretty much anything.

Sign On Up..

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!