HTML and CSS Tutorial - Create a Website for Beginners

hello everybody in this video you will learn the structure of an HTML file as well as a few basic HTML elements I will walk you through the process of creating your very first web page and by the end of the video you will have created a very basic web page let's get started by opening up visual studio code and creating a new file type any sentence you want into the file such as this is my first web page and save the file you can call this file anything you want but it must have the extension dot HTML at the end of the name now if you open that file on Google Chrome you will see your web browser rendering the sentence you typed into the HTML file while this technically works the file we just created is not actually valid HTML behind the scenes the browser surrounding our sentence and valid HTML tags to see what these tags look like we will need to open the developer tools of Google Chrome to do this press ctrl shift I or command shift I if you are on a Mac upon doing this you will be greeted with a fairly complex looking window the data in these tabs is extremely useful in certain scenarios but for this course we will only care about the information in the elements tab the elements tab shows us all the HTML elements our page is composed of and as you can see our page has three elements HTML head and body there is also a fourth element that every HTML page has and this is called the doctype the doctype is the first element of an HTML page and must be the first thing in the HTML file the doctor tells the browser which version of HTML you are using for all of our videos will be using HTML as our doctype this tells our browser to use the most up-to-date version of HTML available the next element is the HTML element this element tells the browser that all the code inside the HTML element is HTML this tag should contain everything inside of your HTML file except the doctype and should come after the doctype the head element is the next element and is technically optional the information in the head element is never displayed in the browser but is instead used to set information such as the title or description of the page this element is generally the first element inside the HTML element but it does not have to be our last element is the body element the body element contains all the information that we want to display inside the browser this can include text images videos and much more try updating your HTML file to include all these elements and also change the text to something else then save the file you may notice that Google Chrome does not update and render your changes in order to force google chrome to update you will need to refresh the browser this can become quite annoying though if you must refresh each time you make a change so will download a plugin for visual studio code called live server this plug-in will automatically refresh our browser every time we make a change in order to download this plugin go to the extensions tab in the bottom left of the sidebar and type the live server into the search bar next click the install button on the live server plugin and then click the reload button after the install is complete this will restart visual studio code with the new plug-in enabled now if you open your HTML file you will see a go live button on the bottom of the screen this button will open your HTML file in your default browser and every time you save your HTML file it'll automatically reload your browser you may notice that the URL in your browser has changed and now looks something like this this is because the live server plugin actually uses your computer as a server to serve the files to the web browser on your computer let's break down with this URL means the first set of numbers from the URL 127 dot 0 dot 0 dot 1 is the IP address of your local host this IP address is exactly the same on all computers and is the IP address of the computer server the second set of numbers after the colon is the port number these two numbers work similarly to how an address of an apartment complex works the IP address is like the address of the apartment complex while the port number represents the apartment number of a single room in the apartment complex if you do not specify a port number the browser will automatically use port 80 which is the default port for HTTP communication you now have all the setup complete to efficiently develop HTML pages we'll begin learning new HTML elements as well as the structure of an HD we'll also start building the project that we will work on over the duration of the entire introduction to web development course the project is to create a website for your favorite musician or band I will walk you through the exact steps needed to create the website and I'll explain all the concepts along the way as you follow along with this course I want you to choose your favorite musician or band and create the website for them instead of copying exactly what I do in this video we'll be creating the HTML for the about page of the fans website you may notice that it looks ugly now but remember that hTML is only for the content of the site later we'll use CSS to style the page let's get started by going over the structure of an HTML element most HTML elements are composed of a start tag and end tag and some content between these tags the content inside these tags can either be text or other HTML elements there are some tags however that have no content and thus have no end tag these are called empty elements the image tag and is an example of an empty element as you may notice the image tag has an attribute called source all HTML elements can have attributes set on them to define certain characteristics of the element such as the source for an image tag and that is all there is to an HTML element we will now jump into the actual coding of the about page for the website and what about many different types of HTML elements hello everybody welcome to the coding section of this video as you can see on the left side of my screen I have Visual Studio code open with the HTML from the previous video I also have an images folder containing all of the images that we're going to be used to create the about page of this website on the right of my screen you can see the final version of the about page created for a band called the generics for you this band will be completely different but you should be able to follow the same template that I am using on this right side in order to get started creating this band page let's first right click on our about page and click open with live server this will allow us see our changes live as we make them now let's go back to the final band page and take a look at the different components of the page the first thing you may notice is that at the top of the page we have a header this header contains a navigation with three links going to the home page the store page and the about page as well as a title for the band the generics there's also a line in between the two separating them let me paste in some code that will render this for us now let me open this code in the browser as you can see we have our navigation links at the top of the page our title at the bottom and a horizontal line separating them let me explain how this works first all of our content is wrapped with this header tag this header tag is just a way of telling the browser this is a header element it doesn't apply any styling to these elements it just says this block of code is the header for our page the next element inside of our page is the nav of it this is very similar to the header element in that it doesn't apply any styling but it tells the browser that this is the navigation section of our web page you could have multiple Navs throughout your page but most likely you're going to just have one nav either in the top of your page or on the side of your page next we have the UL element this stands for unordered list there are two types of lists that you can create in HTML in Oh L which is an ordered list and a ul which is an unordered list in our case we are using an unordered list or a ul because the elements in our list have no particular order to them next we have three li elements li elements stanford list item and can only be used inside of a UL or an oo these denote the actual items of your list and as you can see on the right are styled with a bullet point when they're inside of an unordered list and they are styled with numbers when they're inside of an ordered list next we have an HR element this element as you can see has no closing tag which means it is an empty element this HR element supplies us this horizontal line in our page and stands for horizontal rule lastly we have an h1 element the h1 element is a heading element and there's six different sizes of a chav heading there's the h1 h2 h3 h4 h5 and h6 each one is progressively smaller than the last one with the h1 being the largest and the age 16 the smallest now let's go back to our final version of the webpage and look at the next section of code that we have this is the About section at the top you could see that we have a header element which is called about a grouping of text with an image and another group of text well they pasted over some code that will define this section and view this in the browser as you can see we have that about heading a group in a text our image and another group in a text on the left here we can view the actual code and break it down the first thing you'll notice is that we have a section element that wraps all the other code in this section the section element is very similar to a header element and then it implies this is a grouping of stuff that is all inside of one section while the header element says this is the header of our page the section element says this is just a generic section of some form in which all the content is related next we have an h2 element for the about header this is very similar to our h1 header except for that an h2 header is always going to be smaller than an h1 header because h1 is the largest header h6 is the smallest as you remember so h2 is just one step below an h1 and as you can see on the right here our h1 for the genetics is larger than our h2 for about next we have a P element also known as a paragraph element a paragraph element defines a grouping of text that is usually long-form paragraph form text with many sentences and it is much smaller font than our headings next we have an image tag the image tag as you can see is an empty element and has no end tag it also has this source attribute that we talked about earlier the source attribute defines the path to the image to be displayed on the page in relation to the actual page you're on so as you can see we are in this about HTML page and in the images folder we have an image called bandmembers PNG so in order to get this image we go into the images folder and then get the image bandmembers dot PNG this must be a path related to the about HTML file so if we move to this about HTML file into our images folder for example then this path would have to be bandmembers dot PNG as opposed to images slash bandmembers dot PNG and if we reopen this in live server you'll see that this now works let's move that back to where it was them and then make this images slash bandmember top PNG and open it in live server again and there we go the image works now and lastly we have another paragraph element with another section of text now let's go back to our final page and look at the last element that we have the footer element as you can see in the footer we have the generics heading as well as a YouTube image of Spotify image and a Facebook image let me paste over some code that will define this in HTML and view this in the browser as you can see we have that heading as well as our three images if we go over and look at the actual HTML code you'll notice that almost all the elements are something that we've already used before the footer element just like the header at section element defines a grouping of text and HTML that is going to be in the footer of the page which is almost always going to be at the very bottom of your page we then have our h3 element which just like the h2 and h1 is a large text heading for the page and it is going to be smaller than the h2 element we then have another unordered list with three list items in it and each one has an image which links to the Facebook logo Spotify logo and YouTube logo in our images folder and that's all there is to creating the HTML for this about page as you may notice our actual final page looks very different than what our current page looks like but that is because this final page is styled using CSS as you remember from earlier videos HTML is only used to define the content of the page and this right here is all of the content to our page the styling for the fonts font size background colors and all these images that will all come later in CSS all the content though the HTML is complete for this about page some common problems that you may run into as you create the HTML for your own band about page is that you forget to include the ending tag for your HTML elements if you do this your HTML will not look correct or it may not even render at all in order to check that you have created all the ending tags for your HTML elements if you click on either the start type or the end tag Visual Studio code will automatically highlight the ending tag for you or the start tag if you selected the ending tag this is an easy way to check if you have actually created the ending tags and starting tags for all of your elements another common problem is with your images not displaying in order to get around this problem make sure that the path for your image is in relation to your actual HTML page that it is on for example our about page is in the same folder as the images folder so we must first navigate through the images folder to get to the images inside of it we'll dive into more HTML elements as we build the homepage of the band website and by the end of this video we'll have created all of the HTML needed for the homepage of our website before we get started coding let's cover a few of the concepts that we will be utilizing starting with HTML elements if you have ever tried to use a greater than or less than sign in the text of your HTML you may notice that it does not render and actually messes with your entire page rendering this is because these symbols along with many more are special symbols that are used in HTML for signifying start and end tags in order to render these symbols we must use HTML entities an HTML entity is written by writing an ampersand and pound sign followed by the number that corresponds to the symbol for example this is the code that will render the less than symbol remember in which numbers correspond to which symbols can be quite difficult though this is why the most common symbols such as the less than sign have a name that can be used instead of the number this is the code for the less than symbol using the name as opposed to the number when you use the name of this symbol instead of the number make sure that you do not include the pound sign after the ampersand the next major concept is the idea of meaningless elements so far we have only learned about elements that have inherit meaning for example the header element is used to wrap the header of a page the nav element is from the navigation section and the ha1 element is for a heading HTML has many many elements that have specific meaning but sometimes a section of your page do not have any special meaning or there is no HTML that conveys the meaning you want this is where meaningless elements come in there are two different meaningless elements div and span these elements are the same in every way except that the div element is a block element meaning that it will appear on a separate line from the content around it similar to the paragraph tag the span element on the other hand is an inline element and thus appears in line with the content around it if this does not make sense yet the differences between these two elements will become apparent as we write the HTML for this lesson essentially all you need to know about meaningless elements is that they should be used anytime you need to group together HTML that either has no meaning or there is no HTML tag to describe the meaning now that we got that other way or jump into the coding of the homepage for the band website hello everybody welcome to the coding section of this video as you can see on the Left I have Visual Studio code open with the project we left off in the last video and on the right I had the final version of the band home page to get started we should copy the about HTML page and rename it to index.html this is because the about page shares the same header and the same footer as our home page we now can get rid of the section in the middle that contains the about content since we will not need that on the home page the reason that we named this page index.html is because the index page is the page that is shown when you leave nothing after the website URL so we removed this slash index.html and hit enter you'll see that it renders the exact same thing that is inside the index.html if we change this save it you'll see it shows up there now let's get started with the actual content of this page let's jump back to the image that we have to use as a reference and get started with the header as you can see inside the header we have an additional button for guitar lay at the latest album and another button for the play button to create these elements we'll use the button element the button element will render a button on the page as we can see here and if we give it some text such as what is on this page you get our latest album you'll see that it renders a button that we can click on our page let's do the same exact thing for the play button now we can't actually just show this image with a normal button keypress we have to use an HTML entity that we talked about earlier the code for this entity is as follows this will render the play button as we can see here as you may notice our two buttons on this same line as opposed to on different lines like they are in this image this is because the button is an inline element as opposed to a block element in order to get around this problem we can use a tag called the line break tag which is the BR tag the BR tag adds a line break wherever it is so if we put it after this button it'll create a line break right here before the next button and if we save that on the right you can see that they are on separate lines now we want a little bit more spacing than this between our elements so I'll use another line break element in order to create a little bit of a gap between our two buttons that is all the HTML that we are going to need for the header section but as you can see in this home page view that there is a giant background image that is applied for the entire header in order to remind us that we need to create this background image and find it later let's add a comment into the code to do this use an exclamation point followed by two dashes which will create a comment in the code comments do not actually render any information on the HTML page but they show up in the code so that you can remind yourself or other people that use this code what certain things mean or what to do so for example let's create just a to do comment that tells us that we need to find a suitable background image there we go so now if we go back to our page you can see that that does not actually render but it shows up in the code for us to reference later now let's go on to the middle section of our page in the middle of section of our page we will use a section element just as we did for the About section of our code to wrap all of this stuff in our tours section and you can see that we have a header called tours just like we had in the About section so let's create an h2 and add the text tours into that and view that to make sure that that shows up correctly next we have a few rows that display all the tour dates for our upcoming tours of the generics band there is no actual HTML element to denote a row for example in this scenario so what we are going to do is we are going to wrap our entire set of rows in a div which is a meaningless element that we talked about earlier this will make it a block element so that way these items will not appear on the exact same line as each other we will then wrap each individual row in a divot of its own so this outside div here is wrapping all of these rows and then each one of these rows has its own div that will contain just the text inside of it now let me add the text inside of the rows now as you can see if we go over to our page we have the different text rendered for all the text in the row but it doesn't quite look right first off we need this July 16th date to be bolded in order to do this in HTML we will use what's called a strong tag the strong tag denotes something that is important in most cases it means that the text inside of the strong tags will be bolded but in some scenarios the text will actually not be bolded for example if you are using a screen reader if you are blind the text will have special emphasis when it speaks it back to you because you cannot actually see bold versus non vult let's put our July 16th inside of that strong tag save it and go back to our browser to see that that is actually bolded now next we have the text for Detroit and the text for the actual place that the performance is in let's wrap these in span tags span tags are the other meaning this element that we talked about and this denotes an inline element if we go to our rendered version of our page you can see that these elements do not break the lines as these bakka elements from the div do if we were to change this to be a div you can see that now it breaks both on the top and the bottom of the line let's change that back to a span lastly we need to create the button for our final element let's wrap this by tickets text inside of a button element now if we go back to our page we can see that that is now a clickable button one more thing to note about these buttons is that they can have a type to them which is an HTML attribute in this case you can have the type the button menu reset or submit in our case since this is just a generic button we want to use the button type let's copy that and paste that into our other buttons as well since they are also generic buttons lastly we need to add an HR element that we talked about in the previous video to the end of our row because we have this underline here that we want to incorporate now if we go back we can see that we have this underline under our row you may notice that the text is very close together with almost no space in between them you may think that in order to fix this you can add a bunch of spaces after your text and if you say that you would think that a bunch of spaces are show up after this but if you say but you see that that does not happen HTML actually removes all of the extra spaces after any element whether it's a space a tab even if you put an enter a new line in here and say that it'll remove all of those at the end of your element in order to get around this and actually include some space in between our elements we are going to use to use temporary the less-than and greater-than symbols that we talked about earlier with the HTML entities let's go after our strong tag here and write the code for less then and a code for greater than now you can see that we have a little bit of a space between our text let's copy and paste this in between all of the different elements of the row and now there's a little bit of spacing so that it's easier to see which element is which the last thing that we need to do in order to get our page to be exactly the same as this is copy this row and create all the text needed for the rest of these rows I'm gonna do that real quick now we now have all the code that we need for these sections if we go back to this page we can see that all of our rows are now being rendered and they all look correct except you see that we have this additional underline on the last row so go back to our code and remove that final HR element now we have exactly the same HTML that we have on this page the last thing we should do is delete this placeholder text that we added in here at the beginning and now we are perfect the only thing left to do is to add some it elements to the head as you can see at the top this title of our page is just shows the URL of the page that we are on if we want to change that we can use a title element in the head section of our HTML this will actually not show up anywhere on the body of our page but it will be used by the browser to set the title of our page on the tab let's just set the title to the generics and if we save you can see that now it group race is the title of our page another common element in the head section is a meta tag the meta tag has a bunch of different things that we can define for it based on what we set for the name attribute but in our case we want to set the description of our page this description is used by the browser to show a little bit of a description of your page under the title whenever you search in Google for example along with other places for us let's just set any title which we set inside of the content section of this tag let's just say this is the description and close off that meta tag now as you see when we save nothing actually changes on our page because this is inside of the head of our page if we would have upload this page to the Internet and do a Google search for it you'll see that this description will show up underneath the title of our page inside of the Google browser results now let's go to our about page and do the exact same thing sided ahead just paste this in here change the title from generics to the other generics about and we can keep the description exactly the same that's all that there is to creating the HTML for our index page we'll dive into one more crucial HTML element as we build the store page of the band website by the end of this we'll have created all the HTML that we need for the entire project before we get started coding we need to cover one of the most important and most common HTML elements the anchor tag the anchor tag also known as the a tag is the HTML element that allows us to add links to our web pages the structure of the anchor tag is very similar to that of an image tag but instead of specifying a source attribute for an image an anchor tag uses an href attribute which stands for hypertext reference the href attribute works exactly like the source attribute when trying to find the file you specified this means that the href attribute value should be relative to the HTML file that the anchor tag is in for example if you had a file called page HTML in the same folder as the HTML file with the anchor tag then you would use page HTML as the href of the anchor tag to link to page HTML another use of the href tag is to link to other web pages by their URL this also works exactly the same as the source attribute of the image tag if you want to create a link to Google then you would create an anchor tag and set the href to Google's URL the shoe all must be the full URL of the website which includes HTTP at the beginning in order for an anchor tag to work the href attribute must be defined another common attribute the target attribute on the other hand is optional the target attribute specifies where the link should open by default the value of the target attribute is self which means the link should open in the current browser tab the only other value for the target attribute is blank that means that the link opens in a separate tab don't forget to make sure you include the underscore in the front of the self and blank target attribute values or they will not work we will cover both target types in the coding section of this video so if this does not make sense yet it will become obvious in a bit now that we got that out of the way let's jump into the coding of the store page for the band website hello everybody welcome to the coded section of this video as you can see on the Left I have Visual Studio code open with the project from the last video that we left off on the only difference is that inside the images folder I've added all the images that we're going to need to create the store page of the band website on the right of my screen I have a picture of the store webpage pulled up so we can use this as a reference to create the HTML for the band page let's get started by copying the about HTML page and renaming it to store tout HTML this is because our store page and our about page both share the same header and the same footer now let's delete the content in the center about the about page that we do not actually need in the store page what we do need is we need to create a section for the music section for merch intersection for cart let's do that inside of each of these sections we're also going to have the header for the title of music merchant cart now let's take a look at the content inside of each of these sections as you can see the music emerge section both share the same template for its content where it has an album or t-shirt or coffee cup whatever is being sold picture of that the price of it and then a button to add it to the cart so let's create these elements we're going to want to do we're going to want to wrap this entire element inside of a div element so that way we know it is one contained content inside of that div we're going to want to have a div for the album name this is because we want this to be on its own line so we can't just use a span and inside of that div since this is bolded we will use a strong tag to put the title of album 1 next we're going to want to add the image tag and it's going to have a source attribute which in our case is going to be images slash album 1 dot PNG and lastly we need to add a final div that's going to wrap both the price and button for adding to cart we're going put the price inside of a span and then we're going to add the button for Add to Cart and make sure to add the role of button since this is just a general generic button now let's open that up using live server to see what our changes look like as you can see we have the album name picture of the album and then the line containing the price and the button to add to cart' the only thing left to do now is to copy this and paste it down four times so that we have the section like this for all the album's that we are selling in the music section of our store I'm going to do that now now if we open that up we can see that we have our four different albums being displayed with the title at the top picture in the middle and price and button at the bottom you may notice however though that they are all on an individual line as opposed to being side by side as they are in this image this is because we are wrapping all of them inside of a div and divs break the line as we talked about earlier later we are going to fix this in the CSS portion of our course but for now we will just keep it like this because as you remember hTML is only for content and CSS is where we talk about way out and display now if we go back to the image of our store page we can see that in the merge section we have almost the exact same layout that we do inside of the music section of our store so I'm just going to copy one of the templates from the music section paste it into the merged section and change it accordingly now if we go view this you'll see that these also show up at the bottom inside of the merged section the last thing that we have to look at is the card section of our store this is slightly different than the rest of our sections and includes a few new elements that we haven't talked about yet let's first get started by creating the header row of item price and a quantity to do this we will wrap all three of these in a div so that they appear on the same line and we will use strong tags to wrap all the content because it is bolded now if we go take a look at that we'll see that we have item price and quantity all displayed on the same line but we will use the same spacing trick that we used in the last video in order to show the space between these because right now it is difficult to read so in our code we are going to add a less than and greater than sign this will add a little bit of spacing between our elements we'll just copy it as Homer time so it's between price and quantity as well next we are going to work on adding in each of the individual rows of this section we'll do this by using another div tag throughout the entire row followed by an image tag to store the image for the first diagram we'll use the source to the album one as we talked about earlier now close that and we will go look at it and we'll see that this image is way too large we want this image to be much smaller in order to do that we can set a width and height property on the actual image element itself this attribute we're going to set to 100 which will stand for 100 pixels if we leave off the height element it'll automatically adjust the height to be an aspect ratio with the width so if we had an image that was 200 pixels by 400 pixels so 200 pixels by 400 pixels tall and we set the width to 100 the new height would be 200 which would automatically be set if we however set both the height and the width it'll automatically check both those for us to be 100 and 100 next we're going to want to add the name of the actual item instead of a span we will just call this t-shirt and then we want to add and Christ instead of a span as well in between those we're going to want to use the less-than and greater-than signs that we talked about for our spacing now if we view that we'll see that we have the name of the item followed by the price of the item next we need to add in this input that allows users to select the quantity of item that they want where they can type in any number that they want in here in order to do this we're going to use an input element an input element is an empty element that allows us to create an input of various different types in this case we are using a number input so we will set the type equal to number there are many different types of input that you can create but the most common types are a number input and a text input we will then close that off and if we go back to our page you will see that we have an input in here that allows us to enter only numbers into it we cannot enter anything that is not a number just numbers but in our example you can see that we have this pre-populated with a 1 in order to do this we'll set the value of property the value property corresponds to the value of the actual input element and as we change it as we type in different numbers into the input this value will automatically adjust to be the same as whatever number we typed in here so over here let's just put the value of 1 because that is what is in our picture here I'm also going to use the same space and tricks that we talked about the less than greater sign to add a space between this price and the input and lastly we need to add in a button this button will have the role of button because it is a generic button and inside of it we will just put the text remove now if we go back to our page we can see that we have all the elements here that we have in our image over here now it's copy this div one time and fill it in with the information from the second row of down here now if we go back we can see that we have the correct information here I also changed this first image to be the shirt image because I forgot to change that and as we can see we have the value of 2 in here which corresponds to the value of the input element here lastly let's add an HR after all these in order to put that line at the bottom of the page that we have here before we get to total the reason I'm not including an HR under these item price and quantity views is because we will add these later with CSS this is because an HR takes up the entire space that is given which in our case will be all the way from the far left web page to far right of our page with no breaks in between now let's add a final div which is going to contain the information for the total and the price as we can see the total is emphasised with bold so we use a strong tag and type in total and then we will have the price inside of a span lastly we want to add this purchase button at the very bottom underneath of everything else so which side of a tip of its own so that it is on its own line we're adding a button with the role of Clutton and we will give you the text of purchase and that's all there is to creating this HTML here and as we can see if we look over here we have all the elements that we have on this page created in HTML here the last thing we have left to do is add in links so that we can navigate with the home store and about buttons that we have up here in order to do that let's scroll up to the very top and wrap this text inside of an a tag as we talked about earlier so that now our text is a link but in order for this link to work we needed the href that we talked about earlier since our store page is in the same page as our index page which is our home page all we need to type in is index.html and now when we save this we'll have a link here that when we click on it will bring us to the index.html page now let's go back to the store page and do this for all of our different links now you can see that we have buttons for the home page store page in the about page and when clicked on to bring us to the different pages at the very bottom we'll notice that we also have buttons for YouTube Spotify and Facebook so now we need to add anchor tags wrapped around this but as you can see there's no text for us to wrap around all there is is this image tag that is ok we can wrap this image tag inside of an anchor tag and it will work as a button in order to do this create the anchor tag give it a rich href which in this case is going to be the URL of YouTube which is HTTP colon backslash backslash youtube.com and then we will put the image tag inside of this a tag and we say that if you hover over YouTube we can see that there's a button and if we click it it'll bring us to youtube.com what's do the same thing for Spotify and Facebook now if we save that we see that the youtube link Spotify link and Facebook link are all working as you can see if we click here we go to the Spotify website and so on but one problem is that when we click these links it'll override the tab that we're in and we don't want that for these bottom links so we're going to use the target attribute on our H ref and we're going to set it to underscore blank I'm going to copy this over to all the rest of our links and now when we click on a link for Spotify for example it'll open in a new tab while keeping the tab for our original page now all we need to do is copy these new links that we created over to our home and our about page and our HTML will be completely finished for the entire website and there we go now if we go to any of these pages you'll see that we have links that work on all of our pages one last thing that I forgot to mention is that in our store page we want to change the title of our page from the generics about to the generics store and there we go that is all the HTML that we need for this entire project in our next set of videos we'll be covering CSS CSS is what is going to allow us to take in this boring lion looking HTML and converting it over to this beautiful looking mock-up that we have over here after we're done with the CSS for all of our pages we're then going to jump into JavaScript which will allow us to make our store page interactive this will make us that the add Cart button actually adds elements to the cart down here through a move element actually removes them and changing the numbers inside of the quantity will actually update the total and that is all there is to HTML while we have covered many HTML elements there are still many more HTML elements that we have not covered I have only selected the most important and useful HTML elements to cover in this introductory course because many of the HTML elements are either obsolete or only useful in very specific scenarios we're going to be taking the band webpages that we created and style the about page to look exactly as this image on the right here to give you an idea of what we're starting with over here is going to be our an about page that we have currently designed with just the HTML and no CSS also as a side note before watching this video if you know nothing about CSS make sure you wash my learn CSS and 20 minutes video in order to get primed on what you'll need to know in order to watch this video and follow along now let's get started into the CSS design for this page the first thing I want to note is that I've added a fonts folder into our project and included the two fonts that we're going to be using to style some of our elements I also in our images folder changed our bandmembers PNG to be a square image so that it'll fit perfectly inside of a circle and I changed our footer images the Facebook logo Spotify a logo and YouTube logo to be white instead of black so they're going to show up on top of our light blue background that our footer will have now that we have that another way let's create our CSS file that we're going to be writing all of our code in we're just going to call this Styles dot CSS then instead of our about HTML page in the head let's add in a link give it a row of stylesheet and an href of style.css now if we say that nothing over here will change because we don't actually have anything loaded into our Styles dot CSS but to test this let's just give our HTML a background color and we'll make it red we saved that perfect our background changes to red which means that everything in our Styles dot CSS is being loaded in dart about HTML page now it's clear that a little way and get started the first thing that we're going to want to do is we're going to want to style the header portion of our site if we go into our body HTML page here we see that our header we have our navigation which is these three boats the top here as well as our header for the generics which is our band name the very first thing that we're going to do is give our header element a background image that is equal to the background image that you see over here in order to do that let's first give our header class and we'll just call it main header and our styles at CSS we'll use a selector to select that class and then use the background image property to set an image for our background now this background image property works very similar to the H ref for an anchor tag we'll use URL and then inside of the URL we will specify where our image comes from in our case the image comes from our images folder over here this header background jpg so we'll just put instead of here images slash header background jpg if we save that and go back to here we'll see that our image is going to be behind here right now this doesn't quite look right though in order to fix that we're going to use the background size property and set this to cover well this is going to do is it's going to tell the background to expand as much as it can until one of the borders is at the very edge of either the width or the height so it expand either as wide as it can or as tall as it can until it can't get any larger without surpassing the size of the image so if we say that you see that our image has expanded all the way as wide as it can and as tall as it can and the last edge to hit is the width this is the full width of our image and it cut off the top and the bottom of our image that's exactly what we want our image to do this means that if we resize our page our image will grow and shrink as needed without us having it edit or any extra code as you can see in our example photo the background image has a slightly darker hue to it than over here so in order to do that we're going to add a second background this time we're going to use a background color and we're going to set it to RGB a and we'll just use black with a 60% transparent now if we save that you'll see that nothing actually changed about our background this is because by default you can only use either a background color or a background image can you get around this we're going to use what's called background blend mode this is essentially telling the browser how do you want to blend these two different backgrounds together and we're going to use multiply which is essentially just going to combine these two together over top of each other and as you can see on the right we now have a grayish dark color to our background instead of it just being entirely opaque now all we need to do is add a little bit of padding underneath of this lettering down here so that we match the spacing we have over here and to do that we can just use padding bottom and we'll set it to something like 30 pixels if we say that we now have a nice gap on the bottom here you may also notice that around our background image we have some white space in between here even though in our about HTML this is the very first thing in our body this is because CSS styles are being defaulted onto certain elements such as the HTML element and body element if we go into our stylesheet and at the very top here just put HTML and body is our two selectors and we set the margin to zero and the padding to zero we say that will see that now those margins and padding to go away on the side here but we still have a margin on the top this is because our UL element also has a default margin on the top so if we go in set our UI element to have a margin of zero as well and save that you now see that our background takes the entire width and goes all the way to the very top of our page generally though you don't want a style using elements such as getting rid of the margin on all you ELLs so when I are about here we're going to give our nav a class of nav to indicate that this is our navigation and here we use the nav class that we just created followed by ul to say that all the us inside of the nav will now have no margin if we say that this will look exactly as before but now all of our normal us will still have a margin but the Ewell's inside of a navigation class will not have a margin now before we get started on styling the nav we're gonna want to use the everything selector to set a few generals styles that will apply to all the elements in our HTML the first one that we're gonna want to use is box sizing we're going to want to set this to border box what this does is it makes us so that the size of our elements are determined by the padding and the margin as well as the actual size of the content so if we had a box and we set the width to be 200 pixels and we set the padding to be 20 pixels without border box the width of that object would be 200 pixels wide plus 20 pixels on the right for padding and 20 pixels on the left for padding making it 240 pixels wide with border box though the width attribute takes into account the padding as well so if we set a width of 200 pixels our element will be exactly 200 pixels wide and the padding will be on the inside of those pixels if that doesn't make any sense we'll be able to see more examples of this as we continue on style in this page another attribute that we want to apply to all of our elements is going to be our font family this would be the default font family that where all of our text is going to use in our case we're going to use the railway font but since this font is not a generic font that can be used on websites we need to import this font in order to do that we're going to use google fonts and import it using this URL this URL can be found on the google fonts web page and you can search for any font on there that you want and then all you have to do is click on that font click the import and it'll give you this link to copy and paste into your CSS now if we save this you'll see all of our font will change to railway the last thing that I want to apply to all of our elements is a default text color in general black on white is very high contrast and can be tiresome on your eyes to read so I like to use a more subtle text color of 777 here which is just going to be a light gray which is much easier the eyes to read now that we have that out of the way let's style a navigation element first let's go to our about HTML and remove this HR tag this HR tag was only there to add an underline for our navigation but we'll do that in CSS as boarders are much easier represented in CSS I also want to give our navigation another class of main nav this is because we will have multiple different types of navigations that we want to style similarly but we only have one main navigation that's going to be at the top of our page so now if we go back to our Styles dot CSS what style our actual math class first we've already admitted so the margin is zero so that our nav will no longer have any margins around it but we want to maybe make our elements though they're in line with each other as opposed to on separate lines as they are on here so do this will select the nav element and then we will select the li element under that nav and we will give them a display of inline this tells us that the browser should render all these elements in line with each other as opposed to on separate outlines which is the default for a list next we want to style the actual links themselves that are in our navigation element to do this we want to give them some padding so let's say we'll use a padding of 0.5 e/m which will just space out these elements a little bit from each other we also want to give them the white text color to match our mock-up that we have of our image and then lastly we want to set it to text-decoration:none which will remove that underline from underneath of our elements over here and if we save that we see that our L text decoration has removed the underline from these elements change the color to white but our padding has only added padding to the left and right and not the top and bottom as padding should do when you give it just one number this is because these are inline elements and inline elements cannot apply padding on the top or bottom what we need to do is we need to change the display to the inline block inline block is very similar to inline except for it allows you to do certain things such as add padding and height to element that inline elements do not allow you to do so now as you see we have padding on the top bottom left and right of all these elements due to the theme in line block the last thing we want to do is we want to make it so that it is easy to tell which element we were hovering over to give the user some feedback to do this will style the a tag again and we'll use the hover selector to say when we hover over the element we want to do something and all we want to do is change the background color and we'll just use a light grayish color here so we use white what we'll use transparency of 30% so the white will show mostly is gray and as you can see when we hover over these elements we are now getting a background color that tells us hey this is being hovered this is all the styles that we want to apply to our general navigation now now we want to move on to our main nav across because this is going to be styles that are applied to only the main navigation and not all of our other navigations the first thing that we want to do is we want to make us to the text will be in the center of our screen since our navigation should be centered at the very top of the screen we also want to make us the font size a little bit bigger so it is easier to read we'll just use one point one en which will make it about 10% bigger and then we'll change the font weight to be lighter as opposed to the stronger font weight so that way it blends a little bit better into the background and then lastly we want to add a border bottom to our element to replace that HR that we deleted and it'll be one pixel wide completely solid and we'll just use another light gray color here and if we save that we now see that we have a border on the bottom and our element the very top the last thing that we need to do is space out our elements from each other because right now they're very close to each other to do this we'll use the main nav again and we'll select the li elements and we'll just give them a little bit of padding so we'll say padding of zero on the top and bottom and 5% on the left and right there we go now our elements are spaced out from each other and as our screen grows the elements stay spaced out from each other and as it shrinks they stay spaced out again the last thing we have to style on our header is going to be the actual name of the band here if we go back to our mock-up over here you see that this is going to be much larger and it is a completely different font then we have already here by the default so to do this let's go back to our about page and let's add a class here and we'll just call it band name we're also at a second class of band name large because we have two instances where our band name will be rendered once in the header where it is very large and a second time in the footer of where it is a more normal size this is why we are going to use this band name class to style all of the elements that we need to make the band name look good and then this band name large class to make the band name in the header of larger let's first start with the just normal band name class in this class we're going to first want to make the text-align:center this will cause it to appear in the center of the screen and then we want to remove all margins from this element because h1 elements by default have margin we say that it'll get squished a little bit closer together and then we want to increase the font size I sense this is just going to be our normal band name and not the large one we're just going to use this font size of 40 m and save that then we want to change the font family this font family is going to be booter 0-0 but if we save that you'll see on my local machine this updates to be the correct font that's because I have booters zero zero installed on my computer normally this will not be the case especially when you upload your website to be hosted somewhere else in order to load this style in we first want to grab our font files here and we want to import them using the app font face property in here we want to use the font family this essentially tells our browser what name do we want to use for this font we are going to use booter zero zero this is the name that you will set when you set the font family down here then we need the source this essentially tells the browser where is this font coming from this is just like the background image URL so we're going to use fonts slash from booters zero zero and we'll use the first one here the WOFF and tell it that this format is WOFF then we want to import our other source which is URL fonts through to zero zero whap - let me get rid of these back slashes here and we'll use the format of wofe - this tells the browser that we have these two different types of fonts here the buddha 0 0 woth and buddha 0 0 woof - and it tells that which format is each one the reason we have multiple sources is because some browsers don't support all types of sources such as woth - or just the normal woof this is so now with having multiple sources here the browser will take the very first source and if that one works it'll use it and then if that one's not acceptable it'll go down to the second source here lastly we want to put a font weight which tells us what weight is this font just normal and same with clown style this is just a normal font not italics or anything so we'll put normal here now we have that font loaded into our page so we have glitter zero zero that is normal and normal style but over here you see that our font is bolded and doesn't quite look the same as our mock-up this is because h1 tags by default bold their font to get around this we're going to set the font weight to be normal if we say that our font now looks exactly as it does over here the last thing we need to do is set the color of the font to be white and if we save that this now looks almost exactly the same as our mock-up does over here and that's everything that we need to do except for this font is a little bit too small this is why we use that and name large class inside of the band name large class we're going to set the font size we're going to make it 9:00 a.m. if we save that that is now going to be much larger and it is going to look almost identical to how large it is over here and if you want you can play around with this number make it 8:00 a.m. for example and save it and it'll look great either way now that we have the header completely styled let's move on to style in the section content of our web page over in the about HTML page let's add a class to our section we're just going to call this content section essentially clarifying that this section is just for content and we can reuse this on all of our other content sections across our index and our store page I also want to give it a classic container which we will use to specify a maximum size as well as some padding on the outsides of our text so that way it's not quite squished up all the way against the edge of the screen back and styles dot CSS let's use the dot content section class that we just created and give it a margin of 1 a.m. this will give us a little bit of spacing on the top left right and bottom of our element so that way it distinguishes itself from the previous element then we use our dark container class that we just created and in here we'll style a max width which says that the max width of our element is going to be 900 pixels wide this means if our element tries to get any larger than 900 pixels it'll just stay at 900 pixels if I save that and increase my screen size you can see that this element stops at 900 pixels but I just thought it was showing up on the left side instead of centered to Center it we're going to set the margin on top and bottom to 0 and then we are going to use Auto as the left and right margin this tells it that the margins on the left and right will be as large as they need to be and be exactly the same so that way the text will be always in the center and if we bring this all the way over to the side you'll see that we have a large margin on the right and left which centers our text on the middle and then lastly we just want to add a little bit of padding back to this container to push it away from the sides so we'll use 0 on the top and bottom and 1.5 VM on the left and right in order to give us a little space so that our text does not run right up against the edge of our webpage next we need to style the actual heading for this element we can use another class on our h2 here and we'll just call it section header there we go this is because all of our sections are going to be styled with the same exact header so we'll use this class again on our home page and our about page now in our Styles dot CSS let's grab that section header class and in here we're going to just use a font family and this font family is called metal mania which again is not on the computer by default so we have to use another import URL from google fonts and this import URL like I said before you can find by going onto the google fonts web page and searching your font this is what the URL is going to be for the metal mania font and if we say that you see that our text changes you can also see that we have the same problem where text is bolded as it was over here in the generics so we'll just change the font weight to be normal and now if we say that you'll see that our text is no longer bolded but it still doesn't look exactly as we want it to and this is because we need to change the color on this to be able slightly darker we'll use just three three three wishes about halfway between our light gray and completely black and then we want to Center this text in the middle of our screen text-align:center if we save that you'll see that our section header is now in the middle of our screen to the right color but it's slightly too small and we'll use the font size property 2.5 E and to make about two and a half times bigger save that and there we go our heading is perfect now the next element we need to take care of is the image in our About section as you can see on here the image is the circle and it's displayed towards the top of our text and the text just flows perfectly around the image no matter how large or small the image is in order to do this let's first add a class to our image and we'll just call it our about and image because this is a class we're only going to be using for our about band and then here select that about band image and now in order to make it so that our text flows around this image what we want to do is we want to use the float property and tell it to float left this means that the image will remove itself from the flow and float completely to the left side of the document also as you can see our image is quite large here so let's give it a height of 200 pixels and a width as well of 200 pixels and if we say that you see that our text is flowing perfectly around this but we want it to flow from the top so in our about here let's move our image above our P tags and save it and now as you can see from the very start of our text it is flowing on the image but our text is right up against our image and we don't want this in order to fix this let's give our image 15 pixels of margin on all sides in order to push the text away from the image lastly in order to create a circle we're going to use the border radius property this property tells us how far we want to curve the edges of our border and in our case 50% will make a perfect circle since we curve from 50% all the way to the next 50% so if we save that we have a perfect circle with our text flowing around it as we expected if we go over here as you can see it doesn't quite look exactly the same because our image is not at the very center of our text it's at the very top but it's much easier to style from the very top of the text and I personally think it even looks better this way as for the actual text of our content we don't need to change anything because in our generic everything selector we already set the font family and color to be exactly the same as what is over here so the last thing we have left to do is address the footer which we want to use a light blue background around with our band name on the left as well as our three elements on the right for our buttons to go to YouTube Spotify and Facebook in order to do this we're going to need to supply some classes to the footer we're going to use the class of main footer similar to how we used main header to specify that this is the main footer on our web page then we are going to use the band name class and apply that to our band name and if we say that go back here you'll see that our band name has already updated to be white text and the correct font and font color and font size just because we already created that band name style before which is the power of using classes since they're so reusable to create many different elements and just copy and paste them along your page as you see fit so now let's go back to our Styles dot CSS and style that main footer element our main fighter is overall very simple all we had to do is edit background color that's going to be that white blue color here which I just copied over then we're going to make all the text in this main footer white so we're going to use a color of white and then lastly we want to have a little bit of padding between our elements and the edge of the background so we'll use a padding of 0.25 e/m on the top and bottom and then 0 on the left and right and if we save that scroll down you see that we now have that light blue background as well as all of our text is white but we have the problem of our footer being stacked vertically when we want it to be stacked horizontally in order to fix this problem we're going to go back to our about HTML and we're going to use a second div element in here with the class of container and main footer container that will wrap all the content inside of our footer there we go and now in our Styles dot CSS we'll make the main footer container the purpose of this main footer container is to wrap our elements in and display flex element a flex display order also known as flex box is a very complex layout element that you can use it as CSS but we're only going to skim over the top of it because in this video we don't have the time to cover the full complexities of flexbox but in the future I will make a video covering flexbox in depth if we scroll down here we see that already our elements have lined up next to each other on the left and the right which is great but we want our right side element to take up as much space as possible while our left side element should be as small as possible in order to do this we'll make it so that main footer container the ulo inside of it which is our navigation on the right here we want it to grow to take up as much space as possible so we'll use flex grow and give it a value of 1 - tell it to grow then we also want to align our text in that element to the end of the elements we'll use text line and to tell our text to be on the right side instead of left side we also want it so that our YouTube Spotify and Facebook links will be centered with this band log on the left here to do this we'll use the align items property instead of test center - say - Center everything vertically inside of this flex box next all we need to do is style our navigation which we've already created a class for so on our UL we'll add a class of nav as well as footer nav so that we can use specific stylings for a footer and save that as you can see it has already changed but we have the background hover and the elements have lost their period on the left side denoting that it's a list item now all we need to do in here is change our footer nav Li so that we have a different set of padding around these elements will use a padding of zero on the top and bottom and 0.5 eeehm on the left and right to give these elements a little bit of space around each other next we're going to make it so the images are going to be quite a bit smaller than they are right now since they're a bit oversized so we'll use the footer nav select all the images give them a width of 30 pixels and a height of 30 pixels if we save that we see that now everything is Center aligned together inside of the footer our images are smaller they have the hover element which is the same from this navigation up here and they also allow us to click them and go to their links the great thing about this webpage is that it's also responsive on different sizes so if we increase the size of our page you see that everything flows great around each other without breaking everything's working everything looks great whether it's full size or small it doesn't matter it'll work flawlessly this web page is though not designed specifically with mobile sizing in mind so it doesn't look as good on a small screen size as it does on a slightly larger screen size but either way it looks great no matter which size the browser is at and that is all there is to creating the about fanpage for this website we have all the stylings so that our page looks almost exactly the same as the mock-up that we had before and it is even scalable to different browser sizes and it looks good on all those different sizes the best part about this is since that we used very generic named classes such as container band name and nav were able to apply these classes to the rest of our pages such as the home page here and the store page here in order to get a head start without having to restyle the elements such as this navigation and the footer every single time if you guys want to follow along with this project and use the exact same code that I have to style this about page here all this code is going to be available on my github which will be linked in the description below from there you can get these font files that I'm using as well as the different logos and background images that I'm using and even the actual code for this video is available on my github we're going to tackle styling the homepage of our website to look exactly as this image on the right here in order to get started with this let's open up our index.html page with live server and here we have all the HTML with no CSS styling is applied to it the first thing that we want to do is to go into our about HTML copy our link tag from the head and paste this into our index.html file this way we'll be able to load those files in from our Styles dot CSS file into our home page here as you can see this already has made some changes by changing our font font color and etc based on our everything selector the next thing that we need to do is apply our Styles to our header that we created in the last episode such as the class of main header if we save this we'll see that on the right our header will update and then we have our navigation which we can apply the classes of nav and main nav to and there we go we'll get rid of this HR here as well as these two line breaks and our comments as these are no longer needed since we have a background image and these line breaks will be taken care of using CSS but to save that and then add our final class here for the band name and band name large and if we save that our header now looks very similar to how our about page header looks but we have these two buttons down here that we need to style still the first thing we want to do is create a button class for all of our buttons will do this in a similar way that we styled our navigation elements by having a nav class and then another class to style what type of Navitus but first we'll just create this generic button class that all of our buttons will be able to use inside of our Styles dot CSS let's add the selector for that button class and start applying the different styles we need we know that we want all of our buttons text to be centered in the middle and center of our button so we'll use text-align:center to put our text in the center horizontally and then we'll be using vertical line of middle to put our text in the middle for to clean if we save that we'll notice that no changes were made over here because our buttons aren't tall enough or wide enough for our text to need to be aligned in the middle yet but as we start adding different padding's and different heights and widths will see that our text will always be in the center next let's add a little bit of padding around our button so that we have more space between the text in the edge of our button to do this we'll use padding and then we'll give it point 6 7 p.m. of padding on both the top bottom left and right by just doing one number and if we save that plus there buttons have gotten slightly larger last thing we want to do is when we hover over a button we want our cursor to change to a pointer icon as opposed to the normal arrow icon so we're going to go into here change our cursor to pointer and save that and now when we hover over our buttons we'll get the pointer icon instead of the typical arrow icon the next thing we want to do is apply our button specific classes for a header and we'll just call this button header now if we go into our Styles CSS use the selector for our button header class we can start adding styles that are specific for this gate or latest album button the first thing we want to do is use the margins around our button to be able to position it whatever you want if we look at our image here we can see that our button is positioned so it is slightly offset from the center and offset from the left edge of the screen we're going to be using margins with percentages and EMS in order to accomplish this so if we use margin the first value if we use all four values the margin corresponds to the top margin which we want to set to 0.5 eeehm which will be half the size of the font we then want to use 15% to correspond to our right side margin which will take up 15% of the total space our object can occupy then we can use to e/m as the bottom margin and another 15% as the left side margin if we save this we see that our object already aligns itself slightly offset from the left and not quite centered in our space this is exactly what we want next we want to style the button to look like it does on this page the first thing that we're going to want to do change text color to be white and then we want to add a border around our object it's going to be two pixels solid and we're going to use this color which is a slightly bluish color as our border color now if we save that and go back we already see that our text colors changed to white and we have blue border around the object but we still have this gray background in order to get rid of that we just set the background color and we're going to use a very very opaque white color which would be RGB a 255 255 and point 1 if we save that we now get a button that looks very similar to this button in color but spacing it's still not quite right what we need to do is set the border radius of our object to be zero which move completely remove the rounded corners of our object so that we now have a perfectly square corner object over here just like in this image the border radius corresponds to how rounded the corners are so by setting to zero we have no rounded edges to our corner next we want to increase the font size we're just going to set that to 1.5 VM to be about 50% larger and then we want to make the font weight to be lighter so the text is slightly thinner and if we save that our button is looking very similar to our button over here but you'll notice that we don't quite have the same hat email on the left and right in order to fix this we'll set our padding on the left to be two e/m and our padding on the right to also be 2 a.m. now if we say that our button looks almost exactly the same as our button in here this is perfect but when we hover over this button nothing actually happens we have no way to know we're actually hovering over it in order to fix that we use the button header hover selector here and we'll set the background color and we'll just make it a slightly less opaque version of the color that it already is which is white but we'll use 0.3 instead of 0.1 as our pasady so now if we hover over it you see that our button gets slightly lighter so that way we know that we're actually overtop of it one thing that you may notice is if we zoom out here on our image and we increase our font our window size to be even larger our button will become very offset to the left and not as centers as we like it to be in order to fix this in our index.html page let's wrap this button here inside of a div with the class of container if we do this we've already created this container class which has a limited with this means the padding of our button on the left and right will be inside of that confined with space of the container so if we save this and increase our size of our browser to be even larger you see that our button will always stay similar to the center of the screen because it's inside of a container with a limited width that's exactly what we won our thing our webpage to react as now let's zoom that back in so it's easier for you guys to see there we go and now it's work on styling this button right here for the play button will use very similar styles to our header button but we'll also add a play button class to this if we say that we already see that this is very similar to our style over here what we want to do is we want to make this button entirely round and we want to make the icon on the inside blue as opposed to white in order to do this we'll go to our Styles dot CSS here and we'll use our button play class to style our play button how we want the first thing we want to do is send our button horizontally in the screen so we're going to use margin with zero on the top and bottom and auto on the left and right in order at our button to Center itself in the screen but as you'll notice our button actually just centers over onto the left side this is because buttons are not block level element and only block elements can have an auto margin to get around this will change our button to be disloyal ock now if we save that will notice our button is perfectly centered in our screen the next thing we want to do is change the color of this icon to be our blue color here which we can just copy from our border save that and now we have that same blue color instead of our button we want to increase the font size in order to make the icon larger we'll use 4 a.m. and then we want to change our border radius to be 50% in order to make a perfect circle and there we go but you'll notice that our button is more of an oval than a circle and that's because our button has different padding on it so we need to completely remove padding from our button in order to make it a perfect circle but you'll see there's a slight problem where a button gets really scrunched up so we want to give our button a width and a height and weird even make these exactly the same so our button is a perfect circle as opposed to an oval we'll just use 100 pixels and if we save that you see that we now have a perfect circle button in the center of our screen that is slightly offset from our button up here very similarly to over here and if we increase the size of our screen you see that our buttons will stay positioned how we want them no matter what size our screen is that's exactly what you want and everything that we need to do in order to make the header of our page look exactly the same as this image over here the next thing that we need to do is work on this section of our page which contains our tour dates and is the main content of this homepage the first thing we can do is use our styles that we created in our previous video we can use our class over here of content section in order to specify that this is a Content section and we can also use the class container in order to specify that we don't want the width to grow over a certain size next we can use the class here of section header just as we created in our other video that will mark this header as a section header and Center and give it the right font that we want now we need to tackle the individual rows of our tour date the first thing we can do is remove the HR as well as these less than and greater than symbols since these were only there in order to be used for spacing in our HTML and we will do all that with CSS now instead so now if we save that we see that our row is completely scrunched together which is perfect for us to start styling we also want to give our rope a class of two arrow so that we can say each row will be styled in the same exact way what's going to our styles dot CSS here add that to array of selector and get started styling it the main thing we want our tour row to do is to give us padding between our different rows as well as give us a border on the bottom of the row so to start let's use border bottom to give a bottom border tomorrow and we'll make it one pixel solid black if we say that we see that we now have that Porter on the bottom of our object similar to how the HR worked but we also want there to be a little space between the row and the row below it as well as between the row and the border in order to give us space between the row and the border will use padding since padding a space between content and the border and we'll set this to one ECAM if we save that we now have space between our content and our border and in order to give a space between the content below in our border we used margin which is on the outside of our border and we'll set that to the same one a.m. now if you say that we have space in between all of our rows here let's take this to our item or to a row class and give it to all of the different rows inside of our content here we can just copy and paste that into all these divs and after we're done with that if we save it we'll see that we now have borders on the bottom here let's get rid of all these hrs so that it's easier to see and you'll see now that we have borders on the bottom of all these different rows very similar to over here but you'll notice there should be no border on our last row here and you may think Oh we'll just remove the class and that will solve the problem but I will get rid of all about padding and margins in order to fix this problem we can use what is called the last child selector so if each to a row last child this will select the last child with this to a row class and if we just give it a border bottom of none to say that it should be no border and say that you'll see the border on this last child has been completely removed now we can get started on styling the different elements inside of our row let's first start with the date element here and we're gonna give this a class of two or item which will give to all the items in our row and we'll give it a specific class of two or date and this will work very similar to how we've done buttons and nav so far let's first start by styling the two ER item element in here all we want to do is set very specific padding margin spacings all that we want between all of our two items so first we want to add a padding right between all of our elements to give them a little bit of space of 0.5 p.m. if we save that you'll see that now there's a little bit of padding to the right side of our date element here which is exactly what we want but we also want these elements to display in line with a specific width as we know in line elements cannot have any width applied to them for example if we were to apply a width of a thousand pixels here and save this our object does not actually become a thousand pixels wide and that's because it's an inline element so what we want to do is change the display to the inline block which will make this act like an inline element as then it won't break the line when it's done but it'll also be able to have widths and Heights applied to it like a block element and if we save that we see our element is now a thousand pixels wide we don't actually want that so we'll remove that line perfect the only downside of inline block is it does add a tiny bit of space between each element that we cannot actually remove but that is okay for now now let's use that to our data class that we also assigned it and start styling that as well first we want to give it a slightly darker color than the rest of our row to match the styling in this page so we'll give it a color of five five five which is a slightly darker version of our 777 color and if we save that you'll see our color is a little bit darker we also want to make it that it's bold so we use font weight of bold if you saved that you notice not much extra changes and that's because we used a strong tank over here for our element strong tags are meant only when you want to emphasize something and in this case our bolding is only for visual instead of for emphasis so we want to change this to a span tag to remove the special emphasis applied to it since it is only meant to be visually bolded and not actually emphasized for importance now if we save that you'll see it'll look perfect let's go back to our style best CSS and give this a specific width and we'll just use 11% for our width here and save that and now it gives us a little bit of extra spacing and as we increase the size of our browser the spacing will increase with it perfect now let's move on to the other elements of our tour item instead of our index.html let's give all of our elements the tour item class as well as a specific class in this case this is our city so we'll call it to our city this next one is going to be our arena so we'll give it to our item into our arena and this last one is our button so we'll give it the class of button will also give it a tour item class and a tour button class and say that now our role looks a little bit better has a little bit of space in between our elements but everything's not quite lined up probably want it so in our styles that CSS here let's style our individual tour elements starting with the city element which we're just going to give a width of 24% this is a slightly larger text than our date is let me save that and now it gives us a little bit of spacing we'll go on to our to our arena and we'll give this a width of 42% since this is our largest element by far and then lastly we use the tour button and instead of giving this an actual width because if we give it a width for example of the 19% and we say that as we increase our screen size will see that our button will get wider which we don't actually want to happen so instead we'll use max width as opposed to whit's which means our element will never be larger than 19% of the screen so now if we shrink this our button will stay exactly the same no matter how large or how small it goes because the width will always be the same as the content but it will never become larger than 19% of the screen so if we make our screen very small coz-theta our button will break on a tumor instead of shrinking even further that's exactly what we want he also may be wondering by looking at these widths why they don't exactly add up to a hundred percent because you would think we want to fill up 100% of the space and you are correct we do want to fill up 100% of this space but as I talked about inline-block elements add some amount of spacing between each other in line block element that we cannot remove we have to account for this by making our widths slightly less than 100 percent when added together to do this I subtracted about 1% from each of these widths after making them total up to 100% this way we have 96 percent with taken care of so that way our screen won't break onto multiple different lines until it becomes very very small and in that case you'll see it does break onto multiple lines that is okay because our size our screen is not really meant to be viewed on mobile this is mostly for desktop design let's make that size a little bit larger here there we go and let's copy these styles onto all of our different elements over here in all of our different rows I'll do that really quick there we go as you can see now all of our rows are styled correctly but they all line up exactly so the spacing is exactly what we want it to look like and if we increase the size of our browser everything stays in line and all of our different columns and scales to be responsive with the size of our browser this is perfect the only thing we have left to do is style our buttons so that it look the same on this page as they do on this page in order to do that let's add one final class to our buttons which will be button primary since it'll be the primary button of our site and this primary attribute really refers mostly to the coloring of our button since our button base class already applies all the styling for the different sizing padding and margins that we need so now if we go over to our Styles dot CSS add this button primary class in here we can now style the different colors we need to let's first start by adding a color of white which my car text Claire white as well as our background color which we want to say to this color and if we say that we now see our buttons are the exact same color as over here we next want to remove all of the border from this element so we don't have this great border around here anymore and then we want to make our border radius to be slightly bent around the corners as you can see over here we have a slight bend in the corner so we'll make our border radius the 0.3 éem and if we save that you see that our button is already looking great but our text is a little bit dull in here so let's make the font-weight:bold to make our text pop a little bit and if we say that our buttons now look perfect and they look exactly the same as our buttons over here the only thing we have left to do is that a hover element to this so that we can tell though we're hovering over our element we'll do this exactly the same way by using our button primary with the hover selector and we'll just give it a background color that is going to be slightly darker so in here with a background color and we'll just set that to this color right here now if we hover over a button you'll see that it'll get darker to note that we are hovering over this button and it is easier for our users to know what's going on the last thing we have left to do is style the footer to be exactly the same as the footer on our about page so in order to do this we'll just go to our about page go down to the footer and copy all the footer elements heidi's classes all of that and we'll paste it over our footer here since we know that we want them to be exactly the same and now if we save that or scroll down here our footer now looks exactly the same as I've put it over here which is exactly what we want now if we zoom out our webpage here a little bit to be a hundred percent increase the size you'll see that our content stay is them side of these bounds and that is due to the container class that we added this is perfect for making our site responsive without stretching too far on larger screens and also making it look decent on smaller screens such as this or this that's all there really is to creating a CSS for this home page you'll notice that this was much easier than doing our about page and that is because all the styles that we used in our Paige we were able to copy over and use in our home page we're going to be taking the store page that we've designed earlier with HTML and style it to look exactly like this image on the right here now let's get started here by opening up our store HTML page using live server to see what we have to get started with there we go and the first thing that we need to do is copy over the style sheet that we've already created and link it so we'll just copy this link here from the index page paste it into our store page so we now have access to all the styles that we've already written and as you can see it's already taken effect the next thing that we need to do is go onto our header here and we need to style our header to be exactly like our home page in our about page as you can see here so to do that let's just add the classes that we've already created of me and header and our nav gonna have the class of main nav and then nav and there we go that looks good to remove this HR and then finally style our band name here with band name and band name large we save that and every go we have the same header that we have on all of other pages and luckily for us this is the only thing we need to do in our header here the next thing we could do is move on to this section and work on this music card section right here we can get started here by styling our section with the classes that we already have such as container and content section if we save that you'll see we get a little bit of padding from doing that and then we can also title our header here by using the class of section header which we've already created and we say that we now see that our header for our section is properly styled and that we can move on to styling the actual items that are going to be going into our cart let's first look at what we actually want the style to look like over here in our image and we can see that we have the title of the item at the very top centered we have the image here and then we have the price and the button to add it to the cart on the bottom that are slightly inset from the sides of the album image so we're going to do that let's first add a class to this div that wraps all of this content here and we're just gonna call this shop item and this is just going to represent a single item that we had for sale in our shop and this will be usable in the music and the merch section the next thing we can do is we can actually remove the divs that wrap this album since we can use CSS in order to make album on its own line without having to use a div to do that so let's remove these divs here and then we can also change the strong tag to a span since we know that the we want this album one to be bolded but we don't actually want to put emphasis on it that the strong tag does for things like screen readers we just want to style that in CSS so let's add a class to this here we're just gonna call this shop item title since this is going to be the title and the name of our shop item that we have here next we have our image which we are going to add a class to as well we can just call this shop item image so that we can style our image to resize it as we need and then lastly we have this bottom div here which are the details of our shop item so we're just going to give this a class we'll call it shop item details and inside of that we have the price of the shop item here so we can give that the class of shop item price and then we have our button here which we already have two classes for a button and button primary since this will be the bluish colored primary button that we have and then we'll add another class to it of a shop item button so we can style this button specifically for the shop item as needed and if we save that go back to here you'll see that some of the things in our page have already changed we got the blue button now and now if we can actually go into our Styles - CSS and start styling these elements the first thing that we're gonna want to do is we're going to want to give some margin around our shop items so they don't run up writing next to each other as you can see that these two items are so if we go in here we select our shop item we can just give it a margin on all sides of 30 pixels if we say that you now see that we have a spacing on the sides bottom top of these shop items so they won't run right up against each other the next thing we can do is style this shop item title right here do that we'll just select the shop item title and we'll get started styling it the first thing we want to do is we want to make it so that it is display:block so that way it'll be on its own line as opposed to being in front of the image if the width of our browser is large enough the next thing we're going to do is we want to make this item 100% width so that it'll take up the entire width of the top of the image and that way when we do text-align:center the text will actually center itself above the image just like that the next thing we can do is change the actual size and color the font so if we go in here we can make the font-weight:bold so it is a little bit larger we can make the font size the 1.5 e/m so it is also slightly bit bigger and then lastly add a color that is slightly darker than our current color here we saved that you see that we now have a great title but it's really close to our image so we'll just add a margin on the bottom here and we'll make that about 15 pixels and we say that and now we see it spaced out above our image which is perfect this is exactly what we want for our title the next thing that we should tackle is the actual image of our shop item right now this image is quite large and takes up almost the entire screen so what we want to do is we just want to change that to the shop item image is slightly smaller than it is right now so we'll just give it a height of 250 pixels did we say that you'll see that our image shrinks down a little bit and the width and the aspect ratio stays the same because dive by default the width will be automatically as large as it needs to be for the image to be the same aspect ratio when the height is 250 pixels this is because we didn't actually set it with so it defaults to auto next we want to work on this details row down here where we have the price and the button for adding it to our cart so what's going to here and we'll do shop item details to select the wrapper that goes around our details for our price and our button here and we'll make this display flex there we go the reason we're using display affects is because we want to Center these items vertically so that they are all within the same line as you can see this price is at the top of the line here we wanted to line up with the text in our button so to do that we'll use align items Center in order to centrally aligned all of the items inside of this container and as you can see this looks perfect over here the last thing we want to do is add a little bit of padding 5 pixels on the top bottom left and right so that way it's slightly inset from the image and doesn't quite touch the image on the top next we can move on to style in the actual price of our shop item so this shop item price and this doesn't take many styles all we want to do is make us so that the button is shoved all the way to the right side of the screen so we'll set Flex grow to 1 so that our price will take up as much width as possible if we say that you see that it pushes this Add to Cart button all the way to the end of our container right here next thing we want to do is change the color to make it slightly darker and that's really all there is to styling the actual item of our shop but what we want to do is we want to make us a shop items will all flow around each other and as you can see our shop item doesn't quite fit within the space of the image it's taken up way too much of the width of the screen in order to fix this we can go back to our HTML here and we can wrap all of these shop items inside of a div and we'll just give it a class of shop items so if we go up here create a div give it a class of shop items there we go look at the end of this div at the end of all of our shop items for the music section right here and indent everything so that it looks nice there we go and now we can actually select that shop items did that we created and we can give it a display of flex and if we say that you now see that everything's all in one wine and it goes all the way way past the edge of our screen we do not want that we want these items to actually wrap so we can use the property flex wrap in order to bake these elements wrap and we'll just set it to wrap so that if it goes past the edge of our screen though Rapp down and as you can see now they all fill up in one column instead of wrapping all the way to the end of the screen you'll also see by changing flex our display to flex your fish off items our image is the total width of our item so that our Add to Cart button doesn't get put all the way to end here in our album one title is properly centered above the image this is exactly one the last thing we want to do is when our screen is larger these items will be right next to each other like this and we want to make sure that they're spaced between them in the middle left and right so we'll use justify content space around which we'll put an even amount of space on the left and right of every single element inside of our container and if we save that we now see we have spacing between these elements and on the left and right of them that's exactly what we want for these shop items now all that's left to do is to create all these different classes and add them to all the different shop items which I'll do real quick here and there we go that's all the styles that we need for our shop item so now as you can see as we scroll down all of our buttons and prices are styled correctly everything is lined up properly and if we increase the size of our screen you'll see that our items will line up next to each other which means that our site is actually responsive to different screen sizes this is because we use display flex with the wrap property so that if it became too large for a screen it would just wrap to the next line and if our screen was large enough to allow multiple items they would all stay on the same line this is perfect for our situation since we didn't want our albums to only take up one line or be two on a line when our screen was very small so now what we need to do is do the same thing to our merged section that we've done to this section here by wrapping our container in a shop items div and then adding all these different classes down to these elements here I'll do that real quick now and there we go I've added all the different styles to our merged section since it's pretty much exactly the same as this music section here and as you can see if we increase our screen size be large enough there we go our items will be side-by-side and if the screen size is not large enough they'll stack on top of each other just like this and this is a perfect example of our flexbox working because as you can see these are side-by-side but these are not because this coffee image is actually wider than these images up here so it needs a wider screen size in order for them to stack side-by-side like this now the last thing that we have to tackle is the actual cart down here which is going to be the most complex part of this page so stick with me the first thing we need to do is go back into our HTML and style the different HTML elements that we need with classes so that we can styled it to look exactly like the card down here so first let's take the classes that we know we already have for this section we can do container that we can do content section there we go we can also style this header here with content our size section header there we go and now let's get into the actual rows and headers of our cart right here we don't need these less-than and greater-than signs anymore since we're going to be putting the spacing in using CSS and same with these strong tags we can replace these with spans so let's do that real quick there we go and now let's start adding the actual classes that we need the first thing that we want to do is style the wrapper that goes around each of our rows and we're going to just give that a class of cart row and then we want to do classes for our different items so we have our item column our price column on our quantity column since we want all these to line up and be the same width we'll give this a class and we're gonna give that art item and we'll also give it a class of cart header since this item is in the header of our cart and then lastly we'll use the cart column class which we're going to give to all of our different columns of our cart section so that way we can do consistent style in between all of our columns without having to copy and paste at other places let's do a similar thing for the price there we're going to give it a class of cart price class of cart header and a class of cart column and then lastly same thing for quantity give it a class cart quantity cart header and cart column and there we go that's everything we needed to do in order to style the header row of our cart let's start by styling that in our style sheet right now the first thing we want to do is style the actual headers of our columns so to do this we can use the class cart header to select them and then set a font weight of bold since these are going to be bolded we can set a font size to be slightly larger at 1.2 p.m. and then lastly we want to make the color darker so we'll just use this color that's slightly darker and then we can move on to styling the actual individual columns themselves so let's choose the select your cart column here and get started styling that in here we can use a border bottom we'll just use one pixel solid black border in order to put a border on the bottom here but we also need space in between our elements because if we go back here you'll notice that our borders are all running right up against each other and this image is even overlaying over the top of our borders in order to get around this we're going to use some margins around our elements here first let's use a margin on the right side in order to space our columns away from each other and we're just going to use a margin of 1.5 am here we save that you'll see that now there's a space in between our different columns we're also going to put a padding on the bottom so the spacing between the column and the actual underline so we use padding bottom here of 10 pixels and then we'll also put a margin on the top of our columns in order to put a little bit of space between the top of our column and everything above it so in this case the actual border of the element for this column so we use margin top 10 pixels here and perfect now we need to actually add these classes to the rest of our items inside of our columns to do this let's go back to our store HTML and copy over all these classes to these other different elements here let's do this for the first one we'll copy over this class cart row put it onto this div here we also have the cart item which is going to include both the image here and this t-shirt name so we need to wrap this inside of a div with the class of cart item so they say this is our item column they're also given a cart column class since it's going to be a column inside of our section here at the end of the div down at the bottom and now if we save this you already see that we started to getting borders on the bottom which is perfect next we can move over this cart price to be inside of this span here since this is the price for item so we'll get of a class of cart price and another class of cart column there we go we can also remove these less than and greater than symbols here again since they're just used for spacing and then lastly we have our cart quantity which includes the input and button down here so we can do a similar thing where we wrap them inside of a div so if we paste this div here instead of cart item we want cart quantity and then inside of that div we just want the input and the button and there we go now we have everything we need but you'll see that they're spaced out so that they're all on the line of their own in order to get around this we want to do is we want to use flux box again in order to align these items properly so if we go back to our Styles SCSS let's style that cart row and we use display flex in order to get all these items onto one line just I did that's perfect we're now running into the problem though we're all columns are different widths as you can see this item column here is not wide enough to support all the stuff in it but price column doesn't line up with the actual price here and the quantity is way off in order to fix this we'll use these cart item class the cart price class and a cart quantity class that we have five to our different columns in order to style the widths of these columns so they're all exactly the same for our item let's use a width of 45% there you go for the price we're going to use a width of 20% and lastly for the quantity will use a width of 35% if you save that you'll see that now everything lines up inside of the columns that they should be inside of you'll also notice that if you add these numbers up they equal 100% but if you remember from our first video when we are styling actually our second video I'm sorry when were styling the home page you'll notice that we had to not quite equal 100% when we were creating our widths this is because we are using inline block elements to style those an inline block elements have spacing around them here we're using flexbox to align our items so we can actually use widths that add up to exactly 100 percent because flexbox does not any spaces in between the items inside of its container this is why I almost always use flexbox when laying out element as opposed to inline block flex box is also a great aligning content inside of its box to be centered horizontally or vertically which is a problem you'll notice on the right here where our content should be centered horizontally or vertically I'm sorry in order to look like this so that all of our text is right in the center here but over here our text is either at the bottom over here or the top over here so to fix that we'll go back to our cart column here since if you remember all of our content for each of these columns has this cart column class around it and we'll make this display of flex and then we'll use a line items singer in order to send our items along the vertical right here we save that you'll see that now all of our items are vertically aligned exactly as they should be and this is looking really close to what we have over here - all the coloring that we need to do for our different elements in order to specifically select the different elements we want to style let's go back into our HTML here and add some classes to our different elements the first element that won't want to style here is the span tag with the title of the element so we'll do here is we'll add a class we'll get it a title or the name of cart item title specify this as a title of our cart item we also want to add a class here to our image so we'll just use cart item image specify this is the image of our cart item our cart price is already styled which is perfect and then we just need to add styles to our input and our button here so let's do class here we'll just give it cart quantity input in order to specify this is the input for our cart quantity and then our button will have the class a button which we've already defined button danger which will specify a red colored button and then also cart quantity button in order to specify this is the button for our cart quantity if we say that you'll notice nothing over here changes other than the button styles are applied to this button so then we can go into our styles does CSS and actually start selecting and styling these elements so let's go down here and first let's style the actual title the t-shirt title here by using cart item title selector and then inside of this title selector will put the color to be a slightly darker color we'll give it a little bit of margin on the left side so that it's not quite right up against our image here as you see so we'll just use point five en for this and then lastly we'll increase the font size slightly to 1.2 en if you say that you'll now see that our image is slightly pushed away from our item name which is exactly what we want next thing we can style is the actual image since our image is a little bit too large right here so we can go in here carte items image will change the width to be 75 pixels so this image is smaller if we save that you see our image is now smaller but the height is too tall so we're going to give it a height of auto so the height will automatically adjust to the width have we saved that it's now within perfect Oxbow aspect ratio that it was four and lastly we'll just add a slight rounding of the corners here so we're just going to use border-radius and we'll just say for example ten pixels if we save that and now rounds the borders just a little bit which adds a little bit of extra aesthetic to the image I think the next thing we want to target is this price over here and we already have a cart price selector so let's just do it inside of that will increase the font size slightly to be 1.2 e/m and we'll make the color slightly darker and if we save that we'll see that the price now looks good and we really don't have to do anything to that the last two elements throw our input and our button are going to take a little bit more work let's go down here and we can select that button danger class that we added earlier to apply this reddish colored button and we can start adding our classes to this the first thing that we want to do just change the color of the text to be white and we want to give it a background color here that is going to be a reddish color I just paste that in here that'll be a red color and if we save that well so that we not have this reddish button we want to remove the border from the button give it a slight border radius so that has rounded corners and then lastly increases so that it is a bold font here if we say that we now have a good-looking button but we have no hover that happens when we go over the button so let's add our hover effect using the hover selector here and we can just give it another background color that is going to be slightly darker here and if we save that and we hover we now get a slightly darker red color when we hover over the button which is perfect the next thing we can select is our cart quantity input which is going to take quite a few styles applied to it in order to give it a blueish border and a smaller size the first thing we want to do for this is to make it the same height as our button over here so to do that we'll use a height of 34 pixels say that and we'll see that our input is now the same height as our button we also want to change the width of this input to be quite a bit smaller so we use a width of 50 pixels which should be enough space in order to put our text and have these buttons for incrementing and decrementing the number inside of here the next thing we want to do is you want to give it a border radius so it has slightly rounded corners we'll get a border radius of 5 pixels will give it also a border that's going to be one pixel it's gonna be solid colored and we want it to be the same exact color as our buttons up here so we'll just copy that back on color from our button and we'll paste that in here now and we say that you'll see that we now have the border around our element which is great we need to give it a slightly darker colored background which is just slightly darker than white and if we say that you can see that we want to change our text color to be slightly darker and then we want to make sure we have no padding around this element at all and if we say that our input element is starting to come both together we just want to move our text to the center and make it slightly bigger kick so we'll do text align Center in order to send our line our text we use a font size here of 1.2 e/m to make our font slightly larger and then lastly let's use some margin on the right here 25 pixels in order to separate our input from our button and if you save that you see that now this looks a lot like our mock-up over here for our button and input and that's pretty much all we need to do in order to style our robe properly now I'm going to copy these styles from this row onto the second row and see what we have from there there we go that's all the styles that I'm going to need in order to make this we can also remove the HR down here at the bottom and we can also remove this cart quantity button class since we never actually ended up using that class so let's remove that from both of our buttons here and save that and you'll notice that everything still looks exactly the same you will notice however though that are underlined borders here don't quite look the same as over here as you can see we have a solid border on the bottom for our last row and over here we have a separated border on the bottom in order to do this we can use the last child selector in our CSS in order to change the border for the last child but the child element selector only works for the last child inside of a container and right now these cart rows are not the last child of the container that they're inside as you can see this div right here's the last child so let's wrap the rows of our cart here inside of the container now we'll just give this container here a class of cart items move this div down to the bottom here now we can indent all this so it looks pretty save it and you'll notice nothing over here actually changes which is perfect but now when we select a last child of the cart row it'll be this cart rail right here since it's the last child of this carte items container so now let's do that inside of our Styles dot CSS here first thing that we're going to do is select the cart row slash child of it and in here we're going to use that order bottom property in order to set a one pixel solid black border that is going to go across the entire row here if we say that you'll see that we now have one solid border on the bottom but we still have our individual borders that we want to remove to do that we'll again select the cart row last child but we'll also select the cart columns that are children of that actual cart row and we'll remove the border from them and if we say that you'll see that now we have removed these individual borders and all we have is this solid line de Borda right here on the bottom and that looks exactly the same as over here which is perfect now all we need to do is title type style this total section and this purchase button and we'll be done with this entire band website let's first start by going into our HTML and adding some classes that we can select these elements with first we'll use the class here of cart total that will wrap our total and the price of the total and we'll also use class here of cart total title so this is going to be the title of total and then in here we have the class of cart total price since this is the actual total price and then inside of our Styles dot CSS we can select those so we have cart total which is the row that wraps all of these we'll give that a text a line of the end so that our text will go to the end of the line here just as it does over here and then we can use the selector for our cart total title in order to change the actual text here of this the first thing we want to do is make the font-weight:bold since it is bolded in our design let's go change that to bulb will increase the font size to 1.5 en make the color black so it stands out and we'll give it a little bit of margin on the right side is that way it'll be spaced away from our actual price and we'll just say 20 pixels for that and if we save that that's starting to look a lot like over here which is great last thing we need to do is just style the actual total price so we can use cart total price to select that and give it a color that's slightly darker and a slightly larger font size just so it sticks out a little bit more of the point one am if you say that this now looks almost exactly the same as this but you'll notice that our total is very scrunched up here against the bar so we just want to add a little bit of margin so we'll say margin on the top here from our cart total is going to be 10 pixel we'll also add a margin on the right of 10 pixels so that our total isn't squashed right up against the edge of our screen and instead of has a little bit extra space and that looks great right there our card section is now exactly is over here the only thing we have left to do is this purchase button which would be fairly simple since most of the classes we have are already defined let's go back to our store at HTML here we can remove this div that wraps this section since we don't actually need that and inside of here we can add some classes a button and button primary since this has a primary colored button and we'll also add a class of button purchase since this is going to be a purchase button if we save that you'll see that we already here styled here from the primary button class and if we go into our Styles dot CSS we can add some Styles specifically for this purchase button here the first thing we want to do change the display to block here so that way we can Center this button by using auto margins so we'll use a margin here on the top we want 40 pixels to space it away from our total section on the Left we want auto margin on the bottom we want 80 pixels and on the right we want another auto margin and if we save that to see that our purchase button is now centered with padding or margin I mean on the top and an even larger margin on the bottom to put it away from the footer the last thing we want to do is increase the font size to 1.75 e/m so that there's a much larger button and there we go that looks great and that's a huge button for them to click when they want to purchase their items now all we need to do is style the footer down here and this is going to be very easy all we can do is go into our index page here we can copy our footer since we know it's exactly the same and we can just paste that into our store HTML and if we save that we now have the footer down here and it looks amazing this looks exactly as the page over here and as we increase the size of our browser our elements will flow naturally around each other you'll see all of our columns stay lined up here no matter how large or how small our browser is everything looks great and that's pretty much all there is to in this store page for our band website I really hope you guys were able to learn something from this video thank you guys very much

Channel: freeCodeCamp.org

Views: 389,852

Keywords: css tutorial, html tutorial, how to make a website, css guide, css guide for beginners, css best practices, web develoment for beginners, programming for beginners, learn web design for beginners, learn web design, learn css for beginners, css introduction, responsive web design tutorial, responsive web design with html5 and css3, how to make a website using html and css, web design, how to learn web development, html css

Id: kMT54MPz9oE

Length: 129min 14sec (7754 seconds)

Published: Mon Oct 15 2018