For some reason, many backend developers I know are backend developers because they just don't want to be front-end developers. In this article, I'll share with you my top tips in front-end development that will make you love it.
1. Don't. Ever. Start. Without. A design.
It's easy to forget that design is a separate phase from development. But no. When you start coding, your focus should be 100% on code decisions, not design decisions. Doing both at the same time might not seem to be a big deal in the beginning, but within a short time, your brain will burn out and leave it altogether. If you're working as a front-end dev, you'll be provided a design made by the design team. However, if you're working on a personal project or a freelancer, there are a lot of cool and super easy-to-use tools such as Adobe XD, Figma and Origami Studio.
2. Learn CSS Layouts And Positioning.
No, despite the common thought, CSS behavior is not a moody, out-of-pure-luck output (actually nothing in coding is). You might be surprised by how expectable and straightforward CSS behavior is if you dedicate some time to understand how CSS layout and positioning work. The secret is always in choosing the proper "display" and "position" properties.
3. Take Some Time to Think of the Layout as a Whole.
Most people fall into the trap of treating each element on the page individually. But unfortunately, this is not how it works. Always begin with a plan, whether on paper or in mind, for the layout of the page starting from big to small.
Keep UI Libraries aside until you grasp CSS
This might be a personal opinion, but UI libraries are mainly used to make frontend development faster, which is not your top priority as a beginner compared with readability, the thing these libraries sacrifice for the sake of speed. Also, these libraries use some CSS concepts differently from their real purpose, which may confuse you as a beginner. It's like teaching a beginner driver how to drift. So, keep it simple, and once you're ready and confident in your CSS skills, you can choose the UI library that will help you achieve what you want. Adding to that, getting used to UI libraries directly as a beginner might deprive you of digging deeper and finding interesting stuff in CSS, and once you encounter a scenario where you need to implement pure CSS you might find yourself lost and confused. This is my personal opinion anyway.
Learn how to write clean code
This is a general piece of advice, but ugly, badly written code will always exhaust you at a certain point and make you feel coding is difficult and boring. So make your code readable and well written to thank yourself every time you open the IDE. Keep your components small, use clear class names, avoid inline styling and you're ready to go.. Good luck my friend!