Transcript for:
HTML और CSS शुरुआती कोर्स संक्षेपण

this beginner's course will teach you html and css through building and deploying five awesome projects and you will learn by solving over 75 coding challenges pair is your instructor pair borgen has created many extremely popular courses and is also the co-founder of scrimba this course makes it easy to learn html and css hi there free cold campers and welcome to this interactive scrimba course where you are going to learn how to build beautiful looking websites using html and css we're going to go from scratch so there are no prerequisites required however the special thing about this course is that it's fully challenge based which means that you will need to get your hands on the keyboard again and again as you progress through this course and if you now are a little bit afraid or like setting up your local dev environment don't worry for that reason we have created an interactive version of this course over on scrimba.com there you'll be able to solve all of the challenges directly in your browser so just click on the link below and you'll get to that interactive version now if you prefer to instead solve the challenges locally i've created a github repository that you can clone and there you'll get access to all of the starter files for the challenges one final thing if you like this course please give it a thumbs up here at youtube that is highly appreciated and if you have any feedback for me just reach out to me at twitter at pierre borgen with that let's get started hello there my dear internet friend i am so happy that i get the opportunity to teach you two of the most important technologies on the world wide web html and css and who am i my name is pierre i'm the ceo of scrimba and i'm also a front-end developer and coding teacher and over a million students have gone through my tutorials when i'm not coding i enjoy posing in front of fast cars but enough about me let's talk about what you are going to build with your own two hands throughout this course the first project you'll build is the world's most popular website thegoogle.com homepage you're also going to build a space exploration landing page a digital business card and even a birthday site which we are going to deploy to the web so that you can send it off to your best friend on their birthday to make them feel special because check it out it has these virtual birthday presents that reveal themselves when you hover over them so this gift says here's how happy i am for you today and when your friend hovers over it boom they will feel your love flowing to them through the magical tubes of the internet and we are going to build all of this in html and css so now you're probably wondering well what is html it is short for hypertext markup language oh my god i'm getting tired of all this theory let's instead say that you're gonna build a car well then you'd start with probably gathering the contents of the cars like tires doors steering wheel mirrors and stuff like that and that is kind of the html of your car when you stitch it together you at least have the shell of a car the next step is probably to paint the car so that it looks good and that's the css and finally if you want your car to drive you've got to give it an engine and that is kind of the javascript of your car or very often referred to as js now in a world wide web context the html is then the content of the website that is buttons images text and so forth the css sd styling and the javascript is what allows your website to solve problems so that users for example can check off tasks communicate with databases you can also handle payments and so forth now we're only going to focus on html and css in this course and then you can learn javascript and another course i've created here on scrimba as well but knowing html is already hugely valuable in today's job market and is also the most natural first step as you embark on a journey into the world of web development so i hope you are ready for this let's get started the french philosopher rene descartes once said three clever words pogito ergo zum which translates in english to i code therefore i am so let us prove to ourselves that we actually do exist by coding this out in html and the way we do that is actually not too different from how you would write this out in a regular text editor as there you would simply write out the sentence and then if you wanted it a bit more prominent you'd probably highlight it and then click on normal text here and choose another content type for your text you can see heading one heading two heading three let's hover over heading one and then click on it and there you can see that the text became a lot more prominent it became a heading 1. now if we want to do this in html we'd simply create an html file which you can see here it's called index.html as that is a common name to give your html files and here i would write icode therefore i am now if we open up a browser and point this browser to our html file and then run it then we can see that the text indeed appears in the browser however it's pretty small so if we wanted to turn it into a heading 1 instead what we do is wrap the text in html tags so before the text we'll do this two angle brackets with the text h1 inside of them that's short for heading one and then at the very end of the text i would do the same h1 but since this is a closing tag and not an opening tag i would also have to give it a slash before the text and now if i rerun the code there you go we have made our text a lot more prominent now i think our website should give proper credit here so let's write rene the cart underneath the h1 like that if we now rerun the code you can see that the text is just normal it's not an h1 that's because it is only the text which is within the opening h1 and closing h1 that gets formatted as a proper heading in the browser in my view this line right here should be a bit bigger i want it to instead look something like this where the name is pretty thick and big but not as big as the heading one and that brings me to your first challenge i'm going to paste it in here so what you are going to do is try to make our web page look like the design in the provided slide and if you are struggling to think of what kind of html tag you'll have to wrap this name in well i've got a little hint for you what comes after one so pause this scrim jump into the code and try to solve this challenge right now and then when you return back to me i will of course show you the solution as well good luck okay hopefully that went well way to solve this is by instead of using the h1 using its smaller sibling the age two like that it has the exact same so-called syntax as the age run so instead of a one you use a two if we now run this there you go we have achieved the design we wanted so great job let's move on before we move on to the next challenge there's one thing i want to make sure that you are aware of and that is that if you have an html file locally on your computer and you have a browser what you can do is simply drag and drop that file into the browser and then it'll be rendered so that is actually more or less the same thing that's happening here on scrimba though here we have a mini browser and the text editor inside of well your browser because scrim by itself is browser based so a little bit meta but it's essentially the same thing okay now it's time for you to get some more muscle memory on how to write html tags and also get to know two new tags because i want you to create a news article and more specifically this news article right here which has a title that says humans have reached mars it has a subheading right here and also some regular text and the html tags are h1 for the title h3 for this one you haven't used an h3 for but i think you know how to do it and then there's finally a p tag for the text at the bottom p is short for paragraph and i have provided a little syntax example for you here however if you've understood the logic of how to write these tags by now it shouldn't come as a surprise how you do that okay here is also the text so that you don't have to write all of that out you can just copy paste it instead so now starting here on line 13 write the html we need in order to create this news article okay hopefully that went well let's start with the h1 i'm going to create the open and closing tag and then paste in the text like that running the code yes it works moving on to the h3 copying the text then rerunning the browser and there we go finally there is the paragraph like this re-running the code and there we go we have achieved this exact layout great job let's move on now you're going to learn about images because i really think our mars article needs an image the way to do that is by using the img tag so we start with our angle brackets and then write simply img inside of those and what's unique about this tag is that you don't need a closing tag so there is no closing img as there is a closing age run or closing paragraph this is simply not needed so it's often called a self-closing tag and some people use the slash at the end of the opening tag like this just to signify that it is closing itself however it's not really needed so we can skip it and i think in general that less code is better code so i am just going to skip it however if you prefer to have it like this that's totally fine as well okay enough syntax how do we get this image to work because right now if we re-render this page nothing has happened and that is because we haven't told the image tag which image we want to render and the way to do that is by writing src which is short for source and then we write equals then two quotes because inside of these two quotes we're going to specify the image we want to render and here on the left hand side you can see i have mars.jpg it is in the same directory as our index.html file meaning i can simply do mars dot jpg then run the code and there we go we have our image that is super cool however you can see that this image behaves a little bit differently from our paragraph for example because where's the paragraph take up the entire width the image just take up whatever width it needs leaving us with white space on the right hand side if the browser is too wide or cutting off the image if the browser is too narrow and i actually want this image to behave like our other paragraphs so i'm going to show you a little hack to do that because normally you'd use css for doing this but there is a little trick we can use by simply utilizing the with attribute that is an attribute just like source is an attribute and it uses the same syntax we'll do with equals and then two quotes and then inside of the quotes we can write for example 100 percent we now rerun this you can see yes our image is now scaling with the size of our browser looking super neat now as i said this is a hack so if you show this around to people you might get this annoying guy saying well actually that's not valid html according to the specification but you know what let's not care about that at this point you should not give a darn about specifications validity in aka correct html you should instead look at yourself like a hacker who grabs whatever tool you need in order to get the job done so now we're going to use this even though we know it's a hack because later down the line you're going to learn the proper way of doing this using css the language we use for styling websites so with that out of the way i want to show you one more thing before i give you a challenge because one thing that's super cool is that you can actually borrow images from wherever you want online so if you find an image you like you can borrow it and use it in your project let me show you how so if we google mars for example and click on the images tab and then click on whatever image we think is cool for example this one right here and then in this image view on the right hand side here you can right click and choose copy image address once you've copied that you can simply paste it into the source attribute so i'm going to remove mars.jpg and paste in the image address which i just copied if we now run the code you can see there we go we have borrowed this super cool image from another website online so it's time for a challenge what i want you to do now is add a second image to our article i want you to find one via google and then place it under the h1 element but above the h3 element so that is right here and finally remember to use the width attribute to make the image as wide as the other elements i'm going to leave you here with the mars image again and wish you good luck go ahead and solve this challenge right now okay hopefully that went well what you need to do is write the angle brackets img and set the source to whatever image you found online i'm going to reuse the one i found earlier like that if we're rendering this this is a really wide image by default that's not what we want we want to scale with our browser so we need the with attribute with equals a 100 percent like that and now we have two super cool images in our article both scaling up and down with the size of the browser great job let's move on okay now you're going to learn about something called nesting which is the act of nesting html elements inside of other html elements so let me show it to you in practice let's say that we want to group all of these elements here together what we then do is above all of the html tags write another html tag and in this case we'd use the so-called div which is short for divider however i don't think that is a very good name i would rather call this for example a container though div is what it's called so we're just going to have to stick with that now in order to nest elements inside of this div we'd write the closing tag below all of the html tags in our article and then for readability purposes we'd indent all of the tags in our article so now our h1 image h3p and image here are all children of this div tag right here this doesn't change our layout at all so this div tag here is invisible however it has now given us the ability to target the entire article just by targeting this div right here and that is useful if we for example want to add some styling to our entire article using css or somehow manipulate it using javascript which is the programming language that you use in browsers and very often you'll actually see a ton of divs on a page so for example you'd see another div around this image element here which then would have been indented yet another time in order to signal that this is indeed a child of this div which again is a child element of this div now if we were to visualize an html document it would look something like this you'd have for example a div up here and it would have two children which could be their own divs like this and then this left hand div here for example have an image tag as its first child and also an h3 as his second child the other div on the right hand side could have an h1 tag as its child p tag as its child maybe even another div as its child and then if we go yet another level deep this paragraph tag might have its own child which could be for example an a tag which you haven't learned about yet but which you'll learn about soon as that is the so-called anchor tag that allows you to create links on websites and looking at this visualization you might think well this kind of looks like a family tree and yes it does and that is exactly why we call this structure the html document tree because we are inside of an html document and how they are nested inside of each other becomes kind of like a tree where you have a trunk and then branches going out from that and then yet again new branches going out from those branches and so on and so on so now that you know that let's move on to the next grim okay now we're gonna use your newly acquired internet super powers in order to perform a little practical joke because you might have a friend who is far too obsessed with a sports team for example i myself am a manchester united fan and one of the worst things i can imagine is if some rich billionaire buys the club and changes its name that would make me truly outrageous so what we're gonna do now is change the news on bbc sports so that you then can show this page to a man united fan and thus make them really upset while you get a good laugh so let's go ahead and do this here on the bbc sports page on this top article here i'm going to right click on the text and then you can see it gives me the option to choose inspect now note that this is on a chrome browser as that is what i'm using if you're in a different browser there might be slightly different steps here or a different wording but overall in general the steps are the same so i'm going to click on expect and then you can see that it opens up this panel on the bottom of the browser this is called the developer tools and here you can see we are in the elements tab and that shows us the html elements that are on the page and here the one we have chosen now which happens to light up this area on the bbc site contains the title of our article and it is an a tag which i've just briefly mentioned and that you're going to learn more about later now we can't see any text here so i'm going to click on this age tag and there you can see it contains an h3 tag nested inside of it if we click on that one as well you can see that there we see the text that is rendered in the browser so here we can double click on that text and change it for example to something as awful as jeff bezos to buy man united and rename the club after himself oh my god that is about the worst piece of news any united fan can read so if we now hit enter there you can see boom we have changed the text on bbc now let's click on this paragraph here as well open it up because there we can also change the text that is written underneath the title let's paste in the u.s billionaire says he doesn't follow the premier league but wants to own the club to grow his personal brand this just gets worse and worse so now if we hit enter that is also rendered in the browser now i'm going to scroll a little bit up in the dev tools here and hover over this div tag here because as you can see that highlights our image so it seems to be that our image is nested inside of a div tag let's open it up by clicking on this triangle and there we can see another div tag well okay still highlighting the image let's open up that one as well oh wow there we have yet another div tag a div inside of a div inside of a div this is web development in a nutshell let's open it up again and there yes we can see our image tag i'll scroll a bit down and you can see there are tons of different attributes here we're going to ignore almost all of these and then instead direct our attention towards the src attribute that one we know because that is the one we need to change in order to change this image so now let's open up a new window search for jeff bezos click on an image we like for example this one right here right click on it and choose copy image address then can do now is double click on this source and then remove the existing source inside of the quotes like that and then paste in our image of jeff bezos however if we now hit enter you can see nothing changed and that is because bbc is a little bit fancy here they use another attribute called src set which helps the browser render different sized images on different types of screens depending on what kind of image is appropriate for the given screen the website is rendered on so what we're going to do here is just double click on the src set so that everything's highlighted and just delete all of it and then hit enter and boom there you go we have jeff bezos looking pretty ready to acquire this football club and rename it bezos united finally i'm going to close this panel by clicking on the x in the right corner here and there you go we have our article so now the final step is just to take this site show it to someone who is a manchester united fan and get a good laugh now a final notice if you refresh this page you will lose your changes because you only made your changes locally and when you refresh it the entire page gets the fresh data from the database of bbc and not from whatever local changes you did and since it is local that also of course implies that your changes only happen on your computer you don't change bbc in production of course so go ahead and play around with some sites online see if you can come up with a fun little practical joke for a friend have fun and i'll see you in the next scrim now you're going to learn about your very first interactive html element and that is the button tag because the buttons are all over the web so to create a button simply start with your angle bracket and a button opening tag and then a button closing tag like that and in between the two tags you write whatever text you want inside of your button now as you can see it's styled with a background color that also has a border around it and you can even click it now this button doesn't do anything in order to hook this up with some kind of feature for example trigger a purchase then you'd have to learn javascript and that is outside the scope of this course but something you'll learn later in the front-end developer career path so for now our button will just be there and pretend to do something while actually being pretty useless now that you've seen this once i want to put you on the spot and give you a challenge i want you to create a layout according to the design in this slide so imagine that you are building a website where people are to sign up then it would be very natural to have something like this where you have an h1 at the top welcoming them a paragraph with a little message and then a sign up button so i want you to create this layout you don't have to write the text because i've provided it here just make sure that you set up the html tags correctly so that it renders properly on the page good luck okay hopefully that went well let's now do it together i'll start with the welcome h1 tag like that paste that in and boom there we go next up there's the paragraph opening tag closing tag then pasting the text in between running this code it still looks correct finally the button like that with sign up written inside of it and boom there we go we have our completely useless signup form that doesn't do anything but in the next scrim we're going to add on to this so stay tuned and then i'll see you there the sign up section we have here is actually pretty useless because there's no way for our users to add for example their username or password so in this script we're gonna fix that which leads us to the input tag the input tag is just like images a self-closing tag so we only write the opening tag and not the closing tag like we do with buttons for example however we have to specify what kind of a type our input should be so it has this type attribute just as the image has a source attribute and the value of the type can be a range of different options but we're going to start off with the most common one and that is text if we run this you can see we get this nice little text box in the browser another handy attribute is the placeholder that's where we can give the user a hint about what kind of data we're asking for so for example enter username like that if we run this you can see it says enter username okay let's do a mini challenge we of course want them to enter their password as well so i want you to create a new input field on line 4 which is identical to the one on line three though it should say enter password in the placeholder as opposed to enter username and don't just copy this line and change this word i want you to get some muscle memory here so go ahead and do that right now okay hopefully you did like this input type equals text placeholder enter password like that and there we go now you can enter a username and a password however in the real world passwords are never exposed like that the characters are always masked and the way we achieve that is simply by changing the type from text to password like that if we run the code now you can see the username is shown but the password is a mask really nice and speaking of this type attribute here it can take a range of different values which turn into really interesting interactive elements on the page for example you can do type equals date let's say you want the user to add their birth date during sign up and then you get this nice little date picker or you can do type equals time for example if you want the user to be able to configure when they should get some kind of notification that gives the user a nice time picker or let's say you want to give the user way to configure the theme of their profile with colors then you can do type equals color and then you get this powerful color picker where the user can add basically any color there is through moving around on these dots so the input tag is a really versatile tool in your toolbox okay let's move on to the main challenge because i want our users to have profile pictures which means that you need to add an html input field that lets them upload image files and i'm not going to tell you what kind of type that input field has i'm just going to show you how it looks or just like this you've probably seen it online before it's basically a button and when you click it it lets you choose an image from your local file system and the reason i want you to figure out what the type attributes should be here is because being good at googling is actually a huge part of being a good programmer and the two are actually not that easy to separate from each other so this gives you a way to practice those googling skills and i'm going to give you a hint that the keywords you should use are found in this last sentence right here so go ahead and solve this challenge right now and then i will of course show you the solution when you return back to me okay hopefully that went well let's do this the keywords i think are important here are html input because we know we're looking for an html input tag and then what is our intent well it is to upload image files and i think google can handle this just by combining html input upload image files if we just paste that into google let's see what we get and as you can see when we search for that we get a first hit from developer.mozilla.org let's click into that and here you can see the title is input type equals file and we get this little code snippet here it also says input elements with type file let the user choose one or more files from their device storage sounds pretty good so far let's zoom in on the code here and there you can see that they are actually using the profile picture example themselves choose a profile picture with this button which looks suspiciously similar to what i just showed you a couple of minutes ago so i think we've found it what we're looking for is type equals file let's add this up above the sign up button but type equals file like that we run this code yes there we go we get this button which looks like exactly what we're looking for okay now we're gonna move on from using google to building google i mean how cool is that you've learned html for just about 30 minutes and now you're gonna build the most visited website in the world that is just amazing as you can see here on the similar web overview google is at the very top amongst the most visited websites in the world beating sites like youtube facebook instagram wikipedia and all the way at 10th a pornography site of course and by the way it's a little bit sad to see that this adult site has almost three times the average visa duration of wikipedia so a pretty deep insight about humankind right there anyway we are going to build google.com and it'll look like this however now you're probably wondering how can we make a page look like this this doesn't look like regular html and that is because i've cheated a little bit and added this line up here which is a link tag to styles.css and if you look at the file menu in the left hand side you can see that actually we have a file called styles.css which contains exactly that cascading style sheets which is the language for styling websites and which you're going to learn all about a little bit later in this course however for now i want you to completely ignore this what you should do instead is just create the four html tags we need in order to create a google.com clone and then this css will be pulled in and take care of styling the elements as they should be so that it will look like this and to give you a hint this is an image file pointing to google.png the file i've added here and png is just a file format just like jpeg you can use it in the exact same way as we used jpegs earlier on so you should know how to do that and this is an input field you have to figure out what kind of type it is i think you might have a clue this is a button on the left hand side and this is also a button so basically it is these four tags you need to create in order to build a clone of the world's biggest website so go ahead and do that start down here and ignore the line up here and then when you return back to me i will of course show you the solution as well good luck okay hopefully that went well if not no worries let's do it together so starting with the image tag for the google logo i'm going to do imd like that and it's a self-closing one so i don't need a closing tag but i need a source attribute and it should point to the google.png file so i'll just do google.png like that and let's run this and oh there we go we got the logo okay moving on let's do the input field also a self closing tag running the code and there we go we have a input field looking pretty good okay next up there's the two buttons one saying google search and one saying i'm feeling lucky so i'm gonna add both of these button google search and then since i'm lazy i'm gonna copy it and do i'm feeling lucky like that let's run this and there we go we have a google clone with just four html elements so if you did this give yourself a pat on the back it is fantastically well done you should really be proud of yourself and if you didn't manage to do it just try it again and i think you'll make it at this point it might be a good idea to take a little break and digest everything you've learned and then when you are ready to continue i will see you in the next scrim okay now that you've built google.com you probably want to showcase your project on some kind of a portfolio page so let's pretend we're creating exactly that here we have the index.html page the main page of our portfolio and as you can see it says pierre harold borgen developer teacher procrastinator so a really good description of myself though what it lacks is some kind of page or section which describes my projects though i have actually created the underlying page for exactly that over here on work.html as you can see this is a few tags that describes my google.com project however there's no way for the users to know this the only way they can get to this page now is by actually typing work.html up in the browser here and then it is rendered we don't want that instead we want some kind of link from the index page that is this one that points towards the work.html and in order for us to achieve that you have to learn about anchor tags aka links an anchor tag is simply an html tag with an a so let's open and close an anchor tag and write for example check out my projects here like that if we run this it seemingly looks just like our paragraph and we can't click it either and that is because for anchor tags you also have to provide it with an href attribute that's short for hypertext reference really fancy scary looking word right there don't worry about it all this attribute does is decide where the link should point to so if we do equal and then two quotes we can inside the quotes simply write work dot html if we now run this you can see that it renders as a link and when we click it boom we're taken to the work.html page really nice now another thing i want to show you with anchor tags is that you can nest them inside of other tags and actually inline in a text block so let's say that we want to link to google.com from this site then we'll create a paragraph which can say something like check out the live demo here and we only want the here word to be a clickable link well then we'll simply wrap the anchor tag around here as well and we'll close it before we close the paragraph and then we'll do the href paste in the url to google.com now this is a link that points to an external website not to any of our pages so if we run this you can see that the link is now only over the here word however if i click this link now the scrimba mini browser will try to head over to google.com and we only allow the mini browser to render scrimba projects at the moment so that won't work instead what i'm going to do is make this link open in a new tab the way we do that is through a new attribute so first i'm just going to break this into a new line just to improve the readability a little bit and then here i'm going to write target equals underscore blank now that is a cryptic way of saying that you want the link to open up in a new tab i know but if we now run this if you click on this link what you'll see is that in your main browser a new tab will be opened at the google.com homepage so i'm not going to go deeper into why it's called target equals underscore blank but this is the way to do it i of course wish that html had a better solution for this for example new tab equals yes that would have made a lot more sense to me but this is how it is you just have to accept it okay that was a lot of talking from me now it's time for challenge i want you to create an anchor tag that links back to the index.html page because if user ends up on this page they also need a way to get back to the main page so create that link here however you want and then i will show you the solution when you return back to me okay hopefully that went well let's create this anchor tag i'll wrap it inside of a paragraph and right turn to home page and then i'll simply wrap the homepage word in an anchor tag like that and point that anchor tag to index.html if we run this you can see return to homepage and if we click that we are back at the homepage great job let's move on okay we're back at our google example here and now i want you to add a anchor tag to the page because sometimes you'll see that google ads a little text underneath the buttons for example something about privacy like we protect your privacy and then with a learn how link then you can click on to read more about that so that is exactly what i want you to do i want you to add an anchor tag that points to blog.html as you can see i've added a blog.html file up here and i want you to wrap the link inside of a paragraph tag so just as it is here you can see it's an entire paragraph here but the anchor tag is only wrapping the second sentence so go ahead and do that right now okay hopefully that went well let's do it we'll start with the paragraph opening and closing tag and then we protect your privacy like that here we're going to add the anchor tag inline so i'll do a open and close and do an href as well point it to blog.html and the text should be learn how let's run this and boom there we go we have added a nice little link here if we want to learn more about google privacy then we can click this link but not much to see here turns out that privacy probably isn't as important for a company who makes money by showing ads to users anyway we can click on this link return back to google and there we are great job solving this challenge let's move on okay now we're going to talk about how to structure html documents because the structure we have here isn't actually correct it's a very simplified structure compared to how it should be though it does work so i didn't want to give you all of these theoretical boring structure things up front i wanted you to build stuff from the get-go without the added complexity of the proper html structure as my philosophy is first make it work and then make it better however now we're at the point where we should make it better so let's have a look at how to structure html documents properly and html is actually quite like us humans it has a head and a body and what do you place inside of these elements well in the body that's where you place the tags you see on the page and that is these ties here so our image our input button paragraph and our anchor tag because these are visible on the page now of course the css styling up here also results in a different layout but the link tag in itself is not something that is rendered on the page so it should not be in the body tag so let's just add the body right here ravi starting tag and then the closing tag down here on line nine and then we'll indent everything inside of the body like that so moving on to the head that's where we add metadata and what do i mean about that well it can be many things for example styles so this link right here should be inside of the head we'll do head and then close it off here like that other things we'll have in the head is the title tag so let's have a look at what that is if we navigate over to the bbc football page and zoom in on the top you can see up in the tab it has a icon it says football dash bbc sport and all of this data both the fav icon at the beginning here and this sentence is controlled by elements we place inside of the head tag so if we want to add a title text in a tab simply write title and then for example google.com would be natural to write here though we haven't implemented tabs in the mini browser here on scrimba so you won't see that but had we done that it would have looked like this though it of course would have said google.com instead so we don't need that so let's just remove it another thing that is controlled by tags inside of the heads tag is how articles are shown on social media so if we zoom out a little bit here and click in on this article at the top here and if we now were to take this url and share it for example on twitter what we then would get is a different heading on the twitter card than what the article natively has and also a different image than the main image on the article so this is metadata that has told twitter that if this article is shared on twitter we want you to use this heading instead of the heading that is inside of the article and also this image instead of this image right here so that was a lot about the head tag we're not going to use the head that much but i wanted to give you an understanding about why it is important now there's one more html tag we need and that is the html tag in itself which should wrap all other html tags so we need to up here at the very top right html and at the very bottom close it off and also then indent everything inside of it like that and then there's one more thing which is to me a little bit annoying that we need that is the doctype declaration because you have to tell the browser that we're actually using html5 and not html4 that's just a version of the html specification and that is done by this line up here you can see it's blue and it starts with an exclamation mark so it's actually not an html tag it's just metadata for the browser because if you don't do this browser will assume that you're not using html5 but an earlier version of html and that might result in some quirks on the page though in 99 of cases there will be no difference between adding this and not having it so at times you'll probably see tutorials on scrimba where i've forgotten to add this because for the purposes of our example it won't make any difference but if you have something that you want to deploy to the world and have in production then you just have to accept that you need this sign up at the top and sometimes you'll see people write it in capital letters as well doesn't really matter i prefer having lowercase letters okay that was a lot of theory it's time to get your hands on the keyboard and luckily though we have a blog.html file which doesn't have the proper html structure so your challenge is simply to add the proper html document structure to this page and i don't want you to copy paste my tags but write them out on your own instead so that you build up that ever so important muscle memory go ahead and give this one a shot right now and then i will of course do it myself when you return back to me okay let's do this i'll start with the body as that should wrap our visible elements on the page like that then i'll do the head though we haven't linked to the styles on this page so the head will actually just be empty like this so i'll keep it on one line moving on it is the html document and that should wrap everything so i'll do like that and at the very end i'll add the doctype html to tell the browser that we are working with html5 and not html4 so if we now navigate over to the blog.html site you can see that nothing has seemingly changed and as goes for the main page itself this structure we've added doesn't result in any visible change we just have a more correct underlying code file to work with great job let's move on now you are going to learn about lists because let's say that you for example want to create some kind of a tribute site it could be for whatever for example uh i don't know the beijing winter olympics if that's one of your interests you might want to create a tribute site where you list out the top nations who competed or something like that and if so you would have to use an html list so let's first just figure out which nation actually won the most medals in the beijing olympics so i'm gonna click on the medals tab here on the olympic site and here we got it and zoom in a little bit and oh wow it turns out that actually norway my country completely obliterated the other countries with 16 gold medals over other nations like germany china and the us that is really astonishing especially considering the fact that the size of the norwegian population is this compared to the other nations here i mean way to go norway we gotta create this list in html okay so how do we do that well we have to use two different tags one tag for wrapping the entire list and another tag for each list item the wrapper tag is one called ol that's short for ordered list and then inside of the ordered list we place the list items the li tags so when we do this and write no right here render this you can see that the browser gives us a number as it is the first item in the list and also indents it a little bit from the left hand side so adding another one here it then gets the number two and is stacked below the first one so let's add the final ones like that looking pretty good we have a list just like on the olympic site now if we wanted to be a little bit more diplomatic here and not brag too much about this insane victory by norway we could change this ol to a ul that is an unordered list and as you can see then the numbers are replaced with dots now you might ask yourself well why do we need these unordered lists they look like kind of boring elements you just use in word documents or something like that well once you learn about css you'll be able to style your list however you want and thus make it much more usable if we for example head over to bbc sports here and right click on the navbar here and click inspect then we'll see that actually this entire navbar is an unordered list item with each of the categories being its own list items so lists are all over the web and important to learn okay now i'm going to remove all of this and give you a quick little challenge because i want you to create an ordered list inside of the body tag and then fill it with your top three favorite foods so go ahead and give this a shot right now okay hopefully that went well let's do it so we start out with an old tag that we're opening up and closing and as for the list items even though norway is a great winter olympics country it is a truly mediocre country when it comes to food so my favorite food is definitely from other places than where i'm from i love italian pasta i love japanese ramen soup and lately i've been really into podtai so there we have it rendered out on the page really good job learning about html lists let's keep up the pace and move on with the course okay now you have arrived to the main project of this section you are going to build a website about yourself and we're going to personalize it as well plus deploy to the world so that anyone around the world can visit this website it is going to be so much fun and here is the website itself as you can see it's pretty simple with hardly any styling by default just a little bit on the button and the input field here as with the border around this image and building this lightly styled design is the first part part one of the challenge and then in part two of the challenge we are going to go crazy on the styling with just a few parameters that you are to tweak and it's going to look so cool but let's not get ahead of ourselves here let's first just run through what kind of tags you need in order to build this website so first off there is an image tag and the image you should use should be added to the file system on the left hand side here as you can see there is a pair.jpg image here and the way to add an image to this file system is simply by drag and dropping it over this section next up there's an h1 here as well with the title of course you should write your own name not my name and then there's an h2 heading as we need some fun facts about you the fun facts itself are built using an unordered list plus list items inside of the ul element then there is a paragraph with a link nested inside of it that should go to your linkedin profile so the point here obviously is to replace all of this information with fun facts about you with your name with your image your linkedin profile so that when you share this with the scrimba community other people will be able to get to know you better and then finally we have an input field here and a button that won't really do anything because we're not hooking this up with a real newsletter we are just pretending that you have a newsletter that people can sign up to so once you've done this you've completed part one of the challenge and you've also filled up this body element here with html tags next you'll move on to part two of the challenge what you'll do there is take your existing design and modify it so if we head over to the index.javascript file you can see that there are a bunch of so-called javascript functions which probably look really scary at this point but don't worry the only thing you're going to do here is take the word that you see inside of the quotes right here and replace them with one of the words that are commented out in the line above because this will give you the opportunity to change the styling on the page according to what word you change this argument to so what you are to do here is look at the name of this function it says favorite movie genre and what is that do you like space movies scary movies military movies romantic movies cowboy movies and so on and then just take your preference and change it like this so if you choose cowboy for example what then will happen is that the font on the website suddenly became like a western movie that's pretty cool and moving on here you are to answer what is your favorite fruit is it watermelon tomato banana if it for example is banana then you should replace regular with banana and what will then happen if you run the cold then suddenly your page is banana colored really nice so now you are a cowboy banana that's pretty cool finally there's two more parameters you can tweak first tell me is your favorite mode on your computer light mode or dark mode if you choose dark and run the code again then you can see the colors have flipped and now it is primarily dark with the brown background and the light yellow color as opposed to how it was previously with the yellow background and brown text color and then at the very end you are to choose what kind of style you like your edges to be sharp soft or round let's say you like round well then you'll simply replace sharp with round and there we go we have a nice round layout where the image and the input and button now have a much more round feeling to it so what happens here is that these are javascript functions that execute code which you can see further down in the index.js file and change the layout accordingly though you should ignore everything below this line don't even try to understand it it's far outside the scope of this course and you're gonna learn javascript later in the front-end developer path anyway so it's nothing for you to worry about right now now i'm going to reset all of these set these two to regular and these two to light and sharp as that is the default styling that we should have and then i'll leave you with this image right here as it now is your turn to build this layout personalize it with the javascript functions so that you have your very own completely unique website so go ahead and do this right now and then i will see you when you return back to me okay hopefully that went well let's now do this together first we need the image tag so i'm gonna do img the source is the pier.jpg which i'd already added yes there we can see it is rendering properly next up there is an h1 hi my name is pear like that very good moving on we have the h2 fun facts about me like that and then there's the unordered list and the list items so i'll do ul close that ul because the list items need to be inside of the ul and the first one is 36 years old i'm gonna copy this one like that and i live in norway and i sing in a choir and there we go looking pretty good next up there is the paragraph with the inline anchor tag here's the paragraph connect with me on linkedin like that oops it should say let me on linkedin here and then we are to wrap linkedin here into an ahref like that and then i'm going to paste in the url to my linkedin right here and if you actually want to connect with me on linkedin feel free to click on this link as soon as i've added the target equals underscore blank so that it opens up a new tab okay finally we we need to add the input and the button input type text like that and button with join newsletter as the text yes that worked and we finally just need the placeholder in the input and here we're going to write enter email enter email like that and that actually looks pretty good to me that is what we were looking for yes okay next step we are going to personalize it this will be easy for me i really love movies about space so i'm going to choose space here as my favorite movie genre it gives me this really neat sci-fi-ish font and i am a huge avocado fan so gotta do that looking pretty good i tend to prefer both light mode and dark mode but let's try dark yeah not bad and as for favorite edge style i'm not gonna do completely round not completely sharp but something in between as i think the answer often is something in between and yes there we go pretty cool website now the final thing i want you to do is head back to your note where you created your website and then click on the bottom right icon the cog wheel and choose download as zip because that'll download your project through your local machine and we need that in order to deploy this project over the next few scripts so what i'd recommend you to do is on your computer create a dev folder and move that zip file you just downloaded to this dev folder double click on it to open it that'll give it this long obscure id so if i were you i would change that to something understandable for example personal site and just save it so that you have your project neatly placed with a good name on your local computer so that we are ready to share it with the world over the next few scrims it is going to be epic so i look forward to see you in the next room after you've done all of this i'll see you there in order to get your personal site live on the world wide web we are going to use a service called netlify as it is both free easy to use and powerful as it's used by tons of professional developers so if you're following this course on scrimba.com just click on this slide right here and you'll be taken to netlify or if you're following this course on youtube just head over to netlify.com and you'll get to the exact same page once you're there i want you to click at the sign up button as that'll take you to an authentication screen where you can choose a bunch of different options i am going to go with the email option so i'll click on that and fill in my email and also choose a password then i'll click sign up which again will trigger netify to send a verification email to my inbox so i'll head over to my inbox and click on verify email that'll take me to the netlify onboarding page where i have to tell them a little bit about myself so here i'm going to say that i'm using netlify for personal reasons and opening up this select box here i'm going to classify myself as a hobby developer and my first project will be a personal slash portfolio site then i'll scroll up it down and give my team a name i'm just going to call my team peer as it's common to use your first name but you can choose whatever name you want on your team once you're done with all of that click on the setup and continue then you are taken to the page where you are to deploy your first project you can either import an existing project start from a template or deploy manually and that's exactly what we are going to do so what i want you to do here is return back to the folder you created in the previous scrim called personal site and then mark all of the files and drag and drop them into this rectangle once you've done that your browser might ask you if you actually want to upload the files to the site just confirm that by clicking on upload and then netlify starts its magic at this point they are working under the hood deploying your site to the web so here you might have to wait for a couple of minutes until you see this icon right here turn into a screenshot of your personal site now if that doesn't happen within a couple of minutes just try to refresh the site itself as that'll probably do the trick then you can simply click on this url right here and boom you have deployed your site so that anyone in the world can access it that is a phenomenally great job and you should truly be proud of yourself the final step i think you should do now is to share your creation with the world i would recommend you to use either linkedin or twitter as both of those have huge communities of developers so what you should do is basically what jolene and jess are doing here share a link to your personal site write a couple of sentences about it and also feel free to mention anyone else who've been involved in this project and add a relevant hashtag like jess is doing here for example 100 days of code that is a great hashtag to follow and to use as it puts you in touch with a bunch of other people online who are going through the same learning journey as you are so i am looking forward to see your personal site either on linkedin or twitter and i'm also looking forward to see you in the next scrim guess who is my favorite person in the world right now you are because you have just completed the html section of this course and that is really well done now let's have a quick look at what you've learned starting off you learned about the core html tags that is for example the heading tags like the h1 and h2 and also the paragraph tag next you learned about nesting which is how we place certain tags inside of other tags which again are inside of other tags creating this tree-like html structure and you learned about buttons and input fields which are two tags that help us make our website interactive so that users can perform actions on our website we also learned about the important anchor tag as that is what allows you to create links in between different websites or internally on a website in between pages another thing which we had to look at was the document structure because a proper html document requires a doctype an html tag a head tag and a body tag and then of course you learned about lists both the unordered list you can see here and also ordered lists and then at the end we did something super cool which was to deploy our website using netlify so that it lives out on the world wide web so at this point you might be a little bit overwhelmed that's totally okay feel free to take a little break now and when you return back you are going to learn about css aka cascading style sheets which is the tool we use in order to make our websites look good so that is going to be a lot of fun i'm looking forward to see you in the next section welcome to the second section of this course where you are going to graduate from html into the world of css or cascading style sheets as it stands for this is super exciting because now you'll be able to make your sites look beautiful as well so the main project of this section is actually the google.com homepage because this time around you are going to write the css as well and this probably looks a little bit frightening right now but don't worry i'm going to take you through it step by step and actually before we get going with google we're going to get you familiar with the syntax here and have some fun destroying wikipedia.org so it's going to be a lot of fun and we have no time to lose let's just get started okay so let's get you writing your first lines of css straight out of the gate as you can see here we have an html file which has a body that simply has please accept our cookies as text directly in the body tag and that is rendered here in the mini browser however as you'll notice the style doesn't exactly look like default browser styling and that is because we've added this line here which says link meaning it's linking to something and what kind of relation does this link cast to our html well it's rel stylesheet it is a sheet that contains styles and where does this sheet live well that is dictated by the href attribute which you probably recognize from anchor tags and it's pointing to styles.css and lo and behold in our file system we have a styles.css file and there we can see a few lines of scary looking codes you've never seen before perhaps however don't worry we're going to go through this so what happens here is that this css code is being pulled into the html file by this line 3 here and then it is applied to the website when it is rendered so if we were to comment out this line three here and re-run the example it'll look very boring like this so let's undo that it doesn't exactly look great now either but it's at least some styling although this cookie widget is a little bit weirdly designed in my opinion which leads me to your challenge you are going to redesign this cookie widget by changing the values inside of this body selector and now you might ask well what is a selector okay let's go through that because that is the basic css syntax you need to know in order to solve this challenge so css works by selecting certain elements on the page that is html elements and then styling them however you want and the element you select is what you start with when writing a css rule here we are selecting the body that is the exact same thing we're doing here and what's our body well that is this tag right here then in order to apply some specific styling to the body tag we write an opening curly bracket and a closed curly bracket and then inside of those brackets we have something called a property which in this case is color and a value which in this case is red so here we're saying that the color which is actually text color that's what color means here the text color in the body should be red so if i now change the color property from blue to red you can see in the mini browser we have changed the text inside of our body to red because if we head over to the html this text is indeed inside of our body now as you might have noticed as well the property is followed by colon and the value is followed by semicolon and you have to have that notation otherwise you'll break the example so what i want you to do now is redesign this cookie widget make sure you change all of the listed css properties that's background color font size font way text align and margin top and what you'll change it to is up to you but i've given you the hint of what kind of values the properties expect here in the comments on the right hand side you can see comments in css is done with this star and slash character so the grayed out text as in with the html is not interpreted by the browser it's just help text for you in order to solve this challenge and i'm intentionally not giving you any more information about what each of these properties mean because i think they're pretty self-explanatory so i want you to experiment with changing them and draw your own conclusions as to what for example the font size does to the styling on our page and then once you've done this once you've redesigned the cookie widget move on to the next scrim and then i will show you how i would do it as well good luck so really good job writing your first lines of css that is no small accomplishment now i'm going to show you how i would design my cookie widget so i want my widget to have cookie colors so for my background property which is what sets the background color of the body which fills up the entire browser at this point i'm going to choose a color called saddle brown like that and you might wonder well how do i know that saddle brown is a color that css supports well you might have noticed as you wrote css values that vs code or editor starts suggesting values for you as you start typing so that is how i found saddle brown this suggestion box here isn't recorded by scrimba itself so you won't see it in recording but you will see it as you interact with the code yourself so we have the background now let's move on to the color here i don't have red i want to have something a bit more cookie-ish and it just happens to be a color called chocolate like that starting to look pretty cookish the font size i want to be larger so i'm going to set that to 25 yes that's pretty good okay font weight that dictates the thickness of the font can be lighter normal or bold i want it to be bold like that because we want to state clearly to our users please accept our cookies and text align can be left center or right let's first see what it does if i do left you can see now it start on the left hand side will be a bit more visible if i enlarge in the browser and i can do center yep there it is centered and right there it is pushed all the way to the right hand side let's center it for this time which means that we only have the margin top left and that is also a pixel value as the font size was but it's set to five pixels let's remove that let's bring it down to zero and see what happens oh you can see the text jumped up a little bit and now there's no spacing in between the top of the browser and the text itself so it adds margin that is spacing to the top so this means that we can use this in order to push the text down to the middle of the browser kind of centering it vertically let's try for example 20 not fully centered let's do 40 yes that looks really good now before we move on there's one thing i want to mention which is that normally when you deal with colors in css you likely won't see these plain english descriptions of colors instead you'll rather see is something like this so this weird six character long expression with a hashtag in front of it and this is called a hex color code and that is a description of the color it's a recipe for how much red green and blue this specific saddle brown color consists of because as you can see nothing changed in our browser when i did this but if i change the recipe for example changing this 8 to 1 boom you can see that the color is suddenly completely different now we're not going to go into how these hex color codes work on the inside as that's outside of the scope of this lecture and it's certainly not expected that you remember what kind of colors the different hex codes refer to so now you might be a little bit confused and overwhelmed about all of these properties don't worry about it you're not expected to remember everything right now i just wanted to dip your toes into the water so that you were exposed to them and then you'll certainly get plenty of practice with all of these properties later down the line so let's just move on now that you know enough css to be dangerous let's use your newly acquired superpower in order to destroy wikipedia and for that we need a wikipedia page and about the coolest one there is is this list of helicopter prison escapes i mean oh my god how insane is that so click this image and you'll be taken to this article and then i'll show you step by step how we can destroy it with css so the first thing you need to do is to right click that'll open this menu where you can choose inspect and once you click that the dev tools will open then choose the icon in the far left as that allows you to use your cursor to select elements on the page so that when you hover over an element like this one you'll see that the dev tools select sets for you so if you move your cursor over to the logo you'll see that one selected and if you move your cursor over to the main part of the screen here you can see it selects the entire article once you're on that selection i want you to click because that'll select the specific html element here in the elements tab and don't worry about all of this you do not need to recognize the tags and attributes and everything you see here what i instead want you to do is head over to the right hand side where you see element dot style click there and you'll be able to actually apply css directly to this page so you can for example write background red and boom there we have really ruined this article then if you select another element on the page from this body content element here you can do the exact same thing click on the element style and now for example write font size and 30 pixels and there you go now you can click on the x icon in the far right corner here and then you can read about these helicopter prison escapes with a really bad background and huge text if that's what you prefer so feel free to spend an hour in this article and i will see you in the next scrim okay so now it's time for you to yet again build the google.com homepage but this time around you're also going to write the css so that you'll understand everything that goes into building this elegantly designed search engine as you can see i've set up the basic skeleton here in the html file for you in the body tag we have an image which is pointing to the google.png image which lies in the same directory as our index.html folder up here and we have an input type text which is our search field and we're only going to start with these two elements and then later move on to the buttons now as you can see in the mini browser here this looks horrible it has no styling so the logo is far too large the input field doesn't look very good so in short there's a lot of work to do here but before we can start writing css you need to link to the css file you can see i have a style css here which just sets the background of the body to red as a way of testing whether it is actually a link to the html currently it's not you are going to have to link to the css file on your own and if you remember a couple of scrims back i showed you how to do that though please don't look back at that scrim in order to solve this challenge instead google it because i do that almost every single time i have to link from an html file to a css file so you should not be ashamed for googling such a quote-unquote simple thing instead just do that right now because it's important practice and then when you come back i will show you how i would do it as well okay hopefully that went well now let's have a look at how we can solve this so i would simply type how to link to css into google and click at the top result this happens to be a w3schools article here you can see that there's a few different ways you can import css into the html file but we're only going to worry about the first one here called external css as you can see if we scroll a bit down what we do is we type link rel equal style sheet and href with a pointer with the css file itself so we'll do link l equals i'll sheet href equals styles.css and then closing it and if we now refresh the browser boom there we go it is red looking horrible so we can remove that so that it looks white again but now we know that we have linked the css and the html together so we are ready to move on and start styling our page the first thing we want to fix in our example here are the widths of the elements because if we compare it to the finished sign you can see that the input field is meant to be wider than the logo however in our example that's not the case quite the opposite actually the logo is much wider than the input field so we need to shrink the logo and then make the input field wider so i'm going to start and do one of these and then you will do the other i happen to know that the width we want to have on this input field is 400 pixels what i'm then going to do is target the input field using the element name and create a css selector just writing input then open and close curly bracket and then simply write with and 400 px and boom there you can see suddenly the input field widened quite a lot and as you might have noticed we're using this pixels value here again which we've used a couple of times already actually and if you're a little bit confused as to what a pixel is you can think of it as the smallest unit of space that our screens can render so a pixel is just a tiny square so tiny that we actually need 400 of them stacked up besides each other in order to get a width of this size so with that i want you to fix the width of the google logo select the image tag and set the width of the logo to 300 pixels go ahead and do that right now and then i will show you how to do it as well when you return back to this scrim okay let's do this i'm going to break this down into a few lines so i get some space above the input field and then target the img element the image element open up the curly brackets and do with 300 pixels like that we're not quite yet at the finish design but the ratio between the logo and the input field is now a lot better great job let's move on okay i've discovered a problem with our google site which is that if we make the browser really wide you can see that suddenly the items stack up besides each other on the same line and that's obviously not the kind of behavior we want we want them to always be stacked on top of each other and in order to fix this you have to learn about inline elements versus block elements and that's best understood through the lens of an example so let's say that you for example have a collection of things you want to showcase you could be like george franson for example and collect dinosaur poo he actually has the world's largest collection of fossilized feces and naturally he wants to exhibit them in a posium and if he were to use display inline on his images they would stack up besides each other like this so kind of like in a line horizontally however had he used display block on his images then they would stack up on top of each other so rule of thumb is display block stacks on top another way to look at this is that the block level element blocks out the rest of the available horizontal space so that nothing else can be placed there and that is regardless of how wide this image is the content itself this play block requires control over all the horizontal space in its given container so when this block image is placed here and you add a new image it would have to be placed underneath the previous one and if it does display block as well it'll block out the rest of the available horizontal space and the next image have to be placed below that one again and so on so the solution is obviously to turn these elements into blocks and i'm just going to give you the syntax here this is how you write it display colon block go ahead and do that for both of these and observe what happens to the example when you make the browser wide good luck okay let's do this so i'll do display block up here and the same here if we look at the browser seemingly nothing has happened however if we now make it wide you can see yes no matter how wide the browser is these will always stack up on top of each other so great job let's move on the next thing we need to fix is the lack of white space above our google logo because if we take a look at the design here we want quite a lot of space in between the top of the browser and the logo and i'm not going to tell you how to add that but if you can think back to the very first scrim in this section we added some space above the text in our cookie widget and that specific space is called margin or margin top to be specific so your job is to add some margin on top of our image right here you can start on line seven so there are example here get some breathing room some white space above the logo and the input field go ahead and give this one a shot and then i will of course show you the solution when you return back to me okay hopefully that went well if not no worries i really pushed you out on thin ice here so it's completely okay if you didn't remember that the property is called margin top and what you add there is a pixel value so for example 100 px and there we go we've now added a margin on the top of our image and while we're still quite far off from our provided design here we are getting closer great job let's move on now while it totally works to add the margin top directly on the image here you'd most likely not see professional developers do this because what they do instead is wrap these two elements in some kind of container and then control the positioning of these elements indirectly via that container and in order to do this you have to learn about the div i'm going to create an opening div and then indent these two and then a closing div below here now if we run this code seemingly nothing has happened because the div actually does very little in itself though it is indispensable for web developers just to show you how important it is let's take a look at facebook and my timeline here i've opened up devtools and inspected one of the timeline items and you can see it is actually a div inside of a div inside of another div inside of yet another inside of the inside of a div divs really do rule the world so it's important that you learn about them and the way we'll use this div now is by removing the margin top styling from the image and then add it to the div itself and the reason this is important is let's say that for example google decides to create a video here instead or a interactive doodle or some kind of game they often play around with the google logo well if so it's a really bad idea that it is the image itself that controls the margin from the top of the browser and down to the content because that image might be removed so it is a solution that will get you into trouble in the future so what we'll do here is we'll simply instead target the div and then remove the margin top from the image and boom it has popped up now we lost all of our white space but if we add it back to our div we are back at the design we started out with seemingly nothing has changed but as you know we have a better html structure so we have definitely made good progress here so with that let's move on to the next scrim the reason you need to learn about classes now is because our current setup where we simply have the elements like this and then selecting the element using the element selector in css will give us bugs down the line because when we add the two buttons beneath the input field we'll actually wrap these two in a div as well and let's see what happens at this point what i'll do now is simply add the html for these buttons down here beneath the input field so it is a div with two buttons inside of it and then you can see we are closing that div the inner div and then we are closing the outer div let's run this code and oh wow what you can see is that the spacing between the input field and the buttons is totally off and that is because our css element selector here selects any div it can find in the html document and applies the margin top to it so it doesn't just select the first one but it can select thousands of divs so this is a very generic solution and likely not something we want to use as we want to have multiple divs with different types of styling in our html element so let's now instead fix this by doing the following i'll write class equals then for example main this here is an attribute called class so it's built into html and this here is the name i'm giving my class i want to call this div my main element and now the way i select that in the css is by instead of just writing the element name simply doing dot main like that now if i rerun this code you can see now the margin top is only applied to the outer div our main class and not to the div which wraps the two buttons so that is exactly what we needed now i'm going to remove these two buttons here because we don't want to deal with them just yet and then i'm going to give you a challenge first you're going to add a class to each of these two elements that is the image and the input you have to decide what you will call the two classes but make sure to give them different names and then you're going to in the css replace the element selectors with class selectors so that is the img selector here and the input selector here and obviously the css class selectors you're going to replace them with is the ones you have added to the elements right here so go ahead and do this right now okay hopefully that went well let's now do it together so for the image tag i'm simply going to do class equals then i'll call this logo dash img so here i'm using a convention where i'm first giving my class a descriptive name and then using a dash and then specifying the element as well this is an img element but it could have been for example an svg or something else now i don't expect you to have followed the same convention there are plenty of css conventions and it doesn't matter at all what you used in your example you can call your classes whatever you want okay for the input we'll do class equals search dash input like that okay let's move through the css then i'll replace this with bot now you can see it broke the layout because this styling now is not applied to any element so we need to do logo dash img like that and here do dot search dash input and there we have the exact same example didn't change at all but we now have a more flexible solution that scales better so great job solving this challenge let's move on now it's time to take a closer look at margins and you've already dipped your toes into this as you have used margin top so you might have some intuition about what margins do however now you're going to learn it properly through creating flags with css because flags are just awesome i mean take a look at this flag here for example from the republic of venice estate which existed for over a thousand years in europe and it contains of course a flying lion holding a book i mean what's more natural than that or this one right here for the isle of man i mean have you ever seen a more creepy creature than this three-legged thing right here imagine having that thing running after you that would not be fun and this flag would be really hard to create in css actually so we're not going to create this one we're going to start off at a much easier level with just some very simple shapes so let's have a look at those actually here is what we're going to work with as you can see there's simply three divs inside of the body tag and each div has a class red blue or green if we check out the styles.css you can see that these three classes apply a background color to each of the elements and sets the height to 100 pixels and here we have the result three rectangular boxes that are stacked on top of each other and that tells us that these are display block because display block stacks on top there's one thing that bothers me here and that is that we have a little bit of white space around the three items why is that well actually it's because our browser is trying to help us here it's assuming that we want a little bit of space around the body tag so that these three don't touch the edges of the browser so what's actually going on here in code is that the browser targets the body and sets a margin of eight pixels if you notice when i added this nothing changed so if i remove this it's still the same meaning that this style here is applied automatically so that means that margin is actually the space around an element because now if we change this to zero boom there you can see suddenly our divs touch the edges of the browser now here at the bottom they stop after 300 pixels since we've told them to so this margin zero here seemingly didn't change anything at the bottom because the bottom contains white space anyway if we make our browser tall enough but anyway that's a digression let's get it back so that the browser is completely filled up with these three items and now let's play a little bit around with margins so what do you think will happen if i add a margin top of 10 pixels on the red here take a guess okay margin top 10 pixels boom it added 10 pixels on the top what do you think will happen if i add margin left 10 pixels as well let's try it okay so it added 10 pixels on the left hand side it's only on the red rectangle not the blue or green rectangle likewise if i do margin 8 and pixels it adds 10 pixels to the right hand side as well if i do a 100 it eats up almost a third of our red rectangle okay so now it's your turn i want you to add 100 pixels of margin on the bottom of the red box so go ahead and give that a shot right now okay if you did margin bottom 100px like that i want to congratulate you because you just created the flag of monaco really good job creating your first css flag now let's do that yet again here is your challenge you are going to create the flag of the gambia and here we have that flag however there's a catch you can only do this by applying styles to the blue box so by adding margin to this css rule right here so go ahead and give that a shot right now okay hopefully that went well the way to do it is by doing margin top let's try 10 pixels and see actually i think we want our white space to be a little bit more than 10 pixels so let's do 20 like that then margin bottom as well 20 pixels and there i think we have a pretty good flag for the gambia now before we move on to our google project there's one little weird thing i want to tell you about margin top and bottom because what do you think happens if i add for example margin bottom of 15 to this red element here well according to my logic the margin right here would be 35 pixels because we added 20 pixels on top of the blue and if we add 15 at the bottom of the red one that should be total however now that i added this nothing happened and that is because margin top and margin bottom will in many situations collapse into each other so that as long as this margin is smaller than this this will take precedence and it's only when this one becomes larger for example 25 that it will kick in so let's take it back to 15 and to make things even worse there's actually scenarios where this doesn't happen however digging into that is outside of the scope of this lecture i just want you to be aware of it because if you're suddenly in a situation where your margins don't seem to add up it's probably because of so-called collapsing margins okay with that let's move on okay we're back at our google project i want to give you a quick challenge i want you to add some space between the logo and the search field because as you can see here there's some spacing in between the elements in our design however in our project now they are crammed together there are two ways you can do this using margins and i want you to think about which two ways that is and choose one of them go ahead and do this right now okay hopefully that went well let's do it so you can either add a margin bottom to the logo or you can add a margin top to the search field i'm going to go with adding margin bottom to the logo as i think either way is as good as the other at this stage margin bottom and how much do we want to add well let's try 20px and yeah as you can see we've got some spacing the bottom of the g is not touching the top of the input field and if we compare that to the example i think it looks more or less the same so great job let's move on okay now you are going to learn about centering elements in css and that is a scary topic for a lot of developers so scary that this stack overflow question about how to horizontally center an element has been viewed 4.5 million times so if you think this is a little bit confusing you are in very good company so don't worry about it so with that in mind let's move over to our example you are going to center this dinosaur poo as you can see in the css it has just one property set at this point which is a width of 200 pixels that is because the image is so wide originally that if i don't set that width it'll just take up more space than we have available and setting the width of it is actually an important thing in order to center it because there are three things that need to be in place when we are to center elements with the technique you are about to learn aka centering with margins and these three components are first the element needs to be display blocked because how is an element supposed to center itself if it doesn't command full control over all the horizontal space if it's display inline and allows other elements to stack themselves besides the element well then it won't be able to center itself because that space now is busy with other things so in order to center this poo it needs to control all the horizontal space so it needs this block like that now that didn't change anything but under the hood the poo now controls the full horizontal space okay the second part is that it must have a width and that is what we've done here already because how is this item supposed to be centered inside the browser if it is wider than the browser itself that's often what happens with either large elements or with some html elements who just naturally actually expand to take up all the available space in the block so we have to make sure that our element has a width and finally we set the margin on the left hand side and the right hand side to the value auto let's just do that margin left auto oh wow now it pushed the poo all the way to the right hand side because auto here means take up all the available space and since this is a block element the available space is all the space that's left after the poo has taken up its 200 pixels so it just ate up all of this space and turned it into margin however at this point margin right enters the party margin right and says i want the available space as well and at that point the margin left and margin right goes into discussion and decides well actually since there are two of us here pushing on each of the side of the element trying to get all of the available white space let's just divide it evenly amongst both of us and the result well it is that the item is centered so that was a long explanation of centering with margins if you feel confused don't worry about it right now all you need to do is remember these three conditions and just be aware of the 4.5 million other developers who are in or have been in the same boat as you let's move on to the next scrim okay we are back at our google project now your challenge is to center the logo and the search field using the technique you just learned so go ahead and give that a shot right now and then i will of course show you the solution afterwards as well okay as you hopefully remembered the way to center an element which is display block and has a width is by adding margin left auto and margin right auto so let's do that margin left auto and as you can see that pushes the logo all the way to the right hand side because the margin left is set to auto and it takes up as much space as it can we'll do the same thing with the right hand side margin right auto then the right hand side starts pushing back again and when they're both taking up equally as much space the margin left and margin right kind of decides yeah let's not argue anymore now we have a nice balance and whoa lo and behold our element is centered so now what we can do is be super lazy and copy that code and paste it in down here and boom our input field is centered as well and our project is starting to look a little bit like our finished design so this is super cool let's just keep up the pace and move on we need to take a little step back and learn a new css concept which is the close relative of margins called padding and we're of course going to learn that through the lens of an example so here i have just a simple div which contains a little bit of text or specifically the two first sentences in the white paper behind bitcoin and let's say we want to turn this into a nice looking card that people can read if so we'd probably create a class can call it card then of course in the style.css we'd select that card and apply the styling as for now it just has one property set which is the color that we've set to a shade of black that isn't pure black but a little bit softer so to speak that is because by default the browser uses pure black as the text color and pure white as the background color and as a rule of thumb you never want to have pure black on pure white that's not a pleasant experience for the eyes so instead we went for this but that was the digression let's move on with turning this into a nice looking card so a card needs a background color so let's just do background light gray for example like that and we also don't want our card to be full width because as you remember divs are block by default and take up the full width if you don't specify any width on it so we're going to do with for example 300 pixels like that and then we also want some space above the card that is of course margin top let's push it 50 pixels down from the top and finally it should be centered so let's do margin left auto and margin right like that okay so now we have something that looks at least a little bit like a card but there's one problem here you can see the text is crammed all the way into the edges of the which doesn't look particularly good and that is where padding comes into play so now i'm just going to apply the padding by doing padding and for example 20 pixels like that as you can see that created a little bit of space basically some breathing room in between the text and the edge of our div container here and if i do 50 you can see it's even more breathing room so where's margin adds space on the outside of our div the card which we've selected here padding will add space on the inside in between the content and the edges of the container or the div so margin kind of lives up here and down here if we are to visualize this in our html where's padding lives on the inside of our element that is here and here and now you might wonder well why did i just write padding whereas for martin we're specifying each of the sides and well you can do exactly that on padding as well this padding 20 pixels right here is the exact same thing as writing the following padding top 20 bottom 20 left 20 and right 20. so with these four lines we can actually delete this one up here and then we have the same convention as we're using with margins it's just that you can use padding 20 pixels like that if all of the values are the same it's basically a shorthand and now that we have all of them written out we can play around a little bit with it perhaps add a 100 pixels on the left hand side looks really weird and 100 pixels on the top as well and suddenly our card does not look very good but let's get it back and now i want to give you a challenge i want you to add padding to make our card look like the provided design and the provided design is right here you can see it's a completely broken card as we've been ruthless about our padding and i've actually removed all of the padding rules from the css as i want you to build some muscle memory writing padding so go ahead and make this card look like it does in the slide and then return back to me once you've done it okay hopefully that went well if not no worries let's do it together as you can see here it's completely crammed into the bottom left corner which means that it doesn't have any padding on the left hand side or any padding on the bottom but a ton of padding on the top and a ton of padding on the right so i'm just gonna do padding top 100 pixels something like that yeah seems pretty much what we have in the design as well and then do the same padding right 100 pixels like that and to me that looks actually pretty much like our design i don't need to write padding bottom or padding left now so i could do it i could do padding bottom zero pixels or just zero and padding left zero as well though that didn't change anything so it's actually not needed because by default the padding of a div is zero so however you solve this great job let's move on so now you've learned about controlling the space on the outside of the element with the margin and on the inside of the element with the padding but wouldn't it be nice if we could also control the border in between the margin and the padding and it turns out we can through you guessed it the border property because if i write border here and then specify for example two pixels thickness solid in shape and then color red you can see then we get a border which is on the outside of the padding but on the inside of the margin and if we change any of these three values here it'll update accordingly so let's try eight pixels with instead you can see it's much thicker now instead of solid we can do odded like that pretty weird and instead of red we can do for example fff white in hexadecimal or just right white like that or just blue so it's a little bit clearer now there are many types of borders but in 99.9 of the cases you want to use solid like that and also very often you'd want to soften up these corners and you can do that with the border radius property and there you specify a pixel value for example 30 pixels and boom there you can see we have this much softer corners if we crank this up to 100 or a thousand it stops at some point because then the edges have simply turned into half circles so at some point there's no use going any higher now this looks pretty bad so what i want you to do now is fix it up so that it looks like this and i'm not going to give you any of the values i've used here just a little hint i took an already existing color in our box and used it for the border so that's a common web design trick to reuse colors and not have too many different colors so if you think this is pure black you are wrong so go ahead and change the values of the border and border radius so that our example here matches the design i've provided in the slide good luck okay hopefully that went well so let's start with the border 8 pixels here looks a bit too thick for me so let's try four instead like that i think that matches better yes and the color i gave you a hint was just the blackish color we have for our text like that and the border radius is much smaller let's try 10. it's this still looks a little bit rounder so let's try 20 yes there i think we got it great job now a cool thing to do in order to inspect the margin border padding and size of the element in general is to open up the dev tools which can be done by right clicking on the nav bar here and then clicking in spec and then this dev tools panel will open here clicking on the select icon on the left hand side and then hovering over the element finally clicking at it there you will see that we have selected the element in the elements tab and under the styles tab you can see the styling we have applied using css so here you can actually modify them if you want but we're not going to do that right now we're going to scroll down and verify that our margin border and padding are correct so if i hover over the margin here you can see up here in the mini browser it is marked in orange and the values are provided down in the box here if i move over to the border you can see that border is now selected in the browser and is indeed four pixels as we code it up a minute ago if i move over to the padding you can see that is also indeed 20 on each side just as we want it to be and finally if i hover over the center here the content is highlighted and the content of this div is just the text and as you can see it is 300 pixels wide just as we said it has so it's working as expected and the height is dictated by how many lines of text are two sentences required so using this technique of inspecting an element and its sizing properties like this is a really good way of debugging if something for example looks wrong because it gives you an ability to verify if the numbers here match up with what you've tried to write in your css so now that you've learned all of that i want to tell you the name of this and it's actually called the box model and to be honest i've never really liked this word it sounds more complex than it is in my opinion it's just spacing around the element a border spacing on the inside of an element and the content itself but in web development we call this the box model so you'll probably hear this name come up from time to time but you shouldn't fare it you know exactly what it is and you've used all of the properties in the box model so don't worry about it actually let's give you a new box model practice in the next scrim i'll see you there okay now you are going to create a really neat looking button namely the following button on twitter let's zoom in a little bit and here you can see it this is the button you see if you already are following someone and we zoom out again this is the scrimba twitter profile you should definitely just click this image and follow us because we share a ton of useful tips and tricks and career advice for aspiring coders here so it's definitely worthwhile anyway now you are going to use the things you've learned about padding border border radius and so forth in order to make this button right here with the ugly default styling look exactly like this or not exactly as we're not going to worry about the font it is a little bit different but other than that you should try to make it look identical i've given you some hints here for example the border color is this hex color right here and the text color is this one right here and also you need to remember to adjust the font weight and i don't think you've done that ever since the very first scrim where you wrote your first lines of css so you might have to look back so that you figure out how to adjust the font weight or you can google it up to you anyway just go ahead and give this your best shot and if you at some point get stuck or don't know how to do it no worries we are going to do it together afterwards as well good luck okay hopefully that went well let's do it together i'm going to target the button just using an element selector like this and now let's pick the low hanging fruit namely the ones we've gotten here already for example by doing color and then copying this color right here okay that didn't change much at least not visibly then let's do border and i'm going to start with one pixel solid and then the border color right here like that okay so it looks a little bit different now but not quite this one thing we can clearly see is that this image has a white background whereas ours is still a little bit gray so let's do that as well background white okay yes but our button is much more crammed there's too little padding whereas here you can see we have a little bit of padding on the top and the bottom and actually quite a lot of padding on the left and right hand side and that's actually a little design tip right there what you'll often see is that buttons have more padding on the left hand side and the right hand side and they have above and below so let's try padding top 5 pixels for example padding bottom 5 pixels and then we'll try left 10 pixels and write 10 pixels as well how does that look not too bad but actually it looks like this button has even more so we've added half as much on the top and bottom as we have on the sides so let's crank up both of these a little bit i'm going to select both of these and do eight top and below and select both of these and do 16 left and right yeah i think that's more like it now one thing that definitely is remaining is the rounded edges here so that is the border radius added up here with the border let's try 10 pixels it's a little bit round now but not as round as the twitter button so let's do 16. yeah more like it can we go higher yeah i think we can go to 18 that looks quite good to me if we compare to this one and then finally we needed to remember the font weight which i can do font weight bold like that that looks a lot better i think the final adjustment i want to make is adding even a little bit more padding around it because now that i look at it it feels like this is a bit more spacious so here we are really in the nit picking area but let's try 10 on both of the top and bottom and let's try 20 on the left and right and what's interesting now is that since the box now has grown in size because it's affected by the padding the border radius can also be cranked up a little bit i think actually we can do 20 now yes because the bigger a box is more pixels you need to add in order to get this fully soft looking button which essentially has two half circles on each of its sides so looking at the example and comparing it with ours i think we have reached our goal and if your values are different than mine that does not matter at all you're actually creating the button of a huge public company here you are just learning basic css so it's totally not expected that you create buttons as neatly as twitter does as they probably have a team of developers and designers working just on this profile page so however it went be proud of yourself and get ready to move on with our google project i'll see you in the next scrim okay we are back at our google project and now you are going to fix the design of our search field and you're actually going to get a design spec the proper walkthrough of how i want it to look so here i've opened up the dev tools actually on the right hand side as i want to inspect the box model of this element with you and if you wonder how i managed to stick the devtools to the right hand side here just click these three icons if you're in chrome then you can choose the dock side so let's move on down here to the box model of the input field and if i hover over the content in the box model here you can see that it says 400 pixels times 24 pixels and you can see the content is marked in blue in the mini browser here so that means that our width is 400 pixels we know that because we set it ourselves here and the height of the content should be 24 pixels okay let's move on to the padding if i hover over that you can see it's green and it's highlighted in green in the mini browser the padding at the top and the bottom are 10 pixels as you can see down here and the left hand side and right hand side have 30 pixels each and then if we move over to the border you can see that it's simply one pixel all around so here is your design spec given to you by your hipster designer down in the bottom right corner here height of content 24 pixels but do remember that that is actually the height of the inner box here not the height of the total input field as that also contains the padding and the border but the height property should be 24 pixels the padding above and beyond as said 10 pixels right and left hand side 30 pixels thickness of border 1 pixel the color of border is this and then finally also the border radius is also a value that our designer has been kind enough to give to you so take this design spec and implement it using css okay hopefully that went well if not no worries we'll do this together right now so starting with the height of 24. there i'm going to just write 8 24 pixels like that okay so it became a little bit taller now next step is the padding top and bottom was 10 pixels so padding top 10 px bottom was also mpx like that okay the padding left and right hand side were 30 pixels according to the spec so let's implement that like that and then we'll move on to the border one pixel and this hex code right here so i'll do border and here we have to provide it with three values so one pixel it is going to be solid and the color is dfe1e5 like that looking pretty good the final thing then is the border radius and that should be 24 pixels according to the design and look at this it is starting to look really professional so really good job if you did this challenge if you did a couple of mistakes no worries at all actually i also did a little mistake here according to best practices when setting heights for input fields because actually i want to show you that this height of 24 pixels here is actually not the way we want to do it because if i google set height of input field css and then click the first link that is a stack overflow question and here you can see someone who's been having problems with this so they've asked a question about it if we scroll a little bit down you can see that people are saying try with padding and line height line height that's not something we've used if we scroll a little bit down you can see that some browsers will honor a css height rule some not so it seems to be a little bit difficult to use height for the input field and this person's wall suggests line height and likewise with this third person here so i'm going to trust the wisdom of the crowds here and use line height instead like that didn't change anything but we are using a property that more browsers apparently will honor and line height is actually just the height of one line of text and since that is everything we have inside of an input field it's just one line of text that'll be the exact same thing as setting the height of the inner content of the input field so if that was a little bit confusing and you prefer to just use height that's totally fine as well it's more important that you are using what you are comfortable with than that you are doing it the 100 correct way according to conventions so just use whatever you want i just wanted you to be aware of the fact that this is the recommended way according to stack overflow with that let's move on okay now we're gonna add the first button to our google project so i'm gonna head over to the html and here beneath the input field i'm just gonna type button like that and this will be the google search button so there we have it it doesn't exactly look good but don't worry about that now i want to give this a class as well and a class name you'll often see used for buttons is simply btn like that okay now that we have that i want you to center the button and add some space above it so go ahead and use the class selector to select this button and solve this challenge good luck okay so what i'll do is do dot vtn to select the button here you might have been tempted to simply do margin left auto and then margin right auto however that doesn't seem to do anything why is that well if you remember the criteria you needed in order to use this technique to center elements one of them was that you need your element to be display block whereas buttons are actually display inline by default so if we do display block boom there we go the button is centered and now you might ask well what about the width we also set the width on the input field and the logo well we could do that as well with this one let's do with 200 pixels for example however it's not needed because if we remove the width you can see that it still has a width which is certainly not full width across the entire page so it kind of has an implicit width without us setting the width so even though it is a criteria that your element needs with in order to use this technique here in order to center it you don't necessarily have to set the width yourself if the element already has some kind of width so it works perfectly fine just doing display block and margin left right auto in this example finally we are going to add some space above it so let's do that i'll do margin top and do for example 30 pixels yeah looking pretty good great job solving this challenge let's move on now we are going to style the button in our google project because as you can see this is how our button currently looks but this is how we want it to look so we got to do a bunch of changes however there's one thing i want to change actually on this google.com homepage because notice how low the contrast is between the background color of the button and the background color of the entire website it's hardly possible to see that there's any difference and that's not good because it reduces the accessibility of the site and makes it hard for people who are visually impaired to use it actually to prove this let's take these two colors the light gray here and the white and put them into a contrast checker online for example this one right here on userray.org they have this nice little contrast checker where you can paste in the foreground color and the background color and then get a contrast ratio and this f8f9fa hex color is the one that google is using and if we scroll a bit down you'll see that google indeed fails miserably on this test complete failure the ratio is 1.05 though it should have been 4.5 or more so not good google so what we will do instead is change the background from this to something like this here you can see it's much easier to see that it is indeed a button so even though the real background color is this one right here we are going to use this one right here so with that in mind i want you to style the button according to the provided design you now have and the only hint i'll give you is that these are the properties you are going to use however i'm not giving you the values of any of them because i want you to practice looking at an example and making your best guess as to what the values for the css properties should be as that's how you'll work out in the real world when a designer for example gives you a design file so go ahead and do this right now and then i will show you the solution afterwards as well okay let's do this i'm going to bring up the example here have it on the side so that we can see how it develops and then start with the background color as we have the value for that one down here round like that okay next i would try to see what is the most apparent difference between this button and this one right here well the border is certainly different this button does not have a border at all whereas this one has got has a border so let's just remove it border none like that okay good now we can see that the text is much more crammed into this box than there is this one right here so that is the padding and also you can notice that there's more padding on the left and right hand side than on the top and bottom so i'm going to try to add for example padding top 5 pixels ah that actually looks like this one here has more than 5 pixels because this space is still pretty crammed so i'm gonna do for example eight yeah i think that is more like it i'm gonna give that on the bottom as well like that on the sides i'm just going to try the double padding left 16 pixels padding right 16 pixels and you know what i think that button and our button looks pretty similar in size so next up is the border radius because you can see this one is totally rectangular whereas this one has softer corners so i'm going to do border radius something like 4 pixels so that is pretty good the final minor adjustments i'm going to make is reduce the font size ever so little from what it is here down to what it is here i mean it's almost identical but i happen to know that this one is indeed 14 pixels so i'm going to do font size 14 pixels like that and there we actually have the buttons this one and this one identical now if you chose any other values than the ones i've chosen don't worry about it at all the point was not for you to reach the exact same values as me but just in the same range basically so regardless of how your example ended up good job reaching this far let's just keep up the pace and move on now we are going to add the second button to our google project this i'm feeling lucky button right here and i want you to do that on your own first so that's your challenge add the next button and do remember to give that button a btn class so that it's styled as our search button and once you've done that and executed the code i want you to take a look in the mini browser and ask yourself why aren't our buttons behaving as we want them to because as you'll see there's something wrong with the layout at least when comparing it to this layout right here we'll go ahead and do that right now and try to think of why our layout is wrong and then i will do it as well when you return back to me and explain what's going on okay let's do this so i'm lazy so i'm just going to copy this one like that and write um feeling lucky run the code and as you can see the buttons are now stacked on top of each other what we can do in order to figure out what's going on here is actually use the built-in dev tools in the browser which you've seen a few times now so let me show you this debug session using slides i'm going to right click in the nav bar and then choose inspect open up the elements tab and then click on the selector icon here so that i can select this button by hovering over it and then down in the styles tab i can scroll down until i see the box model for our button and what you'll notice is that our button is taking up all the available space on the left hand side and the right hand side and if we move down to the second button you can see that that button is also doing that that is because they are display block exactly this line right here if you remember from previous lectures display block kind of takes up all of the available space on the horizontal axis so as we said earlier display block stacks on top we aren't able to get the layout we want if our buttons are display block and then you might be tempted to do well let's just remove the display block however if we do they will be on the same line yes they are now inline elements but they will just be crammed all the way to the left hand side because margin left right auto doesn't work if you remember from the lecture about centering you learned that display block and margin left right auto works together in order to center something you can't have just one of them which means that in order to go from this layout to this layout we have to use a different technique for centering the elements and there's actually two ways we could do this there's the simple and inflexible way using text align and then there's the slightly harder but super flexible way using flexbox and since you're going to use flexbox several times throughout this course i want you to get familiar with it right away so in the next scrim we're going to talk about flexbox but before we do that i just want to show you the simple way as well so that you've seen it because as you might remember from one of the very first scrims in this section we used something called text align in order to align our text either to the left right or center now the text align property actually works on all inline elements not just on text so what we can do is remove the display block from our buttons as you know that turns them into inline elements and they are crammed to the left and as inline elements only take up the available space they need according to their content there is no available margin to use so auto here which basically means take up whatever available margin there is serves no purpose so we can remove both of these two as well as you can see it made no difference and then we can move up to the main the parent will do text align center like that and boom both buttons are now centered so here we have told the container the main element all inline elements inside of it should align to the center so that was the easy but inflexible way of doing this let's instead of using this technique move on to do it how the pros do it using flexbox flexbox is everywhere let's just have a look at twitter for example here the menu on the left hand side is created with flexbox as with the tweet options menu and the timeline itself and guess what the trends for you and who to follow it's created with you guessed it flexbox so this is something you need to learn let's imagine then that you have a e-commerce website which you can see here that sells shoes hoodies and t-shirts well then you probably have a navigation menu like this one where users can click and then probably open up a sub menu or something like that as you can see the items stack on top of each other that is to be expected as these are divs and divs are display block they want to take up all the available space in the width and if you're wondering how i styled these we can head over to the styles.css and just have a quick look at that you can see i've aligned the text to the center inside of all the items hadn't i done that it would have been aligned to the left also there's a border as you can see there's some padding on the inside and there's some margin in between the elements now the question is what if i instead of this vertical layout wanted a horizontal layout which is more common for so-called navigation bars so something that looks like this well this is where flexbox comes to the rescue and in order to turn this into a flexbox layout i would first have to wrap these three items in a container because a flexbox layout always consists of a container and its direct children so let's wrap it in a div and give this a class of for example nav dash wrapper like that if i run this now nothing happens because divs as you know are invisible unless you give them any styling or content so let's head over to the styles.css and now target the nav wrapper like that in order to turn this into a flexbox container all i have to do is write display flex and boom suddenly we have forced our three divs into one row now this layout flows from left to right along the horizontal axis and that is pretty significant given that these items were display block by default but flexbox as powerful as it is overrides that and forces them on to one line however we haven't got quite the layout we want yet as you can see it's centered and there's also some space in between the items now let's start with the centering because flexbox now has control over these items and can decide where along the main axis they should be positioned so we can do justify content that is a little bit of a weird name for a property but that's just how it is and then set that to center like that now all of the items are centered and the final step is just to get some spacing in between these items and that is done with our good old friend margin so we'll do margin left let's do 10 pixels and let's add the same thing on the margin right like that and there we have the layout we wanted now a final cool thing i want to show you is that we can do for example end here as well that'll push it all the way to the right hand side or start at the beginning or alternatively you space that around that's pretty cool now we've distributed all the white space around each of the items and another one is space between now all of the available space is between the items so they're spread out like this now we are getting ahead of ourselves here i just wanted to demonstrate this to show how powerful flexbox is what you are going to work with is the center here so with that let's return back to our google clone okay we are back at our google project and now your job is to center these two buttons besides each other meaning getting to this layout right here and the way to do that is of course using flexbox so you'll wrap the two buttons in a flexbox div and then center them and then also i want you to give the div a class of btn-wrapper so you'll need to modify both the html and the css here now before you start i'm going to remove these three lines here because they are solely there in order to center our buttons using this display block and margin left right auto technique however now we're going to use the flexbox technique and we don't want to use both techniques at the same time because that'll just be confusing as they will affect each other so i will remove these lines and now you're left with this left aligned layout here so please take over here do this challenge and then return back to me when you've done it or when you feel you need some guidance good luck okay hopefully that went well if not no worries we'll do it now together so i'm going to start with this flexbox div that we want in our html it should wrap our buttons and only our buttons so we want to start it up here if class of btn dash wrapper at i'm going to indent my buttons and then end the div down here so now it is simply wrapping our two buttons if i run this code seemingly nothing has happened but under the hood we have the button wrapper which we can target using btn.wrapper like that and then we can do display flex that's turned our div into a flexbox and now we can use the justify content and do center like that there you can see both our buttons are centered however they are totally crammed into each other now there's no margin in between them so in order to fix that we want to add a little bit of margin left and right to these buttons so i'm going to do margin left perhaps 4 pixels and margin right or pixels as well like that that's looking pretty good to me so if you didn't do this no worries at all and also if you are a little bit confused about flexbox that is totally okay as well we're going to work with that several times throughout this course you'll get more opportunities to practice this just feel proud that you've at least dipped your toes into flexbox as that is a super important tool for any front-end developer so great job let's move on now there's one final thing i want you to know and that is that you are amazing because you have taken your very first step into the world of css and that is more than most people ever do so take this moment to feel great about yourself and also let's take this moment to recap what you've learned starting out you learned about the css syntax that is how you select elements and also use properties and values and then you learn the key concept about inline elements versus block elements so block elements stacking on top of each other like these two and inline elements standing kind of in a horizontal line like the buttons here moving on you learned about margins which is how you create white space outside of elements for example above the google logo here and you learned about its close cousin the padding which is how you create space on the inside of elements for example in between the text and the edges of these buttons also borders is what is between padding and margin and we use that on the input field here we decided its thickness its type and color and also the radius of the corners so we didn't want the sharp edges but rather soft circular edges which we achieved with this border radius property what we also did was take a closer look at the div tag which you saw briefly in the html section this time around though you actually created two divs one to wrap the entire project and another to wrap the buttons and we had to separate those from each other so you had to learn about classes that is the attribute you set like this and you select by using the dot notation in the css also a big thing is centering in css you learned three different ways of doing this and the final way you centered elements was through the use of flexbox a super powerful tool that all frontend developers need to be comfortable with so you have learned a lot now i think you should take a little break you have to digest these things recharge and then i will see you back here when you are ready in the next section welcome to the second css section of this course where you are going to build a business card for yourself and it's going to look more or less like this though you're going to personalize it make it your own not only with your own information but also with a beautiful color palette of your choice and a font that you like so you are going to level up your design skills as well as your css skills meaning that this is going to be a lot of fun so let's just get started with it right away okay let's start out by having a quick look at the basic skeleton for our app as you can see in the file system here we have an index.html file also a styles.css file and finally we have an images folder which contains my avatar it's a png file called pair.png now starting with the html it's just a very simple setup with the html tag and then the head tag which links to the styles.css as for the body it has one direct child which is a div which will work like kind of the container for our business card and inside of that div we have an image tag we have an h3 with my name we have a paragraph with the title and an h4 with the location moving over to the css we only have one rule here we're setting the margin to 20 pixels on the body and if you remember how this works when we're not specifying either margin top margin bottom left or right just setting the margin in general these 20 pixels will be added on all four sides on the top on the left bottom and right and that's simply because i want to avoid that these elements touch the edges of the mini browser so there's a problem though as you can see the image isn't rendering properly it's just an icon that is as far as i can remember not how my face looks like and the problem is in the image tag so i want you to try to fix that and i'm not going to give you any more hints rather than if you are stuck try to google html file paths that should help you so go ahead and give this one a shot and then i will show you how to solve it as well when you return back to me okay let's do this let's take this string right here and paste it into google there you can see that the top result is a w3schools article let's head into that one here you can see file path examples let's zoom in on this one and if we have image source equals picture.jpg which would be the same as we have here although our image is called pair.png that means that the file is located in the same folder as the current page well is that the case now looking at our current page index.html you can see that the image is not located in the same folder as the index.html because the image lives inside of the images folder so what we then might need is something like this where we do images slash and then the picture name here it means that the picture is located in the images folder in the current folder and that looks correct the images folder is in the same folder as index.html and the headshot of me is located inside of that images folder that means that we can try to do images like that slash run the code oh there we go we have my avatar imported and are ready to move on to the next scrim i'll see you there okay now we're gonna do a little bit of housekeeping here because this image element actually has a serious flaw because it lacks an important ingredient that all image tags should have which is called the alt text or the alternative text and that is simply an attribute that is written like this alt equals and then inside of quotes you are to write a description of the image so here it could be for example pierre smiling like that however if we run this code now we can see that seemingly nothing has changed so why do we at all write these old texts well first of all it makes your site accessible because imagine that a person who is visually impaired or who is blind is trying to visit your website in that case they would use a screen reader which goes through the html and reads it out loud to the user and as for the h3 tag it would be simple for the screen reader to read out loud what that says because that is text however for an image like this one you need to add an alt tag to describe the image so that the screen reader has something to read out loud and secondly this also works as a fallback if your image doesn't render properly because let's say you have a spelling mistake in the source attribute for example an extra r well in that case the image won't render but the alt tag provides as a backup so that the user seeing this can kind of understand what was at least supposed to be there and finally writing alt text will help your site rank higher on google meaning you get more search traffic and that is because the alt tag most likely provide important metadata about the image so that google knows how to use it in a search results page and if your site is not accessible it might be punished in the form of ranking lower so with that in mind let's look at how to write these old texts and the first thing you need to know is that you should not include for example image of because that's simply not necessary the screen reader knows that it is an image because it is an image tag secondly should be concise meaning less than 125 characters because a lot of screen readers will cut off after this limit has been reached and finally a trick you should use in order to come up with a good old text is imagine that you are describing this image to a person over the phone so let's try to do that with an example here we have an iconic image of muhammad ali in a boxing match and one way to write an old text for this could be just a boxing match but it would actually be a pretty poor way of describing it because there's so much more going on here you have plenty more characters you can use in order to describe it so a better one would be two boxers in the ring one lying down and the other standing up that's a good factual explanation but we're not quite there yet because it isn't actually describing this iconic moment when muhammad ali knocked out sunny listen so if you were to describe this over the phone you would probably understand that this description is pretty shallow so what i would rather write as an old text for this image would be muhammad ali in the boxing ring screaming at sunny listen after knocking him out that in my opinion properly describes the intent of this image what the person who has decided to show this image on a website is trying to convey so with that example in mind i want you to write what you think is an appropriate alt text for this image go ahead and do that right now and then i will show you what i would write when you return back to me okay let's do this we'll do alt equals quotes and here i would use my name pair harold bergen and you can see i'm smiling and i'm looking at the camera i think that's important so i'd write smiling at the camera finally the background is really playful and colorful so i want to include for example with a colorful background like that so if yours was a bit simpler or shorter don't worry about it the most important thing is that you add an alt text and do as best as you can and actually plenty of developers never add this so just by adding it you are actually separating yourself from most other beginners so with that let's just move on the next thing we're going to do is shrink this image to a suitable size for our business card because as it is now it is far too big so i want you to head over to the styles.css and solve this challenge you are to set the width of the image to 150 pixels and you need to use a class to select the image element so go ahead and give this a shot right now okay hopefully that went well let's now do it together so first we need to actually create the class that we are going to select from the css so let's head over to the html file here we'll just do class equals and i'm going to call this one an avatar like that actually now that we have three of these on the image element i think for readability purposes it works well to break them into three lines i think this is a little bit easier to read then i'll head over to the styles.css and target the class dot avatar and reset the width to 150 pixels now rerun the code there we go so great job solving this challenge let's move on okay now you're soon going to start building the layout of this card however right now the card kind of blends into the background there's no separation between the card and the background so i want to add a little helper style in order for us to more clearly separate the card from the background and for that we need to grab hold of the outer element of the card and can you take a guess what kind of html element do you think should wrap the entire card if you guessed a div that is correct and heading over to the html you can see we are actually already wrapping the entire thing in a div so here we have our container div or card div or whatever we want to call it so what i want you to do now is to first give that div a class and actually i think you should call it card and then i want you to select the card class in css and give it a dotted blue border this is our helper styles it'll give us a little blue border around the element so that we can see how our card div kind of behaves and also as you can see from the design here none of the elements touch the edge of the border so it seems like there's some padding in play here let's just add 20 pixels of padding on all sides of the card as well so go ahead solve these three challenges and then i'll of course show you the solution as well okay let's do this so first we need to give the card div a class i'll head over here and do class equals card i'll run this code so that we have this class in the dom the next step is to select the class by doing card and then adding a border if you remember from previously that is done through the border property which takes three values the first one being the thickness of the border i'm just gonna set it to one pixel the second being the quality for example solid or dotted or dashed or a few others we're going to use the dotted one and the color will be blue and there you can see boom we have a border around our entire card and this will make it a lot easier for us to work with the card now that we can see it clearly on the page finally we want to add 20 pixels of padding because as you can see here the elements touch the border on these sides and we don't want that we want some space so we'll do padding 20 pixels like that and there we go we have solved the challenge with this in place i think we're ready to start moving on with fixing the layout and as you can see on the finished design here there's a big difference between this one and our current one and that is that the current one is vertical whereas this one is more horizontal so they stack up differently we want the image on the left hand side and the text on the right hand side not everything on top of each other so basically we want two columns one for the image and one for the text and as you might remember from previously flexbox helps us create columns so let's now just experiment by adding display flex to the card let's see what happens oh wow okay so what happened there it actually turned every single element into a column in itself that's not exactly what we want here so display flex isn't the entire solution so what we're going to do now is go out on a tangent learn a little bit more about this flexbox concept in css and then return back to this business card project once we're ready to build a layout like this so let's move on and learn more about flexbox okay so let's say that you've built some kind of software as a service and now you want to sell it then you might have a page like this where people can upgrade to pro and they can choose the individual plan which gives them one gigabyte and no support or the enterprise plan which gives them 10 gigabytes and priority support now i've purposely not given any design to this example as i wanted to make it as easy as possible to grasp but hopefully if you are to create a pricing page to make it look a lot better than what we have here so you can see the html right here for the entire pricing layout i've wrapped it in a div and i'm using an h2 unordered list a button and so on now let's say that you instead of having this one column layout here where everything stacks on top of each other you want this two column layout where you have the individual plan at the left hand side and the enterprise plan at the right hand side well if so we know that flexbox will help us create columns but if we try turning our container that is the div with the class of pricing into a flexbox you'll see that it'll break the layout just as we saw in our business card example because what's going on here is that flexbox takes every single item that is every single direct child and turns it into a column in itself so we get a column for the h2 for the unordered list for the buy button for the h2 again and so on and this is obviously not what we want it's far from this two column layout right here however there's one hint to be drawn from this example and that is that if you check out the unordered list here see that it has two children of itself li element and those two are not their own columns they are in the same column stacking on top of each other so it seems as if flexbox only turns the direct children into their own columns so the direct children are the h2 here the ul the button but not the list items and once we know that we can use that knowledge in order to get to this layout because this layout has two columns that means that our flexbox container should have two direct children not six as it has now and how can we achieve that well we want this group to be inside of a direct child of this container and we want this group of html elements to also be inside of another direct child of the flexbox container so what we'll simply do is we'll wrap both of these inside of a div like that and we'll indent it for readability purposes let's try to run this code having wrapped one of the two groups into its own div and there you can see the four individuals plan now stacks up just how we want it but the rest of the layout is still broken so we need to do the same thing down here like that run the code and there we go now our flexbox container actually only contains two items this div and this div as it doesn't care about what's inside of both of those children it only cares about its direct children and the result is that we get the layout we wanted here at least in terms of having two columns there's still a problem with lacking space in between these two children but we're not going to deal about that right now for now i'm gonna send you back to the business card example so that you can use this to improve our layout okay we are back at our business card example and now i want you to use what you've just learned in order to fix our cards broken column layout because you are going to make this card into a two column instead of a four column which it is now set as the image name title and location at four different columns but instead we want two columns one for the image and another one for the text elements so this challenge is solved in the html as you know we already have a display flex on the card and the only thing you need to do is one change inside of our flexbox so hopefully you're able to do that go give it a shot and then i will show you the solution as well okay hopefully that went well let's do it together so the problem is that flexbox treats each of these elements as a single child and thus each of them get its own column however we only want two columns so we want these three to be governed by one flex child so we need to wrap them inside of a div 12. we'll do like this open the div and then close the div down here and we'll indent these so that we get some better readability now you can see the flexbox only has two direct children this one and this one and that means that we should get two columns in our layout and yes we do brilliant of course there's still a long way from this design to this design but we are making great progress here so let's just keep up the pace and move on to the next scrim okay i think looking at this example now i gotta admit that i'm pretty pleased with this border one pixel dotted blue here i think it serves a very nice purpose which is to highlight for us how our card is being laid out on the page so wouldn't it be nice if we could use that exact technique on other elements on the page as well for example the children of the flexbox container that is this image right here and the div tag that would have been really neat and we can do that by for example just copying this one and adding it for example to the avatar see there the avatar is got that blue border as well however wouldn't it be neat if we in our html could just quickly apply a class to any element for example this one and it would get the same thing as well so basically the argument i'm making is that we should create a dedicated class for this blue border and what that is is a utility class aka a class that only sets a single css property so let me show you how this would work let's say that we for example want a class to make our text italic then we'll simply do class equals italic like that if we run this code nothing has happened because the class hasn't been created yet but here we can create the italic class and do font style italic like that and now you can see the name is in italic now if we want to reuse this we can just do class italic here as well from the code and the location is also italic and if we want the entire card italic we can even add the class here up on the container element itself run the code and now this has been inherited down to all of these elements and if you're a bit confused about what i'm doing here it is simply adding two css classes to a single element do that simply by adding a space in between the two classes okay let's get rid of these like that and delete this one as well now what i want you to do is create a utility class for the dotted blue border this is the styling we have here and then give the class to both flexbox children in the html that is the flexbox items you can see here and here and also i think you should give the same class to the card as well so that you can remove this line 10 here so go ahead and give this one a shot and then i will show you how to do it afterwards as well okay hopefully that went well let's start out by creating the class all right border blue here and then inside of it i'll just cut this away and paste it in here instead now we have a utility class for blue borders i'll copy it and add it to this flex item and as a second as to the image element if we run this code you can see now both of these have the blue border around them let's also add the border blue class to the flexbox container run the code and boom there we go now we have an even better overview over how our elements are laid out okay with these blue borders around the flexbox children it's pretty easy to see that our layout is pretty far from how we want it to be because here you can see in the card that there's some space in between the two elements whereas in our example they're completely crammed together and also pushed all the way to the left hand side whereas here they're kind of spaced out there's some space on the left-hand side in between the element and also some space on the right-hand side so they're kind of spaced out in a nice way and now i want you to add that horizontal space around the flex children there's a flexbox property that does this and you've seen that property before however you might have forgotten it if so then google justify content and you might find the answer i'm not going to give you any more hints than that because if you have forgotten about it it is a great practice to google it then once you've figured out the answer go ahead and add the horizontal space so that our example becomes a little bit more like this layout and just so you know you only need to add one property for this not multiple so give it your best shot and then i will show you the solution afterwards as well okay let's do this so the property is called justify content a little bit of a weird name i agree but that's how it is and here we can use a range of different values and the one we're looking for is called space around like that and now you can see both elements now have some space around them and also we could do space between then all of the available space will be between the two items or we could even do center as you've seen before then there's no space in between them but both of them are centered and end pushes it all the way to the end and start keeps it at the start so this is a super powerful property and we want the space round value for it as you can see it's at least getting closer to the layout we have in our finished design so great job let's move on okay time for a new challenge you are going to set a fixed width on the card and then center it on the page because its behavior is a little bit weird right now as you can see if we enlarge in the screen the card gets enlargened as well and that makes the spacing between the elements look super weird the aspect ratio becomes very different from a business card so we don't want that instead we want the width to be 400 pixels so it should be a fixed width and then we also want the card to be centered on the page now one thing i want you to notice when i enlarge in this is that the card is a display block even though we've set it to display flex so that means that flexbox containers by default our display block and hopefully you remember from previously that display block takes up all the available space in the horizontal axis and there is also one of the three ingredients you need in order to center an element using margins so hopefully you remember from the google project how to center block elements so go ahead and give this one your best shot and then i will show you the solution as well when you return back to me okay let's do this i'll start by setting the width to 400 pixels like that now you can see if we enlarge the screen the card is stuck to the left-hand side of the website so in order to fix that and instead center it we'll use margins and hopefully you remember that we'll do margin left and set that to auto that pushes it all the way to the right hand side because all of the margin is now on the left hand side but then in order to even it out and center it we'll do margin right as well and set that to auto and the result of having an equal margin on the left hand side and the right hand side is that the card is centered so great job on solving this challenge let's move on okay now let's talk a little bit about css inheritance and why is that important well css inheritance allows you to write so-called dryer code and dry hair stands for don't repeat yourself meaning that with css inheritance you can write less code though still receive the same result and that's a good thing because less code means a smaller surface area for bugs and it also means that you will be a more efficient developer so let's have a look at how css inheritance works in practice here i've pulled in a wikipedia article in our mini browser a really wacky article about a dancing plague that happened in 1518 in modern day france where either dozens or hundreds of people took to the street and danced for days without no one really knowing the reason so this is really weird but properly documented from multiple sources and here is an illustration i have no idea what caused this dance epidemic but i think the modern theory about their grains being poisoned by fungus that gave them the same high as you get from lsd sounds pretty reasonable anyway let's not get too far into this rabbit hole what i want to do is use this article in order to show you how inheritance works so if we head over to the html here you can see that we are using a bunch of different tags h1 h4 h2 paragraph and so forth and let's now say that we want the text in this article to be aligned to the center and not to the left side well then a very poor way of solving that would be to target the age one first and then do text align center like that and then the center is text and then we can copy that we can do the same for the h2 and there you see the h2 is centered and then we can do it for the paragraph like that and so on and so on however this is not a drive we are repeating ourselves a lot here and it's not necessary because since the h1 and the h4 and all of these live inside of the body they will also inherit some properties from the body tag so what we can do instead is just delete all of these now it's back to left aligned and then here we can add text align enter like that now all of these elements inside of the body are centered so as simple as that however there's only a certain set of properties that are inherited and actually most properties are not inherited so then you're probably wondering well how do i know which are inherited well let's do what we always do when we are unsure of something when we're coding we'll google it which css properties are inherited here's the stack overflow question let's click into that and scroll down to the first answer and you can see here is a list of all inheritable properties you can see it's down to 19 if we scroll a bit down down to 41 in total that is quite a lot however you only need to care about very few of these one of them being the text line that you just saw and the others being the font properties so font family font weight font size and so on and finally also the color other than that don't worry about any of these at this point you're going to learn some of them later but to be completely honest there's a ton of css properties here i have never heard about before i recorded this scrim okay now it's time to get your hand on the keyboard so i want you to navigate to this stack overflow question this one right here and then pick a few random inherited css properties and then add them to the body tag up here to see how they work you probably have to google them to figure out what kind of value you should set to the properties but that's also just good practice now some of these just warn you are meant for screen readers or audio for for example speech rate and volume and stuff like that so they might not result in any visual change on the page but others will so just pick a few try it out see how it works in order to experiment a little bit you can click on this image to get to the stack overflow question and then when you have experimented with a couple of properties i will see you back in the next scrim okay now it's time for a challenge in the business card project because you are going to center the text inside of the paragraph and the h4 elements and that is the paragraph right here which says front-end developer and the h4 right here because as you can see both of those elements are now crammed all the way to the left hand side whereas in our finished design they are aligned at the center of this flex children directly underneath the name pair harold borgen and if you're wondering why we're not caring about centering this one it's because it takes up the full width of the container so you can't center or left or right align it because it takes up the full width anyway it is the element that actually decides how wide this container should be so you will only see the paragraph and the h4 change when you fix this and the way you should do it is by only adding one property and then have inheritance take care of applying that property to both elements so you're only going to write one line of code i'm not going to tell you where you should add that line of code you have to figure that out on your own and i'm also not going to tell you what the property is called for the value you'll give it but you have seen it before so hopefully it's not that foreign to you so jump into the code and try to solve this challenge now then of course revert back to me when you want to see my solution okay hopefully that went well now we're going to use the text align property and set it to center but before we do that we need to decide which element we should target with that property should we add it to the entire body for example if so it'll inherit down from the body into the card and then into our flex children right here and then finally to these elements as well that works perfectly fine we can actually try it text align center and boom these two are now centered however imagine that this card is a part of a bigger website if so we've now centered all text inside of the body which is where all of the html both now and in the future will live so this might have second order consequences perhaps you want to have a nav bar with a title that isn't text align center but rather text line right or left so actually i think it's better to scope this to for example our card we at least know now that all the text we currently have in our card should be aligned to the center so let's do that instead let's just remove it from the body and paste it in here and now we're not causing any unwanted second order effects outside of the card so this is in my opinion a better solution but if you added it to the body that is a perfectly valid solution as well so don't feel that you did a mistake in coding there's always plenty of ways to solve things and there's rarely one right answer there's just consequences for whatever choice you make so really good job doing this let's move on all right now the fun stuff remains which is adding colors according to the specified design here so this is a really rewarding little challenge that'll make a ton of difference as you'll go from this boring white layout here to a nice colorful layout so you're going to add these three colors as you can see i've added the hexadecimal values for each of the colors the black the blue and the purple the purple is the border at the bottom here the blue is the background color of course and then finally you might wonder well what's the black well that is actually the text color as the text here isn't pure black as it uses this shade of black instead now you might wonder well how do i create this order at the bottom here i've only learned how to create borders around an entire element previously well the way to solve any problem when coding is to google it so let's just write border bottom css in google there you can see a w3schools article click in on it and here it has some code examples which we can zoom in on set the style of the bottom border for different elements and here it shows us how to set the border bottom so we do border dash bottom and then for example 5px solid red well that's exactly how we'd set the border itself except that we would omit this dash bottom in the property name so you'll use the exact same technique you've used for the entire border just with this extra word added to the end so hopefully you'll be able to do that so here is the design and a final thing i'm going to do before i'll leave it to you is to remove these blue borders here because we don't need them anymore so let's head into the html i'm going to mark the border blue utility class we've added do command plus d that enables you to select multiple instances of whatever you've highlighted and then boom i'm going to remove it like that then also we don't need any class in the div for this flex children anymore in the code our borders are gone i'll leave this for now in case you want to add it back again but now it's your turn go ahead and try to solve this challenge and then of course i will show you the solution when you return back to me okay hopefully that went well let's now do it together i'm going to start with the blue background as that'll make the biggest difference so i'll do background and copy this hex value like that very good then i'll do the text color that is color and copy the one right here yes not as visible as the previous change but something surely happened we're now using that shade of black for the text and finally the purple border bottom will be added by doing border dash autumn and then let's try two pixels and we want to use solid then the purple color okay we can see a thin border at the bottom let's have a look at the design it looks like it is definitely thicker here so let's crank it up a little bit for example six pixels yes that looks pretty good to me actually so really good job reaching this far you are very close to the end right now so let's just keep up this great pace and finish up this project over the next few scripts okay now i want to talk a little bit about fonts because fonts are actually really important let's say that you for example have created a computer specialist company called click lovers well you might want to think about which font you choose in that case or if you're the owner of the megaflix shop you should also think carefully about which font you choose finally if you are the head of the wig and pen association make sure that your font spaces out words correctly now these are of course extreme cases and they're all on prints you'll rarely see cases as bad as this on the web but fonts really matter online as well let's take wikipedia for example here is a random article about people who have died from laughter as you can see wikipedia has this very serious nice font but if we change that to something like comic sans you can see the text gives a whole different type of association it went from being very serious like this to being more like a comic book so when you are building projects it is important that you choose a font that kind of suits your project so let's move on to look at how it works technically under the hood because when you visit a website for example scrimba.com you visit it via a client that could be your mobile tablet desktop or whatever what happens is that when you type www.scramble.com into the url bar it sends a request to scrimbus server and then the server says yeah okay you want to visit our website yeah of course here you go and it takes everything you need in order to run the scrimba in the browser that is the html the css the javascript the assets which can be images and videos and so forth then also the recipe for the font and then it sends that back to the client however for some websites they won't send you the recipe for the font over the network because they will instead on their website use a font that most likely is already pre-installed in your client that is also called a web safe font meaning that the recipe for rendering that font exists in most clients now of course there might be some clients that don't have that specific font but in almost all cases it's safe to use one of the web safe fonts without sending the recipe for it over the network so what are these web save fonts well here is an article on v3 schools where you can see all of the web save fonts for html and css so when you're using these you don't have to send the recipe for the font over the network now for our digital business card we're only going to use web save fonts but later down the line you'll also learn how to pull in external fonts so that you can go outside of these 10 fonts as they don't really give you a lot of flexibility so with that in place let's look at how you actually use a font in css so in order to set the font you first target normally the body and then type out font family and then the name of the font and here you can see we've typed v e and that triggers vs code which is the editor powering scrimba to come up with suggestions for you you can see it doesn't only suggest verdana which is the font we want it also adds a bunch of other fonts after it all separated by comma so if we hit enter now boom then we've added what's called a font stack and what this means is that if the browser finds the verdana font installed it finds the recipe for that font well then it will use it however if it can't find it if verdana isn't installed in the client's computer then it'll try to find geneva which is a pretty similar font if it can't find geneva it'll jump on and try tahoma and if it can't even find tahoma it says well give me any sans serif font and sans serif is a category of fonts so here it's just saying give me any font from this category and there are mainly two categories sans serif and serif here you can see an example of both of them serif fonts contain these decorative strokes at the end of the letters you can see it here here here where's sans serif is without those decorative endings so sans then means without or not or something like that you get the point okay that was a lot of theory now it is your turn you are going to set the font here to verdana and also make sure to remember to get the entire font stack so that we have backups in case the client doesn't include the verdana font so go ahead and do that right now okay hopefully that went well what you'd want to do is font family colon start typing and then the editor suggests the entire font stack though you won't see that now because the scrimba dom recorder doesn't record it however i can see it so i'm just gonna hit enter and boom the editor suggested this entire font stack with me we have changed the font let's verify that by removing it boom yeah that's different from this so really good job we've actually now completed the design for our business card however there's a little issue with our code because this is how noobs write their margins and i want to teach you how the pros do it so let's move on to the next scrim where you'll learn exactly that okay now it's time to learn about the shorthands for margin and padding and you've actually been exposed to one of them already which is that if you have the same value on the margin top right bottom and left you can reduce those four lines into one margin 10px then the browser will take this 10px and apply them to all sides so these four lines are identical to this one down here now the question becomes what happens when you have four different values for example 10 px 20 px 30 and 40. well if so you have to do like this margin and then 10 px 20 30 40. so the first one is margin top the second one is right the third one is bottom and the fourth one is left so now you're probably thinking well how can i possibly remember this order and the trick is to think of the clock it starts at the top then goes to the right then goes to the bottom and then goes to the left so with that in mind i want you to improve this code here which creates the japanese flag in css because as you can see this red circle here which is a div has a few styles applied up here but down here we've used the non shorthand way to set the margins setting some margin on the top so that the circle is pushed down nothing on the right and the bottom but 100 pixels on the left so that it's pushed to more or less the center of the screen given that the screen is as wide as it is right now so i want you to translate this into using the margin shorthand instead go ahead and do that right now okay hopefully that went well i'm going to actually comment these lines out now you can see the red circle is up in the left corner and then i'm going to do margin starting at the top should be 40 pixels then the right side 0 pixels and the bottom should also have 0 pixels and then the left side which should have 100 pixels and there we go we are back at the exact same layout so great job if you manage to solve this now there's another scenario i want to teach you about as well which is if we have top and bottom as one value and right and left as another value if so you can actually reduce it to margin and then only two values here you do 10px and auto because 10px is top and bottom and auto is left and right so the way to think about this is that the first value controls the vertical line the y-axis and the second value controls the horizontal line also known as the x-axis so with that in mind let me change this a little bit i'm going to go back to the funky way of writing this and i'm actually going to improve it a little bit because if we want to center the circle we shouldn't hard code a margin left because that'll only work on this screen size when we do like this it's not centered anymore so let's instead use the better technique of using auto on the left hand side and the right hand side and also just to make sure that no elements are allowed to appear directly underneath our circle i want to add 40 pixels to the margin bottom so now i'll make it a little bit easier for you and separate these two with this in mind can you reduce these four lines into two go ahead and give that a shot right now okay let's do this i'll comment out these and if you wondered what shortcut i used for that i'm using command plus k plus c but that is on a mac keyboard i'll comment this out then i'll do margin first we'll set the vertical axis it should have 40 pixels at the top and the bottom so that is 40px and then we'll set the horizontal axis which is auto like that and boom there we go we have it centered at least horizontally regardless of how wide the screen is and we have reduced four lines into one so great job let's move on okay now you're gonna take what you've learned about the margin shorthand and use that in order to reduce these two lines into one so you're going to replace the two margin properties with a single margin shorthand and of course after you've done that the card should still be centered as it is now so go ahead and give this one your best shot okay let's do this so i'm going to start by removing both of these now you can see the card is aligned on the left side so in order to fix this we'll do margin and then the first property we'll set will be the vertical line meaning margin top and margin bottom because we're only going to set two values and when we do that each of the value dictates two sides either top bottom or left right so we'll set zero as the first value that means margin top zero and margin bottom zero then for the second value which dictates the horizontal margin meaning left hand side and right hand side we'll set of course auto and there you see now the card is still centered and we have reduced two lines into one so great job solving this challenge last time we deployed a project we first added our code to netlify which then again took care of deploying our project to the web now while this works perfectly fine the way the pros do it is to go via an intermediate service and step called github and then let github take care of sending off the code to netlify so that it's deployed to the web and the reason you want this kind of architecture is because github allows you to collaborate on your code with other developers so now we are going to deploy your business card using this technique the first thing you need to do is head over to github if you're watching this course on scrimba you can just click on this slide right here but if you're following us on youtube just head over to github.com and you'll get to the exact same page once you're there i want you to click at the sign up button that'll open up a form where you have to add your email create a password and also choose a username once you've done all that click the continue button which then sends you to this onboarding screen where you can add a little bit of information about yourself or just click on the skip personalization option if you are impatient once you've done this you'll see a dashboard yours is probably not as filled with information as mine though that doesn't matter what we're going to do now is click on the plus icon in the top right corner there it opens up a menu where you are to choose new repository the repository is the backbone of any software project this is where you'll find all the project files and github along with the git protocol takes care of tracking all the changes that has been done to the repository from its birth though we're getting ahead of ourselves right now we are just going to give it a name which you type in here in the repository name field like that i'm going to call it business card and then i'm not going to touch any of the options here i'm just going to scroll down and click create repository and there we go now we have to upload our files we can do that in many different ways right now we're just going to do the very simplest one so what i want you to do is click on the uploading and existing file link right here as that'll take you to a drag and drop field quite similar to what we saw at netlify earlier here i want you to open up the business card folder which you created on your local computer in the previous scrim mark all of the files and then just drag and drop them into the rectangle at github once you've done that you'll see all of your files listed just scroll a little bit down and then we have to do something called commit changes which might seem a little bit weird and complicated but don't worry about that right now i'm just going to go with the recommended text add files via upload and then hit commit changes and boom there we go we have a repository on github which includes all the code we need for our business card now if you were to collaborate with other developers on this project they would push their code up to this specific repository and you would also probably create issues for tasks you want to do and work with something called pull requests which is when you want to merge someone's changes into the code base and there's also a ton of other things you can do here but we're not going to worry about any of that right now because the only thing we want to use this repository for right now is as an intermediate step before our deployment so let's head over to netlify and make sure you're logged in so you see the previous project we deployed and right besides it you can see this button called add new site click on it and choose import an existing project here you're able to choose github click on that and it'll open this pop-up menu where github asks where you want to install netfly because that's what you're doing now we're installing netlify on our github profile click on your github username in my case peer borgin and here i'm just going to leave all the settings as they are scroll down and hit install and there we go now you can see that netlify has pulled in your github profile and has your repositories listed i have a bunch of repositories so i'll have to search for the business card i'll write business and there we can see it when i click on this repository it is imported into netlify and here i can adjust some settings but i'm not going to do any of that as usual just scroll down to the bottom and hit deploy site and there we go the deployment is now in progress so we'll have to wait a little bit and then once this image turns into a screenshot of your site it is deployed so clicking on this link will open up our business card really good job though i hope your business card looks a lot cooler than this as you were to personalize it in the previous scrim actually to prove to me that you and personalize this i want you to head over to twitter and share your deployed business card do as michael rocket does here and mention me if you want to alongside a link to your project and perhaps even a screenshot of it that would be super cool so go ahead and do that right now and then i'll see you in the next scrim woohoo you've just completed the business card section of this course that is very well done now let's have a little look at what you've learned starting out you learned about image alt text which is a really important html attribute that makes your sites more accessible next up you learned about flex child containers which means that we took this flexbox layout here the card and made sure that it only had two direct children so that is one container and two flex items so that these two stacked up besides each other on columns however we wanted the content inside of the second column to be on rows and for that reason we had to turn this flex child into a container in itself so that these three could stack on top of each other you also learned about inheritance for example here with the card class where we set the text line to center and that propagated all the way down from the card via the div and down to its grandchildren the text elements that contain the data for the business card and also you learned about shorthands more specifically the margin and padding shorthands where we instead of specifying each margin like the top left right and bottom we just use the shorthand zero auto to set zero on the top and bottom and then auto on the left and right and then you learned about web save fonts which are these fonts that you can use pretty much without worrying about whether or not they are installed on the user's computer because in the overall majority of cases they actually are so they are safe to use and we took a look at color palettes which is critical to know about as colors often make or break a design and then finally you learned about github and how to create a repository for github and use that as an intermediate step when getting your code from your local computer and up to the world wide web via a netlife deployment so this was a lot of things to learn i can totally understand if you are a little bit overwhelmed now take a little break and let these concepts mature in your mind and then i will see you back here when you are ready to move on with the course welcome to the section where you are going to build a space exploration site here is the example you're gonna build as you can see it has this super neat background image that animates and it really breathes life into the site we're also using google fonts to pull in this custom space-ish font right here and we're doing a lot of interesting things with some subtle text shadows this underline and more so there will be plenty of new things to learn in addition to reinforcing html and css concepts you've previously learned so let's launch into this section okay let's get started building our space expiration site as you can see i've set up a basic html structure for you here it is very simple as the body simply contains an h1 title and a button as for the css there is no as we are going to add that now so the first thing we're going to do is fix the background here because we don't want the white background we want to have an image of the universe in the background later down the line we're going to change that to an animated image so that it looks like a video playing in the background which is even cooler but as for now we're just going to do a standard background image as we're going to work on this for a while and i don't want to have an animated image looping in the background as we work as i think that's a little bit annoying so let's start out with just a static background image and just so you know background images is something different than how you've used images up until now where you've done img src some kind of jpeg like that instead background images are not in the html they are added in the css file and i'll talk about that let's just find a cool background image and then deal with how to implement it into our app and the service i prefer to use for finding cool images for your web design is unsplash because the quality of images here are really good so they will take your web design to new heights and you can use them freely however you want so if i search here for universe we'll get a ton of nice images let's scroll a bit down as you can see there's plenty of good candidates here but i think this one is particularly nice so i'm going to click in on it it is created by guillermo ferla and you can see it's really popular have over 12 million views already now if we want to download this you can click on the icon up here and download it range of different sizes and i've actually done that and placed it here in the images folder so here you can see universe.jpg so let's see how we can add this to our app what i'm going to do is target the body because we want the image to span across the entirety of our page so we need to add the background image to the body we'll use the background image property here we'll utilize something called a css function don't worry about why it's called the css function just remember that the way to do it is by writing url open parentheses and then inside of the parenthesis you refer to the image source just as you do in the image with the img tag it is using quotes so inside of the quotes we'll write the path to this exact image and the way we do that is first by navigating to the images folder so images then slash going into the folder choosing the universe up jpeg and boom there we go suddenly our background changed however there's a couple of problems here our h1 is now almost invisible since by default the text is black and the background is very black as well so i'm going to change the color to white like that much better also this image is thousands of pixels wide whereas our browser is not that wide so notice that if we make it super wide we still only see edge of the galaxy more or less the center of the image so what we need to do is shrink our browser down to like a couple of hundred pixels wide which is what we want and then make our background image shrink so that it's squeezed into the width of this browser the way we do that is background size and value cover boom there we go now the width of the background image is exactly as the width of its container which again is exactly as wide as the browser itself meaning that the browser and the background image has the exact same width and it looks pretty good i'm not going to give you a challenge on how to do this right now as you'll get plenty of practice using background images later in this course so with that let's just move on to the next scrim okay in this two part challenge you're going to improve the design of our app first i want you to center the text and button and then style the button according to the provided design and that is found here in the slide as you can see the button is slightly different from how it is right now not too different but certainly it has some css properties applied and i'm not going to tell you which because this is a good way for you to train your design eye when you design the button i want you to use a class in order to select it so not just using an element selector like we do here so go ahead and give this a shot and then i will show you the solution as well when you return back to me okay let's do this first we got to center the text on the button and here you can use a range of different options either using margins or flexbox or text align you've learned plenty of ways to center elements now i'm going to choose the easiest one which is to apply a text align center in the body element because as you know this centers not only the h1 but also buttons okay with that out of the way let's move on to the button first i want to give it a class and i think btn is a good class name so let's add it to the html as well like that and run the code so we have it applied in the dom now let's have a look at this design the first thing that is apparent to me is that this button has more space around the text as you can see here it's a bit more crammed so that is the padding property let's write 10 pixels just on all four sides of the padding having a look at this button right now you can see that this one is a bit more rectangular whereas this one is a bit more squared now because in this design here there's more space on the left and right hand side then the top and bottom and if you remember the shorthand we can do this by for example starting with 5 pixels on the top and bottom and 10 pixels on the left and right and that looks much better maybe it's a little bit higher so let's do 6 and 12. that looks pretty good to me now the next thing i want to change is the background color it's not totally apparent but actually this one has a white background color whereas this one has the default button background color which is a bit grayer it's not that easy to see because of the background here it looks pretty white compared to the black background but it is actually not entirely white something you'd know if you worked with buttons in html for a while as they always have a default grayish background color background white like that okay now it suddenly became apparent that it also has a border in this default styling whereas that's not the case in our provided design so let's do border we can do none like that and with that it looks like we have completed our design as these two look identical as far as i can see so really good job let's move on okay now you're gonna get a new superpower in your tool belt called google fonts and that is a service that gives you access to over a thousand different high quality fonts that you can use in your projects and the reason you need to learn about this now is because the font we have here isn't good enough in my opinion it is a little bit boring for a space project what we want instead is something like this which looks a lot more sci-fi-ish however this font isn't one of the so-called web save fonts you learned about earlier which is already installed in most operating systems this is a very custom font so we have to use google fonts in order to bring it into our project and here you can see the google fonts interface it's located at font.google.com and if we scroll a bit down you can see it contains a range of very different fonts now it has a search feature up in the top left corner but it's actually not that good to be honest it's better to just use regular google search when searching for google fonts so let's do that instead the way i found the font we're going to use now is just by googling sci-fi and then google font and then google suggested this orbitron font so if we click into it you can see here it is if we scroll a bit down you can see we have to choose specifically which styles we want so i'm going to choose this 400 regular style by clicking on select this style like that and you can see the panel on the right hand side and it is clear that we have chosen the orbitron font and the regular 400 font weight also let's click on this extra bold in case we want to build some text on our site and there we have that one as well now if we want to use this on the web we can embed it by simply copying a piece of code into the head of our html and that is the code you want to copy and then paste it in exactly here next up we also have to specify it in our css and that's done by pasting this line into our css for example in the body tag i'm not going to do this for you though scrimba is all about you doing things on your own getting your hands on the keyboard so now i want you to head over to google fonts fetch the orbitron font in these two styles and then do whatever you need to do in order to make the orbitron font render properly on our site i'm going to leave you here with this screenshot because make sure to compare this design with what you get in the mini browser because there might be something you need to do down in the btn selector and hopefully you're able to spot that if not no worries because i'll be here showing you the solution when you return back to me good luck okay let's do this so first we're to take this snippet of code right here and then paste it into our html like that we'll then need to run the code so that it is imported into our project and then next up it is the styles which we're going to set here let's copy that line of code and then simply paste it in right here and boom drawing the exploration now looks like our project right here however this one also has the orbitron font applied to the button but we don't have that we still use that boring old font that we had previously why is that well that's actually because buttons don't inherit font families so here the h1 has inherited the font property from body but the button has not so what we need to do here is specifically tell the button to have this font family and we can do that in two ways one way is through using a css value you haven't learned yet and that is the inherit keyword as you can see now it does inherit from the body but only because we've specifically told the button to do exactly that what i'm assuming you did instead which works perfectly fine as well is simply to paste in the font family orbitron on the btn class as you can see that also works well so hopefully you were able to spot this if not nowhere is it was just a little gotcha i left here let's move on to the next scrim before we move on from the subject of fonts there's one more technique i want to teach you because in some cases google fonts might actually not be enough and that's typically the case if you want very specific fonts for example let's say that you are building a godfather website in honor of the classic film well in that case you'd probably want to get a hold of the real godfather font though google fonts doesn't host that one because it is simply too specific for them to care about so you'd most likely have to find this font somewhere on the world wide web and there are great services for this for example 1001font.com there if you search for godfather they actually have it so you can click into it scroll a little bit down and click download so what you then did is kind of downloaded the recipe for the font and if you open up the folder you got you'll see a ttf file that's a file format for fonts what you then can do is simply drag and drop that file into your file system like i have done right here you can see i have the corleone.ttf file now what i can do is use the add font face rule in css so simply writing an at and then font dash face and then open up the curly brackets and write two properties the source which should use the url technique pointing to the ttf file which i'm doing right here and also i need to tell css what name i want to give this font in my style sheets and i'm just going to choose corleona for now but i could have chosen whatever name i wanted now i'm able to target the h1 and use this font family so i'll do font family or leona and there you can see i have the godfather font so i'm off to a great start on my tribute page so now what i think you should do is actually try and do this yourself find a random font online download it so you get a hold of the ttf file drag and drop that ttf file into the file system here on scrimba and use the add font face property to make that font available in your stylesheets once you've done that i will see you in the next scrim now you are going to learn about the span tag because in the next scrim you are going to create an underline under the exploration word and in order to achieve that you need the span tag so let's take a little step back from our space exploration site and learn all about this awesome tag the example we're going to use in order to learn the span tag is of banner ads you've probably seen these before and you've browsed the web for example on new sites and many of these are actually so-called html5 ads where they're built using html and css and it's actually a little bit sad how many clever developers in this world who are spending all of their time in their best years and getting more people to click on these ads through making them more invasive more eye-catching and more targeted but that's the name of the game so we just have to accept it and you are now going to do exactly that you are going to make this ad more eye-catching so that hopefully more people click on it and visit our scammy casino so how do we do this well looking at the html you can see the div wrapper has a class of add which sets the background color border and the text alignment inside of this green rectangle and there are two elements inside of the ad that is the h1 and the h3 and it says click here so what we want to do is make this hair word pop out more so how do we do that we can't target the h3 itself because that'll style the entire sentence we only want to style this word and this is where spans come in here we can write span like that open the tag before the word and close it directly afterward if we now run this code seemingly nothing has happened because spans are invisible unless you give them styling so they're kind of like the div as divs neither provide any styling unless you give it to it specifically although the difference is that spans are in line whereas divs are block-based so to demonstrate that if we change this to div what would happen to run the code is that it would break the hair word onto a new line because divs are display block they take up all the available space in the width where spans do not do that only take up the space they need in order to make room for this content what we now can do is give this span a class i'm going to call it cta that's short for call to action because that's normally what these kinds of elements are called and in the css we'll do cta let's just see that it works by doing color red yes there we can see we have now only targeted the hear word this doesn't look particularly good though so let's instead do something that makes it look a bit more like a button for that we need a border in my opinion for example two pixels and we want it to be solid and here let's steal the color from the border around the ad so that we reuse it a little bit i think that can look nice yeah okay here you can see that it's added a border around the word it is very crammed on the left and right hand side so let's try to add some padding let's just do five pixels or something actually i think we can do five pixels on the top and 10 pixels on the left and right yeah that looks much better and then to make it pop out even more so that it doesn't blend into the overall background we have on the ad itself so i'm going to do background well now i happen to have a nice brown color here which i think looks decent with the other colors here so now it is a lot more easier to see that you are going to click here on this thing that looks like a button as it stands out more and hopefully we have increased the click-through rate with 0.02 and thus made our boss really happy so great job now that you've learned this let's return back to the space exploration site and put your new skills to the test okay now you're going to create this neat little underline under the exploration word and i want you to do that using a span and a class as for the specific design of the underline and what kind of css property you are to use that is something you'll have to figure out on your own so go ahead and give this a shot good luck and i'll see you on the other side okay hopefully that went well let's do it i'm going to start with adding this spam to the html it should wrap the exploration word so spam like that and then i'm going to give it a class i'm going to call this class underline because it'll only have one job and that is to give the expiration word the underline so this class is something we've talked about earlier it's a utility class it only has one job and that is setting a single css property so if we run the code now nothing has seemingly happened but we do have this in our dom meaning we can select it in the css we'll do dot underline like that let's just try and set the color to red to see that it works and yes it does indeed work but that's not the effect we want we want to set the underline and what is this underline well it's actually just a border bottom we do border bottom like that two pixels solid white you can see yes we indeed get a border under it however this border looks a little bit thicker so i don't think two pixels is the correct thickness i think we want to have something like four yes that looks pretty good to me so we have solved this challenge and we are ready to move on okay now we are going to add this spacex logo at the top here and while you're adding it you're going to learn a whole new concept in html and css namely a close custom of the class attribute which is called the id attribute and the way to use it is simply by writing id instead of class but now you're probably wondering why would we use this id if we now try to rerun this code you can see that our underline is gone and that is because when you are using an id like this you have to refer to it in the css not by using a dot but instead by using a hashtag there you can see now our border bottom is again applied to our example so now you're probably wondering well why would we want to use this it just further complicates things by having both ids and classes to worry about and the thing is they serve two different scenarios you should use an id if you know that your element is unique and you'll only use it once so id of underline should only be applied once in this entire document whereas class is something you can reuse again and again it's meant for reusage so if you for example wanted a button here that also said for example f a cues then a class is what you use in order to make sure that this button has the same styling as this button but if you did that with ids and turned the btn here into an id this would be invalid html browsers are very forgiving so it probably would work technically the styling would be applied but you just shouldn't do it now as for this idea of underline here i actually don't think it makes sense to use an id because this underline here could perfectly fine be a part of our design system and also be applied at multiple other sections and paragraphs throughout our entire page as we build out this space exploration site so i want to have the freedom to be able to reuse this later as well even though i'm only using it once now so i'm going to turn this into a class again rerun the example now it's not applied and then go from the id selector to the class selector in css by replacing the hashtag with a dot and there it is applied so that was a long intro the reason for that was that i want you to render this spacex logo you can see i've added the spacex.png image file up here and then i want to give it id because this spacex logo at the top here is most likely unique we probably don't want to have multiple centered spacex logos at this size so this is kind of our main logo and you can give it that id main logo then in the css you need to select the logo using whatever id you have given it and then as you'll see you'll have to reduce its size that's why you need this css rule right here because it is far too big this image finally i'm going to remove this faq button so that we're back to our original design now it's your turn take over and try to solve this challenge okay hopefully that went well let's do it we're going to render it using an imd tag and the source will be first images and then slash spacex dot png like that if we run this you can see oh wow that is not exactly what we were looking for it's far too big this image so we have to reduce its size and to target it we're going to use an id and i'm going to call this main logo like that now if we head to the style.css we'll do hashtag main dash logo and here we have to reduce its width so let's try with for example perhaps this is 200 pixels i don't know let's try 200 px like that oh that was a bit too large in my opinion so let's reduce it further to 100 pixels and yes that is much more like our design in my opinion looking pretty good so with that we have solved the challenge great job now we're going to breathe some more life into our example here because it works fine with this static jpeg as the background image but wouldn't it be a lot cooler if it was animated so you could see the stars flying around and in our images folder we now just happen to have a file called galaxy dot web p what's that let's just try to replace this universe jpeg here with the galaxy webp file so i'll do galaxy dot web p and boom the galaxy webp is an animated image in which you see a bunch of stars around the galaxy and to me this looks a lot cooler than what we just had now you might wonder what this web p here is and that is just an image format pretty similar to so-called gifs gif and gif is what you recognize from all over the web in animated images like this one right here which you've probably seen before so webp is used exactly as gifs are on the web however it has a better compression so it's more compact and doesn't use as much data as gifs use when they're sent from a server to a client so we want to use webp where we can and now you might wonder well where did you find this galaxy.webp image that is on a site called giphy giphy that is a search engine for gifs so i just navigated to it searched for galaxy scrolled a little bit down and found this neat looking galaxy gif here created by the european space agency now this is a slideshow so you can't see that this gif is now being animated but it actually is because i just saved this image to my local computer and then uploaded it to the images folder right here now if you want you can also click on the share button here and click copy gift link and then you can simply paste that link into this url and then that will give as you see the exact same result but i prefer to rather use the version which we've imported into our project right here in case the griffey file might change at some point or something however for experimentation purposes i think you should head over to griffe search for a few images and just paste them in right here and see how that affects our example just so you've got familiar with using giphy and pasting external urls into the background image property in css so go ahead and do that and then i will see you in the next scrim one thing i like to do when working with images as backgrounds is to fetch colors from the image and use it in the design because that can often look pretty cool so let me show you exactly how to do that we can use coolers these servers you're already familiar with because if you click on the more option in the nav bar you can choose pick palette from photo that'll take you to this image picker where you can choose an image by clicking on the browse an image and either upload the image or paste a url to it once you've done that you're taken to this nice tool where you can either drag and drop this picker around on the image until you find the color you like or you can use this range input here as that'll automatically try to find interesting colors in the image for you and then it generates a palette as you can see right here now let's say we like this palette then we'll click export and save palette and we have it in our dashboard now it only has three colors but that doesn't matter i'm only going to use one of these that is the blue one because i think it would be cool to use this blue color as the text color on our site so i want the h1 and the button text to have that bluish color and the way i'm going to do that is change the color of the body here because that is where the h1 gets its color from it is the only element inheriting from the body at this point so i'm going to do like that this is the hexadecimal value i got from coolers and as you can see i think it looks pretty cool and also let's keep the underline white because i think it makes sense to have that in a different color now moving on to the button we'll do color and paste it in again and there we go now here i think actually this applied text could be a bit clearer because the contrast with the background is just okay at this point because with this blue color i think the thin letters became a bit too thin now a final thing i want to do with this apply text here is make it a little bit bolder make it stand out a bit more and luckily we imported not only the regular font weight with the orbitron font family but also the 800 font weight to the extra bolt so what we can do now is actually do font weight and then press bold and there you can see it actually bolded the text or we could use the value directly which is 800 that'll give us the exact same result as the font weight property can both take numerical values and named values so the numerical values range from 100 200 300 400 and so forth up until 900 and the named values are for example normal bold and so on so we imported 800 so let's just write 800 here with that i think our example looks pretty good so let's move on going to space is definitely a risky affair so i want to add this terms and conditions apply text underneath the main section of our site however i don't want to add this this is scrimba so you're going to do it of course but i'm going to give you a set of detailed instructions so that you know how to go about doing this so you're going to start with wrapping the hero section in a div and the hero section is the one you can see on top here it's very often called a hero section in web design and it's probably called that because kind of serves as the user's first glimpse of the company and the offering and has this kind of prominent place towards the top and it usually extends full width so it is kind of the hero of the website so in our case it is these three elements right here the logo title and the call to action button and those should all be wrapped inside of a div and then i want you to move the background image that is the animated galaxy image from the body and over into this div now as you do that you'll notice that you'll have to add some padding to this hero div as it'll look really crammed if you don't add that then i want you to add the terms and conditions apply in an h3 below the hero section and then finally a problem you'll probably come across is that the body tag has some default margins which right now doesn't bother us but which will become apparent once you change this layout so go ahead and give this one your best shot and when you return back to me i'll show you how to do it as well okay let's go i'm gonna start with the hero section div i'm gonna add it right here i'll give it an idea of hero because it is unique so it's okay to use id then i'm going to indent this in and run the code and seemingly nothing has happened because as you remember from previously divs don't have any default styling to them so what we need to do is target the hero and then move the background properties from the body to the hero and there we go as you can see it doesn't look particularly good now as i said we will be forced to deal with the padding in the hero because you can see here this logo is really crammed all the way up to the top and there's no space underneath the button so let's add padding and on the top maybe we want 10 pixels like that yes on the right hand side we don't need anything for now but on the bottom we want a lot of padding maybe we'll do 40 pixels like that and then on the left hand side you don't need anything either so here we have the padding now let's add the terms and conditions apply h3 below the hero that's just like this adding an h3 terms and conditions apply like that from the code and there we go it has already the color we want since we have set the blue color as the text color on the body so it inherits the color property from the body however as you can see are still not quite done because something has happened with the margins on the site or at least the margins of the body has become more apparent because now the entire body isn't filled with the background image anymore so we're suddenly noticing that the body has some default margins on all sides we don't want that so we're gonna neutralize that by doing margin zero and boom there we go we have completed the challenge now there is one more thing which is a little bit problematic which is that if you watch this on a mobile for example so that the exploration word is located directly over the galaxy the readability syncs quite a bit because the text color blends in with the background and we will fix that is by using a shadow technique on this text so now you're going to learn exactly that text shadow is a really nice tool to have in your web design toolkit as it can make your designs much better so here i've created a very simple imitation of the netflix logo with the red background and white text as you can see i've pulled in a font which kind of looks like the netflix font it's not really the same but it's close enough and it is an h1 and i've set the font size to 80 pixels now what if i want to have a black shadow like this as that makes it look even more like the classical netflix logo i can achieve that by on the h1 which is the element that includes the netflix text as you can see here i can add a property called text dash shadow which must contain three values so just bear with me here as i'll write all three of them out and then i'll explain it i'll do zero pixels zero pixels black and seemingly nothing happened that's because i first wanted to show you the third value here black that's pretty simple that's just the color of the shadow and as you can see here it is black the two other values dictate the offset of the shadow on the horizontal line and the vertical line so if i add for example 5px here you can see that now the shadow appeared it's as if it's sticking out to the right of the letters 5 pixels if i do the opposite minus 5 pixels it'll stick out 5 pixels on the left hand side as you can see there's no shadow below and above because that's dictated by the second value so if i turn this back to five and on the vertical one do for example 30 then you can see that the shadow got pushed far too much downwards if i do minus 30 it's pushed upwards if i do 5 pixels it's pushed only 5 pixels downwards which looks pretty good actually it is indeed the design we were looking for so summarize here the first value is how many pixels you want to push the shadow to the right the second value is how many pixels you want to push the shadow downwards and the third is the color so what i want you to do now is try to make the shadow look like this as you can see now it's on the left hand side and below like as if the sun is shining from the top right corner so take a guess at how you need to change this line 11 here in order to get that effect go ahead and do that right now okay hopefully that went well what you need to do is basically put a minus in front of the first value like that that shifted the shadow from being on the right hand side of the letters to the left hand side okay changing it back again now i want to teach you body fourth value you can add to the text shadow property and that is the third pixel value so here you can also write for example 5 px and what happened now if we compare what we have here right now with how it was before we added that value you can see that previously the edges of the shadow were sharp there's no blur whereas here they're kind of fading over into the red color behind it and this is called blur if we reduce this one to zero again the edge is sharp again now if we do something crazy like 50 you can see that it is so blurry that it just looks a little bit like background that's a little bit dirty so let's get it back to zero again here what i want you to do now is try to achieve this shadow go ahead and give that a shot right now okay hopefully that went well let's have a look you can see the shadow is above and to the right of the letters let's fix that first to have it on the right of the letters we need plus value on the first one we want to push it to the right and we want to have it above so we don't want to push it downwards as we're doing with this value so we want to minus it pushing it upwards like that and now the only difference is that this is a lot more blurry whereas this is completely sharp so let's try five pixels here as well and boom there we go that looks pretty correct to me so great job doing this challenge before we move on i have just a final trick i want to show you which is a little bit of a hack but super useful because let's say that for example the background here was white smoke instead of the red color and white smoke is a very white color with just a little bit of gray in it as you can see it looks really bad now we can hardly see the letters we can clearly see the shadows if we now set zero pixels on the two first values but keep the blur well then suddenly there's no shadow but there's just a glowing effect around the letters making them visible even though they are in almost the same color as the background and if we make this smaller for example one you can see the line around the letters look a little bit sharper since it's very little blur now if we do like 20 each letter gets a lot of blur around it and thus making them visible so that is a little trick to use normally with small values on the blur in order to make your text stand out a little bit more in the situation where your text color and your background color is a little bit too similar and this is very relevant if you have a background image in which the contrast between that image and the text color is a little bit too weak so then you'd use this hack to make your text stand out despite the similarities between your text color and the background image so that was quite a lot about text shadows but now you know it so we are ready to move on to the next scrim okay now we are going to fix this problem of the text blending too much into the background when it is broken into two lines and thus are located exactly over the galaxy in the background image here because the readability is a bit too low now in my opinion and i want you to fix that by adding a blurred border around the h1 tag using the technique you just learned you should set the blur to 4 pixels and the color to black so go ahead and do this right now then i will show you the solution as well when you return back to me ok let's do this so first we need to select the age run and we've been really good at using ids and classes here so instead of just selecting the element i'm actually going to give this one an id of title because we probably only have one title on the page so running this and navigating back into the css file i can select the title and then i need to use the text shadow property we want both the horizontal offset and vertical offset to be zero pixels we're not actually doing creating a shadow here the effect we want is more of an outline so then without any offset but for pixels blur it'll blur a black shadowish effect around the entirety of all the characters so if you look at it now and look closely there is a slight blurred black border around the letters it's not that easy to see but if you now look at this while i comment out that css rule you'll see the difference so keep looking at the exploration word and i will comment it out now now i'll comment it back again there comment it out comment it back in again so so hopefully you saw that it changed here in a little bit so now the readability is a little bit better great job now i'm not sure if you're aware of this but you're the best because you've completed this section and that is very well done plenty of people who have started this section has never completed it you're not like them so i am really proud of you and let's take a quick look at what you've learned starting out you learned about background images more specifically you learned about the background image property and the url function and also the background size property in css and setting that to cover we also then used a webp format in order to get this animated image in our hero section which is super cool and really breathes life into our website and then you learned about google fonts we imported them up here in the head section and then you set the font family like this fonts do so much for the design of websites so this is an important thing to know as a web developer and you also learned a new html tag which is the spam tag which you can see right here it is what allowed us to create this underline under the expiration word which it did in combination with a utility class the underlying class which only has one job and that is to set the underline whatever element it's applied to and then also we learned about ids which is another attribute in html that you target in the css using a hashtag and at the very end we did a really cool trick with the text shadow property in order to make the readability of our title here a little bit better so you've learned some key concepts in this section now is the time for you to get up stretch maybe get a cup of coffee or whatever you prefer to recharge because be sure to do exactly that and then i will see you in the next section welcome to this section where you are going to build a birthday gift site and it is just so cool because this site is something you can use for whenever a friend or family member of yours has a birthday so what you do is basically add their information to the header here and then we have these gifts so for example this one saying here's how happy i am for you today and when the birthday boy or girl hovers over the image they will see a nice gif that makes them feel truly appreciated going down we have other gifts how people react when you enter the room this is meant to make them feel really good looking and here if i had to describe you with one word genius so you make them feel really smart next up the only person as badass as you is of course james bond and then rounding it up with a little toast so hopefully you have someone special to send this site to like nikki for example who despite being a computer-generated image created by an ai also is one of my best friends so i am looking forward to make nick happy on his birthday let's just get started with this section okay it's time for your first challenge what you're gonna do is create this basic design here for the header of our app and it's pretty far from what we got right now as you can see in the styles.css we have no styling at the moment so our site looks pretty dull you can see everything is left aligned and the image of nick is far too large plus we're lacking the appropriate fun taking a look at the html here it's just a very simple structure with an h1 an image tag an h2 and an h4 inside of the body so nothing special there the font that you will use is called happy monkey and it is a google font so you're going to have to head over to google font to fetch it and then embed it into our project as you can see in the provided design the image of nick should be rounded and not squared as it is right now so you'll have to figure out how to make an image round and yet again you'll find the answer if you google it finally i want you to consider how you should select the image so should you use a class selector an id selector or an element selector you can use any of them but i want you to think about it and try to figure out what you think makes most sense go ahead and do this right now and then i of course will show you the solution when you return back to me okay hopefully that went well let's do it together i want to start with centering everything and for that i'm going to do body and then set the text align to center like that as you can see that indeed centered our elements next up i want to fix the image it is here and i think it makes sense to use an id selector here because this is kind of the main image of our birthday boy and i don't think we'll duplicate it across the page so it is unique meaning we can use an id so i'll do id equals and then bff for best friend forever because nick is my bff please don't make fun of me because my bff is a computer-generated image but that is just how it is and then i'll do dash img just to make it a little bit easier to understand what it is based upon the id name then i'll run the code so that that is applied to the dom and heading over to the styles i'll do a hashtag bff.img like that and first i want to fix the width of it it's far too wide this looks more like 100 200 pixels so let's try width of 150 pixels like that yes that is pretty much what we're looking for and hopefully you figure out how to make an image round and the way to do it is to use the border radius property which you've seen a couple of times by now and the maximum border radius an element can have is 50 and boom there it is completely round all right the final part is to add the google font the happy monkey font that is a very birthday-ish font actually i found it just by googling google font's birthday then happy monkey was the top result clicking into that we'll select it by clicking select this style and then we'll copy the links here so that we can embed it into our project i'll paste that into the head of our project then copy the font family rule so that i can paste that directly in as well now i'll have to rerun so that the font is embedded and yes there we go that is as far as i can see exactly the design we were looking for so great job let's move on okay your next challenge is to colorize the app because i wanted to look like this with a nice blue background pink border and white text and as you can see i've provided the hexadecimal values for the pink blue and white colors here so your job is simply to figure out where you need to add these and what kind of css properties you're gonna use go ahead and do this right now okay hopefully that went well let's do it together i'm to start here in the body taking the blue hexadecimal value and setting it as the background of the body boom there we go next up we want to set the color property here to white just just six f's after each other like that now that is inherited down from the body into all of these okay final step is the image as you can see it should have a border around nick and it should be pink so here we'll use the border property and let's try six pixels because it looks pretty thick it should be solid and then we'll copy the hex value from pink and paste it in right there and actually that looks about right to me so great job let's move on there is one problem with our site at the moment which is that if we run these two colors through a contrast checker for example userway.org you'll see that our accessibility actually fails because the contrast ratio is too small so what can we do to improve this given that we want to keep the colors we have what we can do is use the trick you learned in the space exploration section because pay attention to what happens to this text if we add a thin black border around the text using the text shadow property so this is without the text shadow property and this is with it as you can see the text now stands out more as the black contrasts well with both the white and the blue background and is also pretty subtle so the text still looks white but it's just a little bit more visible and in my opinion i think the readability here is pretty good so what i want you to do now is write the css for this exact technique so add a thin blurred border around the h1 h2 and h4 elements using the text shadow technique you learned in the space exploration section you're gonna set the blur to one pixel and the color to black okay hopefully you remember how to do that give it your best shot and then i will of course show you the solution as well when you return back to me okay let's do this so let's start with the h1 here and here i'm just going to use an element selector as we'll have a lot of h2s and h4s throughout the site and i think we want all of them to have this style so there's no point separating it into a class so text shadow setting the first two values to zero pixels since we don't want any offset vertically or horizontally but the third value the blur should be set to one pixel and then the color is black and boom there we go we have that thin outline which improves the readability and now you probably did something like this added a whole new rule for the h2 and yet another one for the age four and if you did that is completely fine that is how i expected you to solve this challenge but i do want to show you a little trick which allows us to reduce all of these into one line and that is simply by using a group css selector where you simply add multiple selectors on one line so what you do is instead of just writing a tron you write h1 comma h2 now we can delete the h2 because this rule is applied to both the h1 and the h2 and likewise we can just add the h4 here as well like that now we can remove all of this as you can see the thin border is applied to all of the elements now it is really important that you actually use a comma here and not just add it like this this means something entirely different and we're not going to learn about that right now as it's outside of the scope of this section so make sure you have the commas and then you can use this technique and i happen to know that we also want this text shadow to be applied to our h3 elements down the line and also our paragraphs down the line so i'm just gonna add them here so that we don't have to think about this as we add new elements to our site later down the line so great job let's move on now we want to take this pink background that we have around the image and apply it behind the h2 and the h4 element so that it looks like this so let's try the most intuitive approach and see how that works that would be to target the h2 and the h4 i'm going to use this comma selector here to target both simultaneously as we've done up here and then we'll set the background to this pink color right here however as you can see that did not give us what we wanted because heading elements like h2 and h4 are by default display block so they take up all the available horizontal space so let's then try to turn them into display inline and see what happens then ah that did not work well either because when they're in line they're actually narrow enough to be on the same line and actually jump up to the line above with the image which also is display inline so let's remove the display inline as well and the way to actually solve this is to use a technique you haven't learned yet now i'm just going to show it to you fast and then we're going to take a closer look at how it works in the next script because what we can do is head into the body which is the container element for these two and for all of our elements actually and do display flex that stacks things up on a horizontal line turning every element into its own column but we can change that by doing flex direction which now is set to row by default and that might sound a little bit confusing since i've always said that flexbox turns every element into its own column and yes it does that however what it also does is make sure that all of the elements are in the same row so that is why it's called flex direction row because rows go from left to right you can see there's only one row from left to right here which becomes even clearer if you do like this and all the elements are inside of the same row now in order to flip this we can simply change row from column like that now all of the elements are stacked on top of each other again in one column because a column goes from top to bottom so this is just one column now with that in place we can use another css property in that flexbox give us which is called align items and set that to center and boom there we go now this was probably pretty confusing and you were not meant to understand this right now which is why we're going to take a little digression here and look closer at how flexbox works and then return back to this example where you will code it up yourself and properly understand it if you are to become a flexbox master you will need to know align items luckily though it's not that hard to learn because it is a close cousin of a property you already know which is justify content so let's pretend that the two of us for example work in a lab together well if so we'd have our lab equipment which you can see here inside of our lab which is this green rectangle right here and what we're going to do now is use flexbox along with justify content and line items in order to organize our lab equipment in different ways in our lab so let's have a look at the code the html is very simple it's just a container which has three divs and each div hold exactly one piece of lab equipment visualized via an emoji if we head over to the css you can see that the container has a border and a fixed height so that's why we get this green rectangle the items have a width and a height there's some margin in between them and some padding on the inside i've set the font size and also added a border and finally something you haven't learned yet but i've added a gradient background so that the color slightly fades from a darker shade of green to a lighter shade of green in the background now you are going to learn about the linear gradient later on so don't worry a second about this right now just accept that it is how it is and let's get going with the organizing so as you can see by default the lab equipment the div status are stacked on top of each other because as you remember divs are display block however if we turn it into a flexbox layout each of the item gets its own column and as a consequence they stack up on the horizontal line so far so good and if we set the justify content properly it'll arrange these in different ways along this horizontal axis so if we do center for example they are centered if we do n they are pushed all the way to the end and yeah you know the deal so what align items does is instead of controlling the horizontal line which i from now will call the main axis it controls the cross axis which is the vertical one going from top to bottom so let's turn this back to start and do align items center boom there you can see now it pushed all of the three items down to the center so that they are centered vertically meaning they are centered along the cross axis and then i can combine this with the main axis which is justify content that controls the horizontal one going from left to right for example do end here and boom then we are still vertically aligned so we're in the middle but we are pushed all the way to the right hand side along the main horizontal axis so the values you are going to use for line items to begin with are start center and end whereas with justify content as you know you can use start center and end but also these space around space evenly and space between properties okay let's move on to the challenge what i want you to do is follow my orders on where we should leave our lab equipment because i want you to do it in very specific ways starting with this position here where they're all squeezed down in the bottom left corner so go ahead and modify justify content and align items to achieve that layout right now so to achieve this layout you can see it is at the bottom of the cross axis the vertical one so we'll do end online items but it is at the start of the main axis because it is pushed all the way to the left meaning that we should do start up here and there we go we have solved it okay new challenge i want you to achieve this layout go ahead and do this right now so here we can see we are actually centered both along the main axis horizontally and the cross axis vertically so i'll try center yes and center again and there we go okay final one i want you to organize the equipment like this go ahead and do it right now okay hopefully that went well the first thing i'll notice here is that all of the items are squeezed to the top so align items should be start and there's some space around the elements so we need to try one of these for example space around space evenly or space between so let's try for example space between hmm that didn't exactly achieve what we wanted because there should be some white space on the left side and the right hand side here whereas these two are squeezed all the way to the end so maybe we can do space around instead yes that looks exactly like what we want so really good job solving these three challenges before we move on there's just a small thing i want to tell you that is something you might see from time to time which is that if i now remove the height of our items see then they just became a little bit higher because the content inside of it wants a little more height but that was besides the point what i wanted to do is also remove the align items let's see what happens oh wow it turns out that flexbox in the cross axis actually stretches the content like this and the reason it didn't happen previously was because our height property overrode that stretching so what this means is that line items by default has the value stretch when we do for example start it's no longer stretched and it's pushed to the start so this might feel very confusing and the only reason i want to tell you about it now is that when you are in a flexbox layout and you notice that something is stretching in a way you don't want it to stretch the prime suspect you should look at is align items and experiment with that so be aware of that but don't worry too much if you found this a little bit confusing it's totally okay let's just keep up the pace and move on to the next scrim now you're going to learn about flex direction because there is one problem with our lab system now that is that regardless of how we change around on the align items and justify content let's center an end for example our lab equipment will always stack up besides each other they'll be on the same row and there's no way to get them to stack on top of each other but maybe that's how i prefer to leave my lab equipment for the night but regardless of how we change to justify content and align items that is now impossible now we could of course remove the display flex and then these divs will stack on top of each other by default so by doing this now they stack on top of each other however justify content and line items no longer work so if i try changing these nothing happens because these properties work inside of a flex box not inside of a random div that by default is display block so we need the display flex like that in order to make these work however what we can do is change the flex direction so first let me just both of these do back to start and then i'll do flex dash direction and it by default is a row because as i said they stack up alongside of each other on a row but if we change this to column boom there you can see now they suddenly stack on top of each other as if they are in the same column as columns go from top to bottom so now we are back to the original layout we had before we made this into a flex container but justify content and the line items now work however they work in a little bit of a different way than you might expect because as you remember i previously talked about the main axis going from left to right and being the one controlled by justify content whereas the cross axis going from top to bottom and also being controlled by align items well when we change the flex direction and our items stack up differently on top of each other we also change the main axis so this is no longer the cross axis it is the main axis and it's controlled by justify content whereas the horizontal one is no longer the main it is the cross and it's controlled by align items so we basically flipped align items and justify content so if i now do justify content end it'll jump downwards whereas previously they would have jumped to the right and if i now do align items and it'll jump to the right whereas previously align items control the vertical position so this is probably a little bit confusing now you should not feel bad if this feels overwhelming this will take time to mature in your mind and it's totally okay that in the beginning now you're just experimenting with these values in order to get the layout you want and not really remembering exactly why it works as it works so let's now give you some practice i want to clean up my lab equipment and i want it to be like this so go ahead and change around on these two values in order to achieve that layout okay what we need to do is on justify content i want to center it so that it's vertically centered but then we want to align it to the start on the left hand side yes that is correct okay new one achieve this layout okay here we can see some space in between the items so i think we need to use space between on justify content yes looking good but we are aligning to the left we want to align it to the right instead so align items should probably be end instead of start and boom that is correct final layout this one right here give it a shot right now okay we can see that they are all squeezed towards the top so i think we'll do justify content start like that yes this is good but we want to center it as well so we'll do a line items center and there we go so great job doing this let's just move on okay now we're going to put your freshly acquired flexbox skills to the test because you are going to turn this layout here into this layout so first i want you to wrap the html element in a div with an id called header so that is all of these items right here and then you are to select this header and then use flexbox to achieve the layout from the design slide and as you might have guessed you will need to use flex direction and align items to solve this so go ahead and give this your best shot okay so we'll start in the html create active opening tag and close it off down here indent this run it no change scene in the mini browser that is to be expected because we'll have to target it and style it so i'm gonna do header and then first display flex that forces all of the elements into one row because it is flex direction row by default however we don't want that we want everything in one column so we'll do flex direction column like that now they stack on top of each other which is just what we want but there's a problem the two elements here are stretching and the image of nick is left aligned it's not centered so i think we need to change the align items align items into center like that and there we have the layout we wanted so great job let's move on okay now you're going to fix up the design for this 24 years old element and the date element right here because i want it to look like this here you can see that there's some space between the content of the element and the edge of the element and there's not as much space between the elements and also the edges of the rectangles are a bit softer but before you start doing this there's a couple of things i want to do because here the h2 and the h4 have no ids or classes they are just selected using the element selector and also using a selector list separated by commas and i don't think we should do either of those first of all we probably don't want all of our h2 and h4s on the page to be styled according to how it looks here up in the header so we actually want to give these two ids i'm going to call this one b day age and this one b day date running this code so that we got it applied and then in the css instead of using element selectors we'll use id selectors be they age and delay date and then finally let's avoid applying styles to both of these simultaneously let's work with one or the other because this is really an optimization and writing code which is so called dry short for don't repeat yourself and while that is a good thing i want you to focus on the core css now because this will introduce a little bit more complexity so let us instead just keep it simple so i'll break this into a new line so we got the birthday date rule here and then copy the exact same thing to the be they age like that okay now it's time for your challenge you are going to make the b day elements look like the provided design slide like this so go ahead and do this right now okay hopefully that went well let's start with the age element as you can see there is some space around it that is padding most likely so let's add padding for example 10 pixels and see how that works if we compare that with what we have in the design it looks pretty good but i think we shouldn't have 10 pixels on each side i think the padding on the left and right side is meant to be slightly larger than the top and bottom as we've often seen with buttons and layouts in general so for the top and bottom we'll do 5 pixels and left and right 10 pixels that is what we are looking for as far as i can see okay next up there is some border radius here as well not that easy to see but it definitely is there so we'll do border radius five pixels for example that looks pretty good to me and now let's just try to copy this down to our birthday date and see how that works here you can see except for the fact that there's much less space between the elements here they look pretty similar as far as i can see so we need to move on to the margin let's try first and remove all the margin from the birthday date margin 0 like that now it's quite a lot closer and whatever margin comes from the h2 element that probably has a bit too much margin bottom so let's rather control that by doing margin bottom for example 10 pixels and yes that looks pretty good to me let's also look at the margin top here it is too much space between the age element and the image so if we do margin top by 10 pixels there that looks pretty good but it's perhaps still a little bit too much let's do five instead yeah actually i think we got it so the final step then is to convert this into a shorthand because we know how to use shorthand don't we we want 5 on the top and 10 at the bottom then we'll do margin 5px for the top 0 for the right hand side 10px for the bottom and 0 for the left hand side and there we go now if your solution is slightly different from mine perhaps you used slightly different margins border radius padding that doesn't really matter give yourself a pat on the back regardless of how you solve this and let's move on okay now you are going to create the first gift section of our site so as you can see it contains a title a little hint about hovering over the gift and then there's the image itself now the hover effect is not a part of this challenge you're only going to work with this hard-coded gifs cover at this point and that gift cover has been added up here in a images folder which i've just created as we now have two images so i wanted to gather them together in this images folder that means that i've also changed the image of nick or the source that is referring to the image of nick in the html it now contains the correct path into the images folder so the challenge is described in detail here i want you to start by creating a gift section div that will wrap all of the elements for the first gift and then i want you to add the h2 h3 and img element so that is the title which is an h2 the hint which is an h3 and finally the image itself and i want you to give them all their own classes so that you can use the classes to select the elements when you are to style them according to the design and as a final hint the image should be 400 pixels wide so go ahead and do this right now okay hopefully that went well so i'll start by heading over to the html and create the markup so we wanted a div to begin with i'm going to create that and then give it a class of gift section like that and inside of it we wanted first an h2 for the title which should contain the following text let's run this and yeah ah nice we can see that the text already has the correct font and also the slight shadow around it okay very nice let's then give it a class as that or something we should do with all elements i'll call this gift title like that and there was the h3 with the following text and i'll give that a class of gift hint as you can see i'm using gift and then a description i think that makes it easy to understand that these are all somewhat related to each other finally the image element should have a source of images slash gift cover dot jpeg and also a class of gift img all right let's run this code and as you can see everything is being rendered though the image is far too large so we need to get going with the styling all right i'll start with the image so dot ift imd and give it a width of 400 pixels yes that is much better and that is centered because of our text align center up here very nice okay let's just carry on with this one you can see it has a white border so let's do border looks to be something like six pixels or something and solid white yep pretty good and finally a border radius because the corners here are a little bit rounded off so let's try order radius at 10 pixels for example and yeah that looks pretty much like the design for the image nice okay next up is the spacing as you can see we have far too little space from the gift section itself to the header section above and i could add that to the top element here to the title for example but it makes a lot more sense to add it to the container element itself because it should control how far it is between this container and the container above so let's do gift section margin top and for example 50 pixels that is much better and looks pretty much like what we have here now you can see that the space between the title and the hint is very limited it's not that much space whereas here the default margins for the h2 and h3 elements create quite a lot of space in between them so now we probably have to work with both the default margin that the h2 has at its bottom and the default margin which the h3 has at its top it doesn't really matter what we start with let's for example just start with the gift hint and see what happens if we set the margin top actually let's bring it up on the side here now we've not done anything with the margin top at all let's set it to zero you can see nothing happened okay that must be because the margin top here and the margin bottom under the h2 collapsed into each other and the margin bottom for the h2 was probably larger than the margin top for the h3 so removing it served no purpose that means that we also need to try and remove the gift titles margin at its bottom set it to zero for a couple and there we go now they're really crammed into each other actually too much they should have a little bit of spacing in between them so let's try to instead of reducing that to zero we set it to for example 10 pixels that looks much more like the design we have here very good so you probably had different names on your classes and different margins and perhaps different borders and radiuses that doesn't matter the important thing is that you gave it a shot and got some kind of result hopefully resembling this so no matter what you did great job let's carry on with this course okay now we're going to prepare our project so that we later can add the hover feature so we're not going to add the hover feature right now we're just going to set the stage for it and in order to do that i'm going to first mess up this project a little bit and then it'll be your job to fix it because we are not going to use the image tag here in order to display this gift instead we are going to use a div tag so i'm changing this into a div which means i also need to close it like that because divs are not self-closing as img tags are and then next up divs don't have a source attribute so we can't use this in order to display the image if i now run this you can see boom suddenly our image is gone this src attribute has no place here because instead we are going to render this image through the css background image property so i'm going to remove this one if we run the code again you can see nothing else has happened and moving over to the css now it is your job to turn this weird line here into something that looks like this which is exactly what we had before i messed up the code here so you are to fix the gift img div because i kept the class right here so that it looks like the provided design and a little bit of a hint it needs a height and if you wonder how much i want it to be a square so equal width and height it also needs a background image which is how you'll render this gift cover it also should be centered again because as you can see here this looks very much left aligned so basically what's happened here is that the div has zero height because the div has no content inside of it so the only thing that's visible is the border which spans 400 pixels starting from the left hand side and over towards the right hand side so go ahead and give this a shot and then i will show you the solution when you return back to me okay let's do this first it needs a height and it should be a square meaning equal width and height so let's just do it and set it to 400px like that as you can see we now have a empty div on our page next up we're going to set the background image so how do we do that well you've seen that one before background image url and then point it to the images folder and the gift cover dot apec and there you go but what is happening here it seems like we only kind of see the top left corner of the image that is because the image itself is huge much larger than this 400 by 400 pixel container so we need to use our good old friend background size and set that to cover and that squeezes our large image into the current width we have available here now finally why isn't this element centered anymore well the centering of the image used to happen because the text line is set to center but text align will only center inline elements inside of its container and as you hopefully remember divs they are not in line they are display block and you might have tried to do this play in line like that then you can see that doesn't really work then our width property and height property gets this weird underline underneath them because they are simply ignored by css because you can't force the width and height of an inline element as they should only be as large as the content inside of them are and this div doesn't have any content so we can't really use display inline what we rather can use is the margin technique you learned earlier the one where you set the left and right margin to auto because that works on elements that are display block and which have a set width so let's do margin 0 on the top and bottom and auto on the left and right and there we go we have it centered we are back to our original design and we've set the stage for our hover effect which nick is going to be so glad to experience so it's really cool that you've made it this far and let's just keep up the pace and move on to the next scrim in order for you to build the next feature for our birthday gift site you will have to learn about the hover pseudo class so let's take a step back from our birthday project and learn all about this hover pseudo class for it i've created this little fictional website for a restaurant it's just a very simple site that has three divs that are meant to be navigation items where you can look at the menu book a table or order catering if we head over to the css you can see that the only styling here is a set of rules that are applied to the divs that is the three menu items what i've done is simply aligned the text to the center i've set the text color to white given it's a margin some padding on the inside of the menu items i've added this red background color cranked up the font size and also made the font bold now what would be really nice is if these elements changed slightly when the user hovered over them so that we gave the user some visual feedback hinting to the fact that these should be clicked and also just making the site feel more alive and that is where the hover class comes in because what we can do now is if we target the same divs and then add a colon hover and opening up the curly brackets then we can write specific rules that only are applied when the element is being hovered over so for example we can change the background color to this color right here and this hexadecimal value probably doesn't tell you anything but i can disclose that it is a slightly darker shade of this red hair so now if i hover over the items boom you can see that the background is suddenly a little bit darker than the other items so this gives a nice feedback to the user so what's going on here is that this line takes precedence over this line when any div is hovered over and we can also for example increase the font size 40 pixels let's see how that works all right now it really stands out when you hover over one of the elements and let me show you a cool trick to prepare you for your next challenge because what you can do is actually do background image and then as you know use the url css function and point it to a image source i happen to have a image lying around in the file system right here let's try them so eyes dot jpeg we now hover over the item we can see our good friend nick staring back at us that is probably the creepiest restaurant menu i've ever seen but the point is only that you can change the background image on hover so hopefully this has prepared you for your next challenge because when we return back to the birthday gift site you are going to work with this hover class in order to help nick unpack his gifts so let's return back to our main project okay now we are getting into the fun stuff here because now we're going to create this epic feature where nick when he hovers over the gift paper gets revealed an underlying gif that makes him feel happy and appreciated on his birthday so the challenge is described here you are to swap the gift paper image out with the happy gif when you hover over the gift paper so the happy gif is added here in the images folder i'm not going to show it to you i want you to solve this challenge in order to see this gif now the gift paper image you are to swap out is this div right here as you remember we gave it a background image which is the giftcover.jpg file which also is in our images folder so go ahead and solve this challenge right now and then i will show you the solution when you return back to me okay hopefully that went well what we'll do is first target this gift img here as we want to create a hover effect on it so i'll do gift imd colon hover now whatever css properties and values we are setting inside of these curly brackets will be applied when the user hovers over this gift image and what kind of properties do we want to change well it's actually only one just the background image here so i'm going to copy that one paste it in and we don't want it to be the giftcover.jpg we want it to be the happy dot if like that let's see how this works i'll move the cursor down towards the image and when it crosses over we see phoebe and rachel from friends being super happy for nick on his birthday and i don't know about you but if someone told me that they would be this happy for me on my birthday it would make me feel so grateful and appreciated so we are really doing a good deed creating this website and you know what you've done a great deed for yourself in terms of getting this far in the course you have crushed through so many difficult css concepts so phoebe and rachel are also cheering for you take a moment to appreciate that and then i will see you again in the next scrim okay now that we've made sure that nick feels appreciated on his birthday through this phoebe and rachel gif let's make sure he also feels really good looking because now we're going to create this gift right here which says how people react when you enter the room and the gif will show when he hovers over this element is this hot gif up here i'm not going to show it to you now you're going to have to solve the challenge to see it and speaking of that let's have a look at the challenge text so you are to create the next gift which uses the hot gif and its html structure should be like the previous one but without the gift hint element because as you can see here we have this hint written in parentheses however that's not needed for this one i think nick will probably get the point by the time he scroll down to this one so let's just skip it but other than that you can simply copy paste this section and then of course change the text as well however you will need to do some more things as well because now that you have multiple gifs on the page you cannot use the gift image class to set the background image on hover that is this one right here because if you have multiple gift image elements on the page well then every single one of them will just show this happy gif and that's obviously not what we want so instead each of the gifts will need a unique id that controls which background image that should be shown when the user hovers over the element okay that was probably a lot to parse for you but if you didn't quite catch it just go ahead and try to solve the challenge because i think you will see this problem sooner or later anyway you definitely will actually so make it your best shot and then of course i will show you the solution when you return back to me okay let's do this so starting in the html by simply copying this one right here and pasting it down here removing the gift hint because we don't need that and then updating the title let's run the code now and here we can see the first element with phoebe and rachel let's scroll a bit down and there we have our second element though it still shows phoebe and rachel so that is a problem and that is because as i said this gift image class just sets the background image on hover to the happy gif on both of these elements right now so we can't use a class for this we need a unique id but we're not going to remove the class of gift img because it actually gives a lot of styling actually all the styling to the element so it's only the hover pseudo class that needs to be applied to something else so let's instead now on the first one here add an id that we'll call gif dash img happy we'll run the code so that it's applied and then instead of referring to the generic class here refer to this gift img happy id now if we run the code you can see that it works on the first gift though the second gift now lacks a hover effect and that is because the only hover effect we've applied now is on this specific id here on the first gift previously we used the generic gift img class so it was applied to all gift images but now the hover only works on the first one so what we need to do is use this exact technique but on this section as well so i'll create an id on this section and call it gift dash img dash pot i'll run the code so that it's applied and then since i'm lazy i'll copy this if img happy should be changed to gift img hot because that is our new id that targets that element and we don't want to show the happy gift we want to show the hot gif so let's see if this works here we are at this section when we hover over the image we see someone looking pretty interested in nick so i think he will feel really good looking and hot on his birthday when he sees this gif so great job solving this challenge let's move on as you can see over in the file system i've added a genius gif and a badass gif so your job is now to create the genius and badass gift sections they should look exactly as the hot section so i'm not going to give you any more instructions other than giving you the titles so that you can just copy them from here instead of writing them out on your own so go ahead and create these two sections right now and then i will show you the solution when you return back to me good luck okay let's do this so i'm going to start in the html file because we're simply going to copy paste this one two times then i'm going to add the titles i'll copy this one and paste it in here and copy this one and paste it in here okay let's run this now you can see we have the hot gif and then the genius section which still has the hot gif underneath it that's to be expected and there we have the badass section which also still has the same gif so now we have the sections rendered on the page at least but we need to fix up the css so lazy as i am i'll copy this one there it says gift image hot the first one will be the genius one so i'll do genius instead and that should refer to the genius gif now that we have this in place we can just give this class to the respective image like that running the code and we have the happy gif we have the hot gif and then the genius gif that is pretty cool i surely think nick will appreciate this compliment okay the final one here the keyword is badass so i'll change the id to badass now that we are in the html and moving on to the css copy this and change from genius to badass because that's the id we just created and the gif we want to fetch out from our images folder is the badass.gif let's open up our example again scroll down to who is the only person as badass as you it is of course chuck norris all right we are done with this challenge great job let's move on now it's finally time to add the very last gift and that is the chairs gift so you're gonna add this section but there's a little difference between this section and the previous ones because as you can see here it is not squared but rather more rectangular so what i want you to do is give the gift section a height of 200 pixels which is different from the original height that we controlled up here on the gift img class where we set it to 400 pixels so the way you are to change this or override it is by selecting the gift img shares id which you are going to create just like you've created ids for all the other gift images as well and then you're going to set the height on that element which essentially means to override the previous height and finally here is the text as well along with the chairs gif up in the file system here and i really think you'll enjoy this one so go ahead and give it your best shot and then i will show you the solution when you return back to me okay let's do this i'll start in the html by again copy pasting the previous section and here i need to change the text first so i'm going to do like that and then we're not gonna have badass rather it's shares so running this we can see we have a squared image in place that's not exactly what we want so we need to do the next step which is to use this id which we just created and override the height i'll do height 200 pixels like that and there we can see it is now just as we want it the final step then is to use this hovered pseudo class in order to change the background image to chairs i'll copy this one and do chairs instead and now if we hover over it we see leonardo dicaprio in a smoking giving us a toast really nice and one thing i want to mention here is that you might be a little bit confused as to why this height property takes precedence over this height property and it is actually not because this is written further down in the css file actually if we remove it to even further up in the css file even though css reads from the top and then downwards this still takes precedence over this and that is because of something called specificity which means that the more specific a css selector is the higher it will be prioritized and this id selector is a more specific selector than the class because as you know only one element can have an id whereas multiple elements can share the same class so ids are more specific than classes now i don't want to get more into specificity we're going to learn more about that later in the front-end developer career path for now i just wanted to mention it in case you were a little bit confused so we have now done all of the gifts and we have a super cool birthday page we can send to nick there's just a few things left and then we are completely done with this epic birthday site so i'll see you in the next scrim now you are going to create the footer for our site and it should have a paragraph that says want to create your own birthday gift site take this html and css course with a link to well this exact html and css course and i want you to configure the anchor tag so that it opens up the link in a new tab if you've forgotten how to do that well then you simply have to google it i've provided the link right here and also the text so that you don't have to write that out on your own however outside of that i'm not going to give you any more hints but i want you to notice that there is some spacing around this paragraph both above it and beneath it you can see it doesn't touch the bottom of the site and also it is centered it's about as wide as the images themselves and it's also in italic so you're gonna have to figure out how this translates into css i think you can do it go ahead and give it your best shot and then i will see you again when you return back to me okay let's do this so i'll head over to the html and add a paragraph which i'll give an id of footer and let's paste in the text like that and also the link else we need to create an anchor tag and it should be around this html and css course so we'll start the anchor tag here do an ahrefs and then in order to open the anchor tag in a new tab we'll do target equals underscore blank and then we'll close it off at the end here let's run this okay so we have now something that looks not too far from our design it's decent but still a lot of things lacking first of all this text is far too wide it should be more or less the same with as the images so let's do footer set the width to 400 pixels okay what happened now well we do have text line center but now that this is 400 pixels wide and it's still a display block element as paragraph is that the text line center won't center the content here inside of its container so we need to center it using the margin technique meaning that we'll do margin 0 at top and bottom and then auto add left and right yes there it is centered but actually we do want some margin at the top and bottom because as you can see right here it has some spacing above and a little bit more spacing beneath it so let's try 40 pixels on top yeah that's pretty good and now 40 pixels at the bottom that's a bit too much in my opinion here it looks more like 20 or something so let's rather than do 20 pixels like that now we have 40 at top auto at left right and 20 at bottom and that looks pretty good to me however one obvious thing we need to fix is that this anchor tag should also be white so i'm going to target the element itself new color white like that now i think the final step we have is to make it italic and that's done up here where we can do font style italic and there we go that looks identical in my eyes so really good job i'll see you in the next scrim okay now we're going to talk about gradients and that's something you've probably seen many times in nature though not really thought much about because for example because the sky is full of gradients here you can see a sky that kind of fades from a light blue color into a whitish color and this fade is basically a gradient here's another example where it starts almost black at the top and then slowly fades over into purple and then again into a orange-ish or light brown or i don't know what you want to call this color but you get the point it's fading from one color to another and this is very often used in web design you can and you can do it with css pretty easily let's for example remove this background image of the gift card from our gifts now you can see it's just transparent and then instead we'll write background and linear dash gradient and then two parentheses so this looks a little bit like the url keyword we write when we want to refer to images meaning that this is also a so-called css function now inside of the parentheses we simply write the two colors we want to fade from and to so let's do from red to blue and boom there you go now you can see that all of our gifts fade from red down to blue and by default it starts with the first color at the top and then the second color at the bottom so let's try to mimic this image here in css i happen to know that there's a css color called light sky blue so if we start with that one and go down to white and have a look at this gradient here actually to me it's kind of similar to this one we have here not quite but you get the point okay now i'm gonna remove this give us our gift cover back and then give you a challenge because now i want you to change our site's background into a gradient that goes from blue at the top to pink at the bottom and let me show it to you let me and let me here show you how it will look i'm going to do some magic now i'm going to knit my fingers and then the gradient and then the gradient will be applied automatically pretty nice now you can see the bottom here is pink and if we scroll up it slowly fades over into blue and at the top it's totally blue so this makes the site slightly more fancy which i think is cool and matches the birthday team so now i'm going to knit again and the gradient will be gone like that now our site is blue all the way from the bottom to the top and it's your job now to get the gradient back so go ahead and do that right now okay let's do it so the property we need to fix is the background on the body because we need here a linear gradient going from the blue color it used to have to the pink color which we've been using as a border of our image of nick so then i'll simply paste that one in right here now it should be fading from blue to pink let's see we can see the blue and yes it looks like it is slowly fading towards pink really good job now you've learned a super cool css technique i'll see you in the next scrim okay now that you've completed the birthday gift site i want you to make it your own so first try to think of someone whose birthday is upcoming it could be a friend a family member a pet or basically whomever if you need some ideas you can head over to on thisday.com and click on birthdays that'll show you a bunch of celebrities was born on this exact date as you can see here the birth dates are chronological so you probably have to scroll a bit down until you find someone you've heard about rolling it down will show us that louis vuitton was born on this day in 1821 or scrolling even further we can see that also meghan markle was born on this day so if you find a celebrity you like here this is a perfect opportunity to make this site about them and what i mean about that is that i think you should change the gifts to something suitable for that person and also of course change the copy as well accordingly and if you want to go even more above and beyond create entire new sections or even style it differently depending on how you want it to look that is great practice for your design and product skills in general finally once you've done that i want you to download the code files so that you have them locally on your computer if you've forgotten how to do that it's pretty simple just click on the gear icon in the bottom right corner here and click download as zip as you can see it now downloads this zip which in my case is called project parentheses 45 so once you've found someone to create this birthday site about made the appropriate changes and downloaded the code you are ready to move on to the next couple of scrims where we are going to deploy it to the web on its way from your local computer up to the internet your code is going to take a slightly different path this time around because while it worked perfectly fine to just drag and drop your files onto github.com that's actually a pretty clunky way of doing it so instead we're going to use a dedicated tool for interacting with github and that tool is called github desktop because that's the way the pros do it when they interact with github they always have a tool in between them and the service which helps them push code up to github and also pull code down from github and just to make things a little bit more complex for you here what's actually going on under the hood is that both github desktop and github.com rely on a piece of software that's called git what is git well some devs who think they are really smart will probably tell you that git is open source distributed code management and version control system but you should regardless of how smart you are just think of git as a way to keep track of file changes so that's it git helps you keep track of how your project files change over time and actually you don't need to know anything more than that in order to get started using git via github desktop because this desktop app abstracts away a lot of the complexity with git and as long as you know how to use this app you don't really need to know much about what's going on under the hood so let's just get started and download github desktop right away if you are following this course via scrimba you can just click on this slide right here but if you're watching it via youtube just head over to desktop.github.com once you're there click on the download button so that your browser starts downloading the zip file for this app and once that's done open up the app install it on your computer and once you've authenticated with github in the app you should see a screen that looks more or less like this the first step you're going to take here is to click on this button that says create a new repository on your hard drive because that's what we want to do we want to create a repository aka a folder on your computer that holds all of our project files what you'll then see is this little modal where you have to give your repository a name so i'm going to call it birthday gift site and then you are to head down to the local path field and click on choose because what you now need to tell git and github desktop is where on your computer you want your project to live i'm going to navigate to my dev folder and just click open and then create repository that'll change github desktop into this dashboard that you will interact with the earth a gift site repository using the various buttons now you can see that it says no change files because our repository is empty in order to verify that let's click on the show in finder button when we do that you can see that github desktop has created an empty folder on our local computer and i have it here right above the project zip i downloaded in the previous scrim so i'm going to click on the zip file then double click on it so that i'm unzipping the files select all of the files and then drag and drop them over into our repository like that when you then return back to github desktop you will see chuck norris staring you straight in the face because as you can see on the left hand side here all of the images and project files have been registered so click down on the index.html file there you can see they're all in green which means that these are new lines of code ready to be added to the git repository in order to add all of this content to a repository you have to head down and write a commit message in the bottom left field right here i'm going to just say commit initial files and then to perform the commit we'll hit this commit to main button don't worry about what main means at this point and also if you're a little bit confused about what a commit actually is don't worry too much about that what we're just doing here is telling git that we want to add a bunch of files to the repository and we're also adding a little description so that in the future it'll be easier for other developers to understand what you were thinking when you added these files so let's hit commit to main that removed all of the files which was intentional but actually here my computer did something annoying max have a tendency to add a so-called ds store file which is something mac uses to handle metadata for a folder we don't need that in our project so i'm actually just going to right click on it and delete this file entirely by clicking on discard changes now once i've done that the dashboard is back to how it was before we committed the files so it has this publish repository option both here and up at the top this means sending off our code to github that's obviously what we want to do so i'm going to click on publish repository and also give it a name i'm going to give it the same name on github as we have locally calling it birthday gift site and also i'm going to uncheck this keep code private because we want our project to be open source and then i'll hit publish repository now the final step is to click on this button right here view on github and boom here we go we have created a repository locally on our computer and published it on github via github desktop just as the pros do it so really good job we are ready for the next step which is to deploy this site to the web which we'll do in the next scrim now that you've pushed your birthday gift site to github it's time for us to hook it up with netflix so that you can deploy it as well so head over to your netlify dashboard and there click on the add new site button and choose import an existing project there just click on github which then brings up this search menu where you can search for the birthday gift site click on it and then leave all the site settings as they are just scroll to the bottom and click deploy site then you'll see this familiar dashboard again and as always the only thing you need to do here is wait until this image here turns into a screenshot of your site which is now does meaning that your site is available on this url now hopefully your birthday site is not about nick at this point it's about someone else and i definitely think you should send it off to that person or if it's about a celebrity or whomever at least share it with the world and once you've done that give yourself a pat on the back and i will see you in the next scrim at this point you know how to use github desktop locally on your computer how to push code up to github and then have netlify deploy it to the world wide web that is really good however you're still lacking one important tool because what happens if you want to change your code and then push it up to github and deploy it again well in that case you'll have to use a code editor locally on your computer so that's exactly what you're going to learn in this scrim we are going to use a code editor that you actually have been using quite a lot at this point though you might not be aware of it it is called visual studio code and it's actually what powers scrimba under the hood though as you can see from the screenshot here it looks a little bit different from the scrimba in browser editor as we've done some modifications to it and stripped it down a little bit okay so in order to get visual studio code running locally on your computer you have to head over to code.visualstudio.com or if you're watching this scrim on scrimba just click on this slide and you'll get to the landing page once you're there click on the download button that'll start a download process of the app and you'll also get to this getting started page however i'm going to talk you through it so you don't need to read through this guide once it's downloaded just unpack the zip and install it on your computer and then you'll get to a screen which looks like this here you can see a bunch of onboarding steps but we're not going to worry about them right now just click on the back arrow in the top left corner and there i want you to click at the open option because that'll open up the finder menu which you are to locate to the folder for the birthday gift site click on open and there you can see the birthday gift site listed under the explorer tab on the left hand side i'm going to remove this get started file here so i'm going to click on this x icon like that and then i'm going to click on the birthday gift site to open up the folder moving on to the index.html file when we open it you can see that it looks quite a lot like how it looks on scrimba the editor right here though we at scrimba have created our own color theme so we're not using the default one you can see right here but other than that it's quite similar now let's make a change to this code push it up to github and get it deployed the change i want to do is just very simple i'm going to change this name from nick's birthday into pierce birthday if i then save this with command plus s or control plus s you can see that the file turns yellow means that it has changed and also to verify this let's open up finder alongside a browser window and just drag and drop this index html into the browser because then we can see that it says today is pears birthday so by pointing our browser to the local index.html file we have verified that yes the changes have been saved though this is just available for me locally it has not been deployed yet so we got to do that as well and the way we get these changes up to github and then up to netlify is as you probably guessed via the intermediate step of github desktop so if we navigate to the desktop app there you can see that it has noticed that we have changed line 10. you can see the red line 10 right here which is the previous version before we saved our code and the green line which is the new version after we saved our code so now we have to tell git that we actually want these changes to be incorporated into our repository we have saved them locally but we haven't saved them or aka committed them to the github repository so by having this file checked and writing a commit message down here in the bottom left corner we can commit this change and thus save it in git i'm going to give it the commit message change the name to pair and then hit the commit button now all of our local changes have been committed as you can see it says zero changed files but what we did get is this number one up here and an option called push origin and that means pushing our changes up to github so if i click at that you can see it starts doing some stuff under the hood and then if i click on view on github it'll open up the github browser and there on the row here which lists the index.html file you can see that our commit message changed the name to peer was added to this project one minute ago that is very promising if we now head over to our netlify dashboard you can see that nitpify has already picked this up here under builds you can see that one of our projects is now being built and in this tab as well you can see we have one concurrent build going on and then after a little while you can see boom it's completed i'll click into the project and open up the url and there you go it says today is pears birthday so now you have a really powerful local dev environment and also an automated deployment process that ensures that when you push changes up to github they'll also be reflected out in the world wide web so again give yourself a pat on the back this might have been a little bit overwhelming i totally get that but over time as you do this more and more it'll become second nature it is not just nick who deserves a congratulation you two my friend deserve exactly that congrats on completing this section now let's have a look at what you've learned starting out you learned about the align items property which allows you to align items in a flexbox container along the so-called cross-access and speaking of access you also learned how to flip the flex direction between column and row so row is what's used by default but we set it to column here because row would make it look completely wacky so instead we want a column that stacks things on top of each other next up you learned about the super cool hover pseudo property which enabled us to create the feature where when nick hovers over the image the underlying gif is exposed and then of course you learned about gradients also a really neat little trick that allows us to slowly fade from blue to pink on the background here here we can see how we did that with the linear gradient on the background of the body and then we also took a quick look at how to group selectors together by using the comma in between a bunch of selectors we could apply the style once instead of having to repeat this rule again and again throughout our style sheet and you also learned about github desktop how to set up a repository locally on your computer and use this tool to push it up to github and finally how to use vs code so that you now have a proper local development environment where you can build stuff change it push it up to github and finally then get it deployed so with all of this your brain is full of new knowledge meaning that you should feel free to take a break right now to let the concepts mature in your mind and then i will see you in the next section when you are ready welcome to the final section of this course and here it is time for you to go solo and what do i mean about that well you know how i've kind of been peeking over your shoulder helping you step by step throughout all of the projects we've built well that time is over now i'm going to remove the training wheels and you will have to build a full project on your own because that's actually the only way you can know whether or not you've truly learned html and css so you're going to build a so-called solo project and the project is a home page for your hometown you can see it here on the right hand side this version right here happens to be about my hometown or the place i grew up in oslo norway it's a part of the city called tushov however the point with this is not for you to build exactly this but rather build a website about a place area city or country that you care about and you have a connection to because when you do that and then share it in the discord community it'll give an opportunity for other students on scrimba to get to know you better and hopefully you'll enjoy building it as well because that is about the place you care about now i'm going to go deeper into the content of the solo project in the next scrim but for now there's one thing you need to do and that is to head over to figma.com because figma is the design tool in which you'll get the design for your project it is the most popular design tool these days it can kind of be seen as the github equivalent for designers so i want you to click on this image right here and then you'll be taken to figma.com there click on sign up and create an account and i also want you to click on this image right here because that'll take you to a quick 10 minute figma tutorial which bob's a role our teacher here at scrimba created specifically for students who need to learn a little bit of figma in order to do solo project here on scrimba so you can either watch this right now or you can wait until you've started the solo project when you feel the need for some guidance through the figma interface the reason this is at youtube and not here on scrimba is because learning a browser-based tool like this is actually better to do via a regular video than via slides here on scrimba so with that let's move on and take a closer look at the actual solo project now it is time for you to solve your very first solo project the hometown homepage and here it is as you can see it is a website that consists of three sections the hero here has a background image and a heading and subheading there's the activities section which has a title and three columns each one containing an image a heading and a paragraph and then there's finally this card at the bottom which is meant to introduce you to a tourist guide for this area and you might look at this and think how on earth am i supposed to create all of this well take a look at each of the elements and think back at what we've done in this course for example this hero section here with a background image and another section beneath it well that's pretty similar to what we did in the space exploration site and these two headings right here with the background colors well that's what we did in the birthday gift card with the year element and the date element and as for the card down here i think that resembles our business card quite a lot finally the three columns we have in the activities section well that looks like a job for flexbox if you ask me and we've used flexbox multiple times even the way we use it here where actually all of the three flex children the items are containers in themselves which contain an image a heading and a paragraph so i think you got this let's then look at the specific requirements first of all you're going to build it from scratch or i'm saying that with quotes because i've actually added a little bit of a skeleton here for you so you can see what we got basically a version with hardly any styling but with some of the elements in place you can see there's the hero section here there's the activity section it doesn't have all the data but at least the three images and then there's the guide section at the bottom here obviously though it looks terrible because the only styling i've applied is some margin 0 on the body and i've aligned the text to the center and also limited the width of the images to 100 pixels so you can use this as a starting point if you want or you can wipe it out and do it completely from scratch that's up to you next i want you to make sure that you do use classes flexbox the background image property and also the color palette that i'm providing as you can see in the css here are the hex values for the color palette i'm using and also i have a link to coolers here you can click this image and you'll be taken to the color palette and then once you're done if you are up for it there are some stretch goals first make it about your own hometown country or whatever place you like i hope everyone wants to do this because when you share it in the scrimba community we will get to know you a little bit better secondly if you use a different color palette your site will be even more unique and if you add a google font you can really level up the design because i've not done that and as a result the font here is a little bit boring also if you want to go crazy find a way to use the hover sudo class on any of these elements that would be super cool and finally you could add entire new sections that would be so cool however do remember that these stretch goals are optional you don't have to do them but i would encourage you to give it a shot if you have the energy so moving on to get to the actual figma file click on this image right here and if you get confused do remember the figma tutorial i talked about in the previous scrim you can click on this link right here to get to it now if you're watching this on youtube these links have also been added to the description below the video and they are in the corresponding github repo for this course finally you can do this solo project either locally on your computer or here at scrimba if you do it here at scrimba i would recommend you to click on the three dots in the bottom right corner and choose fork to new scrim as that will give you your very own scrim to work on instead of just working on a note on the timeline of this specific lesson so i will leave you with these requirements so that you can look back at them when you need to with that i wish you the best of luck you got this happy coding hold on a second did you just complete a five hour long online course wow that is phenomenally well done you should be proud of yourself because out of all the people who start this course this is the amount of people who actually complete it and you belong in that group you are not a quitter however at this point you might wonder what now what should i learn next and i think you are ready now to get started learning javascript the programming language that powers the web and there are many ways to do that online one of them is the frontend developer career path that we have here at scrimba which aim to take students from zero to hireable as front-end developers and you've actually taken the second module of this career path because module two consists of the course you've just gone through so you can jump directly to module three where i will teach you the basics of javascript however there are plenty of other resources out there where you can learn javascript so this is just if you like my style and scrimba in general regardless of what you do i think you should celebrate yourself so go ahead and deploy the final project you created that is the hometown homepage and share it with the world and if you've already started creating an online portfolio this project is a great first thing to add to that if you have feedback for me regarding this course i would love to hear it you can click on this link to get to my twitter profile and this link to get to my linkedin profile and if you're watching this on youtube i've of course added the links in the description below the video as well so with that there's just one final thing i want to remind you and that is that you are awesome the fact that you have completed this course gives me a lot of confidence in you on your journey towards becoming a professional web developer good luck with your learning journey going forward and thank you for taking my course