The 2020 Frontend Developer Crash Course for Absolute Beginners

today you're gonna step into the role as a front-end developer for the very first time and create this right here this project using HTML CSS and JavaScript hey everyone what's up Gary Simon here so today is a very big day first its January 2nd of 2020 all new decade and I'm redoing my 2019 from the developer crash course and this time we have it for 2020 so very exciting indeed and basically this is going to assume this crash course is to assume that you have no knowledge of HTML CSS or JavaScript now we're not going to be getting very much at all into JavaScript at the very end I'll get your feet wet a tad bit but we are gonna be focusing on you know what the role of a front-end developer is and how you use HTML and CSS to make projects a reality in the browser and on your handheld devices using web technologies and that's essentially what it's all about as a front-end developer so I'm gonna show you right here this is the project again this is something that I designed myself as a you high UX designer and really we're gonna make it responsive which means it adapts based on the device width that's viewing it so this is like a mobile phone this is more like a tablet and then this is more like a desktop so I'm gonna show you exactly how to create this and this is really what a role of a front-end developer is so make sure to subscribe because in 2020 I'm gonna be doing a ton of awesome stuff in terms of UI UX in front-end development and yeah I leave a comment if you like this and let's get started before we begin the note makes it easy and affordable to host your website your portfolio your online store and more on whatever technology stack you use getting up and running is fast and easy with one-click app installs like WordPress and Drupal with back-end access to your server customization and scaling options are all but limitless if you just need something small like an online portfolio to showcase your work the node has you covered if you need to manage tons of clients websites and reliably serve them to millions of visitors blue node can do that too so sign up using the link below in the description to get $20 in credit on your new ala node account alright so the very first thing that you need to which code editor you're going to use now there's a lot of different coders that you can use to write your code your HTML CSS and JavaScript etc but the one that I use personally and a lot of other people use and you can't go wrong with it it's free is Visual Studio code so if you go to code Visual Studio comm this is the page you'll end up and then you can download it right here so download for Windows assuming you're on Windows or if you're in a different operating system you could choose Mac OS Linux as well all right so once you download that make sure you to install it and then we'll go ahead and create our project folder all right so after you've installed Visual Studio code we want to create a folder for a project so we're going to go ahead and open up your command line or your console and in Windows you do that just by hitting the Windows key and type in CMD and then enter and we want to create a folder all right so I'm going to type in MK der as in make directory and then the name of it for this we're just going to call this food it's kind of like just a fictional food business hit enter and it seems like nothing happened but it did create the folder and what we want to do is hop into that folder now CD food all right so next up we'll go ahead and launch Visual Studio code from right here within the console in the current folder so to do that and you have to have Visual Studio and code installed already type in code and period this will open up visual studio code alright so this is the basic layout of Visual Studio code and there's I could create a whole course just on using Visual Studio code as a code editor but really at this point I just want you to be familiar with just a couple things so over here there's kind of a taskbar or toolbar with different icons you're pretty much typically going to be working within this I first icon right here and if you go ahead to search this will allow you to search different areas of your files over here we have source control we're not going to worry about that in this course there's debugging not going to worry about that either and then there's also right here we have extensions or plugins we are going to install one plug-in and we might as well just do that now and that is I the live server you can see I already have it installed if you just type in live server you will have a green install button right here you want to click that once it installs it will reload Visual Studio code the app automatically and you will have live server enabled I will tell you exactly what this does once we get to that point here pretty shortly alright so we want to go back to this tab right here and we want to create a new file so right here in this section is where all of your project files are going to be outlined so we want to create a new index dot HTML file and we're specifically using index as the name for that HTML file because on modern web servers I if you upload it to like whatever comm I it's automatically going to look for a file called index.html by default so we quick click that create new AI file icon index.html hit enter alright so what happened is it just opened up this index.html file tab and you can see if I hit enter we have all these lines that are created so that's each line of your HTML file all right so let's go ahead and before I get to actually describing what hTML is I want to back up just a tad bit and show you what we're going to be creating and talk about a little bit about that process and and how a front-end developer fits into that process all right right here is an application called Adobe XD or Adobe experience design and it's a UI design prototyping tool and if you're a front-end developer and that is your sole job description and that's all you do then you will never really mess around with this in terms of trying to design your own layouts that's for the that's the job role of that is for a UI UX designer I what would generally happen for you as a front-end developer is a UI designer will hand you a mock-up of sorts like this or a prototype in this case it's a high fidelity prototype because I you can see everything is exactly outlined as we want it to look like in a browser or on a device of some sort and I for this application you can actually create different prototypes where they can animate and you can see how they're all connected and if I hit play for instance right here you can see we have this interesting animation that comes in as perhaps a a UI the UI UX team would want you to implement your job as a front-end developer is to take this and make it a reality on all devices and make sure it works on all devices you can also see over here we have sort of a mobile view of the same layout so typically in a real serious project you would have a design for each type of device that's out there so for here we have an iPhone xrx xmax sort of appearance eye we also have a desktop but really you might have several other device widths and viewport widths as they're called like maybe for tablets I - in that way it would instruct you as the front-end developer about exactly what the design and how the layout should behave across all these devices all right so we'll get into that when we get into responsive design with CSS so this is our goal we want to make this thing a reality through HTML and CSS now there's also something that you should be very familiar with or become familiar with and that is what's called mobile first design all right so the idea is when you're a front-end developer and you're writing out your HTML and your CSS I want to make sure you're operating under the mentality of mobile first all right so just to boil it down very simply when we go to create our HTML and especially the CSS we want to look at in the browser as we're working in developing with the help of that plug-in that we in the live server plug-in we want to make sure that we get it looking right on mobile first so that means when we're looking at it in the browser we're going to situate the browser in such a way that it looks like it's on an actual mobile device with all right and then we will progressively enhance it and we will then make it work for tablets and then also make it work and look well and look good for desktops ultimately all right so I want you to start thinking about this layout and in terms of blocks everything here is a block or container of some sort so if I get out this tool you don't have to follow along even if you don't have this app I just kind of want to demonstrate what I'm talking about I this right here just make this eye something that really sticks out quite well I will make this larger this is a block so that piece of text a logo that's a block all right this is a block this is a block that's a block and in a hole we can see how this whole blue section at the top how it contains all of this text that's a block as well and so when you're writing your HTML even then you have to think about all these elements as being blocks that have to define and have to be defined through HTML elements so let's go ahead back to our code editor and visual studio code and here's our index.html file so one side note it's it would be helpful if you can get to the point where you can have two monitors or one of those ultra wide monitors because it's very handy to be able to see while you're working in your code the actual mock-up I when you're writing out your HTML and CSS so you could situate it and structure it in such a way your windows to where perhaps your code editor is taking up most of the space right here and then your mock-up depending on you know which application they chose to use there's more than just I Adobe XD and figma and all that we could even just do this let's take this right here that way we can kind of see what the design looks like and then I can just drag this down and there we go so I suggest doing that this the same way if you just have a single monitor to work on and in that way you kind of see you know the type of HTML elements that you're gonna have to create in order to make this necessary so first of all kind of getting ahead of myself what exactly is HTML in and of itself HTML stands for hypertext markup language it is the standard markup language for building layouts and websites you build out HTML elements and their attributes which serve as the structure or the skeleton of your layouts so HTML without CSS though is usually quite ugly but it's required so you can't have flesh without the bones and you'll see what exactly I mean as we proceed so now that you know what hTML is we're going to start by here in Visual Studio code hitting shift and the exclamation point to create an excellent exclamation point and you can see it says right here Emmit abbreviation so in I Visual Studio code we have what are called abbreviations and really it's a good idea to use them as much as possible because what it helps you do is it creates boilerplate HTML and it makes your life easier so you don't have to create I HTML from scratch so if I click on it let me hit ctrl B to get rid of that sidebar so we can see everything that's happening here we can see that this is what it created for us if we had to type all this by default it would have taken quite a while but this is just your basic starting point for your HTML document so the very first line you can see here it says doctype HTML and this is this always has to be the very first line when you're declaring your HTML and so basically it's just instructing the browser that this is an HTML document next up we have our first actual tag which is the HTML tag now notice the HTML tag opens up with a little less than sign and then you have the element the element name in this case it's HTML you for the HTML element you're only going to have one of those I've and you really never have to around with it so basically everything else is nested inside of the HTML element because the HTML element closes at the very end so that will always be your very last line in your HTML document all right next up you have two very important HTML elements that are nested inside of the HTML element right here and that is your head as you can see the head tag opens up right here and closes so we have other HTML elements inside of the head tag and then also we have body we have the body tag and it's just empty right here so first before we get to the body which is where we're going to be working at for the most part I will talk about the head element and exactly you know what the purpose of the head element is the HTML head element contains various HTML elements inside of it these elements contain data about the HTML document itself so this includes information about the page title which shows up at the top of the browser character sets CSS Styles scripts and other information so most of your work does not usually take place in the head element okay so now that you know what the head element is and what you know essentially its purpose is for we're going to add an element in here before we get to the body section and so the HTML element that we want to add is called link and again we see an EM abbreviation show up here in visual studio code when we just type the name link and then this is the one that we want to use just link right here and you can see it says link rel equals stylesheet because we're going to be attaching a CSS document to this HTML element and this is for the future because we're not going to write any CSS yet we first went right over HTML first so the href is basically saying where is the location of the CSS file alright so we're gonna say CSS forward slash so that means we're going to store it inside of a folder and inside of that folder we're gonna call it main CSS so we'll save this and again we're not going to be writing if hit control B I to get out the sidebar when could be writing any CSS yet the HTML comes first the HTML is the skeleton and then once we have that skeleton we can start writing the CSS but for now I just want to get this linked up so we get it out of the way and we can also create that folder so if we click the new folder icon called CSS hit enter and then create with the my CSS folder selected already a new file inside of it called main CSS so now these two files are linked together the index dot HTML knows that it needs to look for the main CSS file for any of the CSS styling so we'll come back to CSS once we've got all the HTML ready so I'm gonna control B to get rid of that sidebar and the body tag the body tag is basically where you're going to spend 95% of your time as a front-end developer when you're working with HTML all of your tags will go here inside of this H inside of the body tag essentially so if I save this hit ctrl B get to get out the sidebar make sure you have that live server plug-in installed this is when we're going to use it I'm going to right click and choose open with live server so when we do that it opens up a web browser whichever your default web browser is my case this is Google Chrome and we can see it says at 127.0.0.1 : five five zero zero yours welp I say five five zero zero but basically this is just a temporary little web server I for you to look at what your projects going to look like in the browser alright so notice it says index.html as well so it's it's it's looking for that file specifically so as you can see it is completely blank because we have no HTML elements inside of the body tag so this whole white area right here only renders what is inside this body tag so if I just let me close these out if I just type in some characters here and hit save it's gonna show a SD you know whatever I type right here alright so that's a very important concept that's before a beginner to understand that all of your stuff that you write in here in your HTML document is primarily going to be within the body tags now before we actually begin writing HTML because this is a crash course meaning we're not going to cover every single thing that has to do with HTML CSS and JavaScript that would be a million hours long I I wanted to point out the w3 schools dot-com forward slash HTML website where if you really and if you're really interested in front of develop in the learning HTML you should definitely check out this resource for you because it tells you all about HTML here the the introduction HTML elements which we'll talk about attributes but I'm not going to be going over every single thing that you see here so I just wanted to let you know there's of course there's a ton of other resources from which you can learn all about more in depth and in terms of HTML but what I do too when I am gonna teach you here will allow you to create obviously the project that we're going to create but again you're you're probably gonna walk away from this little crash course you know quite you know disoriented because they're giving you so much information so if you it's something that you like definitely check this resource out and others okay so we have our blank document here and we want to get to this right here all right how do we start how do we even begin thinking about this alright so like I said before a little bit a little bit ago think of everything in terms of blocks alright I if we're looking at this high fidelity mock-up what would be the first block that we should start for or start in with our HTML to help define the skeleton structure of this layout what I would say the very first element is actually this photograph that we see over here so if I expand this just a bit we'll see we have this large photograph and this is really the first element that we should consider it's this entire block as outlined in this section right here okay so let's create the HTML element for that alright so which element will be used now there's in terms of i8 tml everything our HTML elements in there's a ton of them and I'm not going to cover them all but for this particular element I'm going to just use what's called a div now a div is arguably one of the most common HTML elements out there and it really is just a way to define a section or an area of your layout if that makes sense so to get started let's go back here I'm going to get this into view by the way so we want to set this up by the way before we start so that we can see what it looks like on a mobile first view so all right this right here would be more of like a desktop right this might be a tablet there's a couple of different ways to do this by the way so you can do this on Chrome or Firefox you hit control shift I will see this dev tools section come up and if we click on this element toggle device toolbar we can see it's showing us what this HTML document look like looks like on an iPhone X or we could change it to something else like an iPad and so this is one great way to see what it will look like on specific devices but you don't necessarily have to use this this the device toolbar or preview you can just take the side of the edge of the browser and just kind of get it into a rough phone shape like this if that makes sense so we want to create that first block which has that I the the image inside of it which is kind of like the oranges and it's a blue and also all the other content that is inside that's sitting on top of that image so again going back to our document here I'm talking about all this content right here like the logo the headlines and then the little description and even this whole form right here so let's create that so we create our HTML div tag or development we can just type type in div like that if we want and hit enter here individual studio code or we could if it has what's called a class attached to it and this is another Emmet abbreviation we can type in period and then the name of the class hero BG so when we do that and hit enter this is the code it provides us so you're probably wondering what is class equals and then this hero BG alright so this class here is called an attribute now most HTML elements are able to have attributes on them certainly for one called class I and you add them just within side of the grader in I the less than less than and greater than signs and then you have your first is the element name or the tag name this is div and then you could put your attributes so this is an attribute and the attribute happens to be class and then it says equals and then inside of here we have in quotation marks the name of the class I'm choosing to name it hero - BG I and I'm choosing a name at that because - bheegi bheegi is just short for background and then hero sometimes the top portion of a website is referred to as like the hero section so you're probably wondering what's the purpose of that though what is the purpose of this class well when we get into CSS I'm going to use CSS to reference this div element I and I will place in that background image and also do some other stylings so you will see classes all the time and of course there's a lot of other attributes but for now we're just gonna leave it at our class and then we'll tackle them as they come on through so now we've defined a block right here and if I say hit save and of course I got rid of that text here it's still invisible we don't see anything now if I bring out this browser and hit ctrl shift I to get the dev tools once again we click on elements and let me drag this down we can see all the HTML that the browser sees right here and if we hover over certain areas certain HTML elements and tags we'll see that certain things happen over here so we can see our body tag and then we have our div class hero now it's not shown because by default divs that the browser doesn't style it in any way that you can see it it's just kind of an empty thing until you actually use CSS to give it some sort of style like giving it a background and give it a height so I just wanted to outline that then and let you know that you can actually use I the dev tools in control shift I and to see what's happening I in relation to where you're hovering out over here and it can really help you and also you can actually write CSS in here down here but we'll get to that later on alright so next up we have to refer back to our high fidelity mock-up let me close this and we'll go back to our mock-up here I'm using Adobe XD and let's see what we have going here so next up we see we have this yummy eats this is a logo alright most websites and landing pages are going to have a logo that you have to create so what I'm going to do is before we tackle the logo I'm going to use a semantic element it's a semantic HTML element as they're called and we're going to define everything here inside of a section as in there's a section tag so I'm going to type in section and we're gonna have two sections so if you look at our mock-up here we have two sections if you look at this design as a whole so we have this section up here and then you also we have another section down here so I'm going to define both of those inside of two sections and later on down the line when they get to the CSS I want to be able to style each section a little bit differently from each other so I'm going to give it a class so the class of this I'm just gonna call this top again you can name these pretty much anything that you want alright and again we will have another section so I'm just gonna section and hit enter down beneath and I'll just leave that empty for now and again if we save it we still see nothing because we haven't styled these at all all right so after that we're going to tackle that header section with the logo now another semantic eye element would be another el HTML element called header alright so inside your header you typically find two things you find the branding or the logo and you also find like a menu or navigation I'm choosing to leave the menu navigation out so we're just gonna have a logo here so I'm gonna I'm gonna put in the logo sometimes if the logo is an image you'll use an image tag but this is just a type based logo so we just want it clickable though so people click on it'll take them back to the homepage so the way you do that if you ever want a link as it's called you use the a tag so hit a enter and then href equals very similar to up here to this attribute this is an attribute we don't have anywhere for them to go so I'm just going to put in a hash tag and that'll take them just wherever the current page is it won't really do anything then we're gonna put in yummy eats alright so this right here is the anchor text this what is will show up in the link now if I save this now we're gonna see that we're gonna see the classic blue underlined link if you click on it it doesn't take them anywhere as you can see all right so now we actually have our first element that's visible I that we can see on this design very exciting stuff isn't it so now we have to ask yourself what's next alright you know I mentioned before if you wanted to have a navigation of some sort hit ctrl B get rid of that sidebar I we would normally use a semantic tag called nav ul for unordered list and then something inside of the unordered list we'd have Li which is a list item we'd have an a for a tag which is clickable and then we'd have like home and then we do like about services you know whatever navigation you want your website to have of course it looks really ugly right now because there's no styling but I just wanted to point it out that that is usually the pattern for where you would have a navigation but I'm going to delete all that so now what we're gonna do is ask ourselves what is next reading from top to left I I mean from top top to bottom left to right so we got our yummy eats we already have that that element created for the skeleton version it doesn't look like this yet because we haven't got to the CSS next element looks like this right the healthy eating experience which is basically the headline of this website and that's a very common element as well that you'll find in most website designs and apps and all that so we have a headline here so let's go ahead and create that so we need to create the HTML for that and when it comes to type based elements like this like text that people read there are several different types of tags to use depending on the context and what you're trying what the text is and what it's doing in the design for us this is a headline so we use what's called a heading a heading tag and there's six of them and usually it's the order of importance so h1 is really designated for being the most important element I on your page and usually that's a heading or like a article title or something like that so we hit h1 and then we're gonna put in the healthy eating experience the healthy eating experience right so if we save this we can see our heading right here now there's one thing that's a little tricky here if I go over to our prototype we'll see it says the healthy and it's styled differently it's all uppercase and it has this little blue element like like a little underline like offset right here and it just looks quite a bit different from this text right well that's the job of CSS and in order to let the CSS know once we get to that point that this is should be styled differently than this text we're gonna put in a certain HTML tag just around the healthy and a good tag for that is span so if I put in a span and we we open it up right here and then we end it around the other text we can save nothing changes but now we're gonna have access through CSS to say I span we want to give this a certain rule set so you'll see and you'll understand how that works as we go through and in fact if I get out once again the dev tools for the control shift I and we use this little clicky thing this this icon right here will allow you to click on something and it'll take you right there because once the HTML we come across a lot of tags it's a little bit difficult to find things otherwise so we can see our HOH one element and you can see this little arrow next to it if we toggle that down we'll see it says the span there's that block that block that we can now or later on in CSS we can target that specifically and make the necessary adjustments through your CSS properties and values to make it interesting looking and more like it does on that prototype so what's next after this so next up after this we have a paragraph right here paragraph is very simple we're just gonna stay under here underneath the h1 and outside of it P and that's it it's just a simple P tag or a paragraph tag and inside of here is where your text goes so there's another I plug-in that you can get called lorem ipsum and it's just basically Latin filler and so you'll see this sometimes in prototypes that UI design or UI UX designers create you'll see lorem ipsum text it's it looks like this strange text and you don't know understand what it is or what it means but it just means they didn't have the ad copy at the time like the real ad copy so we're just gonna put this in there instead so I you can you actually get a plug-in called lorem ipsum in the extensions and it'll allow you to type something like lorem and then how many characters or words you want to have so if warm 20 will give us if I hit enter that will give us 20 characters oval this just random lorem ipsum text all right so next up I'm if we save it by the way you'll see it right here so this is what a design looks like so far without CSS it looks nothing like our prototype and that's expected so now what's up after this so if we come over to our XD document we'll see we have this container right here now of course if we don't have our over room I don't select it in Adobe XD it's just this block and that's what we want I so we have to create the HTM market for that and then all the stuff inside of it like the form so to create that element we could use a div tag alright so again we use the div tag once already we're going to use another one for that form container the white section and then all the stuff inside of it so form so remember you create a class a div class by just typing in period and then the name of the class that you want to name it something that makes sense so we'll just say form container hit enter and then we'll hit enter again and then we could start writing our HTML inside of it all right again if we save it we don't see anything because remember it's empty div tag therefore there's no styling applied to it because we haven't done any and CSS so next up this whole thing over here is a form right this is a form element we have a label we have a text area where people will be able to type in things like a city and then a form button so we want to wrap everything inside of a form element so I'm gonna type in form in action equals basically that means where are we going to submit the form information like when the users filled out the city where is it going to go for the purpose of this crash course we're not going to worry about the action or and submitting it because that goes outside of our scope as a front-end developer usually all right so all we're gonna do is just open this form up and then inside of it we're going to put in two different things and this is where it can kind of get tricky but initially I'm not I'm not going to cover the tricky part but we will eventually simply because we have to make sure everything lines up and works for the desktop and not just the mobile version as well so we have our label that's the next thing that we're going to put so if we get out here it's just this label now when it comes to form elements we don't want to use a paragraph we have an actual tag that we use for it called label so hit label and we have an attribute called four and by the way if you hover over these it's gonna tell you it's gonna give it a visual studio code will give you information about you know what this is so just to describe what it is though when you have I every label on a form element is in reference to some sort of form control or input in this case it's a text field that people put a city in right so we just have to designate you know which label this is in reference to or which input so we're gonna call it City and then inside of label actually outside of label because sometimes you can put in the input the next element inside I'm choosing not to we're gonna put in the actual eye input text field so if I type an input and hit enter we see it says type UCLES text there's this attribute of type allows you to specify a whole different types of input fields like a text area for instance which is like a bigger larger multi-line text field for us we just want input type equals text and it's also I you usually want to put in a name attribute so we're gonna give it a name a city as well in an ID of city the ID name right here is and what what this for value is in reference to alright so if you name this city 3 or city 4 or whatever this one should be named city 3 or 4 so let's hit save right here and see what's happened so far and right now our label we forgot I forgot rather to put in the actual label which is enter your city so let's save that and we can see it says enter your city so I can now type into this you know my city like you just saw here Warren that's where I live Warren now of course it looks nothing at all like what we have here right again that's the magic of CSS once we get to that part so you can see also that says example San Diego let's go ahead and put that in so we're just going to use a paragraph for that example San Diego alright we'll save that you'll see it shows up right there and then after that we're going to put in a button alright so we'll say input this time the type is a button we can click on it right there and then the value is what the text inside of the button is in our case it's fine food now right there so we're just going to type and find food now there's our button so as you can see for some HTML elements the browser will style it it doesn't just look like text obviously it knows this is a button so it's gonna make it look like a button but CSS with CSS we can change it to look like anything practically especially this button just big old orange button right here alright so we'll save that and just so I can get it out of the way the remember what I was just talking about something that's kind of tricky well if we look at our our desktop version or first if we look at this we can see that everything is stacked on top of each other in their own rows we have a one two three four different rows and rows or vertical columns are our vertical no rows are horizontal and columns are vertical I but when we get over here you can see that enter your city in this text field and in this little text blip is on its own column so there's two columns here there's a column here with this content and then they're this button is its own column so we need to think about how to structure that stuff while we're still where we're looking at our HTML and we're looking at the mobile version we have to think about the the the larger versions and the other iterations of the design so that we can properly markup our HTML or create the the right HTML elements and structure correct correctly so as it stands right now we have these four elements but we need a way for the CSS to easily put to create two columns once we get to the desktop version in responsive design I know I'm confusing you right now but it's just the best way that I can think of describing it but stick with me and you should have a pretty good idea so what we want to do is wrap these three elements inside of its own div all right so I'll type in form left so that creates a div class love the name form left which will reference in CSS later and we're going to close it and in case these elements right here so if I just took all of them and hit tab to tab them in so it's easier to read and there we go now in our form element we have essentially two siblings or two children div class of form left and then input this button right here so if I save it it's not going to float them left and right of each other because we haven't yet structured that CSS but once we get to that part in CSS for desktop I responsive design will be able to say hey take form left push it over to the left and then take this input button and push it over to the right so hopefully you understand that at least a little bit at this point all right so we've already done most of the HTML believe it or not just this tiny amount of stuff accounts for most of the HTML now then the rest that we need to worry about let's come back to our mobile version is just this so we have essentially what are just two elements we have the heading and then we have a couple paragraphs all right so it's three elements really so when we come down here we can see all this crazy stuff all these closing div tags I know it's quite difficult to get a grip on exactly what's happening here but that's usually what ends up happening you know once you start writing element by element I and then you take a step back and look at all the code it could be a little bit overwhelming but don't worry about that I did screw something up though I we want to structure this a little bit differently I put section tags right here really we want this to end entirely I and so we can see we have our div class our very first div inside of our body tag or a very first element is a div of class of hero and then it ends right here if we look at our structure our div class of hero background which is really just this this blue background with the ice and you know the oranges it ends it is this entire section right here alright so that's it ends right here in the HTML as well so then we can start writing our other HTML outside of all of the the this last closing div tag which is in relation and you can see the line that Visual Studio code shows it goes straight up and points to this element right here alright so by the way you can also collapse these if you hover over on next to the code the line number I in that way you can kind of condense things if you don't need to see them so I'm gonna expand it anyhow and we're just gonna come out right here and again by the way you could put your HTML real close together you could space it out it's not a big deal it'll still work so I'm going to tab in here and what we're gonna do now is we're gonna put in another section like I mentioned before this section is going to have a class as well so section and this time we could put a period and the class name and that's an abbreviation and it will allow us to negate having to type all that out by hand so the name of this I want it to be authentic only because the ad copy was I I think I had authentic in the name yeah authentic and wholesome ok so this is our authentic section alright so inside of here this is another one of those areas where we you know when you're trying to figure out your HTML structure always look not just at your mobile design here when that's this is easy because everything's stacked on top of each other generally because it's easier for people to use but you just you want to look at your other variations that a ui/ux developed designer has given you so in our case we have this desktop and we can see if we come down here I while on this version we just see this right here I am going to include this and at the bottom here but I don't I don't I didn't have it on this exact demo but it should be here at the bottom like a picture at the bottom right there I they're stacked on top of each other but on this version we can see that there are two columns right here and right here so we have to think about that so how are we going to structure this HTML to accommodate that well I'm gonna put in first because in on the mobile version we want the ad copy or like the where it says authentic and wholesome we want that to be on top so we're gonna put in we're going to encase both of those all those type based elements inside of a single div wrapper as it's called our div element or div tag and that would be we're going to call that we'll call this right call for column all right and then we're going to put in h2 remember I mentioned if we put an H you can see all the headers H one through six we already used h2 one you can use h1 multiple times but in terms of importance this is not as important we'll just put h2 and I'm going to put in an authentic and awesome okay next up we have our two paragraphs of text I think I'm just going to use one paragraph though I'm just gonna copy that in off the side of the screen and my reference monitor and it's just a paragraph so hit P enter and then that lorem ipsum probably about I don't know 20 characters alright and that's it for that section so we have this element so that's our one of our columns and then we have what's going to be an image of that bowl of food or something so we're gonna use an image tag this time so image and source let me hit control B we've got our sidebar we don't yet have it here but this is the source of the image like where is it located we're gonna say inside of an images folder and it's going to be called food jpg and by the way you can download the asset files and all the files for this and they're all accessible as well and github so you can see all the code and I think code pen as well alright so you can have access to the these project files that we're going to be using so this is the location of the actual folder and I'm gonna put in a new folder called images so we're going to create that and inside of images we're gonna put in I those asset the resource file so go ahead and download that and it's a zip file and you're gonna see two of the food images that we have and so put those inside of this images folder now as you can see here's those two images we can just drag them right over on top of images and that's one way to get them in there of course there's other ways depending on your operating system and what you're used to so there's those images you can see it just showed up right over here you can see it's really large and we'll deal with that with CSS to get that you know more situated as it needs to be if you're using an image by the way we can see that I has this alt tag right here and that's basically for accessibility purposes you always want to have an alt tag with your images all right so the alt I'm gonna say this is just a picture of food in a bowl okay there we go now way people who don't have perhaps or using screen readers because they're blind this will actually inform them through audio through a voice audio kind of like I you know the Google home or Alexa voice um you know what this actually is alright so you may be wondering maybe not but I'm gonna mention it anyways we have two images in here right I mean we have this big image there's a photograph of some food but this is a photograph as well but I didn't use an image tag for here you know why didn't I do that well in this case you can use CSS to reference photographs as well and we haven't gotten yet to the to the CSS part but I chose to make this a background because we have a bunch of stuff on top of it all this type based element right so it's generally easier just to use CSS to make it a background image as opposed to using an image tag in the HTML hopefully that makes sense my dogs barking hopefully can hear that so it right here this is just a standard image I in nothing's overlapping it we can just use an image tag in HTML to show it okay so that is it for the actual HTML that's all that we need in order to create the skeleton if you will I for this design right here in both the desktop version and this version so all the magic and all the beautification comes into play when we get to the CSS CSS stands for cascading style sheets and it's what you use to style your HTML elements you can control the layout structure colors typography alignment animations and even more and CSS consists of roll sets selectors properties and values and you'll see how all this works in a second okay so let's get to the CSS here you can see we're gonna write all of our CSS in the main CSS filed now here's the thing you can actually write CSS inside of an HTML document and it's worth just showing you this even though we're not gonna do it and I'm gonna tell you why we're not gonna do it in a second but you can write inside of the head section right here your CSS rule sets and you probably only know what a CSS rule said it is but don't worry I'm gonna show you and tell you in a second but if you put in a style tag right here you can actually write your CSS all the CSS code that we're about to write here can go inside of these tags but I'm choosing to put it in its own file because it just makes it much more organized to read so we're separating these different concerns this is our HTML document so we're only gonna leave HTML in there and then for our CSS we're going to put in our CSS inside of the CSS file that's just to let you know by the way you can even put CSS specifically using a style tag on each of your HTML elements right here so you can do that with style Eagles and then you put your CSS property values like background and then we say white or whatever so you can actually do inline CSS as well I thought that was worth mentioning we're not going to do it though so our CSS like I mentioned is going inside our main CSS file and if course right now at this point is blank so the first thing I want to do or I like to do is to import any custom fonts that we're going to be using if you look at this we can see that this font is a lot different than this font up here this is that ugly Times New Roman fine it's a serif font this right here is a sans-serif font doesn't have all that extra stuff hanging off the end of the type that in letters and such in this particular font as you can see it's called montserrat a lot of my channel regulars know I just love Montserrat I have it installed on my system so that's what I'm a lot of other people who watch my channel watch I just like to find so we need this font we need to tell the CSS document that we want to use this font for our type so you do that in your CSS file although you can also do it in the HTML file and I'll show you how I'll show you both ways in a second so we want to get our font up and a great resource for fonts that you can use on your websites in your apps and such is fonts Google calm fonts Google and there are tons of fonts that you can search from so you can type something in like authentic awesome like we had before or no wholesome what am I talking about all right and you can see a preview of each font right here and these are all fonts you can use on your website now I know the name of mine already and that's Montserrat the font that I want to use so it shows up right here I'm going to click this little plus icon and then come down here says one family selected we'll click on that and then we could see some options here now notice it says load time fast well if I were to come over here to customize and add in these different weights because each each font has a certain amount of weights in terms of being thin or bold I and R as well as being italicized if we start adding in a bunch of these you can see load time moderate so each font it takes time for the device to download in that time the other depends on their connection speed and you know are they on like 3G or and they have 5g or whatever or on a cable connection so load time that means the more variations of your font and more weights that you add the longer it takes alright so for me I'm just gonna have regular 400 and then fold 700 usually the UI UX designer they'll tell you which fonts you need to use alright so once you've you know customized it now we can import it either the standard method with this is the HTML method so if we took this right here we're not going to do this method so you don't have to follow we go back to our HTML document inside of the head tag we can put in we can paste in that element right there that means that this is one way that we can get our font ready for use we're not going to do that just because I like kind of putting it through the import method which is right here if we click on this tab we don't have to put this style we'd have to include that because it that would that would be if we were putting our HTML inside of the head pops like I showed you earlier we just need this import line right there so we copy that paste it in and there we go so now we have our font you know I'm gonna come out here and put some lines and our fonts ready to be used now it's not it's not gonna change it just yet because if we go back to our preview which is not there it is right here you see it's still the other font right well we have to instruct the CSS to use this new font that we just imported all right so to do that and it actually shows you right here if we go back it'll say specify in CSS font family this is the property that we want to use and we'll just copy it we're going to type in the body tag so here's our selector it's the body element and again we go back we'll see we have body right here so whenever you want to change your font that you're using on your website I you can do it at the body level because it'll affect all the type so body we open up here for the the property declarations and we're going to specify our first property that'll allow us to change the font and it give it gave it to us right here I told you to copy it the property name is font family and the value is Montserrat which is a right relation to this imported font up here and then the font family property of course it allows you to specify different fallbacks if for whatever reason they can't download this it'll just tell their system to use a sans serif font which is a font that's more clean and it doesn't have the little things hanging off the side of the the letters and such so if we save this now let's let's get this up before I save it so I can show you once I save it is now using that new font very exciting isn't it so now we're closer now to actually getting this thing looking more like our prototype alright so we can also see I there's a little bit of whitespace going around this entire thing so if I hit ctrl shift I and I choose this little selector we hover over certain elements up if we hover over body over here in the elements section you can see this orange outline around the sides and that's because by default the browser has added a margin of 8 pixels around the body element so this is something that you will always encounter because of the the it's just a design choice that the browser's have made to add a little bit of part margin or white space or negative space and you I in UX design SS called around and just in case everything so not everything is right up against the side of the browser because it looks not great but for me I'm gonna choose to get rid of that entirely and the way we'll do that is to put in the margin pretty and zero save it and there we go everything is up against the browser but of course ours doesn't look like that and the prototype but I simply want to be able to handle the browser padding myself so that's why I'm resetting to zero I do that on most projects in the body element as we've seen and the body ruleset rather as we've seen here alright so that's all I'm gonna do for the body element so next up what is the first HTML element that we want to use well we have div class of hero BG well let's we might as well do that right the way we reference a class here in CSS we notice that says div class right here so we have to choose the selector the selector here is called a hero - BG and it's a class so whenever you're dealing with a selector that's based on a class you put a period first and then the name oops I thought I had that in my thing no I don't hero - BG is the name then we're gonna open it up for our properties and then here's where we're gonna give our property so you always have to ask yourself alright now we have a roll set ready we're ready to go in our CSS so that we can begin to style this div class hero section and we can also refer back to our prototype to see you know what changes should I make alright so again the block here happens to be from here down to here at the very end well we know we need to use that tag the hero BG tag to get in this this image so let's do that we're gonna use a background property in CSS so background and we'll say first the background property is really flexible there's a lot of background specific properties for instance if you knew you didn't want to use a background image you could use instead background - color and then the name of the color for us we know that we want to use both an image and possibly a color as well and so what I mean by that is you can specify in your CSS background property both a color and an image so for us just to show you if we want to use just a flat color like this over here let's go ahead we can use this now if you don't have Adobe XD and to follow them that's okay but this is going to give us the color code right here so I'm gonna copy that and let's see here actually I have a different color code that I used before that I know is the one that works and it's right there and then we're gonna end with a semicolon and we're gonna save soon as I save that we can see the background now is this color but we also want an image so to do that we take off the - color at the end and we're going to put in URL right after our color value and we're going to put in parenthesis and we're gonna put in the location of that file the location is inside of the images folder and it's going to be called BG for background dot jpg so in order to get us there because we're already inside a different folder we have to hop out so we put two periods and then a forward slash and then the name of the folder that we want to go into which is images and then the name of the file is which is BG jpg so if we save this at this point we don't see it but now we do you can see it's like really big and large we don't have to really worry about that inin sizing it up yet but we'll get to that once this container has been pushed down a little bit more once we start making changes but all that matters is we know that image is there and it's gonna work okay so next up let's go ahead and we're going to put in let's see here I we do know all of the colors of the fonts and the type are white inside of this section right here along with the logo so we're just gonna say color white so color is the property you use to change I type based I elements such as paragraph elements and a bunch of others that's the way you change their color so you notice it's now after we saved it everything here is white all right now also what else do we want to do well we do notice on the this version all the text is left-aligned currently it's all left aligned right on our browser inside of here we want this all to be Center or less centered essentially so what we can do there's another element we can use for CSS and that is text align text - align and then Center so now if we save this it's all centered so as you can see things are starting to move along even though they're still pretty far away now we also notice referring back to our prototype that there seems to be a fair amount of white space between these elements yet over here they're all kind of crunched up there's also a lot of space like underneath this container and the button like a lot of things still look quite different but we can add in I some other property um we're gonna do padding so padding is like margin which we've already discussed margin affects the outside of a element or a roll set or a container or whatever and padding is the opposite it affects inside of an element the amount of white space so I could put padding and then we can put like four am don't worry if you don't know MS I'll let you know in a second but you can see padding effects adds four am on all corners so when we hover over our div class hero BG section over here in the HTML you can see this this green overlay that's your padding and say when you add just padding itself it will add padding like for for e/m for instance it adds it on the top left right and bottom if you only want it on a certain direction though you can put a padding top left right or bottom you can see them all right here so we're going to choose to padding bottom and I'm choosing a value of 4 with a this e/m unit and so what this does I there's a lot of different units in CSS and they fall into other two categories being either a absolute unit or absolute value or a relative unit so an absolute value would be like pixels for instance so you've probably heard of pixels before but in terms of responsive design and how designs these days are very fluid there's a lot of different sizes of devices that view your design like from a phone to a big desktop you want whenever possible you want to use relative units and there's a bunch of different relative units but for padding in margin I for the margin values I recommend using the e/m unit and it's a flexible unit as you'll see when we get into responsive design so I'm just choosing for em4 padding-bottom so you can see this is if we hover over this now you'll see that green area is just for e/m units right there and you're gonna play with this I could do this like like 20 a.m. you'll see that really push things down so it's just a way to add white space or negative space or empty space to your designs so for me for am right here works pretty well and that's really just in relation to the bottom at the inside of this part because I want to be able to see some of this I orange part right here so let's continue on of course we have a lot of stuff up here still to do as well so let's also do our logo so our logos like up here in spoking purple and ugly that's not supposed that's not what it's supposed to look like it's supposed to look like this all right so let's I let's get that going first of all now if we look at the mark for this HTM markup as its called we have section class top we have header and then we have our actual logo so the header if we look up here there's hardly any whitespace it's right up against the top of the browser but that's not what it's supposed to look like right here this is the top of the device and then it's down here so we're gonna we're going to reference our header element here so we're gonna say header and we're gonna put in padding again so I'm going to put padding and padding is shorthand SiC property because you can actually put in multiple values inside of your padding element and it works like a clock it's top right bottom left and so if I put in for instance 1 a.m. and then 5 a.m. that means 1 a.m. on the top 5 a.m. on the right I don't know 3 a.m. on the bottom and then like 10 a.m. on the left we'll see when we hover over this heading section right here or the header section how it affects that the overall layout we're not going to use this but I wanted to let you know that you can actually do that you could do that from margin as well now what's really cool is there's a third way you can I specify your padding and margin values let's say for instance I only want padding on the top and bottom well I could put 1 a.m. here and then I know I want no padding on the right and left because it's centered anyways I just put 0 there so now it's created padding on the top and bottom of 1 a.m. units so now we've pushed it away 1 en units on the top and bottom now what else this looks pretty bad it's like it's purple ugly default color it's purple color that the browser gives links remember it was like a href right here so let's overwrite that to make it look much better or more consistent with what it was in the the prototype so what we'll do is we'll put in I let's see here Oh - B G a now this is a little strange because I'm referencing both a class and an HTML element selector together why would I do that why wouldn't I just put in a which is right here because we can use remember we can use actual elements right here as selectors like h 1p section div so why would I just put this why wouldn't I just put a for instance right well if I had multiple links somewhere else in here then whatever change I make here will be made to every single instance of the a tag that's located throughout here I don't really know I don't think I have any other ones here but I wanted to demonstrate the importance of this I want to specify that I only want to change the information or any or any links these elements that show up within this entire section right here this entire section here obg is this dark blue color right so I want to make those links white that's my that's that's what the I the prototype has right this is white this is a link it's going to be white so that's what we're going to do so the way to do that is to say I here obg any so here a BG class and any of the links inside of there larger the HTML elements in this case it's an a tag we want to specify the following style so hopefully that makes sense we want the color to be white so let's go ahead and get this rid of that so I want you to see the changes that I make in real time here so we want the color to be white so you can see it changed it to white and by the way individual studio code if you hover over a color value right here you can actually change with this handy little tool so you don't you don't have to sit there screwing around with different things notice I said white you can choose like just there's a lot of CSS color values you can do a google search for what they allow you know what all of them are there's a lot of different ways to specify color in CSS you could do an RGB function where you're specifying the red I'm and blue values there's bunch of other functions for getting CSS in here you can do RGB age to where you can also specify an alpha to make it transparent but for now we're just gonna say white what else did we want to do to make this look more like this all right well it looks like this isn't bold and this also has a text underline this one doesn't let's fix that so we can do text-decoration:none there goes our underlying we want to do font-weight:bold alright so that's how you make the font that's how you change the font weight up if you could also notice that remember if we when we imported the font we said 400 and 700 these are weights as well and we could have specified the bolder 700 right here instead if they're saying bold but it knows it's smart enough to know that we're referring to the heavier weight that's included all right also I want it to be a little bit larger so font size and then we're going to say 1.2 and we're going to use something similar to an EM unit but we're gonna use I what's called a REM unit for this so for your text when your font sizes it's better to use REM units and this is all specific to responsive and flexible design and then for your margin and padding you want to use e/m units or m units okay so this is looking pretty good right here I'm gonna leave that and now we're gonna go on move on to our next part now I'm gonna back up just a tad bit we did have a section element that we haven't adjusted and there's one thing that I want to do for that so if I go back here we specify section all right and I'm going to put in here we want to have margin on the left and right because everything's right up against the browser remember we took off that 8 pixels at the bottom that the the body tag gave well what we're gonna do is put in margin 0 and 1 a.m. so 0 on the top and bottom but on the right and left we want 1 a.m. or 1 M units right here so notice how it pushed it over all right very very cool all right so now what is next so let's reference our h1 element because if we look in our HTML we'll see we have after header which we've already dealt with we have our h1 element our h1 element is supposed to look like this in the browser and you can see it doesn't really quite look like that just yet so let's go ahead and specify h1 and we're going to say font size we need to make this sucker bigger so 2.5 REM units alright so remember the healthy needs to be smaller upper case and on its own line alright so before we get to that part let's push this thing down a little bit give it more white space with the use of margin so margin on the top we want to e/m units or so on the right we don't want any but the bottom we could say to e/m units that pushes it down this way but I think it pushes it down a little bit too far so to override this to e M that's giving on a top and bottom remember it's top right and then bottom right here we'll put like 1.2 a.m. there so it came up just a little bit awesome now what about the span element member in our HTML markup we have h1 span for the healthy so what we're gonna do is they're going to say just in case I have any other span L elements I'm gonna say h1 span that means anything inside of span or h1 that has a span element we're gonna give this property are these CSS properties and values so we're gonna say first text transform upper case and by the way you can put these properties in any order so bar just could be on top up there it doesn't matter so we've made it upper case because again we need it to look like this that right there but there's a little underlined as well we also need it to be a display block that means it's going to be on its own line nothing will float to the left or right of it next up we need font size we want to be smaller because it looks definitely smaller in here compared to this type so font size I'm going to put in 1.5 REM units there we go that looks better and we're also going to do we're going to add a couple other things that aren't going to make sense in a second what we want to do is add this little underlying graphic it's a custom graphic in order to get I yeah right here so there's a little blue section in order to get that we have to use a different rule set right here so h1 span we're going to put two colons right here now this is more intermediate CSS so this is going to be confusing don't let it just discourage you I just wanted to include a little bit of everything in here we're gonna say before alright there's an after and before that you can use on HTML elements and it's just basically kind of like this empty area that you don't see here by default but if you give it style you can actually do interesting graphical things like an underline in that unique fashion so our custom underline the way we do this we're going to put in a few necessary rule sets or properties that are going to be kind of confusing content is going to be empty and we're going to have position absolute in position absolute you can add that to any element and it allows you to break outside of the traditional box model and you can situate things anywhere essentially and we kind of need to do that with our underline cuz it's kind of behind I an overlap or under lapping the healthy text up there so position:absolute width:0 color is this blue color right here 0 0 B FFF and also our height it's going to be 0.4 am units if I save this we could see it right there right now this is not exactly where we want it bottom we're gonna say is 0 now it just disappears because it went to the very bottom of the browser to fix that we're gonna set position:relative right here there it goes so you nee have I this is kind of like one of those I guess you could call ingredients or patterns that you can use whenever you're trying to position an absolute element and you want it to be relative though to its parent container or to itself as a span element so I know that sounds very confusing but again don't let it discourage you once you start working with this stuff enough it'll all start to click so also notice how the over the the line this underscore is on top of the healthy when in here it's behind it so what we can do we have another property called z-index I'm going to put one on here and then this z-index I'll just put negative one and there it goes we could see it behind but now we need to position a little bit because in our version over here it's kind of off to the side so let's go ahead and take let's see here a margin and we can do margin - left because we know that's the only I know that that's the only value I want to use negative 0.3 eeehm so yes you can do negative values with most CSS properties so notice how it pushed it over so I can make this big time like negative 3m and it's gonna be all the way over there so it just allows you to position and create your graphics like that alright so that's it for that section this is looking pretty good if we compare it just this upper section to this right here okay so now let's continue on what is the next part well we have this which is looking pretty decent I think we're going to make a slight adjustment to it though so it's this paragraph right here but I only want to it to affect this paragraph and not the paragraph down here so instead of just doing P and opening it up like this we're going to do and ed dot Hiro BG P all right so it says any this means any paragraph elements that's inside of this parent container right here alright so what we'll do for this is we're gonna say font-weight we're gonna make it bold so notice now it's bold alright I'm also going to give it some margin because we need to push it around a little bit so margin zero because on the top it has good margin already or padding or a right weight space rather on the right let's see we're gonna say 1 a.m. and then 3 a.m. on the bottom to push this stuff down alright there we go so on 1 a.m. this is in reference to the left and the right so it pushes away from the edge of the browser a bit and then on the bottom we're pushing this stuff down by 3 a.m. so margin and padding is great for really situating and giving a white space and negative space to your layout elements so next up we have our form container see it says div class form container and that's right here and contains all this stuff right there so if we look at our design we could see that our form container is white so we need to give it a background value of white so it's form container and we're gonna put in background - color white there we go looks we have we have quite a bit of work obviously although it's not a lot of work CSS can drastically change the appearance quite easily so background color we're gonna put in margin here so we're gonna put margin - am at the top and then on the right and left we're gonna put negative 1 a.m. and then on the bottom we're putting 0 so I want to talk about that negative 1 a.m. value so when we didn't have this we can see there's I basically white space at the edge are at the ends on the right left but in our example we don't have that it goes all the way up against the side of the browser right well the reason this exists is because it's a container there's a container here let me just show you let me find it inside of here we have a section and because this form container class is inside of here then you can see that the the margin of one am on the right and left is affecting this so it can't go all the way out right so this is a way if we put in negative 1 en on the right and left it's gonna actually push it out to that equal value of 1 a.m. so now it makes it go all the way out to the right and left of the browser all right so next up for our form container we're also going to give it some padding look there's no padding here with this form element or at the bottom of it so padding remember affects the whitespace inside of an element so padding to M so now things have been pushed off but we have some work to do so next up we have our form element right here we don't have to style that that's not something that we're gonna style that's really just I you know whenever you have input elements and such it's a good idea to wrap them in form elements um although you don't necessarily have to but we're going to work on let's see here I think we're gonna have our form right here your label we don't have to worry about div class form left just yet simply because that's going to come into play when we have to structure it to the left and the right and into the desktop resolutions so labels what we're going to work on next our label as shown in our prototype is right here and you can see it's this color in fact I can grab that color code real quick so let's specify label we're gonna say color I'm gonna paste that value then it's to d7 d98 and make sure to put that hashtag there we'll save that there it is we're also going to do font-weight:bold let me close this out so now it is bold we're going to say display:block because remember we don't want anything floating to the rest left or right of it there we go we're going to do margin bottom of 1 a.m. to push that text field away from it and then also font size is going to be 1.2 e m units to make it a little bit bigger by default it's 1 a.m. unit by the way if you don't specify it so next up we have our input element we have to make that input look like this and has rounded corners and it's slightly bigger so we're gonna say input and then we're going to put in something new you haven't seen before there's different types of inputs right so we have an input right here of type text and input of type button the way we can target this you could specify class on this by the way like putting class equals whatever but me I'm just going to keep the HTML as minimal as possible which is a good goal and we're gonna use a different type of selector we put into brackets and we're going to put type equals the type we want which is a type of text type is text we of course is because this right here says type equals text this will be tight but and we'll get to that a little bit all right so we'll save that and we're going to make a few adjustments to this so the first thing we're gonna do is give it a custom border like color that we have so border one pixel solid so a border we'll add like literal borders around your elements so it'll take multiple values as well so first is like 1 pixels like how thick do you want your border to be we're just gonna say thin so it's going to be 1 pixels right next up we're going to put the type of border you can do dashed borders and just different types you can google all this stuff on your own we want ours to be solid as it currently and then this is where we specify the color so we could say gray or we could do a hex color code value like we've been doing mine happens to be 707 700 700 700 700 700 and we could get that value from here as well all right so if we save that it's making it a little bit darker than what it was before by default and we're gonna put in now a width of a hundred percent that pushes it all the way out and we also are going to put in a padding that's inside so we're adding white space inside of it of 1 a.m. and we're also going to do a border radius border radius is what will allow you to take these hard corners and make them a little bit rounded as seen here you can see it says 11 for a border radius in this design up so a border radius we're gonna put in 0.5 a.m. if you want it to be like a hundred percent round like pill shape do you do 50 percent all the weight I forgot about that and that's not quite what you would want to do that's if you want to create circles or whatever but if you did something like 3 a.m. for instance there you go you have your your pill shape so you can experiment with the value so 0.5 a.m. will work for us I just want slight corners and then margin top we're gonna push it away by about 1.2 a.m. oops there we go okay next up we have let's see here our there's a paragraph but it's it's white right so we need to see that so let's go ahead and specify that we have to look at the HTML it's a P element inside of form left so we're gonna say we'll just do form container which is a its other main parent so form container form container P rather we're gonna say color is gray alright and it's it's struck it's right up against there is no white space so it doesn't look right so we're gonna fix that we're gonna say we'll just do margin - bottom 1.5 e/m and then we'll do font-weight is normal and also font size is 0.9 am just to make it a little bit smaller and also I think I screwed up one element here because this is not supposed to be so close so we can what we can do is margin top 0.3 II am just to push it down a little bit more now next up we have our button find food now so we need to make it look like this so we just copy this real quick so we have this boilerplate here already typed out and get rid of all this stuff and this is gonna be type of button alright so for our button we have quite a few properties to write out first one don't change the background color right so background color will be f8 9 104 and I got that code previously already so I didn't I didn't know that offhand so dang it you can see it changed the color also we're gonna do border none' you see this emboss effect that the browser adds so let's just make that none we also are going to do width 100% we're also going to give it a color of white we're also going to make font weight of bold we're going to add a padding on the top and bottom of one em0 on the right and left of course we're going to add a border radius of 0.5 as well we are also going to change our font size to make it a bit larger 1.3 e/m and then also we're gonna do cursor:pointer i'm not gonna save it yet when you don't do that on the button element for HTML you can see the cursor doesn't change like you expect so cursor:pointer save that we can see now it's a little hand icon or pointer icon now one thing that's a little bit off notice how the width of this container this input element is further off than the width of this and you don't want that I in order to fix that the reason it's doing that is because whenever you add like padding on to an element along with the width it will add a hundred percent for instance plus one am on the left right so you don't want that it's making this a extend further that also will create for vertical or horizontal scroll bars to fix that this is something you'll have to remember we're gonna use box-sizing border box there we go so if we save it now it's all lined up so that's just something you need to remember when you're trying to apply padding along with width as well all right so this is looking pretty good alright so now people are texting me left and right what do we have next after that I do want to show you a interaction based design change sometimes when you hover over elements like buttons they can change color or change other some sort of property I'm going to show you how to do that we're gonna take this our button because our button right here or a button rulesets was controlling all this we're gonna copy that paste it and we're gonna get rid of all this stuff except for the background color because that's the element that I want to change the property that I want to change when somebody hovers over this so right here after that closing bracket we're gonna put hover then I'm gonna hover over this devalue the color value and visual studio code and change it maybe just slightly darker maybe right around there when you do that it's gonna change into RGB values but that's okay we'll hit save now we hover over it look at that very very cool stuff so you can change other properties too like the font size or the font weight like font-weight:normal so you look at that so again you don't want to do go too crazy and make too many changes all right so next up we're doing really well up here one thing I want to do we don't see our orange at all yet on here we do right we see the ice cube at least over here a little bit of the orange so we can actually come back up here look at all this that we've written so far and we can use oops it wasn't that wasn't supposed to happen we can use another background property called background position and the position works on x and y values so you can Business position it vertically and horizontally so we're gonna put in let's say 12% and then also 83% so these control the position of this background element and look we just made it show up so you can experiment by like maybe making one zero so this is X this is y and so the way I got to this version right here just experimenting with the color values before I started this tutorial when I was creating this project so a lot of this is experimentation and when you're first starting out you're not gonna know what CSS properties to use so you're going to be googling like crazy I mean that's that's how most people work unless you're going crazy with courses where everybody's telling you like me in terms of what to use but you still no matter what when you go to do your first project you're gonna be googling like crazy and that's okay that's how you learn okay so let's see what we have next this is all looking pretty solid I think just down here we need to specify some rule sets so let's see after our button hover we're going to reference our authentic class right here so we're gonna say authentic and what we need to change about authentic we're gonna say margin:0 so we're kind of resetting I a previous value up here so what I mean is when section see how it said margin of 1e m on the right and left well this is a section class so it affected that but I'm choosing to set that margin to zero just on this instance here and the reason I'm doing that is because when I let's show you show you the design here there's an there's going to be an image it's not shown right here it's right here in the browser I want that to be right up against the edge of the browser all right just for you to see and real quickly we have some other rule sets to put here I want to put on my image or reference it the image tag selector and say width 100% and that makes it I a responsive image or it responds it's a fluid image in terms of its size that way get rid of that stupid scroll bar at the bottom which completely got away now so this isn't looking a hundred percent like this right so we still have some work to do so after authentic we're gonna have our right call right here so right call we can specify text-align:center there we go and we're going to give it some margin three e/m on the top and bottom and one e/m on the right and left there we go now next up we're going to reference our h2 element I the way it's styled here it's all uppercase so text transform uppercase and also we're going to say position:relative because also it has that little unique underscore right here so we're going to basically reuse a lot of the values up here if I can find it there it is we'll just copy this so our h2s right here I'll just put it underneath so well h2 span before so if we save it we're not gonna see it yet and that's because we need to make a couple adjustments oh it's not a span that's why there we can see it right there I think actually that looks a decent I did have it longer so the width we can make like a DM there we go and I there we go looking pretty good right there all right so next up my paragraph there's a paragraph right here look notice the line height this has a lot more line height or leading as it's called than this so we can control that as well with the line height property so if I just type in P line height will say like 1.2 or 1.3 m that were then change it much how about 2 a.m. there we go now I wanted to show you something really cool about CSS itself CSS can have what are called custom properties or kind of like variables essentially if you ever have values the same values that are perhaps used in multiple areas of your rule sets in your properties then you can create custom properties for this so it's not necessarily like it's not necessary in our instance but I did just want to show you how to do it so if we come back to the very top I like to declare a my my properties up at the top and we can also add a comment so we can just say custom properties there you go so that's how you create a comment it's the forward slash and then asterisk and then your name and then you reverse it to end the comment so I'll just say when you have your custom properties you specify on the route selector as it's called and we're gonna say - - which is allowing us it's going to notify the the browser that this is a custom property and then name of the property gonna call it leading or the line height and then you put a a colon just as you would any other property and then the value will say 2 a.m. so then in order to use this custom property we'll come back down to where we were working and we'll we'll say var and then leading there we go it'll work so now if you had this VAR leading as in multiple areas instead of having in and you wanted to change it in the future you would have to change if if this this was 2 a.m. and then you have another 2 a.m. up here and another 2 a.m. you would have to change it all over the place in your code but if you're using this var leading in those different areas you only have to change it up here once so if I wanted this to be 1 a.m. there we go they both are changed 2 a.m. there we go great awesome awesome stuff so that is the mobile first design that's pretty much all of the HTML elements that we are using although I think there was one that I missed the H but I didn't I didn't miss it yet and I was lying that's all we need for this part right here so what we want to do now is slowly drag out the browser and there's a certain point where this design starts to look ridiculous and we've already passed it up like this is way too wide this right here this buttons way too wide it just doesn't look good this is very large and so this is what responds to designs all about and the reason I'm dragging out here is because I'm emulating what this layout looks like this is a phone this is an iPad perhaps or a tablet and then we get to desktop so we need it to look in and just be a lot easier to use and so that's the reason that's our job as well as a front-end developer is to deal with responsive design so what we want to do is use media queries in order to do this and so I'll show you a media query here and it looks like this we're gonna say at media we're gonna put in parentheses minimum width or min width and this is where we put in let's say 730 pixels so we open it up just like a normal rule set like that so what this means is it's gonna say let me get out the dev tools so you can get an idea of what I'm talking about control shift I when I get out the dev tools and I scale this in and out you'll see the pixel count up here we're only interested in x value the width value right here the first value notice it says 520 pixels and now we're going out here we're at 730 pixels I say right here is where we should probably change the layout a little bit on some form maybe add more padding on the inside so these aren't so large so we're at 730 pixels or so and so anything that's above 700 30 pixels there's also max width by the way but when you do in mobile first you just use min width so anything above 730 pixels you should use this code right here all right so what do we want to change well I'm deciding to change the section rule set so we have a section rule set already and that is right here so if you just copy this paste it in and put margin instead of 1 a.m. on the right and left because section if you remember is right here and let me find up here there we go so you has 1 a.m. on the right and left I think we need to increase that for anything larger than 730 pixels we're just change that to 4 a.m. now look how it pushed everything in so now it is 4 a.m. now what's cool is when we go back less than I 730 will see it goes away and that is responsive design in a nutshell you're overriding in progressively changing up and enhancing the layout based on the size of the screen so let's go back to this and we have one issue here remember we were using that negative value to extend it out well we have to just that right now so I'm just gonna copy that code off the side of the screen form container was it and so instead of one II am like it was before we're just changing this to 4:00 a.m. and you don't have to include other properties that you're not overwriting only include what you the properties that you need to overwrite and there we go it's now fixed okay you can't really change tell it too much but we are still pushing things in a little bit so let's say at 930 pixels or so like right around here is where we want to make our layout start to look like this this version let me go ahead and increase this so now we have a little bit some you know drastic work to do in order to try to make it look like this so we're gonna take this copy it paste that we're gonna put in 930 pixels all right and now one of the first things that I noticed that will need to change is we don't want everything text aligned you know centered right here it's left aligned so I if we find the element I believe is here OBG we can see it says text-align:center let's copy that go here and just get rid of this these properties don't need that one we're gonna say left so let's pull this out to 9:30 or more there we go alright so also here obg P paragraph that's we've had some margin on it so let's override that we can just copy it from here all right and we can just change this we're going to change this to the values of 0 0 and n 3m font-weight:bold we can keep that the same that's not a big deal so now these are all lining up as they should so also are here at BG section so we have a section element right here we don't want the section going on way out this far because in the right here it's only going out like this much is like 65% or so so what we can do is say hero BG section and we can say with 65% so now it's starting to look a little bit more like the actual mock-up so now we have some work where here because look at what this currently looks like actually doesn't look that bad but versus this as you can see it's not against the side of the browser and it's also rounded corners and some other stuff is happening so let's fix that what we'll do is take our form container which is that way to weight element and we are going to change first the margin so the margin will do two e/m on the top and zero zero there so now we've reset that margin so that on the pot top and bottom we have two e/m and then zero zero right there so then right here we're going to do padding as well we're going to set padding of 2m all right we're gonna do the border radius right here 0.5 eeehm so now it's rounded and we're also going to add a box shadow because as you can see over here it's like a shadow coming from here we can add that with the box shadow property so as you can see there's a lot of CSS properties you've never heard of probably especially if you're new obviously and this is kind of more of a complex sort of property because the values there's a lot of different values you have how far the X&Y like how far out to the right and in bottom it should be either the shadow should extend so X is the first property so I we could do like 10 pixels 10 pixels so on the X so it's going to be pushed over from this way to the right a little bit and then down and then you have your blur amount you know we could do 10 pixels for that and then you have an optional optional spread value and then also the actual color of it so RGB a we want it to be like a normal shadow 0 0 0 and then opacity making it transparent like 0.3 so if we say this there's our shadow I think that's fine we'll just leave it like that awesome stuff so now there's something wrong though we see that these are stacked on top of each other but right here they're not they're actually floated left and right of each other and which I discussed that when we were setting up the HTML so we have to do a little bit of work on that specifically so what we're gonna do we're gonna check out HTML we have form its overall container for both of those columns these two columns this column and the button so we're gonna make it a flex box container so we're gonna say form display flex so there's multiple ways to I for there's multiple values for the display property one is flex one is the grid I'm gonna show you both so the the Flex box and grid are two ways to organize your layout and they're both have different ways of about achieving their their layout but for me generally if I'm just trying to to do a simple sort of alignment I'll use the Flex box and then I'll use CSS grid for bigger larger elements and more complex things what I ultimately suggest doing because I'm not gonna be describing the entire differences it's just going to Google and just typing in CSS flexbox tutorial CSS grid tutorial also flexbox verse the grid and you'll just start to understand the differences again this is a crash course so I'm not going crazy with with everything in terms of detail so we've now made it a flex container and when we save that it automatically floated those two child elements there's those HTML elements to the left and right of each other but of course this is all messed up now so we need to fix that this buttons way too big for some reason so well we're not we're gonna have to focus on fixing that stuff so to do that I we're going to say first take a look at our form left property and we it needs to be about 70% over here not where it is currently so we're gonna say form left width and we'll give it a width about 70% all right it's still not 70% but once we fix the button it will work so sometimes confuse if using things like that can happen label the margin there was too much so I put gonna set that to zero there we go also our input type of button we need to fix that input type equals button let's get this up here so you can see it so for our button we're gonna use height fit content and that's going to kind of fix that large issue that we were having and so again a lot of this stuff it just takes experience and just having done it before to understand how to fix certain things because that one's kind of confusing as to why that's happening so font size but through experience I know that that's one way you can fix it so the font size we're making this 1.1 am let's move this stuff oh well we can't really move it over because we're not we have to have it large let's just go over here there that way you'll be able to see my changes will do margin-left we're gonna say 1 a.m. we're gonna move it away so that gave it a little bit space we're gonna do margin-top 2.2 a.m. and that's gonna get it more in line with this button right here and again just trying to make it look like this element over there or the prototype does also padding 0.7 a.m. on the top and bottom in zero and all right left and we're just trying to get it in line and beat you know be a good size and then with 30% now it's pushed over awesome so next up we're gonna have our hero BG paragraph element right here because right now what's happening there's so much space at the bottom but if we choose it there's a lot of there's margin bottom on there so we need to recess to reset that to zero so hero - BG p margin bottom zero awesome so now this is looking very similar to our this section up here so now we need to make this work though right now they're just floating on top of each other so to do that we're going to specify our section authentic now sometimes if you're dealing with AI a lot of classes and and such you can write first the property name and then are the HTML element or the tag name which is section period and then the name of the class which is authentic that way you know authentic is attached to a section so just it's just for organization purposes so we can do display grid this time and remember I mentioned the CSS grid it's another way of trying to alter your layout and lay it out we're gonna do CSS grid alright so this the CSS grid I have a tutorial already I'm not going to go in-depth into it but the way you work with it primarily is grid template column so you define your columns and rows as needed we only need two columns so we're gonna say I repeat to the same value of 50% so look at that but they're reversed right because in our XD document the bowl is over here and the contents over to the right but it's switched with what the power of the grid is really cool because we can fix that grid template areas we're gonna hit enter and just come in it's just a little bit easier to read usually I'm gonna pipe in Bowl and in the quotes and also a space content this allows us to name each of our two columns I want to name one Bowl and the other content so then we have to choose I are siblings that are part of this so we have write call or class a right call and also the image those will be our selectors so I'm gonna say right call and then I have to name or assign this grid template area name to this I this selector so grid area that's the property for doing that and then just the name content then our image will say grid area is let me get this up here Bowl alright so if I save this guess what they've just flipped as they were supposed to isn't that awesome because we have Bowl coming first so the image we've named bowled alright so we're not done just yet our right column we're gonna add padding zero and this time gonna use percentage for the padding that way we scale it up it slowly increases to padding around all right and then also we're going to do what else are we going to do text-align:left because it was centered now it's left aligned and we'll do a line self-center now this is another CSS grid property and that means it'll be vertically aligned and in the browser I no matter how high this content gets so you can't really tell what it did but if this were higher this would still be vertically aligned in this container right here alright so after that let's see here we have an h2 element and I for some reason I chose to put margin:0 on it that's this so it's it was I there was too much space or white space beneath there alright so now let's switch gear so so what's really cool now is we can see our design what it looks like on a mobile device and this is around a tablet or so and then now we can see a responsive design has transitioned into something like this which is pretty consistent with this section so now I wanted to cover just very briefly the HR CSS rather animations so what if we wanted this to animate in much or similar to the way it was animating in in our prototype oops wrong one let me get out the prototype section here we hit play see how this kind of animates in well I'm gonna make it all animated at the same time but it's going to fade in and come down like it was here so how would we do that so if we go back to our index.html we have to figure out what we want to animate I want to just have everything right here this all this section to animate in at the same time so really that's everything inside of this section element right here so it has a class of top so let's come down well I come down at the very bottom outside of any of our media queries I'm going to put in top animation and we're gonna put in the animation by the way is one of those shorthand properties that allows you to specify multiple values so first we put the name let's call it fade in and then the duration two seconds and then I'll put four words because we don't want to keep looping four words makes makes it so that it only plays once and stops so then we have to define in to fade in animation you do that through at keyframes the name of the animation fade in and right here so this accepts I two different types of possible values I'm if you know you want to go from A to B you could put from and to all right if you want multi-step animations which we will do in a second you can put a zero or you could put percentage values and you can put multiple not just two steps but so you can have multiple sequence two animations for this one we just want simple from and two so then we could put in the properties that we want to change so we're gonna go from 0 so this is gonna be hidden this stuff's all gonna be hidden at first and we also want to go to opacity one so if we save now its fading in but it's not coming down as well right so to do that we're gonna use another new property haven't heard of transform and we're gonna do translate why because we're gonna come from the top and then we're gonna say a negative to e/m from the top and then just up down just to its default position which is zero look at that very very very cool stuff so finally and we're gonna get to the JavaScript portion so we did we dine or HTML we've done our CSS now I want to just get your feet wet with a little bit of JavaScript now I debated even adding JavaScript in just because it's such a massive topic but I decided to do it because javascript in front of development are so intertwined I want to do at least do a tad bit of it so javascript is something that you can use in conjunction and with HTML and CSS to make your app or your website interactive in some way shape or form so let's say for instance when a user clicks on find food now we want something to happen on that click so if they click the button something's gonna and let's just say for instance we will have this big what will make the whole design dark so everything will darken up you'll still be able to see it but not quite and on top of it inside of it in the middle of the screen it will say searching now or something like like searching now for foods and then we'll make it disappear after a couple seconds how would we do that well because it's interactive based on it click will use JavaScript alright so just like with CSS how we can link a JavaScript file or we could write inline JavaScript we could do the same thing with I with JavaScript CSS over here we could do the same thing with JavaScript I'm gonna choose just because we have so little code to put the JavaScript in line so we could put a script tag at the very bottom just above the closing body tag so this means anything inside of here has to be JavaScript within these script tags all right so the way JavaScript works is and by the way if you're interested in front-end development watch multiple courses read a lot about the basics of JavaScript because I'm really not even gonna get into the absolute basics I'm just going to show you this one use case for JavaScript so what we need to do is we need to create a couple of properties or variables that will allow us to access our button and also that little overlay that's going to make everything dark so right here is our button we're going to go ahead and give this an ID so an ID is like a class except an ID is unique and ID so generally what you use with JavaScript although you can use classes as well so ID CTA - BTN for a button or a call to action button so what we'll do we need to get a we need to sign that we need a way to get access to this button right so that we can know when somebody clicked on it or not so what we're gonna do is we're going to say let and then the name of our button BTN and again I'm naming this whatever you can name whatever you want I'm gonna name it button equals document dot yeah element by ID remember we gave it an ID so we're gonna get the element by the idea we open up in parentheses we put in cool it our eye our quotes or single quotes it doesn't matter and we can specify the name of that ID which is CTA - button so now this doesn't do anything it just means we assigned a variable we created a variable called button which means this right here just get this listen for something on it and so that's what we need to do we need to listen or add an event listener as it's called so what we do is type in BTN add event listener notice that little helper I just hit enter so I don't have to type the whole thing in and what we were listening for we're listening for an event to take place like click there's a bunch of different types of events like hovering Mouse out mouse a mouse in Mass / Mouse out there's a bunch of other ones I and so you can just you can research that yourself then we put in a comma and then we put in empty parentheses right here you can usually pass in some properties if you need to we don't need to and then we use an arrow function and open it up inside these squiggly braces what this is all right here is saying is basically if there's so if somebody clicks on this button then executes any of the code inside of here kind of like that media query sort of thing that we had over here right like if the the width of the device or the browser of the viewport as it's called is either 930 pixels or larger then do something in here this is the same concept okay except this is not a width it's just based on somebody clicking this button with the ID of CTA button so now we need some HTML though or we need to change something and what we're gonna do we're going to add some HTML up here so forget about the JavaScript for now we're gonna do it a little bit of HTML and CSS so the HTML that we need to add is going to be div or actually rather just class overlay and then I'm gonna give it an ID as well we could do this through em everyb Asians put a hash time hash hash tag rather of overlay so that's what it just created a class of overlay an ID of overlay will use this ID overlaid referenced in the JavaScript in a second so this overlay we're gonna just basically blanket with CSS the entire document and make it dark but we're inside of it were gonna have an h3 it says searching now so in and of itself right now this is all it's showing the stupid thing we don't want this showing anything by default so but but really what we're gonna do now is head on order the CSS and we're gonna style this as we want to look like so we're gonna go back here and we're going to come up just above our first media query there we go and we're going to say overlay that was the class we gave it and we're gonna do position:absolute that'll allow us to break out of the box model and just to just overlay everything as we wish so then we're gonna do height we want it to be a hundred percent viewport height also width will be a hundred percent and then background we're going to use rgba 0 0 0 and we're using RGB a because a is alpha we could control the transparency so we'll say 0.9 now you can see we could kind of see everything behind it right but not quite now also z-index we're gonna change to 1 because we don't want to see that other stuff on top of it there now it's hidden this was showing up on top because the animation that we had applied to that section automatically made it overlay on top of our overlay if that makes sense so setting this to Z and X 1 is the fix for that we're gonna do I place content Center and we're doing that because I we're actually going to make this display grid in order to just Center that search searching now text vertically and horizontally it's a quick way of doing it but we don't just yet we're gonna do color white all right see says searching now now if I do display grid there it is in the middle so place content and display grid work with each other all right and now what we're gonna do though we don't want to see this whole thing by default right right when the site loads up it doesn't make sense to have this searching now this only should show up when somebody clicks fine now so what we do instead of display grid is display:none and we're gonna make it opacity zero and you'll see why because I'm also going to apply a CSS animation to it to fade it in from zero so right now we don't see it right correct we don't see that overlay so now what we need to do is we need to go back to our JavaScript and inner JavaScript we're going to say let's just replicate this line so we select the line here in Visual Studio code shift alt in the down arrow key where we'll replicate it that way it saves us some typing because now we're gonna create a property to access our overlay graphic up top which is overlay remember the ID is overlay all right so once the button is clicked inside of here we say overlay dot style dot display equals grid what this is doing is it's changing the display the CSS display property from none to grid once a person clicks on it makes sense hopefully it does so if we save this and I click on it watch what happens ha ha nothing now usually when that happens there could be an error in a console there's no error so I have to figure out what did I do wrong so I'm gonna leave this in here because that is quite frustrating so because that should not be happening so overlay make sure everything is typed out correctly sometimes you'll misspell things we have the ID of overlay up here up here the display is none oh but the opacity is zero we need to wait and not put that in just yet I could comment that out the regular way to comment but I'm just going to do that and now if i refresh and I click find food now it's going to show up the reason wasn't showing up because I had to pass adizero but we're gonna leave a pasady zero because I want to this seems jarring when you click on it just shows up right away in your face I would like it to fade in slowly so let's leave opacity zero back in which case we won't see it although it is overlaid because we can't really select anything in more but it's just opacity zero so we can't see it anymore so what we want to do is attach a different class onto it at the time of changing this display to grid and it's gonna be in an animation type class so let me show you what I'm talking about we're gonna create a custom CSS class that is not found anywhere here like we won't find it here anywhere and but we're gonna call it animate overlay all right and we won't apply just one property and that's the animation property animation will call overlay three seconds fords alright because we don't want it to loop then we're gonna go ahead come down here and specify our animation or keyframes for that property so it's at keyframes overlay and record to do from because I want to have a multi-step animation I want it to fade in for a little bit and then stay there for a little bit longer and then fade out so we'll do 0% opacity will be zero then 30% yep the opacity will be one so then and remember this is playing over three seconds because that's how long we made the duration from 30% to 70% we're going to keep the opacity at 1 and then from 70% to 100% we're gonna make the opacity zero the fade right back out so we can't we're not done yet because we have to then attach that CSS class that exists in this CSS file that anim overlay class which is right here we want to attach it to our overlay element right here so I'll show you what's happening in the browser though in order to do that so what we want to do is say overlay dot classlist dot add and then we add the name of the class overlay anime overlay so let's say this and see if it works it should fade in and then fade out tada so if I show you in the dev tools control shift I what's happening here when I click this or if I come back out here and I click this you'll see it automatically adds that animate overlay onto this element now if this was our serious project I would make it remove that that element and maybe you can challenge yourself to do that figure out how to remove a class because what like I said before when you get into front-end development and you start doing your own projects you're gonna be googling a ton about how to do things so your your task for this maybe make this like an assignment for the fun of it we know how to add a class right so after three seconds how would you remove a class all right so again it's a very it's almost very obvious just based on add and you would also use something called set timeout and in JavaScript and Nataly it allows you to make create code that executes after a certain amount of durations in milliseconds so 3,000 milliseconds oh three seconds that's the length of that class we could then remove this enemy overlay or set or reset certain styles back to like display:none I think that's what you would want to do because right now when somebody clicks on this for instance and it goes away guess what you can't click on it again it's a bad UX issue right but anyhow I this isn't a serious project for you know this is just a teach the HTML and CSS so I hopefully you guys gained a lot out of this so let's just check out the design one more time this is our mobile design refresh we could still see if we click on this it'll still work very cool normally you would be when you're searching for something like this I would be attached to a database where it's searching through but again that's kind of outside the scope of a front-end developer but once we come out our design changes up very very cool stuff all right so hopefully you enjoyed that now if you watch the long and I you know you really paid attention I guaranteed you're still probably be a bit confused I mean you're not going to go out and be able to create your own site from scratch and something that looks right it just doesn't really work that way because there's so much new information that you took in so a few suggestions like I mentioned throughout the course definitely watch other tutorials my tutorials and all the other youtubers out there and there's not just YouTube there's a lot of written based content there's really cheap or free courses otherwise I in just did so much there's so many ways to learn it and really I tell most people these days don't go to college if you want to become a front of developer all this stuff is very cheap or even free online to learn yourself alright so if you enjoyed it make sure please just subscribe like it leave a comment and I'll see you guys very shortly goodbye

Channel: DesignCourse

Views: 306,301

Rating: 4.9604039 out of 5

Keywords: frontend development, frontend developers, frontend development 2020, frontend developers 2020, frontend developers course, frontend development course, frontend developers tutorial, frontend development tutorial, what is a frontend developer, what does a frontend developer do, html and css, html css tutorial, html css course, gary simon

Id: QA0XpGhiz5w

Length: 135min 6sec (8106 seconds)

Published: Thu Jan 02 2020