If you're new to web design, this web design for beginners course will teach you everything you need to know. Download creative digital assets with Envato Elements: https://elements.envato.com/?utm_campaignyt_tutsplus_B-ytMSuwbf8&utm_mediumreferral&utm_sourceyoutube.com&utm_contentdescription “How do I choose fonts, how do I choose colors, what the heck is white space, and how do I position and enlarge elements correctly?” These are exactly the types of questions we will address in this web design for beginners tutorial.

Download creative digital assets with Envato Elements: https://elements.envato.com/?utm_campaignyt_tutsplus_B-ytMSuwbf8&utm_mediumreferral&utm_sourceyoutube.com&utm_contentdescription

In terms of the basics, you'll learn about color, typography, spacing, dimensions, images, 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, such as 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.

View this link for the project letter 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_campaignyt_tutsplus_B – ytMSuwbf8&utm_mediumreferral&utm_sourceyoutube.com&utm_contentdescription
Link to wireframe portfolio website with Figma: https://www.figma.com/file/Ak0JQMv65digqiASGnoLI0/Portfolio-Website?node-id0%3A1

What you learn:

00:00:00 Welcome!
00:04:31 Course overview and assignment
00:05:48 UI design vs UX design vs web design
00:14:08 Learning to work with project assignments
00:19:59 Working with wireframes
00:28:08 Choosing 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 dimensions in web design
01:54:47 Using icons and images in web design
02:03:33 Definition and usage scenarios for headers
02:11:39 Let's design a header
02:28:16 Definition and usage scenarios for hero areas
02:33:06 Let's design a hero area
02:39:08 Definition and usage scenarios for buttons
02:44:46 Let's design some buttons
02:57:27 Definition and usage scenarios for image galleries
03:01:38 Let's design an image gallery
03:12:34 Definition and usage scenarios 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 usage scenarios for tabs
03:48:11 Let's design some tabs
03:59:47 Definition and usage scenarios 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 conclusions

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
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_campaignyt_tutsplus_B-ytMSuwbf8&utm_mediumreferral&utm_sourceyoutube.com&utm_contentdescription

Envato Elements
All the creative resources you need under one subscription. Customize your project by adding unique photos, fonts, images and themes.
Download unlimited stock photos, fonts and templates with Envato Elements: https://elements.envato.com/?utm_campaignyt_tutsplus_B-ytMSuwbf8&utm_mediumreferral&utm_sourceyoutube.com&utm_contentdescription

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
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Please take the opportunity to connect and share this video with your friends and family if you find it useful.