Hey there buddy. This video is the beginning of our next project. Okay, this is Project three. We're going to build a real quick really just kind of simple portfolio site and the big overarching thing for this one is going to be about this thing called responsive design and we'll talk about that in a second. So the overarching theme for our first one was this was just getting us started. It was real simple. I made it real simple so that we could kind of just get the basics in. Then we learned a real ton in this second project. Okay. We learned loads. And the overarching theme for this first one was introduction. The second one was really the big, the big chunk of it was flex box. Okay, so getting you used to that and we threw in so many different parts that kind of the nitty gritty of foundation. Html and CSS this next tutorial is, well the next project at least is going to be all about responsive. Okay. And what does it mean to be responsive design? Quite literally. It means your webs...

ite is going to respond to different device sizes so on a desktop screen it's gonna look like this. But when it's loaded up on a tablet, it's going to make best use of the screen real estate. Yes, that's the word we use. Okay. Screen real estate. This is probably better for a tablet. Portrait and the changes. Are we gonna go from three across and three down to this one here, which is two across and four down. You'll notice we're missing one. Okay, because we had uneven numbers there so we're gonna turn one off to make best use of the screen. Real estate will also do this. This is what you waiting for you. Like How can we have know how we've not done the bigger menu yet. Okay. Now have sandwiches coming up in this video chunk. Okay. Project three a little bit later on. Okay. And when we're gonna we're gonna design this one for mobile and it's just going to go into a stream of one. We'll turn that guy we turned off back on we're gonna have nine of them. Okay? And it's gonna score on the screen. Okay? So that is a responsive design. Let me show you one in practice. Let's look at my website. So bring your laptop dot com. This is what it looks like on a giant screen. I've got loads of room to play around with so I can get loads of these like little thumbnail, what do you call them? I call them cards. Okay so and down the bottom here, lots of testimonials. Okay? But when it gets down to a smaller size, let's go down down down down. That's what happens. So there was a break there. So check out these cards. Okay? Can fit six across on a big screen when you get down to a smaller screen only four. Okay? Then you get down even further 32 and eventually if you go to mobile, I can't drag it to mobile. Okay. I need to right click it, go to inspect At the top here. I'm gonna go see there's our word getting a pick IPhone six. Okay. And you see I've cut it down to 11 of the little cards that you can cycle through and one of the little testimonials in here, we've changed lots of the font sizing is just to make best use of our screen real estate. Close it down. That is responsive design. Just changes now to make this happen. Okay. The two key things we're going to learn in this little section is something called a media query and we're going to use flex box again and a little bit more add to our knowledge of flex box and to a lesser degree responsive images that are just sizes but really the big ones are media queries and then flex box. Okay, adjusting the structure really. So we kind of know what flex boxes and a media query is just where the website asks the browser to say how big are you? Okay Because it needs to ask every time it needs to say how about you? And it says I am let's say 700 pixels across and then launches some CSS Okay. Based on how wide it is and that's called a media query. If that wasn't a great explanation. It's a little bit easier actually just to do it and that's what we'll do, jump in the beginning of this tutorial. I need to make a better image. It's cut off from this one. Go with dan great web design. Alright, so we're going to go build this one, This handsome portfolio website for a logo designer. We'll do some other cool stuff. You can see background repeats, but really it's about adjusting for different device sizes. I feel like I'm just rambling now. I hope you're excited. I'm excited. It's nice to get into a new website. I'm sick of the pink one. Let's get in and build ourselves a logo portfolio website.

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

What does responsive website design mean

What does responsive website design mean

Lesson Info

78. What does responsive website design mean

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks