Categories / Tutorials

5 Useful Tutorials for Web Designers

Maryam Taheri March 31, 2021 · 3 min read

Whether it’s HTML5 or responsive design, learning how to create the website of your dreams, or the website of your client’s dreams, requires a lot of skill and a lot of practice. Though it feels bravely Wild West to attempt many coding projects or designs solo, it makes far more sense, and is far more successful, to watch a few tutorials before diving in. With so many options floating around the ‘net, choosing the best can be difficult. So, here are five of the best web design tutorials to help you cut through the code and hone a new skill with plenty of time leftover to make some unique icons.

Beginner’s Guide to Responsive Web Design

Screen Shot 2013-12-12 at 12.24.31 PM

The most exciting and essential thing happening with web design today is responsive design. It’s critical for your pages to work across all mobile platforms, from tablets to smart phones, so users on the go can browse them. If you’ve never tried creating a responsive website, this helpful responsive design tutorial will baby step you through the process, which has a pretty different set of techniques than you may be used to.

How to Create Flat Style Breadcrumb Links in CSS

Screen Shot 2013-12-12 at 12.26.03 PM

If CSS is your bread and butter you’ll definitely want to learn how to make these links. Flat design is big and getting bigger, whether it’s the graphics, logo or full website, thin is in. With this easy to follow breadcrumbs tutorial, you’ll no longer have to use the background image to create shapes. Check out the details at Line 25.

How to Make an HTML5 iPhone App

Screen Shot 2013-12-12 at 12.27.03 PM

Just about everyone has at least one iPhone app on the market, probably even your mother. So, if you haven’t yet thrown your name into the ring because you don’t have a handle on the process and you haven’t mastered Objective-C, this HTML5 app tutorial will have you primed to create the next Angry Birds, or at least Tetris, with just a few minutes reading a bit more practicing.

Thumbnail Hover Effects

Screen Shot 2013-12-12 at 12.28.07 PM

Do you love hover effects? So does everyone else playing with the Internet. You can learn how to create graphics that when moused over show more information or create a wrinkled or folded page effect. It’s a neat trick, and any client would love to showcase it. You can see all the steps at Tympanus, including watching a demo and downloading the source.

A Backwards Compatible HTML5 Portfolio

Screen Shot 2013-12-12 at 12.29.23 PM

Everyone needs a high quality website that advertises their skills, work history and important projects. A modern one-page portfolio site can utilize HTML5 even before the web is ready for it, if you make it backwards compatible. Watch the demo and download the files at InspectElement.

+++++++

The future of web design is happening right now, and in order to keep up with the pace you’ll have to spend some time researching new skills. Fortunately, online tutorials are plentiful and ready to help you discover all the amazing things that are possible with a little practice.

Lettering Worksheets
Getting started with hand lettering?
Free lettering worksheets

Download these worksheets and start practicing with simple instructions and tracing exercises.

Download now!
About the Author
Author
Maryam Taheri

I'm a recent graduate of the University of San Francisco with a degree in Biology and a passion for the creative arts. I love building websites, trying new things, and I have a passion for social media.

View More Posts
Go to My Shop
Related Articles
12 Comments
  • Thank You So Much! 9 years ago
  • Very useful. Thanks. 9 years ago
  • Yay! Thanks for sharing! These will be handy. 9 years ago
  • Some very cool stuff in there, thanks! 9 years ago
  • Love the backwards compatible HTML5 portfolio! It makes me want to start building sites again! 9 years ago
  • How to Make an HTML5 iPhone App... Just what I was looking for... Thanks for the great post, real handy. 9 years ago
  • Excellent and helpful post… 9 years ago
  • This is an awesome post. Really it's a very helpful tutorials to me. Thanks a lot for sharing such nice information. 9 years ago
  • Very useful blog post. 9 years ago
  • Check out new tool - Bootstrap 3.* responsive UI builder drag&drop http://builder.bootstraptor.com 9 years ago
  • This is great! Thanks for making things short and sweet. 8 years ago
  • Very good blog post. keep up the good work. 8 years ago