WP Tutorials

Web Design for Beginners | FREE COURSE

Web Design for Beginners | FREE COURSE

If you’re new to web design, this course on web design for beginners will teach you everything you need to know. ► Download creative digital assets with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description “How do I pick typefaces, how do I pick colors, what the heck is whitespace, and how do I position and size elements correctly?” These are exactly the kinds of questions which we’ll address in this beginner web design tutorial.

► Download creative digital assets with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description

In terms of fundamentals, you’ll learn about color, typography, spacing, sizing, imagery, and responsive web design. We’ll discuss the theory, best practices, and some tools you can use to make your job easier.

When it comes to common web design patterns, you’ll learn about the elements you can use to design a web page—things like headers, hero areas, buttons, image galleries, contact forms, and more.

For each of these patterns, we’ll look at the definition and some use cases, and then we’ll apply that knowledge to a demo project: a three-page portfolio website designed specifically for this course.

► Check out this link for the project brief and course assignments: https://bit.ly/37YMk4W
► Read the course notes (and more!) for Web Design for Beginners on Envato Tuts+: https://webdesign.tutsplus.com/articles/web-design-for-beginners-epic-free-course–cms-41118?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description
► Link to wireframe portfolio website with Figma: https://www.figma.com/file/Ak0JQMv65digqiASGnoLI0/Portfolio-Website?node-id=0%3A1

What You’ll Learn:

00:00:00 Welcome!
00:04:31 Course brief and assignment
00:05:48 UI design vs. UX design vs. web design
00:14:08 Learning to work with project briefs
00:19:59 Working with wireframes
00:28:08 Picking the right design tool
00:33:53 Color theory
00:51:36 Color harmonies, psychology and tools
01:03:11 Creating a color palette for our project
01:20:00 Let’s talk about typography
01:31:11 Creating the typography for our project
01:46:01 Spacing and sizing in web design
01:54:47 Using icons and images in web design
02:03:33 Definition and use cases for headers
02:11:39 Let’s design a header
02:28:16 Definition and use cases for hero areas
02:33:06 Let’s design a hero area
02:39:08 Definition and use cases for buttons
02:44:46 Let’s design some buttons
02:57:27 Definition and use cases for image galleries
03:01:38 Let’s design an image gallery
03:12:34 Definition and use cases for footers
03:17:55 Let’s design the footer
03:26:37 Definition and use cases for testimonials
03:31:48 Let’s design some testimonials
03:44:15 Definition and use cases for tabs
03:48:11 Let’s design some tabs
03:59:47 Definition and use cases for accordions
04:04:03 Let’s design an accordion
04:13:19 Definition and use cases for contact forms
04:18:17 Let’s design a contact form
04:32:49 What is a responsive website?
04:36:55 Making layout changes for tablets and phones
04:56:44 Making a component responsive
05:09:52 A quick word about prototyping
05:16:11 Next steps and key takeaways

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_B-ytMSuwbf8&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –


Comments (22)

  1. If you loved this video, make sure you check out Adi's new course—Motion Design for the Web: https://www.youtube.com/watch?v=vqXLGX0szIQ

  2. Is this video still worth to watch in 2024?

  3. Thank you may allah bless you

  4. Great course! Such well explanations and a soothing voice. Had to binge watch the whole thing, tyvm Adi!

  5. You f#$king legend!🎉

  6. Is it worth to study web development in 2024?
    There are so many tools like wix studios.
    So any one can make a website with in few hours with this.
    I'm new to it that's why I'm asking.

  7. ❤❤❤❤❤❤❤❤

  8. GOAT!! thankyou sm🙏🏻

  9. Did u cover everything

  10. I've been dabbling between UI and UX but never really got it, this video has helped previous research and eased my journey. I was dying for the BTS part tho 😅

  11. Use full video

  12. can i get a link to the completed work

  13. I normally don't comment on any video's but this one is defiantly an exception. This course is so informative and you give it in such a way that it is easy to follow along, so much useful information, so many new things i learned from this course. This really did kick-start my journey in Web Design. Thank you so much!

  14. This course is awesome! Great for beginners to Figma and UX/UI! Very clear and concise with a lot of stop points to go off and work on your own project with what you've just learned then come back to the next lesson. Highly recommended! Thank you, Adi!


  16. Why when I put a frame on auto layout everything goes out of place how do I stop that?

  17. This can help me in my country so that i can make money to help my family and the poor and myself , God bless you for giving huge free opportunity like this to the world . Thank you sir , I very much appreciate your sacrifice !!

  18. Thank you very much Adil for this wonderful lesson and the effort you put to create this video. I must say you are my role model a web design since I am a starting my journey of web design am soo happy I came across your video after I have done so much research on YouTube about web design courses and you have shown me the way where to start from. I believe one day I am going to be a professional web designer like you. Thank you for the best tutorial I must say I have really enjoy the lessons of web design. May God bless you brother Adi.

  19. Yes finally reached 3:30 hour bench mark 🙌🙌🧐🧐

  20. Thanks!! Adi. It's really great learning point of web design.

  21. w manz

  22. Nice video 🙏✅👍

Leave your thought here

Your email address will not be published. Required fields are marked *

Enable Notifications OK No thanks