I made a website landing page in 2 minutes without any superpowers
Tags: webdev, frontend, websites, coding
Published: 2022-02-11 15:50:42

My younger cousin is 12 years old and he wants to be a web developer in the future. While I try to guide him in the right direction by convincing him to change his mind, he asks me a lot of questions. We were discussing how time taking and tiring Web Development is the other day, and I told him that one can even spend months on building a basic website that does very limited tasks. Then he looked up to me and said, “Only if we had SUPERPOWERS”. I chuckled and said, “I wish”. 
The other day I was reading an [article ](https://hackernoon.com/vs-code-extensions-with-a-possible-bright-2022)on the internet that predicted some VS Code extensions that can do well in 2022 and I stumbled upon an extension called [blox](https://marketplace.visualstudio.com/items?itemName=vsblox.blox).
So this VS Code extension had premade drop-in-ready Tailwind CSS Components from multiple UI Kits in it. So next time he was in town, I decided to flex my skills in front of him. I made a simple landing page following 7 simple steps in less than 2 minutes. I chose 7 components to make a basic landing page. These are the components I used. 

## Hero
I chose to go with an Ecommerce hero component for my landing page. After I dropped the code block, I watched it reflect on a live server. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1wz8ko422sqjg2y147n.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j0zv9n2hidv5rwksjd1.png)




## Featured
After that, I went on to choose a Feature component from the library.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw22oi6qgpvmi43shux0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3768e3sjcrhmp595zc5d.png)



## Product Category

Then I thought a Product Category after this would look appropriate, and the live server proved me right.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h045rcplhojjd6w95xbj.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2igzq3kaou32dooai7sn.png)




## Blog
I chose this component to tell the users about the latest trends and fashion designs.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/urhwnnk3mjbip0va52j5.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewo28b6ghidkqbfm03yg.png)




## Partners
After that, I went on with the Partners component.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/passe9qg0bzwtj0rr0qq.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fwk4bfyhfzly8muljrd.png)


## Highlight
I thought Highlight would look pretty good at this point.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4bu4rldjvr64yrbxj1b.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwi9kqqp9w6gdfa9314r.png)



## Footer
Lastly, as all landing pages end, I chose a Footer that complimented the theme well. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44mla02ofl47bfk91yv8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rco3ovvf3kq9n0dn706n.png)




As you can see, this is how my landing page turned out. I barely had to write any code, and I could successfully flex on my cousin (his mouth would just not close). He thinks I have superpowers but we all know the secret lol!