The 2019 Frontend Developer Crash Course - HTML & CSS Tutorial for Beginners

today you're going to begin your journey into front-end development oh and hey I'd like to mention this video sponsor Skillshare comm now it's a brand new year here in 2019 and Skillshare will help keep you learning and thriving as they offer 25,000 different classes in coding design business and more for instance you're about to watch my front-end development course but you could follow up after by learning sass at Skillshare Skillshare is also super affordable with a subscription that only costs 10 bucks a month but if you're one of the first 500 of my subscribers to click the link below here in the description you get the first two months free so take advantage everyone what's up Gary's timing of course Etro so today I'm releasing this really big free crash course into front-end development now just last week I released a UI design crash course where we spend all of our time in Adobe XD and I explained exactly how to design a user interface as a UI designer now today this is kind of a follow up course where we take that UI design mock-up and we make it a reality in the browser as seen here using HTML CSS and a little bit of JavaScript so I just showing you two side-by-side browser windows just to show you that it is responsive and I'm going to approach this from the perspective that you are an absolute beginner you've never touched HTML or CSS and JavaScript and so the initial part of this course is going to be focused on I maybe just a little bit of slides maybe about 20 minutes worth but it's really important as I say you'll understand you know the conceptual elements of what HTML CSS and what it means to be a front-end developer front-end developer essentially and then next after that we're gonna spend all the time in the code editor making that project the mock-up a reality alright so if you haven't yet make sure you subscribe I have a ton more content coming this year and let's go ahead and get started all right so welcome to the very first exciting slide 2019 front-end developers crash course for beginners and we're gonna be implementing UI design so first of all what is front-end development well front-end or Fe as the acronym is uses web technologies such as HTML CSS and JavaScript to implement UI design so typically you have a UI designer who will create the mock-ups for you know the different screens associated with the website or the app and they'll hand them off to you as the front-end developer to then take those mock-ups and make them a reality in the browser with HTML CSS and JavaScript now sometimes as I advocate that you have two of these roles kind of mixed or combined a lot of times if you're a freelancer you may be doing both of those roles yourself and I think it has an mclee ranted and a benefit to you if you're a UI designer to understand HTML and CSS and vice versa all right so let's go ahead and continue on here so first of all let's talk about equipping yourself with code editors all right so there's a bunch of different code editors out there me personally I like Visual Studio code them the most it's it's free it's from Microsoft I has a lot of plugins and a huge community a lot of support I use sublime text before this there's other ones like atom no plaid notepad plus plus there's there's Dreamweaver there's so many options to choose from but a lot of people these days are using Visual Studio code so you can use that as well that's what I'm going to be using once we get to the project portion of this course so let's talk about the very very basics I again I'm aiming this at absolute beginners eyes so if you already know what this stuff and you just want to get in fast-forward to the part where we actually start you know coding HTML then go ahead and do that so HTML first and foremost is an acronym for hypertext markup language all right sounds scary but it's not so it's basically a language for building web pages HTML elements allow you to define different areas of a web page so what's let's take a look at what HTML actually looks like so first we start with the tags now we're gonna cover specifically the anatomy of of HTML and the terminology and the lingo that's goes with it but when you start an HTML document you start with the HTML tags and everything goes inside of there so it's a container of sorts next we have the HTML head element all right so I basically when it comes to the head element it provides information or metadata about the HTML document itself so let's take a look at what some of these other HTML elements that you find within the head element look like so you have one I called the title so for instance when you click on a webpage and you see the document in the browser title right there that's where it's coming from it's in between those title tags right there another common one is to link up your CSS file that's associated with that HTML document and we'll get to CSS in a bit and then there's also other meta tags like made a description like which provides a description to the search engines like Google when they're listing out your results and also made it keywords and in other ones there are other ones that exist in here but don't worry about those for now and so yeah common HTML ament's and the other tags include a style where you can write inline CSS or CSS inside the HTML document itself in script tags as well for JavaScript alright so let's take a look at the body element so if we have the we start off with our HTML element the head and then underneath that goes the body element with our opening and closing body tags so the body element defines the main content of the web page and it's basically the viewable the visible part of the web page that people will see so when it comes to the the elements that are found within the head section of your HTML document that's nothing that they see on the actual screen that's all defined within the body tag alright so let's talk about HTML closing elements and verse what are called Singleton's right here so this would be an example of a way of a closing HTML element it's it starts off right here it opens up with an opening tag by the way this is called a tag eye and it starts with a less-than and then the tag name and then closing so this would be a paragraph tag and it's just it's just simply p and you can put your paragraph text inside of here and then the closing tag is right here I this right here this whole thing is called an HTML element in and of itself I so it's it's it's important to understand it's useful to know the terminology so this is a a closing element essentially I next up these are what are called Singleton's and I really didn't know that until recently the terminology out these but you notice that like for BR that's we're putting a new line break basically in your HTML document between text that does not have a closing tag as you could see it's self-contained there it's self closing as it's sometimes referred to as being and there are other ones as well so let's take a look at HTML attributes so in example right here so we just saw the image tag which by the way is a singleton because it doesn't it's self closing I we can see here we have two different HTML attributes we have this one right here and then we have another one right here and they're structured so that the attribute starts with a property name equals and then it's bound to a value right here so this is linking to an image and then the alt tag is required and that required attribute on the image element I and it just provides information about the the the the graphic that's being shown and that that's this doesn't get shown in the browser really unless you hover over the graphic and it'll provide you with information but it's also even more useful for people for instance who are using screen readers all right that showed up after the fact okay so let's talk about class and ID attributes so I here's an example of what these look like again the saint's installs it follows the same format as all the other attributes but these in particular I thought I would mention because there's a lot of different type of attributes but you see these ones a lot and they could be basically placed on any HTML element in this case it's a paragraph tag and I the class attribute is most commonly used to point to a style and CSS so it'll it will allow this the CSS to use it as what's called a selector which we'll get to later on to provide style to it and then the ID attribute is most commonly used for JavaScript and we'll get to that a little bit later as well all right and by the way both these can be used in CSS in JavaScript so you can reference IDs in CSS I as well although it's not common anymore so let's talk about the div element so I the div element is normally used as a container for other elements and again there's a lot of HTML elements that I'm not mentioning but just as with the previous slide I wanted to mention this because you see that very often in your HTML and so it's it's normally used for defining different layouts and different different visual properties of the layout I through CSS so that's just something to keep in mind all right so let's also talk about what US semantic elements are so an example of these semantic tags would be form for instance header and section and these all just you use these when you're writing your HTML to be to rewrite semantic hTML it's basically about language the there's also non or non semantic elements such as div and span because they don't really tell you about what the section is being defined again understanding this isn't a hundred percent vital if you're just starting out but it does help because you see this terminology in different tutorials and and perhaps other friend of developers as well HTML validation is very important so there's a right and wrong way to write HTML elements there's an online tool and there's there's a bunch of them this one is a popular one valid validator w3.org and you're the only thing about this is your your project has to be online and available online somewhere otherwise if you're you're just starting out you're in your development environment on your computer and it's not yet online you have uploaded the files to a server or whatever then there are extensions that you can use for modern code editors I've for visual studio code for inst in the other ones as well and so I'll be using one of those so while we're typing our HTML it's gonna let us know if we screwed something up like if we left out an attribute that's normally required all right so I if you're confused just understand at this point that there's many HTML elements and attributes and each has a distinct purpose and Google based on your needs all right so when you're you're going to write your first you know HTML document you may have a question you know okay what is the HTML element or the tag name used for displaying video just go to Google type in HTML video tag and trust me you're gonna come up with a bunch of results at w3schools com will probably be one of those results and it will provide you with what it is I both how to use it and along with any other attributes that you can use along with it so now let's talk about CSS so it's an acronym for cascading style sheets and it's a language for providing style to your HTML elements and it could be defined inside of an HTML document that says element I should fix that with the style tag or in a separate CSS file itself which is what we're going to do because when you start writing out a lot of CSS you don't want that cluttering up your HTML document so what does CSS look like there it is very exciting stuff not really it's actually very simple so let's break it down I first yeah and we're gonna go through a bunch of terminology right here and it's very useful to understand the terminology and to use these words correctly and not be confused when another front-end developer friend starts talking about things telling you to do things and you don't know what they're talking about so here's the basic terminology for all of this right here we have two different roll sets so this is a roll set as well as this okay next up our selector so when you start writing a rule set you start off by a selector now a selector can be an HTML element itself like the body which is the biggest HTML element where you start off for the visible or viewable portion of a webpage or a paragraph in this case down here or it could be the IMG for image tag so there's a those type of selectors there are also these selectors of the class selector which you start off by writing a period the period or the dot means class and then the name that you gave the class or if you're going to reference or an ID you can do that as well with a hashtag by the number sign plus the name of the ID you gave it so those are selectors next we have the Declaration so we open up I the rule set with these squiggly braces or the brackets right here and inside goes what are called the declarations in this case we have two declarations this right here in this right here and then in this rulesets case it's only one declaration so some rule sets can have 20 different declarations then we have inside of the declaration it's two different parts you have the CSS property name followed by a colon and then you also have the CSS value associated with that property and it's the value and then you end the declaration with a semicolon all right let's talk about CSS units and they provide CSS provides you with absolute in relative units to define lengths basically in length will obviously be very important when you char structuring a layout expressed by a number value plus the unit so an example of this would be the property of font size with a value of 30 and then the unit of pixels which is an absolute unit so let's talk about CSS absolute units so there are fixed units thus absolute and thus will not change between different screen sizes unless you're using media queries and what I'm going to get into media queries in a second so common I these absolute common units here would be centimeters as in cm millimeters inches pixels points or pikas which I've never used once in my life and then we have CSS relative units all right now relative units are relative to another property thus they will not change between different screens I'm sorry they will change between different screens automatically so when I say different screens for instance if you ever been on your desktop and you have your window I open up your browser and you go to to maybe enlarge that window by left clicking and dragging the edge of the browser out you'll see that on some websites the size of the the type for instance the text will get large or the images will grow and get large those are done with relative units examples of these are the percentage which is the most used I would say of relative units am in rem as well these are specific to typography units and scaling up your type you have V W and V H for viewport width and height as well as viewport minimum and maximum all right some other just interesting CSS things you should know as a beginner a CSS has multiple selectors so if you have a rule set and you have multiple HTML elements that should be styled with the same declarations I you can just add them with a comma right there so you can you can apply the same rule set to multiple selectors also CSS has functions there's about ten or eleven of them or so here's just an example of two of them being used as property values that's where they're there that's where they're placed at and it's always this the function name opened up by parentheses and then depending on how many parameters they accept you just separate those by comma so this for this would be suitable for a background color where you're using red green blue values along with I an alpha value which means you can make it transparent this is you can also do math for properties so if you're trying to make the margin which is dealing with whites based on the web pay you I designed you can use the calc function and you can you know you can do division multiplication you know all the four primary I math functions that you can you can add in their CSS also has animations which we're gonna implement in a very simple manner I with our our document and they allow you to animate these HTML elements through both the animation property and the transition property so the animation property along with keyframes allows you to create more complex animations so if you define an animation that's ten seconds long you can use keyframes I in and control the the values of different properties in terms of the percentage between you know that occurs for that ten-second duration it's a little hard to explain without showing you so I will show you an example of this when we get to the project and then the transition property is more simplistic it simply allows you to transition between two different CSS values all right CSS media queries this is a very important one and we're going to get into because we're gonna make our design responsive so media queries allow you to define different rule sets for different screen sizes and this is referred to as responsive design responsive CSS responsive web design RWD as it's called and it allows a page to adapt courting or accordingly to varying screen sizes and this is an example of what a media query looks like so you define it up here and you use something like min width or max width and you give it a value of maybe something like 650 pixels and then you put in your rule sets here where you can either add remove or define new rule sets or overwrite rule sets that were written outside of here to change them based on the width of the screen so just as an aside note I back when I started learning CSS and in web development general in like late 90s early 2000s we didn't have responsive design because we didn't need it we only when people used web tait web pages they only used it the context of a monitor these big bulky computer monitors the CRTs are called or I they're they're a laptop and so the screen sizes were all pretty much the same in terms of size but then once the iPhone came out and people had devices and small devices that were in portrait mode that they could hold on their hand when they visited web pages it was hard to use them because the web page would just automatically shrink down I it was hard to use him he had to screw soom in and still to this day there are still some web pages that are out there that are older or maybe they're they're built by old school dudes who never learned media queries and responsive design and it's just it's a pain in the butt to use as web pages so that's the purpose of these media queries essentially next I will talk about very briefly about JavaScript so before I get into JavaScript some pros might be like what are you talking about you're done talking about HTML and CSS there's so many other aspects of course there are but I really only wanted to touch on the absolute beginner fundamentals which is what I just did of course there's going to be more intermediate to advanced concepts but I'm not gonna bog down a beginner with all that stuff what I just told you is probably gonna get you buy-in most people very far as far as a conceptual level understanding goes so JavaScript itself it's a scripting language for implementing features like user interface and interactivity animations 2d 3d graphics stuff like image carousels and more so what I mean UI interactivity so I in the context of the example that we're about to start coding I when you're using it on a smartphone and you see the little hamburger icon menu that you see up there the three lines that are stacked vertically on each other when you you touch that eye you have a menu that's displayed somewhere on the user interface automatically that's done with the help of JavaScript so there's three different layers when it comes to eye building web pages as a front-end developer and so first is HTML next is CSS you need to understand those things pretty much together and then once you have a solid understanding of those two things then you can start learning JavaScript it can also be written in an HTML document with a style I know with the script tag look at me screwing this up or inside an external javascript file now also as an aside modern front-end development frameworks like libraries are in Rianne libraries like reactive view and angular they are written with JavaScript and I only decided to mention this because chances are if you be you're you're itching to get into web development research it a little bit and you've heard of these things called like react or if you or angular just understand that those are written on top of JavaScript and you should not be touching those if you're a beginner alright so like I mentioned before you if you're interested in front-end development you first start with your HTML your CSS then you get into understanding JavaScript itself sometimes that's referred to as a vanilla JavaScript just plain old JavaScript then once you have a good understood understood as it pertains to JavaScript I can get into react view and angular I'm not going to be getting into too much JavaScript here only because I I'm going to be pointing out a free course on an introduction to JavaScript very shortly so that's why you need to subscribe up if you haven't yet and click that bill notify a notification icon all right so now we're ready to rock and that ends the boring slide portion so now we're going to give some context to this this theory that we've been going over and things are going to start like making a lot more sense actually I guess we actually start doing all right so let's get started all right so the very very very first step that we need to start with is to first create a folder on a computer so you could be on Mac you could be on Linux you could be on Windows whatever it doesn't matter hopefully you know how to create a folder if you don't you need to probably not watch this course anymore and get some basic computer skills first but I'm gonna create the folder right now using the command line and I'm just using a console console emulator called commander and it's free but whatever and I'm gonna go into my code folder and then type and make Durer m'kay Durer in which is the command for creating a folder and I'm gonna call it front end or I don't know that's just what I literally came up on the top of my head right now we're also good after its created we're gonna put double ampersand for and afterwards after its created we're gonna CD or we're gonna jump into that folder and that's gonna be front end er all right so now we're in there and at this point I want you to if you're brand new to this and you don't already have a code editor I go to Google type Visual Studio code download download it install it and then you can real aunch your I your your console if you're gonna do it this way and then open up I your code editor your Visual Studio code and it's going to type in code period inside of the current directory and that will launch its launching on my different monitor over here get over here I have to update it apparently it'll launch Visual Studio code in this new brand new empty folder right here under alright so this is what the code editor looks like a little scary if you're new do it don't worry about that now right here is new file that's what we want to click we're gonna create one called index.html and index right here is an important name because most web servers recognize this as being basically the starting page for a given folder alright so index dot HTML okay so this is once we create it this is where we're going to start writing out our HTML alright so first let me get rid of that and you can also notice that there's something different that maybe you don't see mine icer shows my index.html with the number 3 by the side but if I go to view and I go to my problems we could see I have this validator extension that I've installed already so if you don't see this that's the reason there's I in in an extension I that you can install for your validator for these things to show and it's already given me issues saying certain things aren't in here that need to be in here in terms of the HTML document itself so if you want access to install this this plug-in you just click over here the extensions and you type in w3c and then the one I haven't installed is right here and you can see it doesn't have the install because I already have it installed so just click install and go through the steps and it's very easy to install it and you'll have to reload your Visual Studio code app and it'll reload it for you and you'll be ready to go with it and so you want to go to view and then problems to get this little indicator down here me for the purpose of writing the code and having as much space as possible so you can see what I'm writing I'm not going to show it but again it's a good thing if you're starting out to have that there alright so I what we're gonna do now is just go back here to our document and let's get started so I'm gonna take a little bit of a shortcut here and by the way if you want to change the size and scale of your type and the UI itself you can hit control key plus the plus sign to make it bigger or the minus sign to make it smaller so for now I'm just gonna make it big so you want to make sure you can see everything so if we we can do a shortcut to get some of the boilerplate or the initial HTML written out of the way because it's a little bit cumbersome and annoying to have to write out all these initial CSS our HTML tags every time you want to write HTML so if I just hit the exclamation point and hit enter we see that it's going to give us all this HTML one side tip or a side note to save space on my screen I can hit ctrl B to get rid of that sidebar and then ctrl B to bring it back so I will be doing that periodically alright so here we're gonna see some things that you pray aren't familiar with I lied earlier one of the first starting tags that you want is your doctype which is just defining it as HTML you don't ever have to touch this or worry about it and then we have our HTML tag right here has an attribute called Lang which we're setting as English you can see that the HTML it starts right up here and it closes way down there at the very bottom everything else isn't contained inside of it so next up as I mentioned before we have our head tags and we have some of those meta elements that I mentioned before you don't have to worry about these don't even worry about them don't let them confuse you right now just forget about them the ones that you can really worry about at this point in time are the title notice it just says document and then also we're gonna link up our CSS document which doesn't yet exist but we're gonna link it up right here we use that the link element or the link tag I'm gonna hit enter and this when it comes to visual studio code you don't have to hand type everything which is pretty handy I could I could sit there typing it out by hand I like this which is probably good to understand initially sorry my phone's gone off I but really if I just type link the name of the element hit enter it's going to fill in some of the default attributes for us and notice we have an attribute called href this is where you specify the location in the name of your CSS document that pertains to this HTML document here here so I think we'll put it in a folder called CSS and then inside of the folder we'll have a file called main CSS some people call it style.css whatever it's up to you there we go and that's good with that let's also change this we'll change it in a little bit I just wanted to show you what this title I element does in a second just gives trilby to get back this section over here this panel and let's create that folder so this right here is the folder icon we're gonna call it CSS and then inside of it it ought to make automatically selects it by the way and then we can create a new file inside of it called main CSS so this is where all of our CSS is going to go but first we're gonna focus on writing the HTML so I want to close that out okay now right now if I wanted to breve you what this HTML document look like in the browser there's a couple ways I can go about it I can right click on the HTML document itself and I can just do to reveal in Explorer and if I bring this up I double-click on index dot exe I let me get on my monitor over here this is what the HTML document at this point in time basically looks like let me save it by the way which is what that little circle is it means it hasn't been saved yet so if we save it and refresh it we will now see at the top it says document I is what's defined in this title tag so if I save this or update this to front end of course now if I save this come back and refresh we see it's there but this is Google Chrome that's my default browser by the way you can right-click in it and view page source Firefox has something similar so does Internet Explorer view page source by the way will show you all the HTML that's in there currently also you can hit ctrl shift I here in chrome and you can get some other tools you can see the elements themselves and any associated CSS with them we'll get into that maybe a little bit later though one thing though like I mention there's a couple ways to view your HTML as you're developing and working the way I just showed you is annoying because every time you make a change here you have to refresh the browser doesn't sound like a lot of work but it becomes a very annoying tedious pain in the butt especially when you're dealing with the CSS and you're trying to look at my new changes that you're making to have to refresh a thousand times or hit your your f5 refresh key instead of doing that we can use a an extension I right-click and we choose open with live server I believe that's an extension you have to install yep it is it's called live servers right there I haven't installed already same thing install it reload and come back and when we do this open with live server you'll see down there it says starting and then it's telling me there's an error on my port that I've set up because I have it running on a different Visual Studio code window hype open on another monitor let me just retry that again you can also right click here like I mentioned open with live server or just hit go live so this time it worked it will pop your default browser with it in here so what's cool about this is if I notice there's nothing in the page right now if I just type that in the body tag and I bring it back over I didn't have to refresh it automatically refreshed and want to save the file it does this for CSS as well very very handy stuff okay so let's move on with the next part the next section of this course here which is writing the actual actual HTML alright I lied before we get to writing the HTML I have to mention this part you know so this is the the UI design that we did in the the free UI design course that I released a week or so ago and this is what we're going to try to make a reality in the browser through HTML and CSS notice that we have our desktop version here and also a mobile version of it as well now we're gonna do what's called mobile first CSS and really we don't have to worry about that part until we get to the CSS but I just wanted to mention it first and foremost and also before we get to the CSS we have certain assets here like this vector graphic that we created the two people down here these icons right here the white icons I've made all these files available so you don't have to sit here exporting these within Adobe XD so just download that wherever that is in my youtube description and then I want you to take all those files that are in the image folder and then created an images folder inside of here I'll call this images and then drag all of those images over and I'm gonna get those images real quick myself so I'm just going to right click actually let me think I have to right click and just drag them right there into images and there we go these are all the images that we're going to use here alright so now let's get started with writing our HTML now the first thing you have to ask yourself when you're starting to write within your HTML tags here within the body tag is what do I need you know what are the needs of the user interface and I'm about to design so you're gonna be always going back and forth and maybe if you have a second monitor you'll have this up on the side between your UI element and seeing you know where are we starting so start from the top left basically in in maybe before starting that ask yourself if you want a fluid design where the entire user interface will always be scale to the very left and the very left of the browser to the very right of the browser or are we going to even at a different screen size ever are we ever going to want to make the browser to kind of stay inside of a single block like this so if that's the case and it is it is our case because when this gets at even larger viewports like really big 4k monitors I I don't want it to extend all the way out when it comes to this primary content like the type based content right here because if we don't have much content really so I'm going to confine it within a container so we're gonna add a div element right there so I just type div and enter to get that there and I'm gonna give it a class because I'm going to want to style this element in CSS in order to tell it well you know how much of the width of the browser or the viewport as that's called should it take up so the div I'm gonna give a class and it's gonna call it container which is a common class name for such an element for a layout all right so next up after that I let's go back to our UI what do we have next we have this logo right here right now by the way as an aside note when I exported this this eye right here is editable type it hasn't been converted to outlines which I think what you would need to do with something like Adobe Illustrator or another vector application so because I exported this as just you know an unflattering I type right here you're gonna have to have the user will have to have the the font montserrat in order for this to load in the SVG you normally would not want to do that but I'm not really too concerned just for the purposes of this tutorial so we have this already exported inner images folder and how do we how do we display in an image in HTML well we use that IMG element alright so we're gonna come out there and another thing you have to ask you else do you want the image to be clickable for instance another you want our webpage and you want to get to the home page you might click on the logo you would use in a tag or an eighth element for that and we we're not gonna do that we have a home button here already it's probably good to do that just as a general just because people usually expect it I'm just gonna leave that off though so keep things simple right now so I'm just gonna type the name of the tag which is image and by the way you asked yourself how did you know its images well it's because I've been doing this for so long you will too once you start getting the muscle memory down you keep sticking with it and doing you know HTML writing your HTML if you didn't know just go to google type how to display an image in HTML or saw or HTML image tag it'll let you know so as you see it puts the necessary attributes for when we use this code completion feature in visual studio code so the source is going to point to our images folder our logo SVG SVG is a scaler of skate scalable vector graphics and it's a vector graphics as opposed to raster graphics and it's and was always better to use vector as opposed to like a JPEG or a PNG for these types of elements like a logo so I'm going to put in images forward slash logo SVG now notice our alt uh we could just put the the company name 23 and 4 I think that was the name of it logo something like that and then we also have to ask ourselves if we want to be able to style this I as a selector in CSS why would we want to style an image you may be asking yourself well if we want to move it around like through margin and padding and we want to control the size of it because SVG files you can make real large or real small without the I've the quality loss I can give it a class so a class we're gonna call it logo something that makes sense all right after that what is next well we come out here and we see a navigation in this case on the desktop version we have just four links but on the mobile version we have this hamburger icon menu so we're gonna have to account for both of these as it pertains to the HTML elements that we're about to write all right so when you look at these by the way you'll see what are these I this is kind of like a list right it's an unordered list which is an HTML element represented by the UL tag so don't worry if it's a little bit confusing you know don't worry too much before we rate that UL tag though I remember when I mentioned I was disgusting disgusting disgusting I was discussing I HTML semantic tags well one of them that would make sense to use here is what's called the nav tag so we simply just wrap everything that comprises our navigation inside of this nav tag right here do you have to do it no but it's a good practice to do so all right so after this we're going to have I we're gonna put in our unordered list so we'll say ul all right we want to be able to control it through CSS so we're gonna give it a class now one thing to note when it comes to the CSS I figure I just mentioned right now real quickly is i if you only knew you're gonna have one unordered list tag I in your HTML document then you wouldn't have to give it a class because the selector then would be just UL I and you would that would be okay to do I but if you had multiple unordered lists or if in the future your your document might change to where you might have multiple unordered lists then if you want to style them differently from each other then you need to give them a class to differentiate them between them - that's just a different way to give them to different selectors so we'll say class and I this for the class of this the only thing that we need to reference for this particular I HTML element is I'm going to give them kind of a generic class names of show desktop and hide desktop all right so you might be wondering to yourself why would we do that well for this element up here which is what we're designing for right now we're going to create through a CSS rule set that will I show this only for desktops and it will hide it when if it's on a viewport like on a phone all right and so we'll be doing the same thing with this icon as well and in fact because we're doing we're gonna be doing a CSS mobile-first CSS we're gonna put this actually above it in terms of the HTML you don't necessarily have to do this but I want to put it up here just because we're starting first with mobile HTM OCS mobile first CSS so what this is going to look like is I'm gonna wrap this in an a tag as it's clickable and I'm gonna put a tracker right here going to nowhere and so a hashtag for the href location for instance if you had multiple HTML documents like another sub page like services this is where you would put that to direct the user to another HTML document but if you don't have one you can just do this and then we can put class equals hide desktop so notice we're using the same class name right here and here because once we get to a desktop view port resolution with eye we're gonna hide that hamburger icon menu because we don't need it anymore inside of here we're gonna put in inside this closing tag by the way as it's called we're going to put in our image now I have an image that it created in our images folder called ham as in hamburger right there hamed SVG the alt will be maybe something like toggle menu all right and also we do we need any other attributes in here well we actually need a few so we're gonna put class equals menu that will allow us to position this icon menu as well as an ID of menu as well for JavaScript so that when a person clicks on it we can we can attach a different class with it through JavaScript if you're confused don't worry about too much about that in this point in time now also for our unordered list right here we're gonna add an ID as well because we're gonna have to reference that with JavaScript later on but don't worry about what is happening there in that regard at this moment in time you'll see how this starts to come into play along with this at near the end of the course so the way an unordered list works is you open it up with the UL element unordered list element and inside of it accepts by other different elements such as the li the list items and so you'll have multiple list items and this what gives you your bullet point looks I in the browser in fact I'm gonna show the browser right here on the right side just to give us an idea of what things are looking like as we start to write this HTML and so this is what our HTML looks like so far it's not very impressive clearly but what we want to do is if you're using Chrome we'll hit ctrl shift I and when you see this icon right here it says toggle the device toolbar if we choose this we'll see I it changes the look of it and it's notice says iPad pro we can change this to an iPhone X for instance it'll give us the perspective of what this looks like in an iPhone for instance so that's one way to do it I to look at it like this way but because I really want to shrink this in this this navigation as much as possible what we can do actually is we can take this and scale it like that but it's still showing a little bit too much of this area so what I'm gonna do instead just for the purposes of this tutorial I'm gonna toggle this out and you can still simulate the same thing just by dragging in I the the side of the browser so I'm going to put this permanently at least for a while up over here so we can get an idea of what it looks like on a mobile viewport as it stands right here so then what I'll simply do is I'm going to change up my size a little bit and I will bring this down a bit and get things situation it's that's that you wait it up just a bit all right and right here it looks good I had control B just so we can see more of what's happening yeah I think that'll be good right around here alright so as we save this is gonna automatically reload okay so we can see we have our 26 in 4 logo right here we have this toggle menu that is showing the one thing I think we're gonna have to change here I is this right here this wasn't showing up images /cam to SVG there we go now it's showing up as I supposed to now notes showing up underneath the logo as opposed to the right eye when it comes to just HTML without CSS that's how things are going to stack on top of each other it's gonna look real bad for a while until we get to the CSS portion so let's do this UL class right here for the unordered list so the way this works if we put in Li alright so we have a list item and then if I just do this you know it's putting it whatever and save it you'll see over here just above me we have our first list item so this is actually gonna serve as our navigation so if I hit a because we want our navigations to be links and the way you create link links that are clickable is used to a tag right here and it's an opening and closing tag that you'll notice and we'll put in for a location we don't have like a location so we're just gonna put in the hash tag right there and then we have inside of it the anchor text and so I if we type in home for instance that would be a first link you'll see it's now a clickable link that we can access so I a real handy way of replicating lines of code in Visual Studio code just hit the shift alt in the down arrow key as many times as you need it so now we can change this up the next one is services our mock-up about in contact all right we didn't need this one but we do want one more eye element list item element at the top and what this is going to be is when I when somebody clicks on this icon right here it's going to display this navigation this this navigation as we have right here and there's going to be an X icon and exit to exit out and close out that navigation drawer that's that's been opened and so we're gonna need a list item for that specifically alright and so if some of the stuff is not making sense to you that's expected you'll see how it all comes full circle as we do the CSS and then JavaScript I just I can't iterate that enough so inside of this first one I for the exit icon I'm going to I put in an image and the image we don't need this within a link because it's not taken to another page so we're gonna put in an image tag so IMG the source is going to be images forward slash exit SVG this is something that I actually didn't design in the mock-up if we look at the mock-up over here we'll see there was nowhere that I put it like an exit I didn't even really draw or design what the the navigation drawer looks like that's something that normally would be handled by the designer but I just wanted to put that disclaimer in there but it's just a simple X is all it is an SVG graphic I the alt we're just gonna say exit menu alright and we're gonna need an ID attached to this because we're gonna use JavaScript to detect when somebody clicks on this exit button and I automatically add a CSS class that will hide it basically along with the rest of the menu so the ID is going to be exit we're gonna give it a class so that we can style it specifically called exit - BTN and then hide desktop so we're gonna hide this button during desktop basically when they're in desktop mode because that's not going to need to be shown when in the large desktop so that looks pretty good to me right there all right so that's our navigation let's save this and this is what it looks like so the importance of CSS can't be stressed enough but let's continue on and one element that I did forget to put in another semantic element is right here right after the opening container div right here this is all what I would consider header information so I'm going to put header right here and we're gonna end it just out just before our closing div tag which is right here so it closes out right there and just to get everything kind of indented up there we go you can see how by the way we indent lines to make things a little bit more easier to read another thing to do is if you want to collapse certain areas that you don't want to see you can hover over here and then just click on that minus button and now all the stuff inside of header is now closed out if you need to try to find your scan areas of your HTML they're harder to find all right so that's good right there okay next what we're going to do is focus on what comes next so if we open up our XD next we have this illustration alright so with this vector we have a headline and a sub headline alright so let's go ahead and work on that stuff so just after the closing header tag we're gonna put in a section semantic element because this will define a primary section of our document in this right here is what's usually referred to as a hero section alright so inside of there we are the first element that shows up is that image that SVG graphics so image source equals images server SVG the alt I'm just going to put in server graphic or illustration whatever and we'll give it a class to style in a future and to position it correctly as server so notice how big it shows up by default in this browser all right next up after this all right we're going to have in let's expand this a little bit after our image we're going to have a another HTML element that you haven't been exposed to yet which is I the h1 through h6 I headlines so what that means is when you have important areas of your webpage and in terms of the type type of graphic elements whenever you have like a headline of an important area of your page then in our text specifically then you can put it inside that these h1 tags right here normally you don't split them on different lines so you can just put in the name of what you want like web hosting for the modern era and there you go you can see it's right down there of course it's not using the font that we want but you'll see that I we can change that as well going forward here momentarily ok and by the way these are not headlines they're technically called heading headings heading tags alright so after that we have what comes next we'll see that we have a sub headline so I'll just copy this text right here and this time we're going to simply use a paragraph element you saw that earlier so we put P we're going to give it a class because I want to be able to reference it of subhead and again these names you can come up with them on your own so there isn't something technically called sub head I'm just giving it that name we're gonna paste this in so this is what our HTML looks like so far and then we will put in another image element which doesn't show up here because if you followed along touring during the UI design course that I did or the responsive part which is like part two of the series I decided not to have the little scrollable err which we do have over here because on a smartphone you're going to see there's just clearly information that you can scroll but on the desktop version you may not see this bottom portion so this is going to be an animated scroll icon that kind of gives the user a hint that they should scroll down so to do that again it's an image so we're going to use the image tag again images force last scroll to SVG the alt will just be scroll scroll down and a class we're going to give it a couple classes so class equals scroll that's just how we're going to style it and position that while I'm and in size that icon correctly and then we're gonna use our hide on mobile because we don't want it to show on mobile and then show on desktop all right great so as you see we can have multiple classes as many as we want which cannot be said about the ID attribute all right so after that section and that's enough of that section right there so we're done with that by the way so what it looks like when we update it not sure if I'm showing up on top of it or not but I so let's look at we have what we have next next we have this interesting area right here with this graphic that kind of does this nice little sort of Bezier curves and rounded edges inverted and such and then we have so this is a container itself it's a block of sorts and then we have these things in my sides but what's first try to figure out how we're gonna do this now initially when I design this I thought to myself we're gonna take an SVG and we'll export it and we'll get this in there through some clever CSS but I decided against that because these the shape is simple enough to where I you can I can actually achieve it through CSS alone and it's minimal so it's it's not too hard i but i'll describe it when we get to that point for now our container is just gonna look like this a straight you know flat container which is fine if you chose to go that route by the way but we are going to integrate this in the CSS portion so for now we want to get this all right so to do that the next area we're going to have is a div actually no let's let's close this out so this closing div tag is from relation to this div class container right here all right and the reason I'm going outside of it is because if we refer back to this we can see especially on this version we could see that the container element that we just had the very first element in our body is basically going to be structured like this all right we're gonna give it on a desktop a width of like eighty percent or so and center it like it is however we can see that this blue part extends all the way out outside of that container so that's why I closed that container div and we put in a section right here so div and we're gonna put in class we're just gonna call it blue - container makes sense to me and then we're gonna put in and reuse our div class container because inside of it we do have content that we want to align with the rest of the page like this right in there all right on all right so it also noticed that if we save this we don't see anything because div class is in and of themselves are developments they don't nothing happens unless you apply CSS to it so there's nothing occurring here that you would see so inside of it like I said we want to have that div container class so we're gonna put another div class is container alright and then inside of that we're going to go ahead and put in the next elements that would show up after that would be these so we have what's occurring here essentially is a list of icons and descriptions right so if it's a list and it's not ordered from one two three four or five because there is something called an order list which would give you numbers I but we want an unordered list similar to our navigation over here so we're gonna use the UL in Li elements so inside of there we're just gonna put ul and also one thing I haven't mentioned yet which we'll get to in the CSS but I do want to mention it now on this ul ul element I'm not going to give it a class because we can use a selector such as blue container and I as a class space ul in order to reference just this class specifically you'll see more of what I mean going forward but so if that's confusing don't worry then we're going to put an li element and inside of here what do we have for each list item well we have an icon which is an image and then a paragraph so we're gonna put our image source is images for slash icon - 1 dot SVG as its named and then we'll just call this I don't know calendar icon and then we have that paragraph and I just go grab that text real quick and then just paste it in like that so if we save it you probably won't see it if I hide myself I with my software there I go bye bye you'll see what it looks like you're not you're seeing a big space here because the icon itself is white and it's on a white background but it's showing up right there not important to see at this point though so bringing myself back if I can do that quick enough there we are we'll go ahead and continue on and all I do is just take this copy it and we'll paste it sometimes the formatting will get screwed up when we do that I so I just take these three lines hold shift tab and it fixes it up and we'll do this one more time and notice I want you to notice something sometimes I when it comes to the HTML I'm writing I'm keeping everything on one line for instance we have this list item this side this opening list item tag right there and then the closings on this and then we have another element right here it doesn't really matter you can put it on separate lines like this if you want or not it's all completely up to you in how you want to read the HTML it doesn't affect the actual HTML document itself alright so for when it comes to you and multiple elements HTML elements being nested in a different container it's nicer to have them spread out in multiple lines just for readability purposes so we'll take this and make this two and three and you can adjust these alt attribute values if you want on your own I'm just going to leave them here just so we can save a little bit of time so now we have three of these and don't worry we're getting close to the end of the HTML section we still have another couple sections to go so let's knock that out underneath that we have this testimonial section and there's a very light gray background right here container on it so that's going to be the first element that we have to create and again this element will extend all the way to the right and left of the viewport so we're going to have to exit out of these closing these div tags from the container element and the blue container element class as well so and sort of do the same thing right here so we can see we have our two closing div tags which is in respect to our blue container and div class container right here and then just to save a little bit of time I'm gonna take those to paste them and I'll just call this gray - container and then we're giving red squiggly lines because I haven't closed the tags so if I just hit this this and enter it'll automatically close those out for me just like that all right so then we have to ask yourself what is next what type of content is inside of there well we have two different list items all right or right here and here and there so they're unordered list item so we're going to use the UL li once again all right so i when it comes to being semantic and using the right tags when it comes to showing for instance a quote with an author and maybe an avatar or an image of the author of the author there are some semantic tags that we can use for this all right inside of the list items here themselves all right so for this the first one I'm just going to use image source equals images our /user one dot PNG the alt is something like user testimonial picture will be fine after that we're gonna have a block quote oh by the way I kind of skipped an element that semantic al element would be figure that we're gonna use and we're gonna wrap it around everything all right well indent these two real quick and then the block quote is basically what the person's you know saying I would be right there it's just more lorem ipsum text and then after that we're going to use fig caption which is an HTML element that goes along with figure that you can use inside so figcaption and inside of here we can just put the user's name or Jane Doe whatever something like that and then we'll simply copy this all of that and then paste it just like that this will be user - this will be John Doe we'll say that once again I'll hide myself real quick and you can kind of see what that looks like so far all right so next up by the way let me um let me real quickly just get this maximized so that you can see kind of the full HTML structure just in case I went too fast you can pause here by the way make sure I have that that you have that rather okay all right let's continue so next up we will find out what is next after that section and that is right here start your free trial and then the get started call-to-action button as its referred to as so once again we're gonna have to escape out of the blue we're gonna have to close the the grey container right here because this is the only two items in it along with the container element so we're gonna come outside of that and then the next up we have to ask ourselves okay do we have something else that is you know reaching all the way to the end well no this is just the web page background right here which is already white so in that case we don't have to do a blue container or great container type of div for this part of the layout all we have to use is just the container class for this so if class equals container and there we go so now we can put content inside of it which happens to be that start your free trial now and get started it's gonna look like this for mobile right here you're going to stack on top of each other so for that first one we're gonna use another heading element H to start your free trial now technically you could use h1 for this or h3 even doesn't really matter there won't be w3c compliance errors thrown if you do that then we're just gonna have a simple link for that button so we're going to a the href is going nowhere because we don't have a page defined for that and make a class called CTA call to action that Wilson use to style it and then the anchor taxes get started like that now notice if we save this and once again I hide myself you'll see that this this gets started by here and it looks nothing like that green button over here right well that's the power of CSS we're going to be able to drastically change the appearance of that simple anchor you know that anchor button to this essentially so it's really powerful so let's go ahead and finish things off with the bottom part and this is what we're going to make the bottom footer area to look like so against again we do have sort of the opposite effect of this occurring down here because it's a different color and it's also kind of just it's going the opposite direction if you can pay attention to that a little bit so we'll do the same sort of thing over here and once we get done with this section we're done with the HTML pretty much so let's go to footer will say footer is another semantic HTML element that we can use designates this section of the layout as being the footer we're going to put div class class is I'm going to call this footer as well our footer container rather inside of here we're gonna put our div class container because we want it to be structured within being line with the the rest of the document we're going to put in a link this time we'll put a leak in for the logo just to show you how that works so we're gonna wrapped in the logo image because that's the next part that's showing up right here down at the bottom so we're gonna put it it's goes nowhere of course and then we can just put in the image of the logo and we have a white version of it so the source is images logo - white the SVG we're going to give it a class of logo once again and then they all I'll just put in for the description and that was put in logo after that let's see here we have a paragraph of the address basically so let's see the class is going to be address so that we can specifically style this this piece of text I'm gonna put Melrose Place 902 uh no and we're gonna put in a a break a line break so we're gonna put in a br which is another one of those self closing tags and we're just gonna put us a right here so that just going to push this line on its own to its own section alright and then finally we do have at the bottom a very simple unordered list of Link's Terms of Service and Privacy Policy now normally you would probably have more links maybe the navigation from the top and bottom but I kind of want to keep things a little bit more shorter and less redundant so I'm gonna put you l will give it a class folder - links by the way we could probably get away with a see it when we get to the CSS process of just using footer container space UL as the selector to select this but I'm just choosing not to do that I'm just showing different ways to do different things so inside of here we'll have a list item each one is a link so we're gonna put it in an a element going nowhere because we have no pages set up and we're going to say Terms of Service and then we're gonna replicate this line with shift alt in the down arrow key and then privacy policy all right i what is happening here oh and that is because I accidentally left that a tag unclosed up here and was sitting at the bottom so we need to put this right here there we go so all this stuff should be outside of that so it's trying to put an anchor text inside an enclosed anchor text I linked so that's that's why the the w3c Valley that the validation is very helpful to helpful because it will underline a read error if you screw up like that so now this is what your the HTML for the footer should look like being once you have it completed all right so let's save that and this is our very ugly document that doesn't look anything like this much better-looking thing over here and so that's where we're gonna get started focused on next which is the CSS process alright so let's get up in our CSS document control B over here we'll go to main CSS and now we can switch back and forth between our main a CSS file and the index.html file just real quick as an aside if you want I kept the the the space I on your browser or in your monitor you can go ahead and go to view and you can split the view so if you click here rather split editor you can see both the HTML and CSS or flip them if you want to usually I put the CSS on the right and then the HTML on the left that way I can see the the different selectors that I have at my disposal to to be referenced during the CSS process right now though I don't have enough room because I want the text to be large enough so everything's really large dup here and i also want to see this preview over here but that's why it helps as a front-end developer to at least have two monitors so that you can separate things out a bit so I'm just going to go ahead and let's see here close out this right here and just go back to my main CSS so once again going back to our document the very first tag that we can style is body tag the body element and you would you would specify the body element in CSS if you wanted to do something like set a font family if you're using a specific font or you can change the background color so here's how that works I'll show you real quick so we take the selector remember we're creating a rule set and we start by a selector the selector is this body tag itself and we opened it up and our squiggly brackets there and here's where our declarations go so by default the the you can see that the browser applies certain properties or declarations to different elements for instance we can see that there's a little bit of margin between the space of the browser in our elements if we want to get rid of that we can type in the margin property and just put zero and hit save notice how when that happened everything moved on to the very edge that actually doesn't look better but I'm gonna control the margin myself with our container a class that's added here also if you want to change the background and notice here in Visual Studio code when you start typing in a property name it'll give you any potential suggestions that start with you know those characters which is helpful when it comes to CSS properties like background there's actually there's very specific properties like background color or you can use just background itself which allows you to really add in multiple property values for all of those different things that showed up so for instance if I wanted to change the background color to yellow which I'm not going to do we could just do that which is the same thing as saying background - color yellow same thing however if we just use background itself we can also specify other properties like URL we can put in a background image and all these other other things like if like if the background is attachment is fixed so that's something to be aware of but we're not gonna make a custom background property we're going to omit that because it's going to be white by default all right after that I do want to put in font-family now everybody knows who follows this channel as I'm RELIGIOUS towards my love of Montserrat which is a certain font that I like the font family property it's one of these properties and by the way when I start writing out these properties you're going to see many that maybe you've never seen if you're a beginner the the value they're all described if you go to google and you type in CSS font family property and value so if you type that in you're going to get a bunch of results some perhaps from w3 schools calm which is a great resource that will tell you how you structure and what type of values are acceptable it also describe exactly what's happening with each one of these so this is the phone I'm going to use for the value of font family you could put it actually you can separate your values so that if a person doesn't have monster out for instance then they'll fall back to another font the next font that you have in here or you just put sans-serif which means basically any sans-serif font that they have installed already now in order to get Montserrat here which is a web font that we can use it's it's basically available in the Google web fonts and if you go to google.com slash fonts you'll find that interface I'm not going to cover it but it you can search through a ton of different fonts that you can use in your projects and then it will show you how to import them it'll give you this code right here for instance and it's telling us that we're going to import from this URL and it's from font size Google ap is calm and it tells us the families Montserrat with the different weights in terms of the thickness or boldness of the fonts family so I'm just choosing a regular and a bolder I wait right here for these so now if we save this notice how all the fonts just updated from that ugly Times New Roman default font to this one already looks better right okay now we're going to continue on so there are I when I do my CSS I there's certain things there's certain rule sets that I'd like to get out of the way initially they don't necessarily follow the order from from top to bottom a couple of those are our paragraph tags so we can apply default declarations for those and styles and also I'm going to put in block quote as well and in those font size I'm going to put in and remember I there's there's absolute and relative units that we can use for font size and I'm going to put in point 9m all right so if we go find one of our paragraphs let's see like right here I believe this is a paragraph we save it it's gonna make it just a little bit smaller and that was say something that I decided to do after seeing everything when the CSS was more complete but I just wanted to be a little bit smaller than what it is this eeehm unit by the way the default font size that's set on the body I property that's inherently attached from the browser that the the browser applies to the elements is around 16 pixels so I 1e m is equal to 16 pixels or 2e m would be I equal to 32 pixels in a sense so when you're using font size you want to use a.m. or REM units which you can these are topics that are a little bit more intermediate that it was just looking up on your own I'm also gonna change the line height which is another type based I of CSS property which is going to adjust the space between the lines I'm going to put 1.6 am so it should increase the distance between the space of these lines just as it did right here and I did that because again our to our job is to try to get to look as much I as like this as possible you can see there's more line height here than what's being shown all right we will I'm gonna do another one that's gonna overwrite all of the unordered lists so I'm simply going to use ul as a selector and any of the declarations inside of this rule set will apply to all the unordered lists that show up so notice on all of my own that unordered lists we have these little bullet points showing up those black dots let's get rid of those so the way we can do that is I see list-style-type and then we just put none so now we save it and they all go away much much better now there is also some default declarations that are added front by the browsers to the unordered list element such as margin and padding I want to control those myself so I'm going to put margin zero and padding:0 so when we save this watch what happens so it's suddenly all do they all go away any rate up against the browser now after that now we can start looking at things from a top down left right perspective for the most part the first thing after the body element which we styled already is the div class container so the way we reference a class I in our CSS is by putting a period and then the name of it container so again we have a div class of container the class means the period containers the name we gave it alright so I what we're gonna do now is we're going to put in certain CSS properties that make sense to apply to the container element at this mobile view because we're doing mobile first CSS right here all right so any Content that is inside of any type based content that's inside of a container if you notice over here it's all centered isn't it like it's not left aligned everything centered this is all in a container class this is all in a container class these are centered these are centered these are centered as well so we're just gonna say text a line which is another CSS property and an acceptable valuable value for that is Center so if we save it all the sudden everything has just become centered that is inside any of the HTML elements that are inside of that container class all right also let's give it some padding because right now everything is really close to the edges to the top right left edges of the browser so to fix that we can give it padding so margin and padding work very similar to each other margin is outside of an element and padding controls the amount of white space inside of an element if that makes sense so we have a lot of things that are inside of our container element so I'm going to going to use eye padding for that all right so padding is another one of those properties where you can do padding left you can do padding right or you can just use padding itself where you can control the top bottom left and right all in one declaration so we're gonna do that and so we could do all four values like this if we know on say for example it starts with the top so a point ATM for instance if you just leave it like this one value it applies that to all four directions and this doesn't look bad but if you wanted control maybe just the top bottom would be eight and the right and left could be 1.2 eeehm if you wanted more on the the right and left all right there you go we just shrunken and a little bit more on the left and right as opposed to the top and bottom now you could also put all four of them all for custom directions so top would be point eight the right would be one point two the bottom would come next we could put something here and then the left could go here so it works in like a clockwise fashion but I'm just going to use this orientation right here and that's all we're going to do for container next up after our container is our logo we gave it a class of logo so that's how we're going to reference it logo alright so what do we need done with our logo this is where it's currently at in the browser and this is where we need it to be right here so it needs to be left aligned first and foremost and we need to make sure I have a good amount of equal whitespace between the left and the top alright so for our logo the only thing that we're gonna do initially on this is we're gonna put a width in because it's a little bit large and I'm going to put in 130 pixels simply because I know and remember pixels is one of those units that's absolute it doesn't change I don't need the size of the logo to change based on at the viewport so it just scales it down slightly alright a another thing that we're going to do is we need this icon right here to show up to the right in this logo to show up to the left and the way we can do that is notice that we have this header element right here and inside of the header element we have this image element right here and then we have this nav element right here so we essentially have two eye elements that are the primary elements or parent elements right here so this one has a bunch of other elements of course but they're just child elements of this this element right here so we have two elements what we can do is target the header element like this and we can say display flex and then we'll also put in justify content space between and save it alright so why look at what just happened there this pushed it over to the left it's not quite right because the spacing and I'll demonstrate how to fix that in a second but it basically created a layout called a flexbox layout and there are different types of properties that you can use for display such as display block display grid is very popular and display flex as well in in line but flex is a real easy way if you have small elements in your I your user interface that need I basically structured into columns like this so the one thing that's throwing this off is probably this this section right here on our mobile viewport we don't want that to show up by default right which is why we placed on to it this UL class right here hide desktop so or hide mobile rather and make sure I have this all set up I we're gonna put in hide mobile I had that wrong make sure you update that right there it's confusing me for a second so we're gonna create that class of hide to mobile so I'm gonna put it right here it doesn't really matter where you put it by the way you could put this at the very top or bottom it doesn't matter I'm gonna put display:none there we go all of a sudden has been hidden and it is my much closer to what we have here so far okay so if you're confused by this there's a lot of different tutorials that go into just flex box and and how to orient things with Flex box as well as the grid these are all things that I'm not going to get into into very much here because it would really to eat up a ton of time but that's this how a very quick way you can take two items that are usually stacked on top of each other by default and then move them into different columns side by side alright so after that we have our menu icon which we have a class I believe of menu yeah there it is so this alert here has a class of menu so let's reference that it's a little bit small looking so I'm gonna take menu and we're gonna say width around 25 pixels against one of those absolute elements that I don't need the size to really change so it makes it a little bit bigger and notice it's it seems off right it doesn't seem in line where of where it needs to be in relation to this logo so we can control the position with margin this time so I we can put margin and look at all the potential elements that or potential property values that we can use I'm just gonna use margin top just to push it from the top and I'm gonna do that probably I'm gonna say by 45% now how did I know to choose 45% I didn't know how to choose right off the bat 45% when I was preparing this project the way I did it is just through experimentation when you may be wondering me why did I not use a percentage or an absolute value I mean why did I not use a pixel value perhaps for that but when it basically reason for that is when you scale up the the interface here and you're going through different screen sizes and you're dealing with margins and padding's I or the white space essentially associated with the UI you want.i things to be as fluid as possible so I put in 45% there I experimented with the value just to see how it affected and this was the right writing around the right area to go and also when you're dealing with whitespace and percentages you're gonna want to increase it just to see like for instance this would be the width or so of like a tablet this would be like a desktop and you can see how things sort of react based on that all right I know I'm talking a lot but I really want to try to get it and this this stuff explained as much as possible all right so after that what do we have we have our this graphic right here alright so let's see I'm not going to be worried by I'm not going to worry about doing the HTML for all for this we'll do that once we get to the the desktop portion the next element that we have after this this and the navigation is section all right so we can use section as a selector and with sex this section right here I actually we don't need to do anything I think it was redundant I put text-align:center but we don't need to do that because we already a place that I on a container element so instead of that we can reference this image which is the server class so that server is right here the classes server so server and in here it's a little bit too large way too large so we're gonna put with 70% alright that's pretty much better a lot better and notice how because of the shadow this graphic is actually like this it's offset it is actually centered but it doesn't look centered because of the shadow is kind of far off into the distance so we're gonna adjust a position by margin and we're gonna put in 2 a.m. at the top so it's gonna push it down from the logo we're gonna put Auto for the left we're gonna put ta em on the bottom again and then 25% on the right and that gets things even up a little bit more again this is experimentation essentially I when it comes to these values I didn't just know right off the bat of what they're gonna look like so notice how it scales up now it's a responsive image because the width is based on the percentage of its self inside of the container class element all right very cool stuff ok let's continue on next we have I our h1 and our sub head class so we have h1 selector in a class of sub head and so we have to ask yourself again you always need to be going back to the UI to see you know what need change you know does this need to be bigger or does this need to be bigger or smaller alright so certainly this needs to be bigger in my opinion and I think this needs to be bigger as well so write a rating right away I'm going to put in I actually I'm not going to add a style to this just yet I think it will because I might forget in the end what I'm gonna do is put in h1 and then sub head so these are both part of this same rule set and I'm gonna put in some two different declarations that aren't going to make sense called position:relative and z-index of three now nothing really changes about these from appearance here but based on real quickly this right here the CSS required for this right here there's actually a circle that will that will show up when we get to that point and we don't want that circle to overlap this white circle to overlap on the text right here and so that's what that fixes by setting those two position:relative and then Z index of 3 means it's gonna stack it on top of that that that graphic the circle graphic that you know these use to create that sort of interesting effect and the blue container so hopefully that's not too confusing at this point I think we will get to a point where you might adjust the size but not at this point so going on oh yeah the subhead actually I am going to reference specifically and say font size about 0.9 actually no no no about 1.3 e/m or one yeah right around there I think is okay I I think I further on I do have a style for this to make this larger but I don't want to get out of track with my reference monitor here so we're gonna leave that right here for now all right so next up is our blue container which is right here alright so blue container is this thing alright so let's go ahead and create the rule set for that blue - container alright so the width is hundred percent of the browser again we're not gonna see anything let's give it a background and we'll find the background hex code right here by clicking this and then copying this code and pasting it and right there so you can copy this if you want 0 0 2 C 2 FF so now all of a sudden when we save this it starts to kick it's being start to make a lot more sense now I mean of course they're not all accurate and here yet but we'll get to that stuff so after that we want the text to be white and the way you control text color and CSS is through the color property and we can either say white if we know it's going to be absolutely white or you can use color hex code values for white it happens to be the number sign FFF same thing all right but generally if you can achieve something with fewer lines of type you can it's best also in Visual Studio code if you hover over a color value it allow you to select properties or values right here alright so after that let's give some margin to this look how close this icon is to the top here so let's type in margin and we'll say we'll do 15% we'll say also zero on the right and zero on the bottom so it's only gonna apply really to the top so we could actually get away with just putting in margin - top 15% it would be the same thing oh and by the way I was referring to the top up here not the inside which would be padding okay next after that we're gonna do with padding which is inside so on the top we'll say 4:00 a.m. and let's just save that now that means it's going to get 4:00 a.m. all the way around which is way too much so we don't want that then we're gonna put zero and then on the bottom we're gonna put 2:00 a.m. as well and the reason I'm giving 2:00 a.m. on the bottom is because eventually we're gonna have margin that's applied to the bottom of each list item so that kind of offsets it ordinarily it would make sense normally maybe to put four um equally I but you can see it's unequal a little bit there's less up here than there is down there because there is default margin applied to these list item elements pushing them down so the last one has a little bit let me show you a tip by the way about that if you want to see margin and padding applied to UI elements you hold ctrl shift I and we go over here to we select this likes a little icon and notice how when we hover over we can see little like this orange area that's letting us know how much padding is being applied to these different elements and so that's just one thing this is one way to know if there's any amount of eye padding anywhere that's being applied when you're trying to deal with setting up your white space alright so again we're gonna go back and make that to em on the bottom there we go alright so let's continue on we're not done yet with the review declarations here so now let's let's figure out how we can make this turn into this right here alright so the first thing I want to do is we're gonna round off the corner right here so our container is kind of flat like this and a square but we can very easily create this rounded corner and we can do that with something called border radius now if I just type in border radius and type in something like 40 pixels you can see how it applies to all four corners this border radius and it just kind of creates you know these little circle areas right here by the way if you wanted to create a perfect circle you could just put border radius 50% but we're not gonna do that for now but if we only wanted apply it to this side this corner we have a shorthand property for this so border top left radius so now when we save that we could see everything else is a corner except for this area so now we've just achieved this right here next notice how right now it's completely flat i we do have a sort of a a curve applied to it at an angle so we can skew it so to do that we're going to use another very powerful property that accepts a lot of different values called transform and we're gonna say skew y notice when I type in skew it's given us these potential functions here that we can use that start with skew you can use skew which allows you to control both X in Y skew or just X&Y itself we only want to skew it vertically so we're going to use Y and a negative about two degrees now look what just happen everything inside of this blue container has just been skewed even of the elements in here have been skewed because there are child elements we don't want that we just want these elements we want these elements to be just normal right because it'd be kind of hard to read we just want this interesting aesthetic placed on the container itself so a real quick hack that I discovered and a lot of times you may have to go to Google to figure out how to do certain things um even me I've been doing this forever and the one way I found to fix that is to take blue container ul right here notice this is and that's one way you can set up your selectors you can choose a parent containers class for instance and say I any of the you ELLs inside of it so that's one way to do that to target selectors like this so the UL is inside of blue container we can say transform SKU Y and then we'll go opposite to degrees the effect of this is it may now returns it to normal so it just reads like it normally did before but the container itself has now been skewed at that slight angle very very cool alright so now let's try to do the more tricky part which is to try to get this in sort of angle right here all right now we're getting into intermediate to advanced CSS right here so I don't expect you to fully understand about what's about to happen here but in CSS when it comes to entering for any of your elements we have these other selectors that we can use that we can style just both before the containing and the HTML element and after all right so a common way of achieving something unique like that is we'll take our blue container we're going to put a comma or air-cool and rather after all right now this says it represents a style bold pseudo element immediately after the original elements actual content if that had it all makes sense to you and what we're gonna do is in order first for this to work this sort of thing to work we have to put in a Content property making it empty next we're going to give it a width of about 80 pixels and then we're going to give it a height of 80 pixels and we're going to give it a background color of white right now we can't see it but it's up right around here I believe or inside and you'll see this in a second I what we'll do I first I should have done this one because we're doing both I just copied this before in and after we need the before first I was looking at the wrong selector just keep this here for a second what we're gonna do here is change this to 40 pixels and the height to 40 pixels and this color is blue color is going to be the same color as this so we're gonna copy this code and we're going to put it right there all right and then what we're gonna do is we're going to make it position:absolute and this is another way of taking a different eight an HTML element and I when it comes to the position property and setting it absolute you can pretty much move it anywhere around on the HTML document with that with the position:absolute you can use top and say from wherever its starting position is we'll say well we'll subtract about 39 pixels now we can see it right there this right here I'm going to copy it and hide it I don't want that confusing anybody because the only thing that's matters right now is this element right here so we're going to put right from the right we want it to zero because if we're going to push this all the way over there hopefully things are making a little bit more sense now because I know I'm confusing the absolute beginners after that we're going to need to put in a z-index which controls the stack order of it I in the browser - like negative - that doesn't do anything but you'll see when we remember we placed on this here position:relative and we gave it a Z index of 3 that'll make sure that it sits on top of both this here and the the circle that we use to cut this out a second all right so that looks pretty good here let's bring back this right here all right so let's keep on adding to this and the point that we're gonna start seeing this is when we put in top negative 80 pixels or at least I thought we were we have to put position:absolute first and then also right we have to push it to the zero or push it over to the zero and then also border we wants to be a circle remember right now it's a square that's why it's hiding it we're gonna put reward or radius 50% and then we're gonna put in oops sorry about that one more property notice right there it's now doing what we want Z index is negative one set that there alright so hopefully that was not too confusing I'm sure it was but if you're a beginner chances are you're not gonna be doing too much crazy stuff like this I but I wanted to introduce a little bit of the intermediate stuff just a little bit just so you can see what's possible with CSS but don't let it discourage you if you're kind of like what the heck was you know what just happened there so hopefully you can understand what is possible so let's continue on next we're going to control the the appearance of these elements right here the first thing that I want to do is the the size of these icons and the distance between these elements need to be fixed a bit so what I'll do is blue container ul Li we're going to say eye margin bottom like 3e m so that spaces amount as you just saw we're also going to do the same thing here except we're going to add and target the paragraphs so again if we look at the HTML and we look at the order of things we have blue container UL li P alright we can say for the padding I put 0 on the top and bottom but 0.5 on the right and left just to push it in a little bit closer alright I don't think that actually made that much of a difference from what I seen I love to reanalyze that and see if that was even necessary blue container the image itself and notice you don't really have to fall in line with I like going like blue container then the class can container than UL then you li you can actually switch up the order so we could just say any images inside of blue container by just putting blue container class space image all right so we can say with we're gonna scale this down and I found that 14% was pretty good right there now notice how big this other icon is and the reason is because the width in the orientation the fact that this icon here is in like a portrait mode it makes it look bigger so how do we style this one down specifically well here's where we use what's called a I the and so you'll see what you could blue container UL li will say nth - child and then it's a function intercepts number 3 so we'll say it's the third list item that's inside of this selector right here vo see it's 1 2 3 that this icon shows up right there and we'll say we'll give that a specific width over on 8 percent up something just got screwed up all right make sure oh yes we're saying right here we're selecting the the list item but we need the image inside of it so we just put space image afterwards there we go now we scaled it down and it looks better awesome awesome stuff all right so after that we have our gray container alright so that's in reference to this stuff right here and you can see they're pretty big they're real too close so we have to adjust the white space with margin and padding and all that good stuff so let's go here so I have a great container and we're gonna say the background first needs to be gray right now it's completely white by default so what gray are we using here f6 f6 f6 so we say background oops I already put it hashtag there let's save that so it just makes a live it's a very light white off-white and then we're gonna put padding we're going to say 40 M on the top zero on the right eye and left and then two M on the bottom so now we have an even amount of white space between these elements awesome not done yet though so we're also going to put in by the way because this is skewed you can see it's very hard I'm not sure if you'll be able to see on the video there's a little bit of white right here between these two elements because this is skewed right here and by the way the fact that this is skewed and it's not in the right here doesn't bother me much I actually kind of like it that it's skewed a little bit like this we're gonna take a margin top in and we're gonna push this up and this will show up underneath and it will get rid of this little white space that's between those elements so if we do margin top and again margin applies to the white space outside of an element and padding is an inside if we do margin top we can actually do negative units so we can put negative like 3% and there it goes it's just I got rid of it not sure if you can see that hopefully you will noticed it yourself alright so that's it for the gray container styling and now what about I this yeah this is this stuff is all pretty bad she's pretty these are pretty large the eye graphics so let's let's get those figure it out first of all I only want to target this list item so let's do that gray container and we're gonna say ul Li and then another selector that we can use a pseudo selector is first child first child it means it's simply the first child that shows up inside of the lice list item we can say margin-bottom to em so it's gonna push down some separation here but it's not going to apply it to here it would if we just did ul Li and they would give us too much on the bottom I believe so I just did first child here alright and then after that lets reference our figure semantic element right here which is basically everything inside of you are here so we'll do figure margin:0 padding:0 and the reason I'm doing this is because the browser's die by default put on some margin padding I believe on the figure element so if we save it it does free up some margin and padding there figcaption which is the user's name we're gonna say font weight is bold watch how they update and then color is going to be the blue color that we've been using right there next we're gonna take our h2 element and we're going to say margin top by about 7% because it's pretty close I might not be able to see it this is pretty close to this container right here the great container it's a very subtle so if we save it it pushes it down a bit and then we have our call-to-action buttons this thing the green gets started or it's going to be green rather we need it to look like this down here so there's quite a few CSS properties and it's fun once you get the hang of it I'm gonna move this over just so you can see how things are gonna update on the get started button so we have our call to action oops all right it's a class so we put a period background color we're going to put its 0 0 CC 8 0 so now we can see how that updated next we're gonna say width we're gonna use that calc function that you saw at the beginning of the course we're gonna say a hundred percent minus 1 a.m. you're gonna see why we're doing this in a second we're going to put display block and that's a required CSS element if you're going to give a anchor text width and again this is the stuff you know hopefully that you'll remember going forward color we want to change the color of the text inside of it to white all right we also want to give it a border radius of 50% that makes it round oops no I'm wrong 20 pixels there we go we also want to give it some padding so padding is the white space inside of the element so the padding will say 0.5 e/m to make it large or you can see it's starting to come along we're also going to put text - decoration if you don't want an underline we've set that to none so now it goes away we're gonna take our font size increase it because it's quite small and we'll see if 1.5 e/m which is 16 pixels which is the default size of text in a browser times 1.5 and then also margin this is going to move things around a little bit I'm gonna use fluid units here so 3% on the top auto 7% eye on the bottom so it's going to move things just a bit and then we're gonna put position relative as well and put z-index same thing that we did with that text up top - 4 because we're going to be doing the same thing for this section down here we don't want it to overlap this the circle over here by the way I didn't add those values initially I saw the problem and then solved it by adding position:relative and z-index there could be other ways by the way to do other things in here but that's the way I found to do it so that's it for our button it looks pretty solid right here as it stands so next we have our footer container which is let me move things back over a little bit there we go right here so right here rather footer container alright so our footer container it's gonna be a width of a hundred percent a lot of this is going to be the the rule set before this is going to be similar to the blue container by the way we're gonna background it has a different color which is 3d for for for a alright and then also a color of white a padding of 3m on the top and bottom zero on the right and left I might as well bring this back in so you can see it so it's not behind me there we go it's already coming along we're also gonna do our border top right radius the other one was left before top left there's gonna be 40 pixels so notice how it does that to the right also we're gonna have transform skew Y is going to be the other one was negative two degrees are going to be positive two degrees because we're sloping it the other direction and then after that we're going to put in now that's that's going to be it in and of itself so now we have to do that same old fix we revert it back on the other skew to do that we'll put footer container and find its container inside of it so then we put I'm just going to copy this real quick this will be negative two there it goes so this goes back to being just horizontal text and then we have our footer container our before selector and then we do pretty much the same thing as for although some of its reverted and switched around because it's on the other side so content empty content area if we don't add this you'll see it won't work for this tag when it comes to styling elements like this with these before and after selectors you would simply won't see the result in the browser so then we put with 40 pixels height is 40 pixels background color is going to be the same as the one that's sitting on top of can't see anything yet because we need to do position:absolute and then top is negative 39 pixels there it is and then left is 0z index will put it negative to notice how this is sitting on top if it didn't if that call-to-action didn't have this this would be sitting on top that's not what we want so that's what that does and that looks good there and then we have our footer container after selector so inside of here once again content is empty our width is 80 pixels height as well our background color is white we have our position absolute Z and X is going to be sitting in on top of that that square that we have so it's not going to be negative 1 just negative 2 I mean it is going to be negative 1 not negative 2 the top is negative 80 pixels to get that I that a circle situated there correctly and the left is going to be 0 and then we have to make sure I'm not missing hope the border-radius which makes it into a circle and there we have it if you actually want to see what's happening here we can change this color to something else as you can see it's that's kind of an effect that's applied like that but we're just making it white there we go all right very very close to getting done next we have the footer links down here which need to be styled up so we're gonna do u l dot footer links now notice how I put the selector and then a dot ul you could just write dot footer links because this is in reference to let's see here right here where it says UL class is footer links and so that's basically that's up to you if you want to do that sometimes it can help just for readability to know what that class is in relation to so when we do that we're going to put margin:0 auto which is a way to Center things and we can also put in I our li element so inside of ul we have our list items right so let's let's try to style this li element so we put Li after and inside of here we're gonna put just display:inline-block and that's one way that you can I structure things to the left and right of each other outside of display flex as well and so then what we can also do is style the actual text themselves because the text is the anchor text and it's inside this text falls inside of the a tag right here so once again we'll just copy this to save ourselves some spacing or typing rather some time and we'll put in for this one a color and it's not quite white it's like 90 90 90 that's the color code from there it is from Adobe XD or design app and then a font size we can make point ATM to scale down a little bit like that alright we are quite far now and as far as I'm concerned this is pretty much you know what I like for the mobile and this is very close to the the example that we have in our XD document so the next step is to start styling up our navigation so let's go ahead and do that temporarily I'm gonna come up here let's scale this out I'm gonna come out here and I'm going to remove the hide desktop or hide mobile rather class right here in fact I'm just gonna misspell it and you'll see we get our our menu back so we need to start styling that as it should appear alright so to start doing that what we're going to say is we've really looked back here we have our nav element and when we have our unordered list element which contains all of our navigation elements right here so I we can reference that several different ways but I'm just gonna say yeah now ul nav element rather we're gonna go opposite now the UL there we go so we have our nav and then in any of you ELLs unordered list is inside of our nav element gets this these fall to following declarations so we're going to put position:fixed alright now what that does is when you scroll it keeps it here it keeps the navigation like stuck into place so that it stays there next up we're gonna have a width I think I want the navigation to come out by about 60% now of course something's it's hidden but you'll see it well it'll come back momentarily we're gonna make our top 0 and also our right zero because we wanted to come in from the right and there it is showing back up again next we're gonna say text-align we're gonna line it to the left of this container rul and then we're gonna say background and this time I'm using an RGB value of 36 41 44 you may be wondering how did I get that it's just because I put like an initial value of like blue and then hovered over it and I chose this color right here and it automatically gives us the RGB values next we're gonna have a height we want to be a hundred percent and notice because of our these other position elements like of position relative and absolute it's showing up behind everything so we control that with Z index make it something high like seven we want to be on top of everything just like that and then we're gonna say padding top three e amp so the padding applies to the whitespace inside of this container and so we're just pushing things down a bit next we're going to say nav ul Li a so that's selecting all the anchor texts inside of this selector we're gonna make it color white we're going to say text-decoration:none we're going to display block and displaying block doesn't really look like it changes anything but it's going to allow us to set eye width and height on it so we're gonna say with a hundred percent and we're gonna say padding is gonna be one e m on the top and bottom and two M on the left and right so now it's starting to look better background color is going to be we can actually give this a separate background color if you wanted to which is I will just to show you RGB will be like 50 to 59 and 63 and again the way I got that value is I just copied this I'll just show you real quick I gave it the same color and then I hovered over it and just made it a little bit lighter and it adjusts our values up for us there we go next up we're going to have I let's see yeah that's it for the the the this elements right here next we have oh if you want to do something like hover make things change based on hover we can add the hover selector so if we take this and just put hover then we can say background color and we can do the same process we can copy this and then we can make it a different color or a little bit lighter or darker or whatever so now look at that very simple so hopefully you're having a lot of aha moments going forward here so exit button is a class that we gave to this element right here and that's right right right here class exit BTN so in there we're gonna say clear no no we're not sorry about that what we're gonna say is margin bottom is 1 a.m. just to push it away and as you can see it just did there margin top you can use negative 1.3 e/m to kind of push it up into where approximately it would be we're going to text a line right so you can use text align for images by the way as you just saw and then we can say padding:0 on the top and bottom 1.4 a.m. on the right and left and I want to make the image itself larger and you can see that our our image is actually inside of this class right here so we have to come out and put exit - BTN image IMG and we'll say width is 15 pixels and cursor:pointer and I'm not gonna save that because look at me hover over it it's if it's not a link nothing happens but it should change to a pointer icon so there we go now we click on it nothing happens nothing happens on any of this but I that's when JavaScript will come into play okay so now what I'm gonna do is go back and we're gonna fix this and make it back to hide mobile and we'll save it so notice when we save it it goes right away because it has this hide mobile class that is hiding it by default so if we extend this out even the desktop view it's still staying there when it shouldn't when we scale this out to a desktop resolution I it should switch back to showing this type of menu so how do we take that menu that we just designed and make it look like this and you'll see very shortly because that's what we're gonna get into now which is the media queries and the responsive design okay so we're gonna do our first media query here at the bottom so everything we did right here is what I said was a mobile-first CSS this is all looks like great on a mobile viewport but if we look at it at the desktop it does not look good at all things are still stacked on top of each other these should be in three columns as it is in our mock-up and so that's what's going to be the responsibility of our responsive design and our media queries to get that stuff working correctly so here's what our first media query will look like at media only screen and min-width 650 pixels so how did I arrive at this value so basically first of all when we say minimum width it's gonna say what that is essentially saying is once this the the resolution of the viewport of the screen that is using viewing this is larger than 650 pixels so 615 pixels pixels and larger then apply any of the rule sets here inside of this area so you can put it multiple rule sets all inside of this these brackets right here and how did I arrive at 650 pixels well way I do it is first I had control shift I and you'll see right up here when we start to scale it out it lets us know what did the width and height of the viewport his is so if I scale this out what I'm asking myself is okay I like what things look like here do I want to change anything as I go out so should things start to change and I deemed right around 650 certain things probably should change about the layout in some way or form like this may might be too big some other things may need changed so the first thing I will change it's the size of this server so I'm going to say the server which is the class we gave it with and we'll say 50% now if we find that server because we already have a rule set for it up here we have width 70% and also a margin but if I don't specify the margin down here in the media query then it's just going to assume whatever was defined before it so the only thing that's gonna change is the width so let's save that notice it just got smaller so if we go between so here we are at I less than 650 pixels now watch more right when it gets to 650 pixels it goes down it just automatically snaps down and so now it's that's how we can control our roll sets and make them dynamic in a sense based on the screen size that's viewing them so a couple other things I want to change this is a little bit small so let's take our h1 which is the HTML element selector that that text is being wrapped around font size we'll say 3 II am make it larger and when you make the font size larger it will apply some padding on it I decided I kind of wanted an margin as well some no margin margins what I meant there we go so kind of move things up a little bit when I did that also I'll take our sub head which is the class for this we're going to make that larger too because it looks a little bit too small so we'll say font size for that will be one point four a.m. and then also we're gonna make margin bottom twelve percent all right so it pushes things down quite a bit here in this area alright next after that we're gonna take our our blue container so blue container margin and set it to zero and that just moves things around you do the same thing with just margin zero like that I had that like that initially because I think we had multiple values and I just set them all to zero but it's the same was just putting zero right here also the image is a little bit too large right I mean I think they are a little yeah just I don't I don't like them so what we'll do is say blue container image with 20% and actually a little bit too large for my liking they're trying to look at war that's changing that actually probably like 10% looks better will look better there yeah probably writing around there and then what we can also do is I reuse the rule set that we had before for controlling this one just like that and make that with here probably leave it oh well we'll say like 7% or smaller right around there is fine term I'm just looking at the thickness of the lines by 6% and then also margin top will say negative 6 pixels and this doesn't really make sense right now to put margin top here but when we change this so that these are side by side and another different media query getting these even will that will make sense a lot more so we'll see in a second actually what that does so if we put blue container ul and we want these to align to each other in three columns because right now it just kind of looks silly with all this we have enough room we could put display flex and when we do that it automatically sets these side by side that's why I had these larger at 20% there we go I was confused I forgot I should have done this first so this is actually 11% there we go and if we don't have margin top negative six on that it kind of pushes things down a bit it might be a better way of going about that but this works alright so now watch this when we're at this smaller viewport of the bubble they're stacked but now once we get to this media query of beyond 650 it is stacking them right next to each other now a couple other things just Minh I want to make two that is margin top maybe negative one am on the entire unordered list and then also a line items Center all right and a couple of the things I want to add this doesn't look correct I think I a couple of rule sets that I have will fix this in a second is to the actual li elements themselves so you li margin-bottom we're going to set to zero there we go and then also the paragraph elements we're going to adjust the padding between a little bit close I think so if I take this and don't worry we're going to be done pretty soon so you out Li P we're going to take the padding to zero on the top and bottom and on the right and left a diem so we're increasing just a bit the right and left padding and then also our great container these should also be floating to the left of each other too so we just put display flex it's not working just to right yet oh that's because this needs to be great container you well there we go awesome and then our nav UL so if we brought that nav ul back it would be all the way 60% it's just too much so I want to bring it back to the width of that to around here at 40% so we're not gonna see that change just yet alright awesome so that's it for this media query I think once we get to this size things are pretty good or right around 650 so the next thing we do is keep on going out and think okay what needs to change about this layout as we go further and further in terms of the width so I would say right around 875 there's a couple things I want to change so our subheading I think I want to adjust the the margin a little bit as well as the margin of the blue container you l's just a bit so let's do that I'm gonna copy this and come outside of that media query and start a new one and put 875 alright so inside of here we're gonna put in a subhead class margin bottom 15% so it's really going to space things out more for us we're going to say blue container UL a margin on the top of zero zero and four percent on the right and zero there and then also a great container UL will say margin is a four percent on the top and zero zero there so we're just basically structured situating the ULS a little bit more for more white space on the larger viewports which makes more sense you have more space to fill same amount of content you want you know things spread out further and I think that's looked pretty good until we get to around about 1024 which is I think around a tablet size or or so in larger and desktop even so what we're gonna change there is we're gonna start to show the navigation and hide this alright so what we'll do is create another one and don't worry guys we're getting close to being finished with this only gonna have like two more media queries after this one zero to four and inside of here just coming down looking at this that that call-to-action button looks really silly being that large so let's change that CTA is the class the width will be 50% there we go that's a lot better so watch how it goes from all the way out down to 50% once we get to 1 to 1 0 to 4 right there then we're gonna have outside of that we're gonna take our container this is the part where the you know the container has pretty much been the full width it's been fluid up to this point but now I kind of want to keep it a little bit more centered so what we'll do is take our container and we're going to give it a width of 80% so notice once we do that things kind of come in but we also need to Center it so we're going to put margin:0 auto and then I'm gonna give it on the bottom we're gonna give it some white space and auto sort of like that and actually I think I'm gonna get rid of that that doesn't make sense to me or at this point in time I may adjust that later but this looks a lot better so notice how if we bring this in it's at a hundred percent width but when we get to this size it's staying more in the center because I when we get to the larger I don't want it to go all the way out it'll spread things out too far in my opinion with with content that's so sparse like this okay so let's go back to right around our 1024 and I I oh yeah I was looking at the wrong thing when I applied that 13% was I got the wrong set on my reference monitor next we're gonna have show desktop now that was a class that we applied on a few things to show them once the desktop shows up so we're gonna put display block because normally these are display hidden with the show mobile class and guess what when we do that this starts to show up and by the way it's at 40% now as opposed to 60% on the mobile version and this is the the the margin that I wanted to apply right here so margin is zero Auto 13% in Auto all right and then after show desktop we're gonna have hide desktop I think we had hi uh Scott we're gonna put display:none on that all right and so then what we want to do is notice how this is showing up this is supposed to show up but the problem is is it's so styled differently we need to reset the styling to make it look like this up here which is very different so let's get the the the rule sets rewritten here for this so we have a nav ul element which is you know for this whole container here and we're gonna change position here to inherent so it's kind of resetting it back to is it's going from position fixed to just whatever it inherence which is a potential and acceptable property value the width is also going to be reset to auto background is going to be set to none the height is going to go to auto the display is gonna go to flex and we're going to put two heading top which it did have some before to zero next we're gonna have our nav ul Li we're gonna put float:left here and then we're gonna put nav ul Li a and this is going to restyle the links themselves so color is going to be black all right we're gonna have background color we could put in here as well so now we can see it's looking much closer we're gonna set let's see here text-align:right so that pushes things over and more towards this side and also we're gonna do padding to this one em2 um like that actually I think it already yeah and I think no I think that did make a change you don't want to reuse on set the same exact values I think that was different before and I think that looks good right here and then as of course when it comes to our hover we don't want it to hover like that that looks terrible so we'll just put in our hover selector and we'll say background color is inherit like that awesome alright so now watch what happens to this it goes away and when we get to the JavaScript real quickly we'll make that other normal menu show up once we get to this this shows up just like that all right so there's um let's see here let's see what else should be changed I think we're gonna have one more rule set here oh we're also going to make this anime I didn't talk about animation at all so we'll do this real quickly let's make this hover up inside right up and down so to do that we have a class targeted onto it called scroll oh if I could find it right here so the class is scroll notice we have the hide mobile and show desktop so it hides like that so let's make it scroll here or animate so we'll target scroll within this media query and we'll say with 30 pixels make it a little bit smaller and we're gonna give it an animation property and notice there's a lot of other animation properties you can use but you will use the full one here and just say we're gonna call it move you have to give the animation a name I was going to call move for two seconds is duration you can also put delays and all this other stuff so make sure you look up this property on your own we're gonna make it anime infinite forever and we're going to alternate back and forth now nothing happens yet because we have to define this in keyframes so we put out keyframes in the name of the animation and then we're gonna say we can put for all - or we can put in multiple keyframe animations with percentage values so for instance 0% will say transform translate why because we want to move up and down zero pixels and then we'll put 100% and then we could say transferring I may be twenty pixels so notice how it's going up and down now maybe it makes this a little bit quicker there we go and this you can put 0% and by the way you could put like 10% here then 50% you can really add multiple steps where you control multiple declarations inside of here you can also just put if you know it's from into you could put just from 0% and then - same thing it will work just the same and by the way I should mention some of these these properties when you're using them I mean you're not using any sort of build told that wall I like autoprefixer as it's called sometimes you have to add in things like WebKit animation WebKit is a browser preventable to bog down too much information here but just be wary of that because your your your properties CSS properties can work in some browsers and then in others they may not and that could be because you need to add in those other vendor prefixes so that's just something to consider going forward ok so now there's only really just one more I let's see a media query to write for this it's kind of all screwed up a looking when we get to the big big sizes all right so let's fix make a few adjustments there from 1600 pixels and beyond and then after this we'll use a little bit of JavaScript to get the menu work on mobile and then be done alright so 1600 pixels and we'll say the first thing I want to adjust is to serve our icon is pretty huge so we're gonna take the width down to 40% here 1600 pixels must be out here there we go so we're scaling it down and we have to readjust the margin again so 5:00 a.m. Auto 4 a.m. 15% there we go it's kind of centering it up a little bit better our container we're gonna take down from 80% to 70 so it's gonna push it things in even more so it's already looking better so just within my new changes there could be big differences our blue container I'm gonna say we're gonna give it some different padding so if we look at the blue container we're going to change the padding up to 7 a.m. 0 & 2 a.m. so it's basis things out more we're gonna put blue container ull IP so we're gonna make adjustments to the paragraphs here to make them larger and the blockquote text from the testimonials so font size 1.3 m so notice they get quite a bit larger and then also gray container will say padding is 6 cm 0 & 4 a.m. so we're really just a little bit like that and then also just three more rule sets and we're done with the CSS so h2 margin top will say 4 a.m. so that's adjusting this section right here giving it more white space I will say blue container image say width is 15% all right so we're adjusting our logo there I believe and then oh no no no we're adjusting the size of these and then of course we're gonna adjust and at this point I'm just gonna paste in this rule set we're gonna fix this again because I thought the the icons were too big there we go so that's what that CSS looks like right there and that's it with the CSS all right so now we take this and we go all the way from like a a mobile view things all look good here things are looking good here as well I can see the breakpoints how the Styles adjust themselves all right this is off-center I think that needs to be fixed but I'm not gonna worry about that right now at this point time all right so now let's get this met this menu right here work and click it and nothing happens and that's the rule of JavaScript so you can include JavaScript i've inline like in the HTML file self which is what we're going to do or you could use the script source and i attribute and you link a specific j/s file we're not going to do that though I'm just going to show you how to write it in line because there's not going to be a ton of JavaScript so the way we do this is we put script so we have a script element here and this is where we write a JavaScript now so we could put a variable of menu so we're gonna say document dot get element by ID menu all right so remember I said we did place ID elements on few of these so our menu ID is up here somewhere let's see where we at right here so we have our image ID of menu so this is basically allowing us to target that element and be able to reference it as this menu variable a variable called menu here in our JavaScript so we need a couple more we need our nav element get element by ID of nav so we have another one called nav up there and then also exit which is the exit button on the mobile navigation and that's called exit so these don't do anything in and of themselves it just kind of just gains access to them so that we can do something with them so what we're going to do is on the menu which is in relation to this icon right here we're gonna say menu dot add event listener and it accepts a certain type of event so it could be hovers or anything like that this is a click event so when somebody clicks on it we're gonna make something happen so we're gonna pass in a function with e as a parameter and you'll see how we work in with that and then we open up things in a these squiggly brackets similar sort of to CSS and so when something clicks do something in here so we could do alert I have been clicked so if we do that watch what happens we have this dialog that pops up it says I have been clicked ok great we don't want that though so what we want to do instead is use our nav variable defined right here will say nav dot class list dot toggle toggle class called a CSS class called hide mobile all right so what this will do i when we do it is it will make it will attach and detach that hide mobile class and the mobile class is defined in our CSS so hide mobile of display:none so it will remove hide mobile if it exists on the nav element right here if that makes any sense and then also we're going to do e dot and E by the way is in right there prevent default and what that does is when you if you were to click this and you were scroll down it would kind of go up the browser would go up and you don't want that so we're gonna take this same code here real quickly and I'm going to put in exit in which that's this button nothing happens right now when you click on it and it's basically going to be very similar except it's gonna be novice and this type it's just gonna add hide mobile all right so now if we click it and then click this there we go it works as it should and this will still work as well even if we click that and then come back it still shows up and it changes its style automatically very quickly and there we go where that was lengthy so yeah there we go this is the the the app or the website that we designed all the way from the course from a couple days ago our last week rather and realizing it in the browser and you can check this out on your phones and everything and it should work quite well all right hopefully you stuck with me till the end here I and you've learned a massive amount so going forward if that was your first go around at you know front-end development I just try to get more practice by creating pages maybe taking existing UI designs and trying to make them a reality with HTML CSS and JavaScript I make sure you subscribe if you haven't yet and I will see you guys very shortly goodbye [Music] [Music]

Channel: DesignCourse

Views: 668,672

Rating: 4.948791 out of 5

Keywords: frontend developer, html tutorial, html, html tutorial 2019, css, css tutorial, css tutorial 2019, html css tutorial, html css tutorial 2019, learn html, html course, learn css, css course, frontend development tutorial, frontend developer tutorial, frontend development course, html5 tutorial, css3 tutorial, crash course, web development 2019, web development tutorial, web development tutorial 2019, course

Id: 8gNrZ4lAnAw

Length: 160min 39sec (9639 seconds)

Published: Wed Jan 16 2019