If you’re curious about learning web design, look no further. ln this post, we’ve compiled a list of free web design courses that cover all the areas associated with web design.
When it comes to learning web design, there’s a lot of areas to cover, so we’ve organized these free web design courses into a few different categories. These categories are organized around design, development, and then courses that cover both design and development. The final category includes resources over CSS animations, hover effects, and other fun things. These courses are a little more advanced.
Free Web Design Courses Focused on Design
Web design, as the name implies, requires design knowledge and skill. However, web design is different from print design.
There are different factors you have to consider and other parameters to work cohesively within when it comes to web design.
Web design is not just about creating something pretty or appealing. It’s more important to create something that fits the needs of the target audience.
Visual appeal is secondary to functionality.
If you are just starting out and know nothing to very little about web design, these free web design courses are a great place to start.
- 1. Web Development Basics of web design process and theory – This series is from 2014, but it covers the basics of web design and has some good things to say about how to structure a design.
- 2. How to design a killer home page (advanced web design) – Home pages should be a preview of what’s to come. This video is just one in a series by *Owen Video. It discusses the importance of home pages and the things you can do with home pages.
- 3. WordPress Web Design tutorial: designing your top level web page templates – Another video by *Owen Video, this one digs more into specific elements used to create web pages. He offers reasons behind why things are laid out the way they are.
- 4. Code Avengers Design – This program offers free web design courses specific to design and development. There are 20 lessons in web design and quizzes are provided for you to test your knowledge as you go.
-
5. Gymnasium Coding for Designers – The name says coding, but the beginning of this free web design course is all about design. It begins by explaining the difference between web and print design, which is incredibly useful for those starting out.
Just remember, when it comes to web design, don’t get too caught up in all the cool new trends, color schemes or font pairings. While there’s value behind things like typography and color, there are things more deserving of attention.
Here are five things to be mindful of while designing for the web:
- Alignment
- Spacing
- Consistency
- Intentionality
- Usability
Free Web Design Courses Focused on Development
Now let’s move on to the free web design courses over development.
HTML and CSS are the first two programming languages you will want to learn. Once you get comfortable with those, you can move on to JavaScript.
Go at your own pace with these courses. Explore them all and decide which course works best for you.
- 6. Learn CSS Layout – Learn CSS fundamentals specific to a layout.
- 7. Code School – Unfortunately this is only eight courses long, but it’s a good start. Games and themes are used to introduce users to web development.
- 8. HTML5 & CSS3 Fundamentals: Development for Absolute Beginners – With 21 episodes, this course covers the fundamentals of HTML5 and CSS3 programming.
- 9. Codecademy – This is a relatively popular course. Codecady offers free courses over multiple programming languages.
- 10. Alison Certified Training – This course is ideal for those wanting to create a website, but lack the skills to do so. The courses are free, but you do have the option to purchase your Diploma certificate, considering your scores qualify.
- 11. Code Avengers – Similar to Codecademy, this program offers free web courses over a number of programming languages. You have the option to break down the courses by which profession each language applies to.
Miscellaneous Free Web Design Courses
If you’re looking for all-inclusive courses that cover design and development, the following list has excellent resources.
- 12. Don’t Fear the Internet – This free web design course covers all areas of layout and typography to CSS and HTML. It is presented in slideshow form and wastes no time explaining each element.
- 13. WordPress Web Design tutorial: designing your top level web page templates – Another video by *Owen Video, this one digs more into specific elements used to create web pages. He offers reasons behind why things are laid out the way they are.
- 14. Web Design for Beginners – This course offers information about both design and development and even goes into which tool you should use and when in design.
Other Free Web Design Resources
The last set of resources is for more experienced designers. This is probably my favorite list because it includes explanations about animations and cool effects.
These are the types of details that should be used wisely and in moderation.
- 15. Deep dive CSS: font metrics, line-height, and vertical-align – Alignment is important and can be the difference between and polished site and an unfinished one. This article is about how to practice correct alignment and why.
- 16. DIY Web Animations: Promises + rAF + Transitions – Animations are a cool detail to add to a site, but I believe animations fall into the “everything in moderation” category. Don’t go overboard and create something that lacks intention and becomes annoying to users.
- 17. Simple Icon Hover Effects – This effect is pretty simple to do and comes from my favorite web design blog, Codrops.
- 18. WordPress CSS Tricks – CSS is a lot of fun once you get the hang of it because it’s amazing what CSS can do. This post explores just a few things you can create with CSS.
Start Your Web Design Journey Today
Maybe you haven’t noticed, but all these resources are free. Now all you need is time and initiative. Don’t be too hard on yourself. This is going to take some time and determination to learn but you absolutely can do it. Remember it is perfectly acceptable to make mistakes and get things wrong. It means you’re learning.
Good luck and start learning web design!
