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/tailwindcss@^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 to 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 into multiple categories such as contact, content, e-commerce, feature and many more.

Select the design you like and select the colour 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 into our HTML code between body tags. You can change the colour of these blocks by going to Tailwind Background Colors and replacing the colour 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 and beautiful.

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

Hosting on Netlify

Once you have finalized your website design upload the HTML code and other assets of the website to a new GitHub repository. Now head over to Netlify and log in using your GitHub account. Once logged in, click on New Site from Git and follow the steps to add the 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 the 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 a 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 👋