Create A Beautiful Responsive Website Within Minutes

Web Developemnt Aug 2, 2020

Hello Everyone, In this post I will be telling you how to make a beautiful responsive website within minutes and I'm not talking about any free website creating tool. You will write the whole code and deploy it also on your own all for free. We will use Tailwind CSS for styling and Netlify to deploy our newly created website.

Adding Tailwind CSS Stylesheet

Open your favorite code editor and create a new file named index.html. Now we will write the starter html code and add the Tailwind CSS CDN into between the head tag of your html code. This will add the Tailwind CSS stylesheet to our html code and now we can use the classes defined by Tailwind CSS in our website.

Your code should like this now:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">
    <title>My Website</title>
</head>
<body>
    
</body>
</html>

Adding Blocks

Now we will add the Tailwind blocks in our webpage according to the design we need. Go to Tailblocks, where Ready-to-use Tailwind CSS blocks are available. You can find blocks divided in multiple categories such as contact, content, ecommerce, feature and many more.

Select the design you like and select the color of the blocks you want. Then click on view code which will display the code for that corresponding block. Copy that code and paste it in our html code between body tags. You can change the color of these blocks by going to Tailwind Background Colors and replacing the color code in the code.

Once you have added all the designs you can open your html file in any web browser of your choice and you will find your new website which is both responsive an beautiful.

You can add paddings, margins etc according to your need easily with just adding a class to that element.

Hosting on Netlify

Once you have finalized your website design upload the html code and other assests of the website to a new github repository. Now head over to Netlify and login using your github account. Once logged in, click on New Site from Git and follow the steps to add your repository you have created, keep the build command field empty and click on Deploy Site to deploy your website to Netlify.

Once your website has been deployed successfully you will see the link to your website. Open the link to see the live version of your website and share it with your friends.

What if you want to change something on website? You don't need to create a new repository and repeat all the steps. You can directly commit changes to your repository and the changes will automatically get deployed on the netlify.

You can also add custom domain if you have one. Read the Netlify Docs to learn more.


Fun Fact- I have made my personal portfolio website also this way.

I hope you liked this article. See you soon in another one.

Bbyee 👋

Tags

Vineet Ranjan

B.E Student in Electrical and Electronics from BMS Institute of Technology and Management, Bangalore. This is my blog for programming ,cloud computing and Deep Learning from what I have learned.

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.