Learn HTML & CSS in 2022 | Crash Course

welcome to the 2022 html css and a little bit of javascript crash course now of course this is referred to as front-end development and front-end developers make a lot of money so we're going to take the design that you see here and we're going to make it work in the browser on the desktop on tablets and also mobile phones as you see so first we're going to take a quick look at this actual mock-up that was designed in figma by a ui designer myself and then we're going to take a quick look at what html and css is and what the structure looks like but then we're going to spend the rest of the course which is the bulk of this crash course on actually implementing this and i'm going to as much as possible try to introduce you to the concepts assuming you're a beginner now by the end you're go your head's going to be in a whirlwind you're not really going to fully understand everything but if you just want a taste of what it takes to be a front-end developer then this crash course is right for you so let's get started [Music] [Applause] [Music] now before we begin if you find that you're really interested in learning more and learning properly from scratch then i want you to visit designcourse.com forward slash css it's here in the link in the youtube description and here at the time of recording this it's not yet available but we are creating the most interactive and fun css course that will teach you everything from scratch so if it's not yet released based on whenever you watch this please enter your email here to get notified when it does release but it might be released so if that's the case look for a discount code here in the youtube description to get access to the css course here at designcourse.com also if you're interested in ui ux design and learning actually how to design great looking websites that's also currently available at designcourse.com again look in the youtube description for that i'll shut up now and let's get started all right so let's go ahead and get the obvious out of the way i am a floating head today and that's because i just chose to wear a green shirt i hit record and here i am a green fly rather a lack of a green shirt and a floating head so anyhow let's get started here we're going to talk about our html structure this is just a few slides to make this go real quick this is going to be real fast i like to get our hands dirty i don't like to do this theory stuff but it would make sense real quickly to talk about html and css structure and how overall it is structured so first this is an html element basically and this is how most of them look um in the context of a full web page you're going to have possibly hundreds of these and you can nest them inside of each other and do all this cool stuff so let's break this down so first we have what's called the opening tag and the closing tag now some html elements are self-closing and not in other words they don't have this little ending portion right here uh and it would essentially just be this opening portion but most of them most of the time you're writing html elements they're going to have an opening tag and a closing tag next up the html element name is defined right after this less than sign and so this one's called div there are many many many others dozens if not over a hundred after that we have the attribute so inside of an html element sometimes you can have attributes and sometimes you don't have to class is an example of one of the many attributes that you can use now some attributes allow you to specify or most rather a value of some sort all right so in this case it's hey it's whatever you want to make it and it's how you can reference it in both javascript and css in order to style it now right here sometimes and i say most of the time you have content between the opening and closing tag of your html document all right now let's say for instance we're talking about a whole html document itself like index.html which you may have seen or may not have this is the overall structure of an html document so you have the opening html tag here and the closing so that's always going to be your first line and then your very top line and then inside we have two major areas you have the head section and you have stuff in here and the stuff in here is really just configuration stuff so for instance uh the top of the browser there might be a little title there you specify tags in there the title tag uh you also have meta meta tags for the search engine stuff like keywords and this the description that shows up in the google search results i you also have an area where you can specify or link a css document that helps you style the stuff that's down here so then you have the body element and inside of the body mount that's where you're going to be working most of the time so this is where almost pretty much all of your html elements and those tags is going to be within the body tag with whatever whatever is within the body tag is what actually shows up in the browser on your desktop computers and also on your phones and stuff like this all right so let's talk about css structure now so this here is what css essentially looks like and this overall right here is a rule set in a big example where you have you know a full website you may have hundreds of these rule sets just different rule sets to style different parts of that html document all right so css by the way is nothing without html i if you don't have the body element or any of the stuff that's inside the body element then css means nothing html is the skeleton of your body and css is the flesh all right it's it's how you configure the appearance of html and i'll show you what html looks like without css and it just sucks right it would be really weird if we saw a bunch of humans walking around with just skeletons right so think of it like that all right so this is a rule set this whole thing right here this whole block so let's break that down all right so the first part of this rule set is called the selector there are several ways that you can create selectors but basically what it's what it's saying is all right in the html document and the html elements that we're looking at which element are we trying to style all right it's it's that tag name so in this case notice how there's a period and then it says hey well in our previous example when we were going over html we had this right here well if you're trying to reference this element you're trying to style it like give it a background of blue and make it a font size of one m unit well then you would say if you're referencing a class period hey so the period means a class so by the way if you're not sure what the class attribute means a lot of this stuff i'm kind of glossing through pretty fast but just to give this a definition let's say you have multiple elements in your html document that you want to style something about them similarly you give them a class and this is one of the use cases now you could also as a selector just choose div you could put div right here without the period and that means you're you're creating a selector that's based on an html element itself in the name of it and that means anytime you have a div element in your html document whatever is defined in here will be be defined on all of them next up is what's called a declaration all right i it's basically a property and value pair you can have many declarations within a roll set all right so this one's going to make the background blue this one's going to make the font size 1m unit and you can literally have dozens upon dozens of declarations inside of a single rule set so like i said before now we have a property which is a part of that declaration and of course we have the value right here and that is essentially it that's a very quick rundown of the structure of both html and css at this point if you've never touched it before i don't expect you to really understand it because you don't have the context yet you haven't actually written it and haven't been able to see what it does in the browser so that's what we're going to do now we're going to get our hands dirty with actual html css and working to build a design that we saw at the very beginning of the video now in order to write html css javascript and many other languages you need what's called a code editor now right now at the time of recording this video and this has been the case for at least several years the most popular code editor to use is from microsoft it's called visual studio code right here and the url for that is code.visualstudio.com rather and i this is the most popular and guess what it's free all right so i'm going to want you to go to that url code.visualstudio.com and download it for your os of course there's for mac os and there's also linux available for you hackers who use linux and then download it and get it installed so pause this video get it installed and then come back so in order to get started assuming you have visual studio code up as well and by the way just a quick thought here uh if you're really interested in development it's going to help you tremendously to get two monitors all right and and for me i hate working on a laptop many people do it no that's fine but if you really want to be as efficient as possible and you're at home or you're at an office or whatever get a second monitor because you can put your your code editor in on one monitor and then on the other monitor you can have your browser which is auto reloading every time you're making changes to it and that way when you're working on a website or a web app of some sort uh you can just switch back and forth because otherwise if you only have one monitor then most of the time you're gonna have to um you know come down here and then click uh in order to show up uh your your browser you have to switch between back and forth them um so let's go ahead and get started here uh what we wanna do is we have to create a folder in order to store our new website and so what we want to go to is view and then terminal right down here all right so right here this by default in windows it's going to put you in your users your username folder i have a folder in there called code so if you don't have it you could type mk der code i'm not sure what that same process would be for apple i've never used mac ever so yeah just just google it if you don't know how so we're going to go to seated code because i already made that and then we're going to make mkdur a new folder and in here we'll just call this i um my new lp for landing page a landing page is like the first page look at the home page basically so now we're in there now we can type cd uh my new lp to hop into there and now we can just hit code period or we can just hit open folder just to show you what code period does when you type that it just gets a a visual studio code instance like another copy of it out here in your browser or on your desktop rather yes i trust authors and there we go now we can see where it says my new lp this is the folder that we're currently working with uh within our instance of visual studio code so now we want to create our index.html file so index.html let's close that little window right there and this is where we write our code in the code editor as you can see this index.html is highlighted it's currently selected up here so one of the great things about visual studio code is what's called emmett e-m-m-e-t if you do a channel search on my my channel here on youtube you type in emmit you'll see um a a crash course i did on it but basically it helps you write html faster so one of the first things i do it is the first thing i do whenever i'm starting off a new html element or document rather i just put in a shift exclamation point hit enter and there we go it creates the quick boilerplate code that you would otherwise have to uh right by scratch or by hand essentially so as you can see um there are some things up here like the doctype html you don't ever touch that you just leave that there here's the html tag right here here's the closing one so the opening and closing and then inside of it we can see this stuff all right now we have like i showed you before the structure we have the head with a bunch of stuff in it like the maida tags as i mentioned before and also the title and then we also have our body element and this is where we're going to be spending most of our time writing stuff all right so there is a an extension that i want you to use here for visual studio code and it is called live server now what's cool about live servers you go if we go back here and after you install it and you reload your instance of this uh visual studio code you can right click our index.html and put in and left click rather open with live server when it does that it's going to open up whatever your default browser is mine's chrome and it's going to show you what your html dot element looks like your your document right now it's just white and there's nothing in it because we haven't specified anything within those body tags what's also great about it is whenever we make a change to this document and we save it with control s it'll automatically refresh this for us that's why it's kind of it's really handy for us when we're working with this to uh to have two monitors but of course i'm not recording on two monitors so i am gonna have to probably go back and forth um in a little bit we will i will probably um show this right here and then the code editor over here okay so what we want to do when we the first thing we want to do actually is to get our css document ready as well and typically when you're i you're dealing with a structured project you'll have a css folder because you might have multiple css files to write your css in so we're going to create a css folder called css so you click this little plus folder icon and then you put click uh the new file icon and we're going to put in uh we can name it something like main.css some people name it index.css whatever you want and that's good now for the purpose of this tutorial i am kind of going a little bit i'm ahead of what you probably should be doing at this point and we're going to not write we're going to write css but we're going to write it in sas so i know this is confusing you um sas is just a way to write css in a more efficient manner um but really i'm only going to use one feature of sas and that is nesting rule sets within each other you can't do that with plain css as of yet um and so i'll show you what that is but otherwise everything i'm doing is just plain css but in order to do this we have to right click this we're going to rename it and so we're going to change it from main.css to main.scss all right now i have this little sass icon that's the logo for sas showing up because i have an extension called the live sas compiler so if you type in live sas compiler right there you want to go ahead and install that once it's installed and reloaded you can click watch sas all right so what this does essentially is when you write inside of your main sas document for instance you don't have to do this if i type in body background blue and i hit save you'll see it creates two other files ignore the map file but the main.css file that is what's going to be linked or referenced here for this html document so we're going to type link and then enter that way we don't have to write all this other stuff that's necessary for this html element to work so the href is the attribute that's one of many attributes you know content is an attribute name many different attributes like i mentioned we're going to reference that file location so it's in a css folder forward slash main.css we can just click right here so now if i go back to the browser it is blue a very bright horrible blue that might make you blind but that's how that essentially works so we're writing our css in this sas file but it's all getting compiled down into this other file called css and so the just to show you i one of the benefits of being able to i write in sas and and one of the core features that the primary feature stats i'm going to use is uh the nesting i can show you an example real quickly so you don't have to follow along i'm just going to put in p like for a paragraph hello i'm going to hit save so what i can do now is i can say p and i will say font weight bold all right so if i go back here it is now bold it's pretty small probably hard for you to see but this nesting you cannot do regular css so for instance if you look over here notice how they're not nested all right so that's just it's for organizational purposes essentially for the most part so that's why i'm doing that i did want to explain that a little bit all right so going back here now what we have to do is we need to and now also you can specify a nice title like my new lp whatever that's what will show up like on search engines and all that stuff and also on the browser title or the browser you know the bar that you actually click and drag around so now what we want to do is actually take a look at our design and then start writing our html you got to have your html first before you start writing your css all right so here is the figure on document i'm going to go ahead and actually link this in the youtube description so that you have access to this so that you can look at it as well and this is typically how you would be doing in a professional setting i very rarely do you just start off designing a website when you're working with your html and css you want a mock-up preferably done by somebody who's a good designer if you want to become a good designer member visit designcourse.com because that's what i teach as well but nonetheless outside of the spam right there you want to look at an actual polished preferably high fidelity document where it's going to show you you know what you want this to look like this is all we're going to do all of this right here it doesn't look like much but for a crash course this is a lot to take in all right so this is the desktop version i and when i'm structuring and writing my html i like to see the full experience the full desktop experience i don't want to look at the mobile version because mobile versions can leave things out intentionally because you don't have as much space so it simplifies things but for html our html is always going to be the same and we have to create all the html elements for the full experience so i start from top down all right so when i'm thinking about what i'm how i'm structuring things i it's starting from the top down we don't work from the bottom up okay when i'm like looking at the structure of things so the very first thing that i usually ask myself is does this need any type of container so by container i mean um if we can visualize this this isn't going to be a part of the design but if i take this rectangle tool we can kind of draw a bound right here bounding box around this whole thing that kind of just contains everything right here so if i get rid of the fill and just give it a stroke you don't have to follow along by the way i i can make this maybe we'll make it blue and then we'll make it pretty thick let's drag this out to include that little hamburger menu icon which actually this isn't going to be there during the desktop version so let me remove that and write a line is there we go so this is a basically an html element that we'll want to include here i for this design so let's go over here and we're going to type in if we want to write div class equals like a wrapper sometimes it's called container you can you can name it whatever you want really but you commonly see this as named named for this sort of thing this idea that we're wrapping everything around a central element i it'll be wrapper or container usually so you could do this or if you don't want to have to type out all those elements you can use the abbreviation so period for class and then the name of it and then hit enter automatically it creates a div element so div element is probably the one element that you will use the most when writing html and it's just kind of like a generic element that's created for defining the structure of your layout all right so you'll see plenty of div elements and their attributes primarily you'll see as just being class or id so you can also have multiple attributes of course in a given element id equals you know some unique id an id is primarily used for javascript though you typically don't see people referencing ids and css now if you wanted to you would just put instead of a period you put a hashtag and then the name of the value that you gave it essentially i think i hit the keyboard something like that but you don't really don't see people do that anymore so we'll leave off id all right so now we have that overall element one thing i do want to consider is this photograph right here i notice how let me hide this real quick notice how i we have the menu on top of it so how do we show a photograph like this picture of a nike shoe with stuff on top of it like other html elements well there's something i there's a css property that we can give it and that is called position and we can make the value absolute and that means we can kind of just break outside of the box model as it's called and you can position and stack it uh like way in the background and you can have things on top of it like this element right here and so when we do that we can really position or place this this uh the html for this image anywhere in the html element so i prefer just put it at the top now there's two different ways you can actually show photographs or imagery in a sense i that are from like jpg files or png files um and the first way would be an image tag so if we type image source equals i this is where the source goes kind of like href right here source is like where you know the actual file is located now currently we don't have any image files in our my new lp folder so we actually have to get that image and i'm going to link this image in the youtube description it's a free image that you can use from a awesome service called unsplash.com so right here if you type in shoes y'all you will also find it this is the uh the graphic that we want and we can just click over here and just choose medium and it will download that onto your computer here in chrome we have this little element firefox has the same thing we'll click on show in folder and then what we do is we come over here right click reveal in file explorer and that open up on my other monitor and so we have my new lp now we we double click into that folder and then now we can have a new folder called images for instance or assets you can name it whatever you want and we can drag from the other element which is on my other monitor that picture right there so now we're just going to call this shoe now we're also going to have three other pictures of shoes and i'm going to link those as well you can use whatever you want from unsplash and i'm going to drag them in here as well all right and there they are shoot two three and four so now we can close this out and you can see we have our images with our you know different shoe pictures right here all right so let's close that out and so now we have our image source now we could say images forward slash shoe.jpg now the alt attribute is a really important attribute because whatever you put here i when somebody hovers over it for instance they'll be able to see a description of it um but also for people who are using screen readers who are visually impaired i when when they're navigating through the um the website with their keyboard it will actually give them an audible reading so they can hear what's happening essentially on this website so um we can just say uh red nike shoe not shoe not show shoe rather so we'll save that and we'll come back here and here is our document oh there's that big blue border which we do not want let's just delete that right now and here is the shoe now notice when i drag this in and out it doesn't change and also if i were to bring this up let me try to find the bottom of my my browser here wow it's really large there we go we could see that uh it has scroll bars so we could solve for that and remove these scroll bars and make this image responsive the way we could do that is we can reference reference rather this image element by putting img here opening that up and we could say width 100 so now if we go back we will see it responds kind of how we want it to so that's the first way that you can display a photograph here essentially in css now the second way which is the way we're going to do it because it gives us more control over the image itself is we're going to make it as a background image in css so let's let me show you that real quickly so the way we'll reference that is we're going to make another div element let's give it a class of hero hyphen img for image and by the way hero means i the hero section of a website is usually the first thing people see so it's like the top of the website and so now inside of here we just leave it like this we don't put anything any content in between these this closing tags and the opening tag we just leave it as is and then when we get to css portion you'll see that we will reference uh this hero image class right here and create a rule set in css and we'll define the image there we're not going to get to the css portion yet though but i wanted to kind of describe you know my reasoning behind not using just an image tag okay let's continue on so referring back to our design which is right here the next thing we have is this portion right up here so if i bring back our um let's get it over here rectangle two and we review it i can go ahead and get this situated right here this is what i'm going to look at next so this is our our header which has a brand like a logo left aligned very typical pattern that you'll see that ui designers uh create you see your logo on the left and then usually to the right sometimes in the middle sometimes close to the actual brand is the navigation so we have two elements and notice how they're in two they're in the column ones this is in a left column this is in a right column so they're not rows where they're stacked up on top of each other they're columns and that's important distinction to make because that will def that will influence how you structure your html so in order to have two columns you typically need to have a parent container all right so this is this blue element is a parent container and if i duplicate this again we have another element in our html for this right here the logo i know that looks kind of bad and then i will duplicate that and we'll drag this one over here we're gonna have another element that contains these individual elements so when you're structuring your html think about it like blocks like rectangles all over the place because that's essentially what it is that's how the browser interprets it but then we can style it up with css and make it not look blocky like that all right so let's close that out and there's also something called semantic html and it simply means use the html tags that are relevant given the context of what's happening happening in your html document so for here we're going to give this what's called a header tag and it's very simple we simply put in header enter and then inside of here we put the two columns so the first thing inside so this think of this header as we revert back to here this rectangle right here now we have starting from left to right the first thing that shows up is going to be this logo now this is a logo that is purely a word mark logo so an identity and logo design a word mark is just type now the reason i know that's because i'm also an identity designer and once upon a time i did over 2 000 logos but this typically you're not going to have a logo like this though usually you're going to have an svg file which is a scalable scalable vector graphic file like an asset that you put in that folder it's an individual graphic file that hopefully the company will provide you with and that is their logo that they want you to use so typically you would use an image tag for this but for us because it's just purely word mark based and it's going to be based on the the font that's used here already in the document we can just use and make it a link i and so we'll use the a tag all right and that's how you create hyperlinks or people things that people can click because another typical pattern is the logo should be clickable and it should take you to the home page or the dashboard or whatever it's associated with so we're going to put in a enter so remember get used to that using those m abbreviations it makes writing html a lot faster so the href is the location of where i'm you want somebody to go when they click on it this could be to an entirely different website like website.com whatever or it could be into a [Music] a different page on the website so in our case this would just be in most cases it would just be um the actual.com of the website so if this website for designcourse.com i'm putting designcourse.com right there um if you for you'll see for the other navigation links that show up we have three of them you could also put this to a different folder on the website so something like about you could do that or can go to individual html files like about.html you have different eye types like you can do php although that's old school but anyhow that's just for taking you people to different websites or different pages on uh on the the same website so if you don't want to go anywhere just put a hashtag there also there's also ways to take people to different parts of the same html document it'll scroll down automatically you've probably seen that and you do that through tags so we just put in like section two or something like that and then you'd have to create a reference to section two somewhere else in your html document all right i know this is a lot it's a crash course so we're just going to leave this empty that means nothing's going to happen not empty we're going to put a hashtag that means nothing's going to happen when somebody clicks on it because this isn't a real website so now we're going to also have a class attribute class equals logo this class attribute will allow us to reference it in css to style up to make it look like it does in the figma prototype that we've been looking at now inside of here we have the content section and so inside of it we're going to put shoe and then notice for a second if i come out here notice how one word is red and the other is black well we need a way to make this red just brand right so to do that we can't just put shoe brand we wouldn't be able to do that maybe with javascript we could but that would be silly what we would do is wrap brand in its own element as well and a great element for that use case is span so we take our span make sure we put brand inside of it there we go shoe brand and by default if we look at the result it'll say shoe brand it's it's styled exactly the same as you can see if i zoom up a little bit but that's because we haven't styled it differently yet and span doesn't have any inherent uh browser styling that's applied to it that's something that we'll have to do next up if we refer back to our document here we have this element home sneakers and players all right so we also have to account for the html that will inevitably show up right here for mobile see this little icon which you've probably seen versions of like when you're using your phone and you visit a website you tap on it and then it reveals you know a mobile based navigation of these elements well that's because you simply just don't have in many cases enough width or space on a small phone to show home sneakers players and maybe even more along with the logo so that's why we have to account for this it's kind of like making the the navigation dynamic so we have to create uh an element for an html for this and also for these so let's do that right now so what we'll do is we will specify the first element actually it doesn't really matter which we make first that hamburger menu or the that uh little or the actual navigation so let's do the navigation first so for a navigation like this you're gonna wrap it those elements those three elements which are currently on a desktop in three columns so remember we need to give it a parent container we're gonna wrap it in a an element called unordered list all right so that's an acronym obviously ul for unordered list and then we're going to put three elements inside of there and so because we have three links we have home sneakers and players so an unordered list accepts i sibling or nested html elements i that have to be denoted as li list items because it's a list so list item one we just hit li hit enter and then we put a link so remember to create a hyperlink we put an a element hit a hit enter inside of there and then we're just going to put the empty hashtag because it's not a page that's not real typically you might put something like you know the actual website address because this is going to be a home link as well so we link the the logo and the we put a discrete home link as well and there's been usability studies about this people expect to see a home link and they also expect to see uh to be able to click on the logo to get to the home page so inside of here we just put home for the content so hopefully that makes sense now typically you could if you wanted to you could i kind of separate these out i don't like to do that i just put these list item elements with links on the same line just to save space now another big handy feature here in visual studio code if you want to replicate or copy and paste elements quickly we could take everything left click hold it hit ctrl c and then control v but a better way is shift alt and down arrow key so fast once you get it into your muscle memory so now we have three of these and we can specify sneakers here and then also players here all right so there's one thing that i forgot i forgot a certain element that i should not have forgotten i remember how i said we need to wrap these elements i we do have these wrapped up in a parent container or a parent element of ul these three but i also want to wrap and this is for semantic purposes this entire element right here and our uh navigation or our little menu icon within a nav element which is a semantic element that will help screen readers understand that this is a navigation and it will say you know audibly to the person who's using the screen reader that this is a navigation right here so we've wrapped that up and we could also put in that menu and so that menu is an illustration it's an svg file right here so if we click on it all we have to do is right click and then we'll copy slash paste as svg svg is short for scalable vector graphics and it's not rastered so when you're you're considering you're talking about graphics in general they fall under two categories it's scalable or it's vector or it's rastered raster is like when you've seen photographs sometimes they're really pixelated and they look horrible but photographs can only be rastered but this is an illustration so it doesn't make sense to make that a rastered image because an svg is code and so we can scale up the size and svg however large we want and we'll never see blurriness or pixels so we're going to paste that control v right there so that's what it looks like sv svg is just code all right that we can actually paste into our html document so that right there is looking good let's give it a class too of close so that we can reference and style and position and scale it in css in the future and let's also get rid of width and height because we can set that in css as well going forward in the future all right so that's looking pretty good right there if i hit save and we look at our html document at this point it looks but ugly it looks nothing like what we have going on here right yeah that's the beauty of css because we're going to be able to transform it into looking like this once we get all the html ready and we start writing our css all right next up is going to be this section right here so this is a part of our hero section especially on desktop this is the main part we see and we have a headline a sub headline slash description and this little down arrow which again is an svg element as well so let's go ahead and write the necessary markup for that so outside of header we're going to put in a section element so this is just basically a section of content and this helps you know structure and organize your entire sections essentially and we can reference this section in our css to give it white space away from other sections and things like that so we're also going to give this a class and we're going to give it a class because we're going to have two sections we have that top section and then we have the bottom section down there so we're going to do class equals hero all right and inside of here what falls next is that headline that we have so where a headline is specified usually million times out of a million times at h1 and you have h1 heading 1 all the way through heading 6. h1 is the most important and usually that's in your hero sections the big you know big bold text that grabs the user's attention essentially so we're going to put regain your confidence on the court there we go very solid so now if we hit save and we go back we don't see it what is happening here all right that's a little bit strange so sometimes weird things like this happen it's not actually showing up in my browser because we should certainly see that type and i'm actually confused at this point and so i'm going to sit here a little bit and figure out why it is not showing me maybe we can go to view terminal all right it's not running in the terminal if i right click open with live server it's not showing up there now what we could do when you have firefox or chrome which i advise using when you're you know working with web development hit ctrl shift i or f12 and this will get up this little dev console up there it is it was way down there now why is that well what we can do is we can use this little uh element right here and this will help us uh see and when we hover over different things and like notice this big area why is that there i can tell you why it's there now i understand because i didn't know what was happening see where it says svg close well that is actually because of this we don't see it because it's white on white all right so that was a white little hamburger menu now if we change this background so to take our body back around let's say black for instance and we save it we will now see this huge and that's because we removed the width and the height attribute so it's just making it really large by default and so that's what was happening there so nothing to worry about we can delete that come back here and just keep on writing our html at this point so now we're going to have a paragraph because we had a paragraph underneath it or the sub head as it's called sometimes we're going to give this a class as well because i want to style this individual paragraph as well i and we're going to call it sub head for subheading and i'm going to simply copy and paste this so you don't see you're not sitting watching me type this out this is the shoe built with purpose to take your game to the next level blah blah blah and then finally we have the third element which is that little down arrow icon so what do we do we go back to our document here we click on it right click copy and paste as svg and paste it in right here now once again we can go ahead and get rid of the width and height type in class equals and this will be down hyphen arrow we're going to make this actually animate as well next up and by the way we're almost done with our html so we're gonna have another section and then that section is gonna be based on this design that you see down here all right so we'll do section we're going to reference that class equals we'll just say more info or something like that so you can put hyphens as well and we have three elements occurring here so again let's get some muscle memory here we have two columns per row we have three rows and we have two columns so we have a column here let's get rid of that and then we also have a column right here so we need a parent overall parent container that contains both of these elements in html think about them as blocks or rectangles so to do that we're going to wrap each one in a div called feature all right inside of there we're going to have two elements for column one and column two that is going to be content because remember i look at our first one and this one's getting a little bit tricky because the first element of the first column is our content a title and a description but then the next one we're reversing it um and then we're gonna have this here and that there but we're going to style it in our html so that all three of them including the middle one start with our eye our content in the first column but we can use css something called the css grid to take just this second row right here and reverse them with css very cool stuff exciting so i to create that title we could use like an h3 element you can use multiple h2 h3h4 whatever but we can also just use a paragraph element as well which is what i'm going to do so the emit way of doing this we want a p element or paragraph element with a class we put p period and the name of the class or the value so we're just going to say title all right so inside of there we're going to say light weight that was the copy for the first one now let's go ahead shift alt down and then let's go ahead and put in here um i'm just you can copy and paste this i'm just making all three of them the same let me just paste that right there now real quickly as an aside you can go to extensions and you can type in l-o-r-e-m for lorem or lorem ipsum i've already installed it but what it allows you to do if you don't have actual real text you just want filler latin fake text as sometimes you'll see it's called lorem ipsum you type lorem and then how many words you want so if i want 15 lorem 15 no spaces and then we automatically get all of this gibberish that you cannot understand all right so uh they have lightweight uh so yeah we have um that and then we have the image next to it so we have our first element or for our first column already defined within feature now we have to have the image and this time we will use an image tag so image source equals images forward shoot to jpg and alt you can just describe the shoe whatever it looks like and that's it so we copy all that the whole feature area and then we paste it two more times now let's save that we need a way though for us to reference this middle column to flip those two columns and the way we'll do that is on the feature element we're going to put a space and we're going to add another class name so you can put multiple class names in the same class attribute so this one this particular div element will have two classes feature and also left we can just name it left you can name it whatever you want you can call it flip because we're trying to reverse or you can go reverse whatever you want so that's all we need to do there and guess what that is our html that is the full html document and of course if we go look at it here it looks really bad look how big that down arrow is so that that's why essentially you know we want to use css to make our website actually usable which is what we're going to do now all right so for the css portion of this video which is what we're going to be focusing on here throughout almost the remainder of the video i we as you can see my my format here for this layout of the the desktop you can see i have my browser window right here kind of like in a phone orientation and then you have my editor right here and by the way to have more room to actually code we can hit control b to hide that file area right here all right so you can always just toggle it on and off with the control b now the reason i have this over here in a phone orientation is because we're going to do something we're going to write our css which which is in a format called mobile first so mobile first css what does that mean that means that all of this initial css the initial css rule sets that we write are going to be geared towards what this particular website or app looks like and how it behaves and looks like on a phone or a device that you know has a little amount of width now for our i actual figma documentation the link the prototype that we're looking at there is no actual i designed for the mobile view now typically you would have that but we are we only have a desktop so we can make some design decisions on our own i in order to adjust things with css so that it works and looks well on a phone all right now the reason we do mobile first css as opposed to desktop for css is because when it comes to uh your css in your initial rule sets that you write that aren't a part of what's called responsive design or media queries i know i'm confusing you right now but i still have to plant the seed is because you're starting off in a more simple manner because typically when you you're working with i and you're looking at a website that's on a phone like this for instance i it's stripped down there it doesn't have to be as complex so when we start to expand out this browser window which can help us mimic uh going from maybe phone to tablet to full desktop i you're adding in more features and such and we can do that in the media query so it's just a practice that makes sense uh for me now some people still do desktop first and i'll show you what that kind of means in code uh going forward but for now we're just going to try to get this thing looking good on a phone and just taking your browser and pushing it in is one way to do that another way to do that ctrl shift i or f12 is we can take this right here and let's also i click on this little cog wait it's not the cog i'm sorry it's these little three dot menus we could dock this thing uh wherever we want we can also completely just detach it you can unlock it so if i click that for instance now i have a separate window right here if you click this element right here you could see now it's kind of allowing us to have present it by default like in an iphone x for instance and we can kind of see what it looks like you don't have to use this way i but it's still it's just it's an option so i'm going to re-dock this back so coming over here and i'm just going to put it maybe i'll put it at the bottom and now i can just exit out of it all right so here's our mobile view essentially so the first thing i typically will start off with is the body element now the body element is the very first element in this tree so to speak uh you can actually go ahead and start styling so it's the body element what would we want to change about the body element right well it might be a background color uh it could be a lot of things we could set in a font family if you want to use a custom font for everything now because remember if we set certain rule sets here in body it can affect all the elements that show up within it that are nested in it as well so setting your font family in the body element makes a lot of sense for most cases all right so another thing that we'll we'll also do is we're going to i reset the margin so by default the browser will apply margins now your margins you have margin and padding and that's a way to define white space uh white space is just the empty areas we can see there's a little bit of white space up here but it's for me it's not enough so i want to put margin now that's our property and then i'm going to put a value of 1.5 m units and we're going to end it with an uh semicolon that's how you end a declaration within a rule set hit save not much has changed obviously it actually looks almost exactly the same but if we change this to like 10 m units now you can see it doesn't look like there's much space here on the left but if we scroll all the way to the top there is a lot but also there's a scroll bar at the bottom that's 10 m units that is a lot so if we change this to 1.5 we can now see we have much more compared to what was default so if we remove this that's all we had that's not a lot of what's called white space so going back here and scrolling over here the reason it's creating scroll bars sometimes is because we have issues with our images they're not responsive yet so but don't worry about that so what is an m unit you're probably wondering what is m well there are many different unit types that allow you to scale things or define widths in just lengths and they fall under two categories absolute units and also relative units an m unit is a relative unit and i'm not going to get into a full description because i could do long videos just on this topic alone but generally speaking when you're dealing with margin and padding you want to use m units and the m unit is simply meaning i if we take a look at the default font size again if we hit ctrl shift i or f12 and we take a look at our paragraph for instance we can see by default which i'm not sure if it's going to show up here but by default browsers will apply 16 pixels or px which is another unit that we could use to things like type like for for it's set on the body element essentially um and so our body element if the default size is 16 pixels one m unit is equal to 16 pixels all right now if i change it to 1.5 that means it's going to be 16 times 1.5 so hopefully that makes sense now the that would change if we changed font size for instance the font size property from we overrode the default value that the browser gives it from 16 to like something like 25 pixels and then that case we could see it increases this even more right here even though we left it at 1.5 so it's relative uh the reason you want to use m units for this sort of thing is because if i people i want to zoom up their browser uh or if they've changed their operating system so that things are larger everything in your user interface will scale well i'm if you leave it at pixels it won't like an absolute value like px for instance so that's just a quick run down there i know it's confusing and i this is a crash course like i said you're taking in a lot here i don't expect you to fully internalize all this at this point but i'm planting seeds here like i said all right so remember i'm talking about wanting to put to use a font well if we go back to our prototype which i think is right here and we click here we choose here we can see this one's called railway actually actually i wasn't even planning on using railway we're going to use a different one called poppins which i really like so how do you specify a font well we type in font hyphen family and then the name of it poppins there you go problem with this though however and it's going to work for me because i saved it you can see it changed the font clearly uh from the default times new roman which is the serif font to the sans serif font of poppins now if you don't personally have this or the person visiting your website doesn't have this font installed they're not going to see it so in that case you can provide a fallback here in this value i and just say sans hyphen serif so it'll choose the closest sans serif font sans serif simply means without serif and a serif is like uh times new roman it has all those things hanging off the letters uh sans serif is usually a cleaner font it's much more simplistic like this now the way you force them to be able to download this font is we actually import the font now this happens to be a font that's available on google so if we go and get our browser fonts.google.com this is a resource in which you have all these cool fonts that you can use so let's type in to search for a font called poppins we click on it and then we choose our weight you know like we want it really bold do you want you know do you want all of no you don't want all of them why because it takes time for uh these to download so if somebody's on a phone and they have a poor connection the fonts won't load right away so you only want three macs i'm just going to choose two so i'm going to use lite 300 actually you know what i'm going to use regular 300 or 400 rather and then also i not 600 i want yeah yeah i want 700 all right so when i do that i think i clicked off of that little element right there there we go so we click this to get this up and we can um choose to either import it if you copy this right here you can just simply paste it in your html document but typically speaking you want to link it in your html document so you take all this stuff copy it and then above your main.css this link element we just paste it and then that way it's going to download automatically i from your html element it will be available automatically here as well so for me oh interesting this is no longer working and showing that serif font it's a serif font so i have this cool uh browser extension let me extend this out and unfortunately i don't oh there it is it's black that's why i can it's called what font so if i hover over this times new roman times new roman why is this no longer working uh it's not loading our poppins font despite having oh wait it says montserrat what is that oh it's selecting two families all right let's get rid of that family equals poppins that probably didn't happen for you but let's just save that anyways all right and it's still happening for me so what you want to do is put a comma right here oopsie i'm going to save that and now it's coming back so that's how you debug your html with the help the help of the dev inspector all right or the chrome tools it depends on whatever you want to call it okay so we got that done and let's continue on with our next rule set all right so let's drag this back in and the next thing we're going to do is we're going to get rid of the underlines nowhere in our design in figma do we have links that are hyperlinks that are underlined so how do we influence all links and remove the links from all you know existing elements here on the document well we simply reference we create a selector based on the tag name a which is all links we open it up and we give it text decoration save it they go away awesome now we can also choose to style all links and make them even larger so let's say 1.3 rem units now what is a rem unit we're using m units up there rem units over here so typically speaking for font sizes you want to use rem units or relative m units and i can't go into the details about exactly how it works because it's kind of difficult to explain off the cuff here but essentially it allows you to i control what this particular font size is relative to based on a font size that might be specified elsewhere um that's the best way i can describe it but there's entire videos uh if you go to youtube you can type rem vs m or google rem vs m and you'll get a better explanation that way but just to just as you understand it for now font sizes use rem margin and padding use m all right so next up we're going to have nav and nav if we look to our html structure we have header up here we have our a element um which is the logo in fact let's style the logo up um let's start the logo up a little bit later until we get our image actually up or here or image that that big red image of the shoe um so i think what we'll do is yeah let's do the actual image so notice the image is right here it's our first element this doesn't have to be our first rule set either so we can put these rule sets wherever we want in relation to each other so let's actually get rid of nav and let's work on our hero image so we're going to put period because it's a class called hero hyphen image all right so this one has a lot of declarations um it's almost it looks like it's over 12. so the first thing remember i mentioned the beginning of the video there's a css property called position we're gonna make it absolute so we're gonna save that and we're also going to put top zero in top left right and bottom are elements that you can use for uh position absolute so you have to have position absolute in order for those to work this is way for us to position it so top zero left zero all right so let's make sure we are referencing everything so class hero image and the reason we don't see the image yet is because we haven't specified the background here so let's put that in so to create in a photograph or an image based on your css we put type in background url and then we put in the location of the images so if i hit ctrl b we'll see that we have our css folder that this file is in but then in a different folder adjacent to it is images so we get out of our folder by putting two periods in a forward slash and then into what folder images forward slash shoe.jpg all right so that image is there now but we still don't see it because we haven't specified a width or a height so width we'll just say 100 of the browser now height we're going to use a new element it's called 100 it's called viewport height or vh so 100 vh there it is finally we see part of this image which clearly is quite large all right in fact we don't even see most of it anyway and so we still have some other elements to write so viewport height simply means the height of what's viewable here currently in this browser all right now we're also going to specify a property called z hyphen index or z and x negative 1. now what that does is that the z index based on the value you choose which you can put negatives will make it fall on top of or behind other elements that i you know may show up and you can only use the index with position absolute or position fixed which you'll see we will use in a little bit now we can also change and add some other properties to background so for instance background hyphen size we can change this to cover now we can actually start to see a little bit of that shoe all right we can also do background position hyphen x for instance which is left and right uh 20 so we can kind of move around what's viewable now we can see more of that shoe uh we can replicate this as well shift alt and down and we can do position y now for a lot of these values you can have shorthand values as well in fact background right here if we can start to add some of these same values and just put cover here instead of explicitly stating it here so know that you do have those options so why we'll put 20 as well for instance just to move it down a little bit we can also specify and i'm not sure if this is going to affect anything overflow hidden all right so i had overflow hidden into my reference code we may actually end up needing that but for now i'm just going to comment that out so to comment a property out so that it doesn't actually work yet it's still there for your own reference point put two forward slashes all right so that's good for now and now let's get back focused on this navigation up here so let's take a look at our logo and that logo say ctrl b is right here it has a class of logo so we want to reference just that so we put the class logo and inside of there we're going to put color white that's the way to change the font color font weight bold which will use that boulder the 700 value of that font that we imported all right so that's looking good there next up looking at uh our situation here we have our header element so what do we need to do with the actual header element all right so if we look back to our design this whole thing is the header element this this invisible blue square which we don't see obviously in html but we have two elements we have two columns rather this and the nav element we need to we had to make this so that those are not underneath each other like they currently are in the browser but side by side we don't want rows we want columns for these two elements so the way we do that is we say header and we say display flex notice how they kind of just they're next to each other now right we can also do justify content space between now that pushes it out all right so we're getting somewhere so display flex is a way to structure your layout there's also one a value called grid which we oops not gerd grid which we will also use now they're they they each have advantages but the grid is pretty pretty powerful but for just quick simple things like this to put two columns i like to use the grid or the flex rather flexbox as it's called if you want to learn more about both of those things just entire courses on them so again crash course this is all right so that's pretty good right there and now what we want to do is uh by default we don't want this right here let me reset this browser zoom we don't want that right there we want just this little hamburger menu we need to hide this element right here so how would we do that well let's go in and let's specify and let's first reference this where is this at okay these are both inside here we have a close button oh i don't think i actually let me see here i want to make sure i structure my html correctly because maybe i actually didn't yeah i didn't okay and so actually what we want to do is take this menu element and we want it outside of nav my bad we're gonna have the close uh svg element a little bit later inside of the actual nap but for now we're just gonna leave it like this okay so now these are all stack three because we have three elements that are in here one two and three and there it's created the display flex has created three elements essentially now we need to um hide this navigation in a second but for now let's let's let's uh go ahead and get this started because it's way too large clearly so to do that we're going to take in uh and take a look at the elements we need to there we go yeah it's going to be svg so if we look at our header right here we have a single svg inside of here all right so what we'll do is we'll say svg now this is where we're nesting for the first time i believe yep which is the feature of sas so this means uh any svg elements inside of header this this right here this rule set will only apply to them if there is an svg outside a header like down here somewhere this rule set that we're about to create would not apply to it so we're going to say with 3 m units save that that's a good size right there margin top so margin you can there's a shorthand for margins so you can do margin alone and just say you know specify the four different values if you want so top right bottom left like a clock or you could say margin top we'll say negative 0.6 m units so you can actually do negative values and we can do cursor pointer here now that doesn't look like it's right location right that's because of this element and we need to try to hide that so what we're going to do is we're going to maybe just above here we're going to put in nav now we could just do display none and that you know almost this pretty much that gets rid of it right and that's what we want and we could do that but there's another way to hide this situation here and the way to do that is we can use the transform property and kind of just push it off the side of the page for now we're going to leave this at display none no i and you'll see why in a little bit but we want to get things structured up just um a bit more here i i want to at least finish this portion all right so then we'll work on that navigation all right so if we want to get this all structured up because clearly this is way too close to the logo i think it needs to be larger and this big old thing that needs fixed as well so what we'll do is reference here so we have a a section called hero and let's reference this section alone so what we do is we could put hero or we could do section dot hero which means i it's in real it's it's also specifying the html element and the hero element in there and i like to do that just as a reference point sometimes it gives it more context essentially so color white that means any type elements inside of that element is going to be white we can do also i let's do let's do a height here of 90 viewport height and this will become important when it comes to scaling this svg element and positioning it so let's take that svg element inside of there and let's make the stroke white and then we could also make the fill white as well or is it phil let's see here because svg you have to specify the background a little bit differently so if we look at our down arrow right here ah that's because the way we change the fill here it's specified in the path attribute so path fill white there we go all right so we've done that and also we did give it a class a down arrow so technically what we could do is we could say right here changes from svg to down hyphen arrow notice if i save it it works just the same and we can also size it a little bit or adjust the width so what we could say is we can say position absolute and also bottom 2em and we need to get this scaled down big time so to do that uh what we'll do is just put in a width right here and we'll just put one m unit and there it is way much smaller all right and i think that's pretty good right there so now next up let's also focus on this element this type element so we're going to put in h1 and we're going to say font size 3 rem units which would be 3 times 16 which i'm not sure what it is off the top of my head i'm terrible um we're also going to do margin top 2 m units really push it down and then also we can adjust the leading or the line height with the line height property we'll say 3.3 rem units now you may be wondering how do i know all these values off hand well sometimes you can refer back to your figma document and then click on it and then it'll kind of give you the pixel values and you can do some math to convert it to mrm or you can just eyeball it sometimes it's all about eyeballing things and i'm just adjusting these values as is so i already prepared this document before i have a reference code on a reference monitor it makes the tutorial go much smoother than rather you sitting here watching me fumble around and adjusting values um sometimes people get mad to like why are you you know not doing that so that's that's the answer because it's not clean watching me it's already difficult doing this as is now let's also reference our sub head which is right here a sub head class because that needs to be a little bit larger so sub head will be font size 1.4 rem units and i think that's looking pretty good right there all right so right now all this doesn't look good but this looks a lot better than what we had before clearly so now let's get this menu up and when we click on this a menu is supposed to show up what does that menu look like so we need to style that menu right now and that menu is defined within our nav element so that's why we're going to go back to our dav element and take off display none now let's just pretend somebody clicked on this element and it shows up a nav a navigation somewhere so what we'll do is uh we're going to use position fixed fixed means when i scroll down guess what it doesn't go away it stays right there which is what you want with this type of navigation on mobile well we want to push this position this to the right it's going to slide in actually from the right we're going to say right 0 all right and then we're going to say top 0 and then we're going to go ahead and give it height 100 viewport height now we can't really see the difference there until we make it we give it a background so i'm going to remove that and i'll show you background is white now we're going to say height 100 viewport height there you go next up we're going to make the width about half oops or 50 percent because you can use percentage values as a unit which is uh relative to the size of the browser the device that you're you're viewing it on um and save it right there now we can see it's it's giving us enough space for a navigation and then we'll also do z index two to make sure it is sitting on top of this white text because you want this navigation to make sure it goes all over everything so you might actually want to make this a really high value like 999 just to be careful so then also text transform uppercase allows us to take all this type and make it uppercase all right so now inside nesting inside of an element is the unordered list element so let's do that ul enter uh sometimes the emit abbreviations don't work like you want to so ul for under list we're going to say list style type is none that gets rid of these little black circles we're also going to get rid of default padding because browsers will add a little bit of padding on the left side of these list items so if we save that pushes it all the way over here to the left and then we're also going to push away from the top by about 8 m units so 8 times 16. it's really pushing it away because we are going to have a little close button up here now then we want to style these right here because these look bad purple default color is bad and they're also too small and too close together so we're going to take a which means all the a elements or the link elements inside of our unordered list because if you recall we have list item then we have a inside of that so for these links we're going to put color black we're going to do padding so another way we can put margin and padding is we can put top and bottom values by put 7 5 me units and then the right and left values can be two m units all right then we're going to display block now watch what happens to them so padding on a link element won't work unless it is display block all right so hopefully that makes sense now we're also going to do width of a hundred percent and now that doesn't seem to change anything but if we also add a hover state which we can do through sas by putting an colon hover that means on this a element we're going to have a hover rule set just for when the the cursor hovers over it we can say background gray we're not actually going to leave it gray but i'm going to hit save now look at that now if i remove remove width 100 oh it actually still works i thought it was not going to work i think display block will automatically make it that so so okay now we could take this i think that's too much gray we want to be really light so if we just hover over that black value we can just use this here to choose a value uh with our cursor so if we hit save look at that that's a lot better to have a nice little hover effect now let's get that close button working here so in figma i'm going to right click and i'm going to use a plug-in that i've installed if you go to bandage plug-ins or browse plug-ins in community you can use a an actual plug-in called iconify so iconify after you get that installed if you want to follow along i type in close and you'll see all these so i like this one let's go ahead and just drag that and we want it to be black already so we right click and we do this copy as svg alright so we go back to our html and we're going to put it right here now we're going to get rid of width and height class equals close and i believe that is what i did in my reference code it is just to make sure this is all working i think it won't matter i'm going to put it at the top because that's how it is in my reference code all right we're going to save that and now you can see it's showing up but we have to actually be able to position it now because it's not in the right area so underneath here i'm going to put in i close and in close we're going to put float right which is a way just to kind of push thing over something over on the right side and we can also do margin 2m units and then also width 2.5 m units and i think that's good right there so this is our actual full mobile navigation when a person clicks on it so now we need to hide it so remember i didn't want to hide it through display none because i want to be able to animate ins i kind of have it come in when we get to that portion in a bit near the end of this video so what we'll do is we're going to use transform to hide it so what we can do is put on the nav element transform translate x 100 percent it's gone we no longer see it and then what we can also do just for future reference is transition transition is a way to specify what type of property should tr should animate from one point to another so when we create a little bit of javascript when a person clicks this element we're going to change this transform property from translate x 100 to zero all right so we want this to animate so we put transition and we put in transform we'll say for a duration of 0.5 seconds half a second and we'll have some ease in out which can affect how the animation eye looks for now we're not going to see that for now we can't click on it it doesn't work i will get that working later on because we need to finish up the rest of this which we're actually pretty close to doing that already all right so next up we're going to focus on our more info section which is right here all right so let's reference that it's coming all the way down here we're actually getting close to having this part finished or the at least the mobile css the mobile first css so more info actually we don't necessarily even have a rule set for that but we can just reference this stuff inside of here we can say image so all of our images we're going to say we're going to make them responsive with 100 percent notice that that got rid of that horizontal scroll bar so we don't have that scroll issue anymore showing up oh and also control b i do want to change these uh that's two this is going to be three and this is going to be four that way we have different shoes showing up and i'm also going to change another thing notice how there are different proportions right now this is real tall this is kind of like a square and so is that one if we change this to object fit hyphen cover and also give it an explicit height of like 11 m units guess what it changes the it changes the element the images this object fit cover for instance if i change if i remove object fit cover it kind of distorts them right if we add that it keeps them there very very cool next up is our titles which is a class of title font weight is going to be bold and why is that affecting there as well oh it's because we forgot to i've i rather forgot to change that this should be description for desc for description there we go and also we'll change the font size make it a little bit larger to reinforce what's called visual hierarchy that's a that's a ui design idea or design id in general actually and then also our descriptions line height we're going to adjust the leading or the line height to 1.5 rem units and that kind of just slightly tidies it up a little bit and there we go this is the actual mobile design now here's the problem if we review this on a tablet or even a desktop this is what the design looks like it looks like garbage that's why we have media queries or responsive design so now what we do is we ask ourselves what should at what point should we start to readjust this layout so that it looks good on a tablet or something like that or so many times if you're a front end developer a ui designer will have thought of this already or a ui ux designer i mean they might provide you with a prototype to say hey this is what this looks like here on a tablet code it for us to make it work here's what it looks like on desktop so the way we start to adjust this is through what's called media queries here's what a media query looks like ctrl b to get rid of that we're going to do at media only screen and and then parentheses minimum width or min width and we'll say 680 pixels now that's confusing as all hell but basically what this means this whole rule set what this means is that once we get to 680 pixels only the rule sets that are going to be defined inside of here that are nested in there are going to count so at minimum width all right so anything underneath that which is like this stuff over here you know will get counted all right so if you were to do desktop first you'd be changing this to max width but i like min width better so do many other people all right so at how do you know what is 600 pixels though 680 pixels like is it here is it there well if you use your dev tools i hit print screen by action accident rather i hit f12 if we start to to to uh scale this in and out you can see on the very upper right corner it's pretty hard to see in this video but it'll show you the width and height so the width is changing so 680 is like right around there we're going to make some changes right around there so basically this design is going to look like this only up until this point so what are we going to change well we're going to change something very simple we're going to give ourselves more white space which means on the body element we're going to take our margin element and we're going to grow this to something higher all right so let's just copy this real quick we're going to come down paste it in and we're going to leave 1.5 m units on the top and bottom but on the left and right we're gonna really bump that sucker up to five mm units so let's save that and look at that so watch what's really cool we're down down here we're underneath 680 this is not counted yet we're approaching 680 rapidly and watch just like that it's magic and so it doesn't seem like much but once you start adding more roll sets you can drastically change the entire appearance of the layout through properties here or rule sets rather so that's the only change we're going to make there at that break point as it's called with this media query so they're called break points all right so at what point next do we want to start adjusting things well i'm going to say it's probably going to be around 920 pixels one thing you have to ask yourself at what point do we have enough room to put our three links and get rid of this hamburger menu as it's called i probably even right here we could put it but we're just going to put it right at 920 pixels or right around here or so arguably we can go much lesser than that but that's how i have my code structured so let's just copy this stuff so we have to rewrite it again we're going to put 920 here and then we're going to get rid of this so what we do is we take a look this right here has a class of it's svg menu so we hide it so we say menu display none now we get out to 920 watch it hide see how it hides very cool now we take our nav which is currently pushed off to the side of the screen with transform translate x hundred percent what we say is nav we are going to transform and we're going to translate x 0. all right so let's pull this out now here's the problem it's showing up but it's showing our actual mobile version of the menu it's not showing the menu uh right if i can get it up it's not showing this menu it doesn't look like that right well that means we're gonna have to rewrite some of this uh the properties to override the stuff and put and make it so that it looks like that figment document so here's how we do that remember it's position fixed we weren't going to change that and override that by putting position on set so now we're getting somewhere slightly we're going to put display block we're going to put width auto we're going to put height auto and we're going to put background none we're getting close as you can see we've overwritten a lot of stuff here now where close we don't need this close button because this is all always going to be there on desktop so what we can do is we can come down here svg.close we can say display none all right then our unordered list which is defined as an ul element we're going to say display flex remember display flex on a parent container any else any child elements inside of it that are nested in it will become columns and we want them like you know we want them in three columns so display flex all right and then i we're also going to put margin zero so that gets rid of the default margin from the unordered list or the the it actually wasn't default we defined a margin to push it down in that mobile so now we're just resetting it to zero then we take our actual links we say color white because we can't see them barely as they are and then we also specify a padding let me move this get this out of the way we'll put padding of 0.5 on the top and bottom and 1.5 on the left and right then font size we're going to make it a little bit smaller to 0.9 rem units look at that now the hovers we don't want hovers like that because we can barely see the type when you hover so and hover and we simply say background none and maybe we want a different type of hover so we'll do text decoration underline which brings back the links so when we underline it there we go we have a visual indicator that we're hovering over this particular element all right i know that was a lot just for that navigation so weird things are happening now but don't worry we'll fix that once we i get this working and we start to work through things all right so next up what about the hero image if we refer back to our design you'll see we have this desktop version showing up where it's it's no longer fully consuming the layout it's it's basically halfway so let's work on that so after our let's see here i want to make sure i am doing everything correctly yeah coming out here this right here this final closing bracket is still within this media query so we still want to stay in there and so we'll say our hero hyphen img we're going to say left is going to be unset so we're just unsetting that value that was placed on there initially we're also going to say right is 0 because we want to push this thing over to the right and then the width will be 50 all right so let's hide this for a second so we're getting close and we'll also give it an explicit height and i've chosen 42 m units so we're kind of just kind of writing it in it's no longer going to be based on the height of the browser all right so that's looking pretty good to me for now all right next up is our logo we lost it because it's white and it's currently white on white so we're going to say logo color black there it is and remember we wanted to make brand red so we can just put span because we use that span element and we'll say color red so there's multiple ways by the way to specify the value of color you can put red white blue and all these different colors you can also i put in hex values with a hashtag you can do rgb you can do hsl there's a lot of different ways just so you know all right after that we're going to take our hero section and make all this stuff black text so coming outside of here we're going to do hero we'll say color black let's do section.hero that's because we specified that rule set as section.hero above so there was a specific specificity issue specific okay i'm not even going to try to say it specificity is an issue i can really screw people up i'm so you i'm not even gonna touch on that very much but what we just experienced was an issue with that uh so because i used section hero before and not just hero that's why it wasn't working all right height we're gonna set this to auto and then also we're going to do a width of 40 percent just to kind of move this stuff in a little bit away from there and then also a margin bottom to push that stuff down by 8m units all right next up is the we have this little um the down arrow which is white on white which is why we don't see it so we're going to put in svg we're going to take we're going to make stroke black this time instead of white we're going to put position unset as well because there was a position set there and then alt also the path fill is black so let's save that ah and we don't see it still why is that all right so that's a little bit strange because it's not aligning up with my reference code so again i'm not i'm going to work through this just so you can show this is inevitably it's going to happen to you 100 of the time even if you've been doing this for 20 years i it's very rare to get something that goes smooth so where is our down arrow it is okay so it's it's down arrow it's svg it's in section class hero and it's not being overwritten so svg dot down hyphen arrow there we go so that was again one of those issues with you know being specific i'm going to try to say the name there we go now that's working and everything's looking a lot better awesome awesome awesome okay so now what we're going to do is we're going to style this area and this is where we're going to um put each one of those in two columns so if we go back to our reference design we'll see each one is and has its own parent we'll make that a display grid and then these will be a column and this will be a column and then we'll use the grid to flip and reverse these so next up what we'll do is we put in feature which again is the parent container of each of these elements again just to show you feature right there so we're going to make it a display grid and then what we'll do is grid template columns entire videos and crash courses on the grid i've done several of them actually we're going to put repeat to auto all this is saying is essentially that i you know the grid template calls only works if you have this as a display grid that's the parent container and then what we'll say is we're going to use this repeat function this is simply just to repeat each of these columns with these values we want two of them and they're going to be situated as auto all right next up we're going to put a gap of 3m units between them you can see how it kind of it just basically puts white space between the columns themselves and then also we'll put a margin bottom of 8m units to push them away from each other now next up we have our image inside of him those shoes we're going to say with 25 m units so now they're all the same all right now we're getting close next up for the content we're going to say text align right with the width of 25 m units as well so now they're all right aligned and this is fine you could leave it like this but we're going to do this flip floppy reverse thing the way we do that is we're going to come outside of here feature left which is in relation to feature left here and what we say is grid template areas i know this is getting confusing but this will all come to you eventually if you stick with it enough we're going to put left right so we're basically naming our columns within the display grid then we take our image and we say grid area is left all right now it's just reverse those now we also want to left align this type right here so let's close this out and we're going to say the content inside of feature left that's what that means is going to be text align left there we go and then we're also going to give that a specific width as well to make sure everything is evened up between all three columns 25 m units and justify self will be left as well so now when we pull this up everything is starting to look pretty decent all right okay so at this point we're going to create we're going to make another adjustment here so if i pull this out and i get f12 for our ins our developer console i think at about 1200 pixels i want to confine this design and make it centered so what i mean by that if we stretch this all the way out i mean it is large i don't really like the looks so we're going to take that wrapper element which we haven't applied anything any styling to in our css yet and we're going to apply it in yet a new media query so let's go up here just to grab this code so we're going to have a third break point or third media query very bottom and this is going to be for the size of 1200 pixels now nothing happens because nothing's inside of it so inside of it we're going to take a wrapper we're going to say width is 1200 pixels so we're giving it an actual defined width and a margin of zero auto which is a very quick way of centering uh elements so you put margin zero at the top and bottom left and right you put auto and that just keeps it centered so watch what happens now so when we go beyond 1200 look how this whole thing is staying the same it's no longer resizing based on it's no longer fluid based on the size of the browser that way the layout just doesn't get too disconjointed so to speak now also i'm going to go ahead and change look at all this white space here that's because of the gap property so what we can do is just say feature gap 0. so now that just kind of brings them in closer together all right awesome awesome stuff next up is the next section of this eye video now we're going to apply some animation to our design here all right so let's say for instance we want our image to animate in somehow maybe we want it to kind of just like fall down and like kind of just give us a cool sort of animation so what we're going to do is we're going to visit our hero image all the way up here outside of the media queries and we are going to add animation and we'll say intro load so that's the name of the animation we want it to be for two seconds long and we'll say forwards because we only want it to run once we don't want it to repeat oh there's something oh okay it's because i never defined the uh the grid area named for right i was wondering why that kept popping up you don't have to worry about that though all right so we have an animation called intro load now let's go define that animation way at the bottom the way you define a keyframe a keyframe animation you put at keyframes and then name in our case is intro load and we open it up like a regular rule set so that rule set what we'll do is we're going to save from and there's multiple ways to put in uh these little keyframe rule sets you can put percentage values um so you can have multi a multi-step animation like maybe from 0 to 10 it's it's gonna do something and then from ten percent to fifty percent i'll do something so on and so forth but if you just want a simple from and two you can either use transition or you could use a keyframes as well so we're gonna say from clip path now this is another property you've never messed with before but there's a very cool tool called clippy css clippy just type that in google and you'll find this result right here i've shown it a lot on my channel so we're going to choose trapezoid which is just a square rectangle let's move things out and our starting point for our image is going to be way up here you're not going to see it so we're going to copy this declaration right here and we're going to go back here and we're going to paste it in and then we're going to say two we're going to go back to our i browser pull these back down we'll copy that you could make it make it interesting maybe just do something like that or that or whatever you can do a ton of stuff as you can see we're going to paste that in right there look at that once we save how cool is that that's how you can create animations in one of many ways now what about this arrow right here what if we wanted to bob up and down for instance just to kind of give a like the eye to bring it attention all right to the eye so what we can do is i will find this is called down arrow ctrl f by the way if you have a big document you just type it in and you can find it pretty quickly down arrow down arrow here that's in a media query this one is not so i'm going to do the same thing in my reference code and we're going to add another animation so what we'll do is say animation move arrow one second alternate reverse so that's instead of putting forwards or infinite alternate reverse will kind of go back and forth between the two states and then we also want it to be infinite it will just loop on forever and ever so move arrow let's come down let's copy this just so we can save ourselves some typing move arrow and then inside of there same from and two we can just do transform translate y negative 30 pixels we're going to move it up 30 pixels and then we'll copy this and then just put 0. save it and look at that it's bobbing up and down all nicely so if you change the duration stuff it can go really fast or really slow all right very very very cool all right also we also want to um get our navigation working um i believe oh before we get to that point let's make this stuff fall in and like fade in all right so what we'll do in order to do that is we're going to create another animation called move arrow not move arrow i'm sorry it's called i move down rather so i'm going to search for that on my reference code so on section hero there we go we're going to put in animation move down one second ease in and out so you can create custom easings which affect the flow of the actual uh design or the animation rather and then forwards we only want that to happen once and then let's also change the opacity to zero it's going to hide it right now we're not going to see it anymore opacity is how you can just hide things so then we come all the way down we create move down and then and move down what we'll do is simply say translate i or transform transl translate y negative 100 pixels and then we'll leave it at zero here and then opacity one remember we hit it so now we're going to bring back the oops we have an issue make sure you have your semicolon there if you have more than one declaration so we'll save it and look at that now isn't that very cool so let's get this up here put this up here now what's also cool is if i bring this out if i refresh it still works on desktop as well how cool is that it's very cool the final thing we need to do is some javascript and we'll do a little bit of animation to get that thing to slide in so when we click this nothing happens so this is how we create interactivity is with javascript now this isn't a javascript crash course but we still have to write some of it so at the very just typically if you're going to do what's called inline javascript which means writing javascript inside of your html file you don't have to you can also link an extra file called a js file but we're going to do here so we're going to type in script in there javascript goes in here html and all css does not go in there css in javascript is a thing but that's different as another topic so what we're going to do here is just create some variables or constants as they're called we're going to say const menu and we're going to say document.queryselector and what we're trying to do is just create a reference or a variable i that will allow us to determine when this eye is clicked so this has a class a menu so we put in menu now we're going to replicate this two more times because we also need access to the close button so we double click that and we change that to close and then also the nav element which is currently hidden off that big white long eye element so we're going to change that to nav and this one is not a class so we remove the period and just put nav so first thing when somebody clicks this which is our menu we say menu dot add event listener so there's a bunch of different types of events that can occur one of them is click so we open up in parentheses and a semi quote in the first parameter as click then we put a comma which separates our parameters we're going to put empty an argument here we're not going to pass anything in and when we put in what's called an arrow function and then we open that up into this the uh the squiggly brackets there and then what we say and what this essentially means kind of like the uh in css it's kind of like our media queries right here this what's over in here only happens is if you know this element is clicked so what we do is we say nav which is defined right here now that we have access to it nav dot and by the way we could have just done this we could have just did document.queryselector.nav.classlist.ad but sometimes to make your code cleaner this is why you create access to the variables and constants and stuff like that or properties sometimes as they're called too so we're going to say nav dot at our classlist dot add so we're adding a css class to it when it's clicked all right we add a class that we have not yet created called open hyphen nav all right so let's create that now if i show you real quickly with the dev tools and we get to a point where we're here and i hit f12 and i click on this and we view this let's let's find our nav element it's somewhere in here it's in header nav right there now if we look and i click that there we go we click it class open nav has been added to it as an attribute so that's what happens i just to show you again if i click this there it goes it adds that but nothing happens because it's not defined in our css yet so to do that we're going to go back over i right here above our first media query and we're going to say open nav and we say transform translate uh oops transtarns late translate x zero let's put zero percent so now watch what happens look at that let's refresh now if we click close nothing's happening why you guessed it we have to go over to here we'll copy this now for this this is going to be close so we add an event listener on close click now we just say remove click that click that oh my god look at what you just did and you know what you probably understand it pretty well you know what's something that's bothering me this is looking pretty big i don't like the look of this for some reason i it was set in my reference code as that but that just does not look good so i think that's called close width is 2.5 let's try two or wait is that not working let's make sure oh was that in a media query or not no it wasn't so let's go let's go back here to our code it's called svg classes close all right so it is close right here with one m unit so it's not changing for some reason i the value oh sorry about that that is actually a header svg so we changed from three to like 2.3 and that's a lot better of a size all righty so sorry about that there was like a blue tint thing showing up because of my green screen in the background it's getting dark outside um that is it essentially um looking at this i kind of don't like the amount of like if we look at hold on one second here if i pull this up it's kind of going a little bit too close here so what you would do you could use margin to push this down i in order to get that a little bit better aligned up i'll let you try to do that but that is essentially uh front-end development uh something a front-end developer would do uh to take an existing design and make it a working reality in the browser all right everybody hopefully you enjoyed that and i guarantee you if you're brand new to this you don't understand everything you probably have a lot of questions if that's the case please visit designcourse.com forward slash css to enter your email to be notified when my brand new interactive css course releases and if of course if you're watching this at a time when it's already released please consider joining check the youtube description for any available discounts as well also if you're interested in learning how to actually design great looking websites and apps then definitely check out the ui ux design course at designcourse.com again check the youtube description for any available discounts i will be quiet now hopefully you subscribe here and i'll see you all soon goodbye [Music]

Channel: DesignCourse

Views: 455,072

Keywords: html tutorial, html tutorial 2022, css tutorial, css tutorial 2022, html tutorial for beginners, css tutorial for beginners, frontend development, frontend development tutorial, free html course, free css course, learn html, learn css, learn css 2022, learn html 2022, gary simon, designcourse

Id: gXLjWRteuWI

Length: 118min 41sec (7121 seconds)

Published: Tue Jan 11 2022