I was recently asked for a list of my favorite web design tutorials, and... well... I got a little carried away. So, here's my ultimate web design resource list! Merry Christmas!
Wordpress: Though the basic software is free, this one does require you to purchase hosting. I personally find Wordpress cumbersome and annoying to code, but it can be extremely robust and versatile if you know what you're doing. There are many, many free and paid templates to choose from, which can give you a good starting ground for designing a site. (Or if you'd rather design a completely custom site, there are many people who specialize in coding Wordpress sites from scratch, which can be a solution if you feel like paying someone to code your designs into reality).
--> Some great WP themes can be purchased here: Studio Press (Genesis Framework) & Elegant Themes
Squarespace: This is my new favorite web development platform. They have many very attractive templates that you can start with, but they also all have CSS access, which makes each base template very versatile. This service does charge a basic hosting fee, but no more than you'd pay for a Wordpress-based site, and every template is mobile-responsive!
Pugly Pixel: I've taken the CSS: Pretty ecourse from her and found it extremely helpful. It's a video course that is extremely helpful for wrapping your head around basic CSS edits. She designs mainly on Blogger, but these skills would be helpful anywhere you can use CSS. (She has another very helpful tutorial here for creating a quick static site (no blog) on Blogger.)
Udemy (Instructor: Rob Cubbon): I have taken most of this guy's courses on Wordpress and found them pretty helpful. This site also has other courses of many types (and prices), so could be a useful and interesting place to look around.
A Beginner's Guide to HTML/CSS: This site is a pretty good resource if you're still trying to figure out the basics of web coding. It is pretty well organized and doesn't go into unnecessarily nerdy detail about anything.
Treehouse: I have not actually used this site, but they appear to have pretty good (paid) courses for web design. It starts at two weeks free, then $25 a month, so it may be worth it sign up for a month and cram as much into your brain as you can.
W3 School: This free site has a very thorough library of CSS coding snippets & tutorials. Also has other coding languages as well, for when you feel up to learning beyond the basics.
Canvas: This is an interesting site that has all kinds of university-level classes on it, most of them free.
Blog Designers Network: These cost money, but they do offer several classes on Wordpress developing specifically. I haven't personally taken any of these classes, but they look like they'd be good.
Harvest: I highly, highly recommend this service/software if you are going to be billing clients at all. It does have a small monthly fee, but it saves me soooooo much time. Besides having great client organization tools (including estimates and invoices that you can email to clients), they have a great time-tracking tool to help you keep track of how long your projects are going.
Mail Chimp / AWeber: These are the two most-used newsletter systems. If you are planning on building a web design business and want to maintain a mailing list, these are two great ways to construct and send out your newsletters.
Coffitivity: This site doesn't really have anything to do with design, but it does help make the atmosphere you design in much more conducive to thinking. It's basically a white-noise generator of coffee-shop sounds, which can be very helpful if you're trying to design in an environment of irritating and interrupting noises. They also now have a downloadable version that you can use on your computer without needing to be online.
Skitch: If you're on a Mac, I can't recommend the old version of this software enough. (And I highly recommend against the new version - it was recently bought out by Evernote and they completely changed all it's functionality). Skitch is a photo-annotating software, but what I mainly use it for is for quickly resizing/cropping photos. When I'm in a hurry and don't feel like opening up Photoshop, Skitch is my favorite way to quickly resize/crop a photo for a web design project.
CSS Sticky Footer: This tip is wonderful for basic site designs where you've got control of the CSS/HTML (ie: Blogger or some Wordpress templates). Makes the footer of your page stick to the bottom of the screen, no matter where you're looking on the page.
Make Any Widget Sticky: This is another helpful one for designing on Blogger, especially. Learn how to make any of the built-in widgets stick to the top of the page, even when you scroll down!
CSS (and other code) Snippets: This site has many interesting articles, but it also has this helpful section of code snippets so you can find quite a few helpful bits of code in one place without having to search all over the internet for them.
Cheat Sheet for Blogger CSS code snippets: I usually just use "Inspect Element" to figure out which bits I want to change on a Blogger design, but if you'd rather have some of the basic edits listed out for you, this page can be very helpful.
Font Awesome: I love this very unique webfont and use it mainly for creating social media icons, though they do have quite a few other symbols as well. You can install it on any site you're building and then style it with CSS to make icons that look any way you want. (I'm using them in my sidebar right now ----->). Best thing is, because each symbol is a font instead of an image file, they're vector graphics and will look good no matter how large you re-size them!
Font Squirrel: This is my go-to site for free, commercial-use fonts. Anything you find here, you are allowed to use in client designs, which makes it that much easier to find what you need and get back to work. (They also have a web-font generator that helps give you the code you need to use your desktop fonts on the web).
Google Fonts: This is a rather large web font library that has a lot of good, quick, free options for fonts to use in web projects.
Lost Type: This site has some very unique fonts that you won't find elsewhere... and they let you name your price. If you're looking for cutting-edge and unique typography, this is the place to go.
Lorem Pixel: Get randomly-generated images to use as placeholders in your designs. (Here's a similar site that uses randomly-generated kitten images instead).
Special ASCII Characters: If you happened to need to know the HTML code for character symbols like the em dash, this is the place to get that information.
147 Colors: I absolutely love this site and use it all the time. It has 147 CSS names for colors that you can use anywhere you are coding CSS. Instead of using a hex#, try using one of these color names instead!
Subtle Patterns: This is another free site that I use regularly. They have many, many subtle pattern tiles that work excellently for site backgrounds. I love adding these to give a bit of texture to a site that might be otherwise pretty plain and boring.
Etsy: There are many freelance designers (myself included) that sell great patterns, clip arts, and vector elements (many of them instantly downloadable as soon as you purchase them). While you do have to dig a little to find what you're looking for, this is a great place to find unique elements.
Adobe Kuler: This site feels a little dorky to me for some reason, but it can be a good place to send clients when you need them to choose a color scheme for your project. (Design Seeds is another similar site).
Download Free Vector: A rather dated-looking website, but if you dig, you can sometimes find some great free vector elements.
Vector Stock: This not-free vector library has some great options if you have a little money to spend. It's like a stock-photography site, only for vector art.
Background Labs: You can sometimes find some very fun backgrounds for web designs here. If you're looking for something bright and colorful, this is a good place to browse. They also have some interesting brick and wood textures, which can come in handy.
Graphic Design Blender: Great articles to read on the subject of building your graphic design business.
The Deep End Design: An interesting blog and podcast, dedicated to helping freelance designers understand the business a bit better.
Digital Point: A forum for web design and online marketing. Can be a great place to ask questions and/or learn something from other people's questions.
-----------
Update 1/8/2014:
Sorry guys, but I'm closing the comments on this post. I've been getting LOADS of spam on this particular blog post, for some reason, and I'm tired of moderating it. Thanks for understanding! :)
Basic Development Platforms
Blogger: This one is free and very versatile, since you have full access to both the HTML structure of the site, as well as the CSS style sheets. They have a WYSIWYG editor, as well as a custom CSS editor, making it extremely easy to customize a basic blog or site very quickly.Wordpress: Though the basic software is free, this one does require you to purchase hosting. I personally find Wordpress cumbersome and annoying to code, but it can be extremely robust and versatile if you know what you're doing. There are many, many free and paid templates to choose from, which can give you a good starting ground for designing a site. (Or if you'd rather design a completely custom site, there are many people who specialize in coding Wordpress sites from scratch, which can be a solution if you feel like paying someone to code your designs into reality).
--> Some great WP themes can be purchased here: Studio Press (Genesis Framework) & Elegant Themes
Squarespace: This is my new favorite web development platform. They have many very attractive templates that you can start with, but they also all have CSS access, which makes each base template very versatile. This service does charge a basic hosting fee, but no more than you'd pay for a Wordpress-based site, and every template is mobile-responsive!
Classes, Tutorials, Etc
Tuts Plus: A very extensive tutorial website for just about anything you'd want to know regarding design, coding, and web development. They have a lot of written tutorials and also quite a few video tutorials. (Click the drop-down arrow next to the site logo for a list of all the categories they offer).Pugly Pixel: I've taken the CSS: Pretty ecourse from her and found it extremely helpful. It's a video course that is extremely helpful for wrapping your head around basic CSS edits. She designs mainly on Blogger, but these skills would be helpful anywhere you can use CSS. (She has another very helpful tutorial here for creating a quick static site (no blog) on Blogger.)
Udemy (Instructor: Rob Cubbon): I have taken most of this guy's courses on Wordpress and found them pretty helpful. This site also has other courses of many types (and prices), so could be a useful and interesting place to look around.
A Beginner's Guide to HTML/CSS: This site is a pretty good resource if you're still trying to figure out the basics of web coding. It is pretty well organized and doesn't go into unnecessarily nerdy detail about anything.
Treehouse: I have not actually used this site, but they appear to have pretty good (paid) courses for web design. It starts at two weeks free, then $25 a month, so it may be worth it sign up for a month and cram as much into your brain as you can.
W3 School: This free site has a very thorough library of CSS coding snippets & tutorials. Also has other coding languages as well, for when you feel up to learning beyond the basics.
Canvas: This is an interesting site that has all kinds of university-level classes on it, most of them free.
Blog Designers Network: These cost money, but they do offer several classes on Wordpress developing specifically. I haven't personally taken any of these classes, but they look like they'd be good.
Software
Adobe Creative Cloud: Sign up with your student id and you can get a very sweet deal for the entire line of Adobe products. Best of all, you'll always have the latest version without having to re-buy them!Harvest: I highly, highly recommend this service/software if you are going to be billing clients at all. It does have a small monthly fee, but it saves me soooooo much time. Besides having great client organization tools (including estimates and invoices that you can email to clients), they have a great time-tracking tool to help you keep track of how long your projects are going.
Mail Chimp / AWeber: These are the two most-used newsletter systems. If you are planning on building a web design business and want to maintain a mailing list, these are two great ways to construct and send out your newsletters.
Coffitivity: This site doesn't really have anything to do with design, but it does help make the atmosphere you design in much more conducive to thinking. It's basically a white-noise generator of coffee-shop sounds, which can be very helpful if you're trying to design in an environment of irritating and interrupting noises. They also now have a downloadable version that you can use on your computer without needing to be online.
Skitch: If you're on a Mac, I can't recommend the old version of this software enough. (And I highly recommend against the new version - it was recently bought out by Evernote and they completely changed all it's functionality). Skitch is a photo-annotating software, but what I mainly use it for is for quickly resizing/cropping photos. When I'm in a hurry and don't feel like opening up Photoshop, Skitch is my favorite way to quickly resize/crop a photo for a web design project.
CSS Tricks
Removing padding from the Blogger headers: This is a great little trick for creating better looking Blogger blog designs. It's also just basic CSS, so the principle is good to know and can be applied in other web design areas as well.CSS Sticky Footer: This tip is wonderful for basic site designs where you've got control of the CSS/HTML (ie: Blogger or some Wordpress templates). Makes the footer of your page stick to the bottom of the screen, no matter where you're looking on the page.
Make Any Widget Sticky: This is another helpful one for designing on Blogger, especially. Learn how to make any of the built-in widgets stick to the top of the page, even when you scroll down!
CSS (and other code) Snippets: This site has many interesting articles, but it also has this helpful section of code snippets so you can find quite a few helpful bits of code in one place without having to search all over the internet for them.
Cheat Sheet for Blogger CSS code snippets: I usually just use "Inspect Element" to figure out which bits I want to change on a Blogger design, but if you'd rather have some of the basic edits listed out for you, this page can be very helpful.
Fonts & Font Helps
Flipping Typical: Hands down one of the best time-savers you'll ever use for typography. This site scans all the fonts you have installed on your computer and shows you an example of what your text will look like in every single one of those fonts. This is an excellent way to quickly browse your font library to choose the best fonts for the job you're working on.Font Awesome: I love this very unique webfont and use it mainly for creating social media icons, though they do have quite a few other symbols as well. You can install it on any site you're building and then style it with CSS to make icons that look any way you want. (I'm using them in my sidebar right now ----->). Best thing is, because each symbol is a font instead of an image file, they're vector graphics and will look good no matter how large you re-size them!
Font Squirrel: This is my go-to site for free, commercial-use fonts. Anything you find here, you are allowed to use in client designs, which makes it that much easier to find what you need and get back to work. (They also have a web-font generator that helps give you the code you need to use your desktop fonts on the web).
Google Fonts: This is a rather large web font library that has a lot of good, quick, free options for fonts to use in web projects.
Lost Type: This site has some very unique fonts that you won't find elsewhere... and they let you name your price. If you're looking for cutting-edge and unique typography, this is the place to go.
Other Web Design Helps
iPad Peek / iPhone Peek: See what your website looks like on a mobile browser. Great for when you're building a mobile-responsive site and want to see what it will look like on various devices.Lorem Pixel: Get randomly-generated images to use as placeholders in your designs. (Here's a similar site that uses randomly-generated kitten images instead).
Special ASCII Characters: If you happened to need to know the HTML code for character symbols like the em dash, this is the place to get that information.
Textures, Clip Art, & Other Resources
The Ink Nest: Some very cute and quirky clip art, vector frames, etc, all royalty-free, so great for client work!147 Colors: I absolutely love this site and use it all the time. It has 147 CSS names for colors that you can use anywhere you are coding CSS. Instead of using a hex#, try using one of these color names instead!
Subtle Patterns: This is another free site that I use regularly. They have many, many subtle pattern tiles that work excellently for site backgrounds. I love adding these to give a bit of texture to a site that might be otherwise pretty plain and boring.
Etsy: There are many freelance designers (myself included) that sell great patterns, clip arts, and vector elements (many of them instantly downloadable as soon as you purchase them). While you do have to dig a little to find what you're looking for, this is a great place to find unique elements.
Adobe Kuler: This site feels a little dorky to me for some reason, but it can be a good place to send clients when you need them to choose a color scheme for your project. (Design Seeds is another similar site).
Download Free Vector: A rather dated-looking website, but if you dig, you can sometimes find some great free vector elements.
Vector Stock: This not-free vector library has some great options if you have a little money to spend. It's like a stock-photography site, only for vector art.
Background Labs: You can sometimes find some very fun backgrounds for web designs here. If you're looking for something bright and colorful, this is a good place to browse. They also have some interesting brick and wood textures, which can come in handy.
Design Articles & Reading
A List Apart: This is a fascinating blog/site that talks all about design, web design, being in the business of web design, etc. They also occasionally have web design tutorials, which can be helpful.Graphic Design Blender: Great articles to read on the subject of building your graphic design business.
The Deep End Design: An interesting blog and podcast, dedicated to helping freelance designers understand the business a bit better.
Digital Point: A forum for web design and online marketing. Can be a great place to ask questions and/or learn something from other people's questions.
-----------
Update 1/8/2014:
Sorry guys, but I'm closing the comments on this post. I've been getting LOADS of spam on this particular blog post, for some reason, and I'm tired of moderating it. Thanks for understanding! :)
Comments