From the time I began coding, and for quite a few years, one thing was consistently intimidating to me: UI. Making things look PRETTY. I was a LOGIC person, a BACKEND developer. I wanted to make things WORK, not look NICE. I felt that UI was beneath me, and at the same time it felt impossibly hard. I joked about how uninteresting it was, but I actually envied the people who did it.
This post is for developers who are afraid of UI, but want to overcome their fears. After reading about my personal journey and embracing my awesome tips, you will begin to master the mysterious superpowers of the CSS. Buckle up!
I have been discussing “UI” generally, but UI (user interface) is actually made up of 3 layers:
Layout (HTML, React, etc.).
While each layer requires some know-how, for me the most terrifying part was definitely the style.
Fast forward a couple of years, to when I got a great job opportunity at Oribi. I really wanted the job, but alas - Every developer at Oribi is a full-stack developer. And when I say “full-stack” I mean really full-stack. Sure, everyone has their strengths and preferences, but at Oribi the kind of work a developer does varies from the DevOps areas (like enhancing the CI/CD pipeline), to writing complicated logic in Java microservices, to writing state-of-the-art applications in React.
I took on the challenge, though, and before I started working at Oribi, I took a React course at Udemy, which was actually really good. In the course I also learned a tiny bit of CSS. For example, did you know that inline style is NOT the best way to write CSS and that you can actually put it in a separate file? I know, mind blowing.
So, how did I go from being that person afraid of UI, to being someone who actually writes client-facing UI features on a regular basis?
3 tips on how to stay alive while starting UI
Before you jump into the trial-and-error method (my favorite), learn the basics. CSS and HTML are so frustrating because there are a million ways to do everything, and a billion properties you can use. Before you start to lose yourself in this sea of options, read about the CSS box model, read about display and position, and then read about flexbox. I know this tip is no fun, but trust me, do it.
Most of the audience of this post will probably join an existing project, like I did. In that case, I’d recommend:
Getting a mentor! Find the nicest UI shark on the team, and ask them to be your mentor. I can’t stress the importance of this enough. When you want to throw yourself off a cliff, your mentor can magically solve your problems, or at least point you in the right direction. Or make you a hot beverage.
When you are given a UI task, it will probably come in the form of a nice-looking file made by a designer who used software like Figma. It will look clear at first - But it’s not. Your mentor might ask the designer questions like “should it only appear on hover?”, “do you want it sticky?”, “should it launch a rocket to Mars?” - This is the point when I would usually remember my fear and run away, but it’s actually a great learning opportunity. Use it. Next time, you will be the one asking the questions.
While your mentor is your best friend, don’t forget who raised you: Google. Try to google and figure it out yourself first. In order to do so efficiently - You should know the CSS methodology used in the project - Is it BEM? Atomic? SMACSS? OOCSS? Don’t be alarmed if these sound like gibberish, CSS methodologies are the way that frontend developers keep their code organized, reusable and scalable. Just figure out which one is being used, read a bit about it, and then use it when you Google “CSS <methodology> make me invisible.”
This is what you should take from this post:
Learn the basics.
Keep it simple.
Get a mentor.
Understand the requirements.
Know your CSS methodology.
I hoped you enjoyed reading this and that it made you feel brave and hopeful - Now go ahead and start making things pretty!