Transcript for:
Foundations of HTML and CSS in Web Development

hey how's it going everybody in this series I'm going to show you everything you need to know to get started working with HTML then a little bit later on we'll cover CSS so why don't you go ahead and sit back relax and enjoy the show hey if you enjoy my videos please be sure to subscribe because subscribing is free just like how this video is free help me out yes I'm guilt tripping you that is all why should you learn HTML in today's age people spend way too much time on the internet myself included unfortunately knowing how to create or otherwise manage a website isn't a bad thing to know heck add it to your resume it really can't hurt even if you're not interested in web development as a career almost every business has some sort of online presence knowing how to manage that online presence could convince a potential employer to hire you over somebody else so why not HTML is an acronym for hypertext markup language the general idea is that certain types of tags also known as markup is used to convey to a web browser how some content should be displayed usually tags are in pairs with some content sandwiched between them header tags are typically used for titles P tags are used for paragraphs of text a tags are used for hyperlinks HTML adds structure to a web page if we were building a house you could say that HTML is the foundation the skeletal structure to support all content on a website then their CSS CSS means cascading style sheets it's a language that adds style to a web page in our house analogy CSS would be equivalent to the decorations design and colors of the Interior to begin working with HTML and CSS you'll need a modern web browser you can use Google Chrome Firefox Microsoft Edge Safari those are all fine you'll also need a text editor as well such as vs code it's free software that functions as a workbench for us to write code in this next part I'll show you how we can download and install vs code to download vs code head to this website code.visualstudio.com look for whatever operating system you're using and download that version I'm running Windows I will download the windows version then I will open it when it's done accept the agreement yes I did read it that fast next I'll create a desktop icon next install launch Visual Studio code and finish we need a folder to hold all of the documents related to our website go to Open folder I'll place this folder on my desktop new folder I'll name this folder website select folder there we go we are now within our website folder I'm going to create a new file I will name this file index.html whatever your home page is going to be I would recommend naming it index.html most servers return the index file as the home page so it would be good practice for us to name the home page index now what we're going to do is install the live server extension go to extensions look up live server and install basically what this does is that when you update your HTML file if you have a web browser open it's going to update automatically it'll save you some time all right everybody now what we're gonna do is fill in our HTML file at the top what we'll do is add a set of angle brackets then type this exclamation point doc type HTML this is a declaration that this document is an HTML5 document which is the most recent version then we'll create a pair of HTML tags we'll need an opening HTML tag and an ending HTML tag you can tell that this is an ending tag because it has a forward slash most tags are in groups of pairs that's if there's typically content between them this pair of HTML tags represents the root element of an HTML page between these two tags we will add a pair of head tags the head element contains information about your web page such as a title let's add a title to our web page title add a closing tag let's set the title of our web page to be my first website now what we'll do right click on your HTML file then open with live server here's our webpage the title says my first website just to make this easier on us I'm going to place our web page side by side with vs code when we save any changes we can see that update automatically the head element contains information about your web page whereas in the body let's add a pair of body tags after the pair of head tags the body element contains visible content in your web page between our body tags let's add a pair of H1 header tags H1 defines a large heading I'll add some text this is an H1 heading I'm going to save that should update my HTML document automatically this is an H1 heading let's try H2 add a pair of H2 header tags this is an H2 heading let's do H3 H3 this is an H3 heading H4 this is an H4 heading then we have H5 this is an H5 heading typically header tags are used for titles or other large text let's discuss paragraph tags if you have a paragraph of text you can place that within a pair of P tags thumb text goes here if you need some sample text to work with if you're using vs code you can type lorem then tab this will create some garbage text for you I think it's supposed to resemble Latin if I were to copy everything within the set of paragraph tags then save it paragraphs are separated with a line break otherwise if you do need a line break you can type BR meaning line break so this is a self-closing tag pairs of tags usually have some sort of content between them with the line break that's a self-closing tag we don't need a closing tag so add as many line breaks as you need wherever you need them so that's a line break there's also a horizontal rule which is HR think Human Resources HR that would add a horizontal line across your page that might look pretty good after a title paragraph tags don't care about any spaces or new lines I'm going to put all of this on separate lines just so it's more legible so when I save nothing appears to happen even if I were to add some line breaks between these sentences nothing appears to change you could always change your paragraph tags to pre meaning pre-formatted as in pre-formatted text that would retain any line breaks or spaces Within These tags it's up to you if you prefer the P tags or the pre-tags now the last thing I'm going to discuss are comments comments aren't displayed as output they're usually used as notes for yourself or for other developers you would type a left angle bracket exclamation point two dashes wherever your comment ends you would type two dashes right angle bracket this is a comment so when I save nothing appears to happen comments are used for yourself or for other developers that are looking over this document alright everybody well at this time let's go over an exercise just so that we have a solid foundation and really remember everything it'd be good practice for us we're going to create a separate HTML file that displays the lyrics of a song you like so let's create a new HTML file let's name this file lyrics dot HTML again we'll need to add this declaration doc type HTML that's a declaration that this document is an HTML5 document then we'll need a pair of HTML tags we'll need a head element and a body let's add a title to the head of our document title let's set the title to be my song lyrics then we will open this HTML file with live server my song lyrics pick a song that you like within our body tags let's add an H1 element this will be the title copy the name of your song place it within this pair of tags so that's the title add song by the name of the band or artist I'll use H3 header tags that's slightly smaller than H1 you know maybe H4 I think that'd be better I'll add a horizontal rule that's HR I'll add a pair of P tags take all of these lyrics copy them and paste them within the pair of P tags I'd like to retain the spacing let's change the P tags to pre tags for pre-formatted text that's much better let's add one line break after our horizontal rule one last thing I'm going to do within the pre-tags I'm going to add some blank lines between some of these verses there we go that's pretty cool I think we have the hang of basic HTML now in the next topic we'll discuss hyperlinks hey if you're enjoying this series so far please be sure to support me by Smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey everybody in today's topic I'm going to show you how we can create hyperlinks a hyperlink is a digital reference to data that a user can follow by clicking or tapping a button or link to create a hyperlink we will need a pair of a tags a means anchor then we'll sandwich some text between these two tags such as click me we're missing one thing what we'll need within the opening a tag is an attribute and href attribute an attribute is typically a name value pair that modifies the behavior of an element href means hypertext reference we're referencing something within the set of quotes we can list a web page or a file to link to let's begin by linking an external website like Google let's paste the URL within the href attribute save then when I click on this link it takes me to Google or some other website of your choosing based on what's within the set of quotes there are more attributes you can add as well they're optional another is Target Target equals if you set Target to be underscore blank this link will open this URL in either a new tab or a new window depending on your settings Google has opened in a new tab for me another attribute is title the title attribute displays additional information about the element as a tool tip I'll add a message goes to Google when I hover over this link we have a tooltip that states goes to Google that's an additional option too this URL is an absolute URL you can also list a relative URL So based on the last video we have an HTML file of song lyrics within our index file we will link to our lyrics file so let's create another hyperlink we'll need a pair of a tags meaning anchor we'll need some text song lyrics is good then we'll need an href attribute href equals these two files are right next to each other for a relative file path all we need is the file name lyrics dot HTML I'm going to add a line break real quick PR meaning line break then when I click on this link it takes me to my other HTML file you could add these additional attributes if you would like one last link I'll create a line break we'll create a link that begins the process of emailing someone we'll need a pair of a tags the text will be email me href attribute will be set to now to send an email type mail to colon then an email address I'll make up one test at fake.com when I click on this link we begin the process of sending an email to this email address however I'm not signed in so this is as far as it'll take me currently okay now for an exercise let's go to our lyrics HTML file open with live server let me zoom out based on the last project you should have a web page with some song lyrics that you like we'll create a hyperlink to the original video let's do that after the artist that would be right here but before the horizontal rule we'll create a pair of a tags I'll add some text or original video then you'll need to find the url for the original video for your song all right I will set the href attribute to B that URL the URL for a YouTube video so when I click on the link it now takes me to YouTube all right everybody that's a hyperlink it's a digital reference to data that a user can follow by clicking or tapping a button or link and those are hyperlinks in HTML hey everybody in today's topic I'm going to show you how we can add images to a web page using HTML so sit back relax and enjoy the show all right everybody here's how to add an image to a web page but you'll need an image to work with I have a picture of a dog I'll add that to my website folder next to my index file I have a picture of a dog to add an image we'll use a self-closing image tag then set the source equal to B the name of your image including the extension mine is dog and this is a PNG file so this picture is fairly large you can change the dimensions with the height or width attributes I'll set the height to be 200 200 pixels now the width will adjust automatically however you could change that too if you wanted if I need this image to be a perfect square I will also set the width to be 200 however this does compress the image depending on the dimensions of your original picture you may need to change the height and or width I'll set the height to be 200 though then keep the width the same it'll adjust automatically now for some reason if your image isn't displaying let's say that I get the file extension wrong I'll say that this is a JPEG while the image won't display you can add alternative text with the alt attribute the alternative text you could say anything this is a picture of a dog this image doesn't display you at least display the alternative text now the nice thing about the alt attribute is that if somebody is visually impaired and they're using a screen reader the screen reader will read this alt description just to test my screen reader I'm going to add some text before and after this image as well let's add an H1 header tag this is a cute dog then I'll add some text after I'll use an H3 header tag woof woof I'll use my screen reader this is an extension on Chrome you can download my first website this is a cute dog this is a picture of a dog woof woof the screen reader read the alternative text for this image so it is good practice if you include an image to write a brief description of the image another cool thing you can do with images is that you can't turn them into hyperlinks I will surround our image element with a pair of a tags a meaning anchor then I will set the href attribute equal to a URL I'll find the Wikipedia page for dogs all right I'll copy this URL then I will set the href attribute to be this URL when I click on this image it takes me to the Wikipedia page for dogs so yeah you can turn an image into a hyperlink another cool thing you can do too is that you can include gifs in your web page this is my gift that I'll include I'll add that to my website folder I'll include a self-closing image tag set the source equal to be the name of my image then be sure to get the file extension right this is a gif I'll set the height attribute to be maybe 200 as well height equals 200. then I'll add some alternative text alt attribute will be smiling dog gif now with a website you may have all of your images within a separate folder like this I'll go to new folder I'll create a folder named images then I will move my images to the images folder so my images are no longer being displayed we have our alternative text this is a picture of a dog and smiling dog gif with your Source attribute we're using a relative file path we need to navigate to the images folder then find the appropriate image files I'm going to precede these images with the name of the folder they are found within the images folder you may also need another forward slash for me either work let's move on to an exercise in the last few videos we were working on a web page for song lyrics Let's include some album art for my song that I picked I have a picture of the original album art that this song is found from I will move that to my website folder then I will move it to the images folder within my website folder I need a self-closing image tag set the source equal to B we need to navigate to the images folder I will list that first Images slash the name of the file for me it's album cover dot jpeg then I'll change the dimensions I will set the height equal to B 200. I'll add some alternative text alt equals album art cover then a line break maybe two then I'll turn this into a hyperlink as well I will surround our image with a pair of a tags I will set the href attribute to be the original YouTube video where you can find this song so href equals the YouTube video that I linked before so this should take me to YouTube there we are all right everybody well that's how to include an image on a web page using HTML hey how's it going everybody in today's video I'm going to show you how we can include audio in a web page using HTML you'll need some audio files to work with one place you can download some MP3 files is the YouTube audio library find some songs that you like and then you can download them let's download three for this lesson once you have your three songs let's move them to our website folder alright we are ready to begin so to include some audio we need a pair of audio tags then between the audio tags let's include a source element with the source element there is a source attribute we will set the source attribute to equal the name of an MP3 file or other audio file so let me copy the name be sure to get the file extension and then I will paste that file the file name nothing appears to happen because we don't have any controls and the song doesn't play right away too so to add some controls within the opening audio tag type controls and that's it so we can now play our song [Music] or you can mute it fast forward it rewind it set the playback speed whatever you can set your audio file to auto play but people find that annoying [Music] so you should probably not do that if we do want our song to autoplay we should at least mute it using the muted attribute so our song is playing but it's muted until we unmute it [Music] yeah [Music] we can even have our song Loop by using the loop attribute so let me play this turn up the volume a little bit fast forward to near the end and let's see if it loops and it does cool now in case your web browser doesn't support a certain audio type you can add fallbacks so let's say that we also have a wave version of our audio file I can include that as a fallback right underneath but we should also specify the type just to let the web browser know that this is an MP3 file and that this is a WAV file I'll include the type attribute I will type audio slash MPEG I will also let the web browser know that this is a WAV file audio slash wave so just in case our web browser doesn't support MP3 files I'm pretty sure that they all do nowadays we will resort to our WAV file if we have a backup of the same audio file in wave format let's include our two other audio files so again we need a pair of audio tags within the pair of audio tags we will need a source tag a source element and I will set the source to equal the name of an audio file so let's copy the name of our second audio file including the extension add some controls and there's our second song let me pause the first one [Music] let's add the last one so here's the name of my last song be sure to get the file extension we have our controls and here's my third song I feel like I'm losing my mind hey for fun let's add the name of each of these songs right before the controls I'll use a pair of paragraph tags then I will copy the name of the song and sandwich the name between the paragraph tags so that's the name of my first song let's do this again with the second song and the third so here are my three songs just to make everything a little more organized I'm going to create a music folder within my website folder to hold all of my audio files I will create a new folder I will name this music I'll place all of my audio files within the music folder so we no longer know where the location of those audio files are because we're using a relative file path I'm going to set the source attribute to be music slash the name of the file we can locate those files now so that's our first song our second song and our third song that's how to include audio files in a web page using HTML if you're enjoying the series let me know by Smashing that like button leave a random comment down below and subscribe if you'd like to become a fellow bro hey what's going on everybody today I'm going to show you how we can include a video in your web page using HTML alright let's get started everybody in this example you'll need a video file of one of a few formats you can use either an mp4 file webm or vorbis OGG I just so happen to have an mp4 file of me playing that new Zelda game Zelda tears of the Kingdom this is just some sample footage once you have your video file you're going to take it and place it right next to your index file within your website folder to include a video you'll need a pair of video tags within the opening video tag we can set a source attribute to B either the relative file path or the absolute file path of that video These two files are right next to each other I only need the file name my file is zelda.mp4 and there's my video but it's humongous we can change the height and or the width let's change the width to be 500 pixels that's a good size the height will adjust accordingly or vice versa if I were to change the height to be 500 then the width is going to adjust accordingly but let's keep it as 500. here's our video but there's no way to play it we'll need to add a set of controls with the controls attribute now we can play the video to have this video autoplay when the page loads you can set the autoplay property it should play automatically but if it is set to auto play you should at least mute it because people can find it annoying especially if this video is loud let's add the muted attribute so now it auto plays and it's muted to have this video Loop when it's done let me fast forward to the end I can add the loop attribute now it should Loop when it reaches the end right about here yeah and it's back to the beginning again just in case somebody's web browser doesn't support this video file you can add backups I also happen to have a webm version of the same video I'll place it within my website folder then within the pair of video tags we will add a source element take our source attribute cut it then paste it within the source element you can keep all the attributes within the opening video tag you should also tell the web browser what type of video file this is video slash MP4 now to include a backup we just need to use the source element again as a backup in case a web browser can't play my mp4 file we'll instead use the webm version zelda.web M the type is web m all right so let me delete the MP4 version to test it let's save and reload everything and now my webm version is playing you can't really tell the difference you also have the capability of turning this video into a hyperlink I will surround my video element with a pair of a tags then I will set the href attribute to some URL I'll set it to be the Wikipedia page for Zelda feel free to pick any page of your choosing with the href attribute I will paste that URL now when I click on this video it should bring me to the Legend of Zelda Wikipedia page to open this link I get it link because it's Legend of Zelda anyways to open this link in a new tab I can set the target attribute to be underscore blank then it should open in a new tab which it does all right everybody so that's how to include a video in your web page using HTML hey everybody today I'm going to show you how we can create a fabicon for your web page to create a favicon you'll need an image to work with here's mine I would recommend an image that's at least 96 by 96 pixels in width and height once you have your image we'll save the image to our website folder I'll right click save image as find my website folder let's rename this image favicon for a favicon most modern web browsers accept Ico PNG GIF JPEG and SVG image files so let's save our image my image is now within my website folder if you do need to make any graphical changes to your image you can always use a program like paint this is a built-in program with most Windows operating systems I'm pretty sure Mac and Linux have something like it too if I do need to change the dimensions on my image I can open it let's find that image it's within my website folder and here it is if you do need to change the size of your image you can go to resize you can either resize or skew your image my image is at least 96 pixels it's 176 for both the width and the height then you'll want to save your image afterwards to that website folder once you have your image we're going to create a link tag the link is self-closing the link tag specifies the relationship between this document and an external source the relationship attribute will be icon because well we're adding an icon to our web page the type will equal image slash the type of your file so I have a JPEG I'll list jpg then we need an href attribute that will be the relative file location my image is within my website folder I just have to list the file name favicon.jpg let's take a look refresh everything and here is my favicon typically with the web page I like to place all of my images within one folder within my website folder I'll create a new folder named images and I'll place my favicon within my images folder so we no longer can locate that favicon I need to change the relative file path of the favicon because it's now within a separate folder preceding the name of my file I will list the folder that it's in Images slash favicon and there it is again all right everybody that's how to create a fabicon fear web page using HTML hey everybody today I will explain text formatting in html text formatting gifs text special emphasis we can create bold text italic text underline text so on and so forth let's begin let's create a pair of paragraph tags and between this first set of paragraph tags let's type this is normal text let's copy this line of markup and then paste it like 10 times okay I lost count whatever text you would like to add emphasis to you surround that with a pair of tags but there's different pairs of tags that have different effects for a bold effect we use a pair of B tags let's surround normal in the second line with B then change normal to the word bold this is bold text I is for italic so let's surround the next line with I this is italic text then underlined is u this is underlined text deleted text we would type d e l this is deleted text big b-i-g this is big text so this text is a little bit bigger than the other text surrounding it then they're small this is small text subscript type sub this is sub script text I misspelled that there the subscript text is smaller and it's just underneath the other text surrounding it then their superscript type sup like you're saying Sup like what's up this is superscript text then you have mono spaced which is TT this is monospaced text oops I forgot to close it this is a good example of why you should add closing tags because the markup will Cascade through the rest of your document so be sure to close any opening tags all right then the last one is Mark creates a highlight effect kind of like you're taking a highlighter and highlighting some text you can use CSS to change the color too I haven't really discussed CSS yet but to add a little bit of inline CSS within the opening mark tag take the style attribute set that equal to take the background Dash color colon then we can pick a color how about light green I think that would look good and our highlight effect is now light green or pick some other color of your choosing we'll discuss colors more when we reach CSS all right everybody so that is text formatting text formatting gives text special emphasis you can create text that is bold italic underline deleted big small subscript superscript model space and highlighted text and well that is text formatting in HTML hey how's it going everybody today I need to explain the span and div tags in HTML the span tag is an inline container to group elements for styling purposes the div tag it's very similar except it's a block container to group elements for styling purposes here's an example let's create two H1 titles this is a span title then close it let's copy this line of markup then paste it the second line will be this is a div title I'm going to enclose my first sentence with a pair of span tags so we need an opening span tag and a closing span tag somewhere all right with this set of span tags we are enclosing this text within a container it's an inline container we can apply some CSS styling to this sentence whatever is sandwiched between the pair of span tags let's change the background color of the title I will set the style attribute to equal background Dash color then pick a color how about red then a semicolon there so the background of my title is red but you know what that red is a little bright let's do tomato I think that's a better color whatever is enclosed with a pair of span tags we can apply some inline CSS styling too now with div this creates a block level container so I will surround this sentence with a pair of div tags div meaning division let's apply that same styling I'll copy my style attribute paste it let's change the color to B maybe cyan all right here we are this is a title using span this is a title using div span is an inline container div is a block level container it takes the entire width of my document you can see that this is all blue let's create a pair of paragraph tags this is a span sentence then close it let's copy this paragraph paste it again then change the second sentence to div all right let's enclose our first sentence with a pair of span tags all right I will set the style to be red well tomato tomato color technically it's kind of like we're highlighting the text much like the mark tags in the last topic let's copy this tag change span to div then the color how about cyan and then we need to close the div tag there we are all right now let's create two large paragraphs we need a pair of paragraph tags in vs code to generate some sample text you can type lorem then tab so I will copy this line paste it again let's say after the first sentence I would like to add a background color so right here I will add a Spam tag an opening span tag then where would I like to close it let's do so before the closing paragraph tag then I will change the background color all right we have highlighted the second sentence let's do this with div tags now with our next paragraph let's create an opening div tag then we'll need to close it somewhere let's close it before the closing paragraph tag and then I will change the background color within the opening div tag I will set the background color to be cyan what we have done is created a block level element for the second sentence within our paragraph basically speaking we can use the span and div tags to group together HTML for styling purposes span is an inline container div is a block level container we'll be using these more when we reach CSS and well everybody those are the span and div tags in HTML hey everybody today I'm going to explain how we can create different lists in HTML there's three different types of lists that we'll discuss today unordered ordered and description lists for an unordered list think of maybe a grocery list the order of items doesn't matter to create an unordered list you need a pair of UL tags UL meaning unordered list then between the pair of UL tags you need to list items Li means a list item so we have a little bullet point let's create a grocery shopping list maybe we need to buy milk let's create another list item we need another pair of list item tags let's buy eggs what else can we buy milk eggs bread and what about coffee there we are here's our unordered list each list item is bulleted hey let's add a title to this list preceding the pair of UL tags let's use maybe an H4 header tag let's say groceries here are the groceries I want to buy the order doesn't matter so we're using an unordered list now you can create nested lists too let's change coffee to Coffee supplies then after this list item we'll create another unordered list then we need more list items so for coffee supplies of course we would need coffee or maybe coffee beans now we have a hollow bullet point maybe you need some creamer for your coffee and or sugar so that's how to create a nested list within a list within your list you can create another list now let's go over order lists to create an ordered list you need a pair of ol tags meaning ordered list then you need some list items what about a to-do list so we need a list item so number one that's first in our list we need to eat breakfast I'm going to add a title to so let's use a pair of H4 header tags this will be my two do list one we need to eat breakfast two go to school or go to class so that's number two number three after class you have to walk your dog then four maybe you have to go to work all right that is an ordered list use a pair of ol tags then lastly we have a description list this one's a little more tricky a description list is made of key value pairs you have a term and a definition to create a description list you need a pair of DL tags meaning description list we need some terms to create a term you type DT then close it so I play a lot of Dungeons and Dragons let's create some definitions for some mythological creatures like a dragon so that's my term let's create a few other terms dragon v-nix vampire and werewolf so these are the terms underneath each term we can add a definition we'll need a pair of DD tags for description definition I'm gonna google each of these creatures then just paste the definition that I find so for a dragon I'm just gonna copy this definition then paste it within the DD tags here's my term and here's my definition of that term Dragon a mythical monster resembling a giant reptile sometimes shown as having wings let's do this with our other definition terms as well next we have Phoenix definition an immortal bird associated with Greek mythology we'll need a pair of DD tags add your definition then close it here's my second description definition then we need vampire and werewolf vampire creature definition let's copy this create another pair of DD tags then paste that definition here's the definition for vampire then lastly werewolf werewolf creature definition an individual that can shape shift into a wolf so DD close it add that definition and there's our definition for werewolf so that's a description list in a way it's made of key value pairs you have a term which is represented with description term then a description with DD description definition I forgot to add a title to this list let's do that I'll use a pair of H4 header tags let's make the title mythical creatures not bad let's add a background color because well we can I'll add a background color to the opening DL tag so style equals background Dash color what's a good color for this what about light green I haven't discussed borders yet but to add a border you can type border colon then a size maybe two pixels then there's different borders but let's go with solid for now here's a border around my list alright everybody so that's how to create different lists in HTML we have unordered lists ordered lists and description lists you can style your lists as well but we haven't really discussed much CSS yet but yeah those are different lists in HTML hey everybody today I'm going to show you how we can create a table using HTML let's create a table of store hours for a fictional business I'll create a title using H3 header tags the title will be store hours what are the hours of operation for our store to create a table we need a pair of table tags for the first row we need a pair of TR tags meaning table row so the first row is going to be filled with table headers how many columns do we have well if we have a table of store hours they're seven days in a week we will need seven pairs of table header tags so let's copy and paste these tags six additional times for a total of seven one two three four five six seven alright now for the First Column the header will be Sunday we have Sunday then Monday Tuesday Wednesday Thursday Friday Saturday so here's my first row the first row is your table headers add one header for each column in your table for another row we need another pair of TR tags meaning table row so for my second row I'll include table data we need TD tags so we'll need a total of seven on Sunday our fictional store is going to be closed I'll type closed as we can see that this data is underneath this header for the second row Monday the hours will be nine to five let's apply that for the other days besides Saturday Monday through Friday the store is open between nine to five Saturday will be reduced hours ten to two alright not too bad to align the table data what you're going to do is within the table row take the Align attribute set this to Center or otherwise if you would like to write justify it you would type right but let's stick with Center let's align the first row as well we can also add a border within the opening table tag set border equal to zero that's for no border then increase the number depending on the thickness that you want so one will give us a border that is this thick two and three let's stick with one let me move this a little these table cells aren't exactly the same size the word Wednesday has a lot of characters within each of these header tags I will set the width to be maybe 100. this column is a little bit larger now let's copy the width and make each header have a width of 100. okay this table is All Uniform now but if we were to shrink this window the cells would be compressed okay let's change the background color let's begin with the table I will set the style attribute to be a CSS property let's set the background Dash color to be black the whole table is black now so let's change the color for the headers and I'm just going to copy this style attribute let's change the first row to have a color of light blue we can at least see the text now and then for the second row let's pick a different color I think this color would be good Alice blue yeah that's not too bad if you need additional rows for your table use another set of TR tags meaning table row then you can add another set of data all right everybody that is how to create a table using HTML hello again everybody today I'm going to show you how we can create a button using HTML and a little CSS to create a button we need a pair of button tags and here's our button it's really small and it doesn't do anything let's add some text between the button tags let's add some text like click me so here's our button but it's fairly small we can change the size of this button by changing the font size we will need to access the style attribute then set the font size property to a larger font size so font Dash size 25 pixels is good the size of our button will adjust accordingly let's change the background color separate each of these CSS properties with a semicolon let's change the background Dash color to be Gray so that's how to change the background color to change the font color type color colon then some color like light blue you can round the corners by setting a border radius so that's another CSS property border Dash radius colon let's begin with five that will Round the Corner slightly you can increase the amount of pixels for a more rounded border let's try 25. that's not too bad so this button currently doesn't do anything what I'm going to do is turn this button into a hyperlink when we click on the button it will take us to maybe Google we need to surround our button with a pair of a tags I will set the href attribute equal to some URL like Google so when I click on the button it takes me to Google or if we had another HTML file we can go there too I'll create a new HTML file named maybe page two page2.html let's generate some HTML in vs code to do that type an exclamation point then tab all I'm going to add to page 2 is an H1 header tag with the title of this is page number two I'll set the href attribute to B the name of that HTML file page2.html page2.html when I click on the button it brings me to my second page I haven't discussed JavaScript yet but we can have a button execute some JavaScript code this part of the lesson is outside the scope of what I would normally teach at this point in time but if you're interested here's a little bit of JavaScript again it's not necessary to learn this at this level if you would like to execute some JavaScript code using a button we need a pair of script tags for JavaScript within this pair of script Tags I'm going to define a function function you can come up with some function name this function will do something then you need a set of parentheses then a set of curly braces buttons have an on click attribute we can have the button do something if it's interacted with the on click attribute is going to be the name of my function do something when we click on the button execute this function what do we want to do I'll change some text on the screen but we'll need some sample text to work with I'll create a pair of paragraph tags let's say hello within our JavaScript function we'll change the text of whatever's between these two paragraph tags but we need an ID there's an ID attribute I'll name this text maybe greeting so when we click on this function I would like to change the text of my greeting within the function we can do that with document dot get element by ID within the set of parentheses the ID is greeting follow this with DOT enter HTML then we can set the SQL to some new value let's set the new value to be good bye now when I click on the button it changes our text so that's a button everybody you need a pair of button tags you can apply some CSS styling I haven't really discussed CSS yet so we did inline CSS but if you have these many properties I would recommend a style sheet which we'll cover later to make your button bigger you can change the font size you could have your button bring you to another HTML page or even execute some JavaScript code and well everybody that's how to create a button using HTML hello again friends today I'm going to explain how we can create a form using HTML to create a form we'll need a pair of form tags the opening form tag has a few attributes we need to fill in first is an action attribute after submitting our form to what location do we want to send our form to form submission is done with the back end language such as PHP you might see a file name such as index.php or action page or something of that nature within your action attribute we're not actually going to do a form submission but just be aware that the action attribute sends data to this location to this file the file listed really can be anything but that's outside the scope of this lesson you'll also see a method the method attribute specifies if this is a get request or a post request post is used for confidential information such as a username and a password get is for insensitive data basically again this is outside the scope of HTML at this point in time if we have a form and we're sending sensitive data we should use post now let's create some elements within our form the first thing we'll create is a text box we need a self-closing input tag so here's our text box by default the type is a text box but we can specify that with the type so type text there's other different types like passwords emails telephone numbers we'll cover that pretty soon we have a text box but if a user sees this text box they probably don't know what they should enter in let's add a label to the text box preceding my input tag I will create a pair of label tags what do we want our label to say maybe username we're telling the user hey we want you to enter in your username if somebody is using a screen reader if they're visually impaired we should add a four attribute what is this for well this is for my username another benefit of adding the four attribute to a label when you click on the label your cursor will move to the text box but we need a matching ID attribute within the input tag so the ID is going to be the same as the four attribute then when I click on the label our cursor moves to the text box there are a few other attributes you might be interested in as well but before we get to that we should create a submit button to submit our data at the end of our form we'll create an input tag the type will be submit it's a submit button but it currently doesn't do anything we're not using a back-end language to submit form data to there are some useful attributes for text boxes within the input element for text box let's add the required attribute in order to submit this form we need to type in a password if I just leave it blank then hit submit we have this little prompt please fill out this field I can't submit this form until I type in something then I can submit it you could set a minimum and maximum length that's another attribute Min length equals then some length the minimum length for a username is six characters let's type in just three or some other number below six submit please lengthen this text to six characters or more I'll come up with a different username then submit and that appears to work you also have the capability of setting a maximum length with the max length attribute let's make the max length 15 characters so let's type in a username I'll add a bunch of characters afterwards so I can type in any more than 15 characters there's a maximum to reset your form there's a reset button let's copy this input tag paste it then change type to reset so here's my reset button I'll type in a username press reset then we can reset the data for our form but afterwards I'm just going to add a break line just to put the submit button on a new line with text boxes you can add a placeholder to give the user an idea of what we want them to enter in and in what format I'm going to add a place holder attribute what do we want our placeholder to be um I don't know SpongeBob SquarePants or maybe just SpongeBob so the placeholder is faded it gives a hint to the user as to the format in which they should enter in information if I were to click on this text box the hint is still there until we type in something okay let's cover passwords to create a password we'll use an input tag the type is going to be a password we should probably add a label to let the user know that we would like a password so I'm just going to copy the label that we have for our username the four attribute of our label should match the ID attribute of our input tag so the ID is going to be password the for attribute of the label will be password and then change the text to there we are I'm just going to change one thing after my password I'm going to add a break line so I will add that here all right so with the password the text is hidden I can type in a bunch of characters and you can't see it you could add some of these attributes as well like a minimum length maximum length and the required attribute so I'll copy those and paste them within the input tag from my password I can type in a username if I attempt to submit this form data without a password we have that prompt please fill out this field that's because we have the required attribute set there's also a minimum length and a maximum length set too I'm required to type in a password that's at least six characters long right now this is only five anything between 6 and 15 is okay for the rest of this demonstration I'm going to get rid of these attributes let's cover email next I'll create a label first this will be for email the text will be email then we'll need a corresponding input tag input type equals email for the ID I will also set that to be email I'll add a line break after then I'll add a placeholder s Square Pants at gmail.com again the placeholders letting the user know the format in which they should type in their information if I were to type in some text but we're missing that at sign hold on let me type in something real quick all right click submit we have a prompt please include an at sign in the email address because we're looking for a valid email address format that's input for email let's copy our label for phone the text will be phone number again we need an input tag the type will be Tel for telephone we need a matching ID that matches the four attribute phone I'll add a break element to the end we can type in a phone number I'll add a placeholder too placeholder equals with American telephone numbers you have three digits such as one two three dash then another three digits like four five six dash then four digits seven eight nine zero So currently we can type in any numbers then submit them uh hold on I need a username we can limit the format in which a user can type in some numbers for a phone number we would need a pattern attribute for the digits 0 through 9 within a set of straight brackets you would type 0-9 then how many digits do you allow afterwards three then we'll need a dash that's required add a dash then another three digits zero through nine zero Dash nine then another three digits Dash number zero through nine let me move this in a little bit then I would like four digits so now our phone number needs to be in this format three digits Dash three digits Dash four digits one two three dash four five six seven eight nine zero hold on I'm going to get rid of this required attribute just because it's kind of annoying right now one two three-456-7890 there that seems to work but if I were to type in a random amount of numbers well then we don't meet this pattern matching this pattern is required in order to submit this data all right then we have dates like a birth date we'll need a label this will be for a birth date four b day input type equals date the ID should match the four attribute of the label then I'll add a break element so with dates there's an interactive calendar to select a date pretty simple then we have a number element a user is going to enter in a quantity like they're buying something like how many do you want let's change the text to quantity for quantity we need an input element the type will be number ID equals quantity then I'll add a break so here's our quantity we can use these arrows to go up or down however normally you can go into negative numbers we can set a minimum and a maximum with the Min and Max attributes so the minimum will be zero we don't want to go below zero the max I think 99 is good so we can't go below zero but we can go all the way to 99 and no further you can add a default value with the value attribute I'll set the default to be one that is for number input it's good if you need a quantity of something all right then radio buttons radio buttons are a little tricky with radio buttons you can only select one from a group I think a good label will be for a title are you a mister a miss a doctor whatever like what's your title so title for title we have our title so far then we'll need individual buttons I'll create a label for Mr Miss and doctor Mr Miss in the U.S doctor is p h d the four attribute will be Mr for Mr Miss for Miss then p h d for PhD I'm gonna get rid of these colons so after each label we'll create a radio button input type equals radio the ID will match the four attribute of the label we have Mr then we'll want to add a value to when we submit this form so mister okay let's copy this input then apply it to miss add PhD so type radio ID will be Miss value Miss then we have PhD ID will be PhD value PhD so we have three radio buttons um let me just add a break afterwards with a group of radio buttons you should only be able to select one however we can select all three that's because we need to add all of these radio buttons to the same group we're going to add a name attribute we'll name this attribute title whichever radio buttons you would like in the same group they need to share the same title now we only can select one those are radio buttons okay let's create a drop down menu this will be for a payment like what kind of card are you paying with is it a Visa card MasterCard gift card four payment instead of an input element we're going to be using a pair of Select tags for a select element then add a break afterwards so we have a drop down menu but there's no options we will add option elements within our select element so these have opening and closing tags let's create three options an option for Visa Mastercard then gift card for option one the value will be Visa the text will be Visa so we have one option let's add two more value MasterCard the text will be MasterCard then a gift card value equals gift card the text will be gift card then I forgot to add an ID to the opening select element ID equals payment there we are all right so that is a drop down menu you need a pair of Select tags within the select tags you can create option tags then we have a check box again let's create a label this will be for a check box I think a good use of a checkbox will be a subscribe button the four attribute will be subscribed the text will be subscribe we'll need an input element input type equals check box the ID will match the four attribute of the label then add a break element after I can subscribe by checking the check box or by clicking on the label this one's a little tricky we're going to create a text area again we'll need a label the text next to the text area will be comment for comment we'll create a pair of text area tags so we have a text area the ID of the text area will match the four attribute of the label so comment you can change the dimensions of your text box by adjusting the rows and columns I would like three rows rows equals three columns that will be 25. so now we have different dimensions for our comment you can type in anything you suck bro code that's how to create a text area for a file submission again we'll create a label we're kind of following the same pattern file for file again we need an input tag input type equals file the ID will match the for attribute of the label file then I'll add a break so now we can choose a file however by default we can accept all files to limit the type of file that you're looking for there is an accept attribute what file types will we accept Let's do an image for a PNG that would be image slash PNG when I choose a file we're looking for a PNG now you can add more than one file type each file type is comma separated let's also look for any jpegs so that would be jpeg so now we're looking for a bunch of files anything within this range now if you're sending a large amount of data there's one change we'll make to the form we're going to change the encryption type within the opening form tag let's say we're sending an image and the image is a large file so we will set the encryption type equal to B multi part slash form data in simple terms when we send our large amount of data we'll break it into multiple parts then when all of that data is received those multiple parts will be reassembled it's a little more complicated than that but at this level that's all you need to know so if you're sending a large file such as an image I would recommend changing the encryption type to multi-part slash form data all right everybody so that's how to create a very basic form using HTML it really doesn't look too pretty right now you can always style it with CSS which we'll be covering very soon and well yeah that's how to create a form using HTML hello again friends it's me again today I will show you how we can create both a header and a footer for your web page header and footer elements are both semantic tags they describe their meaning to both the web browser and the developer they help organize your content and CSS properties can easily be applied to anything within these containers headers are used for introductory content at the top of your page such as a title a subtitle a logo a navigation bar but we haven't really discussed navigation bars yet Footers act as a container for holding concluding content at the bottom of your page such as an author a copyright or some contact information like a phone number or email alright so let's begin to create a header within our body we need a pair of header tags then for a footer you need a pair of footer tags personally what I like to do between the header and footer tags I'll create a pair of main tags for all of the main content within our web page it helps with organization we'll begin with the header though the header element is a container for holding introductory content at the top of our page this is where you may see a title like an H1 header element for our H1 header I think welcome to pick your name or your business or organization I'll just use my YouTube channel name a header is a good container to hold the title for your web page you could include a logo or a navigation bar navigation bars are a little tricky we do need to know a little bit more CSS for navigation bars but let's include some hyperlinks and make like a really basic navigation bar okay href equals I won't set a location it's not really necessary for this example we'll just have a hyperlink that goes nowhere so we have home let's create three more hyperlinks home about us products and contact us the header of your document it also tends to be a good place to hold navigation links to then to make this a little more fancy I'm going to add a horizontal rule with a self-closing HR tag okay that's not bad another use of header and footer elements is that it makes CSS styling a little bit easier I haven't yet shown how we can apply CSS style sheets we're going to use a little bit of inline CSS all I'll do is change the background Dash color to be whatever color you want I'll pick medium purple anything within the header I would like to change the background color to purple or you could change the font or the font size anything else it's very helpful to put your content within a container So within my main section I'll include an image I do have one ready feel free to follow along if you want within my main element let's begin with the title for the main content I'm going to use a smaller heading like H4 what would be a good title for the main content check out these cool moves maybe I'll use a colon I'll include an image we need a self-closing image tag The Source will equal the name of my file including the extension and it is good practice to add some alternative text profile pic is good so there's my image then I'll add some text within a paragraph we need a pair of P tags I'll generate some sample text in vs code you can type lorem then tab and here are some sample text so that is the main content of my page lastly let's work on the footer the footer is a container for holding concluding content at the bottom of your page I'll begin with a horizontal rule because I think that looks good let's include some information about the author author colon type in your name I'll add a line break after so we have author then a copyright symbol using HTML to include the copyright symbol you can Type ampersand copy semicolon so we have a copyright symbol I'll add the text copy right reserved then add a break then I'll add an email this will be a link we need an anchor tag set the href attribute to be mail to colon then an email address I'll make one up bro code at fake.com close the anchor tag then I need some text bro code at fake.com feel free to use your own email I'll make my email a little bit smaller by using a pair of small tags so I enclose our hyperlink with small there we are and I'll change the background color to with the style attribute within the opening footer tag I will paste that style attribute I'll pick the same color of medium purple alright everybody so those are headers and Footers they help organize your content as well as make applying CSS a little bit easier because you can Target everything within the header or footer elements and those are headers and Footers in HTML hey hello again friends today I'm going to explain how we can get started working with CSS so sit back relax and enjoy the show CSS is an acronym for cascading style sheets we're able to apply CSS properties to color style or otherwise decorate our HTML markup there's three different ways in which we can apply CSS inline internal and external we'll begin with inline suppose we have an H1 header tag with the title of this is my website let's create a few paragraphs we need a pair of paragraph tags we need some sample text I'll type lorem then tab I'll copy this paragraph then paste three additional paragraphs so we have a total of four to apply some CSS styling to one of these elements for example the body of our document we'll select the opening tag set the style attribute to B we can list one or a few CSS properties let's change the background Dash color of our body to be black the background is now black let's change the font color of the H1 heading style equals color that's for the font color let's pick White then we'll do this for the paragraphs this is an example of inline CSS within the opening tag of one of your elements you can change the style attribute then list one of many CSS properties another method of applying CSS is internal as in an internal style sheet I'll undo these style attributes to apply an internal CSS style sheet within the head of our document we need a pair of style tags whatever elements you would like to apply CSS to you would list that within the style tags if I would like to Target the body of my document I would type body then a set of curly braces list your properties between the set of curly braces let's change the background Dash color of the body of my document to be black let's change the H1 heading H1 curly braces then I will list some CSS properties color white then let's change the paragraphs P curly braces we're selecting all of the paragraphs color white so that's an internal style sheet within the head of your document you need a pair of style tags list the element you would like to select add a set of curly braces then list one or many CSS properties let's remove the internal style sheet now we'll create an external style sheet external style sheets are probably the most popular method because we can make a style sheet that's reusable to create an external style sheet within our website folder we're going to create a new document I'll name this document style dot CSS we need to link this style sheet to our HTML file we can do that within the opening head tag by using a link tag we need to set the relationship attribute to b style sheet we're letting the web browser know that we're linking a style sheet then we need an href attribute set to the relative file path of our style sheet that are right next to each other I only need the file name including the extension style dot CSS we have now linked this style sheet to this HTML file using this external style sheet we can select specific elements from our HTML file and apply CSS properties we will select the body of our document body curly braces I would like to change the background Dash color to be black let's change the color of the H1 header tag color colon White then the paragraphs P curly Braces Color colon White if you do need to apply CSS properties to one specific element such as this first paragraph We can create an ID within the opening tag ID equals think of some unique name I'll name the first paragraph P1 let's do this with the other paragraphs the second paragraph will be P2 the third will be P3 the fourth will be P4 I'm going to delete these lines to select an element by ID you'll use a hashtag then the ID so P1 what would I like the color to be let's change the color to red I'll select another ID P2 curly braces I'll change the color to be orange P3 color will be yellow P4 color will be green you can also apply CSS Properties by a Class A group within each of these paragraph tags I will add the attribute of class the first paragraph will be odd it's an odd number the second paragraph will be even the third paragraph will be odd the fourth paragraph will be even to apply any CSS to a class Guild type dot then the name of the class any elements within the odd class let's change the color to be red the first and the third paragraphs are both red because they belong to the odd class we apply to the color red to anything within the odd class by using dot then the name of the class let's change any elements within the even class to be blue if we're selecting a class we type dot the name of the class even in this case we'll change the color to be blue the second paragraph is blue along with the fourth they're both part of the even class another nice thing about external style sheets is that you can apply them to more than one HTML file let's create a second HTML file I'll name the second file page2.html to generate some boilerplate HTML within vs code you can type exclamation point then tab I'll open page 2 with live server this is page two I'm just going to copy all of this and make a few changes paste everything within page two let's change the title to be this is page two and we have three paragraphs this time we have our index file and page two to link an external style sheet to page two again we need that link tag set the relationship attribute to B style sheet then the href attribute will be the relative file path they're right next to each other I only need the file name style.css now when I save and refresh the page we have applied all of our CSS from the style sheet to page2.html external style sheets are reusable so they're pretty nice and convenient alright everybody so that is an introduction to CSS with CSS you can change the font the color add decorations we'll get more into that soon you can apply CSS inline with an internal style sheet or external style sheet and that is an introduction to CSS foreign CSS colors to our website so sit back relax and enjoy the show we'll need four paragraphs to begin with I'll name the first paragraph P1 the second will be P2 followed by P3 then P4 we can change the background color of an element or the font color let's begin with the background color of the body of our document within our external style sheet I will select our body element I'll change the background color property to be now with colors we can use names we can use RGB values hexadecimal values or hsl values for the first example we'll use named colors there are multiple sites in which you can find named colors let's go with this one slate gray background color slate gray save your changes and there you go the background color is now slate gray let's change the font color of our P1 paragraph I will select the ID of P1 I will change the color that's the font color to be do they have tomato yes there is for P1 let's change the color to be tomato because I like tomatoes those are named colors another option is RGB values for paragraph two we will set the color to be a set of RGB values RGB then a set of parentheses R meaning red G meaning green B meaning blue I would recommend looking up a Color Picker for this I would like a light bluish color so let's select uh that's good you'll find a set of three values for RGB these values range from 0 to 255. we will paste those three values within the set of parentheses and there's that blue color let's do this with the background color too let's change the background color from a named color to RGB values RGB parentheses let's go with whatever color this is 41 41 41. and there's that new color then we have hexadecimal values for P3 we will change the color to B some hex value let's go with a green color that's decent hexadecimal values are a combination of numbers and letters the letters range from a to F we'll copy this hex value then paste it hex values with CSS should start with a hashtag and there's that green color let's change the background color again let's go with the lighter color this time 54 54 54. there we are okay lastly we have hsl values or P4 color colon now if you're using vs code here's a little trick we can pull up a Color Picker let's type a color like black click on the box and there's a Color Picker that's built in for hsl we can click the top bar here H meaning Hue s meaning saturation l meaning lightness let's go with the purple color we have one value then two percentages let's change the background color again using hsl I'll pick something a little bit darker that's good all right everybody so in conclusion with CSS colors you can pick either color names RGB values hexadecimal values or hsl values through the remainder of the series we'll be using hsl and well everybody that's an introduction to CSS colors hey how's it going everybody in today's video I'm going to show you everything you need to know to get started working with fonts and Google fonts in CSS so sit back relax and enjoy the show alright let's get started everybody we will need an H1 element why don't you go ahead and type in your name if your full name is pretty long just use your first name I guess and we'll need a paragraph to generate some text and vs code you can type lorem then hit tab that is good enough for now to change the font style we will go to our CSS style sheet I'll select our H1 element to change the font we can set the font family property then pick a font I would recommend a Sans serif font serifs are these little projections on each character after each brush stroke Sans serif fonts don't have these projections Sans serif fonts are easier to read on a monitor or mobile device I'm going to pick the Sans serif font of verdana now not all fonts are universally accepted by all web browsers for some reason if we can't display verdana it's good practice to have a fallback font one that's web safe so to add a fallback after your primary font separate each font with a comma let's pick Ariel if a web browser can't display verdana the next available font is Ariel that's why you may see two or three fonts listed for a font family they're all fallbacks let's change our paragraph element I will set the font family to be lucida console if the font name contains any spaces you can just place the font name within a set of quotes for a fallback I'll use Courier new if we can't display the first font we will use the backup font now to change the font size there is a font size property normally it's 16. but you can adjust that number here's 18. here's 14. here's one it's really tiny you can barely even read it like at all another unit of measurement is em think of em as the standard one em means one hundred percent it's the normal size 1.1 em is 110 1.5 is 150 percent 0.5 is 50 percent you may see either pixels or em as a unit of measurement for the font size let's stick with one em you can change the font weight normally this is normal you can change that to bold if you so choose there's also font style again it's normally well normal you can change that to italic that's enough for basic fonts now I would like to introduce Google fonts head to this website fonts.google.com this website is free to use find two fonts that you like you can also narrow down your search too for example I do not want any serif fonts because they're difficult to read on a monitor I'll just use these two for convenience I'm going to open these in a new tab all right we have Roboto and open Sans I'm going to select one of these fonts I'll go with 400 regular I'll press the plus sign next to this font and we'll do so with our second font I'll go with light 300. to use these fonts we need to link our HTML file with the style sheet we can access that style sheet by going to view selected families be sure that this radio button is selected for link then we will copy this link within our HTML file within the head element I will paste that link we now have access to those two fonts my first font was Roboto my second font I already forgot the name of it open Sans and there we go that's how to link to the Google fonts API now if you do prefer these fonts can be loaded from either a remote server or locally installed on a user's computer for convenience I'm going to create a new folder within my website folder named fonts then heading back to Google fonts view selected families I will download all once we have our file it's a zip folder I'm going to unzip it we are looking for these ttf files they look something like this all we need to do is drag and drop these ttf files into our fonts folder I forgot which one I used I think it was a Roboto light these fonts are available locally we no longer need to link to the Google fonts API we can delete that link so now what we need to do is go to our style sheet and create a font face rule we'll begin with the first font at the top of our style sheet type at font Dash face curly braces we will set the source attribute to be a URL then add a set of parentheses the URL is going to contain the relative file path to one of these fonts I would like Roboto so I'm going to copy the file name this is within the fonts folder I'll place that first then paste the name of that file then a semicolon at the end I'm also going to set the font family property then I can come up with the name for this font I can keep it the same or change it I'll keep it the same though this font shall be known as Roboto light for my H1 element I will change that to B Roboto light that has appeared to work even though we're not linked to the Google fonts API let's add another font face rule we will use our second font fonts slash whatever the heck is listed here I'm going to rename this this font shall be known as open Sans so we need to change the font for our paragraph to that new font there we are all right everybody so that's a few different ways in which you can work with fonts in CSS hey how's it going everybody in today's video I'm going to explain borders in CSS we'll need some sample elements to work with I recommend creating an H1 header tag type in maybe your name and a paragraph we'll need to pair paragraph tags I'll generate some text by typing lorem then hitting tab let's go to our CSS style sheet let's add a border around our H1 element H1 curly braces we can select a border Style with the Border Dash style property first we have solid our border is a solid line there is dashed we have a dashed line dotted double for a double border Groove Ridge inset out set or none if something has a border naturally you can remove it let's pick a solid border you can change the width of the border with the Border width property border Dash width by default it's one let's increase that to two or even three four five border width is for the Border thickness I think three would be good for this example you can change the color with the Border color property then pick a color I'll use the built-in Color Picker and use hsl values let's go with a purple color something like that's good you can even round the corners with the Border radius property border Dash radius the higher the number in pixels the more rounded the corners are going to be that's five this is ten fifteen 20. okay just out of curiosity what if we do like 100 okay it seems like there's a maximum you can only round at the corner so far so it looks like the max is 20. all right there's also a shorthand syntax in place of listing three different properties for the style width and color we can do that all at once let's eliminate these three lines we'll use shorthand syntax for the Border I would like three pixels solid then I'll list a color and use the Color Picker again I would like purple I don't quite remember what we had but it was something like that yeah that is the shorthand syntax you type border the Border width the Border style then the Border color but border radius is still a separate property let's add a border to our paragraph now we will select the P tag there is directional shorthand syntax if you want just one of the borders let's begin with the bottom border Dash bottom then we can list a border with border style then a color and this would only apply to the bottom border of our paragraph let's go with three pixels solid then red but I'm going to pick a more specific kind of red there we go so that is border bottom we're only applying a border to the bottom of our element then there's border top border Dash top let's go with three pixels solid again then a color I'll go with yellow there we are border left three pixels let's try dotted this time then orange that's good then border right border Dash right three pixels dotted again then I will pick Green maybe like a light green there we are then we'll set the Border radius as well this would apply for all of the borders let's try 10. not bad alright everybody that is how to create CSS borders hey everybody today I'm going to show you how we can create text shadows and box Shadows we'll need some sample text to work with I'll use an H1 element type in your name and we will need a div element we will eventually create a box I'll give this div an ID of box one good enough I would like to give this H1 element a shadow I will select my H1 element I will set the text Shadow property to be we need two numbers a horizontal offset and a vertical offset let's do one pixel and one pixel we have an offset to the right of one and down by one if I were to increase the horizontal offset let's change this to 2 while the shadow is moving more to the right let's try five 10 50. the first number is for the horizontal offset let's change that to three the second number is for the vertical offset if I change that to five well the text is going more downwards 50 would be this all right let's keep that at three though you could add a third number for a blur here's a one pixel blur two three four five if this is a really large number like 100 you can't even see the shadow anymore let's stick with five that's a decent amount you can even change the color too let's pick a red color that's good you can add more than one Shadow within the text Shadow property for more than one Shadow effect each Shadow is comma separated so add a comma afterwards let's copy what we have paste it again I'm gonna give the second Shadow a negative offset so it's up and to the left I'll change the color so it's more distinct let's go with the blue color yeah I don't like that one yeah that's fine all right now let's cover box Shadows let's select our ID of box one I'll give this box a width of 100 and a height of 100 let's pick a color too background Dash color let's go with a whitish color so it's just barely visible something like that's fine for other elements besides text we have box shadow and really it's the same process as before we have a horizontal offset let's do three pixels a vertical offset let's do three pixels again a blur let's do five pixels and a color if we so choose but I'll keep that the same now our box has a 3D pop effect which is pretty sweet all right everybody so we have text Shadows for text and box Shadows for other elements and well everybody those are shadows in CSS hey how's it going people today I'm going to explain margins in CSS margins are the space around an element I'll create an H1 element type in your name or something that's kind of short and we'll need a paragraph I'll generate some text by typing lorem then hitting tab let me just zoom in a little bit to give you a diagram of margins I'm going to right click our H1 element and go to inspect at the bottom of my elements window we have this diagram it kind of resembles an onion because it has layers we have the element itself and its Dimensions padding border then margins padding is between the element itself and any borders margins are the area outside of any borders today we'll be working with margins the area outside of any elements let's close this window naturally there's a few pixels of margin around our body the letters in our H1 element and our paragraph aren't directly next to the border of our window so we can eliminate that we will select the body element within our CSS style sheet we will set the margin to be zero pixels so now the letters are directly next to the edge of the web browser and if I were to expand this you can kind of see that so that's all that margin is it's the area outside of an element to give you another example let's delete our H1 element along with our paragraph we'll create two div boxes we need two pairs of developments I'll create a class for each of these divs class box then they will each have a unique id id equals box one the ID for the second box will be box two and then I'll give each of these some text box one box two all right now let's style these boxes so after our body element let's select the Box class anything that's a box let's add a border 5 pixel solid is fine I'll change the font size to be 5 em with 250 pixels height 250 pixels and I'm just gonna zoom out a little bit until our view is at 100 let me color box one in box two we are selecting the ID of box one for the background color let's set that to be red but let's select a more custom red because it's cool all right then box two will be blue all right there are marginal directions we can apply margin to the top of an element the right the bottom or the left or all sides with box one I will set the margin top property to be 50 pixels that's going to add 50 pixels of margin at the top of this element box 1. there's also margin bottom now there's 50 pixels of margin after box one margin left the margins now on the left margin right the margins now on the right but you can't see that because divs are Block Level elements they take up the entire horizontal space you could apply margin to L sides evenly just with margin so margin 50 pixels that applies 50 pixels of margin to the top right bottom left so if we were to apply this margin to a class like the Box class both box 1 and box 2 will have 50 pixels of margin around each element there's also margin Auto it is possible to set an element's margin to take up the entire space I can take any of these elements such as box 1 and push it all the way to the right of my web browser using margin left margin Dash left then I will set it to be Auto the margin on the left side of box 1 will take up as much room as possible so vox1 is going to stick to the right hand side of the web browser margin right won't appear to do anything because it's already left Justified now if you would like an element to stay in the center of your web browser you can just set margin to be Auto so box one is going to stay in the middle of my web page if I were to apply this property to the Box class that will affect Box 2 as well so now box 1 and box 2 should stay in the middle of my web browser alright everybody so those are margins in simple terms it's the space around an element and that is an introduction to margins in CSS all right let's get started everybody so the float property the float property allows other elements to flow around it this is particularly useful with images and Block Level elements like div sections in my example I have a box that's made out of a div element it occupies the entire width of the space in my web browser any elements afterwards are kind of pushed underneath it is possible utilizing the float property to have this text wrap around this Block Level element and we do that with the float property here's what we're going to do for this demonstration you will need two images I have an image of a Pokeball and another one of Pikachu feel free to pick your own images we're going to insert an image an image is a block level element I will set the source equal to B the name or the relative file path of that image so mine is pokeball.png but I'm going to change the height so it's a little bit smaller height equals let's try 150. I'm also going to create a few paragraphs of text in vs code you can type lorem then press tab to generate some text I'm pretty sure you know that already though let's create four paragraphs one two three four my first image is taking up the entire width of my viewport all this text is being pushed underneath to make this text wrap around this image and occupy that space we will set the float property of the image I'm going to give this image an ID though ID image one IMG one for short within my style sheet I will select the ID of image one set the float property to either left or right we'll begin with left though then save everything all of those paragraphs are now wrapping around the right side of my image because we're floating left I'll add a little bit of margin though on the right hand side margin right I think 10 pixels is fine and that looks pretty good you can also float an image to the right let's change float to be right and now the image is on the right hand side if I were to adjust the size of my window the text just flows around the image which looks pretty nice all right let's change that back to left let's create a second image we'll place the image between the second and third paragraphs so my second image is pikachu.png pikachu.png the height will be the same I'll give this image an ID of image two this image isn't floating again the text is not wrapping around the image let's take image two we will float this image to the right I'll add some margin to the left as well margin Dash left let's do 10 pixels yeah there we go that looks pretty good basically speaking the float property allows other elements to flow around it now there is one thing I want to show you I'll add a border around the body of our document let's select our body element I will create a border that is three pixel solid now check this out with my second image it's overflowing outside of the container that it's in the body of my document there is one change we can make to our container our body with our container I will set the display property to be low Dash root now anything that's floating will stay within the container it's not going to overflow Pikachu is still within the Box alright everybody in conclusion the float property allows other elements to flow around it and that is the float property in CSS hey what's going on everybody today I'm going to explain the Overflow property in CSS the Overflow property sets the defined behavior when content does not fit in the parent element box meaning it overflows there's five states visible hidden clip scroll and Auto here's an example let's create a div element then within this development I'll create a paragraph I'll generate some text then going to our style sheet I'll take our div then give the stiff a border of 2 pixel solid I'll also limit the height height 75 pixels now we have a problem the content of our paragraph is overflowing out of our div we have a couple different ways of handling this with the Overflow property by default overflow is set to visible there is going to be no apparent change basically we're stating if any Inner Elements will overflow allow it to do so that's why you see this text overflow out of our box our second state is hidden with hidden any content that will overflow outside of our box will be hidden we can no longer see it however we can still interact with it for example if I were to copy and paste all of this text well we still have the full text available now clip clip is very similar to Hidden there's no apparent change with overflow set to clip it's used in tandem with the Overflow clip margin property using this property we can set how far this content displays or overflows outside of the box if I were to set overflow to be 13 pixels this content will overflow by this amount 13 pixels then the rest is hidden it's very similar to Hidden but it's used alongside overflow clip margin then we have scroll with scroll our box contains a scroll bar both vertical and horizontal we can use the scroll bar to see the entire length of our content if there's not enough content within this container for example I'll delete most of these words well we still have that scroll bar although it's disabled if you set overflow to auto if you don't need the scroll bar either horizontal or vertical it won't be displayed until you do need it so let me undo these changes now that scroll bar is displayed that's the use of overflow Auto all right everybody so that's the Overflow property it sets the behavior for a parent element when the content doesn't quite fit you can set this property to be visible hidden clip scroll or Auto and that is the Overflow property in CSS hey what's going on everybody today I'm going to explain the display property in HTML and CSS now HTML elements they have a default display value they're either Block Level or inline an element that is Block Level starts on a new line and takes up the entire width available inline elements do not start on a new line the width of that element is limited to what is needed a few examples of Block Level elements would include but are not limited to header elements developments paragraph elements form elements header elements and footer elements inline elements include but yet again are not limited to span elements anchor elements and image Elements by utilizing the display property we can specify if and how an element is displayed we can set an element to be a block level inline inline block or not displayed at all here's a few examples we'll create a development with the inner text being div and a span element with the inner text being span let me zoom in a little let's go to our style sheet for my development I will set the background color to be red do for my span element I will set the background color to be blue that's good div is a block level element it's going to take up the entire width available span isn't it only takes up the necessary space needed to display that element even if I were to extend the width of the browser my div element takes up the entire width my span element stays the same because it's in line we can apply a width and a height to a block level element like this width will be 100 height will be 100. however for an inline element the width and height wouldn't apply you can see that our span element stays the same size by utilizing the display property we can change the behavior of these elements how they're displayed if I set my div element to be block well it already is a block level element there's no change if I set my span element to display as a block level element well then we can apply a width and height these two elements are displayed as a block all of this extra white space is allocated for each of these elements their Block Level if I were to create a paragraph let me shrink this a little bit I'll create some sample text I'll type lorem then hit tab these are not within paragraph tags just so you know all of the space is reserved for my Block Level elements that's important later now let's go back to our style sheet if I change the display property to be in line guess what's going to happen well both of these elements are in line now we can't apply width or height properties to these elements they only take up as much room as necessary all other content is displayed in line with them then there's inline block it's much like inline but we can also apply a width and a height these two elements are no longer taking up the entire width of my viewport if I were to increase the size of my window we can display content in line with these inline blocks you can see that the text is lined up then there's none will effectively erase that element as if it's gone if I revert these displays to inline block there's also the visibility property which is fairly similar to display if I set visibility to be hidden with our div element this element is hidden but it's still taking up space as if it was still there it's kind of like it's invisible whereas in if display was set to none it's as if it no longer exists the next element will take its place all right everybody that is an introduction to the display property we can display elements as a block inline inline block none or by utilizing the visibility property we can hide them and that is an introduction to the display property in CSS hey what's going on everybody today I'm going to give you an introduction to the width and height properties in CSS all right let's begin everybody we will Begin by creating two div elements and each development will have a class of box within our first box let's create an H2 header with the text of this is number one and we'll create a paragraph underneath to generate some text in vs code you can type lorem then hit tab all right let's copy our div paste it change number one to number two and that's where we're at So within our style sheet we can set a height and a width for an element an ID or a class so let's take our box class dot box I'll add a border border 2 pixel solid just so that it's easier to see here we are okay normally with the height by default it's Auto we don't need to explicitly state that you can see that there's no apparent change when I reload the page so the height is going to be calculated automatically when we render our web page but you can set an explicit height for example 100 pixels that's a little too small our content is kind of overlapping let's change that to 200. now it's a little too big but it is possible to set a fixed height so let's set height back to auto now we will change the width so with the width we can set a number of pixels for example 100 we would have two very long skinny columns and they're right on top of each other that's because divs are Block Level elements we'll Reserve this entire space for each of these developments because they're Block Level so let's change the width to 200 and see what happens now they're more of a box shape if I set width to be Auto the width will be calculated automatically and like I said that's the default these Block Level elements want to take up as much width as possible kind of like your mom if I changed width to be 50 the width of this element will take up 50 percent the width of our viewport but we're still allocating all the space for each development because they're Block Level if I were to use the float property let's float to the left the reason that these elements aren't floating there's still not enough space to place Box 2 next to box one because we have our border our border takes up two pixels if I were to remove the Border they should display back to back which they do you do have to take in the width of the Border when calculating the width the same thing applies with padding let's apply a little bit of padding padding 25 pixels now we have 25 pixels worth of padding between our content and the Border I mean it looks nice right when calculating the height or the width we can disregard any padding or any borders but we have to add this property we'll add box Dash sizing border Dash box when we calculate the height or the width we're allocating disregard any padding or any borders the Box sizing property will take that into consideration we can now fit these elements right next to each other the width of each box is 50 and they both have borders and padding what you also might see with box sizing is that what some people like to do they'll use an asterisk as a selector that means all elements and then they'll apply the Box sizing property to all elements because well it can be kind of annoying to calculate width and Heights while factoring in padding in borders as well all right now if we were to float right box one is on the right Box 2 is on the left let's undo that you can set a minimum height and a minimum width as well so with our two boxes let's get rid of our paragraphs I'm going to text align Center just to Center our text this is number one this is number two if I were to set the max width to let's say 25 percent even though we stated the width should be 50 the max width is going to cap that out at 25 you can see that the sizes of this box have shrunk or maybe if I set a minimum width of 75 percent we're saying that each of these boxes should be at least 75 percent even though before we declared them to be 50 percent you also have Max height and Min height there's really going to be no change between the two since the height of our web page starts at the top here and ends right here we're not using all the space down below so what I propose is that let's place our boxes within a container we'll create another div with a class of container to contain our boxes let's take our two boxes and place them within this development so with my container the container class with our container let's change the background color to something great just so it's easier to see we can't see our container because our boxes are taking up all the space with our container if we need to take up the entire height of our web browser we can set the height to be 100 VH meaning viewport height so now our container is taking up 100 of the height available if I were to zoom out the container is still taking up all that space so with our boxes let's change the background color because I can't really see them that well anymore for the background let's change that to be white I'm going to zoom out to 100 with my minimum height property I will set the minimum height of our boxes to be 50 percent now they take up 50 of the space available which is one hundred percent our viewport height if I were to change the minimum height to be 100 we take up the entire space available or I could set the max height to be 50 percent even though we set max height to be 50 we don't necessarily need all this space because there's not enough content if I absolutely need these boxes to take up at least 50 percent of the height of my window I would use minimum height instead of maximum height so really it's up to you alright everybody so that is an introduction to the height and width properties in CSS hey everybody so today I'm going to explain the position property in CSS there's five possible values relative fixed absolute sticky and static let's begin by creating a div section I'll give this div an ID of box one within my style sheet we will select the ID of box one I'll set the width to be 200 200 pixels height to be 200 pixels as well and a background color background Dash color let's go with the blue color we haven't picked blue for a while that's pretty good all right the position property with a position set to relative relative positions and element relative to where it normally should be with our position property set to relative we can move this element to the right to the left upwards or downwards we do have the properties of top bottom left right to push this element down relative to where it normally is I can set top to some value we can do that in pixels if I set top to be 100 pixels this element will be pushed downwards by 100 pixels relative to where it normally is in the top left corner another property is left I will push this element to the right by 100 pixels by setting left to be 100. so now this element is pushed to the right by 100 relative to where it normally is it's down and to the right by 100 pixels negative 100 would move this element up left set to negative 100 would move the element to the left it's kind of backwards this element is positioned relative to where it normally should be then we have fixed with fixed an element is positioned relative to the viewport meaning the web browser for this example we're going to need a whole lot of paragraphs like 20 of them I'll type lorem hit tab to generate some text copy this line and paste it like 20 times all right that's good enough let's get rid of these properties I will set the position to be fixed this element is now fixed within the viewport it's stuck in the top left corner if I were to scroll down this element is still in the top left corner of my web browser this element can be fixed to the right by setting the right property to be zero pixels zero works as well so now this element is in the top right corner with the bottom property if I were to set that to be zero pixels well now this element is in the bottom right corner this might be good for an advertisement if you had a banner for the bottom left corner that's left zero bottom zero that is the fixed position this element is fixed in my viewport my web browser then we have absolute with absolute an element is positioned relative to its nearest ancestor think of an ancestor as a containing class within box one we'll create box two change the ID to box two with box one let's set box one to be relative then get rid of these properties we'll create box two by copying box one change the ID to box two the width will be 100 the height will be 100 but we'll pick a different color something red is good the position for Box 2 will be absolute since Box 2 is contained within box 1 box 1 is its nearest ancestor if I were to move box 1 Box 2 is still going to stay in the top left corner of box one let me demonstrate I'll set the top property to be 100 pixels then left to be 100 pixels as well so even though we're moving box 1 Box 2 it's positioned absolutely it's still going to stay within its container let's try and put Box 2 right in the middle of box one I will set the top property to be 50 pixels and the left property to be 50 as well now Box 2 is right in the middle of box one we can move box one anywhere let's set the position of box 1 to be fixed so Box 2 is still going to stay right in the middle of box one no matter where it is so that is the absolute position an element is positioned relative to its nearest ancestor then they're sticky a sticky element is positioned based on the current scroll position meaning our scroll bar so to say with box one box one will be sticky let's set top to be zero pixels what happens now is that when I scroll down our web browser is going to catch this element sticky is kind of similar to fixed with sticky we reserve some space for the original element if I were to change that to fixed this element is just basically stuck to the top of my viewport with sticky it's going to be in the same place until we scroll past it alright then lastly their static static is the default position for an element in the future we will have the capability of changing these positions dynamically to set a position to the default which is static you just change it so those are the five position types relative fixed absolute sticky and static we'll have more practice with this in the future so don't worry this was more or less just an introduction and those are CSS positions hey how's it going everybody today I'm going to show you how we can include a background image using CSS so sit back relax and enjoy the show all right let's get started everybody what you'll need to begin with is a high resolution picture for a background I just so happen to find a picture of Central Park in New York City the higher the resolution the better so place that image within your website folder in our HTML document let's create a title I'm just going to say the word hello and we'll need some text just as a point of reference I'll generate some text by typing lorem then hitting Tab and that's good enough for now so within our style sheet I will select the body of our document we are going to include that background image with the background image property then we need a URL the URL is going to be a relative file path or an absolute file path to where this image is located they're right next to each other I just need the file name so my image name is background and this is a jpeg alright so here's my image so far it's gigantic it's huge let me show you what happens if I use a smaller version of the same image this image I think is like 500 pixels for the width or so background Dash small so here's my image but it repeats itself there is a background repeat property So within the body of my document I will set the background Dash repeat property to be no repeat now this image isn't repeating we're headed in the right direction what we'll do now is take this image and Center it in the middle of my viewport take the background Dash position property and set that to Center it's centered horizontally another property we'll need is background attachment background Dash attachment I think I misspelled attachment there we are the background attachment property sets whether a background image scrolls with the rest of the page or is it fixed we will set the image to be fixed now this image is in the middle of my viewport see even if I were to expand and contract it it's still within the middle lastly we need this image to take up the entire space of the background and there's one last property background Dash size we will set that to cover now this image is taking up the entire space of my background which is what I wanted I'm going to use that high resolution picture that I used previously that's much better all right everybody so that's how to add a background image using CSS hey what's going on everybody today we're going to discuss combinators in CSS combinators explain the relationship between listed selectors there's four we'll discuss today descendants which is just a space a child which is a right angle bracket a tilde which is a general sibling and plus which is for adjacent siblings you would type something like this you'll have selector one a combinator for example the child combinator then another selector if I said div child combinator then p we're applying CSS properties to any paragraph elements found within the stiff section what we'll do in this example is create a div section I will give this div an ID of container we'll create a few paragraphs for paragraph one let's say this is number one we'll create another paragraph then we'll create an inner div section this div section will not have an ID but within this inner div section we'll have another paragraph This is number three outside of our div with an ID of container we'll create two more paragraphs this is number four this is number five that's all we'll need for now just to make it a little more clear that this is a div section I'll take our container then give it a border border two pixels solid paragraphs one two and three are within a div section four and five are not I would like to highlight all paragraphs within my ID of container I will take my ID of container then I will use the descendant combinator which is an empty space then list another selector I'm going to highlight all paragraphs within my div section that would be my div section space then what am I applying CSS properties to my paragraphs let's take the background color and set that to be yellow something like that's fine all paragraph descendants of our container change the background color to Yellow that is The Descendant combinator it's just an empty space then you have children children is a right angle bracket highlight any paragraph children of our container class only one and two are highlighted that's because three is not technically a child it's a descendant think of it like a grandchild in this case paragraphs one and two are direct children of our container but our third paragraph is One More Level deep because it's wrapped within another div section it's a descendant but not a child all children are descendants but not all descendants are children that would apply to number three that's why only one and two are highlighted that is the child combinator then we have General sibling which is represented with a tilde take any paragraphs that are General siblings of our container that would highlight four and five paragraphs four and five are both siblings to our container they're both considered Children of the body of my document therefore their siblings like brothers and sisters but if I were to wrap these two paragraphs within a div section well now they're no longer siblings the stiff section is now a sibling to this first div section think of it this way paragraphs four and five are nieces and nephews to the First Development all right let's reverse that then we have adjacent siblings using a plus sign we will select only adjacent siblings four is selected but not five the adjacent sibling is the next direct sibling but not all siblings that's why four is selected and not five but if I change their positions around 5 is now selected alright everybody so those are combinators they explain the relationship between listed selectors you have descendant child General sibling and adjacent sibling and those are combinators in CSS hey how's it going everybody today I'm going to explain pseudo classes pseudo classes are keywords added to a selector they modify the behavior of an element when they're in a certain state for example I have a button when I hover my cursor over the button I set this button to increase in font size and also change the background color to Green hover is an example of a pseudo class it modifies our buttons Behavior active is when an item is currently selected so with my mouse I'm going to left-click the mouse button and hold it the button is now red basically they modify a special state of an element so let's begin with a few examples let's go to our index file and we will create a hyperlink I will set the href attribute to be I don't know Google or something https colon to forward slashes google.com be sure to close it I'll type the word Google here is my hyperlink to Google a link is also a pseudo class I will select any anchor tags that we have we have one I'll set the link pseudo class to have these CSS properties so a colon then the name of the pseudo class instead of this text being blue let's set it to be like a light blue I will set the color property to be a light blue color let's pick one yeah that's pretty good when I hover my cursor over this link I want the color to change we are selecting any anchor tags colon then we will use the hover pseudo class and I will change the color you know what let's use what we currently have I'll just make it a little brighter now when I hover over this link the color changes I'll increase the font size too it's kind of like we're zooming in on this element let's do 1.1 em so the font size increases slightly active kicks in when you're holding down the cursor over an element a colon active let's change the font size to be 1.1 em again I will set the color to be let's go with the dark blue color when I left click on the mouse and hold it this link is now in the active state if a link is visited by default it's purple let's change that a colon visited when our anchor element is in the visited state I'll change the font color how about a gray color there all right so those are a few basic pseudo classes in this next example we'll need a list an unordered list we will need 10 list item elements this is number okay let's copy this paste it nine times one two three four five six seven eight nine now we will select any list items and use the hover pseudo class when I hover over one of these list items I will change the background color of that list item to be a highlighter yellow color I will change the background color to be yellow let's go with that so check this out when I hover over a list item the background color changes there's also the not pseudo class we can select anything that is not being hovered over not kind of does the opposite anything that is not in this state anything that's not being hovered over let's set the color to be like a gray color anything that's not currently being hovered over is gray but when it is hovered over it's yellow so that is the not pseudo class anything that is not in this state will have these CSS properties then we have the nth child pseudo class list item colon and child parentheses anything that's selected let's set to be yellow depending on what value you put within the parentheses that element will be selected one corresponds to the first element two is for the second three is for the third nine is for the ninth element for all odd number elements type odd for all even elements type even for every third element that would be 3n 369 for every fourth that would be 4N you can add an offset too normally with 3n that's every third but if I want to start at the beginning I can add plus one four seven or even plus two two five eight it's kind of like a formula this is really handy with JavaScript because you can place a variable within here the value of that variable can change which is pretty cool all right last example let's create a development with an ID of greeting the text will be hover here within our development let's create a paragraph element with some text of hello normally I want this Hello message to be hidden until we hover over this element our div element I'm going to style our greetings P element I'll set the background color to be maybe a blue this time like the light blue I'll add a little bit of padding too maybe 10 pixels to make this element invisible I can set the display property to be none what I would like to do when I hover over the settlement I want this element to be displayed we are selecting our greeting then when we hover over it I want the P element of this div section to have the display property of block display it as a block level element when we hover over this element it displays the P element within our div section this will come really handy when we create drop down menus those are pseudo classes elements can have special States like when they're being hovered over or you click on them using these pseudo classes we can apply CSS properties to those elements when we interact with them and those are pseudo classes and CSS hey what's going on everybody today I'm going to explain pseudo elements in CSS pseudo elements are keywords added after a selector that are used to style a specific part of an element you have a selector for example H1 then two colons then a pseudo element one you might see is first Dash letter we can add some CSS properties and style the first letter of our H1 element that's the formula selector two columns pseudo element let's begin in this example we will need an H1 element why don't you go ahead and type in the word hello or something I really don't care and we will need a paragraph to generate some text you can type lorem then hit tab and a list let's create an unordered list with an ID of fruit we'll have three list items the first list item will be apple second will be orange third banana let's give each of these list items a unique ID as well ID will be apple Orange then banana all right that is good enough for now let's head to our style sheet we will use the first letter pseudo element to change the first letter in our H1 element we have our selector H1 two colons then a pseudo element first letter is one what would we like to do with the first letter let's set the font size to be 2 em basically that's 200 percent the H in hello is larger now and I will set the font style to be italic that is the first letter pseudo element let's select our paragraph paragraph two colons we can apply CSS properties to the first line of some text first dash line what would we like to do let's change the background color background Dash color I'll pick a yellow color something like that's fine all right so the first line is now a highlighter yellow color if I change the size of the window the first line is still going to have that background color than the selection pseudo class is anything that's currently selected with our Mouse we're selecting our paragraph element two colons then we will use the selection pseudo element anything that's selected with our Mouse normally the text is white and the background is blue let's change that let's set the color to be white well I guess that's the same and the background color to be let's go with the dark grayish color no better yet let's make the color green for the text yeah that's kind of cool so anything that's selected will have a font color that's green and a background color that's dark gray now let's go to our list the list had an ID a fruit then I would like to select any list items with any list item we will use the before pseudo element we can add something before each list item I'll add a check mark emoji we can do that with the content property then within a set of quotes I can select an emoji so if you're on Windows you can hold the Windows button then semicolon and there's a prompt for an emoji I will find a check mark that looks good now before any list item add a check mark which we have there's also the after pseudo element we have a list item with an ID of Apple after after this selector let's add some content I will add an emoji of an apple Apple there we are let's do this with orange and banana as well Apple Orange banana let's change these emojis Orange then banana those are the before and after pseudo elements before or after some element we can add or change some content now with the list item you can change the marker for an unordered list the default is a bullet point but let's change that with our unordered list of fruit let's select any list items and use the marker pseudo element let's change the marker to be a check mark but I'll delete what we have with the before pseudo element I will also change the color of this check mark to be green pretty cool let's make it a little bit bigger too font size 1.2 em there all right everybody so those are pseudo elements you have a selector two colons then a pseudo element which can add specific CSS properties to that selector and those are a few pseudo elements and CSS hey everybody today I need to explain pagination in HTML and CSS pagination is the method by which a document is separated into pages and numbers are given using pagination on a website we can move between Pages easily it's kind of like you're reading a book each page has a number pagination might also be useful on your web page if you need to limit the results maybe you only want so many results per page then you can easily navigate between the pages there's many different uses so let's begin we'll start with our index file I will create an H1 element with the title of this is page number one then we'll create some sample text within a paragraph element I'll type lorem then hit tab to generate some text usually with pagination it's found at the bottom of a web page so that's a good place for it right here there's many different ways in which we can create pagination but using only what we know so far that I've covered in this series here's one way we'll create a development with a class of pagination then be sure to close it within this development we'll create several hyperlinks we'll need an a tag I'll set the href attribute just to be empty for now and then we'll close it for this example let's create a total of seven links we have one two three four five six seven beginning with the second link that will be one then two three four five for my first link I'll use a left angle bracket this is so we can navigate backwards depending on what page we're on and with the last link I'll use a right angle bracket so we can navigate forwards we'll revisit this page let's head to our style sheet the first thing I'm going to do is Center all of these links within my div element I'm selecting my class of pagination I will use the text align property set it to Center then I would like to style all of these links these hyperlinks we're starting with our pagination class then I would like any a elements found within the pagination class let's change the color I will set the color to be black let's eliminate the text decoration that is the underlining text decoration none I'll add a little bit of padding 8 pixels by 15 pixels I will display these elements as an inline block basically by setting these elements to have a display property of inline block we can adjust the width and height of these elements but what we have is good already alright so far so good going back to our HTML file I'm going to make one change we're beginning with page one that's our index file with this anchor tag I will set the class to be active within our CSS file we're taking our pagination class find all a elements within our pagination class then find any active classes so it's going to look a little strange within the pagination class within any anchor tags find the class that's active so in this case it would be page one I will change the background color of that element background color let's pick a greenish color but feel free to pick any color you like that's pretty good let's try and make the font weight bold I want to see what that looks like okay not bad this part's optional but I'll add a border radius around this element the one that's currently highlighted border radius 5 pixel seems fine yeah that looks pretty good all right now if any element is not active we can style them this part's going to look a little strange select the pagination class with any a elements we will use the hover pseudo class if these elements are hovered over but they're not active then I'd like to highlight them we'll use the not pseudo class find any elements that are not within the active class I will change the background color to something maybe gray like that then I'll add a border radius of 5 pixels when we hover over these inactive links they should change in color let me make that a little bit lighter though that looks pretty good now we need some functionality for these pages if we click on one that should take us to our first file which is named index.html or it could be named something else for you the second link will bring us to a page named page two which we still need to create then page 3.html page4.html page five dot HTML now with these back and forwards buttons we can easily navigate through pages using JavaScript but unfortunately we really don't know JavaScript at this point at this point in time the easiest way for us to move forwards or backwards using these arrows is to list a specific file if we're on page one and we need to move forwards that will bring us to page two for the last hyperlink I will set that to be page 2. if we're on page one then we hit the backwards button while we're really not going to go anywhere we can either leave this link empty or we can refresh the page just by listing the page that we're currently on now we need to create these pages what I'm going to do is go to our website folder I will copy this index file paste it then rename this copy as page2.html let's copy page two paste it change page to copy to page three we're going to do this all the way until we reach page five foreign now if we go to page two let's change the title to be page two the back button will bring us to our index file also known as page one in this case let's set the class of active to be within the anchor tag page two then if we move forwards we want to go to page three so then if we go to page three if we move backwards we're going to page two set the class that's currently active to be on page three then if we go forwards we're on page four oh be sure to change the title to I forgot two three we're good then on page four this is Page four if we move backwards we're going to go to page three change the class to reflect page four if we move forwards we'll go to page five then lastly on page five this is page five if we move backwards we're going to page four move the class over to page five then we can't really go forwards so I'm just going to set the forward button to be page five again just to refresh it or you can eliminate it either way all right let's see if this works be sure to save everything so we should be able to move between the pages by clicking on these buttons or the arrows we're on page one we can go to page two three four five we can also use the arrows two three four five four three two one all right everybody so that's pagination it's a method by which a document is separated into pages and that is simple pagination in CSS hey what's going on everybody today we'll create a drop down menu only using HTML and CSS so let's get started the first thing we'll create is a div section I will give this div section A Class of drop down then within this div section I'll create a button what kind of drop down menu should we create let's create a drop down menu for food then we'll need a div section to hold all of the different content within our drop down menu I will give this inner div section A Class of content within my content class I'll create a few hyperlinks I'll set the href attribute to B nothing but you can put a file path or a URL in here I'll create three elements for our drop down menu the first will be apple Orange then banana this part isn't necessary but for my demonstration I'm going to create a paragraph a text I'll type lorem then hit tab that will generate some text alright that is all the markup that we need for this video Let's head to our style sheet the first element I'll apply some CSS properties to is our button with my drop down menu class I will select any buttons I will change the background color to be something else I'll use hsl values I'll go with 80 for the lightness for the font color I'll pick White I'll add a little bit of padding around the text padding 10 pixels by 15 pixels is good I'll remove the Border by setting the Border property to be none then I'll change our cursor to be a pointer when we hover over the button cursor pointer now when I hover over the button my cursor changes to a pointer the next elements that will change are the a elements within my drop down menu class take any ailments then apply the CSS properties let's display all of these items as a block I will set the color to be black I'll remove any text decoration that's the underline basically text decoration none and I will apply a little bit of padding 10 by 15 pixels we have one issue all of the content within my drop down menu is pushing all of the other content on my web page down eventually we'll set the position of our content to be absolute to take it out of the normal flow of our web page with our drop down menus content class let's change the background color first background color I'll use hsl values let's go with 95 lightness I will set the position property to be absolute then I'll set a minimum width for the content I'll stick with 100 pixels but feel free to adjust this value then I'll add a box shadow box shadow the first value is for the horizontal positioning the second number is for the vertical positioning a third value is for the level of blur then select a color to make the shadow a little bit lighter if I'm using hsl values I can adjust the position of this bar and change the opacity let's go with like 80 percent that looks pretty good normally I don't want this content to be displayed unless I hover over our button I will set the display property of our content to be none to hide it when I hover over our button then I'd like to display that content let's take our drop down menu class and apply the hover pseudo class with our content I would like to set the display property to be a block again now when I hover my cursor over the button it displays our drop down menu here's a few extra changes I'm going to make when I hover over the button I'll change the background color of the button with our drop down menu class I'll apply the hoverseudo class take our button within that class then change the background color I'll set the lightness to be like 70. the background color of the button is changing now then lastly when I hover over one of these a elements I also would like the background color to change with my drop down menu take any a elements when I hover over them change the background color for the lightness I'll set that to be like 90. that looks pretty good all right here's the last change that we're going to make with our div section it's a block level element when I hover my cursor over this area even though it's all white space we still display the drop down menu the last change that I'm going to make is set the drop down menu div section to display as an inline block so when I hover over this white area we don't display the drop down menu until I move my cursor over the button then the menu is displayed all right everybody so that is a simple drop down menu only using HTML and CSS hey everybody in today's video we're going to create a navigation bar using HTML and CSS so let's get started we'll Begin by creating an H1 title for the title of our web page why don't you go ahead and type in your name or your employer's name or your business name really doesn't matter then I'm going to use a nav element also known as a navigation element navigation elements are typically used for a set of navigation links I will give this nav element a class of navbar then within this navigation element I'll create an unordered list my unordered list will contain one list item for each category in my navigation bar for the first list item let's create a category for home I would like to turn this category into a hyperlink I'll surrounded this text with a pair of a tags within the opening a tag I will set the href attribute to B I'll just keep it empty for now we'll fill that in later let's copy our list item paste it a few times maybe a total of four links for the categories let's have home about products and contact these are a few common categories you may see for a navigation bar all right then outside of our navigation bar let's use a main element for the main content for our web page I'll add an H3 element for a sort of subtitle for the main section of our content this is the home page then I'll add a paragraph a text to generate some text in vs code you can type lorem then hit tab alright that is what we need for now let's go to our style sheet the first thing I'm going to do is text align our H1 element and set it to Center text align Center the text in our H1 element should be right in the center I will take our navigation bar class select our unordered list set the list style type to be none to remove the bullet points and they are gone now I'll also change the background color let's pick a dark gray color I'll set the lightness to be 25. I'll remove any padding as well as any margins let's style these hyperlinks within our navigation bar class take any a elements set the color to be white remove the text decoration text decoration will be none that removes the underline I'll add some padding of 15 pixels I will display these elements as a block then text align Center there we are this navigation bar is a vertical style navigation bar this is a style you may see at the bottom of a web page when I hover over one of these links I want to change the background color we will take our navigation bar class take any a elements then apply the hover pseudo class when I hover over one of these hyperlinks I'll change the background color I'll turn down the lightness slightly to 10 lightness there we are if you would like a horizontal navigation bar here's a change we can make with our navigation bar class take any list items then we will float left one change will make within our unordered list set the Overflow property to be hidden alright that's pretty good so far there is a little bit of margin around the body of my document I am going to set margin to be zero with our body element set any margin to be zero pixels if you would like margin around the main content of your page we will take our main element then set margin to be let's stick with 20 pixels you also could put margin just on the left side and the right side you know what I'm going to set margin left to be 20. and margin right to be 20. all right then lastly let's fill in these ahref attributes for the href attributes I will set my home link to be index.html about will be about.html products.html and contact.html we're going to go to our website folder we'll create a few copies of our index file we need three more files one two three let's rename one of these as about.html then products.html then contact.html so let's open about I'll change the header element of our main element to B this is the about page let's apply that for products this is the products page then contact this is the contact page all right and that should be everything let's see if this works we're currently on the home page I can go to the about page products contact and home in this example they're all relatively the same except for the H3 title all right everybody and that's how to create a navigation bar using HTML and CSS hey what's going on everybody today I'm going to show you a basic Website Layout using HTML and CSS all right let's begin so we should know what semantic tags are semantic tags they include but are not limited to headers nav elements main section aside articles and Footers you'll want to use semantic tags because they keep your content organized they're better for search engine optimization and they assist with screen readers and other technology for accessibility so I've already written some HTML markup I just want to describe this first headers are used for introductory content such as a title a logo or author information nav elements they're used for navigation bars or other links sometimes you may find a set of navigation Links at the bottom of your page but having a navigation bar is fairly common now the main content which is all of this it can contain one of many sub elements such as sections aside elements articles and generic developments so sections which is what I've created here in the middle this is for dependent content you would typically put anything you want within a section it's typically used for dependent content if I were to take this section out of the web page then put it on another web page it might not necessarily make sense like what is it for that's why it's dependent and a side element is meant for side content this can include author information fun facts quotes external links comments or really any other related content that's related to a section now an article this represents independent content this could include news articles job posts or blog posts articles are really similar to sections with articles it's meant for independent content for example a news article if I were to take this news article cut it out and put it on a different website it would still make sense it's independent content it's not reliant on the context of the website whereas in a section would be and then lastly we have Footers a footer is for a closing content this could include author information copyright information and sometimes navigational links there's really no one-size-fits-all approach really the design is up to you but this is a really common format now that we know the basics let's actually design this alright so we will create our semantic elements we have a header a nav element a main element and a footer element within our header element let's just add an H2 element that says header so let's go to our style sheet I'll take our header element let's change the background color background Dash color let's pick a light gray color I'll use hsl values because I like them 84 or 85 is good then let's text align Center and add a little bit of padding 25 pixels okay let's work on our navigation bar it's not going to be a fully functioning navigation bar we've done that in a previous video Let's just allocate some space for navigation bar it is common to have more than one navigation element per web page if we're creating a navigation bar we should set the class to be something like navbar so it's descriptive let's go to our CSS style sheet I will select our navbar class then change the background color let's go with the darker color I'll add some height 50 pixels and that should be good we're just allocating some space we're not creating a full navigation bar there's a little bit of margin around the body of our document I'm going to remove that by selecting our body element then set the margin to be 0 or 0 pixels that should get rid of the margin all right then we have our main element our main element can include any combination of a side sections articles or even just some generic developments but we won't be working with div in this video really you can see any combination of a side section article or div or maybe even none of them it's up to you in this topic we'll stick with one aside element one section and one article these elements are kind of like sub elements within our main element our main element is going to be the main stake in potatoes of our web page so with our side element I'll include an H2 element for a header this is a side let's do the same thing for Section this is a section then this is an article let me separate these just so that they're easier to see just to take up some space I'm going to create some sample paragraphs our side element will have one our section will have two paragraphs I'm just copying and pasting and our article will have two as well I don't want this top to bottom layout we can change that with some CSS properties so let's work on our side element first with our side element I'll set the width to be 20 of the width of the web page RSI element only takes up 20 percent of the space available the following elements can float we have to set the float property to be left then in this case all right let's copy aside change aside to B section that's our next element I'll set the width to be 40 percent then we have article change section to article and the width will stay at forty percent these three elements can all fit within the web page the total width is under 100 we have our three elements within our main element so if you would like to add a little bit of padding this is what you're going to do let's add 10 pixels of padding to each of these elements when we calculate the width we don't take into account any padding so one change we're going to make is that at the top of our CSS style sheet we can select all elements with an asterisk then a set of curly braces we will set the Box sizing property to order Dash box what we're doing with this property is that when we calculate the width factor in the padding all three elements should be lined up now all right then lastly we have our footer So within our footer element I'll just add an H2 element that says footer then I will style it let's copy what we have for our header paste it change header to be footer now what we need to do is clear our float because we're still floating the elements that come after let's display our footer as a block level element clear a float you can set clear than both and that should clear that alright so here is a basic Website Layout for a desktop this isn't a good format for a mobile device though with a mobile device you would want each of these elements to be on top of each other so you can scroll down we can add an at rule so at media screen and Max width 600 pixels so what we're doing here is that if the width of our screen or window is 600 pixels or below we can change some CSS properties with a side section and article let's select those aside comma section comma article we'll just change the width to be 100 percent if a user is on a mobile device and or the width is 600 pixels or below then we'll switch to a mobile version of the web page each of these elements are a side section and article elements are taking up 100 of the width available then if we were to expand this web page or we're viewing on a desktop we switch to the desktop version this is also known as responsive CSS all right everybody I know I covered a lot today but that is a basic Website Layout using HTML and CSS hey what's going on everybody today we're going to create an interactive image gallery using HTML and CSS so let's get started before you do jump in I would recommend downloading three pictures of your choosing I have a picture of a pizza a salad and soup if you're able to try and find images that are roughly the same height and width once you have your three or more images we are ready to begin we'll begin with the first image I'll use a div element and I will give this div element a class of gallery because it's well part of our image gallery I will include my image image The Source attribute will be the relative file path of the image if you have a lot of pictures I would recommend creating an images folder you know what let's actually do that it'd be good practice new folder images I'll move all of these images to my images folder alright so I will list the relative file path I need to navigate to the images folder but of course you can use your own pictures depending on what you're building exactly images dot I think that was a JPEG alright so this picture is massive in case somebody is using a screen reader it's good practice to add an alternative attribute then give a description of the image salad I'll turn this image into a hyperlink by surrounding it with a pair of anchor tags we can open this image in a new tab by setting the target attribute to equal underscore blank then I will set the hrep attribute to be the source of my image I'll just copy and paste that just temporarily I'm going to set a width for this image width equals 200. what we'll do now is add a description it's entirely optional but I think it would look nice I will create a new div element with a class of description I will type the word salads we'll do some CSS styling a little bit later let's copy this entire div element paste it twice then we just need to change the images we're using my second image is soup I'll change the alternative text as well and the description soups then my last image is pizza the description will be pizzas all right let's go to our style sheet we are selecting our Gallery class I will set the display property to be an inline block currently these images are Block Level elements now they're all lined up I'll add a border border one pixel solid let's go with a dark gray color I'll use hsl values I'll set the lightness to 60 percent I'll add margin of 5 pixels the margin is applied outside of these developments if I were to increase this you can see the difference I'll keep that as five though let's work on the description for each image we are accessing our Gallery class then within the gallery class we have the description class that should be these developments let's add a little bit of padding 10 pixels then text align Center not bad when we hover over one of these elements let's change the Border color we are taking our gallery we'll apply the hover pseudo class then change the border and make it a little bit darker I'll set the lightness to be like 20. there we are now the Border changes when we hover over one of these elements I'm going to delete these with attributes foreign then go to our style sheet we'll access our Gallery class with any images set the width to be 100 percent and height will be Auto then with the gallery class we can set the width 200 pixels so basically what we did is that we set the width of each image to be 100 of the width of our Gallery whatever this is set to if I were to set the width to be something larger then the size of each element would increase but I think 200 is fine all right now let's test it if we click on one of these images we should see the full image in a new tab that's the salad image soup and pizza all right everybody so that is a simple image gallery using HTML and CSS hey what's going on everybody in this video I'm going to show you how we can create some font awesome icons using HTML and CSS all right let's get started everybody I'm going to direct you to this website font awesome.com this isn't a sponsorship or anything like that but this is a pretty good place to get some icons Google Icons is another good source but I find that font awesome does have a larger variety of icons to start using icons from this site from the home page we will start for free because I don't like to pay for things you will need a kit you can type in your email like fake gmail.com then send kit code then you just have to confirm your email now once you log in you'll have access to a kit if I were to click on my kit I have a line of JavaScript that contains a link to my kit there's going to be a unique number let's copy the script then place it in the head of our HTML document right here we now have access to those icons on font awesome to browse for icons go to the icons tab then we can perform a search I would like an icon of a home or a house I would like this one so I'll click on it you can choose a classic style or a sharp Style with sharp corners this is solid that's regular this is light I'll stick with solid you can select animations but I won't use animations for this example you can rotate this icon you can change the color and you can change the default size this is 2xs this is 2XL to include this icon we can copy this element it's an eye element so let's copy this eye element within the body of my document I can paste that I element and there's my icon if you want to remove the color and change it with your CSS style sheet we can remove the style attribute if you need something even larger than 2XL we can change this element up to 10 times the size with 10x that's a little too large for my liking let's go with 5X let's find three other icons we would like I'm going to find the Twitter logo that's right here I need to copy this eye element then I will paste it then I'll change the size fa-5x okay Twitter YouTube would be good copy this eye element paste it again I would like the 5x version fa-5x let's select one more icon let's go with tick tock and that is all we'll need again I would like the 5x sized version all right that's a good amount of icons I will Center all of these icons one way in which I can do that is to place all of these elements within a div with the class of icons all right let's go to our style sheet I will take my class of icons then text align Center to right justify these we can set that to right but I'll keep them in the center I'll change the color of these icons let's begin with our house we'll need to copy this entire class I don't want the sharp version I will copy this entire class then within my style sheet I will select that class dot then paste the name of that class now we can't include spaces you can replace the spaces with the DOT with our house icon let's change the color to something Gray let's go with the lighter color like that okay let's do this with the other icons then we have Twitter replace the spaces with dots I will change the color so let's try and find Twitter blue think that's fairly close okay then we have YouTube color red then tick tock I think that's fairly close all right now what we'll do is turn these icons into hyperlinks we'll surround each ailment with a pair of a tags foreign foreign then within the href attribute we can set that to some website I won't set the atrep attribute to our house icon let's do that with Twitter Youtube and tick tock so with Twitter I will set the ahref attribute to be https colon to forward slashes twitter.com let's do this with our YouTube icon replace Twitter with YouTube then tick tock so this should work let's click on Twitter that works YouTube and tick tock with hyperlinks there is some underlying text decoration included let's remove that let's take our icons then any anchor tags within our icons class we'll set the text decoration to be none and that should remove them I'll also apply a little bit of margin between each of these icons let's do margin Dash right set to 20 pixels not bad for some additional practice when we hover our cursor over one of these icons let's increase the lightness let's begin with our house let's copy these CSS properties paste them we'll apply the hover pseudo class I'll increase the lightness by 10 percent I went from 66 to 76 percent when we hover our cursor over our house icon it should be a little bit lighter okay let's apply this for the other icons then we have Twitter apply the hoverseudo class oh I'm using RGB values let me change that to hsl I'll increase the lightness to 60. let's do this with YouTube then tick tock all right now when we hover our cursor over these icons they should be a little bit lighter Tick Tock is still a little bit dark let me increase it further to 30 percent that's much better all right everybody so that is an introduction to including icons in your web page using CSS hey what's going on everybody in this topic I'm going to give you an introduction to using flexbox in CSS in about 10 minutes or so why don't you go ahead and sit back relax and enjoy the show all right let's jump in everybody we have a little bit of setup to do we'll create a development with the class of container within our container class we'll create a few developments we'll create four these will be boxes for the class I will set that to be box the first inner development will have an ID of box one the inner text will be one let's copy our inner development paste it three times for a total of four change box 1 to box two for the next element then three then four and that's all we need for our HTML file let's go to our style sheet we'll style our boxes we will select the Box class I'll set the width to be 150 pixels same thing goes with the height let's change the background colors we'll begin with the ID of box one I will set the background color to be something red I'll use hsl values because I like them let's go with that then let's color box two box two let's make that yellow box 3 will be green then box 4 will be blue let's change the font size real quick font size 8 em then text align Center I'll add a border radius just two round of the corners border radius 15 pixels and that is all the setup we'll need we are ready to begin with our container class we can Flex all of the elements within this container meaning all of these inner div elements so we'll take our container class dot container then set the display property to be Flex you can see that the positioning of these elements has already changed by default the flex Direction property is set to row you can see that there's no apparent change when I refresh the page for a row but in reverse order we can set Flex direction to be row reverse so now one is on the right hand side followed by two three then four to arrange these elements within a column we can set Flex direction to be column or even column reverse then at the bottom we have one then two three then four so that's Flex Direction let's delete the flex Direction property then we have the justify content property justify content sets the alignment on the main axis think of the x-axis by default it's Flex start there's no apparent change flex and would justify the content at the end see we're beginning with four then three two and one when we had Flex Direction set to row reverse it was one two three four but in this case it's four three two one then there's Center if you need to Center align these elements on the main axis we can place the extra space evenly between each of these elements by setting justify content to space between and if I were to expand this page the space between them is increasing you also have space around the area outside of these elements is also included now with space around then we have space evenly all right and that is the Justified content property we can justify elements on the main axis then there's the cross axis think of it as the y-axis up and down what we'll need to do in this example is expand our container just to show you the size of the container I will add a border to The Container class border 10 pixels solid black here's my current container I will increase the height of the container let's set the height to be 90 viewport height units so this is the total size of my container now ninety percent of the height of the web page what we'll use now is the Align items property which is used for the cross access align Dash items the default is flex start there's no change flex and we'll place these elements at the bottom of our container then there's Center align item Center that will place them in the middle of the Cross axis then there's Baseline so with Baseline the text is going to be aligned they're all the same size though we can't really notice the difference with box one let me change the font size font size 1 em you can see that the number one is aligned with the rest of the characters so if I were to increase the font size you can see that they're still aligned but let's eliminate that font size property let's delete our aligned items property we'll need more elements let's copy our four inner developments paste them we should have a total of eight one two three four one two three four you can see that these items are getting squished now they're all being compressed we can set the flex wrapped property so with our container I will set the flex wrap property to be wrap these elements will now wrap if there's not enough space if I were to expand the size of my container there's now enough room but if we run out of room they'll be pushed down further down the page by default Flex wrap is no wrap otherwise there's rap reverse now they're in reverse order let's use flex wrap now Flex wrap is used along with another property named align content align content if I were to set align content to be Flex start all of that space between the first row and the second is now gone then there's Flex end Center space evenly then space between use any combination of properties that I've demonstrated let's keep Flex wrap as wrap but I'll use flex start you can also add a gap between the rows and the columns between each of these elements let's set a column Gap column Dash Gap to be one em that adds a gap between each of the columns for the rows that would be row Gap I'll set that to be 1em you can also use pixels as well so here's 2 em 3 let's delete our Gap properties all right let's also delete the extra four boxes that we have we're also going to get rid of the flex wrapped property as well as align content there's also the Align self property that can be applied to single elements so with box one I will set a line self to be start that's the default this element will be aligned at the top of our container if I were to change line self to be Center this single element is aligned in the center of my container on the cross axis then we have end that will align at the bottom the Align self property can be applied to any of these elements let's do that with number two line Dash self at the start there's no change Center end okay let's delete the Align self property we can use order to change the order of these elements with box one I will set the order to be one that will place number one at the end negative one would be the beginning which it normally is already with box 2 I'll set the order to be one that will place two at the end but if I set it to be negative one it's now at the beginning all right everybody so that is a quick introduction to flexbox there is a lot to talk about and that is all the time that I have for this topic and well that's an introduction to flexbox in CSS hey what's going on everybody today we're going to cover the transform property in CSS the transform property lets you rotate scale skew or otherwise translate an element here's what we're gonna do we'll create a div section I will give this div an ID of box one then within the Box let's say the word hi let's head to our style sheet within my style sheet I will take our ID of box one set the width and height to be 250 pixels then I will give this div section a border of 5 pixel solid let's increase the font size 13 em is fine then text align Center hey let's change the background color to while we're at it I'll pick a greenish color that's pretty good I'm also going to remove some of the margin around the body of our document body margin zero all right so the transform property the First Transformation I'll show you is translate we can translate X on the x-axis Translate Y on the y-axis or both with just translate let's begin with translate X so after translate X add a set of parentheses whatever value you place within the set of parentheses we will translate this element on the x-axis if I were to set translate X to be 50 pixels this element will move to the right by 50 pixels that's 100 200 negative numbers will move the element to the left percentages are fine too if I set translate X to be one hundred percent this element will translate to the right by 100 percent the width of this element with a negative percentage that will translate the element to the left it could effectively hide that element then with negative 50 we should see just half of this element A lot of these Transformations can be done in pixels or percentages there's also Translate Y for the y-axis if I were to translate by 50 pixels on the y-axis that moves the element down negative 50 would move the element up by one hundred percent we will move this element down by 100 percent the height of the element that negative 100 will effectively hide the element you can combine both of them too with just translate but you need two values the translation on the x-axis then the y-axis if I set the first number to be 50 well 50 pixels that's an X translation the second value is a y translation now we're moving the element to the right and down negative values will move the element to the left and then up those are translations for the transform property then we have rotations we can rotate on the x-axis within rotate X we set a number of degrees if I were to set rotate X to be 45 degrees We Begin rotating on the x-axis that's 45 this is 90. you can't even see it 135 with 180 it should be kind of upside down that is an X rotation then we have y rotate y we'll start with 45 degrees that's 45. 90 you can't even see it anymore 135 180. then lastly we have Z rotation that's 45 this is 90. 135 180. those are different rotations their scale we can scale X or scale y one corresponds to 100 percent 1.1 is 110 percent if I were to set scale X to be 2 we're scaling this element on the x-axis by 200 percent 3 would be 300 percent any value below one would in a way compress it on the x-axis and here is 0.25 we also have scale y scale Y is set to 2. would scale this element on the y-axis by 200 percent that's 300 here's 0.5 and here's 0.25 you can combine both X and Y2 with just scale but you need two values so by default it's 1 1 for 100 let's scale on the x-axis and the y-axis by 200 percent and here's 300. that is scale then we have skew skew X or skew y if I were to set skew X to be 45 degrees we are skewing this element on the x-axis here's 90. 135 and 180. the same applies for y here's 45 90 135 180 you could combine them both with just SKU then again you need two values following that same pattern you can apply more than one transformation at a time let's begin with translate X by 100 percent and then we will rotate on the z-axis by 90 degrees let's add a scale as well I'll shrink this image by 50 percent so yes you can apply more than one transformation at a time these Transformations can also be applied to a class let's create two additional boxes box one box two box three I'll give each of these elements a class of box I'll remove this transformation I will select the Box class take all of these properties cut them besides the background color then paste them within the Box class then let's color in our two other boxes box one box two box three I'll make box two red foreign box three will be blue all right let's apply some transformations to the class now I will set the transform property let's translate on the x-axis translate X by 100 pixels then let's rotate on the z-axis by 45 degrees then I will shrink these with scale set to 0.5 you also could apply these transformations to images I just so happen to have a picture of Shrek in my computer I think everybody should have at least one right that image just saved within my website folder let's delete these boxes that include that image image source equals the relative file path of the image all right let's take our image I will apply the transform property let's Translate our image on the x-axis by 100 percent then let's rotate Shrek on the z-axis by 180 degrees let's scale Shrek in the x-axis by 200 percent scale X two all right I don't know what the point of that was but I thought it would be a fun exercise all right everybody so those are transformations it's a CSS property that lets you rotate scale skew or otherwise translate an element and those are a few basic CSS transformations hey what's going on everybody today we're going to create some animations using CSS all right let's get started everybody we will create a development with an ID of box then within this box let's say the word hi let's go to our style sheet let's select our ID of box I will set the width to be 250 pixels the height to be 250 pixels I'll change the background color let's pick something red let's change the font size 13 em is fine then text align Center to use an animation we first need to create an animation using a keyframe rule that can be done with typing at keyframes then a unique animation name let's create an animation to slide this element from the right to the left the name will be slide left then add a set of curly braces within our keyframe there's a few possible values you have two from or a percent such as 0 50 100 really any number we'll begin with a left translation for our element to end up in its resting position we will use from then add a set of curly braces just like we're adding CSS properties within our keyframe of from we will set the transform property to be an X translation translate x parentheses this can be an amount or a percent let's begin with 100 pixels so now I need to set the animation name property within our box animation name will be slide left but when I refresh everything nothing appears to happen that's because we need to set the animation duration property animation duration how long will this animation take to complete let's start with one second that's one s there's our slide animation feel free to adjust this value if I set this to be two seconds and slightly slower let's change translate X to a different value like 100 this element is translating on the x-axis by 100 the width of the element if I were to set this to a larger number like 300 it's going to appear off screen in my example then slide into place but that also depends on how far you're zoomed in or zoomed out and the with your web browser let's create an animation to slide right let's copy our keyframe rule rename slide left as slide right we'll use the value of 2. we'll begin in our original position we're setting this animation to end up in this position with our element translated to the right by 300 percent let's change the animation to slide right and now we slide to the right okay let's slide up keyframes slide up we'll set the value to be from then we will translate y change the animation name to slide up there we go then slide down all we really need to do is change this value so that's slide down change from to be two then change the animation name again slide down let's create a rotation animation at keyframes rotate so we can use from or to or a percent let's use percentages at 100 percent what sort of transformation do we want to complete let's use the transform property then do an X rotation rotate X buy 360 Degrees that's one full rotation okay let's change the animation name to rotate now we should rotate once on the x-axis let's rotate on the y-axis rotate y then rotate on the z-axis rotate Z so those are a few rotations now check this out if I were to set the keyframe value to be 50 we will complete this animation at the 50 Mark then from 50 to 100 in a way we undo the animation we'll rotate once and then revert back complete the animation at fifty percent of the length of the duration then with the other fifty percent of the time remaining return that element to where it was previously if I were to mess with these values let's say 25 percent will complete the animation in half a second then with the other 1.5 seconds we return to normal that's why the animation goes fast then when it's undone it goes fairly slow you can mess with these values depending on what you're looking for exactly yeah you can use from two or a percent okay let's create an animation to grow this element we'll scale both the width and the height at keyframes grow at the 100 mark let's set the transform property to be scale then we can use two values two means two hundred percent for the width scale that up by 200 percent same with the height 200 percent let's change the animation to be grow then this should grow then when the animation is complete it snaps back into place but if I were to set this value to be 50 percent it's going to grow then shrink back into place in one smooth motion let's create an animation to shrink at keyframes shrink the 50 mark let's use the transform property then scale by 0.5 comma 0.5 that will be 50 for the width and the height let's change the animation name to be shrink and now we'll shrink this element then it reverts back into place okay let's change the opacity at keyframes this animation name will be fade at the 50 mark let's change the opacity we're not using the transform property this time let's set the opacity to be zero then change the animation name to be fade now we'll Fade Out then back in again if I were to set this value to be 100 this element will fade then when the animation is normal it reverts not smoothly though let's set that to 50. now if you want a fade in effect what we can do is with our box originally we can set the opacity to be zero then at the 100 keyframe the opacity will then be one so this is fade in let's say so the element is originally hidden then it fades in let's get rid of the opacity let's change the color of our element at keyframes color change so at zero percent let's have the background color be red I'll copy the current background color I'll change the animation name too color change then at 20 percent let's set the background color to be orange so we're going from red to orange then at 40 let's pick yellow 60 will be green 80 will be blue then 100 will be purple there you can take the Liberty to pick whatever values you would like let's create a glow effect around our element at keyframes glow this animation will complete at the 50 mark we'll add a box shadow the first value is for the horizontal offset we'll set that to be zero the next value is for the vertical offset which will also be zero then the blur radius I'll set that to be 50 pixels then a color let's go with the yellowish color all right then we need to change the animation name glow then our element glows it's a little difficult to see though with the white background let me change the background color so with the body of our document I will set the background color to be a dark color there's our glow effect you can start animations with the pseudo class for example I want this glow animation to occur when I hover my cursor over the element I am selecting my box ID then applying the pseudo class of hover I'll take the animation name and the duration then place it within the Huber pseudo class for our box then this animation only begins when I hover my cursor over the Box pretty cool right if I were to use the active pseudo class this animation only occurs when I left click and hold the element which I am doing right now let's place these properties back to change the iteration count for an animation to have it occur more than once we can set the animation iteration count property to be some other value besides one if I set this value to be 2 we will perform this animation twice to have it perform infinitely set that to be infinite I would not recommend setting an animation to be infinite just because a viewer can find it annoying unless that's the goal to annoy the viewer alright there's also animation Direction animation Direction normally this is well normal we can change the direction of the animation by setting normal to be reverse now we're sliding to the right to alternate set the value to be alternate we're sliding left then sliding right then sliding left again there's also alternate reverse We Begin by sliding to the right then to the left and then to the right again let's set that to be normal to pause the animation we can set the animation Place state to be paused now the animation is paused to run it again set this value to be running this would be useful in conjunction with the programming language such as JavaScript because we can toggle this animation on and off there's also the animation timing function normally with this animation it accelerates then slows down it decelerates the default value is is in out it speeds up then slows down before it reaches its destination for a constant speed we can change that to be linear through the entire animation duration it stays the same speed there's also steps for a sort of stop motion effect within this function if I place the value 5 there's five steps if this was 10 there's 10 steps to complete the animation it creates a stop-motion effect let's change that back to ease and out let's set the iteration count to be one the next timing function is for cubic bezier let's right click on our box inspect underneath our Styles tab look for animation timing function if we were to click on this purple box we can change the timing function currently it's ease and out and there's a little sample animation at the top this is fast out linear in ease out or by dragging and dropping this line we can make something custom like I don't know what this does to use this animation copy this line of text for cubic bezier replace the animation timing function with that line of text so now we have that custom animation I don't really know what to name this animation let's name it the Electric Slide for a final exercise let's apply an animation to an image I just so happen to have an image of Shrek let's have Shrek perform our electric slide animation let's replace our box with an image element set the source to equal the relative file path so Shrek is right next to my index file shrek.png let's copy all of these animation properties cut them we'll select our image then paste those animation properties now Shrek will perform that Electric Slide animation pretty cool right all right everybody that is an introduction to animations using CSS foreign