Tailwind CSS Full Course for Beginners | Complete All-in-One Tutorial | 3 Hours

[Music] hello and welcome to nearly three hours of Tailwind CSS tutorials and instruction this video is made up of five tutorials that build upon each other much like the chapters of a book throughout the lessons in this video I will mention links available in the description below I've compiled all of these links into one GitHub resource that you will find in the description hi I'm Dave gray and I'm the creator of these Tailwind CSS tutorials you can subscribe to my YouTube channel for more tutorials like this one you can also follow me on Twitter and if you're feeling generous you can even buy me a cup of coffee I've also recently started a Discord server and I've provided a link for you to join in the description below it's a great place to post any questions you have about this video and a chat with other web development students too let's get started learning Tailwind CSS with chapter one what is Tailwind CSS and what makes it different from regular CSS Tailwind C SS is a utility-first framework that offers many predefined classes to help you as they say rapidly build modern websites without ever leaving your HTML other popular CSS libraries and Frameworks like bootstrap material UI and others they're more opinionated and that is to say when I see a website styled with bootstrap or material UI I visually recognize it Tailwind CSS applies one CSS rule at a time it just uses predefined classes and that makes it very flexible and you can still style an element any way you want now the strength of Tailwind is that once you learn the classes you can apply it very quickly definitely faster than writing CSS from scratch you can see some of those example class names right here on the home page for Tailwind CSS now that said let's look at an example those that say they prefer not to use Tailwind CSS usually talk about how many classes it adds to their HTML and they think it adds clutter but I'm going to show you how to work around that today too and I really think you're going to enjoy learning Tailwind CSS so let's get started step one is to make sure you already have some knowledge of HTML and CSS if you're unsure of your HTML and CSS skills I recommend completing my beginner's courses for both and I'll link to these in the description I'll be assuming you do know CSS during this tutorial and if you already know CSS learning Tailwind CSS becomes much much easier step two is to make sure you have all the web dev tools you need we'll be using the Chrome browser in this tutorial and I'll give a link to where you can download Chrome if you don't have it we'll be using the Visual Studio code code editor and I'll give this link in the description where you can download visual studio code as well now I'm hoping you're already familiar with those we'll also install an extension or two for visual studio code once we have that up and running and then we need to install node.js you will not be writing any JavaScript that's not what this is about but you do need the node package manager to compile your Tailwind CSS code and don't worry if that sounds complicated I'll show you how easy it is to do that but go to the nodejs.org webpage and download the version that's recommended for most users that you should see over here whatever that version is is the one you want go ahead and install that and then we'll go to vs code that is Visual Studio code and if you haven't installed that of course do that as well and then we'll look at our version of node here I've got my visual studio code pulled up right now I'll make it full screen I'm going to press control in the back tactic and in a terminal window like this we can type node Dash V after you have installed it and you can see what version you have you can see I have version 16.16.0 right now now in Visual Studio code I have an empty folder open and I just named my empty folder lesson one so go ahead and create an empty folder on your computer and open that up in Visual Studio code as well after you've done that we want to go to the extensions icon over here on the left and we'll check to see if you have live server installed type live space server and you can see I've got the live server extension I'll click on that it shows us the full extension I've already got it installed and when you have it installed it should then say uninstall and disable and we don't want to do either one of those because we do want to use this it will provide our web page and it will automatically refresh it when we make changes but there is one setting change we want to make while we're working with our CSS and especially Tailwind CSS so click the little gear here for the settings and then choose extension settings once you're there it will highlight this in the bar you can just press space and what we want to search for is full reload and you'll find live server settings full reload by default this is not checked and you'll want this checked because it says live server does not inject the CSS changes or this is by default live server injects the CSS changes without full loading of the browse full reloading of the browser we want that full reloading because we'll want to see our CSS changes right away also so go ahead and enable that for live server and make sure you have your live server enabled and now we're ready to begin working with Tailwind so make sure that you have created that empty folder like we talked about I'm going to press control and the back tick again you could also so go to the terminal menu and choose new terminal either way we're opening this terminal window and what we want to type here is going to be npx and that comes from that node package manager that I said we needed that's why we installed node.js after that we want to type Tailwind CSS with no spaces and then init i n i t and press enter this is going to create a Tailwind config file and we need that for our project now let's go to the file tree and let's click the little folder icon and we'll create a new directory here I'm going to name this build and then I'm going to create another directory and I'm going to name it SRC which is short for Source now in the build directory so we'll highlight that I'm going to create a new file name it index.html in the index.html file I can type one exclamation mark and this is an emit abbreviation so when I press tab I get the outline of an HTML document already and notice it's just called document right now that's fine we just want to go ahead and save this file I do that with control s and I can close the terminal to see that full listing here and you see it's an empty HTML file but we do have our HTML file now and that's really all we need to go ahead and set up our config for our content we need to tell Tailwind where our HTML is so that it can get the classes that we are using to include in the style file that we will create with Tailwind so what we'll do here inside this content where you see the two brackets I'm going to put a single quote and then a period so a DOT and a slash and that means inside of a directory and we're navigating by the way from the config file so we're going to go dot slash and then into the build directory so build then another slash and then I want to put an asterisk and then dot HTML and this says don't just look for my index.html but look for all HTML files that are in this build directory and from there I'm just going to control s to save the config file and now we also created a source directory so inside of this let's create a new file I'm going to name this input.css inside of this input CSS I'm going to paste these three lines in here but once you see them you'll want to put in the same you put the at symbol like you have in an email address and then tailwind and then a space the first line says base the second line says components and third line says utilities what Tailwind does is it compiles the CSS from this input CSS file and it will create it for us inside of the build directory where we tell it to and so what this does is it pulls in everything that Tailwind defines and then if we want to we can Define our own CSS classes underneath this as well well so I'm just going to save this file as is because this is all it needs right now you might have noticed vs code is giving us a warning here as it has the squiggly underline underneath our at tailwind and if we go ahead and press Ctrl back tick once again to open up our terminal window we can see problems and it says three problems and then it says an unknown rule at Tailwind well this isn't really a problem with Tailwind but it's something we can get rid of in vs code so let's go to the file menu then go to preferences and then settings from there we can search for unknown and there it is our CSS linter it says that's a warning let's just set that to ignore and now it doesn't give us those problems it's really not a problem at all it's just something that is not understood here so we'll go ahead and eliminate the problem to begin with and we can close our settings and we have no more squiggly lines underneath our at Tailwind let's once again open up a terminal window and we'll use npx again so we'll type npx and now we want to type Tailwind CSS and we're going to type Dash I for input and then we need to specify where our input file is and it is in the dot source so it would be dot slash SRC we're looking once again from our root into the source directory and then at the input.css file so after dot slash Source it would be slash input.css and then we have Dash o for output and we want it to Output the compiled CSS inside of dot slash build slash CSS and then slash style dot CSS so let's go ahead and press enter and we should see that we get our CSS directory created inside of the bill directory and inside of that directory we now have a style.css let's quickly look at this file and I'll close the terminal once again and you can see it contains the Tailwind Styles and really it's just minimal because we're not using them all so we've got 500 in some lines so those are the base Styles essentially once we start using more Tailwind is smart enough to say hey they're using those different styles that we have in our library and we need to include those when we compile this file it was previously called the just in time compiler but now that we're at Tailwind version 3.1 it's already included so we don't even have to say we're using the just in time compiler it just does it automatically that is great so after we've created our style CSS let's go into this index.html and now let's add a link tag so we'll have a link and it's going to be CSS and it provides the style.css already if you choose it from that drop down intellisense menu like I did if not just make sure you type in what we have but you also need to add that CSS folder because here we're at the index file then we have to look inside of the CSS directory and then at the style.css let's go ahead and add some content to our web page I'm going to type a div and then with emit abbreviations I can just type a period and then the class names that I want afterwards so I'm going to type BG Dash emerald-500 which is a color class name in Tailwind CSS after that I'm going to type w-52 that sets a width and then h-52 that sets a high right press Tab and you can see all three of these classes were applied to this div I'm going to save the HTML we need to bring the terminal back up and once again we need to compile the CSS if not this won't be included so we can pull this up to once again compile the CSS like we have in the past but what might even be better if we were to type the same line which says npx Tailwind CSS Dash I and then of course highlights where the input CSS is and then Dash o for the output highlights where we want the output and I pressed the up Arrow by the way to pull my command back up so that's the down arrow here's the up Arrow so it just brings up what I used last time after that two dashes and watch now after we put this in motion it will continue to run and it will watch for any changes we make so any classes we add to our HTML will recompile that CSS file and we'll see those changes on our page page so let's go ahead and press enter now with the watch flag added you can see it is rebuilding and it has completed the style CSS and we're ready to take our web page live with live server so I'll close the terminal that will continue to run and for live server we can right click and choose open with live server we could also use the keystrokes it shows here or what I often do is go to the bottom of the visual studio code and just click go live which is right here so that's what I'm going to do now it should pull up the browser it loads our page and it's a lot of bright white but it does have this emerald green square that I created as well I drug CSS or I drug Visual Studio code over here to the left and then I'm going to press alt or I'm sorry control B to hide that file tree so now we can see our web page on the left and our browser on the right let's add a couple of more classes to our div so I'm going to say rounded Dash full and and after that I'm also going to add Shadow Dash 2XL and then I'm going to save and we have a circle with a shadow that you might notice as I am typing these different classes so I'll go ahead and delete the shadow again and retype it so Shadow Dash 2 XL I'm getting some intellisense here that is telling me what is available from Tailwind now let's go ahead and install the extension so you get the same I'm going to pull Visual Studio code back over to a full screen temporarily click the extensions icon and let's back this up and here we'll choose Tailwind or what we'll search for is Tailwind CSS and then intellisense and I have this installed and this will be very helpful for you as well because the intellisense will pop up a menu showing you those colors showing you those other classes you can choose from as you start to type and that is very helpful very useful Visual Studio code extension to go ahead and add and it is official it is from Tailwind Labs as well okay let's go back to our code now I'll close out the intellisense tab I'll press Ctrl B to hide the file tree again and drag Visual Studio code over to the left side of my screen so we can see what we're building on the right now let's say I would like to Center our Circle in the center of the page right now I haven't set the height to be the full height of the page yet so that's something I would normally do on the body element let's go to the Tailwind CSS website and use their website to search for settings and we can just search for Min height and this is where it's very handy to already know CSS because the names that Tailwind uses is very much like the actual CSS rule that you would set so when I search for Min height I can bring that up I find all of these different settings and I Want A Min height of 100 VH that's what I would use viewport units in CSS so here here the class is min Dash H dash screen so on the body I'm going to set a class and set this to min Dash H dash screen and then I'm also going to put a couple of other classes so I'm going to put a grid and say this is a display grid all I have to do is type grid there and then place content Dash Center as well and with those classes applied we'll save and now let's go back to our page and our circle is in the center so I can't over emphasize enough how helpful the Tailwind website is and it's so easy to just search for what you're looking for so if I wanted to look at Shadows I could type in Shadow here's the drop shadow and then we see all the different classes that are available and it's telling you the actual CSS that it sets also we'll go back to the page we're creating once you have that intellisense installed when you go ahead and mouse over one of the classes you have applied you can see the CSS that the class is actually applying so here I'm over the place content Center and you can see what that actual style what that actual class is in CSS okay now let's say we want to place another circle inside of the circle we have so let's go ahead and make this first Circle a grid also we'll also add place content Center to our first Circle and now inside this circle we'll go ahead and add another div and from there we'll add a background of teal-200 and then w-32 for the width height Dash 32 and then rounded Dash full and press Tab and we get all of that so let's go ahead and save our file now and we have a circle within our Circle and before we're finished with this small example let's create one more so now we'll say div and then we'll add BG Dash red Dash 500 now w-16 and height Dash 16 and then rounded Dash full once again press Tab and we have another div but what we didn't add was on the parent here we need a grid and once again a place Dash content Dash Center save and now we have a bullseye on our page I'm going to temporarily drag Visual Studio code back to a full screen and control B to show the file tree let's look at our input.css one thing we can add here possibly is a background that we want something that's custom but before we do I guess we should see if it exists inside of Tailwind so I'll bring this back over Let's Go full screen on our search here and let's search for gradient so gradient and we have gradient color stops that came up maybe linear gradient let's see what we get there and here are linear linear gradients and we can easily see how to define those here in Tailwind but what I am not seeing and I'll search for that as well is a radial gradient no radial so there's a few things that Tailwind may not supply or maybe I didn't find it and I need to look a little further but either way I'm going to define a radial gradient class here for my background inside of this input CSS remember I said these three lines bring in the Tailwind libraries the base the components the utilities but we can also Define our own classes so I'm going to put radial Dash blue and then inside of this I'll put background and I will set it to a radial gradient and I'm going to start with a light yellow and then I'll end with sky blue once I save that I'm going to go to the HTML and back here on the body I'm just going to apply that at the top here so radial Dash blue as a class to add now let's drag this over and we'll look at our page once again and you can see we have a light blue and it's light with that light yellow in the center and it just works its way out to this nice light blue as well so now you can see my code is all scrunched and it doesn't look too great I'll bring this back over to a full screen it's going to look a little bit better but you can see compared to normal HTML we would write where the CSS is abstracted to another file adding all of these classes does add quite a bit but there is a way to work around this and again it's with a vs code extension so let's search for inline fold and see what we get here we go inline fold a custom decorator that folds matching content it says so let's go ahead and we can scroll down to look at more of what this does but let let's go ahead and install and let's see what we get after it's installed so it's installed now this is uninstall and disable so it looks like everything is good go back to our project and close that out look what happened to our row of classes they're all now dropped down to these three dots makes our page look much more organized and then when we need to work in one of those lines we just click in the line and when we click away it hides those classes again so this inline fold extension really removes one of the big complaints that I've heard about Tailwind CSS that it makes the HTML clunky or filled with too many classes this way we only have to look at the classes when we're working on that specific element so I will link to all of this code in the description under the course resources and really this intro to Tailwind may be all you need to get started working with Tailwind CSS because the more you work with it the easier it will become and if you already know CSS you can pretty much just go to the site and search for whatever property whatever rule you're looking for and you'll probably find it on the site and know what name to use and also that intellisense extension will help but if you continue with me on this series we're going to have some fun and create a project that will of course help you get familiar with Tailwind CSS and learn more along the way we're going to build a website for the Acme Rockets company you can see their page starts with a hero section then it has an hour rocket section where we have cards for the different Rockets the Acme rocket company sells there's a testimonial section with satisfied customers and there's a contact us section and at the very bottom there of course is a footer now I'll go back to the top and I'm going to press Ctrl shift and the letter i to go ahead and open up Dev tools and you can see I'm in an iPhone 678 view here and we have a hamburger menu and each part of the page each section then gets its own display as well so we can scroll through that and then we can get to the testimonials or we can once again use that mobile menu and then there is a contact us section here as well and eventually the footer also and then let's go ahead and switch this to responsive because now you see how this widens out and we can see different parts or different sections all in one part of the viewport so we're going to put in a couple of media queries that respond to aspect ratio so as it gets narrow it changes to the mobile viewport and then as it gets wider it goes ahead and changes how it displays everything once again more like it would for an iPad or a more Square viewport and then as we get very wide more like a 16 by 9 aspect ratio then we have each section take up its own viewport on the page once again so it separates them out and we'll Implement all of this with Tailwind as it's supported now Tailwind also supports light and dark mode so I'm going to the personalized section of Windows here and changing my color theme from dark which I prefer now to light and I can bear this long enough to at least show the different theme and we have our hero section once again all in light mode now you can see the Rockets have cards in the rocket section the testimonials are styled differently as well the contact is form here and the footer also so we're also going to control light and dark mode now I'm going to switch this back because most of the time we'll keep it in dark to save my eyes but we'll occasionally go back to the light mode and check that out as well so now that we've previewed the project let's set up our Dev environment and get to work we're starting today with an empty folder opened in vs code so go ahead and create a folder for the project on your computer and then open that empty folder with vs code after that I'm going to press control on the back tick to open up a terminal window and the very first thing we're going to do is type npx Tailwind CSS and knit and go ahead and press enter after that it should create a Tailwind config file and after that we need to go ahead and set up our project structure so I'm going to just click in the file tree create a new directory and name this build and then click here again and create another new directory and name this sort course now while I have the source directory highlighted I'm going to create a new file inside of it named input.css in this file I'm going to start out with at and then tailwind and then put base now I'm just going to copy this down three times Well twice I just need the full line three times and on the second line I'm going to switch base to components and on the third line I'm going to switch base to utilities and I'm just going to save this this is all we need in this file for now now I'm going to highlight the build directory and I'm going to create a new file named index.html press enter then I'm going to create another new directory inside the build directory and this will be named image just IMG and then I'm going to paste in some image files that I have and these will all be available in the course resources for you under lesson two so I'm going to right click here and choose paste and we should get the four Images we have our rocket dab and then we have a rocket launch a rocket man and a rocket ride now these are pngs and they have transparent backgrounds and we'll use those in the page I'm also going to paste a fave icon dot Ico which stands for Icon here inside of the directory so at the top level not in the build or in the source however if you were to deploy this project you would deploy everything that was in the build folder at that point you would also want this fav icon to be in the build folder but for us to see it during development we need to put it in the root so that's where I'm going to leave it right now and now inside of the Tailwind config file we need to put in the information for our content and if you remember from the previous lesson this is structured the same way so I'm going to put in quote symbols first and then dot slash we're looking in the build directory and then another slash and an asterisk meaning all of the files that have the dot HTML extension and that's really all we need to add to the the config file for now I'll close this icon file here and go ahead and close the input CSS we'll be working in the HTML file but I'll go ahead and close the config file also now at the command line in the terminal here once again we want to go ahead and initialize npm and so to do that I'm going to type npm init Dash y now in the previous lesson you should have installed npm when you installed node.js so you should have this on your system already I'll press enter this is going to create a package Json file so this is another type of config file and we'll be able to use this to make some things easier for us in the previous lesson you may remember we had to type in the terminal window and tell Tailwind where our input file was and where to Output our style.css file well we can change this to a script in this package Json so I'm just going to change this test to tailwind and then I'm going to highlight the existing script here and just change it so we'll put this as npx Tailwind CSS Dash I for the input and then dot slash source and then we'll have input.css this is where our input file is then we'll have Dash o for output and Dot slash build and we want to put it inside of a CSS directory and then have style dot CSS but we're not quite finished we need to put dash dash watch at the end so it will constantly look for changes and then update that style.css file after that you can save the package Json file now before we're finished with our package Json let me go ahead and press Ctrl back tick once again to open up a terminal window and we want to install a development dependency and we can do that by typing npm not X but npm and then I for install then Dash capital D which tells npm this is a Dev dependency and then we want prettier Dash plugin Dash Tailwind CSS and press enter and we'll be able to see this Dev dependency now installed inside of our package Json it's listed here as a Dev dependency and now we have a node modules directory over here inside of our file tree and because we have that now we haven't initialized a git repository but I assume you'll want to save your code to GitHub with Git just like I do and this is always a good habit once you have a node modules over here you don't want to send that to GitHub so let's create another new file in the top level here not inside one of the folders that starts with a period so dot get ignore and inside of this kit ignore file we're going to list node underscore modules and that will ensure it's not included in our code repository that is sent to GitHub and now before we're finished with our package Json I'm going to press alt Z so the code wraps and I see the end of the line because I need to put a comma here I want to go ahead and put in a script for prettier as well so I'm going to put prettier here and then I'm going to have npx prettier dash dash right and now this part is important we're going to tell it to look for all HTML files and only HTML files and so this is two asterisks slash asterisk dot HTML and what we're doing is telling prettier to only look for our HTML files and it will only format them and that is what prettier does it formats the files what we're going to use prettier for concerning Tailwind CSS is the class order and that's because Tailwind has provided this prettier plug-in and they have recommended class order that the classes be listed in we won't have to think about that as we write out the classes we can just style the components as we think of the classes and then afterwards we can run prettier and it will auto format that HTML and organize the class list for us and that's especially important if you're working on a team and that way you're always used to having the classes listed in that specific order and prettier will format all of the files in the same way no matter who's working on them now to get started we need to run our Tailwind script and we can run either one of these Scripts by typing in the terminal window the first thing we have to type is npm run and then we type the command name so I'm going to have npm run tailwind and press enter now you can see it's running the command and after this let's see what we have we have a CSS directory now inside of our build directory and we have a style.css file now we currently have a couple of warnings because we didn't really link to our HTML yet so it doesn't have any HTML to check so These Warnings will go away no worries there let's go to the index.html we'll start by typing an exclamation mark which is an image abbreviation and then we press Tab and it gives us the outline of a page so we're going to change the title of the page to Acme Rockets just under the title line let's go ahead and add our link to our CSS and if you choose the link colon CSS image abbreviation from the intellisense menu it will fill in the rest for you it's a style sheet and we have a style.css file and that's what's in our directory over here but notice it's not telling it to look inside of the CSS directory so we do need to add that part to the href value now let's start by adding some classes to the body element that already exists because we used that image abbreviation so here we're going to put Min Dash H dash screen and since we've installed the intellisense for tailwind and we did that in the previous lesson we can now Mouse over the class and see whatever the actual CSS rule would be so this is a Min height of 100 VH we can add some more and review those and we'll occasionally reference the Tailwind site as well so now I'm going to put a VG slate dash 50 so this would be the background for our light theme and you can see when we Mouse over this it has a background color that's a little more complicated but overall you see the RGB value for this color after that I'm going to put a dark background and now I just put the word dark and a colon and then I can say BG Dash black and that sets the background for the dark mode likewise I'm going to put dark and I need to change the text color for the dark mode and make that text color white so we already have Tailwind checking out our HTML and looking at the classes and then of course compiling that into our style.css now we can use that live server extension and go ahead and start the page and we'll see what it looks like and you can see it's completely black as I am using a dark mode preference now I'm going to drag vs code to the left so we can see the page on the right I'm also going to press Ctrl B to hide the file tree and all Z so any long line wraps down to the next line so we can see it but now we'll be able to add classes and content to the page and see the changes in real time over here on the right now let's add a header to the page so I want to start off by typing header but then I can add classes Within by typing a DOT afterwards and then the class name so I'm going to add several classes now BG Dash tl-700 which would be the background for the header and another Dot and text Dash white and another Dot and sticky which would be position sticky and then dot top Dash zero so that puts it at the very top with position sticky then dot z-10 which changes the Z index when I press tab you can see all of these classes are applied to the header and now we need to add content inside the header but before we do I need a section wrapper so I'm going to add a section element and for the second section I'm going to add a few classes too I'll give this a Max width so this is Max Dash W Dash 4XL and then I'm also going to add Auto margins on the x-axis so that is MX Dash Auto after that I'm going to put p-4 and that's some padding and then I'm going to set the display to flex and then justify between which is setting the justify contents to between and we can look at each one of these afterwards so I'll type between if I could spell there we go and then after that I also want items Dash Center which would align the items so I press Tab and we see all of those added and then I'll add a space here but let me Mouse over the max width 4XL sets the max width to 56 rims or a width of 896 pixels now I set that on the section and not the header because no matter how wide the page gets I want this teal color to extend the full width of the page but the section is actually going to be centered with the auto margins that we have here with MX Auto and you can see that's margin left and right Auto and that will Center the contents of the header which we will allow to get no wider than we set here that 896 pixels or 56 Rim we have some padding all the way around not left right it is all the way top and bottom also that's padding of one REM display of flex this would be our justify content space between when we say justify between an item Center is a line item Center and now we can add our page title so I'll type H1 and I'm going to give a class here of text Dash 3XL and another class of font Dash medium go ahead and press tab so we have our H1 and inside of this I'm going to put Acme rockets and now you can see we have our Acme Rockets up here in the top left of the menu I'm going to go to this website now emojapedia and I can just type in rocket and here is the rocket emoji and I can click copy I'm going to put that emoji right here beside Acme rockets and save we'll go back to our page now and we can see we have Acme Rockets right here with the rocket now in the top left this is also going to be an anchor link and it's just going to link to the top of the page which we're going to call hero so I'm going to put in the pound sign and hero make this just a page anchor and I'm going to highlight and Ctrl X to cut and put the closing anchor after Acme Rockets now we can notice several things about our page right here one we didn't have to style the link any differently and there is no underline however it is a link we can see our Mouse changes to a pointer over Acme Rockets also notice there's no padding on the page our header is right at the top and we didn't have to put in a reset that's also in there by default with Tailwind okay I'm going to scroll for some more room and under the H1 I need to put in a div I will not put any classes on the div it is just a wrapper now inside this div I am going to put a button element and the button is going to have an ID so we can type a hashtag and put the ID afterwards and this is mobile Dash open dash button for the ID and then we can put the classes by starting with the dot so I'm going to have Dot text Dash 3XL and then dot SM colon hidden dot Focus colon outline Dash none and press tab I'm going to press enter here to give a separate line where we can put the content and the content is going to be in HTML entity and I can do that with the Ampersand and then the pound sign and then 9776 in a semicolon this is actually a hamburger icon and we can look that up and other icons on this unicode-table.com website and I'll put links to both of these resources in the description but here you can see I looked up double quotes which we can do again but here I'll put hamburger and I need to spell hamburger right there it is here's trigram for heaven it came up when I searched hamburger so that's actually what they call it and you can copy it here but you can see the HTML into decode is what I typed into the page right here so let's go back to our web page and now that I've added it you can see it over here in the top right let's go over these classes as well I set a text size on this but now notice the SM and the colon this is for a media query so this is saying once it reaches this break point which is defined by SM then hide the hamburger menu because we won't want that and you can see as I Mouse over SM is defined as 640 pixels as the Min width and then it sets it to display none also Focus so if we have focus on this button I set the outline to none I'm going to scroll again and this is going to be a little different because we're adding an element we won't see so I'll have to drag the window so we can see it afterwards I'm going to add a nav element and we'll give several classes here a hidden class first and that's why we won't see it at first but after that we'll set the media query to small and then it will have a block display then we'll use space Dash x-8 this gives the children of the nav element a margin left so we'll look at that that is different than setting a margin left on the nav element itself then I'm going to set this to text Dash XL and press Tab and that's pretty good I want to add one other attribute here and this is going to be an aria Dash label and we'll just set this equal to main as this is the main navigation there will be another navigation element that we use for the mobile menu as well instead of using the same nav for both so we want to identify those individually okay after this we need to have some anchor elements inside of our nav element so I'm going to start off with the anchor element and then yes we could choose a link here and after that oh well I'll just type link like this so I can chain the classes on after that we need one class and it is hover which is a pseudo class and then we'll set the opacity Dash 90 and press tab this you can see gives us an href with an HTTP colon slash slash so we want to remove that and this first link is going to be to hashtag Rockets So it's an anchor link to another part of the page okay after we've got this here and you can see since we're indented and we're wrapping it's getting to where we don't have quite as much space but I'm going to press shift alt in the down arrow and copy this down two more times so the next one is going to be testimonials and then the last one will be contact and we could also of course change those names inside of the content here for the links but this is going to be our rockets and then testimonials should just be testimonials [Music] and then for contact I will have contact us let's save this much now and I'm going to drag this to a full screen so instead of seeing the mobile menu we should see how these selections are applied and you can see the opacity makes these fade just a little bit they have a 90 percent where it still shows the white but we can tell when we're hovered over each one also this is a good time to point out where our section has that margin set to Auto and it gets no wider than 896 pixels so you can see it doesn't fill out the top bar but the color the background that we have for the header extends all the way to each Edge and that's why we have the section inside of the header so we can then Center the content that we want for the width that we're actually going to use for our page I'm going to drag Chrome back over to the right and we'll still have Visual Studio code here on the left but for now we're finished with our header now let's scroll up and add our main element underneath the header element so we'll just type Main and let's add some classes here so dot Max Dash w-4xl much like we had set on the section inside the header so our main element will keep that same width and we'll also use mx-auto which will set margins Auto on the left and the right and so that will keep it lined up with that content the content section that we have inside of the header element and now our other sections except for the footer will be inside of this main element so let's start with a section element we'll give this an ID of hero and then we'll apply some classes so I'll have dot flex and then dot Flex Dash column which is col Dash reverse and then we'll also have dot justify Dash Center and Dot small now for a media query Flex Dash row so instead of column at that point and then we'll add a DOT PX dash dash six so that will be padding on the x-axis left and right and that value of 6 we can see what that is when we Mouse over we'll have items Dash Center we'll also put a gap Dash 8 so that is a flex Gap if you're used to flexbox and then we'll have also padding on the y-axis of six so I could combine those and I will just remove the X so when I say p-6 it applies it to the top and the bottom and then we'll put a margin bottom dash 12 here and let's just press tab there now we've got all of that applied to the section and we can Mouse over and see what each is so for example if we wanted to see exactly how many pixels a padding six is it's one and a half rims or 24 pixels for our Gap 8 is set to a gap of two REM and our margin bottom of dash 12 is 3 round now inside the section I'm going to use an article element and I'm going to apply a class here as well and it will start with a media query so small then it will be W dash one half I press tab on that did not work when we pressed tab there I probably needed to escape that too to do that with our abbreviation so I'm going to just type it in here one half and let's look at what that stands for as well so when I Mouse over using a telesense that is width of 50 when we have W dash one half and now we'll put our H2 for much of the text in here our slogan for Acme rockets and I shouldn't have pressed tabs so let me go ahead and delete that and I'll press H2 once again or type H2 and then dot Max Dash W Dash MD and then Dot text-4xl and Dot font Dash bold dot text Dash Center dot SM media query here for text Dash 5xl SM colon text Dash left then also Dot I need to put dots after that so let me have this dot once again SM text Dash left dot text Dash slate Dash 900 so a dark slate there and then one more dot we'll put dark text Dash white and press tab so now let's put some content here so we can see what we get on the page we'll have we boldly go where no rocket has gone before dot dot dot and when we save we should see that on the page and we do now this is overwriting the text slate 900 with our text white because we're in a dark theme other than that let's see what some of these are Max Dash W Dash medium is a Max width of 28 rims it says and then we have a text Dash 4-xl notice this not only sets the font size but it also sets the line height and that's important and we will need that in the future as well when we look at some other areas when we're trying to determine the space they take up font bold as you might guess would be a font weight text Center just aligns the text Center and here's a 5sl that doesn't stand for anything this should be 5 XL there we go it's always good to review and now we can see that increases the font size when we get to that break point we have text left and the colors and now let's put a span around the phrase where no rocket so I'm going to put an extra space and then start typing span and then I can put the classes after so I'll have text Dash Indigo Dash 700 and then dot dark text Dash Indigo Dash 300 and press tab now it closes the span automatically so I'll just highlight Ctrl X to cut that out and then get rid of that space I put and put the closing span at the end of Rocket so we have where no rocket and it highlights those words in that specific color but we're far from finished here let's put our paragraph underneath as well so now we'll have a paragraph and we'll have Max W Dash MD and then dot that text to XL dot margin top Dash four which is Mt then text Dash Center Dot small text Dash left so we switch the text to left when we hit a certain break point then we'll have text Dash slate Dash 700 but also a dark text Dash slate Dash 400 and press tab so now that we have our paragraph here we're going to have another one underneath it with the same classes so I'm going to highlight all of that press shift alt and the down arrow so now we have two paragraphs with those classes now in the first paragraph I'll get an extra line there for the content and I'm going to put we're building rockets for the next century today there we go today from the Moon to Mars comma Jupiter and Beyond okay that's our first paragraph and when I save you can see that and it's a little bit different color of font now for the last paragraph a very simple one we'll put think [Music] Acme Rockets with a period and save so now we have all of our slogans in and now let's scroll for some more room because underneath this article we need to put in the image I'll just type image again and press tab okay we have a source we're going to look in the image folder and this is going to be our rocket dab image so after we press tab we have a list of the images in the folder we can choose our rocket dab and for the alt we're going to put in rocket dab and after that we still need to apply our class and I'm going to put that back here first so I'll say class equals now I'll have W dash one half and save so now we have our rocket dab on top and if you remember for the section we did a flex column reverse when I scroll up here I'll find it there it is flex column reverse so even though the image comes after the article it gets reversed now the image is on top in this viewport however if we switch and go to a wider viewport it should be a row and the image comes after the text okay let's pull this back over to the right and now we'll scroll down and underneath our section we want to have a horizontal rule element that is an HR element and we can add classes to that as well so I'm going to add mx-auto and then dot BG Dash black for the lighter mode and then we would have dot dark EG Dash White and I'll press tab here but I still need to apply that other class as well and the other class that I want is the W dash one half and then let's go ahead and save and we should see our horizontal rule then at the bottom of the page and now we're ready for the next section so we'll scroll up for a little more room we'll make sure we're scrolled all the way to the left as well and underneath that horizontal rule let's add another section element and this section will have an ID of rockets and now let's apply a couple of classes we'll have a padding of 6p-6 and then a margin on the y-axis dash 12 and I'll go ahead and press tab to get that filled in and we'll have a space here in our section I'm going to add an H2 and apply several classes here as well so I'll have text Dash 4XL then dot font Dash bold and Dot text Dash Center and then dot small that's some media query again Dash text Dash 5xl and then dot margin bottom so mb-6 and then also dot text Dash slate Dash 900 and Dot dark text Dash white and press tab so now for the content of our H2 we'll put our Rockets which is the title of the second section if we save we should be able to scroll now and see our Rockets likewise the other sections inside of the main element now are going to take up that same type of title structure so I'm just going to highlight all of this and press shift alt and the down arrow and do it two times so I get a section for testimonials and a contact us section so now we just need to change rockets and I can press Ctrl D to select both of those and I'm going to type testimonials but it's not our testimonial so I'm going to remove that from the content here likewise down here I can highlight one and press Ctrl D to highlight the next and switch this to contact and then here I'm going to remove the r and put contact us for the title and now we can scroll the page and we should see the testimonials and contact us as well likewise we want to have one of these horizontal rules we already created between each section so I'm going to highlight that press Ctrl C to copy and add one between each section that we have created here so now we should have horizontal rules as well between each of these subtitles now let's go back to our Rockets section and add some more content besides this H2 subtitle so underneath the H2 we're going to add an unordered list with a ul and then we can apply classes here and the first one is list Dash none the next is mx-auto and next is margins on the y-axis dash 12 and then we'll have flex and then dot Flex Dash column dot small for the media query Flex Dash row and then dot items Dash Center dot Gap dash eight most of these we have seen earlier when we defined a flex display as well so now we know our unordered list is a flex display and this list none is going to say list style type none so it's going to remove the disks or whatever we would see by the list item items now let's start with our list items and I'll type Li and begin adding some classes again we'll have a flex and then we'll also have Flex Dash columns so not only is the list item a flex item underneath the unordered list element it's going to be a list display or a flex display I should say of its own so we can format what's inside of this list item so now after the flex column we're going to also have dot items Dash Center then dot border dot border Dash solid I can spell solid Dot border Dash slate-900 dot dark border Dash gray Dash 100 and now let's go ahead and put a BG Dash white class as well and then we should also have a DOT py so padding on the y-axis dash six and px-2 and then rounded Dash 3XL which will round the corners and then Dot Shadow dot or Shadow Dash XL which should provide a box Shadow also so we can Mouse over these to verify let's look at this Shadow XL and it is a large definition here but we should see somewhere in there if it is a box Shadow or not but I really don't so this is one we might reference the website for that I don't remember exactly what I put when I was designing this previously here we have a border radius of 1.5 Ram or 24 pixels when we say rounded Dash 3XL I think we've already covered most of what these other classes were a couple of classes I didn't add that I want to one is the width Dash 2 3 which is two-thirds that would probably be 66 percent and yep 66.66 or if we have a media query small I'm going to have a width Dash 5 6 and if we look at that we can see the percentage as well probably when we Mouse over yes 83.8 three percent okay now let's go ahead and look at that Tailwind site I said Shadow XL so we're going to search for that Shadow Dash XL it is a box Shadow and we should be able to see some values here if we look for this yep here it is Shadow XL equals box Shadow and it gives those values so you can always reference the Tailwind site to see what you're putting inside for the classes if you don't remember like I just did right there so right now you can see this is our content we don't really have anything in it but just by the classes we've applied we get this so I'm going to start with the image that we have so let's go ahead and put in the image tag and this should have a class or two as well so I'm going to put dot mb-6 press Tab and then I want to put one other class and once again that is a w dash one half so it should have a 50 width now for the source we know we're going to look inside of the image directory and then inside of the image directory the image we want here is the rocket man so go ahead and choose the Rocket Man and for an alt we can also put in the name of this rocket that is for sale which is the Explorer now let's go ahead and save and see if we see our image and there is our Rocket Man okay I'll scroll for some more room and underneath that I need to put an H3 so another subheading that is a little smaller we'll put dot text-3xl dot text Dash Center dot text Dash slate Dash 900 and one more dot dark text Dash white and press tab so for the H3 content we just want to put in the name of the rocket which is Explorer and here's where I realize I have missed a style so even though it was cool to see our little white area before we put the image in what I missed was putting in the dark background in spite of the white background that we already have here so what we also need is our dark and then BG Dash black for the list item and then when we see save now we see the outline the border that we applied plus the word Explorer now I'm going to highlight this H3 and press shift alt and the down arrow twice not that I'm going to have other H3 elements but it is easy to change in Visual Studio code you can change the first element title and it should change the last so I'm going to change the H3 to a p on this first element for paragraph and now you can see I already have the closing paragraph and if you don't have that I remember there is an extension called Auto rename tag that you could look for again that's Auto rename tag that will do that if it is not enabled for you by default in Visual Studio code okay after that we just need to check our classes and I think they're almost the same except we're going to have this as a hidden class the first time and then we're going to have a small media query block to display if we reach that screen size okay after we've reached that the text 3XL should still be the same text Center is the same text slate 900 should be text slate 500 and our dark will not be white at all it will be text Dash slate Dash 400 here now let's go ahead and change this Explorer to a dollar sign as this is the most affordable rocket and we don't see it yet we see the Explorer underneath because of this hidden class so I'll quickly remove the hidden class with control X and save now we see our dollar sign I'm going to go ahead and put the hidden class back so it only shows on the larger screens now this last element where we highlight the H3 is also going to be a paragraph so that should once again change the opening and closing and then we'll just modify some of the classes here one is once we reach the small this will be hidden so on the smaller screens we won't be displaying this this only happens when you reach this or above so that's when we'll see this then we'll have text and instead of 3XL this is going to be 2XL then we should have a text Center as well and we do then we want a margin top of two and I believe I might have skipped that above also because we do want to have a margin between each of these so jump back up to this one as well and we'll put that mt-2 inside of that also and that margin top 2 should give it yes one half REM on the top for a margin and then it's going to finish out with the same colors we had in the other paragraph so I'm going to highlight these as well and then highlight the ones below and just Ctrl V to paste those in so we have the accurate colors so now we've got that but it is showing but it's only the same word explore and what we really want to say here is Affordable exploration so now if we drag this out to a larger screen we'll see we have the dollar sign on a larger screen but not on the smaller screen so let's drag this back over okay the most time consuming thing of course is designing the first one because your second and third cards would copy that so now we can just highlight the full list item all the way down to the closing tag do shift alt in the down arrow and do that twice and save and now we have three identical cards so we just need to change out some of that information in the card so we'll make sure we're at the second card and that should be a different image so instead of the rocket man it's going to be the Rocket Ride so we'll delete that and switch that to Rocket Ride and then instead of alt explore it's going to be Adventurer so we'll switch any instance of Explorer so I'll press Ctrl D to highlight both of those and change to Adventure and save that now we can see the new image and adventurer here now there's a second dollar sign that goes here because the adventure is a little bit more expensive and then instead of affordable exploration it should say best selling rocket because it's that Medium tier so we'll have best smelling rocket exclamation mark and now we'll scroll down just a little more so we can change the code in this last one and I'll scroll up so we can see the last one here as well so this is not the rocket man this is the rocket launch so I'll just delete these last three letters here switch this to launch and save and it changes the image now let's go ahead and change explore and this should be the infinity and after that we also needed to change the alt I should have done both of those at the same time and did not so we can save that and now of course this is three dollar signs because this is the luxury model rocket and we'll change down here from affordable exploration to luxury Starship and there it is okay let's drag this back over and I thought I saw an issue earlier but now that looks okay because we have all three and they are centered but four we just saw this one to the left and I thought there might be a problem but our three rockets are there in place and looking good now let's scroll to the top and see if our Rockets anchor is working as we expected well it just jumps right up there and it hides rocket so there's some things we could change to make that just a little bit better we'll have to of course switch between a large screen and a small screen to see what's going on but let's come back up here to our section where we put our ID of rockets and we want to to apply a scroll margin and what we need to do that for that is apply another class and this will be scroll Dash then Mt for margin top and I'm going to put a 20 here so let's save and now let's once again come back to a wider screen and we'll start at the top and then I'll click our rockets and now it looks just like it should and we can also adjust this for our hero section as well so let's scroll back up to where we started our hero section here it is and let's put at the end another scroll margin and this will be a little bit bigger scroll Dash margin top Dash 40. there's not quite as much content in the hero section and this will push it down just a little bit further so let's go here now pull this over and we're at our Rockets now our Acme Rockets links back to the top so now when we press that it Scrolls accurately and we see everything thing we want to now dragging this back to the right once again there is one other scroll that we can put one other scroll Rule and that goes on the HTML element itself and so way at the top on line two We'll add a class we're going to set this equal to and I'll put in an SM for a media query breakpoint and then have scroll Dash smooth so we don't want this to happen on the smallest screens but on the bigger screens it will look pretty good so let's go ahead and put that in and now I'll drag this back over one more time if we go to our Rockets it's smooth when it Scrolls and then if I click back to the top it's a smooth scroll all the way around okay we have got a great jump start on our project and we've got the hero section and the rocket section complete in the next tutorial we'll complete the testimonials the contact us and the footer and then we'll be looking at making our navbar active in a mobile viewport as well welcome back to the Acme Rockets website project we're building this website for Acme Rockets to help us learn Tailwind CSS class names as well as how Tailwind handles break points for media queries and light and dark modes I'll quickly review the page again as we will continue to build it today we have a hero section here where it says we boldly go where no rocket has gone before and we completed this in the first lesson for this project we also completed the r Rockets section that has cards for each rocket that Acme rocket sells today we'll work on the testimonial section as we see here and we'll also work on the contact us form and complete the footer for the web page now we're currently looking at this in a full screen mode I'm going to drag this over I'm also using dark mode which is my default but now here on the right side of the screen you can see I can right click in Windows on my desktop and choose personalize I'll go to the colors and I'm going to switch dark temporarily to a light theme and then I'll minimize this so we can look at this project once again and you can see it also has a light theme applied with tailwind and that's the default unless Tailwind identifies the system preference or just the user preference wherever it may be set is dark mode now here we have a smaller screen size and you can see the media queries handle everything just a little bit differently it's not taking up the full viewport for each section like I did when we were on the full page when I drag it back over you can see our Rockets creeps up a little bit that's okay that's what we want we will handle that with media queries but now let's look at the testimonials they look quite a bit different than they did in dark mode now they have a teal background and kind of an obvious container as well after that when we look at the contact us it's very much the same as well as the footer now I'm not going to be in light mode that often because I really do prefer that dark mode so I'm going to switch this back I'll choose personalize once again go to colors and then choose dark now if you're using Mac or Linux that setting may be in a different place now I'm going to pull this back over to full screen and let's go to visual studio code okay I'm in Visual Studio code now and I've got the package Json file open now one change we want to make is we are using the completed code from lesson two where we started the project let's switch the name in our package Json now do lesson three so we know we're updating our code we can save that but afterwards we just need to press control in the back deck or you could go to the terminal menu either way and we want to open a terminal window once you do that we want to run our Tailwind command that will tell Tailwind once again to start looking at our HTML and generate that CSS file for us so I just need to type npm run tailwind and it is important that you go back to the beginning of these lessons to learn how to do this I'm not going to go back over this today but if you try to start with this video we're going to be jumping into things that you may not have already covered so we covered that previously now it says rebuilding and that means it rebuilt that style.css we have in our CSS directory here and it's building it by looking at our index.html and the class names that we're using inside of it and then generating that file that we need for our CSS so I'm going to close the terminal Tailwind will continue to run and look at our HTML now that I'm in the HTML I'm going to go ahead and press alt Z so any line that would scroll off the screen is going to go ahead and wrap down to a next line and we're going to start working on this testimonial section where we left off in the last tutorial so we have the header already for testimonials after that we want to add a figure element and we're going to add a class to that of my which would be the margin region on the y-axis so the top and bottom and we'll say Dash 12. so when I press tab we now have our figure opening and closing and we can Mouse over just hover over that my-12 class name and you can see the actual CSS style so we have margin top three REM and margin bottom three round after that we're going to have a block quote element and I shouldn't have pressed the tab so soon so I'm going to redo that we'll do block quote and then Dot and here I'm going to add some classes too so BG Dash teal Dash 600 that is the background color and that is a specific color that you can look up in the Tailwind docs if you want to after that I'm also going to add or dark mode BG Dash black and then I'm going to add a padding on the left so pl-14 and then a padding on the right PR Dash 8 not 98 just eight and then a py so this would be padding on the top and the bottom on the y-axis of dash 12 and then rounded Dash 3XL and then a dash relative so we're going to position this block quote element relative now I'll press Tab and it adds all of those classes to the block quote element but I do see one mistake I must have typed a dash instead of a period because we do not want a dash between rounded 3XL and relative now that looks correct and I'm going to put a paragraph inside of the block quote here so just a P tag and then I'm going to put dot and start typing out the class name as well so text Dash 2XL and then we're going to have a media query when it gets to the small size and we'll have text Dash 3XL after that we'll also say text left which should align it to the left margin top Dash 2 we'll have text Dash white and then if we have dark mode we'll have dark and then text Dash slate Dash 400 now we're also going to use a pseudo element for some content those double quotes that we see for the testimonials now I could press tab right now just to impact what I want for the paragraph but we're also going to use a pseudo element for before and a pseudo element for after content and those double quotes we saw with the testimonials so I'm going to drag this to the left just to show you a reminder and when I go to testimonials you see these double quotes here and we had those in the light mode as well those are pseudo elements that we are inserting with CSS the before and the after so now let me bring this back and we can go ahead and apply those with Tailwind too so after we've added these initial classes I'm going to add some for the before pseudo element so I'll have dot before and and then after the before I want a colon and content and then I'm going to have a dash and a bracket and now I'm going to put in a symbol and this is a slash 201 C and that is that double quote the opening double quote after that I can put another before and colon and say font Dash serif and then another before colon absolute so it is positioned absolute which is why we had the parent positioned relative and then another before colon and we can put the top at zero and then another before and we can put the left at zero and then let's put another before and we'll size it up with a text Dash 9xl very large continue with our before streak and have text Dash white and then let's add before opacity Dash 25 transform and then once again a before translate Dash X-2 we'll do the same for y translate Dash Y dash two so we're just moving it a little bit with that transform and I believe we're finished so let me press tab that's a lot of classes but just adding that before pseudo element added a lot now I'm going to paste in the content and feel free to go to the source code for this tutorial to copy this content if you want or you can type it out I didn't want to have to type out each little sentence for you as we went along more interested in the classes we are applying so let's save this much and everything looks accurate to me now we also want to do this with the after pseudo element so I'm going to select everything here for the before and copy this with Ctrl C and then add a space and paste it in once again so now we have doubled the classes in Visual Studio code shows us yes there is an error here and it looks like it didn't add our content that we had the first time let's see if it added it the first time it really didn't did it it didn't like being chained together so let's put this in again it's a bracket and then a single quote and slash 201 with a Capital C there we go so this is our before content and we're going to have to change that for the after so we know the after will start right here with content and then I'm going to press Ctrl D to select every instance of the word before I'm just pressing Ctrl D to select all of those I'm going to change those to after so I just changed them all at once now we change this content because it will not be the same it's the closing double quotes So once again a bracket I'll have single quotes and then a slash 201 but the capital letter D so now that would be the closing double quotes so yes this is a lot of classes applied to one element first of all we just had what we were styling the paragraph with and that wasn't that much because the before starts right here but once you add before and after pseudoelements you can really fill this up as soon as we finish with this first testimonial we will check the display as well just to make sure we haven't made any mistakes but we're not quite finished yet after the paragraph We need to add a fig caption element and that will have several classes too so we'll put on italic and then text dash dash XL and then for a small medial media query we'll put text Dash 2XL then text Dash right then margin top Dash 2 then text Dash slate Dash 500 and then for dark mode we'll put text Dash slate Dash 400 now let's press Tab and all of those classes are applied to the Fig caption and inside of this I'm going to put an HTML entity so the Ampersand a hashtag an 8212 and that is a long Dash or a long hyphen then I'm going to attribute this first one to Wiley coyote and on his business card it says genius so that's what I'm going to put if you're familiar with Wiley Coyote you know what I'm talking about and now let's check our project so I'm going to press go live and we should start live server and here's our project let's just scroll down here's the Rockets we completed as well here's the testimonials oh and we do have a small issue with the quotes it looks like the before and the after are on top of each other so there is something we need to fix here everything else looks okay but we want that closing quote over here just above the genius so let's see what's going on in our code and yes here's the problem we changed the symbol but that's all we changed and then we gave both position of top zero but this bottom one shouldn't be at top zero it should be at bottom so let's go ahead and add that and it's a minus bottom so we'll say minus bottom Dash 20 and then instead of left zero it's going to be on the right side so it is right zero after that everything should stay the same so I'll just drag the code to the left here and now we can see we've got our quote up here above the starting of the paragraph and then we've got the quote here below genius but I think we wanted it above so let me check that one more time so if we scroll down we can see we put our fig caption inside of the block quote and that was a mistake as well so I used control X after I highlighted that to remove it and then I put the Fig caption after the closing block quote and now we should be good when we drag this back over always good to check your code so we have the opening quote here the closing quote here on the right and that looks much more like what we want so I'll drag this back and now the hard part was creating the first one but now we just have testimonials that follow this same pattern so I'm going to highlight everything we just created from the opening figure to the closing figure and I held down the shift key and clicked here on the ending line to highlight everything now Ctrl C to copy actually I don't need to do Ctrl C what I want to do is shift alt and the down arrow to copy it down once and then shift alt in the down arrow to copy it down twice so now we should have three testimonials they're just all the same so let's save that and we'll once again verify that we have three here so here's 1 2 3 testimonials all from Wiley coyotes so now we just need to change that content let's scroll up to find out where we started and there's testimonials and so here's the first one from Wiley Coyote now let's just change the content for the second one so I'll highlight all of this and paste in the next paragraph now I want to notice something here draw your attention to it I'm using a span and I applied one class to that just for this one sentence that says this makes me very very angry if you're a fan of Looney Tune students you might know what the character is that said this and let's attribute the quote and it belongs to Marvin the Martian and his faithful companion canine and our final testimonial I'll paste in that paragraph as well and you might know who this is as you look at it and once again there is a span in here and there's a couple of long hyphens as well and we emphasize the phrase I need it and if we scroll down you can see we are going to attribute this to Buzz Lightyear as you might guess with the infinity rocket if you are familiar with Buzz Lightyear so now that we've changed all three quotes let's drag this back to the left and let's go ahead and look at our page and we've got Wiley Coyote here and then we've got Marvin the Martian with his quote and finally we have Buzz Lightyear let's drag this out to a full screen and see how these look on the full screen as well and of course if this isn't to your liking you can adjust these as well and it looks good in dark mode Let's make sure our light mode is what we expect as well because we have a few classes that could be applied differently there we'll go to colors and light and then I will go ahead and minimize this and yes it sure looks like that well we do have this quote over here kind of in the corner and off the screen so maybe we do need to adjust that one quote symbol that we have here in the bottom right so let's go ahead and pull this back to the right and pull our code over and see what we can change once again when we adjusted for the translate on the after we didn't think about it being exactly the opposite so that is what we need to change I'm going to highlight the aftertranslate X2 and after translate Y2 we need those to actually be minuses but I'm also going to press Ctrl D once and twice to select all three instances of this so now we just have to change it once and it will be changed in all three spots we want to put a minus before the word translate and that will make all of the difference let's go ahead and do that once again for the Y and then once we save now that is the opposite of translate X2 it's actually a minus X2 here so so I'll pull this back over to the left and we can see now the quote is where we expect it to be this closing quote in the bottom right or all of our containers that hold these quotes in light mode and I think it's going to look a little bit better in dark mode too so I'll go ahead and select personalize once again colors choose our dark mode and then I should be able to minimize this and yes this looks a little bit better in dark mode as well I just think the positioning of that closing double quote is a little better than it was before okay let's drag Visual Studio code back to full screen and now it is time to work on the contact us section before we jump down to the title let's look at this section with the ID and the class we have the padding set to six all the way around the y-axis margin set to 12 but one thing and I think we forgot to do this for the testimonials as well is set the scroll margin as we did for the previous sections and we'll set this to 60 team because it's the last one but I believe we want to set this to 20 for the other sections and we had already done that for the previous two sections the hero and the rocket so let's go ahead here and add a scroll Dash margin top Dash 20 as well and now let's go back down and go below our contact us header and here we want to start a form so we'll have a form form will have an action and we're not really going to fill in that action you could send this information wherever you want to I believe in my HTML course we went ahead and sent this to a backend server that would at least repeat that information to us but the action is not what's important we're talking about design here with Tailwinds so we'll just leave the action blank and let's go ahead and add some classes and I'll go ahead and put a class quote now inside the quote I'm going to have Max W Dash 4XL and then MX which is margin on the x-axis to Auto so it will Center the form text Dash 2XL small media query will switch to text Dash 3XL and then we'll make this form a flex box and it will be using columns we'll set the items to left and a gap Dash 4. now we'll only have a subject and a message here so we'll start with the label for the subject so we'll say subject and then likely for the subject we'll put what we can view here subject and a colon and now let's go ahead and put the input and let's make it a type text and that's what we get by default but we have some other attributes to add as well so let's say the ID needs to equal the 4 so that is subject then we'll have a name and that is also equal to subject and then let's make this a required input they should both be required and then a Min length equal to 3 and a max length equal to 60 for the subject line we could also add a placeholder and this would be equal to your subject and now we'll start with the class name so here we'll just say class equals we've got our double quotes So W Dash full so that just gives it a full width of 100 percent text Dash black text Dash 2XL small media query switches it to text Dash 3XL padding-3 rounded Dash XL then we set a border and then we say the border is solid then we say the Border color it'll be border Dash slate Dash 900 and then if we're in dark mode we will have border set to none and from there I think we could save this I want to just put a slash at the end of the input so it doesn't have a closing input element or I should say closing tag either way now we have a label and an input now let's go ahead and add a label and this is going to be for the message so we'll say whoops we need the label once again I can press Tab and now I get the four here we'll say for message likewise we'll make this visible message with a colon now I'm going to scroll up for some extra room here this will be a text area and here we already get some attributes to add in so this will be a message and the ID needs to match the 4 for the label so that will also be message or columns it says 30 and 10 by default that looks pretty good now let's go ahead and add a placeholder as well so we'll have placeholder equals your message and let's make this required too and now we're ready to add the class names and so for the first class let's go ahead you know we can just copy the classes because they're identical for the input and for the text area so we'll just have all the different class names I did control C to copy them and we've just added them to the text area as well now the text area element does have a closing tag unlike what we had for the input where I could just put the Slash and the close there okay after that we need a button to submit the form so let's have a button and let's give it a background color of tl-700 after that let's give it a hover pseudo class so if we hover over the button now we'll have a background of teal-600 which is just a little lighter and then if it has an active pseudo class so if we are clicking on the button actively it will be background tl-500 just a little bit lighter yet the text on the button will be white and let's give it a padding of Dash three and let's give it a width Dash 48 after that we'll say rounded Dash XL and then whoops there we go and then we'll have a border once again and then we can say border Dash solid and then a border Dash slate Dash 900 and then we can have a dark once again set to order none and we can go ahead and press Tab and let's add the word submit on the button itself now there's a class we hadn't seen before the width of 48 so let me Mouse over that I'll just hover and you can see that sets the width to 12 rem or 192 pixels and now with our form complete let's drag vs code to the left and scroll down to the form and there we can see it so we have the subject and we have the message if we don't enter either it should say it is required it looks at that first so now we'll put hey in the subject submit again and it says yes the message is still required and remember you can submit this to wherever you want to if you're not familiar with the submit action of a form please check out my HTML for beginners course that goes over forms in one of the lessons and also talks about the action and even gives you a test server you can submit a form to with everything looking good there let's go ahead and scroll down and we are ready to add the footer the footer is going to come after the main element so let's put it below low and we'll start with the footer element and we can add classes to it right away so let's say Dash BG Dash TL Dash 700 and then text Dash white and then we'll also have text Dash XL and we can press Tab and we get all of those classes added but I also needed to add the ID and I should have done that before with the hashtag but here I'll just say ID footer and we need that added as well okay so we have the footer with an ID and the class now inside of the footer we're going to create a section and this will be a container which will let us divide up some of the content so now let's go ahead and add a Max Dash W Dash 4XL and if you remember we wanted that background teal to spread way across the page the entire width just like we did the header however the content we want to contain to this Max width for XL just like we did the header as well so it doesn't spread itself all the way out on those large 16 by nine screens after that we'll put in a margin X on the x-axis of Auto so it centers this content and we'll have padding Dash 4 Flex also have Flex Dash columns so we'll use columns for this content small media query sets it to flex Dash row and so on a mobile it would be different and then the small media queries as the screen gets larger so iPad and up it would be a row then we'll have another small media query and we'll say justify Dash between if that is the case on those larger screens now we press Tab and all of those classes are added to the section once again this Max W4 XL if you remember sets a Max width here you can see it's 896 pixels or 56 Ram now I'm going to add an address element which is a semantic tag that tells HTML and anything processing it that the inside the contents is an actual address now I'll just paste in the address but you can see I've got a couple of elements inside of this address so I've got an H2 around the title the full business name Acme rocket powered Products Inc and then I have each line of the address and then the email actually has an href in there that contains the email so if you click it it would launch the email that is processed on your computer and then also or the default client for email I should say and then you've got the href for the phone and on a mobile device clicking that should actually dial that number but this is just one of the columns we have some more content to add so I'll scroll up a little bit then we're going to add a nav element here and add some classes to that so the first class is hidden so it would be hidden on mobile devices but then we'll say at a medium size so a larger query we'll put in a flex display and we'll have Flex Dash column and we'll give a gap Dash 2. press tab but we want to add one more attribute to this it's an aria Dash label because we have several nav elements on the page so we have to say what this navigation is about and so we'll just put footer in there as we also had a couple of nav elements up in the header so now that we have our nav set we need to put some hrefs in here some links so I'll start with the anchor tag when I press tab we get that href and this is just going to link back to the rocket section so I'll just put that hashtag rocket it's for the anchor that's a link on the same page but we can also add some classes here so I'm going to put a class set this equal to hover so when we're hovering over this link the opacity will switch to 90. so it will be just a little see-through when we hover we can tell the difference and we'll have our Rockets as the text so now while I'm on this line I'm going to press shift alt and the down arrow two times so I just copy all of that down so the next one is going to link to the testimonial section and once again instead of our Rockets I will switch this to testimonials and then on the last one it's going to link to the contact anchor and then I'm going to put contact us here in this link we have one more column yet to add here and so I'll put a div we'll just use a div to contain this information and then we'll add the class of flex and flex Dash column and then a small media query give it a gap Dash 2. now inside this div we're going to have a paragraph and I'll put the class text Dash right now press Tab and now I'll say copyright and now I'm going to use an HTML entity to Ampersand copy and semicolon is the copyright symbol now I'll use a span element and this will have an ID of year and I'll go ahead and put 2022 in here which is the year I'm making this tutorial but typically you would grab this ID with JavaScript and put in the current year so you didn't have to update this you would not have to update this manually every year and that would be an ideal script to put in to any web page to update that copyright ear automatically okay after that we're finished with the first paragraph so I'll put in a second paragraph tag again the text right class I'll just say all rights reserved spell reserved that is not right reserved there we go and now we should be finished with the footer let's drag this over and take a look as we worked on this here is our footer you can see this is all aligned to the left and in the top left corner this is in the bottom right and our middle column is currently hidden because that's what we had for the media query it started out as hidden and it doesn't show Till It's a larger screen so let's drag this over here is now our middle column and you can see the opacity set to where they get just a little see-through when we hover over each of those links this is our nav in the footer and if you wanted you could put a link to top here as well but we already have it in the header if we click on Acme Rockets we go back to the top we can go to the rocket section testimonial section and the contact us section as well and then we can scroll down to the footer if I scroll back to the top we can see that we're not currently giving our hero section the full viewport even though we are in the this widescreen mode and that's something we want to do we can currently see our rocket start down here that's great when we have a page more like an iPad but when we have a wide screen we want to put in a media query that will give the full viewport to the section that we're on instead of sharing that viewport between two sections to do this we're going to put in a custom media query so all we'll drag this back over to full screen mode and we need to actually look at our source here with our input CSS so this is what brings in everything from Tailwind when it compiles our CSS underneath this we can put our own classes but I need to put this inside of at layer and then put utilities and then include this in curly braces and this is going to define a custom class that we can call with a media query as well so now I'm going to say section Dash Min Dash height and we could name this anything we want and I need to set the Min height for a section and I'm going to do it for a specific media query now this Min height and I will show you how I calculated this but I need to use calc and it's going to be 100 viewport units except we want to account for that header that is always locked in place it's sticky at the top so we'll say minus 68 pixels you might wonder how I got to 68 pixels so let's go back and look at the header quickly and we can calculate that so when we look at the header here we can see that we have got an H1 with the class of text 3XL so as I hover over this you can see the line height is assigned along with the font size when we apply a text class and so we've got 2.25 Ram that's 36 pixels but then we also need to account for any padding and notice our section has some padding here and the padding is one rim on all sides so we we've got 16 pixels on the top and 16 pixels on the bottom for a total of 32 so 32 plus 36 is our 68 and that's why I'm subtracting 68 from the overall viewport height but we're not quite ready to apply this class yet we need to go ahead and Define our custom media queries inside of our tailwind.config.js file and that's going to go inside of the theme and then we have extend and it's going to go inside of there so now we need to type screens and this will be an object so it has curly braces as well and I'm going to Define two different media queries here one is a wide screen and this is going to be another curly brace and then we say raw and then we can give what we're looking for here as far as the media query and it's going to have a parenthesis then it's going to be a minimum aspect ratio media query and this is going to be three slash two is the way I want to set this and then of course a parentheses afterwards so the width has to be a minimum of three to two which emphasizes that it should be wider than it is tall after that I need to go ahead and put a comma because as I mentioned this is an object if you know JavaScript you know what I'm talking about but we're going to put another value in here so we need to separate them with a comma I'm also just going to do shift alt and the down arrow so I don't have to retype everything I'm going to turn this word widescreen into tall screen and now this is going to be a minimum aspect ratio of one to two so it needs to be at least twice as tall as it is wide for this to kick in for the tall screen so now let's save these settings and we'll go back to our HTML and we can use our widescreen and Tall screen media queries along with our section Min height class that we defined here so we'll put those all to use together so let's go to our hero section which is right here and then in the section we can put these together so I'm going to type widescreen and then a colon just like we did with the small media query or the dark media query and then I'm going to have that class name which was section Dash Min Dash height then I'm going to copy this give one more space paste it again and I want to use that same class or a tall screen so we also have the section taking up the full viewport if it's on a mobile device so we've got both of these classes now and I can just copy both of them and we want to apply them to each section so we have our hero section and we'll scroll down here to our Rockets section and we can apply those at the end after our scroll margin and then let's go ahead and scroll down to our testimonial section and here it is so once again after the scroll margin and then finally let's get down to our contact us section we'll find that and here we are and we can apply it as well after that scroll margin now let's drag this back over and let's go ahead and just click on Chrome now we can see this takes up the full viewport and so when we go to our Rockets we don't see any other section creeping up underneath because that media query has kicked in for the aspect ratio testimonials it's already long enough it probably wasn't an issue but we went ahead and applied that class contact us basically the same thing it's already tall enough that it wasn't really an issue but there we see the section anyway now let's go ahead and look at these in more of a mobile view and we'll go back to the top and we'll start and we can see once again we're taking up the full viewport for our hero section and that's great we don't see anything creeping up underneath it we can scroll down to our Rockets now it's going to be tall enough to not have an issue with that of course the testimonials are tall enough and the contact us should take up most of that page too and there is our footer so what we're we really have left to complete with this project is that mobile menu that is not currently working and that's what we're going to finish in the next tutorial we'll look at our starter code in just a second but first let's look at what we hope to accomplish today we're going to add a hamburger menu that is animated and then a menu that shows up that is also animated so when I click on this hamburger menu it does a little Spin and turns into an X and then our full screen menu shows up of course this is for a mobile view then when I click on the X it hides the menu likewise if we click on any of our selections or just anywhere in this menu it will hide the menu also so we can go to the contact us or we can go to the testimonials or really any section of the page or back to the top so we've got a couple of different animations and of course it's responsive as well so if we drag the page out to a larger size our navbar turns into our selections here and no more hamburger menu now we already did that in the previous lessons and so if you haven't followed those previous lessons you could go ahead and go back to those in this series and there are links to the the playlist and everything else in the description below including that starter source code so now let's look at the starter code it's from lesson three so today is Lesson Four let's change the package Json file to say lessons Lesson Four and we can save that and there's just a few small changes I want to make before we dive into the menu so let's go to our index.html page I'm also going to press alt Z to wrap the lines down if they were to extend beyond so now we can see everything it just wraps to a second line like you see here on line 14. in case it was extending beyond the page okay after that let's scroll down to where we have the button and it is called mobile open button and it is on line 19 right now I'm going to change that name and instead of calling it mobile open Button I'm going to call it hamburger button which makes a little bit more sense because it will have the hamburger icon and I'll save these as I go so after the hamburger button changed we're also going to change this small hidden we'll switch this to medium because medium will take it up to the iPad size and so if we Mouse over if we remember we have our Tailwind intellisense extension installed and if you don't have that you can search for that in the vs code extensions but we did that in a previous tutorial and you can see at 768 pixels is where this medium media query is identified so we'll switch that to medium likewise we need to do that with the nav that shows when we do not have a hamburger icon so we'll switch that to medium as well with an MD here on line 22. a couple of more changes to our hamburger button that we have here so let me highlight the focus outline none and we actually want an outline if it has Focus that makes it more accessible so let's delete that but let's go ahead and add something to I want to add cursor Dash pointer so it changes to a pointer over the button and of course that's instead of that Arrow it looks more like a little hand with a finger when you have a pointer so we'll save that and the final change I want to make is in the Tailwind config file and previously we defined a couple of custom media queries based on a minimum aspect ratio and you can see one half well that would be 50 percent essentially I think 65 percent works better for this tall screen and so I want to switch this of course you could say 65 out of 100 but you could also say 13 out of 20 and that's the same ratio so we'll go ahead and save that and those are the small changes I wanted to make before we start okay back in the index.html which is where most of the action happens as we apply all of the Tailwind classes inside of the HTML I want to highlight what we'll be doing and what the difference is of course there's two different things we'll do today one is a little easier than the other and so let's go ahead and look at how we'll apply the first one and that would be to show the menu and have the closing button essentially on the menu screen in other words have the menu screen take up the full page if we go ahead and look at the browser right now we're looking at the final version here so when I click the hamburger button it animates and it shows the menu over the rest of the page but we can still see the nav bar the easy way to do this would be to not animate the hamburger button and only animate the menu and have the menu cover up the nav bar as well and of course you could have an X to click on the menu itself so we'll apply that first and then we'll do a couple of extra things that are a little more complicated to go ahead and animate this hamburger menu in these or the hamburger icon in the second version but overall everything that happens in the first version we'll need in the second version anyway so in this first version where we're not animating that hamburger icon we already have it in place with an HTML entity and you see that here on line 20. so we don't have to add anything extra there let's go ahead though and below this section that we have that has our title and essentially the full nav bar in it let's go ahead and scroll down to the end of that section let's add another section so this section is going to have an ID and here I use the hashtag to say that it's going to have an ID I'm using Emit and then Dash menu and I press Tab and there we get a section with the mobile menu ID but we're going to have classes as well so I could once again use Emmett for that and chain it all together so I'll delete that say section hashtag mobile Dash menu but then I can start adding classes with the dot so I'm going to say absolute and then I'm going to have a top Dash 0 and that's because it's going to cover the full page so I want it to start right at the top and we'll have a BG Dash black which sets the background to Black then a w Dash full which is a full width of 100 percent text Dash 5xl so fairly large text and then we're going to have a flex display so we'll put flex here and we'll remove that later as you'll see we will toggle that class but right now we want to go ahead and apply it so we can see what we're doing so we'll have flex and then we'll set it to flex column and then oh I need dots not dashes there so text 5xl Dot Flex dot Flex Dash column dot justify Dash content Dash Center and then we're going to go ahead and leave it at that I think for now I'll just press Tab and we don't have anything inside of the section yet so now we need to add a button and this will be our closing button so let's go ahead and say button and we don't need an ID here so we'll just start with classes we'll have text Dash 8xl so very large then we're going to justify this notice we had the flex above where we Justified well we can't see it right now but we Justified that Center here we're going to use the self Dash end class so that will justify it to the end or to the far right then PX which is padding on the x-axis dash six we'll go ahead and press Tab and now we want to use an HTML entity in here as well for the X and that is the Ampersand the word times and a semicolon okay I'm going to save that much and before I add anything further I think I'd like to see what we're doing as I add these classes so I'm going to drag this to the left I will hide the file Tree in just a second but I'm going to drag this over just a bit to the right as well because we're not using up that full window for the browser so we can see this in mobile view over here on the right now I'm going to go ahead and close what we have here I'll open a new tab but just to make sure we don't have a conflict with the port number that it launches to and then I'm going to look at the package Json again and we can see our Command we've got a Tailwind command that we need to run so it looks at all the classes that we're adding in our index and then it creates that style.css file if you remember that from our previous lessons so I'll press Ctrl B so we can see just a little bit more here and then alt Z so you can see this here's the full Tailwind command I'm going to press Ctrl and the back tick or you could use the terminal menu to go ahead and launch a new terminal window and now I'm going to go ahead and type clear just to clear out anything we previously had and then type npm run Tailwind and we should start running our Tailwind that won't launch the site yet but now it watches our index.html and of course it adds those classes that it needs to the style.css so now that we're running Tailwind again let's go back to our index.html I could have selected it up here as well but there it is in the file tree I'll hide the file tree again and I'll close the terminal because we don't need it it will continue to run even though we closed it and now we can click the go live button for our live server extension to launch our HTML over here on the right so let's see what we get we now have our HTML launched but we have this big X that is covering the nav bar but we're not covering the rest yet so we definitely have some more to add and just to confirm that we're seeing what we did add I can highlight this full section here on the HTML document and then comment that out with control and the uh flash there we go commented out the full thing and save and now we once again see our nav bar so you can see we're just adding this section and it had not taken up the full page yet is why it was only covering up the nav bar as it is so now I'll just Ctrl Z to undo that and save once again and we see the change so we are covering part of that so let's add some more content underneath the button what we want to do is add another nav element and then we can add classes here it's going to have a flex class Plex Dash column class then a minimum height and when we say screen that sets it to 100 viewport units so now it will take up the entire page we'll say items Dash Center and then we'll also give a padding on the y-axis of 8 between each item so now let's go ahead and press tab for that and we have our nav menu we also want to add one extra attribute to this nav menu and that is an aria Ash label and let's set this equal to mobile because we have more than one nav element on the page so it's important to identify each one okay now that we have done that let's go ahead and add an anchor tag and it's going to have an href attribute so it is a link we can choose that right here here we have the link but this is not going to link to anywhere other than the anchor on the page and it is the hero now we have classes as well so we could have avoided that or by of course using emit there but we can also just add classes this way which I'll continue to do so I've got class with the quotes and now we'll say a width of full and a space since we're not using emit text Dash Center adding on the y-axis of 6 and then we'll set a hover State and set that opacity to dash 90. so the link becomes just a little bit see-through when we hover over and here we'll say home because this will link to the top now when we save this covers the full page because we gave it the width the Min H screen that's 100 viewport units of width and I can Mouse over with the intellisense we will see how that is set the Min height I said width there we go Min height 100 VH and here's our first link now we're going to have at least I'd say four more links so I'm going to use shift alt and the down arrow and I'll just copy that link four times so now we just need to change the hero anchor to rockets and then the next one is going to get changed to testimonials and the next one should be contact and finally the last one would be footer now we just need to change the words so here we have our rockets and if we save we should see these changes there we go we've got our Rockets after that we are going to have testimonials and then we have contact us and finally the footer has the legal information for the company so we'll say legal now we have all of our links but when we click those links this won't necessarily go away at this point we can click home we can click our Rockets it will link to those spots but it's not disappearing we can see that as we Mouse over they flicker a little that's because of that opacity so they become just a little see-through so you can see the action notice our pointer is there over each one of these and we've got a pointer over our close Button as well now we need to go back to the Tailwind config file so whether you get there through the file tree or up at the top like I did either way go to that Tailwind config file now a more complex topic that we haven't Dove too far into is how you can set up a theme in Tailwind a Tailwind has a default theme and of course you can add your own themes to that as well you can extend the default theme what we're doing here is you see the the extend keyword we are extending the default theme and we added two more media queries to it now we're going to go ahead and add keyframes in an animation as well so after the screens now I'm going to put a comma and then I'm going to type keyframes and inside of keyframes I'm going to choose an animation that we haven't created yet but it's going to be called open dash menu and then after that curly braces once again an inside of open menu I'm going to say at zero percent so the first keyframe then I'm going to use transform and this is going to be a scale y of 0. this looks more like traditional CSS at this point just like you would write a keyframe if you were writing CSS and then I'll put a comma Now I'm going to do shift alt in the down arrow twice so I don't have to type all of that but here I'm going to say at 80 percent and finally my last frame will be at 100 percent now I'm going to give the menu just a little bounce so we're going to go beyond one we're going to go to like a hundred and twenty percent or 1.2 and then finally we're going to end up back at one so it stretches just a little further and bounces back up to its resting spot at one okay I'm going to scroll just a little more and put a comma after these as we are creating these objects inside of this config file and then I'm going to name the animation here so I'm going to specify the animation and then and name it actually so now inside of curly braces again here is the open menu animation that we referenced in the keyframes above and this is open dash menu let's give a space and then 0.5 seconds and we'll say ease in dash out and then forwards and we'll put a comma after that as well and save now if this looks strange to you if you're not familiar with animations I do have a CSS for beginners Course and there is an animations chapter in that course I'll make sure to link to that below as well and you can reference how these are created you did this is traditional CSS right here so you just need to be familiar with creating an animation and the keyframes for that animation now let's go back to the HTML and we can add those animated classes to our mobile menu so after our justify content Center let's give a space and we'll start with with origin Dash top now this is a transform origin top so we're telling it where to start the animation we want it to come down from the top after that let's go ahead and add the rest and that should be animate Dash open dash menu and that should call the animation that we added and you can see the keyframes and the animation here when I Mouse over with intellisense but there is one more thing to add after that and that is going to be hidden because we want to hide this menu until we want to show it later so we're going to toggle that with just a little bit of JavaScript but you can see we have a problem right now because we're adding hidden and we also had a display of flex so let's remove the display Flex we'll toggle the hidden and we'll remove it and we'll also add in the flex class and that will display everything as we see it now so when I save this will disappear so now it is time to add that little bit of JavaScript we need to show our menu right now we're still not getting anything when we click our hamburger icon so if we go to the file tree we're going to add another folder inside of the build directory so I will click new folder we'll add a JS folder and then inside of the JS file I'm going to add a file named main.js now I'm going to hide the file tree for just a little more room and if you're not familiar with JavaScript this is just vanilla JavaScript or plain old JavaScript in general here and the first thing I'm going to do is create a function so I will say const It app and I'm going to set this equal to an arrow function and then inside the function we're going to select our hamburger button so I'll say const hamburger B TN and I'm using camel case with a capital B there I'm going to set that equal to document I'm referring to the HTML document then git element by ID and then I want the ID of hamburger Dash button now we can tell that went just a little bit long so I'm going to have to press alt Z again to wrap the line of code down after that I also want to get the mobile menu we created so const mobile menu that's going to be equal to document dot get element by ID as well and now here I'm going to say mobile Dash menu which is the ID we gave to that element okay now that we have selected both of those I want to go ahead and create a toggle menu function this is going to be equal to another arrow function and inside of this I'm going to say mobilemenu dot class list so it gets the full list of classes and this is a Dom token list as you can see the intellisense brought up so we have the full list of classes now I can just say toggle and I want to toggle that hidden class now I'm going to press shift alt in the down arrow because I also want to toggle the flex class and yes we could also use replace but then we would have to have two functions we would have to have one that replaced hidden with flex and one that replaced Flex with hidden or we'd have to have an if statement inside of a the function which means the function would really be doing kind of two different things I prefer this but there is more than one way to do it okay after that I'm going to use the hamburger button that we've already selected I need to add an event listener to that button and so when that button is clicked so we're listening for the click event we're going to call the toggle menu function but I'm not quite finished because I also want to listen to the mobile menu so we'll add an event listener there and if the mobile menu is clicked essentially anywhere on the mobile menu so that could be one of the links or it could just be anywhere else the x that we have for the closing button or just a blank area of the menu we want to do the same thing and toggle the menu so it is easy to close so after we add all of that we've created our init app function but it won't do anything yet until we call it so after we've created this init app function here and you can see it goes on line one down to line 12. on line 14 I'm going to say document which again references the HTML document I'm going to add an event listener to the full document I need to listen for the Dom content loaded event that tells me the full document the HTML Dom has loaded and then I want to go ahead and call the init app function you don't want that function to be called before the Dom is loaded because then these buttons that we're listening for and trying to select that will cause errors because they won't be available to select yet so when we save this we're finished with our JavaScript for our variation number one and variation number two will only actually have one more line inside of the JavaScript as well again if you're not familiar with JavaScript this may be a lot for you right now but I do have a beginner's course on JavaScript where you'll learn all about this stuff and much more this JavaScript still won't work at this point though we need to link it to our HTML so we'll go back to the HTML file scroll to the top and underneath our link to the CSS we want to add a script tag and you can choose the one that has Source because we need to specify the source we're going to say look in our JS folder and then choose the main.js file I also want to put one attribute here and it is defer which again is telling the script do not load the JavaScript until you've loaded the rest of the page so we're just being extra cautious there to know our JavaScript will work after the page is loaded at this point our JavaScript should work but there's one more thing we should really do and we're going to need it in the second variation anyway but anytime you're working with JavaScript and Tailwind CSS you should do what I'm about to do and that is go back to the config file now I'll hide that file tree so we can see just a little bit better remember our content up here we did this in the very first lesson of the series we told Tailwind to look at our HTML files inside of the build folder look at all the classes we're using and then generate the CSS but what if there's a class that we reference in our JavaScript that isn't applied in the HTML at all until we need it and then JavaScript applies it so what we should do is also tell Tailwind to look at our JavaScript files so we can put a comma here now we can specify where Tailwind should look for our JavaScript so we'll say in the dot slash build slash JS slash and then an asterisk once again Dot JS so it should look inside of this JS folder for all of our JS files any that we add in there and if we mention any classes in these JavaScript files that are not mentioned in HTML it will still include them in the style.css when it builds that and that's important especially if there is a class that is not applied in the HTML at the beginning but will be applied later with JavaScript and that's exactly what's going to happen in our second variation so I thought it was important to just go ahead and do that now okay now that we have completed all of that our hamburger icon and animation should work for the menu so let's click our hamburger icon and now our menu shows up and it gives that little bounce we talked about now we can click on one of the links like our rockets and we go to that section because the anchors are working contact us we can also click the X to just close the menu but we could also click just a blank area of the screen like down here in the bottom just to close the menu as well and it won't go anywhere different than where it was so if we're at the home area here and we click at the bottom we're still at the home so it's important to just be able to do that to easily close the menu and you can get too carried away with too many animations especially when you want to make a page work quickly so we didn't want anything big to happen we just want a nice quick little animation that doesn't really get too annoying or too in the way if you have to use the page over and over again so variation one is complete and if you're happy with that you can use that in your project and that's fine we're going to move on to variation two where we also so animate the hamburger icon and the menu comes down below the nav bar so we can still see the nav bar as well let's go back to the index.html file and now we're not going to use HTML entities anymore so I'm going to highlight this and comment it out with control and the slash key there it is and I will not remove it from the code just in case you want to reference this first version that we already completed likewise not just the HTML entity here but we're not going to use this button at all this close button that currently shows up because we're going to animate that hamburger icon and turn it into our close button in the second variation so once again I'm going to do control and the slash to just comment that out I'm going to save those changes now and we can see our hamburger icon has disappeared let's scroll back up to our hamburger button and I want to add a few more classes to the button before we start actually building the icon the first one is relative because we're going to position some things absolutely inside of the button very soon so I'll start out with a relative parent on the button itself after that I'm going to say w-8 for a width and H dash 8 for a height and so now if we Mouse over you can see the size that's about 32 pixels and we just made a square for the button and relative is a position relative one other important change I almost forgot is to scroll down to our mobile menu section again and instead of top zero we want top Dash 68 so it shows up just underneath our nav bar when the menu does show up and if you remember from our previous lessons once again when we defined well let's go ahead and look at I believe it's the input that we have for our Tailwind builds so let me find that here inside the source directory then input.css where we can write our own classes we had a Min height and we set each section for this particular class to 100 viewport units minus 68 pixels because we'd already determined due to padding and line height that is what we have for a height of our nav bar is 68 pixels I'll hide the file tree once again and we are ready to start building our hamburger icon we're going to start with a div and we'll give it a background white and then we'll say w-8 and h-1 let's also make it rounded and we'll position this absolute if I press Tab and save now we have a line over here which would essentially be the middle line of our hamburger menu I'm going to put a couple of other classes that won't seem like they're doing much but the top Dash four let me Mouse over this and you can see it's one rem or 16 pixels if I save it doesn't change hardly anything there at all because it's already basically centered but then I want to have a minus margin top Dash 0.5 again not much of a change you see it shift up just a little bit and that's what I'm doing with these two classes is I'm essentially centering it with a position absolute and that is giving it 16 and then essentially let's see here removing two pixels I believe so that just moves it up a little bit better for me if we were to go ahead and select this and look at how it rests in the button you can see the difference but I'll let you do that on your own if you want to but that's just me being picky also okay after those classes are applied we need to go ahead and add the top and the bottom part of the hamburger icon as well and we're going to do that with pseudo elements so we'll have before and then a colon then we can say content Dash now we have brackets and have an empty string here let's have the other bracket as well that's not what we need single quote other bracket and now we should close this out with the double quote I believe is how it was started for the class yes so we have some content here that is just an empty string essentially for the content but then we can go ahead and add more to this so we'll say before and we'll have a BG Dash white we have to put before before each one of these then we have to set the width and the height the same so before an h-1 and then finally before grounded before absolute before okay now we're not going to add the rest of the before yet let's stop right there and save and so far we just see an extra line added there so we haven't changed anything now let's go ahead and add the rest of the before so we'll go ahead and say before transition Dash all before duration Dash 500 and then before minus translate Dash x-4 so that's on the x-axis that it's being translated before minus translate Dash Y dash three now I didn't get a y there I got a six Y dash 3. now let's save that and you can see it puts it up above so if you're wondering what each one does let's go ahead and remove some of these and I actually didn't need to put in the transition all and duration yet because that's more for an animation that will happen as something moves let's save this and we still see the same thing so I've just move removed the transition all and duration for now so let's go ahead and remove the X and see what happens and save now you can see it shifted over because normally when it starts to create here it would start right in the middle and so there it started in the middle and it goes the full width over to the right so if we go ahead and use that minus value for the translate it moves it back where we think it should begin likewise if we don't have the Y on the y-axis moves it up and down it would look like there's just one line again they're on top of each other so we need the Y in there also so once we save we have both and we can of course line these back up just a little bit better so why don't we copy everything we have that starts with before so we don't have to type that all again and space one go ahead and return down to the next line no we don't need that whatever that was let's there we're on the next line now I'll paste all of this in and I'll select all of the before so I select the first one and then Ctrl d at all of these and type after now save and we still don't have three lines and that's because our translate X and Y need to be just a little bit different the translate X actually stays the same but the Translate Y needs to be positive so when we save now we have a third line if not they were just on top of each other once again again if I remove the translate X and save you see it shifts to the right so we don't want that alt Ctrl Z to put it back and now the two properties I mentioned before that we didn't need to display our hamburger icon but we will need when it is animated and that is transition Dash all and then we're going to override the duration you can see here transition all actually will set a duration of 150 milliseconds we want it to be a little bit longer than that so let's go ahead and set a duration Dash 500 and then when we Mouse over that you can see it is a transition duration of 500 milliseconds now let's select both of these and then I'm going to paste at the end of the before content and we need to add a before here so I'll just copy the before colon apply it to the transition all into the duration and now I'm going to copy both of those and move down here to the end of the after as well paste those and change these befores to Afters here and save so now we're ready for the animation now before we create the animation class I want to reference the Tailwind docs quickly and let's go ahead and look up arbitrary values here it is using arbitrary values if we look at this example you can see anything you put inside the brackets can be specific CSS essentially so if you want a specific value for top instead of the predefined Tailwind values you could do that with an arbitrary value inside of brackets and you can do that with other things too we see that with a background color here and there examples so brackets and then they are specifying the exact hex code for that color and we see several other examples here as well grid columns fit content and it's referencing different things so you've got several examples of that and I'm going to use an arbitrary value as we Define this animation so I wanted to highlight that and you may not have realized it but with our before and after content we were already using arbitrary values here for those empty strings as well so now when I Define this animation I also want to reference the at apply because it says reusing styles with at apply or extracting classes so I just want to apply one class with JavaScript not many classes as might be needed with tailwind and so the way we can do that and it gives an example here here's before extracting a custom class you can see this button that they show in the example has many different classes applied to it but after it's extracted all they need to apply is button primary and that is very handy when you're using JavaScript however they do emphasize and here they show how apply works that I'll be using in a second as they Define this button primary class but they emphasize not doing this with apply just to make things look cleaner in tailwind and they give several reasons for that so I want to highlight that of course you have to think of the class names you have to jump between multiple files so those changing Styles is scarier and that's because of course your other teammates or whoever else is working on it may not understand that you aren't using the Tailwind names and they won't be familiar with the names that you've made up and finally they of course emphasize your CSS bundle overall your file size will be bigger so all of those are good reasons not to suddenly start just using apply everywhere and basically writing CSS once again continue to work with these Tailwind classes whenever possible but a great use of apply is creating one class that can be applied with JavaScript instead of applying all of these different classes with JavaScript so that's what we're now going to do and I'm going to do that back in the file tree go to this input CSS file that we have in the source directory and this is where we want to do this now we've got Tailwind base components and utilities animations should also be under utilities really the base components and utilities is all about how Tailwind organizes their classes so yes if you put it under components or base it would also work but really for organization animations and classes related to the animations belong under utilities so that's where we're going to go I'll hide that file tree once again and let's start creating our class and the class is going to be named toggle dash button and all abbreviate button now inside of this class we'll start with this at apply and now this will let us use Tailwind classes inside of this custom class we are creating and now I'm going to use an arbitrary value and that's because I want to make a child selector so I'm going to apply this class to the button and I'm going to select the div and that pseudo element before and pseudo element after inside of the button to do that I need to create a child selector here I'm going to start with the Ampersand and then say div and if we were to create a child selector in CSS it would have say the button over here and then the grader sign in div so the Ampersand is just representing the parent or whatever toggle button is applied to so once we have that then I'm going to say two colons and before because this is how we would select a pseudo element before then another colon and now translate Dash y Dash zero after that I need to go ahead and copy this so I don't have to continue typing that and paste that once again and now I'm going to have rotate Dash 45 for 45 degrees I'm going to do a space but also alt Z so this wraps down to the next line and now I'm going to copy those lines or both of those classes that we just added or Styles I should say as we're creating this new class I want to just change the befores to Afters again the translate Dash y-0 is still accurate for both however the after needs to be a minus 45 degrees and in Tailwind we put the minus in front of the rotate and now let's just select the div itself instead of the before after pseudo element so this would actually be the middle line in the hamburger icon and here we're going to set it too transparent and then once again I need to select that div I need a bracket there we go and greater than div there we go and then this is going to once again be a rotate Dash and now I'll put another arbitrary value 720 degrees now I think I'm going to remove this at first and we can look at the animation without that so we'll put in the rotate afterwards this is also a good point to highlight a problem I had earlier when I Was preparing the tutorial and that is when I was saving in vs code I have Auto format on save it kept adding a space between these so if you are having that problem as you save your file go into your file and then I believe we want preferences eventually wherever I'm at here I'm having a hard time with the file menu find preferences there it is and then we want to look at our settings and inside the settings search for CSS format see what comes up here and we have CSS format enable I disabled that because I was having that problem so just for this tutorial I usually have that enabled I went ahead and disabled so if you are having a problem where saving on for or saving is getting Auto formatted and adding a space like that you don't want that go ahead and make that change as well now I'm going to close that settings above and of course you could do that either way but then go to the Javascript file from the file tree or just from clicking above like I did and we have one more line of JavaScript ad here and it's going to be inside of the toggle menu function so now I'm on line eight I'm going to have hamburger button and then Dot class list dot toggle and I'm going to toggle the class that we just created toggle Dash button now let's go back to our Acme rockets and we have our hamburger menu here it's ready to click when I click notice we've got the X now so we started here and what happened we go back we click again and it closes because it's toggling those classes the middle one becomes transparent we set that in our class here here is the transparent so the middle one the div itself becomes transparent the before translates y back to zero remember we previously translated those up three and down three so they wouldn't be layered on top so they now translate back to zero but then also they rotate and one rotates plus 45 the other minus 45 and so that makes them cross and we get that animation there it's a nice little animation and it's a very standard animation we can make it just a little more attractive by putting in the full rotation of the button so I'll put a space after our transparent I'll select the div one more time and I'm going to say rotate Dash now put our bracket for an arbitrary value because we want to specify 720 degrees and save and so now when I click the button rotates a few times it just looks a little cooler that way doesn't it so maybe you like it maybe you don't you don't have to add the rotation but it's a nice little change as well okay we've completed the mobile menus and we're almost finished with the project but a couple of things I want to highlight now things that I didn't necessarily go too far in depth with and you want to look at the customization customization part of the Tailwind CSS docks talks about themes here we've done some of that we extended themes colors you could also look into custom variables there's things I definitely want to cover in a future project on my channel and I hope to do that the other thing that I want to do of course is drag this back now and we'll see how the page changes but if we look back at our package Json in a previous lesson we installed the dev dependency of prettier for Tailwind here and I'll drag this over so now we can see this in the full screen this prettier plug-in and that is because I had had talked about the order of the classes now as we applied those and we're building this project we just put them in however I felt about doing that and that's fine when you do it as well however if you're working on a team it's going to be really awkward and difficult if everybody's putting the classes in different orders well just for this solution Tailwind has created this prettier plug-in and of course you need to have prettier installed and so we did of course we're using npx for prettier so it just executes it we don't really have to have prettier installed for that but you do have to have the plug-in installed I should say so prettier plug-in Tailwind CSS if you don't have that I can once again quickly show you you could just type let's get a separate terminal going here you go you could just type npmi and then you would want to have that plug-in and then you want to have Dash capital D so it saves it as a Dev dependency after you do that then we put in the prettier script up here so it will just run the script and it's looking at all of our HTML files inside of the build directory which we only have the one so that's what I'm going to do let's look at the index first so let's see the order some of these are in especially I know for a fact it prefers to put the media queries like this medium size hidden right here we'll put that at the very end of this class list for the hamburger button for example so let's go ahead now and run that package Json script that we see here which was npm on prettier this should also flag any errors we have and that's a good thing too and we may have an error so let's find out go ahead and pull this up let's look it looks like everything finished out okay so if there are no errors let's go back and look at our index.html things have changed notice it is organized our elements just a little bit and notice our medium media query where the hidden is here at the end as far as that goes it's changed the order of some of these other things we added to these other classes so any media query is basically at the end of the list now and it's put all of the classes in the recommended order by Tailwind so you want to go ahead and run that before you push your code to GitHub before you would of course go ahead and deploy your project which I want to do in the next tutorial so that's coming up as well and most importantly you would want to run this prettier extension if you were working on a team because then all of the classes would be ordered in the same way for each team member as the code was pushed to the shared Repository in the previous three lessons we built a website for the Acme Rockets company using Tailwind CSS today we'll make some final adjustments look at some theme configuration possibilities and deploy the Acme Rockets website to the web for the world to see let's start by changing Lesson Four here in our package Json file to lesson five and the starter code is linked in the description where you can get the code from Lesson Four which is what we're starting with today and now we'll make some changes before we deploy it to the web now let's open a terminal window by pressing Ctrl and back tick or you can go to the terminal menu in vs code to open a new terminal window as well and then we're going to type npm run Tailwind you can see we've already set up that script in our package Json so this is the actual command that it will run when we type that here in our terminal window so I'll press enter and Tailwind will start to run and it will be watching our files and compiling them to the style l.css file which is the final file that contains all of the Tailwind classes that we're using now I'll close the terminal window and let's go inside the build directory to our index.html file from here I'm using the live server extension for visual studio code so I'm just going to click go live down here in the bottom right and it's going to launch the website now I want to open Dev tools and look at how we're applying some media queries because I've had some second thoughts about this from what we have applied in the past so I'm going to go ahead and choose a tall phone like the iPhone and you can see we're not giving just the full screen to the first section here we also have the header R Rockets down here so I know I'm not applying a media query exactly the way I wanted to so let's go back to visual studio code and look at our custom media queries and those are in the Tailwind config file you can see we have a wide screen and we have a tall screen and in the last video I switched the tall screen minimum aspect ratio from one half to 13 over 20 which is 65 percent what I neglected to do was change the Min here to a Max and that's because we don't want it to be applied to anything larger than that 13 over 20 or 65 percent so all of the smaller ratios we do want it applied to so let's go ahead and save this change and now I'm going to just minimize Visual Studio code and let's refresh because that's in the config file so even though we're using live server I'm going to hold down shift and completely refresh so it clears anything that was cached and here we have a full screen now for our first section and that's what I want let me see if I can make this any larger fit to window is 77 that's better for the iPhone X or iPhone 10. and now we can see each section for this iPhone will of course have its own full page and you can really tell that with the contact form or of course the very first hero section that we have and this applies to the other phones we might check as well so let's look at a different phone that's also like the I-12 or iPhone 12 Pro here we go so very similar there and now if we switch to an iPad that media query should not apply and we can try to fit this to the window it'll make it much smaller there we go so that's what we want in an iPad where it doesn't take up the full screen and presents itself differently of course the testimonial section is long enough it does take a full screen the rocket section does not the contact us form does but we can also see the footer there as well so now I think I'm applying the media query the way I wanted to and you can of course check that here it is a 1920 by 1080 essentially a 16 18 by 9 which is that wide screen now it uses the full viewport for that one section our hero section so when we go to Rockets it will just be the rockets and of course there's room to add more Rockets now for the Acme rocket company they wanted to do so the testimonials once again is tall enough to take up more than the screen and the contactus form fits fairly well and then we can see that footer but it doesn't allow it to show there at first because the section takes up the full screen so just checking those media queries before we go ahead and deploy and again you can set those to your preference now I'm going to bring Visual Studio code back up and I'm going to drag it to the left and I'll try to get our browser just over here to the right I'll close devtools so we can see what we have here now this window is just a little bit wider than that media query allows I think there we go that's when it kicks in so I'll drag it over to this side so we can see what we wanted for the tall screen otherwise it applies more of what we we were seeing for an iPad where it fits more than one section anytime we see this horizontal rule that means it's fitting more than one section to that page so there we go it kicks in right there I'll just drag Visual Studio code over to about that spot and now of course I'm going to press Ctrl B to hide the file tree as well I want to talk about this content here inside of our tailwind.config.js I've had some ask because in the docs it shows this differently and I'm specifying exactly where the HTML files are and they're just inside the build folder and then also inside the build folder I'm providing a second value here for where the JavaScript files are you can do this there is no issue with this whatsoever but you can also just provide what they show in the docs so I will change this and now you can see this is all in one line and I've got build here but then I've got a couple of asterisks to say okay if there is a folder look inside of any folder that's in the build directory and then look for these HTML and JavaScript files and if we save and once again I'll hold down shift and refresh just to make sure but let's make sure this is working yes our JavaScript still works and this is a fairly handy line but there are some considerations here and it doesn't hurt to specify like I was before where each is because if you try to do this with just HTML and you don't have any JavaScript this isn't going to work so well let's go ahead and refresh and now notice it's not working it's not applying the CSS at all and this is essentially our page without any Tailwind applied so if you're going to do this it looks like you need to at least have the HTML and another file extension value inside of this curly brace here at the end so with HTML and JS both in here it works with only HTML in here it doesn't work now let's look at what happens if we go ahead and remove the curly braces and we don't tell Tailwind to look for the JavaScript at all because I was also asked about that so we can save we can continue to leave this possible folder here with the two asterisks and it will still look for all of the HTML files inside of the build directory so it should still apply here as I refresh and save but we're not looking for any JavaScript now the JavaScript will still work without Tailwind it doesn't rely on Tailwind to work however we do have an issue with the class names so let me go ahead and click the hamburger menu notice the menu drops down the JavaScript works but nothing happened to our hamburger menu and that's not because of the JavaScript that's because Tailwind doesn't see the class name that's inside of the JavaScript and it's only inside of the JavaScript so if I go to the file tree we open up the main JS file I'll once again hide the file tree so we can see it this toggle button class only appears inside of our JavaScript it is nowhere to be found inside of that HTML file so let me show this go to HTML and now Ctrl F to search and I'm going to search for toggle dash button no results this class is not listed anywhere inside of the HTML file it's only applied with JavaScript and that is why Tailwind needs to see our JavaScript files as well so once again you can apply it as the docs show in one line like this so we're saying look inside of the build directory then look inside of any other subdirectories any other subfolders and then look for HTML and JavaScript files that's one way to do it or you can do it like I did before and I'll go ahead and continue to undo these changes and now you see what I previously had I'm telling Tailwind to look inside of the build directory for the HTML files because that's where I will have them then I'm saying look inside of build and the JS directory specifically so you could say I'm being explicit about where these files are not their names because I'm saying look for any Javascript file or any HTML file but otherwise the other way is kind of being implicit it's saying it can be inside of any directory inside of the build directory so any nested directory and then any HTML and JS file which could be a little bit more flexible especially if you're working with a bigger directory structure in a project with react and so on so just some options I wanted to mention there now I've also had a few questions about the theme and notice here we are extending the theme with this extend object that is nested inside of the theme before we specify anything and that's because we don't want to write over anything that's already provided by Tailwind but it's not that you can't do that I'm going to go ahead and bring our browser to the full screen and then we'll look at the Tailwind docs notice here for the theme they're providing in their example and then they say screens well these are the media queries but they're not extending they're actually writing over anything Tailwind would already have predefined and they're providing these the same with the colors here so they're going giving specific color names but this would not extend the existing Tailwind colors this would overwrite any colors that were provided as it provides a colors object so you want to be careful when you do that likewise down here for spacing and Border radius they are extending the theme they're not overriding those so they're just adding more to it I do recommend to always extend as your learning tailwind and of course as you learn it better in the future you could go ahead and possibly overwrite some of the default themes but it's better to of course extend and not take anything away you can always extend and add two and just not use those other themes and if you don't use them in your project as we see here then of course Tailwind will not compile those unused classes to the style.css let's go ahead and pull this back over and look at Visual Studio code and I'll give one example of how you could extend the theme to apply a color so I'll just say above screens and remember screens here we added two different media queries but of course we kept all the default media queries as well but let's say we want to add a color that we're used to working with I've used the color papaya whip many times and that is not available in Tailwinds so to add that I'm going to be inside of this extend object still and then say colors and provide my curly braces and you need a comma after the closing curly brace not a period but a comma there we go and so for papaya whip let's say I want to give three values I don't want to give the the full spectrum like Tailwind does with the values of 50 100 200 and so on but I want to have just a few so I could say possibly light and well first I need to say Papaya whip so I almost skipped that part papaya whip which is a color name in HTML and then inside of that I'm going to say light and then I'm going to give the hexadecimal color now I already know this so I can just type it in but you could look up the colors you want to add and then I'm going to provide a default and this would just be referenced as papaya whip you don't have to say Papaya whip Dash default so this is a keyword inside of tailwind and by the way I said this is a color in HTML but you could make up your own name you could make up whatever you want to right here and then you'll be able to refer to that so after that I'm going to provide the actual papaya whip hexadecimal and then I'm going to provide a dark value so here I'm going to say f e e 5 BC again these are values I already know you would have to look up your own that you want to apply so now I can use any of these three and so I would refer to as the class inside of Tailwind I would say text Dash papaya Whip and that would give me the default one right here or I would say text Dash papaya whip dash light and that would be this color here or text Dash papaya whip Dash dark and that would be this color and if we go ahead and just look at an example inside of our file I'm going to press alt Z so these lines wrap but if I wanted to just add it here in the mobile menu I'm not going to keep this change but we'll see these are now added to our intellisense so I'll say text Dash papaya Whip and it also gives me the light and dark options because the Tailwind CSS intellisense extension that we added already picked up up on these because it's in our Tailwind config file so that's very handy if you do want to add colors to your project so even though we're not using this in our project I'm going to leave it in here and this will be in the GitHub repository if you want to refer back to this of course also refer to the docs because you can do this with any type of property you want including media queries as we've done before I'll drag this to the left and bring this back over we'll pull the docs back up and you can see there's all sorts of things fonts border radius anything you can think of really you could configure in your theme for your project and I should also give the reminder as I drag the browser back to the right that inside of your HTML and I'll pull this file back up if you just had one color value you wanted to use one time remember you can use arbitrary values so you could have text Dash and the arbitrary value goes inside of brackets and then you could provide that color possibility here so here we might say ffe fd5 and if I just wanted to use papaya whip once that's how I would do it and that might be easier than dropping that into your config file if you just needed to use it once or twice you might choose to use that arbitrary method instead so just once again bringing that possibility up okay we're ready to talk about deployment now and if you do not have git installed and if you're not familiar with Git and GitHub I do have a tutorial for that on my channel so I will link to that in the description or possibly up here in the video as well and you'll want to install git because we will be pushing our code to GitHub with Git and then we will deploy it from there to render.com so first of all git and then you'll also need to sign up for a free account at github.com if you do not have that if you're not familiar with those I hope you are but if you're not remember I have a video that will help you with that okay with both of those in place let's go ahead and pull Visual Studio code back into view here so I'll use the full screen and once we have that and here's the file tree we need to initialize git so if I'll collapse all the folders over here it doesn't look so busy and I'm going to do control back tick to go to a terminal again we've already compiled our CSS so I'm just going to press Ctrl C to stop Tailwind so no longer compiling we're not making any further changes now we need to initialize git to initialize git I'm just going to type git git and then init and press enter this will turn into a repository on my computer so now that I have that I can commit the code to the repository so I'm first going to add it with Git add and a period now period means add all files so make sure you already have a DOT git ignore file and list your node modules directory in that and if you do that you'll see it grayed out over here to the left because we do not want to send the full contents of node modules to GitHub there's no reason for that so we'll go ahead and make sure we have that git ignore file with node modules and then you can add all files with Git add and a period which will add all of the files inside of this directory once we've done that we need to commit the files now with a message I'll just type git commit Dash M for message and I can say first commit and press enter once again at this point I need to have created a repository on GitHub so if we're looking in our browser now in GitHub I'm just going to click new or new repository and we can name this and I'm just going to name this hailwind underscore Tut for now I'll probably delete this later but for now I'll just have Tailwind underscore Tut that will be the name we could make this public if you have an account that allows you to make it private you can make the source code private and then still deploy it that's fine I'll just go ahead and do that now because this isn't the repository that I'm going to link to in the description that goes with the rest of the course so I'm going to have private you'll probably have public and that's fine after that you just create the repository so we'll just wait on that and after it creates the repository we've already created a I said repository the the space for the repository essentially in GitHub we haven't put it there yet it says push an existing repository from the command line so we have an existing repository on our computer we'll need these three lines typed into the terminal we can copy all three by just clicking the little copy button over here once we've done that I'll drag this to the right just to get it out of the way look in Visual Studio code I'm going to go ahead and click this to maximize our terminal so you can see everything and when I right click it will paste these commands in it executed the first two and it's just waiting on me to press enter for the last one then when I do that it pushes this code to GitHub in the repository space that we just created on GitHub I'll make this a little smaller again I could even close it out as we're not going to use that terminal anymore drag this over to the left bring Visual Studio code back here and we can scroll up and just click on the title Tailwind Tut to make sure our code has been committed and here we see our commit message first commit as well so this is our code and now with our code on GitHub we need to go to render.com that's where we're going to host our site you can host your website for free at render.com and to do that you'll need to sign up now I'm already signed up so I have a dashboard link right here but you'll want to sign up with your GitHub account or after you sign up if you don't or if you've already signed up without your GitHub account you could then link your GitHub account to your account carrotrender.com you may have to verify your email so go ahead and sign up and then come back to this tutorial I'm just going to go straight to my dashboard now and you'll have a dashboard as well after you sign up and then you'll have a new button when you go to your dashboard you can see I have a couple of projects here already successfully deployed now I'm just going to click new and we're going to create a static site here that's what our website is it's got just a little bit of JavaScript HTML and CSS okay once you've done this and you have connected your GitHub account as you can see mine is connected here if yours is not you'll probably have a connect Account button over here and you can see it supports get lab as well which is kind of like GitHub so if you want to use that you could but we're using GitHub and I've connected that once we've done that I can see my most recent code repo right here my repository from GitHub at the top of the list you could search your Repository toys but mine's right here so I'm just going to click connect and once we've done that it's going to pull up this web page here where we need to put in a few settings for our website so we could name this anything we want to I'm going to name it Acme Dash rockets and after that we'll leave the directory blank here because looking at the root directory is just fine the way it is then we'll have the branch it's main that's the only Branch we gave our repository the build command we don't have one for this because it is just a pure static site HTML CSS and JavaScript a react for example or node we might use a build command but we're not going to with this site and then a publish directory this gives the example of build and that's exactly what we did we were compiling our CSS from Tailwind so it all went into a build directory so we need to type build in right here so that's the directory we're going to use to launch our site from and after that you just click create static site we'll get a screen here in just a moment that we can see the progress on and it will take just a little bit as it goes ahead and builds the site and when it's finished we'll get a success message okay just a little bit of time has passed now and you can see there's several more messages here inside of this window and now it says your site is live and that's what we wanted to hear so it should be ready to go I'm going to scroll back up to the top and you can see the web address the URL or the website now so you can copy this or you could just right click and open link in new tab and let's see the website here it is now notice we don't have the fave icon yet so let's see if we can hold down the shift button and refresh to get that fave icon not yet but I think we will soon so it should go ahead and provide that as well if not we need to put that fave icon in the build directory if we didn't and any change we make say we would put it in the build directory if we hadn't we would push that back to GitHub it will automatically deploy then and that's an awesome thing about the way this is hooked up with render so when we push our code to GitHub it automatically redeploys our changes over here on render.com so we can check everything out but I think it's going to look just fine this is live on the web now so there is our full site let me once again go ahead and delete the anchor here for the hero and see if we can get that no we didn't get that so let's go ahead and check our Visual Studio code to see if we even supplied that fave icon inside of the build directory here it is not in the build directory let's look in the build directory it is not there so let's drag the fave icon into the build directory instead now that we've made this change we could push this change to GitHub so I'm going to once again well first I'll type get status because you can do that to see if there's any changes and notice it knows the fave icon was deleted from the root directory and now it's added inside of the build directory so it knows that so let's just say a git add and I'll just press period instead of typing the specific file name you could do either after that git commit Dash M and I'm going to say moved save icon to build directory and now git push so we have pushed those changes we can close the terminal window I'll pull Visual Studio code over here let's go back now to our render.com page and let's look at events here let's see what happened so we have our first deploy the deploy is live now a new deploy has started and we can see the dots over here so it's underway right now and you can see the git commit that I put in moved fave icon to build directory so let's check the deploy now and we can see we're getting this message again so it's going to take just a little bit I'll come back to the video when it's complete okay I'm back it says your site is live again so we could launch it again from here but we've already got it open in a separate tab so I'll just go back I'm going to hold down the shift key and reload and we still didn't get the fave icon oh there we did get it okay so it did pop up there so now our change is there that's a very simple change but now we have the fave icon for the website so that just shows you how you can make any change to your site push it back to GitHub and it will automatically deploy at render.com well congratulations on getting to the end all the way through our Tailwind CSS series now you've built a complete website with Tailwind CSS so what would be the next step to learn it even better what I recommend is take another project maybe you have built the little taco shop website at the end of my HTML and CSS tutorials and what I suggest then is taking the little taco shop and switching it over to Tailwind CSS you now know how to config as we looked at the theme configuration here you could put in any specific things you want you could use arbitrary values or you can use built-in Tailwind CSS classes as they're already provided so you can do all of that and you could create a another version of the little taco shop website or any other project that you have created and apply Tailwind CSS to that and I think it will help you learn Tailwind CSS even better again congratulations on completing this series remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 223,492

Keywords: tailwind css full course, tailwind css, tailwind, tailwind css course, tailwind css beginners, tailwind css for beginners, tailwind css beginners course, tailwind css full course for beginners, tailwind beginners course, tailwind full course, beginners course tailwind, beginners course tailwind css, tailwind for beginners, css, tailwindcss, tailwind css tutorial, tailwind css beginners tutorial, tailwind css tutorial for beginners, beginners tutorial tailwind css, tailwind css tut

Id: lCxcTsOHrjo

Length: 180min 19sec (10819 seconds)

Published: Fri Oct 28 2022