Web Design for Beginners | FREE COURSE

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.

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+

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

[hafizmuhammadessa]

Don't delete this course please. I've just started 20 minutes ago. You have become my university for internet engineering and management. You are best 💓

[yangruflo]

This is a free tutorial, but please don't skip a couple of ads at the very least. Thanks for this!

[neelisettynikith]

I get super chills knowing that there exist people like you who are willing to educate the community for FREE. We forget that we are in 2023, where technology has enabled us to literally do anything yet the price of Education is increasing daily whilst it should be decreasing! Keep going brodie, you have all our support

[ProPi]

I've watched the whole course, and the fact that this is free just blows my mind... The way you explain things is so clear and calm, i reccomand this to everyone😌

[brittany]

This man deserves a big cheque. I’m usually a slow learner when it comes to these kinda thing but this video was amazing. Very soft spoke, very clear message and overall excellent lesson. Words cannot explain

[lauronavoa]

I can't believe this is free. I just started my journey as a web designer and this is priceless. Thank you so much. I will work hard

[AfterMidnightTales]

Back in 2017 when I was studying graphic design and choose to specialize in UI/UX our teacher made us use photoshop and illustrator, i was most of the time scolded for not making my objects pixel perfect (the space between my frames, designs and objects was not even) i ended up giving up 2 semesters before the final project. I cried for days and felt like a failure. and this coursed is so simple and easy going and it made me go " OHH I GET IT NOW" and on top of all i was never told about Figma that could make my life much easier.

[Nikopup]

I’m only an hour in and I feel like I’m learning details I didn’t know. Thanks!!!

[marlon]

Finding a web design course on YT took me hours. However, your course is worthwhile to find and invest time into it. Many thanks, Sir! Guys, please don't skip the ads to repay such an excellent free course and great explanations.

[andyc]

He is a hardworker only today I found this channel.
The least you can do is Not skip the adds.
This is quality free content

[quotesbattle]

I am new in Ux design and i watch this course without any break and i can say now that i have learnt alot from this thank you for your efforts 👍

[TheRadakill]

Finished the course and managed to build my own wireframe and project layout based on your tutorial. Was fantastic information and cant thank you enough for taking the time to post this.
Some steps in the process where more challenging then others as I am working on a more "updated" version of Figma then was in the course, so some intuition was required to fill in the blanks.

Its these tutorials that really get me wondering why people spend 100K+ for an education when you can get more out of courses like this...

[siddhinaik]

I'm so grateful for this. I've always searched for a right way to use colors, fonts in my design and struggled a lot. This has exactly what I've been always looking for. Thank you.

[janmsavage]

from a teacher to a fellow teacher: this is how teaching should be done. You are awesome.

[AEIART]

I stumbled upon this video while looking for a job as a student freelancer, and this just saved my whole time looking for how to start things!, plus its free!! omg thank you very much!

[AlysiasArtStudio]

I can’t believe this video is free 😳 incredible content! You’ve explained so much of what I needed! ❤

[joycekrystalclagudas]

Hi!,

I just finished watching this course and I just want to let you know that you've been a great help to those who would like to take a step on the web designing field/ industry.

Keep creating videos that could help and inspire other people especially to those who wants to learn things outside the University. ( I am a student and I just dropped out of school this year due to the Pandemic school setup)

Wish you all the best! .

[DnKZone]

this is the best course on this topic in the whole YouTube (probably in whole surface web) for free !!

Very Grateful ❤❤❤❤

[benahg]

I'm a beginner but for sure this guy has explained everything in a very interesting way.i can't imagine this is free

[beatabautista]

Amazing! I wasn't able to finish my graphic design degree but you went over all the fundamentals that I likely paid thousands of dollars for. I needed a refresher so I could teach web design to some kids and I wanted to include the color theory and typography bit. Thanks so much.