Responsive Web Design: Mobile First Approach with HTML5 & CSS3 | Danny Florian | Skillshare

Responsive Web Design: Mobile First Approach with HTML5 & CSS3

Danny Florian, KIT | Digital Marketing Agency

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
12 Lessons (1h 14m)
    • 1. Intro

      5:14
    • 2. Column Grid Part 1

      8:26
    • 3. Column Grid Part 2

      3:08
    • 4. Column Grid Part 3

      4:04
    • 5. Column Grid Part4

      5:03
    • 6. Column Grid Part 5

      3:27
    • 7. Hero and 3 Blocks

      6:06
    • 8. Applying Media Queries

      8:21
    • 9. Mobile First Approach In Detail

      6:56
    • 10. iPhone Section

      8:10
    • 11. Flush Section (Edge to Edge)

      10:52
    • 12. Footer

      3:48

About This Class

It's no surprise that there are more people surfing the web on their mobile devices than desktops in today's digital landscape. In this class I will introduce the Mobile First Approach and show you the basic skills to get started.

We will create a responsive website from scratch which you can follow along with OR apply what you learn to an existing site and watch it come to life on your mobile device.

Using HTML5 & CSS3 you will be on your way to mastering responsive web design.

Transcripts

1. Intro: hello and welcome this quick introduction on responsive Web design. This class is specifically for beginners learning how to code. And we will go over topics such as media queries and the fundamentals of mobile First or the mobile first approach. So my teaching style is straight to the point quick. And if I moved to two quick, um, of course it's a video quarter, So feel free to press, pause and rewind and just go back over the instructions. So feel free. Teoh, take Screenshots off of your project and share it with the class. We can see how you're progressing and see some awesome things that you're building. Um, I have provided the foot shop file for this. This website this fictional website will be creating. Um, if you do not have photo shop, I have provided all the assets already displaced up. So if you go to, um the project file that I provided within the images, you get every single sliced out image from that float shop file, so photo shop isn't necessary, although it's highly recommended if you're going down This this this field of what design. So let's start right off. Why mobile? First So the question really is Why should why should we be designing or focusing mainly or starting off a project in the mobile first mindset? Basically, the reason is you have limited space. So when you have a website, you know as a ton of content, lots of images and when you're surfing it on your mobile device, you have a limited screen side. So obviously everything gets shrunk down. Um, you know, and if a site isn't really designed in the mobile first mindset users are scrolling for hours to find content that, you know, they're they're looking for it. So that's that's pretty much the number one reason, um, and then the supporting argument is okay, So if you're you're on a mobile device, you have a slower and limited connection, so you don't have the, um I guess the the ability to download hi rez images, you know, on the go. So designing in a mobile first or developing in a mobile first mindset, you're thinking about the user. You know, before, um, I guess showing off all the content, but content should be king. And then we were going to talk about progressive enhancement, basically starting at the most basic level, which would be the mobile device. And then as the screen increases to, you know, tablet and desktop, we're adding Mawr elements such as images or special animations and things like that. And that's based the basic concept of progressive enhancement. We're starting at the most simplest form and then building on top of that for for devices that have higher processor speed, such as your desktop. So this is this is the I wouldn't say trend. It's actually probably the best approach when building a website nowadays, just because more people are surfing on their mobile devices. So I highly recommend that you consider the mobile first approach, and I will go over in detail this approach in this class, and then you can take away You know what you like, what you don't like and you will see. There are lots of different tutorials on responsive Web design, and people do media queries in many different ways. But I find that doing it this way, the mobile first approach, it's the most efficient and it abides by the progress of enhancement, um, principles. So I hope you enjoy the class again. Take the Photoshopped file that I provided. You can use your own project, or you can use the images that I provided and start building the site and follow along. Um, again, if you have any questions posted on the on the class and I will make sure to respond to the minute in a quick fashion. Um, please, please, please share your your work. I want to see what you guys are building and just share it with the class. 2. Column Grid Part 1: to understand responsive Web design, you need to understand how the system works the grid system. So what we have here is a 12 column grid system. There are 10 column and 16 column grid systems, but it just really depends on your on your design. So what we have here is a design which has third or three, um, blocks here of content. Another section, which seems to be one side, is 50% of this with here, and then we have a full with section, and then we have a section here with five blocks of content. It's taking up the full width of the page and then another section here, in which we have another five blocks of content. But it's within this containing elements. So the 12 column system would work perfectly for this because 12 can be divided into three equally, whereas 10 cannot. You can use 16 column, but it just gets, ah, a little more trickier with the math, which I'm going to show you here in second. So basically I created a simple sample of right now. It's not responsive. It is somewhat responsive. I mean it. The content is adjusting to the width of of my browser here, but that's that's not really responsible design. So let me show you the basic care of what's going on. So what we have if you look at the code here is we have this container within the container . We have a row, and within the road we have these two columns that are taken up 50% of the space. So let's start off with the container. What a container does if we go back to our design here. When we turn on the guides, the container is basically from this edge, this left edge to this right edge. It's containing all this, all this content within that specified amount of space. Now, if you go to this section here, it's going from edge to edge. It's it's not within the container. So when we go to code this section, we know that we're not going to use the container class. But for everything else, it falls nicely within this containing, uh, element. So that's what the container is doing here. So if I were to let me change my let me take out my max width here and refresh and you'll see exactly what I mean. So the container does not exist anymore, and it's just taking a 50% of the browser space. It's not being contained within that 1200 pixel space, which I had previously there. So when you set your container, you're setting a max allowable with, so it's maxed out, right? There are 1200 pixels and right there is shrinking. Now, I want you to notice another thing. You see this, this edge right here of this container way give it a 20 pixel solid dark grey order. So if as we start reducing this, what's gonna happen is that right edge is going to disappear. And if you look at my scroll, um, option, it shows up there, my scroll bar shows up. So that's that's something that I'm going to talk about here in a second. And it's a quick and easy fix. And it's something to keep in mind when building your grid, so the next the next part is the road. So if you think of, let me go back to this image here. So when you think of columns usually think of table so within a table you have, um, these vertical columns are which are contained within the horizontal roads. So that's exactly what we're doing here. The row is the horizontal container for these columns. So within a row you have X number of columns. That's all the row is doing. And then we get down to each column. So we have this this def class with blue just for the Becker and blew into class with green , and we gave it this class. See oil Dash six, column six. So in this 12 grid system, um, just using common sense here, call this class that I gave of c o L Dash six basically means to me that it's taken up six columns of space. So if we go back here and, um, we go back to what What's actually being identified in the property here we see that the width is set to 50% for class Column six. Which makes sense. Obviously, you know, if we have a 12 grid system half of 12 it's six. So, of course, we want to give six columns the width of 50% which is 50% of 12. So let's let's go over some other other math here So let's say I want to give, um these third. So I'm going to copy this. There's, uh, this column six. And now we're going to change this to C. L. Dash four. And the reason being is, you can divide 12 into three, equally by force or obviously 12 about about 34 So if we really fresh, obviously we're not gonna We're not going to get the equal thirds because I have not identified it here in my in my CSS. So let's go ahead. I'm just going to change this here, Teoh 1/3 and we are going to figure out what 1/3 is of 12. So if we open up our calculator and you do, um if we if we need a three column so three divided by 12 I'm sorry, that's for so we have four columns were again, Remember, we're doing this by columns, not by the actual math of what you need. So even though we need three block elements were using four columns to achieve that, because obviously 12 about it before is three. So remember this is going off the number of columns, not off the number of elements that you need. So So we're going to go back to our calculator Here. It's four divided by 12. It's going to give us about 30%. So it's 33.33333 So to make this easier, so just get, you know, you can times about 100 and 33.3333%. So if I go back to my CSS and I create this call this column four, it needs a width of 33.333 And what I'm gonna do is go back. Go to the eighth of that small place, you know, and you'll see why. Here in a second, we're just going to add 33.333% and just refresh the screen here. And you see that it takes up the third of this, uh, containing, um, parents space. Now, one thing to notice is that they're not aligned next to each other, and that's where the float comes in. So for every column, we always want to float them to the left, and that's gonna give us exactly what you see that so to kind of see this last one Let me change this to blue. There we go. So each one is taken up 1/3 of this allowable space. 3. Column Grid Part 2: In the previous video, we went over how to create a column for 1/3 of the available spacing. So what I have set up here is a column four in a column. Six. So, in other words, there's four columns within this block of content and six within here. So if you had the month mathematically, we only get 10. Let leave this space of two here. So if you don't understand this, just basically think of it like this. So 100% of this space would mean that we used 12 columns. So in this example, what we're doing is we're using four columns and six columns, which adds up to 10. So we do four columns that ends right here. If we do another six columns 123456 were only a 10. Which leaves us to more calm. So mathematically speaking, the only allowable space in here after this six column would be two column. So if we add that in like so and refresh the page, you see that we get this space in here now. I haven't created this class of column to soar. Just do that right now, so cl dash to, and we need to figure out the width, and we know that it needs to float left. So let's go ahead and figure out the wit. So again, this is a column based system. So we're using two columns so two divided by the total amount columns just 12 is going to give us 16 0.6667%. So let's do that. And like I said, let's go to the eighth decimal place of 16 point 666666 67 percent. And if we go back to our example and we refresh, you see that it fills in nicely. So we change. That's two blues who can see the contrast, and there it is. So again, the the concept to take home here or the principle to take home here is for every row that you have, make sure that the number of columns equals the total number of your column grid system you're using. So if I were using 16 column grid system, obviously, what I have here would only be 12. I need another column four to fill in that space. But since we're using a 12 column grid system for six is 10 plus another to its 12 and you can continue to build out this cred grid system to the point that you can use. Call them 1 12 times column 34 times and so on, and that's basically essentially what you're grid system is composed of. 4. Column Grid Part 3: Okay, so now that we figured out how to build our grid system using the columns, we need to figure out the supporting CSS properties to fix some of these issues that we're having. So the first issue has appointed in an earlier video is how this container has this 20 pixel gray border. And as we started shrinking its drinking the browser size, we see that it runs off the page and we have to actually scroll to the right to see that order. So what's happening here is we have a container with ah, variable or fixed width here, and we're adding on top of it, another 20 pixel. So this 1200 pixels actually becomes 12 40 because we're adding 20 pixels here, 20 pixels here, So it's actually exceeding this space that we're giving it. So we need to do is we actually need to add a property in this property is actually called parks sizing and the CSS property we're going to give it is actually order dash box. So if you refresh the page, we see now that that right order is going to maintain or or stay within this within our space here so the same concept goes for these columns. These columns have a FIC they have they don't have a fixed with, they have actually a variable with. So this 50% is different at full width here than it is here. Obviously the you can see, for example, here this column four. It's decreasing in size as we get smaller, so the width is set to be a maximum of 50%. But it's 50% of the allowable space which keep shrinking if we go down like that. So we need to add this box sizing to all over our columns and any kind of element that is that we're adding that we're adding margins or padding is too. So let me give you an example here. So if we if we go to call him four and add, let me remove this box izing. Let's say we add a border to the right so border rights were going to give it 20 pixels solid and let's do just the same gray. So if we were the first to page, you see that it pushed over call him, too. And the reason being is this. Come fours now exceeding this 33.333% that we gave it. This extra 20 pixels is making it greater than this, this width that we gave it. So when that's why we need this box sizing. So if we add it back in and refresh the page, we get magic. So what box sizing does? Is it? It basically applies this, this extra padding orders or margins or whatever it is that's going to add to the width of whatever. Whatever it is you're adding it to, it's adding it inside. So again, if we remove this and refresh the page, you can see that it increased in with this. This action, this 20 pixels border right, is being added to the outside of this column four. And if we put box sizing order box back in and refresh the page, that's 20 pixels get gets added within this 33.33% so I hope that makes sense to you. It's a really easy concept than it's, and it's something that, as you're building your grid, you need to remember oxidizing order box 5. Column Grid Part4: All right. So the last CSS property I want to review is clearing your floats and how to do that with CSS. So basically, what we've noticed when building out our grid system is that every column is floating to the left. I mean, essentially that that we have to do that so that they line up next to each other. If we don't, they kind of just stack up under each other. So clearing the flow to are finding out a very good way to clear your floats is essentially responsive web design. So the way you do that is our row is basically achieving this by the CSS property that I've given it overflow hidden. So if we remove this CSS property and refresh our page, you can see that our container now, which is this, uh, this 20 pixels of dark grey. It has collapsed, and the reason it's doing that is because the containers holding the row the row has thes three columns. These three combs are floating, so when you have a floating element, the parent container does not know how tall or how wide the floating elements are because they're floating. So what, you want to do is you want to clear your floats. Now brings in the past people have. They have done a technique similar to this that created a day of giving it a class of clear and just close the Dev and called it a day. Well, you know that that gets really gets really tiresome real quick when you have to repeat this code everywhere you're floating that you're floating elements, so the easiest way to do it is to apply it to your row. Like I said, this class overflow in. If we refresh our paid, you see that the container 30 years out the height and wraps itself nicely around the content. That's one way to do it. Another way that you'll see is people actually use a pseudo elements of row before and wrote after so you can do row before an ad property CSS property of Clear Oh, I'm sorry of content and let's keep it empty right now and display of table. So if we refresh our page, you will see that that's nothing's happening because we have to actually include the same thing, but for after So copy this is that she's this to after. Oh, and I actually miss built before. There you go. Okay, So what this does? Is it actually adding, Let me actually put some continent here. Okay, So this thing, this pseudo class of before and after its that's exactly what it's doing before the row. It's adding this content and after the road, adding this content and you're basically clearing the float. That way, the container, which is the parent that contains the row, figures out the height because of this road before a row. After now, you can do it. Either way, they all have their pros and cons. If you do it the way I mused Teoh, which is overflow hidden, then what happens is if you need content. So let's say I wanted to push this text outside of this row and still show well, using this method overflow hidden, it would not. So that's when I would use this method so obviously have to plan and design which way is best. But obviously, if you have to pushed content outset and you want to show it, maybe you should be rethinking how you're doing your markup. So once again, clearing your floats really easy. Just apply it to the row, which contains the column, so you never want to use the columns without the row again. This is going back to our grid system and thinking in terms of of rows and columns. So keep that in mind As you're building your grid, make sure you either apply road before on row. After with display table and content. Just keep it empty or using this overflow hidden so it's It's up to you. They each have their pros and cons and just play around with it. See what you need it for, But most of the time, using overflow hidden on the row will get you pretty far. 6. Column Grid Part 5: all right. So I went ahead and built out my and finished out my heard system here. As you can see, I numbered every column. According to the CSS class that I'm using. So doing the math, you can see that six and six is 12 55 to 12 4 times three is 12 3 times four is 12. Basically, just make sure each row ends up to 12. Here's my last row. It's using Column 12 takes up a width of 100%. So feel free to use the CSS style sheet that I provided. It should have all of these CSS properties for each column basically figure I figured out the math for each column. So call in town and 83.33% call him 11 and so on, so feel free to use it. But I challenge you to go ahead and try to do the math and and repeat what I just did here , make your grid system. So right now you should have is as you reduce the size of your window here, um, you should see that each column takes that the percentage, the correct amount of space so for example, this column six is still taking 50 50. Even if we're at, you know, the smallest window size here, so you know it is. It's not response of what we call by today standards, but it is responsive in the sense that it's not a fixed with so like static sites that are built in, you know, 1997. They haven't fixed with of whatever 9 68 And as you start reducing the window, you're gonna have to scroll left and right. You know this at least adjusts to the percentage. Adjust the percentage of the column to the window so challenging to go ahead and finish your grid system. Continue what we were doing. Remember that each row needs up. Needs to add up to 12. So as you continue, here's my row with, with all these columns ending up to 12 and it's it's really simple. Just keep keep the grid system separate from styling. You know this is your scaffolding, so you don't want to include the color blue for your column, too, So make sure that separate that those air separate classes. So that's why we have the class blue that gives that that gives the column the background color blue and it's separate from the column. This is your good system. So you don't want Teoh? Um, you know, includes styles that are related to design. It's more your framework. You know, we're just talking about placement with and so on. So, um, go ahead and finish your You're good system. Take a screenshot. If you're on a Mac, do command shift three or four If you're on a PC. Pretty sure there's a screenshot, um, option on your keyboard to take a screenshot. Put it on the class for the class to see and let's little, pretty these, uh, grid systems are. 7. Hero and 3 Blocks: All right, so let's see this grid system in action. So what you see here is just simple markup. I didn't get too far here, just got the 1st 2 sections, the hero and then the three blocks here. So if we take a look at what's going on, if we turn on the gut, the guides here we see that everything is contained within the container except this section right here, which we will get to in a moment. So let's begin by first adding the container to this navigation. As you can see, it's very it's just flush against the edges of the browser, which is not. That's not what we want to coffee share. So from after you you created your grid system. If you're using your own, just make sure you linked to it through your style. She, As you can see, I'm linking Teoh myself sheet. That's within the CSS holder, and it's called main dot CSS. So if we open that up, you can see that I've already pasted migrate system that it was working on earlier, which is right here, contain a row and all the 12 columns within my main dot CSS file, so just make sure your container has the right margin. Zero top of bottom left and right is auto, so it centers on itself. There's a good time also to I give it a max width. So let's go ahead and apply this container within our naff elements. So let's give it a class of container. And as you can see now we refresh you get that nice, um, 1200 pixel max with their So the next, um, within the container. If you remember from our example, what I'm doing here with my markup. If if I look at this brand in this menu in my style sheet, I am floating the brand to the left and the menu to the right. So that's something that we want to clear with our row. As you remember earlier. Here it is. Brand float left and menu float. Right. So if you remember from our example, any time you have anything floating you want, you want to contain it within the road to clear the float. So I'm going to give this a class of roe so very fresh you can see it. This this menu now is given height So therefore, this next section knows where this navigation ends by a plan that row and clearing our floats. So let's move on to the next section. We have these three blocks that need to be three basically 1/3 and width of this, 100% with of the container. So if you remember from our example, we need to use column four since column four ends up to 12. So if we go back to our mark up here in this section, um, we want Teoh target these three blocks which are wrapped with this class icon section. This is where we keep the styling separate from the structure. So we don't want to add the styles to this column. Four class. We want to keep it separate. So that's why we have this different markup for for this section. So if we apply this column floor class, Teoh each one of these blocks and since we already saved and pasted our grid system into our CSS, when we refresh, we get magic. So there we go. We get three equal blocks 1/3. So one thing you notice is that we have not applied the container so here is the nap. With the containers, you can see it's holding that 1200 pixel max with, but these these blocks are not. So let's go ahead and and that. So within this section we have a class of container within the container. We have the class of row to clear the floats. If we refreshed that once again, we're getting that nice containing element there. So one thing I want you to notice also is at certain points, like right there. You see that each each block is touching, you know, rubbing right against each other. So that's something that you want to consider when making your, um, your grid system is Do you want to apply the padding directly to the columns? And most of the time you'll find that framework such as Twitter, bootstrap, Or is there a foundation they actually do apply padding to the column. So it's up to you, I would say. Go ahead and do it just because it's like building with Legos. You know, every time you use these columns, you're most likely want the content. So in this case, these paragraph tags not to be touching. So just to save some time here. I'm just going to apply it to the ones we're using, which is calling for right now. So just to give you a quick example, we're play or padding. So just on the sides, I want to give it a 20 pixel. And if we refresh, you can see there's a 20 pixel now padding in between or on the side on the edges of these on these boxes. So if we bring him in close like that, you can see it maintains that padding away from each other. So in the next video, um, I'll be going over mobile first and how to prepare the rest of this page going forward. 8. Applying Media Queries: So now that we added our column three class to these three blocks, let's talk about the mobile first approach. So if we make this browser about the smallest is it can go, which is that right there You can see that this really doesn't look that great. So how do we fix this? And that is where the magic comes into play. So let's first of all talk about media queries so media queries is where the magic happens . So if I go here and do a basic media query, so at media and if I can, I can actually target certain media types. So, for example, I can target only screens or only handheld devices or print devices, or can target all, which is an option here. So if you do want to target all you can do all, you can type all, or you can actually exclude it, and by default it it it includes all. But if you want to provide certain styles that apply to, let's say only for print, this is the time to do it. So, in this case, I'm just gonna keep it simple and do all you're welcome to read the Mozilla developer network and see all the different media types. So here it goes over in detail the print, screen and even speech options and some other things you can target, such as pixel density. So if you only want to target devices with double the pixel density such as retina devices , you can do that with media queries. But in this example, just gonna keep it simple. So my basic media query is at media all devices or all screens and then I do and parentheses. And this is where you have two different techniques. The mobile first approach uses just men, and the other approaches that you see a everyone else doing, they do a combination of Max and myth men with. So let's just do a minimum with off 600 pixels and open and close Curly. And that's it. This is how you set up media. Great. So what I'm going to do here since we're using column four for these blocks, I'm just going to take this out from here, So I'm just gonna cut that out and paste it within these curly brackets within this media query peace that in there like so didn't it nicely, and if I refresh, I can see nothing happens right away. And the reason being is because this, um this media query is actually only going to happen. Let me just show you real quick. So if we there's another another trick that you should learn with Google Chrome we have an option here. If you go to this settings and then make sure that show rulers is checked on, there's a cool little trick. So when you resize the browser, look at the rulers show up and on the top right, You get to see your current view port size. So what's gonna happen is my media query a set to 600 at minimum with 600. So that means that as long as anything, as long as my browser or that the device screen is larger than 600 pixels, if it's true, it will do everything inside of this so it will apply a width of 33.33%. So if we keep re sizing this window, you see we're getting closer to 600 went 900 as soon as we hit 600 you're gonna see what happens here. Boom. Soon as you hit 600 you lose this styling. So as the browser is reading, this may not CSS file. It's going down the list. So it's reading all this. It's reading all this, and there's column four Well, column for is in here, but it can't read it because it returns false when it reads this media query. So when it reads this media query Yes, on the screen device. So all is under this, and and then when it sees this mid width of 600 pixels, it's like, whoa, Okay, um, under 600 pixels. I am at 5 77 therefore, this returns false, and it cannot read this style. So think about that if we have. If the mobile first approach is this, if we do not need to apply a style at the simplest screen size, in other words, the smallest screen size we do not need to use a style, then don't use it. Remember, devices at this size do not have a faster processor than a desktop computer, so it's actually more efficient. Uh, and it's a better user experience. So, again, anything over 600 this returns true, it applies this styling for our column four block, which are these right here and anything under 600. It does not apply it, and that's why you get this stacking. So this is our first break point, and we can continue to make thes break points. So let's do at Media Paul and the next break point. Let's do 10 24. So men with 10 24 and opening close curly brackets and then let's add another one. So let's just copy and paste to save some time here. And let's change this last 1 to 12. 80. So as you can see, we're starting to develop a system here. Basically, as I'm creating this site, you know, I'm going to have to decide what each break point is going to look like. So if, as you can see here, everything is being contained within this container, and as long as it's as long as actually right there, I might want to change my styling. So you're gonna have to find tune this thes air, my major break points and a lot of developers, um, and designers will tell you that, you know, sticking to you know, your 7 68 Which is your iPad, Um, 10. 20 fours. IPad landscape. You know, that's very you're sticking to devices. You're not sticking to any responsive or agnostic responsive approach. And Aziz, you notice you know this content? Yeah, it looks okay, um, but it needs to breathe a little bit. So maybe at 700 pixels, we we might want these to be still full wits. So that's what you have to play around with and use your your judgment here. So, you know, at 600 pixels, this looks this looks kind of squash. So, you know, um, I actually want to increase this 1st 1 to, you know, 7 68 And if I refresh you see that 600 pixels, it's still full with, and it actually doesn't go into the third until it exceeds 7 68 which is right there. So that's actually a little bit better. So go ahead and apply this this technique or this this approach to your CSS file. If you're following right along, I'll give you a moment to review this video and kind of see what I just did. I hope it makes sense on this next video. I'll explain more in detail 9. Mobile First Approach In Detail: now that we have our hands let with the mobile first approach going to go into more detail on this approach. So let's look at the simplest or the smallest screen size hair. So right there is a small second go. Right now it's 400 pixels in width. So if you notice that there's a spacing up here and you know, let's say on the phone, you know, the height of my screen might actually be somewhere like around, you know, some more room right there. So we're getting this cut off. You know that this call to action here. So what I want to do is I want Teoh switch my styling that I started over to to death. Stop, because this is this is the phone view. This is the smallest Vieux port that I have, and I want to change this styling. So if we look here, this element is actually my each one within my call to action. So if I switch to my style sheet here, you can see it right here called to action 81 So this is the piece I need to work with. So, as you can see the font size is just huge, and I need to reduce that a little bit. The call to action itself has patting on the top that I need to reduce. So what I'm going to do is I'm going to start with the call to action. So I'm just going to copy this and go to the media query that I started here. Now you can You don't have to include, you know, every single media query, um, against, like, right under, um, everything you can, you know, you can embed it throughout your CSS. So I guess what I'm trying to say is, if I wanted to start another media career here with same, um, with the same properties as this media query here with the minimum width of 7 68 I couldn't do that. They're not going to conflict unless the elements inside of it are exactly the same you say . Then the last one would take effect versus the one that came earlier. So what I'm going to do is just to keep this really simple. Here is at the end of these sections here that I have, um, outlined. I'm going to include, um, a media query so just gonna do the media query here and I did 7 68 and I'm going to pace that. That call to action snippet. Now, one thing I want you to notice here is OK, this is exactly the same. So why, Why repeat myself? So what I have to do here is have to think, Okay, what styles need to be applied in this smallest vieux port? So if I am todo a style that needs to repeat in in all the airports, then it needs to be out here If I want a style that only needs to be applied to that specific view port and needs to go with it in the media query. So that being said, yes, I do want the colors to be white, you know the import. So I don't need this because it's already outside of this media query Texan line as well. The only thing I need a target actually is just the padding top. So patting top. I do want it to be 100 pixels on and anything above 768 pixels. However, in this smallest view, which is the mobile first that remember, this is what this is. This is the styles that the mobile devices reading first. So it goes down this list and it's reading all this. And imagine if we had to override everything it just read. And then when it gets to this media created. So if this media query waas for a mobile device, then we would it would override everything that it just read, which is a waste of resource. Is a race, a waste of processor. So that's why the mobile first approach works so well. Is that all this code that is being all the CSS that it's being read by the mobile device is actually meant for the mobile device and then everything in your media query here. That is for anything like a desktop, which has a better processor and more space than it can handle this. It can read this and override the styles. It just it just read earlier. So that's the whole purpose of the mobile first approach. So let's let's see it in action here. So, like I said, this is this is above 7 68 We do want it to have a padding of 100 pixels on the top, which is this spacing right here. But in my mobile device, let's say I wanted to be half of that. So in my call to action patting top, let's say I wanted to be 50 pixels. So if I refresh the screen, you can see it climbed a little 50 pixels. The next thing I want to target is this. Each one here, the recipe, it's it's just simply too big for mobile devices. I'm just going to copy and paste. That's called the Action H one and into my media query just right below this first class is gonna align it nicely. Make sure it's all indented properly and again. We we want the margins and in the margin bottom to remain the same line. Height is going to be the same again. This is what I wanted to be like. And on any device or any screen size larger than 7 68 The problem is right here. This is for my mobile devices, so I want this the font size to be smaller, So let's do half announced the 35 Exel's. We must change the line height to something around like 40 and when we refresh. If you keep your eye on the right side of the screen There, you see that it produces. So this is exactly the mindset we need tohave when we're developing. Basically, think mobile first as your mobile devices reading this code, you want it to be meant for the mobile device. So if a desktop is reading this, which has the greater processing power, it's fine if it needs to overwrite everything it just read. When it reaches this media query right here and reads everything inside, it has the processing power to override everything it just remembered. I mean, that's the whole purpose of mobile. First Is is using using, Ah, this this idea of saving resource is and maximizing user experience. 10. iPhone Section: All right, So now moving on to the third section. So as you can see here already have the mark up. Let me show you. Here I have another section with a container a row and two of these columns. Sixes, which is 50%. So this left one is taken up 50%. And that's right when it's taken off 50%. So as you can see, this actually was flush. Um, let me show you the styles that I added on the grid. So column six. I added a padding on the left and right of 20 pixels. So let me just remove that. You can see what it I was looking like so you can see Not too bad. But, um, the padding is is necessary just like we did here. So when as they get closer, you know, you still have that padding and the content isn't flush. So that's why I went ahead and added it within this column. Six. So the problem that you get with retina images So this is this is a fairly large image here , and what's happening is that it's spilling over. So a good trick and something that you might want to add to your style sheets is its target . All the images by doing I am J in your style sheets and just doing a max with of 100%. And what that does is it actually tells the limits the width of the image to fit it's container cannot exceed the width of its container. So if we re first the pay chair, the iPhone on the right sure fit nicely within that 50% and patty, So you can see we have If we do the inspect element and we inspect this, uh, it's column here, you see, it has that 20 pixel padding on the left and right as well as this one. So now let's go ahead and apply the mobile first approach so you'll find yourself doing this back and forth. And until you get pretty confident with the mobile first approach says you can seeing I did not apply the mobile first approach because, as you can see the way still get that ugly 50 50 split on these columns. Sixes. So if I had done this mobile first, I would have moved this, um column six property in two. My media query, which I will do now. So like we did in the previous video, I'm gonna cut that column six and paste it into my media career. So now when we refresh me to still line this here real quick, when we refresh, we get this. So now you may be asking. Well, now what do we do with this? So, um, if a designer has given you a a design that shows the mobile view and how you know everything needs to be laid out, If that's been thought, um what about then? You need to apply that. But in this case has not. And if we think about the user experience, you know, scrolling forever, that's really not that great. Is this image you know, extremely necessary to convey a certain message? No, I mean, it's the same images. This hero is kind of redundant. So is that necessary? I would say no. So the mobile first approach in this in this use case scenario, would be to just acts it off. So if we if we look at our mark up here, we can do a couple different things so we can either and create this class and just dio mobile class hidden. Um, and we can apply it to the image hair or or this entire column six. So, just for the sake of of keeping it simple, I'm just going to create class here and just do mobile hidden. So if we go back to the style sheet, we need Teoh create this class. So I think of a logical place, added out say, let's add it to the grid. It's pertaining to the framework, and it's probably something we will be using later on. So I'm just going Teoh. Uh, actually, this would be was I made a mistake there, So you wanted to be applied to Mobile. So mobile hidden and this dude display? None. If we refresh, there we go, it's It's out of the image there. So until we hit 7 68 that's when we want the image to appear. So we need to do the opposite. So let's do, um, here is do mobile hit in and we will do display Block three fresh. And while I it's again everything in the media query, Um, anything larger than 7 68 this mobile hidden class is displayed. Anything smaller, it gets hidden. So we see it in action here under 7 68 it disappears, so we still have a few issues here. We're not getting patting on the bottom, and we're getting excessive petting on the top, which is fine for desktop but not find for mobile. So let's hope Let's go ahead and fix that. So if we go back up here and see that our mark up, I named the section and gave it a class iPhone. Um, you know, if if you find that this section is going to repeat, you know, obviously I would give it a more semantic name, but in this case, it's the only section. If we look at our design, it has no petting on the top and extra padding on the I'm sorry, no padding on the bottom and extra padding on the top. So therefore, I gave it. It's own class of iPhone. So in my style sheet, this iPhone class has patting autumn zero, which is not what we want for mobile. So we need to move it so we copy and paste this into the media query working on the 7 68 push that over there. So the repeating elements we knew we do need the same color so I can actually remove that. The pattern bottom is going to be zero and 1 20 in anything above 7 68 However, we want the regular section properties to be applied for mobile first, so we can actually just kill padding altogether on mobile. First, If we refresh and we go back to our mobile view, you can see that depending on the bottom and top are consistent with petting on the on the padding on the top and bottom on the other sections. So there you have it, the mobile first approach in action once again. So as you can see as your confidence grows, you're going to be styling or working on your cell sheets in a mobile first approach, meaning all the styles out side of them. Unity query are meant for your mobile device and all the styles within your media queries are meant for anything larger 11. Flush Section (Edge to Edge): Okay, we're almost to the finish line. So if you look at the profits that are made here, I've created this. This easy section are here. It's just a column. 12. So if you check out the market that I did for the section Oh, that reviews container row own PLO, which is 100% with paragraph tag within. And it actually, um, I didn't really have to make any changes because it fits nicely within the mobile first. So moving on to this section As you can see, I did not follow the mobile first approach just so I can go over some point here. Sometimes it is helpful to create your style sheets in a desktop view for so you know what you're ultimately dealing with. So the only thing is you have to go back and change your media queries. So what I want to do here is basically want to go over what? What's happening here in this in these views, so that you can tell we have to fix some some background sizing their for each block, and we also have to style this differently. As you can see, it doesn't doesn't look right so we're gonna have to split it up. So looking at my inspector to inspect element and looking at my ruler here, I think what I'm going to have to do here is is ah, create, um, two different, um, break points for this. Great. So obviously, I'm gonna break it two full with hair under 7 68 for 7 68 which is about tablet. You know this view? I'm just going to reduce the size of the text. And then once I break that, probably at about, um, somewhere around 10 it's 10. 24. I would increase it to the full full size. So that's what I'm gonna do First is we take it down all the way down to Mobile first here and get back to my style's You can see. Um, let me just expand this out here a little if I go back to my markup. As you can see, I gave every, um, block a class of category and it's corresponding background to Italian Indian French corresponds to the background category is specific to, um, this 20% whip. No, some. It's something pretty interesting here. So none of these columns is 20% the closest I can get. It's calm to, but it's a 16% called threes at 25%. So you know, if I have 100% and I want to divide it equally into five, that's 20%. So that's why I had to create my own, um, special A class for this block. And I named the category floating to the left with a 20 box sizing order box. So what I need to do is I need to actually move this to desktop. So I take category, cut it out of my mobile first, um, section. So I gotta put it in this media query of 7 68 So I'll just put it in, actually, right after this one here. I think so. And if I refresh the page well, so I still have a few things to fix here, um, basically broke this grid out and put it into desktop. So when I exceed 7 60 a, it's going to snap into place. So we got one. We're almost there. So we just have to work with the current styles for for, uh, the mobile first. So let's scroll up here and you can see that my categories has, ah, set height. And all of these, um, background images need to go into my media query. So I have a 7 68 minute query up here just going to paced him right under that, going to invent properly and very fresh. I take out my background images from Mobile First, which is exactly what I wanted to do. So now, continuing on the category the category section that I created once again has a fixed height which I want to reduce, um, they background color, I'm going to change that. And then also this section we called it recipes, which is this class right here, matting zero, petting on top, bottom and left, which we might change. So let's let's go on and continue changing this. And we're going to change the height. We're going to remove the, um, the margins here. So let's go ahead and do that. It's the first thing I want to do is cut out this category. So actually, we're just going to copy this right now. Put it into my media query for that Stop. So remember, this is exactly how we wanted and desktops. I'm just gonna going to keep this here now. Mobile first. I don't want this color, okay? And since we don't have a background, do you have to worry about that so I can remove that? I do want my text to be in the center. I don't want it to be as tall, so I'm just going to remove that. And at this point, we should just get all whites of refresh. My text is white, so let's change the text color hair. Just going to change it to gray just so we can see what we're at. So you can see that starting to look a lot better there, you know, it's it's definitely content. First, um, we removed the height, so it's strictly just going off of the margins. So if we inspect the sell in, May would kind of tweak it as we go. So here we're getting Ah, margin, top on the category paragraph tag, which is this right here of 70 pixels, and you know that that doesn't look too bad. So we might We might keep it at that. Um I think I think the only problem you might run into is the if If we go to add a rule I was planning on adding a rule. I mean, this is up to you. This is something that you and the designer would talk through or if you are the designer, something that you would have to kind of handle as you create, um, as you developed for member for Mobile first. So one thing I would highly suggest is yeah, adding incorporating a border on the bottom of these. And maybe, you know, obviously excluding that border on this here. So that's something you can dio. I mean, at this point, it looks pretty good. Um, and if we break out to 7 68 we get that that wonderful, um, magic there with the media query. So once again, just it's just a matter of moving everything out from the main style sheet, moving everything into the media, query it for a desktop. So obviously, whatever you have here, you do not want to override it or repeat yourself within the media query. So just like in category here, the category color changed because in desktop, it's white with the purple background, the specific, um, corresponding background there. So Let's go on to the next part, which is this extended view there, which is just a matter off playing around with the Akron image so we can do a couple things here. So if we check out the, um um, the styles here for the category, we can actually include background size. So if we do background size and set it to cover, you can see it sells for that. And all that's doing is expanding that background image to fill that space. So that's what we're gonna dio go back to our our may not CSS file here and within the category we're going to add for this media query 7 68 and up. Background sighs cover. So if we re fresh and expand it out, you seem we solved for that. So there we go. That's a fluid box with a custom grid. This is not your column grids that we worked on one through 12. This is a custom Greeks. We needed 20% on the way. We get 20% obviously, 100 divided by five is 20 so that's why it's 20%. And that was not available from our grid. So it's a category class that we created, um, and give it a 20% with. So once we get to a mobile first view, we break out into this list style. And obviously, if these were lengths in which I can change my markup, they go to the corresponding page. So there you go. Once again, it's mobile first, and then you do not add, um, anything else until you get to anything above this 7 68 So to finish this section, go ahead and as a challenge, figure out how to include this. This in between break point, which is, um, the 7 60 between seven cc a. Every inspectors elements somewhere between 7 68 and 20 and 10 24. So go ahead, and and that And when we come back, we'll do the final section 12. Footer: Okay, so we have reached the finish line. So let's check out. First of all from the previous video, what was the fix for this in between break points. So going from the mobile break point, which ends at 7 68 which is this for you right here. We had to change the font size on these category, so we reduced it down. As you can see here, within my 7 68 media query, I reduced it to 20 pixels. So once we had enough space, we can increase it to the original, which is right there, which was actually a new media Queria had to create at 1200 pixels, increased it to 30 pixels on on the paragraph. So that was the fix for that. So, as you can see, our went ahead and created the last section this the stats in the footer. So if we go over to my mark up, you can see here nothing too out of the ordinary. So I have a section give it a class of statistics so I could play around with this padding here. It's not going to be the same padding as the other sections and within this section. I have my container, my row. And then again I had to create a custom grid and I gave it a class of stat. So if I go to my main that TSS you can see here actually just listed it together with category since it used the same see, it says properties with 20% floating to the left. And this is all happening on anything larger than a mobile device. So when we go to the mobile device for you, you can see that I have it in list format. So if you if you look the styling is also different. Give it a purple background with white text. So if we go to my media query up here, when my styles are at, you can see that my mobile first my boat will first styling. I apply that purple background and the text color is white. So in my media query here, my 7 68 you can see that I switch it around. I changed the clerk to black, so let me pull it out there and sits the color to black. She's the color background color back to white and then for the last section. It's very simple Footer Have a container with a row Have a class of left and a class of right since it was just a simple floating element. So if we check my CSS here on the bottom of the grid, I'm sorry. At the bottom of my main dot CSS, I actually added left and right to my view because I need the float left and right. But I did not include it for the mobile you since it's just being centered. So you can see if I scroll back up here, um, to my footer Silence my mobile First footer stylings are just text align center. So there you have it. I will post both the markup on the style sheets so you can have access to them and review the but please make sure you take some screenshots. I want to see the progress of your work. And if you have any questions, make sure to post them on the in the question so I can answer them. And that concludes responsive Web design Mobile first approach with threatening images and media queries