In 5 minutes, how to make a website

Welcome back to a new article. In this article, I will show you in just under 5 minutes how you can create a complete front-end responsive website. So let's start. 

Let's begin: 

This is the trick we won't use Bootstrap, we will use Tailwind CSS. Tailwind CSS is a really very customizable and easy-to-use CSS system. Tailwind CSS is an Adam Wathan-developed CSS library. It helps you to use ready classes to export CSS to your components. Writing code provides great versatility because it does not have ready components such as Bootstrap, and it is more flexible for your creativity and design abilities. So now let's fire up VS Code, and let's start creating Index.html.

Let's go to Tailwind CSS CDN Copy the CSS CDN for Tailwind. Come to VS Code now, compose the HTML boilerplate and paste the CDN connection in the header portion.

It's going to look like this:
   <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Sushil Sharma | Blog</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
Let's go to another website now, Tailblocks- Ready to Use Tailwind CSS Blocks
Tailblocks is a repository of code built on GitHub by Mert Cukuren and consists of blocks of code generated using TailwindCSS.
For the block, you picked, pick a colour from the colour palette. With the dark/light toggle button, choose whether you would prefer to use light or dark mode. You can now pick the header from here and press Display Code in the upper-right corner, copy the code and paste it into your VS Code. We have the Header for our website created now. The rest is easy now. All you need to do is just copy components from that website like we did for the header and paste it to your VS code, modify it, including changing the name, colour, etc., and now you have your website.

For beautiful Photos use Unsplash API or any other preferable sites.

Use SVG for the links given below.

I have tried, in my experience, to relay my information to you. Please contact me via the following accounts if you wish to contact me about any of your comments, advice and reviews. Thank you for taking the time to read the article here.

TailwindCSS: What is it and should we use it?

Over the past year or so, the utility-first CSS framework known as TailwindCSS has become very well-liked in the front-end communities. It seeks to make CSS simpler by classifying the most popular CSS so that programmers may select their favourite styles from a pre-defined library. This strategy aims to assist developers in establishing a firm baseline so that they may focus more on how the code should reflect the design, which is frequently the most important aspect for many teams, rather than on how the code should operate together. You can give it a try on their playground if you want to play with Tailwind without making any commitments.
Tailwind CSS playground

What about CSS?

It is entirely acceptable to use Pure CSS, and both small and large projects frequently do so. However, good defaults are offered by frameworks like Tailwind and Bootstrap. In order to avoid having to bother about setting up all of our font sizes, colours, breakpoints, etc., both, for instance, give a theme with default styles. It can take a long time to put up this type of boilerplate.
Docs for Tailwind CSS
By using a framework projects that use that framework are guaranteed to be consistent with one another. Any project, whether bootstrapped or run-on tailwind, will function in essentially the same way. This makes onboarding new team members much easier than it would be in CSS since it greatly increases the likelihood that they will have used these toolkits previously. Onboarding would be considerably more difficult in CSS because it would be entirely custom.

Which is best?

This question's resolution is influenced by a variety of factors, including individual taste. Bootstrap's prebuilt components are excellent for enabling quick setup and operation. This is most likely the ideal option if we need a project completed immediately and don't care about the way it appears. But as soon as we begin heavily customising it, it gets much more difficult to use, especially on a wide scale. Because we only ever keep the classes we use, Tailwind is tiny and scales exceptionally well without bloating (thanks to Purge for removing everything unused). Additionally, it is simple to comprehend and operates in a modular manner, with styles only having an impact on the currently selected part. However, it doesn't come with any prebuilt components, so if we need to create quickly, we'll need to acquire some specially made resources or pay for Tailwind UI. The option that the majority of people will be at least somewhat familiar with is Pure CSS, which is also a completely acceptable choice. Of course, there won't be any pre-built components here too, and new team members will need to be trained on the precise methodology chosen for the project (there are several alternatives, such as CSS, SCSS, etc.).

What should I use?

Out of these, Tailwind is my favourite, while there are some situations in which I can imagine the others being useful. Because Tailwind is the most adaptable and complete strategy, it is also my preferred toolset. The fact that the tailwind team is incredibly responsive to suggestions, involved in the community, and consistently releasing excellent new features really helps. It is unlike any other strategy in terms of how quickly I can work with it, which is a compelling enough reason in and of itself to give it a shot.

Comments