► Learn more web design! Subscribe to the Envato Tuts+ YouTube channel for daily creative courses and tutorials! If you’re new to web design, this course on web design for beginners will teach you everything you need to know. “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 – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Website Design vs Web Development|What's right for you? If y...
Web Design: The Complete guide to getting started in 2022
Intro To Responsive Web Design - HTML & CSS Tutorial This tu...
Web Design For Beginners - How to Start Make Money Building Websites🔥
How To Create A SUCCESSFUL Web Design Business with WordPress & Make $100K A Year
Figma tutorial for Beginners: Complete Website from Start to Finish
Building My Personal Website • Design & Code With Me Ep. 1 | Day Of A Software Engineer & Designer
Specialist Web Design Process Explained in 5 mins
TOP 5 WEBSITES EVERY WEB DESIGNER SHOULD VISIT: Mind-blowing...
Barashada Web design | HTML iyo CSS
Using AI to Create a SICK Web Design
Top web design trends in 2022
28 Replies to “Web Design for Beginners | FREE COURSE”
What’s the name of the app you used for the wireframe?
Really impressive, very good job.
Thank you! Cheers!
Thank you very much!
This is really the best of the best videos on YouTube in order to learn Web Development………. awesome!!
Hats off to you!!
Keep up the good work!!
Your presentation quality is very good! Great video for beginners!! Thanks a lot man 🔥❤️
Glad you liked it!
Thank you Adi for this! I’ve learned a lot, this is actually the first step of my journey so there are lots of things I didn’t understand and by that I investigated other courses you had for those specific topics! so It was great! I’ll see what I can do from here although it’ll be lots of hours to study!
That’s great to hear. Best of luck moving forward 🙂
Thanks a lot Adi for sharing this tut for free.
U too fast u need to take the procedures slowly please
Only 1h 30 min into the course but have to say it’s awesome, very in detail. Totaly recommended!
As a junior web dev with no design knowledge nor visual sensibility this is great! I want to improve at design to make great looking personal projects for my portfolio and so on, and I feel like I can finally come up with great stuff! Thank you for that! I’m still at typography but I really enjoy your course and will definitely keep going. You’re a life saver!
Glad it was helpful!
Thank you so much, I’m glad I can help you on your journey!
You are the best teacher.
Thank you! 😃
Thank you for amazing 5 horse video lesson
I really appreciate 🙌😍 seems you are the one that designed envato theme for WordPress?
Thanks. Not sure what theme you’re referring to.
Very Well explained
It really help specially like me that really wants to learn about web design and web development. thank you so much for this wonderful video and easy to understand very specific! thank so much bro god bless you!
You’re welcome, glad you liked it!