Tailwind CSS Tutorial #2 - HTML Template

all right then gang so in this lesson i'm going to be fleshing out the html of the webpage that we're going to be designing with tailwind now i know that a lot of people don't feel like they need to watch this and they just want to get right into tailwind itself which is understandable but i also know that a lot of people like to see me create the html structure because it gives them a broad view of everything we're doing from the start so if you don't want to watch this fine that's cool you can skip right ahead to the next lesson where we'll jump into tailwind but if you do want to see me create and explain this html template then stay right where you are and we'll do that now okay so the first thing i'm gonna do is create a new file inside the public folder called index.html now inside vs code i can just type out doc and tab and that creates me this html boilerplate so inside the body this is where we want to work for now the first thing i'm going to do is create a div tag and this is going to be a bit like a wrapper for all of our content so i'm going to create a little comment right here just to say content wrapper so we know what that is and then inside this i want first of all a div to surround our navigation so let me do another div now i'm not giving any classes or ids or anything like that to these elements at the minute because we're going to do that later on when we start to work with tailwind for now it's just going to be the bare bones and the elements themselves so inside this div we need a nav tag for the navigation and inside the navigation again there'll be another div and this div is going to contain the h1 now the reason i've surrounded this in a div again is because later on other elements are going to be inside it and i wanted to group them all together so the title is going to have an anchor tag inside it which is just going to go to forward slash the home page and the title inside the navigation is going to be food ninja so remember the navigation is going to be the stuff that sits on the left of the page so after that div under here i'm going to do a ul and this is going to contain all of the different links so there's going to be like maybe home about and contact so let me do an li tag for the first one and inside there an anchor tag we'll just say hash for the href attribute it doesn't need to go anywhere and inside the anchor tag we'll do a span and this is going to say home so this is the home link now the reason i've put this inside a span is again because we're going to have more content here later on icons but we're not going to do that yet i just wanted to give this its own spat in case we want to style it separately from the icon so now we have that li tag let me copy that dude and paste it down here a couple of times and the next one is going to be about and then the final one can be contact okay so then now we have our navigation section sorted so that was this thing right here so we can say right here if we want to and now that's what that part is about okay so after that we want to do our main content now this is going to go inside a main tag like so and inside the main tag the first thing i want to do is two little links in the top right eventually which is going to say login or sign up so let me do a div to surround those and inside an anchor tag for each one again it's just going to go to hash and then the first one will be login let me duplicate that and this one can be sign up like so so they're going to sit in the top right of the page eventually underneath that div we want now a header so that is going to be for the title so let me do a header tag like this and inside we want an h2 first of all and that is going to say inside it recipes and then underneath that we want an h3 and that is going to say 4 ninjas all right so that's our header dead simple now underneath that we need our different cards for the different recipes so let me now create a div to surround all of these and inside let's do a little title there's going to be two different sections with cards under it it's going to be the latest recipes and then maybe most popular recipes so let's do a title an h4 first of all for the latest ones so latest recipes like so and then underneath that we're going to place our cards for the latest recipes so let me do another div and then i'll do a comment saying cards go here like so and then underneath that we'll just flesh out the basic structure of a card which will be a div in itself inside we're going to have an image tag and we're going to hook this up in a minute when i import the images or rather place the images into the public folder we'll do that in a second but underneath the image we're going to have a div to surround the text content inside we'll have a span for the title which we'll call five being chili stew like so and then underneath that i'm gonna do another span which says a recipe by mario alright so that is pretty much it for the basic structure of a card a div with an image inside it then a div for the content as well the text content all right so eventually we'll have several different cards but i'm not gonna duplicate them all now because this is gonna change in the future and when we've finished the design with all the different classes then we'll duplicate it okay all right so that was the first section i'm actually just going to copy this because we have two sections remember we have the latest recipes and the most popular ones so let's do another h4 to say most popular like so and underneath that we need another div oops we got the m right there we need another div for the second section of cards and inside here i'm just going to do a comment to say cards go here and you know what i'm not going to duplicate the card and place it down here again because again i don't want to have to rewrite all of the different classes we apply to this to these ones as well so we'll concentrate later on styling this up alone then when it's finished we'll duplicate it into the different sections where we need it okay so then that is pretty much done we just need one more thing at the bottom and that is going to be a load more button so this is going to have a div to surround it and then a div inside and the reason i'm doing it in this structure is so that we can apply styles to a parent and also the button itself now this could be a button element if you prefer or an anchor tag really doesn't matter i wanted to show you various different ways to work so i've mixed it up a little bit so this just says load more and that my friends is pretty much it so this is the basic template for our project now it would be nice if we could preview this in a browser now you could do that by finding the file inside your file system and then just double clicking on it to open it up in a browser but what i'd like to do is spin up a local development server instead and to do that i've installed a package using npm globally on my computer called live server and that allows us to serve up any folder we want on our computer so we can preview it in a browser okay so to do that to install it all you have to do is say npm install live hyphen server hyphen g to install it globally on your computer meaning we can use it anywhere so press enter to do that i've already done that once it's installed we can say live hyphen server to spin up a local development server then the folder we want to serve files from now in our case relative to where we are here it's going to be in the public folder so i just say live server public and then it starts up a development server and serves from this folder right here and this browser just opened up on my other page woohoo so here it is and this is what our project looks like so far not great now these things right here where we have purple text and underlined and different font sizes these are the default browser styles they are applied by default to our elements by the browser now that we need to link up to this style sheet right here because this is going to contain all of the different classes we'll be using later on so let's do that at the top i'm going to say link and it's going to go to styles.css okay which is this thing right here now if i save this you're gonna notice over here it automatically refreshes and updates and it strips out all of those browser default styles so now everything looks absolutely the same and it's just a list of text now that reminds me we need to add our images in as well as the text so what i'm going to do is open up this folder which i have right here and i'm just going to drag these three images into the public directory in fact no i won't i'm going to create a new folder called image and then i'm going to drag them into that folder right here so down here in our card we can link to one of those so i could say we want it to go into the image folder forward slash stew.jpg and for the alt we'll just say stu if i save that we should see that over here now cool so again looking very bland at the minute but tailwind has already stripped out all of the default styles and that's because we have this style sheet right here which does that but anyway now we have the html page sorted we can dive right into styling it with tailwind and we're going to start by styling the text and the colors of some of the different elements in the next lesson

Channel: The Net Ninja

Views: 92,893

Keywords: tailwind, tailwind css, tailwind tutorial, tailwind css tutorial, tailwindcss, tailwindcss tutorial, tailwind crash course, install tailwind css, install tailwind, how to use tailwind, tailwind vs bootstrap, tailwind introduction, what is tailwind, tailwind node.js, tailwind node

Id: 3ZMUgga6SsY

Length: 10min 1sec (601 seconds)

Published: Mon Jul 06 2020