The 2020 HTML & CSS Crash Course - From Mockup to Product

hey everybody what's up Gary Simon here so today we are going to step into the world of front-end development and we're going to take this design here and I actually created this UI design on a live stream about a month ago I'm going to link it into the YouTube description here below so that you can see that if you want to follow along and basically I just I created this UI design from scratch live while live I just to see what I could do coming up with something live you know this is basically maybe perhaps for a future personal website of mine I'm not sure if I'm gonna use it but a lot of people ask me it's like okay we did the prototype on the mock-up here in Adobe experience design Adobe XD how do we take this and make it a reality in the browser with HTML and CSS and make it responsive and do mobile first so that's what we're gonna do I've done a few of these in the past people seem to like them and so yeah we're gonna write from scratch all the HTML and CSS necessary to make this thing right here work in the browser now as always make sure to subscribe and let's get started before we begin there's never been a better time to trial a node from now until May 31st of 2020 the node is giving every single account access to object storage for free that's right whether you create an account all the way back in 2003 or even just today you can take advantage of free object storage until April 30th of 2020 what is object storage you might ask well object storage is an easy way to store and access data without the need for running a server it's perfect for data that doesn't regularly change like images and other multimedia files important backups or giant archives for service that might need more storage space one of the best use cases for object storage is hosting your own static website you can have a site up and highly available on lenôtre object storage with as little as an HTML and CSS file to give objects towards to try for free and get an additional $20 on your noodle enode account sign up at to lynda.com forward slash design course all right so here we go we have it's not an empty folder as usual I decided to pre-populate it but just to show you the index.html is pretty much empty we've only linked up a CSS for slash main CSS file here yeah this over here is just one of sass file main sass I do have the live sass compilation plug-in so it's watching it and it's converting it automatically here in Visual Studio code to CSS of course that's blank as well we have images there's these four graphics here and let's just take a look at the mock up real quick and this is what our task is to take this mock up that I created you know last month or so again I may or may not actually use it for my own site and we need to take this and make it a reality in the browser with HTML CSS and make sure it's responsive so we're gonna be doing mobile first now unfortunately I do not have the actual mobile prototype mock-up so we're gonna do this on the fly and our goal though is to get to here which is like the desktop view alright so one of the first questions I that you should have when you're beginning this process of converting a mock-up or a product prototype well I just woke up like 10 minutes ago to HTML CSS is you know what image assets do you need well clearly we have this ugly photo of myself in that's one of the photos called BG jpg that's in the images folder we also have these little icons and then we also have these SVG logos right here and of course I didn't have time to finish I and get like you know four unique ones so I just kind of repeated these we're done here and that's all so those are the four assets that we have alright so I'm also using I you know the live server plug-in so again that's the only two plugins that we have so live sass compilation and live server alright so when you install the live server plug and you could right click open with live server and that's what this little window over here is for notice it's kind of like a very width wise it's small like in this the the context of a mobile app or a mobile device right so we want to go mobile first we don't really need to worry about this part too much though because we need to get the HTML HTML is the HTML it's always going to be the same regardless of the device but once we get to the CSS that's this will start to become important so for now I'm just going to hide this right there okay so let's get started with the HTML and one of the first things that I it makes sense to do is just to go from top to bottom right your your HTML should reflect that nature of going from top to bottom so looking at this we have to ask yourself what would be the very first element that we need to create an HTML wrapper or an element for this right here this is this graphic right it's a very first thing if you're looking at this from going from top to left we see it's this element right here we're gonna have to create some type of HTML element that will allow us to create this purple photograph sort of container so that's what we're gonna do alright so that is going to be if I switch back over here we're gonna call that a hero - rapper now one thing I'm also going to use is use as the Emmet abbreviations basically Emmet allows you to write HTML faster so if I wanted to create by hand without using Emmet it would look like this div class I'd have to you know do this less than sign type in div and then the class equals hero - rapper using Emmet we could do this instead period which means class hero - rapper hit enter and it just creates it for us so I have a tutorial go to my channel do a search on Emmet and you'll find that tutorial on you know how to use this because you can do a lot of really cool things with it to save time alright so we have our here a rapper and that's going to take care of this element right this whole big element right here so now we have the stuff inside of it right well you would think maybe now we have to specify the logo well not quite I if you think about it and this is just temporary there's an entire container around all this content that is centering it right centering in here so we need a wrapper for that so I'm just going to call that a class of wrapper all right then up here going back we have another container right here right we can call that our header so the header will contain the logo and the navigation right here so we can use the HTML semantic tag have header for that next up we have the logo right so we're going to use just a regular hyperlink for that I'm just going to put in a period logo so that's going to give us a an eighth element with a class of logo and then we're going to make it go nowhere because this thing isn't going to be a full project just yet and then my name and that's it normally you put like an image like an SVG if you had like a regular logo in there next up going back we have our navigation so a navigation in and of itself has its own series of wrappers around it so what I like to do is use the HTML to mean a tank of nav and then I like to use an unordered list because that is a list of things right it's a list of links home about contact right so ul Li and then we're going to say a and this is just gonna go to index.html this is gonna say home and now I'm gonna hit shift alt and down to replicate that two more times this will be about and then this of course will be contact so let me change that and then that alright so that's it for the actual navigation or the header portion if you look over here we only have three links right and so I'm always talking about this in a mobile like a real small mobile device maybe like an older iPhone we would actually have enough room to show home about in contact which means we don't need to put a hamburger menu for the mobile devices we can just show these right off the bat because it's less clicking right so for UX that's a better thing and also for the HTML that means less markup because we don't have to create an HTML element like an SVG file or whatever like an image tag for that specific hamburger menu so we're just going to show this all the time no hamburger menus next up we have this element right we have this in this you can think of this as a wrapper as well if you want it to be like this so now what we'll do and remember it's still inside this container I remember the wrapper container it's still inside of that so armed with that knowledge we want to come down here right there and we could just put our h1 element right here because it's still inside of a wrapper right right here but I wanted to be able to specifically move those elements around easily these too and so with that said I'm gonna put I'm gonna give them their own wrapper so that's going to be called hero content and this will be H one I helped millions of people learn stuff and then also a paragraph of subtitle and teaching UI UX and amp there we go that's the ampersand code that you have to use and then front-end development there so far so good this is what our Glee HTML looks like so far okay so now that whole section is is accounted for with our HTML so this whole section is taken care of exciting now we just have this bit of stuff and of course this is kind of like an unfinished site like I would have more content but this should just be enough to give you and get your feet wet with this sort of thing anyhow so we have the next section where does that begin right so if you look at the backgrounds here we have an image background up here that's a kind of or we have a slightly lighter purplish right here in this whole section and then we have like this darker purple down here so what we need to do is create a wrapper for this whole section right here alright so coming outside of our hero wrapper because so hero wrappers that pink sort of saturated image we're gonna have one called light purple wrapper there again you can name this stuff whatever you want whatever makes sense and whatever will make you know it'll be easiest to deal with in terms of music reusing the project in the future and then we also need to have that we're going to use that same wrapper class because notice it has the same amount of alignment as the top one so this was wrapper this is also going to be div class wrapper as well to a certain point and you can see that these extend beyond that and when we get to that point I'll let you know what we'll do alright so we're gonna have our wrapper then what is it next that we have we have this right here we have this unordered list of things right so we have to account for that so we're going to say you owe dot stats yeah I know we're gonna give the list item and we're gonna say strong and we'll say twenty six point five million and then also we'll wrap these in the span tag and this will say YouTube views alright so the reason I'm wrapping this element like the little labels right here and a span is because it's gonna allow me to reference that specific CSS selector and it'll allow us to move it around easily so that's why in style it better specifically so that's why I've done that so this is a strong this is a span all right so what I'm gonna do now is I'm just gonna copy and paste off the screen I'm a reference code the rest of these because just you don't want to sit there watching me type all those other ones out because it's repetitive there so same thing same exact markup it's just reflecting the content right here now these things these dividers we're not going to add those in initially because we're not gonna have a lot of space on a mobile viewport but we'll do that on the full desktop view next up is right here this carousel right now the carousel the buttons extend to the left and to the right and there's multiple ways to achieve things in CSS so the way I decided to do it you probably could take these and do a position:absolute on both of those and position those in CSS but I'm deciding to break outside of the container the wrapper and have our own custom extended wrapper if that makes sense which if it doesn't now it will so what I'm doing here is I'm coming outside of this closing div tag which is the wrapper up here and I'm gonna create my own extended wrapper so extended wrapper and I'm also gonna give it an additional class called carousel container alright so the carousel container you'll see how this comes into play later on now if we're gonna use our first image the source is going to be images arrow SVG and I'm gonna call this move testimonials to the left we're not gonna actually make the carousel function in JavaScript I just wanted this to be a strictly HTML and CSS tutorial it's already going to be quite long maybe I'll finish it in a different tutorial we'll do ul carousel so the next thing is the actual carousel that we have to create and a list item so again we're using another on an ordered list because these are a list of things right so inside of here we have the little list item is going to be this pinkish or you know lighter purple background container and then we have to create the HTML for this and this will use a block quote in a site tag for those two elements all right so what those will look like I'm just gonna paste these in off the side here just a blockquote and it's just the same content that you see in Adobe XD and the little dash that we see here we're gonna create that and purely in CSS so we don't need H HTML for that so now I'm just going to go ahead and take our list item because we only have two of them and just paste that in right there I don't care about keeping the content unique at this point and then finally we're going to take this now normally you would also want to have an ID of left arrow perhaps that way when you get to the JavaScript you can access it and then also we'll just keep we could do a class of arrows so now we're gonna take this that's the left arrow and then after the carousel we're gonna have a right arrow so this would be right arrow and then move testimonials to the right and we're using the same arrow in the same arrow actually if you look at it oh it's not gonna show you a preview it's just it's this one right here but in CSS for the right arrow which is flipped we're gonna we're going to rotate it so that it's pointing that way that way we don't have to unnecessary requests to download another image which is essentially the same it's just flipped we can do that with CSS all right so now we're done with this section and now we have this little section right here now this is just a a different aesthetic approach where I have this this title and it's kind of just overlapping this container so really if you think about it if I hide these things are deselect them it's kind of just like this except you're using CSS to position it right there because I thought that'd look cool it's just like a subjective you know little design difference that I've done so it is its own section though so we could we're gonna treat the HTML as if this was down here but we'll use CSS to push it up there if that makes sense all right so now what we'll do going back here let me close that out is we're going to get fully outside of our last div container because remember this div is closing div tag is in reference to extended wrapper no no it's it's some reference to our light purple wrapper right here you see the line goes all the way down here so now we're gonna go outside of that and we're gonna say div class wrapper because again it's centered just like all the other stuff and I'm gonna give it another I wrapper here I mean class rather one called move up that's gonna allow us to use CSS to move it up and then also I'm gonna add another one called vertical padding you'll see how that comes into play later h2 and again when I initially write the HTML for the first time like when I was preparing this lesson I didn't have like V padding added like I realized that I needed in another class in order to add this and to make it work in terms of working with the padding so you'll find that you'll you you're not gonna get the HTML right the very first time in a project like this you know for the most part maybe you might get lucky if it's a really simple project but for the most part you're going to be coming back and forth changing up your HTML in some ways to make it work alright so h2 we're going to say companies I've worked with after that we have just this list it's an unordered list of logos right so yeah another ul so we're gonna say ul company's Li I and we're gonna have an image source is images Skillshare to SVG we'll just Badou Skillshare here and then um class is Skillshare so I'm going to shift alt and down to replicate that this one's going to be PS for plural site which I have created many courses for and then this is going to be PS and that's it so we're gonna take these two copy them and paste them and that my friends is it for the HTML so if we look at this this is our HTML which has no CSS applied to it so of course it looks really really ugly so now we're gonna switch gears and we're gonna focus on the CSS so like I mentioned before mobile-first CSS that means all of our CSS rule sets are going to be I based on making it look good on mobile first alright now there's there's desktop first but really the best practice is mobile first it just keeps your your HD or your CSS rather the default CSS without any media queries which if you don't know what that is you'll see what that is and later on but it keeps it as simple as possible so you want to progressively enhance the app or the website you want your the user interface going starting from mobile which is usually going to be the most simple because you're on a mobile device you don't have as much room and then when you get to tablet you might add in some more things and change things up and then you get the desktop and which you have everything I so you progressively enhance it so what we're gonna do is one of the one of the things I like to do just on in any project when I'm starting is to just reference everything and just say box-sizing border box and what that's going to allow us to do is whenever you're dealing with um margins on padding in relation to eye elements that are like hundred percent with it's going to fix it so that it doesn't create like vertical scroll bars in certain areas so this is something I just always add by default we're gonna do borrow it body here so our very first tag um is the body tag like if we look at in HTML our body tags right there so I usually get that out of the way so we're gonna reset any default margin so I Nevin saved this yet but if you look up here there's a little bit of margin I like to deal with my own margin right so if I save it it's gonna get rid of that next up is the background the backgrounds just that purple color so let me paste that there we go now if you look at the mock up here all the text is pretty much white it is it is white so we're gonna reset all the text to color white all right and then finally font family is going to be Montserrat now I have monsura installed as a font already in my computer but most people won't so in that case you need to go to fonts google.com and you need to import it into your CSS so that it's downloaded by those who don't already have installed so if I type in Montserrat we'll go over here we will select 308 hundred for bold alright so we click on embed import grab this code here and at the very top I like to import the fonts and there we go okay so now I we have next up look at these ugly links alright nothing's blue like that in our prototype or a mock-up so we're going to just say color white and I don't want any text-decoration:underline x' that is there we go next up I'm also gonna reference all of our unordered list we have like three or four of them so we're just going to tape list-style:none that will get rid of the little bullet points next to them we also have some margin and padding on each one of those so we're going to take margin 0 and padding:0 there we go okay so next up what is our first element after the body tag it's gonna be here a rapper so let's work with that one so hero rapper background:url four slash images we have to get out of our CSS folder into the images folder and say BG jpg and also so if I save that will see that we wanted to use background size cover all right so cover that's the cover property will ensure that it always stays I you know in view inside of that container okay continuing on from there we also have our wrapper which is our next element and this shows up multiple times in our document so we're gonna say wrapper alright so the wrapper is responsible for establishing the white space from left of the device and the right of the device and also the top and bottom so on a desktop we have a lot but on a mobile we don't want this much so we're going to just focus on mobile ready or not ready all right so like mobile first so padding it's gonna be 1.5 we'll try that out em units right and we're also going to say I let's see here I may have screwed something up because that the hair was not supposed to happen alright so whenever this sort of thing happens you have to make sure that our I HTML was structured correctly so we want to make sure our closing div tags and all that is where it needs to be so padding is 1.5 on a wrapper I'm gonna leave this in oh look at that that must be it been like an error with the the browser rendering because it showed clearly this I big you know background section right here but it went away okay I'm glad that was just a hiccup there and not like an issue with my code so now we're also going to make a max width property and set it to 1200 pixels now this won't do anything here if we come out we could see our wrapper right here it it ends up actually it won't you won't really probably notice it at all the effects of this but what it's saying is when the browser gets to 1200 pixels max width I it's not going to take this wrapper it's not going to keep on extending it outward beyond 1200 you'll see how this comes into play later on maybe I will comment that out at that point and just show you what that does but for now essentially when the browser gets let's say this is 1200 pixels we don't want this stuff to exceed the width of 1200 pixels so that's why you know because I don't want this over here for instance I don't want this over here I don't want it to get real large indefinitely so we're saying max width 1200 okay and then we're also going to do margin:0 of auto zero and auto and what that does is that will Center everything especially when we get out to I you know larger viewports okay so now what we'll do is we're going to reference our header all right so our header element we're gonna display flex now when you do this automatically watch what happens to the logo and the navigation it instead of doing just multiple rows stacked on top of each other it's going to put them basically I to the right and left that creates two columns instead of rows we're also going to put justify content space between because look this needs to go over there the navigations goes over there so to do that there we go justify content space between right there now I have this zoomed up just so we could see it but if I reset this you can see it's actually quite a bit smaller if I hit ctrl + you know we can we could change the scale of this but by default at a hundred percent this is what everything looks like at the moment alright so now what next needs to change we have this column and they're stacked on top of each other but we need them in columns and not rows so because we're using SAS we can nest these in inside of each other let's take our logo though because that comes next actually in the HTML right here a class logo and we're going to say font weight is bold there we go and also we're going to have our nav ul all right actually we could probably get rid of nav right here specifically to say unordered list because when this goes to save this is going to have header ul in the output of the CSS so when we add a rule set will see that behaves just fine so now we're gonna say display flex just the same way we did up here display flex we'll take these and put them in their own columns and then also our list items we'll say Li a will say padding is zero and on the top and bottom and then on the right and left is point six M units just like that very cool stuff so now we're starting to get somewhere alright next up after that is going to be our hero content right which is some reference to this stuff right here so what's in terms of UI design fundamentals what's wrong with this picture up here well this content this this heading is very close to the logo and in the navigation essentially up here right we need to push things down and give things a room to breathe as I always say we need more white space so let's go ahead and do that so let's take our hero content we're gonna create margin for e/m on the top now if you just save it right there it's gonna put 4m units all around it all for directions but we want 0i on the right and left and then we also want I want a little bit less white space on the bottom so I'm going to put two M units instead there we go that's better now also we're going to reference our subtitle which is the reference to this teaching ui/ux blah blah blah bright there and I'm just going to take margin bottom zero and because it was a paragraph yeah this is a paragraph tag right I just wanted to get rid of any default padding or margin rather next up we have a light purple wrapper alright so light purple wrapper we're going to say light purple wrapper and inside of there we're going to put that background it's a lighter background color and that color code happens to be right here so there we go we lightened it up a bit next up we have our stats so you already have wrapper defined right so you look at UL class stats so we're gonna say stats and inside of there we're going to this time we're gonna use the grid alright so we used to flex box and that's fine to use I want to show you how do you do this using the grid so we'll do display all right display grid doesn't do anything by default and I'm gonna show you a really cool sort of more intermediate to advanced rule set here are our property called grid template columns and what we're gonna do is repeat autofit min Max and I did a video tutorial specifically on this property I or this little trick here min max we're gonna say 100 30 pixels to each one of those columns and then one fractional unit as well so what this ends up doing here is it will add the columns I and but it will automatically make it responsive or in other words it will collapse them onto their own rows if they don't have enough room so notice right there you see o5u CL 5 you see a 5 now it just took the last 158 countries and it put it on to its own column and it's gonna keep on doing that so now there's you know there's a one here one here one here one here and then one there so that's a cool way to potentially deal with something like that we're also going to do justify content space around and then also and you can't really notice the difference here that was you could kind of notice the difference when you get into those bigger resolutions and then we're gonna do a margin top of two e/m oops there we go just to push things down a bit because remember in terms of UI design fundamentals we have this amount of white space we kind of want to have this amount of white space from that start of that new container all right next up we're gonna take our list items and we're say margin-bottom 1.5 m units to push them away from each other because they're really condensed then we're gonna take our strong element and the strong element is wrapped around these real bold numbers right here and we're going to say font size 1.4 m units just to make them bigger and then we also have a span element right after them which is the labels like countries courses YouTube views etc and we're going to say display:block that's gonna push them on to their own row we're also going to do text transform uppercase alright and then we're gonna take the font size and really make it small point seven 5m units there we go alright so we're getting somewhere okay next up after this we have our arrows right so we have a an arrows class right here for these arrows what I'm gonna do because we don't have a lot of space I'm just gonna get rid of them so we're gonna hide them so display:none goodbye arrows and they leave next up is our extended wrapper class so our extended wrapper is right here right technically I guess that was before the arrows but it doesn't matter so our extended wrapper it's gonna be like a normal wrapper except it's gonna give us a little bit more room to work with especially on desktop and tablet so we're gonna say extended wrapper padding it's going to be 0 and then 1.5 m units on the right left and 2 m units on the bottom all right we're also going to add a couple more properties again max width is going to be 12 30 pixels instead of 1200 and then margin:0 auto to get that centered next up after that is our carousel so we're gonna say ul carousel and we're going to margin bottom 1m unit so that just added a little bit of margin down there or whitespace font size is going to be point up nope wrong area I'm looking in the wrong section sorry about that list item we're gonna do a background so we're gonna give each card a background colour because remember these have a different background like this it's and that happens to be this color code right here there we go and then padding will be 1m unit all right and then margin bottom will be 1m unit to separate them just a bit after that we have our block quote in sight so the block quote is actually you know this text right here the block quote will be a margin of 0 just to get rid of any default the block quote tag has its own margin font size will be 0.8 m units will do a line height just because they're really like scrunched up we want to give this a little bit more room so line height will be 1.8 m units and then we'll do margin bottom to push itself away from the author's name by 1m units there we go we also have our site the site has a specific pink color as shown here so let's go ahead and reference that real quickly we're also going to do font weight of bold we're going to do font size of 0.8 am font style and normal position will be relative and I'll show you what I'm doing that in a second and then padding left will be 25 pixels alright so we need to create that little dash right so I'm making this position relative so that then I can do see site before and we're going to use this eye before selector in order to add that little dash so position absolute so when you ever have an element that's positioned absolute inside of a position relative container its I allow zoo to move this element around using top and left and right and bottom the in relation to the container right here instead of in relation to the document as a whole if that makes sense I'll show you exactly what I mean in a second so let's go ahead and make left we're also going to do top of 10 pixels I can't see it yet because we haven't styled it will do height of like 1 pixels and then width of 20 pixels and we'll do a border bottom this is our last property 1 pixel solid white so now we could see this here and basically if I were if I were to take this away its you can go it's it's it's hidden right and that's because it's probably like way up here it's right there actually we don't want that so we use position:relative all right and now it's actually um a little bit down further than I would like it to be I'm not sure what happened cuz that's what it wasn't my reference code but if we change this to like 6 pixels that's a little bit better right there yeah okay so that works there we go all right so we're almost done with our mobile first CSS then we have I to get it working obviously it's not quite right right here we're almost done so we need to do the company section down here so we have an h2 element which is this element right here so we're gonna say h2 we're gonna say text-align:center this one position:relative and again we're doing the same little position:relative trick because we're going to do h2 I before in order to create this little eye - right here so you kind of already know how this works so I'm just gonna paste these rule sets in we have content blank position:absolute height is 5 pixels width it's just 30 pixels the background colors that I you know high contrast pink and then top is negative 0.3 M units and there we go it's right there after that we have our companies and this is an unordered list text align oh yeah it is on our list so text align Center and we want to opacity 0.4 not point 4 I'm sorry just a point 4 and then also we're going to do a list items push this down a bit margin to em on the top and bottom zir on the right and left now the way it pushes I you know it gives it gives it whitespace in there and then our Skillshare class is going to be width of a hundred pixels and then our ps4 plural site is gonna be a width of 200 pixels and there we go that right there my friends is the mobile first CSS and a mobile first just view of our design so if we come out we have certain things that we can really change about this I big time oh and by the way we could see how now the max width of a 1200 pixels works it's once it gets to 1200 pixels it stays it doesn't it's not fluid to the full width of the browser anymore if I were to take that off just to show you where we at we are right here so if I were to take that off we'll see how the wrapper at the wrapper class that I just took that off everything just extents it makes it hard to scan the site when it's so big so that's the purpose of that so let's say that alright so there's certain things that we can do to really make adjustments here to I when we get out into larger phones and like tablets for instance so the first thing that I want to do is look down here we have a lot of room when we were out here not so much here they need to be stacked on top of each other but when we get out a little bit larger we have more room to place these things side-by-side so what we'll do is create a media query at Media min width 500 pixels or so and by the way in case you didn't know it weather using Chrome or Firefox control-shift I will get you out the dev tools and whenever you change the width of the browser you'll see the width property right there it hides but when you're when you're actively doing it just look up here you'll see it it tells you it's 475 around 500 pixels is where we're gonna have enough room to situate these things right of each other so now what we'll do is put in companies and we're going to display grid here grid template columns will be repeat to in Auto and now when we get beyond 500 there we go very cool so we've condensed things essentially alright that's all I'm going to do for that media query I don't think anything else needs to change because we still don't have enough room in my opinion to put these two side-by-side but very quickly after we will so I'm going to copy this code simply change this to 650 or so and then what we're really cool trick to increase the font size in your margin and padding's as long as you used m units is to change the body the body's font size property by default is 16 pixels we're gonna up this to 18 pixels so we're going to save that now right we saved it everything just got just everything scaled up essentially so if we come down you're gonna notice before 650 pixels we have a certain view and then when we get to 650 everything jumps sup right there that's where 650 is at so it just scales everything up a bit I will are jurdy vices and you can do so okay next up we're gonna take a wrapper and our rapper is responsible for just defining the white space so our padding we're gonna bump that up from 1m unit and then also 4m units on the right and left alright so now here we are before 650 at 650 it's establishing more white space on the intersection also our carousel container we're going to display flex and what that's going to do let's see it is not working the way I thought it would all right so let's make sure I have everything oh we have an issue with our CSS what is what is going on oh okay so I figured out basically this is UL class carousel and I was trying I'm referencing carousel container the reason we're doing there it didn't show a difference is because I we made carousel container display flex but I don't have the arrows hidden or visible so what does gonna do if we take arrows and we say let's see here display block because we did those were display hidden by default now it's gonna show them when I take display flex off that's what happens so that's why nothing was happening I was confused so now let's fix the arrows they're looking pretty bad here so let's get to right there so our arrows are too large so we need to do width of about 40 pixels and then also a cursor:pointer right now before I save it doesn't change the cursor so that's what that will do there we go now it's a little hand and then also margin 0.5 m units just to push it away from each other also our right class which is added on to this one specifically so we can change it we can do transform rotate z and in 180 degrees we'll flip it or at least I thought it would let's see here maybe I didn't add the right class in HTML let's see yep this needs to go right here now it's flipsie that's facing that way and this is facing that way okay now going back to our sass file our UL carousel we're gonna display flex now it's gonna have the debate behavior like I wanted to it's going to take those two and put them right next to each other no white space in the middle so we got to fix that so we're gonna say margin bottom first we'll do the zero to get rid of that our list items inside of it are gonna have a margin right of 1m units all right so when you do margin right on a list item it's gonna add it to both the n1 - so we need to fix that in a second but first let me get this margin bottom it's going to be zero and then also padding will be 2m units and then we will say an last child this will target the very last list item which is right here we're going to margin right zero there we go so now it's even all around alright so now what we're gonna do is reference our companies all right so just here we're gonna say display flex and this is going to make sure that all of them will be just on the same row there we go and then also justify content if I can type space between all right so remember we are zoomed up here's 100 percent here's a 110 or so and this is looking pretty good at this eye view port for that media query we're almost done actually but not quite now we're gonna target another media query at media min-width 853 pixels we're gonna say body is font size we add 18 in the previous music media query we're gonna make this 20 so watch what happens so now it jumps up from here to there alright and our stats we're gonna display flex and that just changes them a bit and and how they're rendered we're gonna do justify content space between so you save that it's gonna push them from the very left to the right and also get rid of any margin that we added like that nice then we're gonna take our companies we're gonna say grid template columns repeat for auto all right and we're also going to take our h1 element bump up the font size to 2.5 mm units all right so that just made it larger also our subtitle is going to be 1.2 m units so we've bumped that up a bit we're gonna take our h2 text-align:left it because right now it's centered before I say viously its centered so now it pushes it over and come down here and also we're gonna font size increase that to 2 m units so now it's larger all right we're gonna have V padding so we added that on the last wrapper so the padding for this I wanted to be 4 m units all around and our light purple wrapper which is this section right here we're going to say let's see here light purple wrapper it's gonna have a padding bottom of 4 M units so we're really pushing this down so that we can push this up and give us enough space that's not a close you know to this section right there then we're gonna take our move up class which is on the very last wrapper margin top negative 7 M units seem to work well and there we go moves all that stuff up all right the very last thing I'm gonna do we only have one more media query with just a couple rule sets at media min with 1200 what I'm gonna do now is add in the little dividers between these elements so we're gonna take our stats Li border right one pixel solid let me just paste in the RGB value here right there padding right will be 5% all right we don't want to won at the end so we'll stay and last child border:0 there and now we got rid of it and that's it all right so let's take a look at this specifically here and we'll look at I mobile here so this is our mobile view this is what it looks like on a phone for instance coming out here into a large phone small tablet everything's looking solid again when I'm doing this and pulling this out we want to make sure all of our UI design fundamentals are looking good because that's very important and then here we go let me get out left look at my head it's just growing and growing and growing uh that's a horrible picture by the way so yeah and this is basically it and quite close to I this right here maybe a little bit some differences in terms of font size font weight perhaps and also a little bit of spacing but for the most part this is quite close yeah I probably now that I look at it should increase the like if we get these side-by-side we could see that there's more white space here and again that's just a matter of defining a larger margins in between these elements but for the most part it is pretty pretty close all right I'll hopefully you enjoyed that if you're new to this process of HTML and CSS and front-end development and taking you know some place I come mock-up and translating it to HTML and CSS and trying to make it work in a browser it's tough at first you know it requires a lot of practice in order to develop the muscle memory and just the basic memory in and of itself to remember how to do all these various things and work with all the various HTML elements as well as the CSS property so don't get discouraged if you are like wow that is so crazy you start small you know this is more of like a robust project tomorrow start with a real simple project and of course there's a lot of great courses out there I have my own HTML CSS crash course for both 2020 and 2019 so look at those dudes channel search a lot of other people have stuff and just keep at it keep consistent it will come along alright make sure to subscribe if you haven't yet and I'll see you guys next time

Channel: DesignCourse

Views: 69,702

Keywords: html, css, html css, html css tutorial, html css course, html course, css course, html tutorial, css tutorial, html 2020, css 2020, html css 2020 tutorial, html css 2020 crash course, frontend development tutorial

Id: Ly6pm8UxZU4

Length: 54min 35sec (3275 seconds)

Published: Wed Mar 25 2020