Learn Responsive Web Design 101 from scratch | Kalob Taulien | Skillshare

Learn Responsive Web Design 101 from scratch

Kalob Taulien, Web Development Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
30 Lessons (1h 44m)
    • 1. Introduction Video

      3:00
    • 2. Welcome

      1:58
    • 3. Getting Started

      6:26
    • 4. Page Structure

      5:14
    • 5. Adding CSS

      3:59
    • 6. Styling Our Page

      6:07
    • 7. Inspector Tool

      4:46
    • 8. A Quick Message From Yours Truly

      1:01
    • 9. Parents and Children

      2:34
    • 10. Adding a Gradient

      3:54
    • 11. Viewport Height

      2:43
    • 12. Content Section

      2:10
    • 13. Adding Content Spacing

      1:55
    • 14. Top To Bottom Styling

      1:06
    • 15. Grouping Styles Together

      2:05
    • 16. Fixing The Nav

      1:20
    • 17. Specificity And Nesting

      3:21
    • 18. Block Elements

      5:20
    • 19. Vertically Centering Elements

      1:56
    • 20. Box Sizing

      3:12
    • 21. Headers

      1:37
    • 22. Modifier Classes

      2:55
    • 23. Responsive Testing

      9:22
    • 24. Responsive CSS

      4:00
    • 25. Mobile First Responsive Design

      4:21
    • 26. Desktop vs Mobile First

      1:16
    • 27. Max Width and Container Sizes

      6:04
    • 28. Adding JavaScript

      4:03
    • 29. Adding Icons

      2:20
    • 30. Summary

      3:33

About This Class

Learn how to create a responsive website from scratch! 

In this course you will learn a lot, and everything is included, meaning you'll learn HTML and page structure, along with some CSS and how to attach .css and .js files to your web page. 

In this course you will learn about HTML5, CSS3, and responsive web design (how to make mobile friendly websites!)

Some of the things you will learn in this beginner-friendly course are:

  • How to create an HTML page and view it (within the first 3 minutes of this course)
  • How HTML page structure works
  • How to import .css and .js files properly 
  • How to nest HTML elements inside of each other
  • How to write HTML entities 
  • How to add custom HTML classes and ID's for custom styling in CSS

You'll learn a lot about CSS, including:

  • Basic styling, such as background colors, text colors, font sizes and more
  • How CSS specificity works, and how to override it
  • How to style elements, ID's and classes
  • Nesting and grouping CSS selectors 
  • Responsive Media Queries 
  • Mobile-first, and desktop-first styling methods 
  • Style modifiers 
  • How to center elements horizontally and vertically 
  • The Box Model
  • CSS Gradients
  • How to use and write Flexbox 
  • Transitioning styles (light animations)

And of course you'll learn a tonne of miscellaneous tips, tricks and skills, including:   

  • How to add custom icons to your page
  • How to check if .css and .js files are imported into your page properly
  • How to change your styles directly in the browser
  • How to debug CSS directly in the browser 
  • How to execute very basic JavaScript in the browser 
  • How to add custom icons to your website 

In this course, the class project is creating a very small and simple fully responsive website. 

Transcripts

1. Introduction Video: welcome to my course on building a responsive Web design from scratch. In this course, you are going to learn so many things. Broadly speaking, you will learn about HTML five and CSS three. But most importantly, you will learn. How do you make your website fully responsive now? Formally, this is called Responsive Web design. This course is fast paced. It's only about an hour and 1/2 but I promise you it is simple to follow along. In this course, you will learn how to make a website from scratch, and you will learn how to make it mobile friendly. And that's really all there is to responsive Web design. Now, to be more precise, you will learn how to create an HTML page and how to view it within just a few minutes of taking this course. How html page Structure works, How to import CSS and JavaScript files properly how to nest html elements and how html, CSS and JavaScript all connect together. And that's just the very, very beginning. You will also learn a bunch of amazing CSS properties and tricks such as background colors , text colors, border colors, font sizes and, of course, the more expert features like box sizing, flex box radiance, transitions and naturally responsive media queries. Because that's what this whole courses about. Plus, you will learn how CSS specificity works and how to override it. You will learn how to select and style elements i ds and classes you will learn about nesting and grouping CSS electors. Responsive Media queries Again, that's where this entire courses about being responsive and what mobile first is and what style modifiers are. Plus, I've sprinkled in some bonus material just to give this course just a little more possess. So you're going to learn some really cool tips and tricks, such as how to add custom icons here page. How to check if CSS and JavaScript files are being imported properly to your page. How to change the styles directly in your browser. How to debug CSS directly in your browser. How did you execute JavaScript directly in your browser, and you will learn how to use your browser's inspect tool for ultimate Web development Success. If you are a beginner to responsive Web design or brand new two HTML and CSS, this course is absolutely for you. But if you already know about media queries and flex box and more advanced CSS features like that. Then I'm sorry. This course is not for you. All the videos are in crystal clear HD and accessible on any device. Hi, my name is Caleb Tolling, and I'm your instructor for this course. I've taught over 150 1000 students worldwide and online, and I answer every single question that comes in. And I'm looking forward to showing you just how easy it is to create a responsive website from scratch. I'll see you inside. 2. Welcome: Okay. Hello. Ah, I guess we should just dive right into things. I'm guessing that you probably want to start learning how to code. Ah, you want to learn how to make a website, and you don't really know where to start, If that's you. Guess what? This course is absolutely for you. If you're already a little bit more experienced, this course probably isn't for you. But maybe just pay attention for the next couple of minutes because I'm going to explain what this course is going to entail. So in this fairly short course, we're going to learn HTML and CSS not all of it, but just enough to get get the ball rolling. We're going to learn how to make our website completely responsive. Ah, you want to learn about ah, text editor and the tools that you need to make a website and and all that kind of good stuff to get started? You actually only need a text editor so you can get a text editor called sublime. That's the one I'm using, or V s code. Or Adam. All three of these air free. A lot of people like V s code these days I'm still a big fan of sublime. It's totally okay. Pick whichever one you like. Make sure you download that. Install it. Once that's installed, you can start writing some code. And so basically a text editor is. It's your Web development tool. It is how you write your code is how you write your text because everything in code is just words. That's all it is. And so you need a tech center toe. Edit some text. Next, you'll need a browser. If you're watching this video, chances are you have a browser. Us you're going to need Firefox chrome opera safari whatever browser you want. We're not going to be working with browser compatibility with Internet Explorer just because that is an old browser and it is a pain in the butt. But what we will be working with is Crume. Well, I'm gonna be working with Trump, but you can have Firefox safari or anything else. Um, and we're working with modern browsers. So whatever is up to date, make sure your browser is up to date, and without further ado, let's go ahead and get started 3. Getting Started: now, the first thing you're going to need to do is ah, you need to open up sublime V s code. Adam, whatever text editor you downloaded and you're going to need to create a new file. Now, this new file mine is called Entitled. Right now, I'm going to save this, do my desktop, and I'm going to save us as let's say hello world dot html. Now, as I say that I head over to chrome and I'm going to go up into the top left where says file and then go down to file open, which is command o or control. Oh, you can't see it because it's out of the recording area on my screen. There we go would actually work a little bit better there. And so I'm gonna select that hello world file that's just in my desktop. It open and you should see a blank page. Now, if you see a blank page is actually perfect because watch this how low world I type that I save and I go over to chrome and I refresh you could do that with command. Our control are, or you could just have this little icon up here. Boom! It says hello, world. Now, if you've done all this, guess what? You've made your first website in less than two minutes, but there is actually a little bit more to it. So we can just start writing hello world and hope that our website looks fantastic. It's not going to work that way. Life is never that easy. But luckily for us, HTML and CSS is quite easy. So what we want to do next is we want to create our doc type. Now we do that by writing this out. That should be upper case dark type HTML. Now, what this says is, Hey, Mr Browser, Chrome Firefox. Whoever you're using this document type is HTML Now, technically, it's not necessary, but it's good practice and you should have it on all your pages. Anyways, In older websites, you might see HTML is equal to some weird Lincoln here or, ah, html 4.1 or some odd looking stuff. We're on html five these days. It's been that way for several years. So just right, Doc, Type html. Now when I say this and refresh my page, you're not going to see anything but Here's a little trick you can right click and go to inspect page source. And look at that. Your code shows up in your now don't type passwords or anything like that because all of your code is publicly accessible. We're not talking about security in this course. We're talking about getting up and running with a responsive website, and that's it. Now the next thing we need is we need HTML. So if you're not familiar with HTML, it always looks like this. Eso you've got some sort of elements. That's what is called and then usually have got a closing tag. So all it is is, Do you make that bigger for you? You have an element, and you've got slash element, and it uses opening and closing brackets. I guess you could call Mother not actually brackets. It's the greater than and less than symbols with a slash indicating of the element has been closed and anything inside of there will be well contained inside the element. This will make a lot more sense to you in the near future, I promise. So now we have an HTML document, and I'm just gonna change that tab sized to its better. You can write a little bit more on my small screen here. So now what I can do is write head. Now, I've got a plug in called Emmett where I'm allowed to just create any sort of HTML element , for example, on input element. And I can hit Tab, and it just creates it for me. If you don't have that V s code might have it built in, Adam might have it built in. If not, there are plug ins for it. Otherwise you can just type. It was a long way. It's actually not that long. It just head and then you type slash head again, My browser or not, my browser. My editor automatically closes my tag for me. So that's pretty nice. Anyway, So we have this section called ahead, and that's where we put things like our title. So if we look up here, just says hello world dot html. But we we don't want that. Always just say that. So we say title. We've got an opening and closing tag in here. So half of an element of the opening half is attacking. The closing half is the closing tag and we're gonna call this how watching our project be called. Um, let's call it coding cave. Refresh my page and you can see that it's changed up here. That's coating cave. And any time I change this and refresh my page, that title is going to change coding Cave Coding Cove. In fact, let's not call that. Lets maybe call it ah, website Kickstarter and that doesn't really look great. So I'm gonna split that onto a new line. Save that and HTML doesn't really care about extra space too much. Now, if we go end, you know, I'm gonna close that so I can demonstrate this again. Right Click on the page, go to view page source. And look at that. There's our code it matches in here. Did you to do to make that smaller? So the stuff on the left matches the stuff on the right cool beans. So that's all we're going to do with our head section for now. And that's really all we need to do. For now. The next section is really important. This is where you put all of your content, is where you put it. Some of your in line styles and all that kind of stuff. So we have this element called body, so you can think of your HTML structure as, ah, human body. HTML is all of me. And the head is obviously my head. Ah, and the body is where my body says so in here is where I can put anything so I can put hello world. And, uh, now that doesn't look any difference. Then when we did it this way No, I mean, the title looks little different, but not really So what we did with all this extra stuff is we set up our website so that it could have CSS classes or just see a size and general from external files, we could have JavaScript files imported into our into our web page will get do all sorts of things, whereas with a regular text page like this one, we don't have that option. All 4. Page Structure: all right, moving forward. We are going to want to create maybe like a header and maybe a little bit of a foot or something like that. So let's just start with basic HTML. For now, we're not going to worry about CSS JavaScript or anything like that. We're just going to worry about HTML. So I'm gonna make this smaller, and I'm going to create an HTML five element called knave. And this is going to be our navigation. And we're going to call this website Kickstarter. Now again, this doesn't look any different. But if you go in view the source, it does look different. And you will see why in a little bit why this is really important, why we have to what's called nesting we nest are elements inside of other elements. Next to do to do. Let's create Let's create an element called Footer. Let's put and copy 2018 cause that's what I've created. This this course Copyright 2018 Caleb Tallinn. I guess stalling if I could spell my own last name. Right? Cool. There it is. Ah, this, by the way, is called an HTML entity. So what we could do is we could copy that, and we could throw it in here, and that will still work. Ah, but sometimes you don't have access to that right away. So we have these things called HTML entities. And what that does is we are allowed to basically write the word out. It starts with an M percent of the end symbol. Whatever your symbol is a like, greater than and then ends with colon. And today, so now it looks like, Ah, greater than sign. Make that bigger for you. I apologize about that one. Ah, so this one is a greater than symbol, but in our source code, it says and GT semicolon. Anyways, that was a quick lesson on that. So let's change it back to copy. Cool. So now we've got a knave navigation. We have Ah, footer in there. And then let's put a body in here. And this one just going to be a dip. Now this div is everywhere. If you look at the source code of any website, you will see Div is everywhere and that's basically just ah dummy element. You can do anything you want with it by default is going to take up a lot of space. So if I put my Web page on our website in in here, cats are knocking at the door. We see we have three different lines here now What if what if Ah, in the knave? I wanted to put another line in here for whatever reason. Website Kickstarter and I wanted to put ah version 1.0 on a new line. I refresh the page and it's all together. But if I look in the source code, look, it's not together. It looks just like my written code. Well, that's no good. So how do we put a new line in there? We do this thing called a line break. So be are and this is a self closing tag, so you don't need to do the br slash b R. That doesn't exist. We just do b r. And then we have a self closing tag, so it looks like that little awkward at first, but you'll get used to it. Additionally, browsers are super smart these days, and you could just type b R if you wanted to. And there we go. It's no, we've got website Kickstarter version 1.0 of my website in here. Copyright 2018 Caleb telling Nothing fancy, nothing exciting. Let's get on with it. You know, in our diff let's create another element in here and let's call this one banner, but we're going to create another def. So this is called nesting. We're putting a div inside of a devora element inside of an element, and that's called nesting. And I'm gonna give us a class on, Give us a class of banner and this is not going to do anything. And this is just going to say hello world. Nothing happened. So at the core of HTML, this is what HTML does. There's no styling. There's not really any coloring. Sometimes you can add tables for layouts and stuff, but generally HTML is just thesis skeleton of your website. So if you were to look at the skeleton of your own body with nothing else around it, no other contacts. No muscle, no tissue, no brain, no vocal chords. You wouldn't be able to do anything cause you just be a skeleton. And so how we make other more functionality would be JavaScript. JavaScript allows me to move my arms and CSS allows me to wear a reddish shirt. It allows me to have my hair style the way I want. It allows me to have a beard. Now, if you take this metaphor and apply it to your website, CSS is your styling. It's your colors that your font, it's your icons, is all that good stuff. And if you apply the JavaScript sort of analogy that I made, Ah, it is your functionality. So when you're typing into a search bar and more search automatically drops down, that's your JavaScript, that's that's what it's doing. Ah, when you try toe, go from page to page. That's a link. That's HTML. There's nothing special about that. We'll talk about all these things. Ah, little bit later. 5. Adding CSS: So the next thing we want to do is we actually want to add some style to the site, because right now, honestly, this site is super ugly. It's no good. So what we're going to do is I'm gonna create another file, and this one is just going to be called style dot CSS. I'm gonna save this exactly where my hello world dot html file is, and you can see it in here. I got a couple other files, but I've also got hello world dot html. Now this one has to be dot CSS. That stands for I'll take this out cascading style sheet. And this is where you put all your styles. So this is where you make your website pretty. So there's a certain type of mark up for that. We're going to deal with a little bit of that. I'm not going to talk too much about the markup or the syntax of it. We're just sort of going to dive into it. If you have any questions, feel free to ask. I'm happy to help also. Ah, you can just hop on Google. Every CSS question in the world has been answered by now, So Google has all the questions. But if you want a little more personal touch, feel free to reach out to me. You leave a comment below most likely for in our Facebook group learning to code. So moving forward. We have this style dot CSS, but that doesn't do anything. In fact, this html file has no idea that style that CSS even exists. So we need to tell this html file that, Hey, there is another file just over there. But we need we need to bring that in. So here's what we can dio. We have this this element called Link, so I'm gonna type out Link. We want to give it an attribute. That's what this looks like, an attribute Rehl is equal to, like rela short for relation or relationship. We're going to say this is a style sheet and this is just telling the browser that, Hey, we're going to import another file into this HTML file. But just so you know, it's a style sheet. It's not plain taxes, not Jason. It's not javascript, it's CSS. And we have this weird attribute called H ref. So, like you could think of it as a hyperlink reference, and all we're going to do is type style dot CSS. Now that style dot CSS matches. I'm not going to do that to closing, Tangled. I'll do the regular one here that matches the name of the style dot CSS. Now, if I save this and refresh the page again, you're not going to see anything. I'm gonna show you a cool trick because a lot of people can't figure out why styles don't load. So just ignore this part. I'm sad. Ted. Uh, okay, so we've got a red border around everything. What you can also do is right. Click go to inspect. This is your inspect tool. And it will look something along these lines you're in. Spectral might be on the right side, I think by default crumpets on the right side, I usually put mine below the page and you can actually see if things are loading. So this didn't give me any console errors. It didn't say that style that CSS wasn't loaded. But if we said style dot CSS. And maybe we had a typo in there and we put style dot CS, which is not the same as a cascading style street. We refresh the page, you notice that my style doesn't kick in. But also, it says a file user killed Tony in desktop style dot CSS um, did you do to do I could not get it. And so basically, what's that that is telling us is Hey, we can't load this tile street because we don't know where it is. And if you ever run into this, you can almost be guaranteed that this is a path thing issue. Now, if I re set that back to style dot CSS refresh my page. My council does not complain, and I get that ugly red border around everything. I'm gonna go and delete that. Forget you even saw that CSS for now. Time to close this and to do to do, say, if refresh. Okay, we're back back to where we started kind of 6. Styling Our Page: all right. Now we need to style our knave, and we want to style our footer and our def. We might also want to style our body a little bit. Remember, with CSS, you can style any element, so ah, let's style our body. First, let's change that background color and you can see that my editor automatically fills in some of these things for me. Background color. And if we want to change that to read, we just type red. Well, uh, we got ugly red background color. We might not want that. So we're going to use a hex code that's just off white. Ah, as a crash course, F f f is shorthand for six efs in a row. So this is white, which you could also type white. Um, you could also do rgb uh that, uh, 255255255 That's all White. Now, if you don't know what any of those are, guess what? Don't worry about it for now. You don't have to know all that stuff right now we're just getting started, so don't feel overwhelmed. I'm just showing you a few cool features that might show up in your future as as a developer. So we want to sell this background color to something that's off white. Okay, you notice how that color change a little bit. Ah, What if I did? F 000 a little darker. Yeah, Let's go with that for now. I might actually change out a little bit later. Now, the CSS syntax that we see here is we select our HTML element. This is our body, that body element that matches here and then we have some curly brackets were on opening curly bracket. We have what's called a property and change a tab size back down to two as well. We have our CSS property. So this one was called the background color. So it's selecting this whole body of the entire page, and it's changing the background color to whatever we specify it too. And in order for CSS to know when to stop adding styles or want to stop listening for any other style changes, we use a closing curly bracket. All right, that's cool. But that doesn't really do anything useful for us, so let's make this a little bit nicer. So let's select our naff. We have a Navin here. We've got our opening and closing curly brackets. And let's say we wanted to add a different background color, just something slightly different. And again, all these styles might change a little bit in the future. I'm completely winging this, by the way. I have no have no layout Plan of style plan. I'm just going off of what I know. And I'm hoping that Ah, well, you're gonna learn a lot from what I'm showing you. Plus during the background color. In fact, let's not use background color. Let's just use background. And this one is actually just going to be Let's make it almost black, dark grey, ash, something like that. Okay, so that you can see is not a great start, but with a few little adjustments. And again, there's a lot of CSS properties and you don't need to know them all right now. But what I'm going to do is I'm going to change the the padding of a body of this body. Save that refresh did nothing. I'm gonna change the margin of the body to zero as well. And there we go. Now, if I go in to inspect and I select body, make this a little bigger here. And let's go ahead, get rid of that stuff. We can see that by default. Chrome is adding a margin of eight pixels to the top, right bottom and left, and all we want to do is get rid of that in patting. We see nothing so we didn't actually need to write patting at all. That was my mistake. But you know, live and learn, right margin could be zero. What it currently is is eight pixels. We want to change that to zero pixels or zero for short our nev. We want to change the color, so we want to change the text color. It's not font color. It's not text color. Text color would be helped helpful if I could both speak and type. Ah, this one is just called color. So let's change that color to white. But instead of using Hex, let's go ahead and just call it white for simplicity sake. There we go. And next we have we've got a divine here and we've got banner. So this def is basically our body inside of a body so inside of our body element because we should only ever have one of these. We have a knave. We've got what's going to be called our body. Don't confuse this body with this body. This is an attribute of I D. Or Rather, this attribute, called I D, has a value of body. It's not the same as the element body. They look the same. They're different, and it also has foot or so Let's go ahead and style that footer Let's do footer, margin top so we can add a top margin here and let's add 40 pixels. And let's change that font size, so you notice how with the font color, it was just color. But this one is called font size, though it's not size, although, uh, that seemed like you gave me an option. This one is just called font size, and we could put realms EMS. We could put pixels. Ah, let's go ahead and sick with a general pixel size and let's do 14 pixels. So this will make this font nice and small. Let's close that up. Let's make that even smaller. In fact, I'm already zoomed in here, so let's zoom out. So we have a better idea of what's going on here. Um, now, let's change that font size as well. To, uh, let's do something big. We want much bigger 25 pixels and calorie fresh air. You can see that the phone is getting bigger. And let's also add some padding to her now padding. So the difference between padding and margin. Ah, this confuses a lot of people to begin with. Margin is the spacing around your element and padding is a spacing inside your element. So if we right click to do, to, do, to, do, go to inspect and 7. Inspector Tool: So I just went into the foot or one. Here. We could see that there is a margin top of 40 which is what we have written in your CSS. There is no border, there's no padding. But if we wanted to, we could add it. In fact, we could even add it right into our page. Doing it this way we could do padding. Let's add something crazy. 50 pixels. And so that added a bunch of spacing on the inside that's patting. And it did, patting top right bottom and left all 50 pixels equally pretty cool. Don't get caught up in the mistake that this is permanent. This has not saved your file. You have not edited the Internet. You have just edited your version that is being served to you. So if we refresh the page, our changes air immediately gone. So in order to save those, we have to do padding 50 pixels save, refresh. There we go. That is in there. So every time we refresh the page way click on footer. We can see that the padding in our ah, our box element here is 50 50 50 50. Sweet. I'm gonna get rid of that. And again the styles might change. Now let's go back to our body. So we've got body and we've also got a banner in here now, inside of this I d body, we might also have some or content. In fact, we might have something in here called Content. Now a lot of people ask me, Caleb, how did you do that? What's what was a shortcut? I type number sign, and you'll see why it's a number sign. I take the word content and hit tab and my plug in em. It will just automatically create a div for me, which is really, really nice. So now I've got a Devyn here and I've got a div up here. One has a class of banner, one has an I. D. What's the difference? I'll show you. So let's first target our body Now This is why this number sign is important. Div. We can't just select everyday because if we select every single day if watch this Div border to pixel solid bread and I will correct my typo So I've got a diff here. I've got a diff here and I've got an opening div here and all three of those have closing Div tags. A refresh the page. Actually, I was terrible. Example. Bear with me one moment. There we go. We can see that there's a to pixel solid red border of brown, both of these. And let's add a line breaking here and you can see that it's really tough to seeing here. But you can actually see that there is a two pixel border around the body as well. Now we don't want to target all of those in CSS. When use type div or knave or footer, you're going to select every element called knave, give or footer. And that's not necessarily what you want. Sometimes it is, but not necessarily. So what we want is we just want to target this one called I d. Now we have two ways we can do this. I'm gonna get rid of this. Makes some space toe work. Always give yourself lots of space to work, and I can type number sign body. And that means we're targeting an I. D. So you can think of it like this number sign is equal to ideas equal to body. Something like that. Now that's not valid markup. That's not valid syntax. So we're gonna Teoh, we're gonna turn that back into i d. And in here we just use the number sign or hashtag or whatever you want to call it these days. Now you also notice that we've got body here, reveal body here. This one is just selecting the element. This one is selecting any element with the i d of body secondarily, we could also do div body Ah, we don't need to do that because bodies are not bodies. Rather, ideas should always be unique. So if you have one I d. On your page called body. There should never be a 2nd 1 Your page will still work, but it's just a bad practice. Just don't do it. An idea is supposed to be like your identification. It should be completely unique to you and your country. Your citizenship, your passport, All those things are completely unique. Those air year identifies that is part of your idea. And just like with a website, you haven't. I d in here as well and this element has a particular idea of body moving on. Let's change this body so that there is a padding of 20 pixels and do to do to do What do we want to add in here? Let's do font size. Ah, fairly big ish, I guess. Text a line center. So we're going to send to this. This could be left. This could be center. This could be right. We're going to claim that to be center. 8. A Quick Message From Yours Truly : Hey there. I'm Caleb, your teacher for this course. If you like my way of teaching, feel free to follow me on skill share for new course updates and announcements, block posts, things like that's everything that I send out is completely educational. Um, and it is meant for helping you. I also have several other courses on skill share that cover topics like HTML five CSS three JavaScript, PHP. Even how to get a job is a front and Web developer. Get get hub and more so, feel free to check out any of those if you're interested in any of those topics as well. But most importantly, and I know that this is still very early in this course. But if you could leave a review telling people what you enjoy about this course, what are you currently enjoying? Where are you seeing the most value right now? That would actually really help me out again. It's totally optional to leave a review, but it would really, really help me out. Ari. That's it for my promotional message. Let's get back to learning 9. Parents and Children: Oh, hello. So Ah, you'll notice that both hello world and testing are now centered. And that's because we're styling this element. And inside of this element are these two. And so this is saying Okay, well, it's a child. You could think of it like this. Your child. Um and you. So if you're a parent, this would be a good analogy. So your child is going to by default, pick up on some of your habits, your trace. They're going to look like you. They're going to like similar things to you. And so this one is called a parent element, and this one is called a child element. But we are just using ideas and classes, but generally the hierarchy or this indentation that you see. That's parent and child. Okay, Caleb, let's move on. Let's make the site nicer. So we've got text line center in your Google. Cool. Next one we want is our banner. Let's change our banner. Now we have dot banner. What this dot means is we're selecting a class. Now watch this. My plug in emmett dot banner tab automatically writes, class is equal to banner. That's pretty nice. Okay, so We've got a banner in here and we're going to do something a little bit crazy with this one. Let's change the color too white. Let's change the font family. We don't want it to be a Sarah font. Ah, we wanted to be a sans serif font. So let's to use something boring. We'll call it Ariel and watch this. It's hard to see. So hold on, let me undo that. Oh, by the way, this is called a CSS comment. If you don't want this actually show up, ah has working code. You can just comment it out, but you can still keep it in your code. So when I refresh the page, that text is different. So you can see that this is called a Sarah font. Make this bigger for you and it has, like, these little ticks has got a little tick around the T. It's got a little tick around the k up here. Ah, there's due to do were little tick in the eye. And if we go back in here and I'll just show you the difference Testing group, that is how you not do it. Testing. Refresh. There you go. That's the difference in fonts. So this one is a san serif necessary being those weird little ticks. And this one is this, Sheriff. There you go. Crash course lesson on funds. Did, uh let's undo that. 10. Adding a Gradient: let's do that. And I want to add a nice little Grady. It's now I'm not going to go into the intricacies of radiance and said, What I'm going to do is frankly, I'm going to be a little bit lazy. We're going. Did you cheat? And I'm gonna type CSS radiant generator. And this is going to bring me to beautiful thing called Color Zilla. And I apologize. My screen is that's better. And, yeah, my screen was little zoomed in there. Um, so let's go ahead and make a Grady int. Let's, um I don't know what color do we want make any color we want, uh, did Ah, let's who knows? I want something that looks nice. But you know what? This course isn't a boat picking the perfect colors with courses about. I'm making a nice website, but not that nice. And so all I did was I made my Grady int and it gave me the C s s. So I'm gonna select all of us. Copy that. Roger. Roger. Copy that. Copy and paste gives me a lot of code in here. Change my indentation, blah, blah. Indentation is not required by the way It's just makes it easier to read now when I refresh us. Oh, hello. There's a nice little radiant in there, but you can see that there's a bunch of padding and stuff and we don't want that. Now we've got an issue. This is very common. You're going to run into this a lot. As a developer, you have padding in here and you want this Grady and to reach the sides. But you don't know why it's happening. So we click into body, which is its parent element. We can see that in here. We can see it in this, By the way, this structure right in here, where I'm moving my mouth, that's called the document object model, the D O. M or dumb for short. Now we can see that there is padding 2020 20 all the way around. And let's go ahead and remove that. Oh, there we go. We remove the padding, and all of a sudden my element can take up the full width. But again, because I did this in my browser and refresh the page, nothing is actually saved. So let's close that, and we know that the pattern was the problem. Let's get rid of that save. Refresh. Oh, hello, There we go. But I want some padding in my banner. I want a little spacing above and below. Now remember, there's a difference between margin and patting. I'm gonna show you Margin top. Let's do 30 pixels. This will add a gap between my knave and, well, my banner. No, I saved the wrong one. There really Look at that 30 pixel gap that's no use to anybody lives. That's no way to live your life, especially if you're a banner. Instead, you want patting. Patting is the spacing on the inside. So what this is going to do is change that padding to be on the inside and stretch that that Grady int up to the top. We're gonna stretch the whole element up to the top, and nothing's gonna look a lot better now that's maybe not necessarily all that you want. Maybe you want some padding on the bottom padding Dash bottom 30 pixels. Oh, hello, things we're looking OK, zoom out again. 100%. That's looking a little bit better, But what if we wanted to add some height as well? Let's let's add some height. We've got height of, ah, 100 pixels. Oh, look at that. We can we can change out as well. We can also change that right in the browser. By the way, this inspector Will is your best friend. So I'm gonna change this height. I just selected the height value of 100 pixels. And I'm just pressing up, up, up, up, up, up, up, up And it goes up by one every time. Or I could make a huge change. That's 2 331 pixels. Look at that. But now there's there's a cooler way of doing this. We don't necessarily want to be 330 picks is by the way, if I refresh this page, it goes back to normal. Let's change it back to three under 31 Toto 11. Viewport Height: But there's another way. Let's say you wanted the height of your banner to always be a certain percentage of your view. Port height. Now your view port is this box. It is where your browser shows up. It's not your you, Earl. You are L bar. It's not. Ah, the tabs is not where your bookmarks are. It's none of that stuff. In fact, your view port does not even include this stuff. My view port right now is very small. In fact, if I go over body, I can see how size, how size, how big my elements are. But this is still not my view. Port, my view port is on Lee. What I can see in here now. What if I want my banner to always be 50% of my view port height? I could do 50 VH that stands for Vieux Port height, the debt that not how you spell right and then add a comment in there. Just so that code does not try to execute and break my style saved over here. Refresh didn't look like it made much of a difference, but notice how it's adjusting, so that's pretty neat. But Now let's say someone's on a smaller screen. Maybe they're on a phone and you always want this view Port height. Teoh to be, um, you know, a certain height. Okay, In fact, what this is actually when I say it's 50% of your view port height plus 30 pixels on the topless, 30 pixels on the bottom. So what if we said Min Height? We could set a minimum height, minimum height of, let's say, 400 pixels. We refresh your page and it gets bigger now as I stretch my page down. Um, yeah, this is a tricky one because this is out of my recording area. But if I move this up and I'll just you can see there's always a minimum height in there Now. If I had changed that regular height to 20 VH, you can see that there's a minimum height. It's always a minimum height, but if I change the minimum height back down to, let's say, 100 pixels, you can see that it adjusts a little bit more that way. Now, this isn't a lesson on height or min height or any of that stuff. I'm just going through this very, very quickly and hopes that you're going to pick up some pretty cool. You cool and useful. Um, little bits of information, little bits of knowledge. All right, so we've got a banner in here. We maybe want to center. This will get into that. Maybe a little bit later. 12. Content Section: uh, now we have our next section. We've got this thing called content in here I d content and we don't want that content necessarily touching this better. Now we've got two ways of doing this. We know that we can add a margin to our banner. Let's do this. I'll show you margin bottom 50 pixels. And remember, that's going to add that spacing outside of the Grady anted area and it moves everything down. Now. We could absolutely do that, or we could write another selector. And no way is better than the other in this particular example. And we could say margin, top margin. Wow, Third time's the charm, right margin, top 50 pixels and nothing changes. So there are two ways of doing this. And in computer science in development, in the land of programming and coding, there are several ways to do anything. Uh, sometimes there's a better way. Sometimes there's a more preferred by, but in this case they both achieve the same thing, and it doesn't really matter which one you use. So now what I like to do is I like to add a border. Let's at a border color red border with one pixel, border style, solid or for short. This is what I wrote much earlier when I told you to just forget that CSS that I wrote. I did one pixel, solid red. Now this is my elements. This is my content section in here. What do I want to add? Well, we can add all sorts of things in here, but first of all, we don't want that text to be aligned in the center anymore. So text align, let's go back to left. But oh, you know what? I've actually noticed that my website is hugging the exact corner of my view ports, my browser, and I don't want that. Nobody likes to try to read text that's hugging that side. It's just it's too much. It's an awkward design now that design might come back in the future, but as of right now, there's generally about a 15 pixel. With that, we would like to keep, um, as as a difference. So we want at least a little bit of a spacing in here 13. Adding Content Spacing: now again, their several ways to do this weekend set with we can set a max with weaken, do all sorts of things. But I'm gonna show you something a little bit cooler. Something that's, um, not just straight forward. So what, We're going to do it? We're going to say, with the 0 100% we save that 100%. Nothing changes. But what if we said with talc minus 30 pixels, that's 100% minus 30 pixels. Now, if you're trying to do that math in your head, guess what? Don't. It is very difficult math to do. And your browser is a mathematical genius. It knows what, 100% what this is in pixels, and it knows to basically get rid of 30 pixels. So now when I say this, you can see that there's some spacing over here. Now we want to center this this element. We wanted to be 15 pixels on either side. So the next thing I want to do is I want to set a margin margin, zero auto. And now what this does is margin. There's a shortcut for margin. So it goes top right bottom left until this is top. This one is right. And if bottom and left or not specified, they mimic the 1st 2 So bottom is also going to be zero and left is also going to be auto. You are learning a lot of fast paced CSS tricks in this course. Okay, refresh. Oh, surprise! Surprise! They got rid of my top margin, but it also centered my element completely. So now there's that 15 pixel. Ah, that spacing in here, you can see it. There's a 15 pixel spacing and here and here, Perfect. If I wanted to change the width of this element to anything if I wanted to get rid of another 200 pixels, my element is still in the center. So things were looking good. Margin top. Ah, we could do one of two ways. 14. Top To Bottom Styling: CSS allows you to write code from top to bottom. Anything below the stuff above it is executed last. So that's the stuff that sticks. So if I type margin top 50 pixels and I put that underneath this one, that will work. But if I move this code up one line, save and refresh, it doesn't work because this one has overridden the top one. It always goes from top to bottom. Like almost all code in all, programming languages echoes from top to bottom so we can override it that way. Or we can just say margin 50 pixels. And so what this is doing is remember Top right bottom left. Refresh my page. Voila! It's still centered. Everything is looking good. So let's go ahead and change it back to 30 pixels. 15 on either side and we center it. Let's get rid of this border. We don't need that. Hello? Oh, hello. So there we go. We've got something like that. Now we can do the same thing with our footer, and perhaps that's what we should be doing. 15. Grouping Styles Together: So what we want to do here is we if we want to add to styles that are the exact same to two different elements while we can do this and it works. But now we have two of the exact same codes. If I copy and paste that sublime says that there are two exact copies of this, that's no good. It's actually inefficient to write that two times anyways, So I'm gonna undo that and we're going to group selectors together. So this one is going to be footer and idea of content. Save and refresh. If I get hit, command are on the right page. Look. Okay, so things aren't really perfect. Footer in here has a text line left. It's got the width that's got the margin. Everything's good. Margin top. This one is now going to be 40 font sizes, 14 pixels and the padding is 50 pixels. Now. That pattern. Remember, if there is no top right bottom or left specified, it's going to take whatever that value is and apply it all the way around. So let's go ahead and get rid of this patting entirely because we didn't need it and let's say we also wanted one sec. Let me make some room here, Text align, center Because we want our footer to be right in the center so you can see that we have in our foot or selector up here. We've got textile line left, but that didn't take place because below it we wrote to text Align center. All right, so now we've got Ah, we've got a banner we've got ah, content section We have a footer, we have a navigation. Let's go ahead and fix up that navigation of it. That navigation is not look nice. Now we also want to apply that 15 pixel margin or that that spacing ah to our now. But we've got a problem. It adds margin. It adds that extra that with we don't want any of that. So instead, what we're going to dio is I'm just gonna redo that 16. Fixing The Nav: in our Neff. Let's go ahead and put a padding left 15 pixels patting right, 15 pixels. And look at that. Now our website lines up very nicely. We've got that nice even line right down the left hand side. Let's go ahead and clean up our and have a little bit further. So we're going to learn a few new things here. So I'm gonna get rid of that br and you're gonna notice that it's all in one line. We probably don't want that eso Let's go ahead and create a spend with a class called title . Let's go ahead and create a span called version or with a class called version. Again, nothing changes. We can always reference a source code in here. We can see that the span and the version are in there. The span class, title span, class version. They're both in there. Nothing happens. But we know how to change that now. So we've got Navin here. Now we can we can get really fancy and we can start to specify very specific elements we can say inside of now. And we separate this with a space select the span called Title and Let's do this. Let's change the color to red just to show you. Oh, look at that. There we go. 17. Specificity And Nesting: a generally good rule of thumb when it comes to CSS is to keep your code flat. Don't nest it like this if you don't have to, it gets that can get you in a lot of trouble later. Because what happens if I break my own rule? And I say span dot title color is equal to blue, nothing happens. This is supposed to be blue. So when I go in here and I inspect my title is red and blue doesn't take place You can even see the blues crossed out here. Blue comes after red. But for whatever reason, the browser says no, no, we're going to do read We're just going to, you know, the blue one. Now the reason for that is because we have this little guy in here. So when we start nesting our CSS electors, specificity kicks in specificity a specificity. That's a hard one to say. Um is going to make your life very difficult. Now there's a way around this. I'm gonna show you right now. This is a terrible thing. I probably shouldn't show you, but I'm gonna show you anyways, when I refresh the page, it's blue. It is the hardest blue I have ever seen that it's so hard to see. But the point is it is now blue. And so what this is saying is basically override everything above this and just blue, it doesn't matter. It doesn't matter what came before this just do blue. But now if we did spend a title again, we said Color yellow, it's still blue now. The reason for that is because important is taking place here. But important is more important than this. It's more important in this, and in order to make this yellow, now we off. Do we have to add important in here and now we have to have important every other time we want to do this. And so this gets into this terrible cycle of using exclamation mark importance on everything. My advice to you don't ever use it. If you don't have to, it will get you in a lot of trouble in a world of hurt, and it's just it's not writing proper CSS. If you ever see that, chances are someone was being lazy instead of actually solving a proper styling problem. Now I refresh cool. It's read, Um, if I get rid of that That parent element selector that now it turns back to blue Cool. And that follows our general rule of whatever comes first is ignored. Whatever comes last is used Now I'm gonna get rid of that. And I don't want a gene. Uh, what am I doing here? Foreign family. Um newfound family. Ah, can we do cursive? Is that gonna work on this computer? Newish computer? All Hello. It worked. Ah, newish computer. So I apologize. I was just testing something there. This one is called Website Kickstarter. Cool. And next let's do span dot title. Nope. Span dot version Color is also going to be a way. We don't have to specify that because the color is already white. In the Neve, we've specified color is equal to white. We don't need to do that. So let's get rid of both of those version. We want this phone size to be tiny, though for in size to be like nine pixels. Not really helpful. I mean, sort of help. It looks OK, but we could make this look better 18. Block Elements: and three below do to do to do to do to do in my CSS something or the very bottom just to make some room to work here. Right class, bread, border one pixel, solid red. I call it bread because border red. Okay, so let's let's analyze this. We have a span element beside a span element beside a span element, but this development takes up 100% of its with. Remember, there's ah, there's that spacing in here from its parent element. Otherwise, this would be 100% of your view port and below we've got more span elements. We have a span of a span element and a span element. None of those air useful until you understand what those actually are. So a span element has a display of in line. So we go like this, dude, nothing even shows up when we type in our filter here display. And that's because your browser automatically assumes that spans are always an in line block. But what happens if we change this one? Make me a div like element so you can see that we still have an element beside it, but what we can do that. We can select this one. We can add display. Oh, by the way, I'm gonna show you. Ah, cool feature here while you're learning CSS there are Well, this is a way to learn basically any property and the values that come with it Display. If you're ever unfamiliar of, uh, all of your options or you don't know what to Google, you can type display in here and Crume we'll give you all of these different options and it will display it for you on your browser. So let's go to block display Block looks a lot like my div contents is different. Flexes different. Flex has a bunch of cool rules. Grid is different. Initial is whatever it comes default with your browser. Um, in line is your span in line block is like your span, except it allows for margin and patting in line. Flexes flex with ah, in line elements. Same with, um, grid and table your list item. So it looks a lot like a list display. None. If you want to completely hide an element, guess what? Boom. It's gone. You could make it act like a table table caption table sell all the table rules in there, or you could just unset it completely. What we want for this one is we want block, display block and make me a deflect element. So this one is still a SPEN. But it has the default with off 100% just like a def element and will take up as much room as it possibly can and everything below and above. It gets broken onto their own lines. So that's the difference between in line and display block crash course lesson on that. Now I'm gonna go ahead, get rid lists, because that was fun, but ultimately is unnecessary for our project content here and going back to our main reason. We ah, we got a little bit off topic there was because I want to put this version 1.0 below this part here to to do to do where was i dot version dot version. So now I want to put this on its own line. We know that we could do display block and oh, hello. It's now on its own line. Okay, so that's hugging the very bottom. Let's do one more cool thing. Let's change the position by default position is always static. It's just it's where it is. It's never supposed to change. But let's change it to relative and well, that's basically saying is relative now allows us the top left, right and bottom attributes or properties to work in our CSS So we could say top. And if we wanted to move this down, we could say Let's move this down 30 pixels and it moved down. But if we check in our inspector do to do to, do, you have to have now, it shows that it's moving down. That position is that a top is moving down 30. What if we said minus 30 what's that has been lines 30 pixels that needs an actual value as a now we can't even see it. Refresh my page. See where we got. Let's say you know what, Let's do top initial. This is default. Whatever comes with a browser and I want to move it up. I want to move it up five pixels just so it's a little closer to the title here. That's okay. Let's do 10. Lets you attend. Looks like to close. I think that's a little awkward Ah, let's do eight pixels. Looks good. But with that curse up front, I don't really think that looks nice. So let's go ahead and say we're gonna moves over to left. Just a smidge. Let's see what five pixels does perfect. 19. Vertically Centering Elements: now next, we need to center this vertically now, historically speaking, centering anything vertically in CSS or HTML has been a nightmare. But with the invention of this thing called Flex, which we briefly spoke about about two minutes ago, ish were able to align this right in the dead center. Now, instead of writing on my CS as in here, saving going over here refreshing. I'm gonna do it all in the browser. Move that up. Um, no. Move that down. Because I need to be able to select my banner. It is selected perfect. And what I want to do here is so we can see we've got padding top and bottom 30 pixels with a well, a height, a min height of 100 pixels and let's you read in height, 100 pixels, high 20. Pick 20 20% of your view port height. Had to think about that one for some reason. Um, okay, So you know what? Let's make this a little more simple. Let's get rid of that stuff. Save, refresh, and you can see Okay. Cool. It's in the center. Now. Let's say this height always has to be always has to be 300 pixels. Now, this is always going to hug the top. Those remote you can see. So it's always in a hug. The top. We don't want that. We want it to be vertically centered. Now we know we can also add padding, padding top. We know the height is 300 pixels. We know the font sizes. 15 ish, 16 ish. Somewhere around there, we could set that so that we know for sure we could set the line height, so we know exactly how high that is. But just for simplicity, assume heading top 1 50 Oh, Okay. Well, that made no difference, because it still has so has a centering problem. 20. Box Sizing: not a vertically center. This we need to add some styles in here. So let's add it straight to our banner in here. It's get rid of that. We don't need it. And we're going to skip right down to the bottom. And let's do display flex. Okay. Interesting. Um, what if we by the way, you shouldn't know what flexes. If you're taking this course in reflexes, you you're probably to advance for this course I'll talk about flex in just a moment. Um, let's do a line items center. Justify content center. Oh, hello, The Rio. It's centered. We have patting top 50 0 no, no. We have far too much padding up there. Let's get rid of that padding. They're real perfectly centered now. If we changes height to anything, you'll see that that text always stays in the center. So as this height gets taller and taller, that Texas always perfectly centered. All right, so, uh, how do I apply this? Okay, well, to apply this well, I'm gonna do is copying paces because I'm being lazy. You can see that. Actually, my syntax highlighting doesn't understand what a line items or justify content is. That's okay, that happens from time to time. Get rid of that pattern because that's what we did. Refresh your page whom vertically centered just like that. Now what Flex box does and I have a whole course on flex box. If you're interested in that flex box will basically turn all of your child elements into flexible elements. So technically, because content is now a flex parent, or if where do we have any displays? Eagle to flex. We need to wrap this in another DIV. And that's just how Flex works. Now. In this case, you're not going to see any difference. But in in the real world, when you're working on real projects, you're going to see a difference. You'll probably run into it. Just make sure your rapid in a diff. So there we go. Let's go ahead and change that content. You know what? I did the wrong thing here. I apologize about that. What I wanted to do was do it in banner, not in content. I got a little confused there because the code to me looks pretty similar. Do to do to do, to do nothing to see here, Nothing to see here content here. Oh, hello. Nothing changed. Cool. Just pretend you didn't see that next. Ah, we've got content. Um, we've got to put her in here, so let's let's add some content. Um, And sublime Aiken type low room to 50. Tab creates a bunch of warm ipsum text. It is ugly. It is. Laura. Um, Google thinks it's in another language. It is. It's actually in Latin. Gives me a bunch of tax, and I've got something to work with. But what if Okay, I'm gonna wrap this in a p element that stands for paragraph, uh 21. Headers: and I want a header. In fact, let's do this. Let's change Div from header from deft header one. And in here we wanna use a head or three different size Just as an example, you can see that. Oh, header one is slightly bigger than header to Why is that banner? Do we have a font size in there? Let's maybe go ahead and force that phone size font size 40 pixels. There we go. All right, so we've got a big, better text. We've got a H three in there. Um, if you wanted to the difference from h two and H three age too. You saw age three. This is H four h five gets pretty small and age six. Cool. I'm have together to that, Laura, because that's driving me nuts. So let's do this content here. Copy and paste this five million times. Good enough. There we go. And let's change it back to an age three. Now you should know how to style your age. Three. You should know how to style different paragraph elements because we know how to select elements. We know how to select ideas, classes. If we wanted to add a supplementary class. We could do that. We could add banner, dash, dash small. And that would be like a smaller banner, in which case we would go over to you Banner Go doctor, do banner, dash, dash small. It doesn't have to be dash dash. That's just a style that I like. I could just be like banner dash small. 22. Modifier Classes: and let's do a height of 150 pixels. There we go, and we can even add it. All of this in our inspect again, this is a tool that not enough developers use. Ah, that I think is actually very instrumental in learning. Web development is your inspect tool. So to do, you can see that I took banner dash, dash, small. I got rid of it. I hit Enter made my banner bigger. If I and do it made my banner smaller. That's called a modifier class. So what we did here is we've added a base class just banner. It will always look like this. And then we have a modifier class that says, Okay, apply all of this stuff, but also overwrite the heights or add in additional feature. You can do that too. Now, let's add, um, an image. We want to add an image to to do what is an image place? Ah, Laura. Um, image to the cool. So this is a little a little service called pick some dot photos. I've never used this before. Um, but I'm gonna give this a shot. So this is going to give me an image. I'm gonna copy this. U R l just open up a new tab, Throw it in there. I have an image, and it just gives me a random images. And then if I change the width and height of it, it will change the image for me. So I'm gonna copy and paste this and in my paragraph, you're just somewhere around the middle. We're gonna add an image. The source is going to be copy and paste it from here. Cult. Just the all title. A title of image. And let's give it a class. Let's say float right. And we're about to get into some responsive design very shortly so you can see that this image is right in the middle. It's not floating. If you're unfamiliar with what float is will learn about it in about one minute. But the idea here is that this image should be moved over to the right. But it's not doing that. So let's add afloat. So right, save, refresh. Oh, there we go. In fact, actually, I want this up higher. I go. Hi, baby. Uh, your baby floating to the right. Cool. That looks all right. No, here's The thing is, this looks okay on desktop, but, like 50% more than 50% actually don't even know this stat anymore. But most users, most viewers of your website or going to be coming from mobile, and it's going to only get higher and higher. More people are going to be using their phones or their tablets, most likely their phones. 23. Responsive Testing: And so when we want to browser test a little bit. We right click Inspect. That just opened by. Inspector, I had this toggle device toolbar button, and it lets me drag the different size. Now, if I wanted to. So this is my tablet sized, uh, browser. Um, I could do deaf top ish. I can go bigger and bigger. Eso this is full desktop right now. This is what my computer would technically see if I was full screen. Um, we can go smaller, but let's drag us down. So basically anything under 6 46 140 pixels or smaller is considered mobile these days. So let's just click Mobile 3 20 This is what this is going to look like on mobile. Now, if you're looking at this and you're like, I can't really see that photo year in the same boat as everybody else, that photo does not make sense to be floating to the right. In fact, that photo should probably take up the full width. It should actually break the content a little bit. So what we want to do here is we want to add what's called a media query and now your website is going to become more responsive. So a media query looks like that's at Media Max with, and then you give it a max with. So in this case, 640 pixels, 640 pixels. Caleb, come on. And then in here, we type our selector float, right? And what we're going to say is float initial because there was no initial float. Remember, as now we want this image to have a width of 100% and a height of auto. So what this is saying is, Hey, browser, chrome, Firefox safari. Whoever you're using, take this image whenever your browser is less than 640 pixels wide. We know it's at 3 20 so it's definitely less than 6 40 Make this pixel. I'm sorry. Makes make this image 100% wide, and that height can be whatever it's supposed to normally be. It's now if we refresh your page. Oh, hello. Nothing is happening now. That's because our browser doesn't understand that this has to be a response of page by default pages air not fully responsive. Now you're probably thinking, Well, why is that? If most people are viewing Web sites on their phones. Wouldn't everything be responsive? Good point. But we have to remember that the Internet was used by desktops first and then laptops and then mobile phones and then tablets. And so everything is built for desktop. Now, what we have to do is we actually have to go into rhe moan. We have to add a little snippet of code. And what I'm gonna do here is I'm just gonna copy and paste this. I have this in all my projects. I'm not gonna type it out, but I will talk about it a little bit here because you don't necessarily need to see me type everything on the face of this planet. Otherwise, that would be a very, very boring course. So what we have here is a meta today. We've got two of them, actually, and we throw this into our head. So the meta tags saying, http equipped. We want this to be compatible with Internet Explorer. Um is equal to edge. Ah, chrome is equal to one. Okay. What does that really mean? Caleb, honestly, I'm gonna tell you right now, it doesn't matter what it means. Just throw it in there. I mean, if you're really, really curious, feel free to Google that one. It's not really in the scope of this course. Now your view port is an important one. Your view port with has to be the device with whatever your devices on my device right now is saying is 320 pixels. We need that with to be the device with And that initial scale is once that just says, make it one toe one. So always be. You know, if you're 320 pixels wide, always be 320 pixels wide. Pretty straightforward. Now when we refresh this page And remember, there's media query in here. Ah, that's pretty nice. Now, if we get rid of this media query, the CSS did it, and I'm gonna comment that out. Oh, by the way, if you're using sublime like I am and you want to comment something, select your code hit command and then the I'll show you because they're two different types of slashes. So you hit command, and then this version of a slash and you can uncommon and comment that it Ah. Okay, so that's commented. It floats. Looking good looking good. But you know what? Like this doesn't make sense. Come in this little small. If you're on a mobile phone, you're gonna look at this and go. This is a terrible experience. This is not what I want it all. So you add that media query that says when the max with the 640 pixels make sure this image is well, you know, with 100% auto Otto height. Ah, and disable that float. So that is essentially how you make your website responsive. Now we can do this with anything we want. We could go in here and we could say media, Um, in fact, let's do but do the opposite. Okay, So let's wrap our banner and media a men with of 320 pixels. So this will always be a minimum with of 320 pixels, and that is the standard. Don't ever assume that your browser is going to be less than 200 or 320 pixels. That is a very small phone, and honestly, that's not worth supporting ever. Phones haven't been less than 320 pixels wide in decades. Okay, so I refresh my page and my banner doesn't change. I'm gonna get rid of this response of design thing here and nothing changes. And that's because my men with is always trader 20 pixels. Now this is called Mobile First. What we're saying is we're going to style our website for more bile first, and then everything else gets layered on top of it. So instead of saying we're building a desktop website touching Mike there instead of So instead of saying we're going to build a ah website like for desktop, a big one for a laptop or something, a gun, we're actually going to build it for a phone. We're going to make it small, and then we're going to add media queries to handle bigger websites. So we do another one media query. Ah, men with Let's say is one is roughly tablet size 760 pixels, and we want to change that banner. The banners font size to be significantly bigger. So on mobile, let's say, did it uh, where's the font? Size 40? Let's make that 30 one second comment this out before any of these changes take effect. So this font size is always going to be 30 pixels. But now we're saying, OK, if you're on mobile or up, we want that font size actually bigger. We wanted to be 50 pixels. Look at that and watch this. And there we are. And so now your website is completely responsive. Now, if you want to get really fancy with us, you could add something in here called a transition. I'm adding it to my banner class, and this transition is going to transition the font size over 250 milliseconds, or 0.25 seconds, and it's going to have a linear, um, timing function. It's like how fast does it sort of start? And now it zooms and grows. Instead of being old and clunky and just snapping like that, it automatically adjusts, and your browser handles all the animation. Now, if we wanted to do something different, we could do, uh, he's out. In fact, that is a hard one to see, So let's do five seconds. This might even be a terrible example. He's in and out. These are different timing functions, by the way. And if we wanted to change this right in our browser, we can do that too. We need to be able to select the right element. Please bear with me. Please. Hold and cue. Terrible music. So you can see that we have this little, uh, It's sort of an icon, I guess. Um and it shows us what this actually is. Let me zoom in here. Okay. Apologies for that. I'm not used to working on a screen. So small Font size is what we're transitioning over half of a second and weaken type, uh, linear in here. Or we could type He's in out or we get type. He's in or out. Or really anything that you're unfamiliar with, You can either type directly into your inspector or you can just google timing functions or rather, transition timing functions. That's what you're gonna want to look up. All right, get rid of all that. So now our website is somewhat responsive. Even if I do this, you can see that it changes 24. Responsive CSS: So what we want to do here is we want to add what's called a media query, and now your website is going to become more responsive. So a media query looks like that's at Media Max with, and then you give it a max with. So in this case, 640 pixels, 640 pixels. Caleb, come on. And then in here, we type our selector float, right, and what we're going to say is float initial because there was no initial float. Remember, as now we want this image to have a width of 100% and a height of auto. So what this is saying is, Hey, browser, chrome, Firefox safari. Whoever you're using, take this image whenever your browser is less than 640 pixels wide. We know it's at 3 20 so it's definitely less than 6 40 Make this pixel of sorry makes make this image 100% wide, and that height can be whatever it's supposed to normally be. Now, if we refresh your page Oh, hello, Nothing is happening now. That's because our browser doesn't understand that this has to be a response of page by default pages. Air not fully responsive. Now you're probably thinking, Well, why is that? If most people are viewing websites on their phones, wouldn't everything be responsive? Good point. But we have to remember that the Internet was used by desktops first and then laptops and then mobile phones and then tablets. And so everything is built for desktop. Now, what we have to do is we actually have to go into rhe moan. We have to add a little snippet of code. And what I'm gonna do here is I'm just gonna copy and paste this. I have this in all my projects. I'm not gonna type it out, but I will talk about it a little bit here because you don't necessarily need to see me type everything on the face of this planet. Otherwise, that would be a very, very boring course. So what we have here is a meta today. We've got two of them, actually, and we throw this into our head. So the meta tags saying, http equipped. We want this to be compatible with Internet Explorer. Um is equal to edge. Chrome is equal to one. Okay. What does that really mean? Caleb Honestly, I'm gonna tell you right now, it doesn't matter what it means. Just throw it in there. I mean, if you're really, really curious, feel free to Google that one. It's not really in the scope of this course. Now your view port is an important one. Your view port with has to be the device with whatever your devices on my device right now is saying is 320 pixels. We need that with to be the device with And that initial scale is once that just says, make it one toe one. So always be. You know, if you're 320 pixels wide, always be 320 pixels wide. Pretty straightforward. Now when we refresh this page And remember, there's media query in here. Ah, that's pretty nice. Now, if we get rid of this media query, the CSS did it, and I'm gonna comment that out. Oh, by the way, if you're using sublime like I am and you want to comment something, select your code hit command and then the I'll show you because they're two different types of slashes. So you hit command and then this version of a slash and you can on comments and comments That it Ah. Okay, so that's commented. It floats. It's looking good looking good. But you know what? Like this doesn't make sense. I mean, this little small. If you're on a mobile phone, you're gonna look at this and go. This is a terrible experience. This is not what I want it all. So you add that media query that says when the max with the 640 pixels make sure this image is well, you know, with 100% auto. Ah, auto height. Ah, and disable that float. So that is essentially how you make your website responsive. Now we can do this with anything we want. We could go in here and we could say media, Um, in fact, let's do 25. Mobile First Responsive Design: but do the opposite. Okay, so let's wrap our banner and media a men with of 320 pixels. So this will always be a minimum with of 320 pixels, and that is the standard. Don't ever assume that your browser is going to be less than 200 or 320 pixels. That is a very small phone, and honestly, that's not worth supporting ever. Forms haven't been less than 320 pixels wide in decades. Okay, so I refresh my page and my banner doesn't change. I'm gonna get rid of this response of design thing here, and nothing changes. And that's because my men with is always trader 20 pixels. Now this is called Mobile first. What we're saying is, we're going to style our website for more bile first, and then everything else gets layered on top of it. So instead of saying we're building a desktop website touching Mike there instead of So instead of saying we're going to build a ah website like for desktop, a big one for a laptop or something, A gun. We're actually going to build it for a phone. We're going to make it small. And then we're going to add media queries to handle bigger websites. So we do another one Media query. Ah, men with Let's say it's one is roughly tablet size, 760 pixels, and we want to change that banner. The banners font size to be significantly bigger. So on mobile, let's say, did it uh, where's the font? Size 40? Let's make that 30 one second comment this out before any of the changes take effect. So this font size is always going to be 30 pixels. But now we're saying, OK, if you're on mobile or up, we want that font size actually bigger. We wanted to be 50 pixels. Look at that and watch this. And there we are. And so now your website is completely responsive. Now, if you want to get really fancy with us, you could add something in here called a transition. I'm adding it to my banner class, and this transition is going to transition the font size over 250 milliseconds, or 0.25 seconds, and it's going to have a linear, um, timing function. It's like how fast does it sort of start and now it zooms and grows. Instead of being old and clunky and just snapping like that, it automatically adjusts. And your browser handles all the animation. Now, if we wanted to do something different, we could do, uh, he's out. In fact, that is a hard one to see. So let's do five seconds. This might even be a terrible example. He's in and out. These are different timing functions, by the way. And if we wanted to change this right in our browser, we can do that, too. We need to be able to select the right element. Please bear with me, please. Hold and cue. Terrible music. So you can see that we have this little, uh, It's sort of an icon, I guess. Um and it shows us what this actually is. Let me zoom in here. Okay. Apologies for that. I'm not used to working on a screen. So small Font size is what we're transitioning over half of a second and weaken type, uh, linear in here. Or we could type He's in out or we get type. He's in or out. Or really anything that you're unfamiliar with, you can either type directly into your inspector. Or you can just Google timing functions or rather, transition timing functions. That's what you're gonna want to look up. All right, get rid of all that. So now our website is somewhat responsive. Even if I do this, you can see that it changes. 26. Desktop vs Mobile First: and that is a fully responsive website. That's all it is. So any time you have an element that doesn't fully change between desktop and mobile, then all you have to do is add this media query. Now you might want to do desktop first or you might want to do mobile first. The standard is mobile first, but I'm old school, so I do desktop first. Um, but I would say, Honestly, there's there's no right or wrong. Um, probably should go with the standard, though. Go with Mobile first so always right for the minimum width and then on top of that layer, anything additional so that you always get that exercise because screen sizes are always getting bigger and bigger and bigger, and I'll show you again in here. So I'm in mobile mode. My width is 7 32 I goto tablet size. I got a laptop size. That's a small laptop is. You can actually see it here where it says 1024 pixels, and this is also a laptop, a larger 1 14 40 pixels. I can go bigger. Four K, Um, hi. Computer screen is actually bigger than that, but what happens if you know on four K, we don't want this toe look as awkward as it currently does. What if we wanted our content to always be in the center, some sort of max with, for instance? 27. Max Width and Container Sizes: There's two ways to do this. We can add a media query and handle all the media queries, or we can go into our content. And that's because I want to select our content and give it a max width. Do do. Do we also want to do the same thing with our footer? And we say Max with not Max here with Mex dash with Ah, let's do 1200 pixels save, refresh. Oh, hello. That's looking pretty good. Go up to our now if we could do the same thing, Max with 1200 pixels Oh, hello. Actually, the never one doesn't look very good at all now. The reason for that is because our knave element is well, it has the background color and we need that background color. We just want to center the text in there. I can't really show you how that looks. So, uh, it's just right up in here now, in order for this to work properly, what we're going to do is we're gonna get rid of that Max with and go over to our now, and we are going to add one more element in here. We're going to wrap our spends in another div gravel That code. Move it up. So it's inside this div and let's give it a class of now. Sure, So now we can select both now and dot Now, don't confuse. These things are different. This is the equivalent of class is equal to have. This is the equivalent of now the element. So let's elect our class now and we want this to have a max width of 1200 pixels. It doesn't look like anything happened, but let's add her border one pixel, solid white and we can see Oh, it is actually only about 1200 pixels. Now we need our margin left auto margin, right, auto. And that says for our block elements only center it. They're really We get rid of our wait, and if we go back down into tablet, everything else is gonna look perfectly fine. Now that's one way of doing it. The other way of doing it is ah, we could also specify Amen with of I don't know, 14 40 pixels. So the large tablet or the large laptop size rather I'll show you I did it. The debt, a debt that not that one, This one. This is 14 40 pixels, and that's what we're targeting, and so you can see that nothing really changes here. But once we go down below 14 40 you can see that Max with kicks out, it doesn't exist anymore. And so that that logo or your title would automatically snap to left and again. You may or may not necessarily want that, depending on your project for this one. I don't want that. I wanted to always be lined up nicely here, so it always looks like your site has a container, even on massive, massive browsers like this one. This one is currently 2560 pixels wide, and you can tell that it's huge because there's well, I actually can't read any of that text. I can read the batter, but I can't read anything else. So there you go. That is, Well, you know what? That's responsive design. That's all it is, is just adding your media queries and overriding your CSS. Just remember good rule of thumb. Keep your CSS flat. You always want to keep it flat and ah, you always want to. I mean flat as possible. Sometimes It's not possible. Um, and you always always want to put your newer code at the bottom. So what I did here with my media query was because I was targeting float right for the image. I put it right below it. But what you could additionally, Dio is you could go down here, put it there, and I'll grab the banner one and then, Ah, where's my larger one? No, no, I got rid of that one. So I got those larger media queries here. We're not gonna move the men with one because, well, that's the men. Wits That sort of belongs with everything else but the max with one's air, sort of just additional. You know, it's hard to explain, but it's easier to understand. Um, people just go and get your hands little bit dirty. Now you can. You can try all of this at home. You can do all of us at home. And honestly, worst case scenario, you start over. This shouldn't take very long to do. It's taking a little bit longer for me to explain, but at the end of the day, if you don't like your work, you can just delete your style dot CSS or you could delete hello world dot html. So that is your crash course into creating your first HTML website. It is also your first crash course into CS s, a little bit of html five, some CSS, three transitions, a little bit of flex box, all that good stuff that will get you started, um, with responsive design as well. So now not only are you making ah, basic website, but you are starting to make a modern website. Now if you got lost anywhere along the way or if you want to learn more about just HTML or if you really want a master CSS, uh, or just you want a master flex box or just CSS selectors, I have courses for all of those. Check him out on skill share, Caleb dot io You can check him out on you. To me, they're all over the place, so feel free to definitely dive into those. If you want to get, you know, a little more experience. This again is a very, very basic website. We didn't do anything difficult with this. What we ended up doing was we created. Now we, uh, use a little position trick. We changed our font size. We made an image float to the right unless it's on mobile than we made. That image really large looks a little bit better, and people just keep scrolling down their screen. We did all sorts of things like that. 28. Adding JavaScript: now, one thing I didn't talk about was JavaScript. Now, if you want to add javascript to your page, there is a way to do it. And you should always do the footer of your page. And I'll explain why. So if you want to add JavaScript to your page, which we're not going to do right now No, I lied. We're going to do it right now. We have this thing called script and we add the S R. C. So this one is going to be javascript dot Js. And when I refresh my page with my inspector open, my console will give me an error. It says this file does not exist. So what I'm gonna do is create a brand new file and we call this javascript dot Js. I'm gonna save it where my style that CSS is where my hello world is. Um, you can actually see if I do this. JavaScript Hello world and style. Let's CSS are all in the same directory along with three other miscellaneous files. Save, refresh. And I actually have a reference there. So now we're getting to actual programming, and this one says javascript is not defined And so you want to save my job? Script Js file And what this is doing is basically saying javascript a J s is not proper code suspect. So what do we want to do here? Nothing. We don't want to anything. This is how we add a javascript file. Now, if we want to add a little bit of javascript, we do something like this. Hello. My name is Caleb, and this is an alert. And so when I reload this page, this is what's going to happen. My browser is going to say Okay, this is now a media friendly, a mobile friendly page, and I need style that CSS loaded. After everything is loaded, we're going to load some javascript again. I'll tell you why we put at the bottom of the page now that JavaScript immediately is going to load any code in here, your browser boom is gonna start running it, and I get an alert. Says hello. My name is Caleb. You could also do something a little bit different. You do, consul dot log testing in here. And when I opened up, my inspector, it says testing in here. So when I refresh the page testing. And here, testing here. You got Consul in here too? You could do, um, any of your javascript. You want alert? Hello? Do all your job script in inside of your council, just like your CSS JavaScript as the same thing. So I'm gonna get rid of that, because that is going to be very annoying. Now, the reason that we add our JavaScript below all of our HD males, because sometimes javascript it Well, not sometimes. Almost all the time. JavaScript needs to load the html in here. Now, this html. Remember, This whole thing is called your document object model. Now, if you put your JavaScript at the very top of your page and it tries to grab for instance Ah, the banner. But this banner element has not loaded yet. Javascript will air on you. JavaScript will say. Oh, sorry. This doesn't exist. Here's an error, and I'm going to basically break your website, and you really don't ever want that. So what we do is we put this javascript, a source file or the JavaScript element at the bottom of our page. And what this does is allows all of this stuff to load because, like all programs, things load from top to bottom. So javascript once it says Okay, I need banner dot Js. It's already been loaded because banner better not jazz banner dot CSS are the banner Ah, style selector. Rather get my words little mixed up here. Ah, what it's saying is, OK, I need to grab this class, but it already exists because it was loaded before me. So it has to be there. Perfect. And so that's why we always add javascript to the bottom of our pages. So there you go. That's everything you need to know about making a basic website with HTML ah, and CSS and how you can add your JavaScript file in there. 29. Adding Icons: There's one more thing that I wanted to show you. I apologize about that. I keep saying one more thing. Just one more thing. Icons. Icons are amazing. So if if you have ever been to any website you'll notice of their icons. There's this one called font. Awesome. We're gonna go fund awesome! And in here how to use on the Web Get started. And it gives us a little Lincoln here to copy. So I'm gonna copy that link and this is CSS. You can see it says CSS. So we put our CSS in her head, save we refresh your page. Okay? Nothing happened. There are no errors in our console. Things were looking good. Now let's go into our banner and to do Where is our banner? Hello world. Let's put an icon of a world Yes, we do F a f a dash I think it's world. In fact, I'm not going to do it that way because that it was irresponsible is a teacher. So I'm gonna dio um I and I element class is equal to font Awesome f a space f a dash world no don't exist. Maybe it's globe There it is. Hello. Cool. We got our own little icon there, and you can change us too darn near anything you wanted. Teoh. Email doesn't exist. I think that one is actually called envelope. Ah, and if you don't know what what I comes are accepted. There are hundreds of them. This is all completely free, by the way. And you just have to reference foreign awesome dot com. We go over to icons. You have all sorts of logo, So ah, let's say Facebook, Facebook f So this Facebook F So how we got F a dash Facebook dash f is it says Facebook dash f And we know that foreign awesome always need to be upended by f a. You can also click into it if you want to. Dio gives you all sorts of vectors and whatnot. It's pretty cool. So that is all you would need. And I just under that Ah Facebook efta envelope. Keep it nice and simple. And OK, now I promise who were done 30. Summary: quick summary. What did you learn? You learned how to how to structure and html page How to import dot CSS files How to import dot Js files? Not necessarily in this order. Ah, you learned about html elements html classes along with CSS classes. Um, you've learned about CSS i ds as well as CSS ideas. Ah, you learned about Ah, specificity. Um and how basically that is a massive heart break or you learned about important. You learned about ah, responsive design. That was sort of a big one. Sort of the whole point of this course to be honest, responsive design. Ah, you learnt a boat font. Awesome. You even learned a little bit about ah, flex box, which is a crazy subject. Um, you learned how to vertically align your banner. Ah, you learned about Max with And if we just go over here, basically you learn about float with height, text align, funt size background color backgrounds. Ah, with class modifiers. Ah, Grady, in because we use color zilla um you learned how to justify content a little bit. Um what else we learned? Position relative. And how do you just slightly reposition things and we learned. Uh oh, jeez. Here's a good one. You learn that in your browser you can select anything you can edit anything. So my foot or now says, edit anything. Ah, you can directly change all of your styles directly in your inspector. You can see your box element in here. You learned about box sizing, which is a massive, massive thing for CSS. It is hugely important subject. And you even learned in your console that you can write some JavaScript. So there you go. My name is Caleb telling if you enjoyed this course, if you learned anything, please leave a review. I would absolutely love a review. If you have feedback, feel free to send me a message. Don't forget to join our Facebook group called Learning to Code. Um, if you want to see any more of my courses, I have other courses on HTML CSS CSS three CSS selectors. Ah, flex box. JavaScript. I've got a full stacked development course. And if you're wondering how to get a job as a front end web developer, I also have that course available. I've got a suite of things that you can learn from May and I also right on Caleb dot io. Um, do show here also right block posts on. Caleb died. I owe the block. Posters are completely free. You don't have to sign up or anything. It's just available for you in here. Deaf Blawg, please leave a review. And if you want to do one better, you can follow me at Caleb Tolley in on Twitter. I don't really tweet that much, but what I do, it's usually something pretty good. Thank you again for taking this course. I really appreciate you taking the time. I really hope you've learned something super, super cool and super useful. And I just hope to see you around. I like connecting with developers. So again, join our Facebook group. Come say hi. Come. Let us know what you're working on. Feel free to ask questions if you're ever stuck. Um, thousands of deaths, including myself, are here to help. All right, good luck. And I'll see you out there