Become better at Frontend development by doing this ✨…
We all are stuck somewhere after learning HTML, CSS, and JavaScript and we want to become better but we don’t know what to do next, so we move to frameworks like React.js, Angular, etc. without practicing the basics of frontend development.
You may have heard many times that if you need to get better at something you need to practice it, but the question is how to practice front-end?
My answer would be to start with making UI elements (cards, buttons, headers, etc.) after that move to making full web pages and also give time and read code like how certain things are done (I will walk you all through the websites that will help you a lot.🔥)
By regularly doing these things, I am sure you will get more confident with your front-end skills.
1. Start with Small UI components 🌟
The first thing that I would recommend is that you start making UI components visit frontendmentor and start doing challenges like this one.
Try to make the UI pixel perfect, then upload the files to the site to check how accurate the UI is to the original, also you can see how others have approached the same problem in the solutions tab.
After you do some practice with the components you can move to the 2nd step
Remember that great things take time to be patient and if you are stuck try relaxing and revisit the problem after some time.
2. Increase the difficulty 🚀
You have tried newbie challenges now let’s kick it up a notch and move to making single-page websites or a page that is made up of more than one component, something like this
And landing pages like this one.
Try to practice and solve challenges as many as you can, keep doing this and you will become more comfortable with making any UI.
Till now we have focused just on HTML + CSS, now let’s add JavaScript into the mix…
If you have the basics of JS, how to use it with HTML, DOM Manipulation etc. stuff cleared then move to step3, if not it’s better to learn it now.
3. Using JavaScript
Now that we have reached this stage, let’s start by adding interactivity to the web page, some examples would be using REST API or making a simple game like tic-tac-toe.
Some examples would be
OR something like…
4. The ABOVE and BEYOND
Now let’s move to the site I like the most to learn and increase my frontend skills, it’s codepen. Codepen has pens (another word for a project). I would recommend you to go to trending pens and see which projects you are interested in building.
Try reading the code on how the pen owner did the UI, this will help a lot with learning how to make better, responsive UI, effects, animations, improve visuals, etc. Some examples would be like
Or make something insane like this…
Remember and do this on repeat -Read the code, learn the code, write the code .
Congratulations! 👏 you have covered the most important things, just remember to relax and reflect on what you have achieved till now and go ahead with the more advanced stuff and become even better.
5. BONUS: CSS battles
A bonus site that I would also recommend is CSSBattles. It’s more like a competition here but the basics are the same, you have given a picture and you need to make it in CSS side by side and also compare how accurate it is. It will also help in figuring out how to make pixel-accurate UI.
It looks like this:
Keep up the grind and win some CSS Battles.
So you have reached the end of this blog, I would like to thank you for reading it till the end. Also, I would appreciate it if you could share your views and comment on them below.
See you all until the next article…
Need help with anything ? Book a call now 👇🏻
