SEARCH
  Tutorials HTML and CSS Tutorials 13 Essential CSS Tutorials For Your Web Dev Toolkit

13 Essential CSS Tutorials For Your Web Dev Toolkit

AliceL Tutorials Oct 22, 2014

Sometimes you need a truly in-depth guide on a particular topic, which teaches you everything you could possibly need to know about it. There are other times, however, when you just need a quick "how to" on tackling the particular web coding task sitting in front of you. CSS is something you can always stand to learn a little more about, so we thought you'd enjoy a list of the 13 best CSS tutorials we could find online right now - there's something here for everyone.

Progress Buttons

CSS tutorials

You know those cool animated indicators on websites which show you how much progress you've made in a specific process? If you follow the information shared in this CSS tutorial you'll have these running on your own site in no time at all.

Styling Anchor Links

One of the quickest ways to see just how valuable CSS can be to web typography is learning how to add styles to your hyperlinks with small amounts of CSS code. This is an excellent tutorial which covers all aspects of augmenting boring hyperlinks with HTML5 and CSS3.

Responsive Tables

Building tables is HTML Basics 101, but creating tables which look good and support responsive design is a whole other beast. This tutorial teaches you how to create some fantastic looking tables, which can also do some neat things when a mouse changes their state.

Stunning Menus

If you're ready to move beyond just dressing up hyperlinks in your menu container, then you might want to check out just how far you can go with creating fluid, graphically-rich navigation menus with this nifty CSS guide. You won't believe that most of these results were achieved using just CSS.

Menu with Font Awesome

CSS tutorials

While we are talking about menus - make sure to check out this tutorial. You'll learn how to make a simple and stylish menu with the popular font Awesome.

Off-Canvas Menus

These are becoming all the rage in web design, so it's important that you know how to create off-canvas navigation menus, even if you never wind up actually implementing them in your designs. At least by creating them with CSS3 you should have far fewer browser computability issues, which is always a good thing.

Animated Sidecart

This is a novel twist on the idea of building a shopping cart that doesn't force users to continually go forwards and backwards between your store and their basket. This neat CSS snippet shows you how to create a shopping cart which pops out from the side of the screen when you need it to, and then vanishes again once you're done.

3D Buttons

CSS tutorials

The days of using images as buttons for your websites should be long behind you, or at least they will be now that you've found this guide to creating flat or 3D buttons using just CSS. Fewer images = faster page load times = happy visitors.

Dot Navigations

You've probably noticed this type of navigation system appearing on some of the larger e-commerce websites out there, and now you can learn how to do this too. You'll get to learn how to create several different styles of dot navigation, including how to add hover effects to them.

Lightsabers in CSS3

You don't need to know anything else about this tutorial except that it shows you how to create lightsaber checkboxes. 'nuff said really.

Neon Text

CSS tutorials

Anyone who has been around CSS for more than a few months knows just how much of an impact it has on web typography because it gives you precise control of how your text looks in any browser. What you might not have learned with CSS so far is how to create neon text effects, but this tutorial takes care of that!

Essential CSS Snippets

If you don't know what CSS snippets are - they are reusable blocks of code that you can drop into your own code whenever needed. This is a great way to solve common problems and save time. Here you'll find 3 of the most essential snippets - Clearfix, Media queries and CSS Resets.

Design Snippets to Wow

This tutorial has 3 CSS snippets that will help you make a Flat menu, Cool looking social footer and a Registration/login form.

We know there are literally millions of other CSS tutorials out there, but we felt the above were a great example of the kind of CSS coding help you can find online. If there are other CSS tutorials you're a big fan of, or that you've put together yourself, please let us know about them.

How? Well just drop a comment below this blog post to let us know what you have to say on the matter!

ABOUT THE AUTHOR

Alice Lagno

Hey all! I’m Alice, I’m a copywriter who is passionate about all things related to web design. Check out my G+ page

subscribe to newsletter