How to improve your HTML & CSS skills
In this article, I will talk about how as a developer you can improve your skill of coding a website/web-app design. like this 👇 (this is an example from tailwindcss.com)
As a beginner the best way to improve your design building skill is to start by replicating what’s already out there, let’s take a website you really like what you can do is find an element of that website for example the buttons, and try to code it, In this way, you will be exposed to all the challenges as well as the skill required to make a beautiful design.
some days ago I was feeling very less confident about my CSS skill so I was thinking about what can I do about it, but the thing is I was scared to watch those youtube videos in which they build clones of the famous website as those are always 3+ hours plus they have lots of overlapping content which I already proficient in I was in search for a more precise and small step.
The next day I was exploring tainwindcss website looking at all the demo components they have put there and I was thinking to myself wow these are beautiful then it struck me why don’t I try to re-create these because they are small, and in the end I will have the joy of building some beautiful design and it this process my CSS and design skill will also increase. then I quickly create a new Nextjs project and started coding 💻.
below are the components I made 👇
All this took me around 3 hours (and some little breaks in b/w ) to build and in the end felt very satisfied and confident about my CSS skills.
As you can see by building small components you can very effortlessly improve your CSS and HTML skills
And the way to start practicing is by finding small components to re-create is tailwindui.com and believe me you will enjoy this process a lot
It has 500+ small ultra-beautiful components you can easily try building. just in a week, you will have accumulated a huge amount of experience and your confidence will skyrocket.
And one last thing is that I would recommend you to start using Tailwind CSS if you are not yet using it before using tailwind I was very bad at design but within hours of using it I can see the difference and within 2 days I was implementing design into code with much less pain and much faster than before and you will find many such stories on the internet about tailwind.
This is my second article on medium I'm very new to writing so if u find anything wrong please inform me in the comment. Bye..🤞