Oct 03 2011

Designers Know Your Code: Web Design Tutorials

Advertisement

As almost any web designer worth their salt, and a large percentage of web developers will tell you, to be fully considered a web designer you have to have some background in code. Not to the depth that full on developers must, but it really is unfair to the rest of those working on a website with us if we do not have some knowledge in a handful of key areas. Which is where these web design tutorials come in.

In this post we have gathered a handful of useful tutorials from these various areas of code that designers should have their hands in. We have standard CSS and CSS3 tutorials, HTML5 and also Javascript tuts as well. A little something for all three of the main code branches that web designers need to always be improving their grasps on. We hope that you find these web design tutorials helpful in your next or current project!

CSS Tutorials

30 CSS Best Practices for Beginners – CSS is a language that is used by nearly every developer at some point. While it’s a language that we sometimes take for granted, it is powerful and has many nuances that can help (or hurt) our designs. Here are thirty of the best CSS practices that will keep you writing solid CSS and avoiding some costly mistakes.

6 Ways To Improve Your Web Typography – Typography on the web is anything but simple, and for many, it is a troubling mystery. Today, we’re going to review six ways that web designers and developers can improve the typography of the sites they create.

3 Easy and Fast CSS Techniques for Faux Image Cropping – This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS.

Build Multi-level Multi-column Multi Menus with pure CSS – works perfectly in most browsers, including IE 6, using absolutely no javascript

CSS Absolute Positioning: Create A Fancy Link Block – some tricks to create a fancy link block that make our links more attractive.

How to Create a Beautiful Dropdown Blogroll Without JavaScript – Dropdown menus are a great way of including a long list of links without cluttering up your page. The issue though is that they can be hard to style, but look quite ugly if you don’t. There isn’t a lot of flexibility with HTML’s select tags.

CSS3 Tutorials

CSS3 Minimalistic Navigation Menu – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

CSS3 Tutorial: Sleek Card Pockets using CSS Only – learn how to create web card pockets using some great new CSS3 techniques.

CSS3 Animated Vignette Buttons – This tutorial uses a patterned background and places vignette-style .pngs over the top which are animated using transition.

CSS3 Music Player Menu – This tutorial maximizes power of CSS3 to create a CSS Music Player Menu with a Photoshop-like effect.

3D Animation Using Pure CSS3 – This tutorial uses the perspective property to create the 3d effect and transform and transition, to animate it.

Create a Swish CSS3 Folded Ribbon in 5 Minutes – Take one line of markup, a couple of CSS3 rules (no images), and you can have yourself a swish folded ribbon effect in five minutes.

HTML5 Tutorials

HTML5 : The Basics – This tutorial introduces HTML5 and its basic features as well as explains the key differences from HTML 4.01 and XHTML 1.0 so you can start preparing yourself and your sites for the transition.

Have A Field Day With HTML5 Forms – Take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques.

Preparing for HTML5 with Semantic Class Names – A brief introduction to the new structural elements in the HTML 5 Working Draft, and how to use semantic class names in HTML 4.01 or XHTML 1.0 markup that correspond to the names of those structural elements.

Drag and Drop – This tutorial will teach you how to create a HTML 5 page that uses the new drag and drop feature.

How to Make an HTML5 iPhone App – This tutorial will show you how to create an offline HTML5 iPhone application, specifically, a tetris game.

Create Vector Masks Using the HTML5 Canvas – This tutorial looks at how to use the canvas tag and clipping to create images that aren’t so rectangular.

Javascript Tutorials

Javascript – An easy introduction – Javascript is used to add interactivity and functionality to a site. It has many uses, from detecting the viewers web browser to validating form input.

Nested Arrays in Javascript – Like most programming languages, JavaScript lets you create arrays inside arrays, known as nested arrays. In a nested array, the elements of one array are themselves arrays.

jQuery for Absolute Beginners – Fifteen video tutorials that teach you EXACTLY how to use the jQuery library. Start by downloading the library and eventually work up to creating an AJAX style-switcher.

iPhoto-like image resizing using Javascript – This tutorial uses the script.aculo.us slider control to capture input values, then converts those values into something useful.

Learn How To Detect Browser in Javascript – In this tutorial you will learn how to detect the browser in javascript so that you can then serve the suitable information.

Words Validation with Javascript – This tutorial will explain you how to filter out inappropriate words from being updated or sent from your website.

(rb)

About the Author

Angie Bowen is a freelance artist, designer and writer as well as a founding member and editor of the Arbenting Design Blog.

Homepage

Comments and Discussions
  • John, 03 October 2011

    really useful list especially for those that are building their site from scratch as I did :) no wordpress, all from zero. So you are right when you say that is great to know html, css and javascript beside the usual design skills.

  • Omegakenshin Himura, 04 October 2011

    Excelente!! :D
    Thx for this!!

  • Venditapiscine, 04 October 2011

    I have only now discovered this wonderful site! Wonderful for both content and for work on the css that is truly an inspiration!
    Thanks for this article!

  • Evan Skuthorpe, 04 October 2011

    great collection, thanks.

  • Daniel, 05 October 2011

    I’m glad I’ve found this site earlier this year,

    I have safely booked marked this page.

    Thank You, once again!

  • Saeed Neamati, 05 October 2011

    I hadn’t seen such a collection of educational resources and tutorials links before. This is really comprehensive and I think any designer knowing all these topics can claim himself/herself to be a professional designer.

    Thanks.

  • Rhonda, 05 October 2011

    Excellent group of tutorials. Thanks for posting this!

  • James George, 05 October 2011

    First of all, this might be long overdue, but great redesign for the site. It is very fresh and friendly. As for this post, you have a great selection of tools and tutorials to help further web-curious professionals along on their journey. Way to go!

    • Robert Bowen, 10 October 2011

      Thanks, James. We are proud of the redesign. Glad that the resources have proved useful!

      Noupe Editorial Team

  • Manoj, 07 October 2011

    Great list, will help the community:)

  • Yes, its really a very good collection of tutors. Thanks Daniel for indication this.

  • Robert Bowen, 10 October 2011

    We are very pleased to see that so many of you have found this post beneficial! Thanks for stopping in and letting us know it landed.

    Noupe Editorial Team

  • Orlando, 11 October 2011

    These are extremely valuable links! I have been on some of these sites before. Thanks for this!

  • felipe, 13 October 2011

    Great post.

    Thanks a lot !!

  • Zia, 23 October 2011

    That’s amazing!!

  • James Brocklehurst, 26 October 2011

    Thanks for featuring my vignette buttons!

  • Dean Marshall, 01 November 2011

    So much to learn, so little time!

    I’m really not sure one lifetime is going to be enough. As you can see I’m already a month behind with my reading ;)

  • Intimodonna, 15 January 2012

    Wau! Great collection! Thanks :)

  • Paul, 17 February 2012

    Nice collection of tutorials, will have to find some time to go through them thanks.

  • Abbigliamentodonna, 05 June 2012

    Thanks :) Amazing collection!

search form
 
image description image description