Menu
iThemes
WordPress Backup, Security & Maintenance
  • WordPress Hosting
  • BackupBuddy
  • Security
  • Sync
  • Agency Bundle
  • Plugin Suite
  • Training
    • WordPress Gutenberg Help
    • WordPress Tutorials
    • Free Upcoming Webinars
  • Blog
  • Contact
  • Log In
WordPress News and Updates from iThemes
Categories
  • Product Updates
  • WordPress Backup
  • WordPress Block Editor
  • WordPress Ecommerce
  • WordPress for Freelancers
  • WordPress Maintenance
  • WordPress Security
  • WordPress Training Webinars
  • WordPress Tutorials
  • WProsper

18 Free Web Design Courses to Learn Web Design

Written by Saylor Bullington on March 8, 2017

Last Updated on May 20, 2020

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.

Free Web Design Courses

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.
Want to learn how to use Canva? Take Our Canva Email Course
Join for free

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!

how to be a web designer

Share via:

  • Facebook
  • Twitter
  • LinkedIn
  • More
Other related posts

Customer Appreciation: 11 Gratitude Approaches
wordpress deals
The Best Black Friday & Cyber Monday WordPress Deals You Need

WordPress News Roundup – September 2020
Coding PHP
What is PHP and Why it is Used?

Respond

Click here to cancel reply.

Get updates on new themes & plugins plus special discounts

About iThemes

  • #WProsper
  • Friends of iThemes
  • Contact Us
  • Website Accessibility Statement
  • Sitemap

Resources

  • Blog
  • Documentation
  • WordPress Tutorials
  • Free WordPress Ebooks
  • Free Webinar Library
  • Free Upcoming Webinars
  • iThemes Training
  • Affiliates

Customers

  • Member Panel Login
  • Support
  • FAQs
  • Upgrade Policy
  • Licensing
  • Terms and Conditions
  • Refund Policy

Top Products

  • BackupBuddy
  • iThemes Security Pro
  • iThemes Sync
  • Restrict Content Pro
  • WPComplete
  • Agency Bundle
  • WordPress Hosting
  • WordPress Plugins
  • Content Upgrades
  • WordPress Landing Page Plugin
  • BackupBuddy Stash

iThemes Media LLC Copyright © 2021 All rights reserved | Privacy Policy

  • Liquid Web Family of Brands
  • Facebook
  • Twitter
  • LinkedIn
  • More Networks
Share via
Facebook
Twitter
LinkedIn
Mix
Pinterest
Tumblr
Skype
Buffer
Pocket
VKontakte
Xing
Reddit
Flipboard
MySpace
Delicious
Amazon
Digg
Evernote
Blogger
LiveJournal
Baidu
NewsVine
Yummly
Yahoo
WhatsApp
Viber
SMS
Telegram
Facebook Messenger
Like
Email
Print
Copy Link
Copy link
CopyCopied

Learn How to Use Canva Today!

We're big users of Canva here at iThemes. So much so, we created a quick 5 part email course for you to help get started using it in your digital marketing efforts.
No spam. Unsubscribe anytime.