Since I’ve been getting deeper into front end development, I thought I’d share a few things I’ve found to be helpful to create optimized code.
Front end developing feels like solving a jigsaw puzzle to me and there are so many moments of confusion when writing code. There are plenty of tools that can help with debugging and many online resources that provide practice to enhance designing skills with HTML and CSS.
Tip 1: Get Picky About CSS
However, getting in practice with trying to be specific with a design I’m implementing and getting correct CSS with multiple trial and error is great practice to develop better CSS skills.
There are templates that you can use online to simply refer to when creating CSS from scratch. A simple Google Search will provide many results.
Tip 2: Use Developer Tools
When getting stuck with an error with your design, a great way I would analyze and assess the better solution would be to use developer tools.
One that I felt like helped so much was the Chrome inspection tool. The inspection tool gave me a view of the HTML and CSS in an organized manner. Also, whenever you make changes to the HTML or CSS in the inspection tool, it shows the changes in real-time.
Another tool that I’ve been using, that’s been especially helpful when I was learning Redux, is the Redux dev tools. Similarly with the Chrome inspection tool, the Redux tool provides data information in an organized way and it allows you to test if your properties, user information, and backend database is working properly and in conjunction .
Tip 3: Get a Better Understanding of The Basics
I found that creating designs from scratch became so much better after reviewing and practicing the basics many times.
Tip 4: Use the Internet to Your Advantage
When creating code for the front end, one of the biggest points of it, is to make a website or application look appealing.
Think about it, if you went to a website and it looked terrible… would you continue to use it?
User interface is a huge reason why users would continue using a particular website or app. You don’t need to be the best, but learning a few techniques will be beneficial.
Great thing about the internet is that all the information we need can be found with a simple search over.
Articles, blog posts, and user-created content like online courses come in handy when trying to get better. Youtube has many tutorials that you can mimic for yourself, review, and refer to when studying the code. Many are around 30 minutes to 3 hours, but it’s great material to tru out for yourself.
And there you go, four simple tips on developing your front end skills.
As a new developer, the only way to continue getting better is to continue developing. Use tutorials, then review it, and slowly master it.