Create a website
In previous lessons, we learned a lot about preparing the environment, configuration, and deployment. All this is very important, but it's time for us to finally get a taste of Tailwind and TW Elements.
Let's jump in to the code! 🚀
Step 1 - launch the project
We will use the MDB GO starter project we worked on in the previous lesson.
If you don't already have it running, open a terminal, navigate to the directory where you have your project and enter the following command:
After entering the above command, MDB GO should start a local server on your computer and launch a browser window with your project.
Step 2 - clean the project
Remove all the code from the src/js/index.js file and also
remove the carousel from index.html.
You can also remove the class dark:bg-neutral-800 from the
<body> element and class dark from the
<html> element.
After all the cleaning your src/js/index.js should be
completely empty and index.html should look like this:
Step 3 - add navigation bar
Note 1: Take this lesson as a demonstration and don't worry if not everything is clear to you. Each aspect covered here will be explained in detail in future lessons.
Go to the navbar documentation page and locate the section "Basic" at the very beginning of that page. Click "show code" and copy HTML code.
Then paste it into the index.html file and save it. After
refreshing the browser you should see a nice, interactive navigation bar.
As you can see, there are a lot of different classes in such a single component. This looks like a mess at first glance, but that's the nature of Tailwind CSS and the utility-first approach. You will soon learn the advantages of this and find out what benefits we have in return for this chaos.
As this is a demo lesson, we won't go into what exactly these classes do at this point. We'll cover each of these in detail in future lessons, but for now let's focus on finishing our first page.
Changing the color
But there is one little thing I would like us to change - the color of the navbar.
Locate the bg-neutral-100 class in the navbar (it gives the
navbar a gray color) and replace it with bg-white class.
In my opinion it's much nicer then.
Navbar initialization
Our navbar looks good, but unfortunately it doesn't work properly yet. If you reduce the size of the browser window to the mobile size and click on the hamburger icon, you will see that the menu does not expand.
This is because we still need to initialize the component.
So again, go to the navbar documentation page and from the basic example click the "JavaScript" tab and copy the initialization code.
Then paste it to the src/js/index.js file:
After saving the file you should see all the interactive elements (like hamburger or dropdown) work properly.
Step 4 - add jumbotron
It would be good to add some element that would stand out from the start.
Such an element may be a jumbotron, which is commonly understood as a banner with information crucial for our website.
Directly under the navbar, add the following code:
After saving the file you should see a pretty, gradient jumbotron.
Step 5 - add grid
There is a very nice component called a card. Cards are not only visually attractive, but also great for presenting various types of content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Wouldn't it be great to have some nice cards like this in our design? Sure it would!
However, there is a problem - how to place them in our layout so that they display correctly on both large screens and phones? Of course, on large screens we want to have them next to each other, say 3 in a row. On the other hand, they should line up one above the other on mobile.
This is where Tailwind grid comes in handy, which is a powerful tool for creating a responsive layout.
We will learn about the grid in detail in future lessons. Now just trust me and just follow the steps given below.
Paste this grid code below the jumbotron component:
After saving the file you should see three columns.
Responsive layout
If you start resizing the browser window, you will notice that this layout is responsive and adapts to the width of the screen - on smaller screens the columns will be placed one below the other.
Step 6 - add cards
Now we're ready to add cards.
Go to the cards documentation page and copy the HTML code form the section "With ripple effect".
What is ripple? Ripple is a Material Design effect of the propagation of circular waves upon interaction with a given element. In the documentation example, click the image or the button in the card to see it.
Then paste 3 cards between
<!-- Column --> comments replacing the code
there with the card code (you can change the pictures and texts in the cards
as you like or even customize the card elements like buttons)
After saving the file you should see the cards:
Ripple initialization
Now when you click on the card image you won't see a ripple effect. As with the navbar, here also we need to initialize it first.
In the Card with ripple effect, when you click on JavaScript tab you will see the initialization code.
So let's update src/js/index.js file
and add ripple initialization:
Now when you click on the card image you will see ripple effect:
Step 7 - add footer
The final step of our small project will be adding a footer.
A footer is an additional navigation component. It can hold links, buttons, company info, copyrights, forms, and many other elements.
Go to the footer documentation page and copy the code of the Basic example.
Then paste it below the grid with the cards:
After saving the file you should see an extensive gray footer below the cards:
Alright, our first TW Elements project is ready! 🥳
And look, it displays properly on any size screen. Change the size of the browser window to mobile view to see for yourself. Isn't it nice?
Well done, you! 👏
If something did not work out as it should or if you want to make sure that you did everything right - click the button below to see the final result.
Final demo & source codeStep 8 - publish it on the Internet 🚀
It's time for the final step - to share our project with the world!
As you remember from the previous lesson, it is child's play thanks to MDB GO.
In the terminal press ctrl + c (or
command + c on macOS) to abort the current
process. (sometimes you have to click 2 times for it to be interrupted).
Then enter the following command in the terminal to publish your project on the Internet:
After entering the above command MDB GO will ask you about the package manager. Choose the default option (npm) simply by pressing enter key. Then MDB GO will start optimizing your project and publishing it to the Internet.
After a few seconds, you will receive a link under which your project will be available. It should automatically copy itself to your clipboard, so all you have to do is paste it into your browser.
Note: If something doesn't work it's possible you are not logged in to your MDB GO account.
In this case simply type mdb login command in the terminal
and then enter your username and password that you set when registering
your MDB GO account.
Once again - congratulation for the finishing the basic part of our tutorial. You did a great job!
And as always - if you have any questions or suggestions - hit me up on Twitter 😉
About author
Michal Szymanski
Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.