The 2023 Frontend Development Crash Course - Learn HTML & CSS

welcome everybody to the 2023 front-end development crash course we're going to utilize HTML CSS to create this layout in the browser you're going to learn the very basics in a crash course format so that you can decide for yourself if front-end development is for you now in my previous crash course video I showed you how to design this very layout as a UI ux designer so if you want to start from absolute scratch watch that video first and finally should you really want to learn more about building awesome layouts in want a more interactive approach from the ground up definitely check out my interactive CSS course at designcores.com alright let's get started alright so you can skip ahead in the time stamps if you are already familiar with the very basics of HTML and CSS I wanted to do this for those of you who are brand new before we start jumping into code and this will go by pretty quickly so first of all what is HTML well it's called hypertext markup language now I'm warning you if you're like an intern or something and you show up and you say hey guys let's write some hypertext markup language you are going to get made fun of don't ever do this it's HTML okay now next up let's take a look at basic HTML Anatomy based on a single line of HTML alright so let's break it down first we have the opening tag which is that less than sign right over here then we have the actual HTML element and sometimes this is also called a tag this is the div element there are many other HTML elements a few of them of which are listed over here all right we can also see there's a closing element over here and we'll talk about that in a second with the same name now we also have next up is the HTML attributes class is one of many again here are other attributes that you have that you can add to your HTML element or your HTML tag and then finally we also have uh the concept of self-closing elements and for instance this right here is not a self-closing element it has an opening tag and a closing tag and of course with these types of elements you can Nest them inside each other and you can have Nest upon Nest upon Nest etc etc this here is a self-closing element all right so image source whatever we don't see a closing tag and there are a variety of different HTML elements that are self-closing and otherwise all right so you may be asking yourself what is the purpose of HTML then well looking at the design that we're going to build here in a second to provide you with a visualization of kind of what HTML is doing this is what HTML is basically doing at least in the respect of helping you structure a layout I all of these red rectangles have to be accounted for in HTML code in some way shape or form and we're going to talk about this ad nauseum throughout writing the HTML for this particular layout so this is what we get in the browser this is what everybody sees but in order to kind of provide a literal visualization of the responsibility of HTML this is kind of what's Happening Here and you can think of it in an analogy such as HTML is your skeleton and then CSS is the Aesthetics it's your skin it's what everybody sees all right so now with that said let's talk about actual CSS okay so that stands for cascading style sheets once again if you walk into work for the first time and you tell people let's write some cash skating style sheets they're going to make fun of you all right so let's take a look at CSS anatomy and what we have here is a rule set typical projects have multiple rule sets they have many many many up to up hundreds or even thousands of rule sets this is one rule set right here this whole thing right there all right so first off we have What's called the selector all right and this allows you to basically say to CSS what HTML element or elements do we want to style simple enough next up we have the Declaration and that's defined by all the stuff that happens Within These squirrely braces right here then we have properties as you can see in this context this particular rule set has a declaration of two properties by the way people don't really talk like that we don't talk about declarations and stuff like that this is just uh you know terminology that most people don't use but we do have properties here there's two properties background and font size and trust me there's a ton of properties that you can use in CSS next up are the values so we have the property name with a colon with the value and then we end that property or that that particular declaration with a semicolon all right and then finally we also have units Sometimes some properties will have units fixed to them and of course there's you know probably a dozen or so different CSS units I that are categorized into absolute and relative positioning and we'll talk about that as well all right so that is it I told you it wasn't going to be that long for just outlining general concepts now because this is a crash course we are going to Jump Right In alright so I want you to go here to code.visual Studio code.com all right and this is the web page from which you can download a code editor in order to write the HTML and CSS to complete this project today this is a free code editor from Microsoft and it's also the most popular and has been for several years now at least and so depending on your OS I you're gonna You Know download the the software package install it and then run it and then once you run it you'll see something like this now your color scheme might be different no big deal but over here we can see that we have this thing called foxica which is the name of the fictional you know service that we're designing a landing page for so that is basically an empty folder that I've already opened up so if you go like to file open folder I right here I'm in Gary Simon code folder so I've created a code folder where I store all my uh projects in and you'll see foxica right here so um you know you can right click new folder the situation might be different for Mac but just you you have to open up an empty folder essentially to get where I'm at right now um and so now we're going to go ahead and we're going to go right up here and we're going to click this button which will create a new file and then we have to give it a name index.html alright so index.html very typical starting point whenever you go to like whatever.com it's probably loading in the actual index.html of course if they're using Frameworks it can be different but for us uh we're not using any type of JavaScript framework or platform we're just going to name this index.html which is going to be the actual home page or the starting page when somebody goes to a fictional site like foxica.com or something like that hit enter and you can see now that it's opened up here in this code editor where we can start writing our HTML um there's something called Emmett e-m-m-e-t Emmett abbreviations now I've done a whole course on this it's really simple there's basically a few shortcuts that you can use that can speed up the process of writing HTML and the very first one that I use every single time is exclamation point hit that and now you can see it says M abbreviation right here and then hit enter and it gives us a bunch of our starting HTML elements so it gives us the very opening HTML and closing HTML tag it gives us the head element with the various meta tags in here this stuff right here you really pretty much for the most part you don't touch you don't touch these just ignore them if it looks scary don't worry about you don't have to touch them uh the title is important because that's kind of the title of the page that shows up on the browser title and also shows up like with people search for the company name or a keyword and if you you rank in Google you'll see the little blue link or whatever that's that's where it gets this from as well so we'll just call this fox just like that all right and we'll hit save and of course then we have our body element and this is where all of our HTML is written right smack here in the middle so 99.6 99 of the time you're writing Within These body uh the the closing and um the opening rather in the closing body tag so with that saved um we're going to also outside or just underneath the title tag here we're going to type link and again this is an abbreviation enter so that opens up the link element Rel style sheet href attribute in this big href basically means gives us give us a place to go what we're doing now is we're going to reference a CSS Style all right so we're just getting that out of the way initially because it's part of the HTML process first we're covering HTML then CSS but I want to link that up and typically I put it in a folder called CSS forward slash main.css all right so we'll save that control s on your keyboard and then we're going to go ahead and create that folder so we're going to click this which creates the folder CSS and then we're going to click this the file main.css and there you go you can notice it opens up a new tab with main.css when we save that or hit enter and we're ready to write our H or our CSS in here and it will be get communicated automatically note and this is something I never do but you just understand you could do that if you didn't want to have to link another file to access your CSS you could just put in style tags so style enter that's an abbreviation and then we can start writing our CSS in here as well in this section uh that's a call that's inline CSS there's nothing wrong with doing it that way but if it's a serious project this index to HTML5 will become real lengthy in the number of lines of code that has and that's just annoying I like to separate my files out same thing with JavaScript we're not getting into JavaScript here in this crash course but uh you can do CSS HTML and JavaScript all in the same file but if it's a serious project that's going to be a lot of lines of clothes might as well just separate them out with individual files so I'm going to go ahead and back up Ctrl z a few times and we're ready to rock all right now before we start writing code another thing to pay attention to let me get this bigger is I a couple extensions so visual studio code like figma if you watch the design version of this eye this tutorial um you'll know has plugins or extensions and that's right over here right here in this section and we're going to use um just one so if we click on extensions you can go ahead and by the way if you like my color scheme that I'm using here you can search for design course and install that but the one that we want is live server right here so just type live server in the search and you'll see live server you click on it it's going to say install go ahead and install that all right so after you've done that then you can come back over here for index.html right click and open with live server what that will do is open up your default browser in my case it is Google Chrome let me get out of here there we go and here's our blank index.html it's going to show us exactly what we have so far in our HTML so you don't have to do this but if I just you know do that real quick and hit save control s you'll see right here it automatically refreshes for us and that way we can refer back and forth to do a real you know the real document in the browser as we're recording okay so I'm just gonna minimize that or move that off the screen and now what I'm going to what I'm going to do rather is we're going to start writing our HTML but that means we're going to have to refer back and forth to our design prototype or our mock-up that's in figma to start to get an idea of where we're going to start writing our and how we're going to start writing our HTML structure here so I'm going to go back to this figma document this is going to be linked in a YouTube description I advise you to uh definitely get a copy of this this right here there should be some simple instructions in the YouTube description how to do that and we're ready to rock now Okay so what I'm going to do I'm going to create a duplicate of this so I'm just going to take this you can hit Ctrl D or just hit alt shift and just left click and drag over so now we have a duplicate and we need to think about rectangles very strange that I say that but yes really when it comes to our HTML structure just think of think of an analogy like this HTML is the skeleton to the world of websites all right it's this skeleton it's the scaffolding all right the meat and the visual the skin the Aesthetics that's the CSS we're going to get to that later in this video but for now for us for CSS to to be able to do anything it has to have HTML markup it has to have the skeletons so the skeleton in this in the HTML world is just a bunch of rectangles if you think about it so let me go ahead and get to the rectangle tool I'm going to hit R you don't have to do this but I'm just doing this um just to to show you how to start thinking when you're structuring your HTML markup so the very first thing that um I start with and most people do as well is a wrapper element okay um and essentially notice how this is this is emulating like a browser window right here right and if I take everything real quickly and group it and Center it right here and then I simulate like a large desktop monitor well it's always going to I don't have it doing it correctly right now but I you want it to stay in a sit in the center at a certain point there's equal white space on the very right and the Very left as well all right so in order to achieve that you kind of think about it everything is kind of wrapped I'm going to make this red in a big rectangle right and so that's what that wrapper element is that's going to be our very first element and everything is going to reside within that HTML element and so you'll see this all comes full circle by the way when we get to the CSS uh and finish it up and you'll see oh okay so that's why we needed a wrapper element um so we're going to wrap everything in a single element called wrapper and it's going to be a div HTML element a div element in HTML is really for structural purposes for the most part like creating like this little overall rectangle that you see here so let's go ahead back to our Visual Studio code and we're going to type in a oh and I'm going to use an emit abbreviation for this and so let me show you what I mean I could type this out by hand like div class equals wrapper like that and hit enter or I could be intelligent and type in Period wrapper enter all right so a period basically means it's going to create a div element as class now if you wanted to create an ID like use the ID attribute instead you would just do hash sign wrapper and that gives us an ID attribute but I typically very rarely use ID attributes we use classes okay so that's our first element if we save it and go back nothing you don't see anything there's nothing present here because a div element inherently has no style to it all right with like CSS so if I go to F12 and we look right here this is the developer console it kind of popped out here and I we look at the HTML markup we'll see diff class wrapper but it's just it's something that is not present at all it kind of shows this thing over here div rapper has no height but it has a hundred percent of the width because it will a div element will span by default 100 of whatever its parent container is in this case it's the body element which goes all the way across so it's 1182 pixels because that's the width of my browser right now but zero height we don't see anything even if we if it did have height we're going to see it anyways because it's it doesn't have a background color it'd just be transparent okay so next up what is the next element we need to count for in our markup so going back to figma next up inside of this overall container this wrapper as we've called it I'm going to duplicate this the next element is going to be right here if I can grab it there we go so it's going to be this element and so we need an element that wraps around both the logo at the top here all right and also this navigation and the reason we we need a element that will wrap around both of those elements is so that if you notice right here there are two elements that are there in two columns they're to the there's one logo to the left and then a navigation to the right and so in order to instruct the browser to say hey we need two columns rather than the default mode where things will just sit on top of each other into two rows we need a parent element around those two elements and we instruct it with something like display flex and that will put it into two columns hopefully that makes a little bit of sense at this point all right and so we have tags that will accommodate this common pattern for a website header slash nav bar and so that element would be right here we're going to say header just type header enter and there we go all right so the header element in in HTML uh very important to use for good semantic HTML so now we have to worry about what what's inside the header the logo all right so we're going to go ahead and we have to ask ourselves is the logo clickable like if you click the logo with your mouse like is it supposed to take you somewhere yes it almost always should people expect to be able to click the logo to be able to go back to the home page so if it's clickable it needs to be the HTML a element so I'm going to type in another little bit of uh Emmett just hit a enter there we go href again remember just like up here that means it needs to go somewhere now of course in the case of the CSS right here in the head that means it's going to go somewhere locally to like a file that's hosted on the server in this case we don't want that per se we we want it to go actually nowhere and that's because this isn't a real project typically you could just put index.html if that's where your home page resides or you can just you could actually go like HTTP oops https cool slash slash my I like foxica dot com you could do that but for us we're just going to put the hash sign which means you click it nothing's going to happen all right so inside of here we have What's called the anchor text now notice this is not a self-closing HTML element we have an opening and then we have a closing tag here that means we could put something in between it you could just put some type like foxica but chances are if you're dealing with a real project it's going to be some type of uh graphic design element such like a logo such as I'm an SVG element which is the most common and most preferable element to use for a logo because it is Vector no matter how big it is it will never get blurry and pixelated so I'm we do have that and so right now this is the point where you want to open up the resource files the project files associated with this uh video tutorial so just go ahead and open that zip file up make sure you extract those files and we need to create a folder over here the folder name is going to be images let me zoom up here so we have an empty images folder now Pro tip right click on the folder and just to choose reveal in File Explorer all right and we can double click and you can see this is now empty so wherever you save those project files you can go ahead inside the images folder in this the project files just drag those over here and I'm going to do that right now actually so I'm getting my reference code and we just have a few six different elements we're going to use so let me zoom up we have a three JPEG files and then we have three SVG files that you can see right here as well logo.svg is one of them okay so now we can go ahead and close that out and so in this case we're not going to use actual text as our anchor text for the a element instead we're going to go ahead and use an image tag an HTML image tag so I'm going to Type image IMG enter again this is going to have a source this is going to point to a file on our server although it could be external server if another website's hosting you know a logo or something like that for us it's going to be forward slash images so it's going into the images folder into and specifying logo.svg we hit enter as we saw the little helper selector alt is a tag that or an attribute rather that I is important for people with screen readers so obviously they cannot see your logo so they use screen readers and this is also by the way good for SEO search engine optimization uh so look so for instance in the case of screen readers somebody is able to navigate through with the keyboard and just kind of listen to what's happening on a UI and so the alt will instruct them what is this element all right so the alt is like literally what it will play back to that person via screen reader so for us we can say foxica logo there we go and hit save so you can see we have two HTML elements here uh we have the the closing on element for the a element over here sometimes people will go like this and that's fine that's not going to affect anything for me when it comes to simple things like a link I just keep it all on the same line all right there we go so next up what else is after our logo well we have another element and that is the actual website navigation let's refer back here to this element all right so let me duplicate this so we have our a element which is this little block over here let's duplicate that now we have another element that needs to wrap around these four links or these nav items again it needs to wrap around because these are by default going to be stacked vertically on top of each other we don't want that we don't want rows for our desktop we want we want columns all right and so for that to happen we have to have a parent element that wraps around it so that we can instruct a browser to do that so there's another semantic HTML element that we use for this purpose and that is called nav very simple nav all right so by the way if I save this right now and we go to look at the result in the browser I we're not going to see much of anything just yet just the logo over here so now when it comes to nav elements we use another element inside of the nav element I for basically structuring the type of data that's present and the type of data that's present here is an unordered list UL for short that's the actual name of the HTML tag UL enter then inside of there we put our individual list items or Li elements so we hit l i enter all right so now right now I could type for instance home I'm going to hit shift alt and down a few times and you know we could change this to products you don't have to follow along with this part and if I hit save and I go back we'll see we have a list but they're not clickable we don't want that right so we have to make them clickable how do we do that we use a elements just like this in the logo so we inside of the LI element we put a enter it's not going away anywhere so we're going to put in the little hash sign and then we're going to put in home so now if we save and go back you'll see it is now a clickable link now we need to do that for the other ones as well so I'm going to go ahead and right at the end of this line shift Alt down a few times just to replicate it that way we don't have to sit there typing that out forever products gallery and finally contact now this is what it should look like in your browser something similar to this now notice there's nothing that's different about any of these four compared to each other except for the actual anchor text you know Home Products Gallery contact but if you notice in our figma file we do have this little underline right here that's the active State I described this hopefully you will watch the design portion of this about how to design you know this whole Website Layout here but this right here we need a way for our CSS to add this underline based on the currently active page in this case we designed a home page so that's why this little underline you know is right there so to do that we simply attach a class onto the associated home element so to do that we're going to come back here and we're right in the a element right here we're going to say class equals active all right now if we save this again nothing's going to change because we have not yet got to the CSS portion so you'll see how this comes around I don't expect you to understand it yet if you're new to this all right and so that is the markup for our entire header portion the top portion of the website so now remember we want to stay inside of this wrapper and you can notice by the way I this div element div wrapper has a line that points all the way down to the closing div tag that's handy just so you know kind of where everything matches up so we want to come just outside of the closing header element to start writing our next element and let's focus on that so our next element and by the way I'm going to get rid of some of these because it's starting to really get crazy so our next element let's just pretend this one's still here this outer element is going to be one that wraps around everything here so we're going to have an element that basically houses two columns all right where are those two columns at well there's one right here on the left and there's also one right here on the right so you have to think about how you're going to structure and group your your elements in HTML and it's one of those things like once you're done watching this and you think you got it and then you go to do it yourself it will be confusing it takes time muscle memory all right that's why you should join the CSS course because that's what it's all about anyhow Shameless plug so I we're going to create that so first we have an outer element and then we have a left column and then a right column so let's create the markup for that now there's another semantic HTML element that you use commonly for these type of types of things you could use the section element or you can use the main element for me this is the main section of the the actual website um so I'm going to use Main and hit enter all right so then we have a left column so I'm just going to put period because it's going to be a class left hyphen call and then we'll do the same thing right here right hyphen call for column again you can just name it left and right that's fine but you know I'm choosing to add the dash call at the end okay and you can name these classes whatever you want essentially for the most part okay so now that we have that let's focus on the left column you know because based on how you read from left to right it just makes sense to do that so going back here what do we have in this left column well here is left call right here the first element that shows up top bottom left to right it's this headline quality apparel without the price tag so headlines every web page typically should have a heading or a headline uh is created with the H1 element all right they have H1 all through H2 H3 four five and six H1 is should be the most important element as you go and you work through different titles or subtitles notice and also note that you can have multiple H1 tags if you deem necessary so um we're going to go ahead and specify quality apparel uh without the price tag all right so let's save that let's see what our design looks like so far yep it's ugly because there's no CSS you know that we've we've specified yet it's all going to look ridiculous like this so far kind of like the very very early web and like the mid 90s so uh after that we're going to have our subheading that's this text right here go ahead and copy that just double click into it and hit Ctrl a control C to copy that way we can save ourselves typing so pit P enter this is a paragraph tag you use this very often by the way Ctrl B if you want to give yourself a little bit more space to collapse that sidebar so control B it will toggle that on and off so I'm going to paste that in all right so it's pretty long here and if you want to um kind of save yourself from having to horizontally scroll around you could do something like this just hit enter there we go so now if I zoom back up just hitting enter here in your HTML isn't going to screw up anything it's not going to like create a line right before the beginning of sake I so just just understand that that you know you can organize things decently if you wish and notice it'll just keep on going on the same line even though we put a line break here kind of in the editor itself all right so next up after that is going to be this section we have two buttons guess what two columns what does that mean you remember it means we have to put a element an HTML element around it so just pretend all of our elements are still here again just to quickly visualize here's our H1 or rather let me do this this is the left column this outer one right here this is the H1 this right here is our paragraph element that we just created and now we need one that wraps around these two elements to create those columns one to two and then we have to do duplicate that even further and then we'll have an element for the button and then also duplicate that an element for this secondary button right here this spring see I'm telling you it's all just rectangles okay so let's delete some of these and let's create this Mark up there now sometimes when it comes to your semantic HTML elements you can get so specific like we are like two call to actions like there's not a HTML element called to action and that's what we call these like it's the primary thing we want people to do is to click something or do something there's no HTML element um called CTA or call to action so in that case we could just use our own div class for that so we're just going to specify right here a class called CTA Hyphen btns for buttons all right so we just we just did that overall red sort of you know fake rectangle thing around those now inside of here we have to specify that primary call to action button the beige one that we saw first and then the other one that says bring 23 collection so if we refer back to the design we'll see this button consists of an element you know this beige sort of uh rounded Corner thing which we'll achieve in CSS and then the type inside of it all right so here's how we do that for this we're going to use an a element and we're going to give it a class called primary hyphen CTA so a period and this is an M abbreviation primary hyphen CTA so if we hit enter it produces this HTML for us which is exactly what we need this is fake so it's just going to go to Hash sign and then inside of it we're going to put in the actual button text browse our collection and that's it that's only markup we need to achieve that beige rounded Corner thing that's that's the beauty of CSS we can drastically change how ugly this looks right down here into what this looks like right here okay now we have to do this one now this one's a little bit more tricky because notice it has an Associated icon this little right arrow I so if you think about it again columns what does that mean we have to have an overall element that wraps around it in HTML that will provide the structure for this text in this icon to be next to each other in column format so to do that let's go back and this will be still inside of our CTA vtns class we're going to specify one called a link called secondary CTA hit enter hit enter again oops put a hash sign and then come out here between these elements hit enter again and the reason this time I'm going to be putting I'm the closing tag beneath it as opposed to on the same line is because we're going to have two elements inside of this a element all right because remember we have two elements there's a two columns one and two right and so that's the text and the icon so for the text we need to wrap the actual anchor text in its own tag as well it could be a div element or a generic span element and that's what I typically use for this type of scenario span enter and then we're going to put in spring semicolon 23 collection so that's our first element now our next element needs to be that little arrow so in that case we have a couple options we have to go back we zoom up control scroll wheel if you will and we need to make sure we're selecting this button or this Arrow to make sure you hit Ctrl left click to select it and you'll know you've selected it if you come down here to your layers Tab and then this is highlighted right here Arrow one we right click it and let me zoom up and we choose we choose copy and paste as SVG because this is a SVG element it's scalable Vector graphic anything created inside figma like with design illustrations will typically be SVG not PNG that's rastered in bitmap you don't want that and not CSS SVG okay well once you have that copied we're going to go ahead and just paste it so look at all this this stuff of this crap rather that it spit out I it's long in order to create that look at all this HTM HTML up there this is basically a mathematical equation that gives us that Arrow um and so because it's math though that's why it's it's it's not bitmap it'll never get blurry or pixelated like a blurry ugly night like 2009 iPhone photo or something like that there's a couple attributes in the SVG element that I want to get rid of and that is the width and height attribute so I'm just going to left click select both of those hit delete or backspace rather we're going to leave view box and but we're going to get rid of our XM XML and S some of these are just unnecessary we don't need them now let's save control s and go back and there's our huge arrow button we don't worry about it being this huge because we haven't got to the CSS we're going to fix that all up when that point in time comes okay going back here that's it for our CTA section so going back to the next element we have this and this one might trick you up at first because look at this uh what is this confetti stuff well that's because this is like we're proud to announce that we employ a work a Workforce should probably fix that there we go of over 50 000 it's all possible because of you 50k that's why I decided to put this little asset set of uh like confetti Graphics over here um ignore that for now we'll get to that but we're going to ignore that just pretend it doesn't exist it's kind of on top of stuff don't worry about accounting for that I'll show you how to do that in CSS so really I only want you to focus on just get this out of the picture this area right here so we have a div element we could see clearly because it has that black border and it's wrapping around both of these columns this 50k and this type right here so let's create the element that will do that for us almost this element right here is actually visually depicted in our design and it kind of mimics what's happening up here because we're giving that HTML element a border of one pixel solid in CSS you'll see in a little bit but it's still necessary even if we didn't want to visualize this and maybe we just hid this it would still be necessary to have an element that wraps around it because we have two columns like I've been trying to drive into your brain as much as possible all right so let's go ahead and do that let's go ahead let's here stop saying let's go ahead so much Gary and underneath but inside oh no no sorry let's get out of here so we have our CTA buttons section that ends right there after this closing div tag we want to come right after that right underneath it but we still want to make sure that remaining we're remaining inside of our left call and this if you follow it all the way down will point to this right here so we're still in it if we start typing our next code right here this is underneath the what do you call the CTA button section so for that section we're just going to call that news and we're going to wrap that in a div class so period news enter and inside of it we're going to have two columns 50k and then a paragraph So for that we're just going to use paragraph classes for both of them it doesn't necessarily even have to be a paragraph even though it says 50k that's not a paragraph you could still use the P element so P dot employees so it's going to be a paragraph HTML element with the P tag with the class attached to it called employees hit enter and then just put in 50K I'm going to capitalize that k there we go and then right here p period details so these are the details about you know this little news thing so I'm just going to go ahead and copy and paste what goes inside of here off screen all right so what's going on my editor is going crazy let's keep this tidied up um because I don't want it to go off the screen too much there we go so now if I zoom up try to get yours structured so that it looks like this don't worry that these are outline right here where it says we're proud to announce that we now have a a work force force of over 50 000. notice it has these strong tags around 50 000 that's because here in the design it is bold and strong will automatically bold the type that it's wrapped around if that makes sense and then it's all possible because of you and that's that so so far if we save this this is what it should look like 50k down here huge Arrow it always does this with with photographs and SVG elements and yeah all right so now we're ready for our right column because if we refer back to our design we'll see we've accounted for HTML for our navbar or header also all of our left column and now it just needs HTML markup for these sections right here all right so going back to our design let's remove some of these and now you guessed it we're going to need an element that wraps around this which we already have it's called Write call right right so we're going to need three elements inside of right call we're going to give those a div class of card for each one we're going to call these cards so if I duplicate this this right here is going to be card one and then imagine another one of these big thick red ugly things wrapped around here for card two and then card three at the bottom all right so let's write that out we're going to first write out the markup for this one and then just copy and paste this one and this one the markups are going to look almost exactly the same even though like this one's a lot bigger we achieve that with CSS all right so inside of right call we're gonna go ahead and specify a class called card and again we don't have to put like div Dot card because inherently Emmett knows if we don't put the actual HTML element in front of or be before the period uh it's going to be a div element so we're going to say card and we can chain multiple div or multiple classes together in Emmett like this so we put a period after that and this is going to be card one hit enter and this is what your markup should look like so yes you can have multiple classes inside of the class attribute and the reason we're going to do this is because each of those three cards will share the same class of card but we have to have a way to create the distinction between each of the three because they have different background images now there is a caveat to that using CSS sudo selectors um nth of type that's more intermediate stuff we're not going to worry about that we're just going to give them explicit class names that are different from each other so inside of here our card card one we're gonna have a another element now first I should say this right here this this div element in and of itself that is what is going to contain the whole picture uh the photograph rather so we can use CSS to Target that card one and give it a background image of this so next thing that we have to write then let me duplicate this is this white these white little boxes all right and then you have to ask yourself all right do we see any columns here I do there is a column let's let's go refer back over here uh oh I hit control D and something happened up oh it moved it down there for some reason all right so we have a column right here with this type and a column right here so it's very important to to remember this the the structure here okay so what we're going to do first in our card is we're going to wrap everything around that white container with a div element called card details okay now inside of card details we need to have two elements because remember it's two columns we have the two pieces of type sitting on top of each other but then off to the right is a price so I'm just going to put in and this is something you can completely do just a development with no class you don't have to put classes or IDs or any attributes in them if you don't want to so for me I don't need to in order to structure this stuff we can just reference card details and then say div and CSS so we could be like card details div that's completely acceptable there's only going to be one div element in there anyway okay so now we're going to have a clickable link and I'm targeting this foxica Sports thing right here this title so we're gonna assume that's clickable so we put in an a element hash sign here and we can give this a class of product title now thinking about this though if this is the only a element inside of card details we don't even have to give it a class I'm choosing to do it but you don't have to okay and one thing that does help though in the case of like text having a class name when you read when it comes to readability for your CSS if another developer is working on it or even yourself in the future and you forget you'll know that that particular rule set in CSS is associated with the product title because that's in the name so hopefully that makes sense yes okay so now let's go ahead and put in foxica uh let's see sport and then underneath it we have a little paragraph running shoes it's kind of like a little tag or category or something like that so p and we're gonna say running shoes all right after that we have the price which is off to the right in the second column so we'll use a paragraph a class of product hyphen price and we'll say uh 49 something like that and that is it so now what we do is we take left click and select that whole card card one all the way to the closing tag associated with that card card one element and we copy it come outside of it paste it hit enter paste it so now we have three so let's say one says card one this one needs to change the card two this one needs to change to card three hit save and that is it now of course you can give it you know fake uh other fake titles or whatever but I'm just leaving them so now if we look we can see this is what it looks like Fox like a sport running shoes here's our first one second and third and guess what that is about it for the HTML so now I get our sidebar back up here let's close this out we are now ready to proceed to the CSS section okay so let's go to our CSS so come over here you can double click on this it's going to open up this blank CSS file right up here so the very first element that I add typically in every project it's a rule set rather I'm going to Target the HTML element itself which is like the element that holds everything and I'm going to give it a font size of 62.5 percent and what the heck does that even mean all right this is kind of it's a little bit difficult to explain it first but basically its purpose is to make conversions from your Proto your figma prototype easier when you try to translate value certain values to CSS all right so let's see if I can do this easily um and don't think it's too scary it's one of those set it and forget it things so if I hit save we're gonna notice that and in fact let me just show you by dragging this off to the side so that we can see a little bit of this off to the side this browser even though it's hiding it if I take this off and just delete that and hit save the type just got way bigger now I'm scaling the font size down all the font size everywhere because HTML if you look over here contains everything so it's going to take all the type that's found in here and it's going to scale it down to 62.5 percent by default it's 100 that's why it's bigger by default but if I hit save it just shrunk everything down what is the purpose in doing that well it's not because I want smaller type here it's because it's going to make my conversion life if that's a thing it's not I just made it a thing a lot easier so here's what I mean I'm if I go to figma and I look at the font size for instance of this headline and this is in the H1 element in our HTML and the font size if I select this is right here it's 52. all right well I can't just put font size 52 pixels when it comes to font sizing I along with certain things like your margins or your white space between elements and you're trying to construct that in CSS you don't you pretty much never for the most part there's exceptions I want to use pixel values or PX values you want to translate those into units that are relative as it's called and and in order to do that you have to apply a conversion to it and so what that conversion does making all font sizes 62.5 percent means that we only have to rely on decimal places our decimal point so instead of 52 pixels we can put something like 5.2 REM units so we just move the decimal place over one notch and that will give us accurate sizes based on the design that a designer created or yourself in figma so that it has the same proportions so it doesn't just apply to font sizes it applies this to margin and padding as it's called and we'll use this often so hopefully that kind of makes sense it just makes conversions a lot easier all right so let's go back and the thing that we're going to start with now after you know this very convoluted like what the heck are you thinking uh situation we're going to specify the body element now if you remember the body element is really the element that has pretty much all of our HTML markup inside so here's the opening the closing tags all the way down here right there the body element so now what does the body body element do what is it responsible for well is it responsible for a lot like our website background color um ours is white and that's what it is by default so we don't even have to specify that but there's still a few things that we want to do first thing I'm going to do is change the margin to zero all right so by default browsers will give our design a little bit of margin around so what I mean by that is if I move this over and we take a look at the very edge right there you can see where it says foxica if I remove margin zero hit save see how it moved over so there's a little bit of margin and margin is a way for um CSS in a browser to give you white space around things like on the top and the left and the right and bottom and all that good stuff but I typically want to remove that so I have control over that myself so margin zero all right next up after that we're going to have a font family now the font family we have actually in our design we have two different fonts we have this one it's called Playfair display it's a nice elegant sort of serif font as it's called and then we also have like this one underneath called Poppins and this is a Sans serif font it doesn't have those little crazy things hanging off the top of them uh like the letters and stuff so this is a font pairing and we need to be able to include both of those fonts so first let's specify the predominant font that's found throughout most of it is the cleaner font called Poppin so I'm just going to do font family Poppins now when I say that a lot of our type is going to change to that font the the logo is not because that's an SVG and that's not a font really it's it's an it's an actual graphic asset but everything else here has changed to that pop-ins uh font now the reason it showed up on my computer is I have it installed on my computer many fonts that you use other people may not have so you have to include the font in your project in order for it you know for other people who don't have it inherently installed on their phones or their their computers for then their browser to download it essentially and so play fair display and pop-ins are two fonts that are available from Google fonts so here's how that works I'm going to create a new tab fonts.google.com we're going to go to and there's a bunch of cool fonts that you can use in your project there's tons of them so I'm going to do a search here Poppins you'll see it right there you click it and notice I have because I've already set this up um I already have the fonts here notice how it says if I zoom up pop-ins I have extra light 200 400 and 700 and I have play fair display regular 400 just one style so you could see all the different font weights associated associated with Poppins and so right here it's going to say extra light 200 you want to click select and then it's going to change that and when you click select it'll show up over here in this area hopefully that makes sense you need to do that for 200 400 and 700 and then after you you did that for pop-ins you just go back type in Playfair you'll see Playfair display right here and just do regular 400 right here it's the top one once you have this situation to your upper right corner you can then let me zoom up click this now notice it says to embed a font copy the code into the head of your HTML or if you wanted to you can actually import this as a style or just take this hole right there that's import text right there and put at the very top of your CSS file it's advisable however not to do that just use this one right here hit this little thing that'll copy it to your clipboard and we go to our HTML we put it above our main.css file and just paste all that stuff there's a lot of stuff there don't worry about trying to make it readable or whatever it's fine as is so hit save and there we go so now other people who don't have that font will be able to use it or see the font that we intend them to see all right so after that what is the next element it is wrapper remember wrapper wraps around everything see it's highlighted all the way down here so let's create the markup for that so I'm going to put wrapper not warper wrapper come on Gary let's type and the reason we need wrapper and I tried to explain it before is because to a certain point let's close that out notice how everything is just like take it's consuming the entire width of the browser and I'm on a 4K resolution monitor right now so it's real large and I'm also zoomed up so let me reset that okay there we go and so this this this huge arrow is letting us know that rapper is doing nothing what we want wrapper to do is what we intended to do in our design we want white space over here to the right and the left here on desktop so to do that I'm going to come back here and we're going to say there's a property called Max height height Max hyphen width and that's going to be 1200 pixels now where did I get 1200 pixels from I just kind of pulled it out of thin air no it's actually pretty close it's probably very roughly close uh to the value that's probably over here so if I hit rectangle I do this it is 1164. so 1200 pixels is a pretty standard for me when it comes to the maximum width of my design on desktop if that makes sense now if I go back and I save this right now notice how it doesn't extend all the way over but notice how it's not centered it's to the left so to Center something like this and it's going to be one of those things there's a lot of properties to memorize it's annoying but you'll get it if you keep on doing this through muscle memory we type in margin 0 Auto now margin is a shorthand for margin left blah you know margin right margin top margin bottom blah blah blah blah but I and it's a shorthand property and the way you can write margin is uh top and bottom is zero so no margin or weight space at the top or bottom but setting right and left to auto will Center it automatically it'll Center this element and that's what we want so if we hit save guess what it's all centered and that's what we want hopefully that makes sense don't get discouraged uh because this is a crash course and I'm just you know it's a crash course you probably feel like you've been hit by a car by now that's why you need to take my course I'm telling you we start at the very Basics so anyhow sorry Shameless plugs what we're going to do now is after that is smart start focusing on our navigation section which is the logo and this element right here all right so now we're getting to the fun stuff because we're going to start piecing together this layout it's going to start looking exactly like our figma design okay so going back let's look at the HTML markup for that section we have a header element and it has two elements inside of it an a element which is the logo and then the nav element now remember I said I said ad nauseum I said a bunch of times we need to wrap these elements that show up to with each other in columns next to each other and so header is that element and so the way we do this because if we look back again here these are sitting on top of each other foxica is on top of this nav element but foxy needs to be over here and then this nav element needs to be pushed over here somewhere okay so to do that we take the element that's wrapping around both of them header and we say display Flex now just watch what happens when I save that look what's happened we have our logo and now it is sitting right beside it it is created two columns for us that's awesome it's a step in the right direction because if you look over here you will see that we have two columns over here and over here but we obviously still have a ways to go for our navigation to look like this right now it looks it looks butt ugly it really does so we're going to get to that in a second but now what we want to do is we want to use another property um and by the way display Flex is the type is a property that allows us to structure layouts there's also a display grid which we will use but display Flex when you need to create two columns or three columns or whatever it's a very good method of doing so uh it's called flexbox and I could create a whole course on flexbox alone but this is a crash course so we're kind of working through things as we need them now what we want to do is we want to designate this nav element and we need to push it all the way over here because that's how the design is we need to use something that will create space between these elements these flexbox items so we'd say justify content space between say that and look at that we have our element right over here it it reaches the very edge of our wrapper element which has an invisible line that goes all the way around here all right great so next up another thing we want to do is notice how there's no white space above our logo and if we look at the design in figma you will see we have a bunch of white space well one of the ways we can ensure that white space is there is through a margin padding and also in this in our case and this is another flexbox sort of property align items Center so that means all the items that are found within header which are the a element and the nav element we're going to align them on and align items is alignment on the vertical axis so it's going to align them to the vertical Center so Watch What Happens we save that and guess what based on the overall header element that wraps around these two elements it's going to Center them vertically with a line item so this is now centered we can visualize this actually if we hit F12 to get the developer console we click on this little thing right here this little selecty thing and if we I hover over this you'll see that this is now in the center of this flexbox container all right so hopefully that makes sense so the developer console which you can access through F12 is very handy um to help you visualize where things are and there's a lot of things you can do with it okay now we have to work on this nav because this is default and it looks very ugly we don't need these little dots and all that crap don't need the underlines so let's get to that so referring back to the HTML we have a nav element with a UL element unordered list and then we have our list items inside of it so what we'll do first is we're going to specify and create a rule set with one property for our nav element itself and that is going to be a margin of 4M units or in other words 40 pixels so if we save that it's just going to give us more white space around it it doesn't make sense as to why I did this yet but you'll see in a second and I'll show you a before and after if we remove that rule set we just created now after that we're going to go ahead and Target the UL the nav UL element we need to get rid of these little circles because they don't exist in the original design again as a refresher our nav looks like this there's no periods or little circles right so one that's one of the things we'll do in this rule set among others so we're going to take our nav UL so we're chaining these together right here I because we want to only target the unordered list that exists within the nav element because there might be other multiple unordered lists in our design there isn't but there could be so we don't want to just put UL itself so now if you will just is a is a command a selector that says only select in style or apply this rule set in this CSS styling to unordered lists that exists within nav okay so and by the way we could have given this unordered list a class like you know main nav and then we could just reference period main nav so you have options that's just how I'm choosing to do it here I wanted to show different ways all right and so the way we get rid of those little periods list style type none so if we save it those things will disappear ta-da now we don't need four rows one two three four we need four columns like this and if you recall how do we do that well we did it between these elements the logo and the nav we simply add display Flex so display Flex save it look at that they are actually in four columns but there's no white space between them so that's not good so how do we figure out the amount of white space to use well we can come over here and we can just control left click to select this one and if we hold alt and then hover over this this adjacent nav item you'll see it says 41. all right so 4.1 that's why we use that font size 62.5 hack so I we're going to say gap which is literally a gap at the gap between these these elements is going to be 4.1 M units save it go back and there we go okay so now another thing I want to do is you can't really tell and we can tell if we get out our Dev console F12 and we select it and if we hover over our unordered list so let me uh zoom up here notice that orange stuff around there you see that orange stuff with all that orange stuff simply means that the browser is adding uh by default some styling around this and if I move over here yeah we can see where it says margin block start margin it says 1M unit and that's essentially what's created also padding inline start and it's creating white space around there by default that we don't really want all right so what we're going to do is reset the margins as it's calling called so margin zero we'll save that you're not going to notice like a huge difference but it actually got rid of some white space around here all right um next up we have to start actually styling these links because we don't want these type of underlines we don't want this color this kind of purple color and so what we want to do is now if we look at the HTML we have nav UL Li a this is where we start to I change the actual appearance of these elements this a element so we could say nav a so this will Target any links that are in the nav element that would work just fine if you want to be real specific Uli a same thing uh well it's almost the same thing except we're being specific uh specificity is a thing so now um what we'll do is we're going to say text decoration none that will get rid of if I save it the underlines no underlines there now also we're going to say color black we are going to say text transform uppercase because these are all uppercase in our design and figma and then we're going to go ahead and say font size now what's the font size well control click 16. 1.6 REM units all right so 1.6 REM units if I save this there we go now we're a lot closer I'm going to reset my browser Zoom by the way you can browse in and out or zoom in and out with your control key plus your smile scroll will all right so this is a 100 right here now you might be wondering something [Music] is what is the difference between REM and M like why did I use M on our Gap property but on font size we use REM well in short typically most of the time you're going to use REM units for your font sizes and when it comes to stuff like scaling like your distance like margin and padding and stuff like that or border radius you can use M's and sometimes it's difficult for me to off the top of my head while coding explain the difference REM simply means root M unit all right this is tied to the font size that has been established by our font size 62.5 percent um the M unit this is this gets tricky because say for instance this this is attached to the nav UL element let's say for instance I'm going to move this over and we're going to look at the the current distance between these elements these uh right here notice we have this amount of white space all right so keep keep an eye out on that section if I change over here let's let's uh get this structured a little bit better so UL is nested inside of nav and we know that through our HTML we have nav here and then UL is inside of it if I change the font size property to like 3M units or something and save it look what happened to that amount of white space between these elements it just like multiplied this 4.1 to some value right so if this was a rem unit guess what and I save it it doesn't get affected by the font size that exists in the other elements that it's nested within if that makes sense and I'm not going to go into exactly why or why exactly we'd want to use mverse REM in certain use cases there's some great videos specifically about this topic that you can find on YouTube and also articles but as a general rule of thumb us cssers your CSS or now I typically use for the font sizes your REM unit and then for stuff for other stuff you're typically use M unit okay oh boy enough of that explanation right okay so now that we have our list items set up that's looking pretty good all right so now we have an issue and this is getting more into intermediate CSS but this is a crash course and I wanted to show it to you this right here this underline so remember we did text decoration none to get rid of those underlines well it's not like we can restyle those into one a version that looks like this we have to kind of create our own custom little element this custom little asset underline that we've created and so we can do that purely with CSS here's how we do it every HTML element has what's called a before and after pseudo selector think of it as just a placeholder value where you can style extra things like adding an underline adjacent to this home element this little nav element so the way we do that is we're going to say navalia just like above DOT active because remember active is the one right here home that we want to add that little underline to and then what we say is the pseudo element is before so you put a colon before okay now when you do this sort of thing like you're adding extra design accents we're going to do this as well with the confetti graphic that showed up when you do this the parent element up here we say position relative and I'm not going to describe what that does right now I'm going to show you what it does in a second so we put position relative on the parent and then the pseudo element which is attached to it we're going to say position absolute all right now just remember I'm going to explain this in a second I'd rather show you though and then what we do is put content empty it's one of those things that these three elements you're you're putting together pretty much no matter what all right then what we're going to do is give it a width of like 35 percent because if you look at the design the length of this thing is like 35 percent of the width of Home essentially all right we also have to put we're going to do a height of like one pixels and then a border bottom of 2 pixel solid black all right so that's how we add a border to the bottom of two pixels we make it a solid because you can do dashed on the lines and stuff like that we'll save that and then and let's go ahead and see if we see anything yet yes we actually do right there it's above it we want it to be beneath it so we say bottom we could say zero that looks pretty good but we want it to be a little bit further so negative six pixels [Music] all right just like that all right so that was confusing what happens if I remove position relative let's put this off to the side we'll drag this right here and I remove this position relative well it disappears where is it where'd it go it's right there actually right here so position relative simply oops don't do that Gary there we go position relative simply means that this position absolute element will be in relative it'll be based its position is relative based on this element it's its parent element container if that makes sense hopefully that does all right so that's how we do that okay um now continuing on that is all the HTML markup that we need almost except we do want to have and let me go back to this and play the figma Prototype if I zoom up when we hover over you can see how the little um I'm not sure if you'll be able to see it well in the video it's so small this little borders underneath it they're gray they they kind of animate in we're going to tackle that at the end when we get to the micro and interaction section so for now we're good with this section all right so let's go back and what is now the next element we're going to start designing for it is our hero section and remember our hero section has this element called main that wraps around those two columns so we're going to Target those and by the way it would be a good idea to get in a habit of adding comments in your CSS so forward slash asterisk we can we can call this the navbar and then we uncomment by just reversing so asterisk first then forward slash so then after here we can do like the hero section all right that's looking good save that and now we have if we refer back to our L our HTML we have main right here with two elements inside of it a left call [Music] oops the left call is all the way from here to there and then the right call all right so Main we're going to specify remember we have two we have a left call and right column that need to be in column format what do we do display Flex so display Flex that should alter our layout quite a bit and it did notice how the lines the arrows smaller and we have our right call stuff right here in the right column see how things are starting to come together it's very exciting you can make money doing this it's unbelievable so we're also going to put a gap or white space between them if we look at here we can see this there's a pretty sizable gap between these elements it's like the width says 108 pixels or so so that would be 10.8 Ram units or something like that or M units so what we can do is say Gap we'll just put 8m units and you'll notice it creates white space between them right there all right now we're going to also move it away from this nav bar we need more white space between these elements with margin top margin hyphen top and we're going to give that a 11m units so 110 pixels essentially now it's been pushed down quite a bit after that we're also going to go ahead and specify our left call we're going to give this a width of 45 percent I'm going to save it all right so if we look at our design here this is basically 45 or so of this available space within that main parent container all right so that's why I gave that 45 percent and another thing to pay attention to is we want this stuff to consume right column like these three pictures and right now if we get out our our F12 Dev console area and we choose this section where it says write call look how small that is over there I the wit it doesn't extend all the way out we want that to extend all the way out to this section right here and we do that with a property and it's based on flexbox this is a flex item because it's a parent is a flexbox container we say Flex oops sorry I put in the wrong rule set we're going to do right call because that's the one we're working with now Flex grow one if we save that the design itself isn't going to change however if we hover back over look how it opened that up so the default behavior for flexbox items is it's only going to consume the amount of width it needs based on the content that's inside of it so that's why initially it was only this big but we need it to be to fill out the whole available space so use flexgro one hopefully that makes sense all right so now we're going to focus on our H1 element because that does not look anything like our design so we're going to take our H1 font size again how do we do font sizes well we come over here we select it we say ah it's 52 5.2 REM that's what we want so 5.2 REM units and again this is going to make it big and beefy there you go quite a bit bigger but it's also the wrong font we're going to use Playfair display for the first time so we say font family play fair display and then we also say font weight normal because it's going to make it Bolder by default and let's uh look at this there we go looking much better and also notice um if we click on this notice that orange stuff now if I zoom up it's telling us the margin by default is right here it says 34.84 pixels and so the margin will be adjusted programmatically by the browser based on the font size so it's adding a lot of margin around it and I don't want that margin there so we reset it to zero so we say margin 0 save all right and now it it obviously those I orange little indicators went away because there's no margin now all right so now let's go ahead and focus on the subheading which is right here this tiny text again what is the font size we click it it's going to be 1.8 REM units so we gave that a class I believe of subhead if we didn't opt to add it um it is oh no I didn't add it so we have to add class sub head for subheading and then we're going to specify a font size of 1.8 REM units now it's going to make it quite a bit bigger there we go looking a lot better now we have to worry about this section this looks nothing like our design over here oops clicking on the wrong thing there so we need to translate that into looking exactly like this essentially got our work cut out for us okay so if we refer back to the HTML we'll see that we have our call to action btns which has two elements inside of it the browser collection button and the secondary button right here so remember two columns means display Flex so we're going to say our uh CTA hyphen vtns is going to be a display Flex with a gap about 20 pixels so two M units all right let's save that all right there it is browser collections right here and then the secondary is right there additionally now let's let's let's focus specifically on browser collection and getting that one working so now we're going to specify our primary CTA and that's the class we gave our primary CTA button right here browser collection so for primary CTA we're going to give it that background color so we're going to say background color I'm going to grab that color so we select it and then we'll see over here we have this thing called secondary right there so if we click on that and choose edit style or instead we can actually go up to inspect tab on the upper right and it's going to tell you or show you the CSS property right there this is the hex code that we want so we just copy that we select it and copy and then we just paste so we save it and we're going to see that background color right here but boy does that look ugly right so we still have some CSS properties to get it looking correct so we're going to give it a font size because it's 18 pixels uh 1.8 REM units and you know what it might make sense to move this over here all right and then we're also going to get this up just so that you can see see this start to take take place and shape as we start designing or adding properties font weight's going to be bold all right here let's increase this get rid of that F12 sorry I'm hitting wrong Keys over here there we go and then we're going to also say color black text decoration none okay and then we're going to give ourselves some border a corner radius on the edges notice right here there are just right angles so we do a border radius of 1.9 M units because it's 19 for the value of the corner radius and figma you can see right there and then we're going to give it a padding of 1em on the top and bottom and 2em or 20 pixels on the right and left padding is white space working on the inside of a container so this button I we want to add more padding around so if I bring this out we reset this browser Zoom to uh 100 this is what yours should look like right now notice how it's centered looking good and pretty much exactly like our figma prototype now this obviously needs work right here all right so what we're going to do now is we're going to refactor a couple things I we're going to not necessarily refactor but we're going to add another selector onto this rule set called secondary CTA because it needs these exact same two properties a gap of two M units and display flex and the reason we're doing display Flex for secondary CTA is because if I show you the code secondary CTA has two elements that need to be in two columns the span and this SVG so going back here we save that and look at that they are now into two columns but we still have work to do because it still doesn't look good at all so now we're going to Target our secondary CTA all right and for that we're going to specify a font size again of 1.8 REM units might as well just move this over so you can see it while we code all right and then also a text decoration of none color black and this right here we're going to put display block because right now it's on two lines and we don't want that putting display block will ensure that the the words don't wrap in a sense and then we're also going to specify a padding of 1M on the top and bottom and zero on the right and left now our SVG element this is too big we need to fix that so we say secondary CTA SVG because the element in HTML is called SVG right here that's how we select it we could have given a class too by the way so with we're going to say 20 pixels now remember I said you very rarely want to use pixels well you can use pixels if I you don't care if it certain elements have to scale it have to scale up based on the browser's um or or a user's um Zoom preferences for their browser I some people choose to make their Zoom preferences uh for their browser like real large but for an icon like this I'm fine with it staying at a static 20 pixels no big deal so for our width uh or SVG that's looking pretty good right there um one other thing I wanted to change or add though is we want to Target CTA buttons just by itself in a rule set and say margin 5em on the top and bottom and zero on the left and right that way it pushes itself out a little bit more okay now that's looking real solid right there um let's see secondary CTA let's do align items Center I'm not sure if that changed anything because of this looked like it wasn't perfectly vertically aligned um I just want to make sure I didn't screw anything up let's see if we remove this if anything changes and it doesn't um we can get out our F12 our developer console and is that being centered it looks like it is it just looks like it's off center to me for some reason anyways never mind me okay so we are going to make this so that when we hover over this this will move over this will animate but again we're going to wait until after we get everything else done here now we have this 50k section to do which isn't too too bad and we need to make it look like this all right so let's extend this out underneath there if you recall the markup it has news and then a paragraph a 50k and a paragraph of details so we're going to say news display Flex because remember we have two columns so now we have 50k it's hard to see it's right there right up against the paragraph there's no white space between it all right so we're going to come back oops let's get back up our code editor Gary you're screwing things up okay there we go and we're going to say a gap of 3M units so 30 pixels between them a padding of five M units or 50 pixels inside of the news element so let's see what this looks like all right so we're getting closer we need a border around everything so we're going to say border one pixel solid black so if we save it it's going to be just a rectangular border but we do have a corner radius on that so going back to our design we select it it's going to be eight all right so 0.8 will be the actual border radius oh yeah okay I'm sorry my reference code was incorrect all right so border radius is 0.8 M units and then we're going to do that trick position relative because that confetti that confetti graphic that we have to add all right so based on our figma prototype we have this confetti so what we want to do is right click copy ssvg after you select it after you have that selected what we're going to do is we're going oh by the way it's already in here so we don't need to do that we already saved it as an SVG file so don't worry about that ignore that last step of copying it so now what we're going to do is we're going to say news sudo selector before and we're going to say position absolute content empty remember those three elements that go hand in hand background is going to be the URL to that image so we would get out of the CSS folder with the two periods four slash into CSS and then we select or into images rather sorry and then we choose confetti.svg all right we still have to give this an explicit width and height otherwise we won't be able to see it so we're going to say with 100 pixels or so height 100 pixels or so um and let's just save it to see if we see anything at this point yeah we do actually but it's not in the correct area that we want it so what we have to do is specify a Top Value we're going to make it negative so you can do negative values it'll be actually above where the news element starts with the and you'll see the the black line so for instance if I save this and show you now I might as well just show you not try to describe it it is starting 20 pixels above it we also want it to be off to the side by about 20 pixels or what as well so left will be negative 20 pixels right here so we save that and there we go very cool all right now just to make sure things are on top of each other when you use position absolute on an element you can use what's called Z index and we we can make this like two by default it's at a value where everything's kind of equal with each other I don't think it really changed anything but if you need something to show up like on top of something or behind something you can use negative Z index values and so on and so forth we'll use it again here at the end as well and you'll see now we have to specify the type because this is not big enough the 50k so that is paragraph employees font size is actually 33 in figma so 3.3 REM units margin 0 to get rid of any default default defart oh my God default margin um and then we're also also going to use a lighter font weight of 200 and there's going to be another element here that I specify but I see here we are looking pretty solid right there yeah it actually looks good as is and then we're going to take our type right here and do something with it so let's come over here we're going to say paragraph details font size is 1.4 REM and get rid of any margin so we'll save that all right so notice something right here there's a column established right here but the 50k is not matching it right so this is one of those weird things um and you just kind of understand these things through trial and error we need to add line height 100 percent to employees and now it makes them even along that line all right so the bigger your type in is the more the line height might affect certain things that you don't want to happen Okay so now we have this whole left column done let me go back to 100 percent looking pretty solid here now we have this area all right so this is going to be the first time we use what's called display grid or the grid itself now the grid I is in alternative way alternative way of structuring a layout compared to flex flexbox we've used nothing but flex but if we look at our design you'll see we have kind of like a it's not complex but it's it's a design where if you if you think about things logically we have if you think about like in a grid sense we have a let me get rid of this add a little stroke make it red all right think of this as columns and rows here's two columns with one row and here is another two columns with one row so we have two columns and two rows whenever you need to organize things in this fashion both on the horizontal and vertical axis the grid is a great way to do so so it can handle more complex sort of Arrangements of layouts so we have this overall element that wraps around all three of these called Write call that's going to be our grid container all right so let's go ahead and start focusing on that so we can put in a comment right column gallery and we're going to say right call display grid now we can also give it a gap the physical distance or weight space between these elements is 2.3 or 23 so it's going to be 2.3 and M units all right now if we go back and look nothing's really changed by the way um so now just so we can visualize What's Happening by the way let's take our card each one of those card elements has a card class and just give it a background of gray just temporarily so we can see what the heck's happening here this is what it looks like right now unlike flexbox when you specify display grid it doesn't automatically put things in the columns it leaves them as rows like this that's an important distinction because if we change this to flex and saved it look at it's in columns I so we don't want that though we want a grid and then what we want to do is specify grid template columns repeat to Auto so that's the same thing as saying Auto auto which means they're going to be the same width if I say this we see we have this situation but to save yourself some time repeat to auto same thing we're going to get the same exact result it's a function so yes you have functions in CSS now this isn't consistent with the structure of this because we want the first card to consume both rows all right so how do we do that well we use something called grid template areas all right and here's how I do it underneath I'll tab in and I'll put a quotes and we give these names and you can name them whatever you want so I want you to visualize this in the context of two rows and two columns so left right that's the top two I I guess you could say grid cells right here remember we created those I read out red lines so you have one right here and one right here called left and right now shift alt down we're going to keep left there we're going to keep this the same name because we want that first card element which is shown up right here to span both of those rows so we keep it the same name this one we can just say bottom so if we look at the amount of words that we have we have one two three three different words and that we have three different cards and we've structured it so that we give a visual representation that this is the left column then we have a right and a bottom Okay so we're done with that and now nothing's going to change really from where it was before now we have to assign grid area names to each one of these so it knows you know which one is going to be called left all right so to do that we simply say card one and again that's a class that exists right here on the card one and we say grid area left save it look at that all right so we don't even have to explicitly name these to over here because it already has the structure that we want and in that case you don't even have to put right and bottom you could just put periods look at that awesome so now uh let's go ahead and start working on our card rule set because our card rule set there's a lot to be desired about what this looks like I'm this looks nothing like this all right so card does not need a background uh because we're going to have image based backgrounds in a bit what we want to give it is a border radius each one of these has a border radius of what eight just like everything else does all buttons have eight so it's going to be 0.8 M units we also want to give padding of about 16 pixels on the inside around I the white little container I'll just show you real quickly right here so take this element alt actually okay so this variation is actually a little bit different I have 11 here so let's just do 1.1 M units there all right we're also going to do a display Flex on the card itself now this is a little bit different what you're used to we have the div class card element and we have only a single element inside of it but we want to make sure that that content right up here is not at the top but instead at the bottom because if you refer back to the design we'll see that these are at the bottom so a way to push things around is to make the parent Flex or the parent element a flexbox container so we say go back to our CSS display flex and we're going to go ahead and say align items end all right we'll save that and now they're at the bottom so these little tips and tricks you'll pick up along the way all right now I actually want to see our images our photographs so let's do that real quickly we're going to say background image URL out of CSS folder into images and we're gonna say clothing1.jpg all right we're going to save it there it is now I'm going to take the background size we're going to make it and again card and card one are applying to the same element here so we're going to say background size 150 percent save it and now that changes the size of it before it was a lot larger and we're gonna actually on Hover scale that down to a different size or scale it up rather based on Hover but we're going to get to that at the end so now we need to make this section look like this over here so let's do that oh and by the way we might as well real quickly um go ahead and specify our card two and uh card one yeah card two and three as well so we'll say we can get rid of the grid area here change this to 2 this to three this to 2 and this to 3. save it and there we go getting very close all right so now what we want to do is let's go ahead and yeah like I said work on those little white containers inside of them all right so that's called card details right here all right so car details background white border radius is 1M unit actually it's going to be more like 0.6 I mean sorry about that and then padding on the inside of that white container with the text there's three pieces of text there's a title a little category and then the price so that's going to be padding of two M units the width will be 100 percent we're going to say display Flex align items Center so vertically centered inside that white box we're going to justify the content space between because we have two columns of text the two bits of text on top of each other and then the price so it needs to be spaced between just like in our nav section with the logo and the navigation and we'll save that all right so that's looking pretty kind of close now we have to work and Target the actual text give it proper sizes so we have a link inside there for the title so card details a we're going to say font size 1.4 for REM units margin 0 oh I'm sorry I'm I'm looking at the wrong rule set on my uh yeah sorry about that this is actually going to be color black text decoration none font size for this is actually 16. so 1.6 REM and font weight will be bold so this is what that should look like after saving and then we have the one underneath it which is just um card details paragraph this is going to be a font size of 1.4 Ram slightly smaller and a margin of zero there we go looking solid very close and then also the size the font size has to be increased so P product price is font size 1.8 REM units save that there we go all right now if we refer back to the document I there's actually one thing that I 100 forgot to include which I kind of wanted to include it um which is okay that I didn't do it if I go back here to my um in figma to my my designs I had an initial design and it was supposed to look like this there was supposed to be this graphic right here I want to show you how to do that actually so this this file is already an SVG file that's available right here called tag so I want to get that in here so the way we do that is we go back to our main and that exists it's it's going to be that that technique where we use the pseudo element of before and it's going to exist on top of card one because that's what that's where it's physically located in the design so what we do is under card one we say position relative and then we use card one uh pseudo element of before card one before all right so remember position absolute content is empty we have a background of URL images tag.svg and we're also going to put in here no repeat you can I after doing this rule set you can experiment with what happens after we remove no repeat it'll just repeat it'll look really weird so I we're going to put width 100 percent height 100 percent top is going to be 20 pixels left will be negative 30 pixels because it hangs off to the side of the card and then we're also going to put pointer events oops pointer events none all right so let me show you what that does here it is all right so if we didn't add pointer events of none notice how right now I can I can click on this link which is what we want to be able to do uh if we if we don't put that there because we specified a width of and height of a hundred percent we won't be able to click this it will become unusable so pointer events means it shouldn't have no effect on the cursor at all because it's sitting on top of this stuff so just just for your understanding now if we remove no repeat Watch What Happens it's all over the place so we only want it to repeat once so you put no repeat or not we don't want to repeat at all we just want it to be displayed once all right that was intense my face hurts from Talking anyhow we're not done yet we need to do those micro interactions so if I refer back to figma and we go to the Prototype and by the way you just click uh you select this Frame and you click play and I show you um this is what it looks like we need to do these little hover animations we need to do this animation right here where that happens this little subtle animation and then this animation as well we can all do that in CSS so let's get started let's come down here we'll just do a comment micro interactions all right and the first time that we're going to tackle is going to be the nav hover ones where the line grows so what we say is nav Uli a hover before okay so we're going to say width 35 percent now what's that going to do I don't think it's going to work yeah nothing happens right now if I hover over these that's because we have to go back up to our nav section where all that stuff is uh at all right and we have to add a couple things so essentially what we want to do is have I a transition element that's going to be added to our Ula of before a new rule set so nav ullia before now notice how before we have our underlying but it's only for the active class so it only applies to the home link but these other ones are the the um the ones that we want to hover are the default ones not the ones that are have the active class so we basically recreate all this stuff right here I'm just going to copy and paste it back in but we're going to set this the width here to zero let's put zero percent because by default we don't want to see it only when we hover all right hopefully that makes sense now we're also going to make this a gray color we could grab the color code but I'm being lazy from figma and then we say Well for now let's hit save we hit save and I zoom up look it just shows up it doesn't grow how do we make it animate well we say transition with 0.3 seconds all right so it's telling us this is going to transition the width property should it change based on something like a hover and for a duration of three seconds point three seconds rather 300 milliseconds so now zoom up ta-da they grow look how cool that is okay next one is going to be browser collection this is going to be a very simple one it's just a simple hover on a button uh and so to do that all we do is come down and we say primary CTA hover background and I happen to know the color code offhand so I'm just gonna put that in actually it might not be because it was for my previous project but we'll see what it does oh God yeah it's like kind of like a different color that doesn't look good at all so because I'm a perfectionist going to go back and if I select this and I detach that I'm going to make it just a little bit darker like that grab that color code so that color code is E2 D 1bd all right so I'll back that change up paste that in there we go much better now the spring 23 collection we want that to we want this Arrow to kind of push over and that'll be a transition as well so to do that we're going to say secondary CTA hover but we want to focus once it's hovered we want to change the SVG element SVG all right and then what we say is transform translate X which means on the horizontal axis we're going to push it over by 10 pixels hit save now zoom up now that doesn't transition smoothly because we haven't defined a transition property so if we go all the way back up and we find a secondary CTA we're going to transition the transform property by 0.3 seconds so we zoom up oh no there's something I did wrong which you know what I'm going to leave this in a video because that is going to happen from time to time so I'm going to Simply look over here on my oh that's why I know why I didn't put it on the right element it should go right here because we're applying this on the SVG element so if we save it and I zoom up it's going to work now notice we did have a text decoration of underline on the hover I'll let you try that yourself again you'll put uh all you have to do actually I'll show you how to do it because you're new you're not going to probably figure it out you might not pause try to figure out yourself if you want here's how you do it secondary CTA hover background or not background what am I doing text decoration underline we save it there we go awesome and then finally we have the hover interaction on our cards that we need to do as well so this time we're going to use a little bit more robust animation system called the animation property with keyframes all right so here's how uh we essentially do that oh actually we're not going to do keyframes I'm jumping ahead because there's another thing that we need to do what we're going to do is a say card hover so when somebody hovers over the entire card could be anywhere like the the whole background image we're going to set the background size to 160 remember we set it at 150 for those photographs now if we come back to card we need to find card it's right here right there we're going to say transition background size um let's do like um 800 MS milliseconds we'll see if this works all right I did not spell that right that's why it wasn't working now look at that very nice and then we also want this to move up this element needs to move up slightly to be consistent with our prototype so to do that to come back down we're going to say card when the card is hovered over we want to change card details which is the white container it contains the three pieces of the type transform so whenever you want to move something you can just transform Translate Y on the y-axis and we're going to move it a negative 20 pixels which will move it upwards so if we save it it's not going to have a smooth transition to give it that smooth transition we come back to card details and we're going to say transition transform and again this could be 800 milliseconds as well so now they all work as one would expect awesome okay so now one final thing what if we wanted to have a cool animation when like when we you first somebody first visits the website and things kind of just like grow in or animate sometimes you call them page transition animations I let's do that real quick coming back to your HTML let's add a Class A div class of overlay and there's not going to be anything inside of it it's just a div element we're going to come back to our main CSS and we're going to specify that overlay element we just created and let's add a comment here real quick intro animation so for overlay we're going to say position absolute because this is going to consume and just kind of lay over on top of everything initially so what we'll do is z index 999 it's going to be on the top of no matter what pretty much anything unless there's another z-index element that we specify that's larger background is going to be white and the width is going to be 100 and the height is going to be 100 percent so if I save this we're not going to see our design anymore because we have this huge overlay element 100 width and height backgrounds white it's on top of everything um we're going to apply a property we haven't used yet called animation and The Innovation um property accepts a few different um parameters or properties reveals one so reveal is the name so we can name this whatever we want the name of your animation we're later going to define the animation keyframes so reveal because we're going to reveal it essentially the duration of one second or 1s the type of easing ease in is fine there's entire videos on this property alone like he's in and out um cubic bezier all this crazy stuff it's just timing functions for how the animation takes place and then we're going to say forwards because we don't want it to like reset itself it's just like it's going to go from this date to the one state and that's it then um we're going to go ahead and specify the keyframe animations for reveal so keyframes reveal all right all we say is from transform scale y one let's copy and paste this change from two transform scale y zero now if I save this we're not going to see it initially we have to refresh now notice how it's like it's like it's animating in I don't want that we need to change the transform origin to bottom so if we do that refresh there we go now let's make another thing where this whole section in the middle our left and right column kind of grows in so to do that we're going to take and remember what consumes or what wraps around left column right column it's Main I'll show you real quick right here so main we're going to say animation grow in camel case here two seconds now we're going to use cubic bezier I think we're going to use this one right here these are just advanced timing functions and visual studio code has a few of them worked in already we're going to say forwards we're going to also change the transform property scale to 0.4 so if we save this we scaled this thing down quite a bit I so now on animation uh for a grow in at keyframes grow in we're going to say two transform we're not putting from because we didn't specify the uh because we were specifying by default already in the selector for main transforms uh it's already set at 0.4 so we just put two scale one so we're going back to the original uh scale essentially so refresh look at that isn't that snazzy and we have all of our animations worked in here very fun stuff so this right here is part of the process now I say part of the process because we did not make this responsive so if you visited this website in your phone it's going to look like a mess typically you want to the your your designs almost like 99 million times out of 100 out of wait a 90 okay never mind my brain is fried right now typically you want to make sure that your design works for for a smartphone for tablets you know all these different size devices we didn't make this responsive all right um so it's important that you know if you take this seriously you want to make sure your designs are responsive and use something called media queries so this is already a really long video we're not going to get into that here today uh if that's something you want to learn about if you really think this you know HTML CSS and obviously JavaScript we didn't touch on is something that you know you feel that you could really take advantage of and maybe have a career in or even just as a hobby definitely consider joining designcourse.com where we do stuff like this in way more uh in the CSS course uh where we make everything responsive and we have so many different projects and examples where you really start to solidify this stuff as much as possible so definitely check that out in the uh you YouTube description here at the top and definitely consider joining hopefully you enjoyed that make sure to subscribe and I'll see you all soon goodbye

Channel: DesignCourse

Views: 136,810

Keywords: frontend development, learn frontend, frontend 2023, learn html, learn html 2023, learn css, learn css 2023, html css, html css 2023, html css tutorial, html css course, frontend course, gary simon, designcourse

Id: Kl3nOXQjVnQ

Length: 129min 27sec (7767 seconds)

Published: Thu Jan 05 2023