Tailwind CSS Tutorial #2 - HTML Template
The Net Ninja
HTML Template for Tailwind Webpage
In this lesson, I will be creating and explaining the HTML structure for our webpage using Tailwind. If you just want to jump into Tailwind, feel free to skip this section.
First, create a new file called index.html inside the public folder. Inside the body tag, we will start by creating a div tag as a wrapper for all our content.
Navigation
Inside the wrapper div, create another div for the navigation. Inside this div, add a nav tag and another div to contain the h1 tag. The h1 tag will have an anchor tag with the title "Food Ninja". Below the div, add a ul tag with li tags for the different links (home, about, contact).
Main Content
Inside the wrapper div, create a main tag for the main content. Inside the main tag, add a div for the login and sign up links. Then, add a header tag with h2 and h3 tags for the title ("Recipes" and "For Ninjas").
Recipes
Inside the main tag, create a div to surround the sections of cards. Add an h4 tag for the title of the first section ("Latest Recipes"). Below that, add another div for the cards and flesh out the basic structure of a card (image, text content).
Copy the structure for the second section ("Most Popular Recipes") and create a div for the cards. We will style and duplicate the cards later.
Load More Button
Add a div to surround the load more button. Inside the div, add another div and a button with the text "Load More".
Now, you can preview the webpage in a browser by using a local development server like live-server.
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 gon na 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
