The best designers never stop learning. Only the mediocre ones think they know it all, that there’s nothing else to learn. But you don’t don’t want to be a mediocre designer, do you? That’s right – you want to be a great designer. One that’s always hungry to learn a new technique to make your first web and visual design project slick, cool, user-friendly, and just plain awesome. There is only thing holding you back – How to do it all!
Now, there are no doubt hundreds of thousands of video tutorials for web designers out there. So for the sake of focus, these video tutorials are aimed towards designers who are looking to not only get started in web design but also want to eventually build the best.
Without further ado, here are 25 kick ass web design video tutorials:
This short video introduces you to CSS, showing you what it can do, how to use it and explains why you should use it.
Video URL →
This is a four part video series that delves deeper into CSS and HTML. Here are the links to the second, third and fourth part:
• HTML & CSS – Lesson 1 (Tutorials For Beginners) →
• HTML & CSS – Lesson 2 (Create Basic Layout) →
• HTML & CSS Lesson 3 (Adding Divisions) →
• HTML & CSS Lesson 4 (Banner/CSS Class) →
This is an indepth 40 minute video that will take you through the entire process of coding and implementing your first site.
Video URL →
Video URL →
What is a CMS describes the uses of content management systems, outlining examples such as Joomla, Magento, Drupal and WordPress, and explains its uses when creating a website.
Video URL →
This is a six part video series explaining how to use and design for Joomla.
Video URL →
If you are are new to Drupal then this video series is just for you.The 15 lessons linked below provide a step-by-step guide to installing, configuring and creating content with Drupal 6:
• Lesson 1 – Installing Drupal On A Localhost →
• Lesson 2 – Basic Site Configuration →
• Lesson 3 – Installing A Contributed Theme →
• Lesson 4 – Adding Important Contributed Modules →
• Lesson 5 – Creating Content On Your Site →
• Lesson 6 – Categorizing Content On Your Site →
• Lesson 7 – Embedding Rich Media In Your Posts →
• Lesson 8 – Customizing The Front Page Of Your Site →
• Lesson 9 – Moving A Localhost Site To The Web →
• Lesson 10 – Site Administration Basics →
• Lesson 11 – Configuring Comments And A Contact Form →
• Lesson 12 – Socializing Content With Ratings And Sharing Links →
• Lesson 13 – Configuring User Profiles →
• Lesson 14 – Multi User Blogging Setup →
• Lesson 15 – Adding Community Features To Your Site →
This is a seven part video series that will show you everything from installing to designing your first WordPress theme.
• WordPress for Designers: Day 1 – Installation →
• WordPress for Designers: Day 2 – The Admin Panel →
• WordPress for Designers: Day 3 -Creating a Theme From Scratch →
• WordPress for Designers: Day 4 – The WordPress Loop →
• WordPress for Designers: Day 5 – The Sidebar →
• WordPress for Designers: Day 6 – WordPress Template Hierarchy →
• WordPress for Designers: Day 7 – Widgetize →
Essential HTML5 Features to Use
A tutorial on which essential HTML5 features you should be using right now, which will result in simpler and cleaner code for you.
Create Rounded Corners in CSS3
A web coding tutorial that looks into CSS3′s rounded corners feature and shows how to use “border-radius” to create rounded corners that show up in Firefox, Chrome, and Safari, and any other modern browsers.
How to Work with @font-face
Create Box Shadows in CSS3
A Dreamweaver tutorial on how to create box shadows for your website elements using a simple CSS3 line of code.
Make Horizontal Drop Down Menus in CSS (Part 1 of 2)
The first part of a Dreamweaver tutorial on how to create horizontal drop down menus using CSS – in a way that the drop down menu is only visible when the mouse cursor hovers over the parent menu item.
Make Tabbed Navigation Menus in CSS (Part 1 of 2)
The first part of a Dreamweaver tutorial on how to create horizontal tabbed navigation menus using CSS and make it fully customizable.
Graphics & Images
This video will teach you how to make a basic web design with Photoshop layers (and slices) in less than 5 minutes.
Video URL →
Slice and Export a Website Layout
A tutorial on how to take a Photoshop-created website layout template, slice it into individual pieces, and export it into an HTML file ready for the web.
Convert Photoshop to HTML (Part 1 of 2)
The first part of another tutorial on how to take a Photoshop-created website layout template and convert it into an HTML file using a table-based approach.
Convert Photoshop to HTML (Part 2 of 2)
The second part of another tutorial on how to take a Photoshop-created website layout template and convert it into an HTML file using a table-based approach.
Make Web 2.0-style Icons
A Photoshop tutorial on how to make Web 2.0-style icons – complete with smooth gradients, highlights, shadows, and reflections.
Convert a JPEG Logo to a Vector
An Illustrator tutorial on how to convert basic JPEG logo images into vector shapes.
Create 3D Text
A Photoshop tutorial on how to create 3D text, including adding color and getting the popping-out effect that makes each letter look like a shaped block.
Create Simple Reflections and Shadows
An Illustrator tutorial on how to create simple image reflections and shadows by using opacity masks, gradients, and transparency.
An Illustrator tutorial on how to add texture to images by using opacity masks.
Create Glossy Shiny Reflective Logos
An Illustrator tutorial on how to create a vector logo with a shiny, glossy, and reflective highlight effect.
Create a Navigation Bar
A Photoshop tutorial on how to create a navigation menu bar for a blog or website.
Create a Image Gallery Frame
A Photoshop tutorial on how to create a reusable frame that you can use with images – perfect for placing in an online portfolio.
What Are Your Most Useful Video Tutorials?
Over to you: what are your favorite video tutorials for getting started in web design? Any glaring omissions that should be on this list? Feel free to share your useful additions in the comments section below.