How To Start Doing UI And Stay Alive
Shahar Gotshtat, Tue Oct 13 2020, 5 min
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!

My Journey

I have been discussing “UI” generally, but UI (user interface) is actually made up of 3 layers:
  1. Logic and state (React, Javascript, etc.).
  2. Layout (HTML, React, etc.).
  3. Style (CSS).
While each layer requires some know-how, for me the most terrifying part was definitely the style.
The first thing I ever coded as a developer was a small E2E tool for internal use. Luckily, visual appeal wasn’t that important to the company with respect to their internal tools. I used vanilla JavaScript and HTML, and added some inline styles.
UI Cat
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

  1. 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.
  2. If it’s your own project - Start small. Try to do something simple, and then make it better. If drawing is your thing - Start with half a watermelon, then do the Titanic later.
    While working on a small project, you can actually focus on your JavaScript, HTML and CSS, while on a big project you would also have to consider architecture, conventions, reusable components and more.
    While these things are extremely important for a frontend developer to know, they are not the best place to start. Using backend terminology, it’s as if you built an entire microservice just to learn loops.
  3. Most of the audience of this post will probably join an existing project, like I did. In that case, I’d recommend:
    1. 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.
    2. 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.
    3. 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.”
Cat Holding Computer

This is what you should take from this post:

  1. Don’t panic!
  2. Learn the basics.
  3. Keep it simple.
  4. Get a mentor.
  5. Understand the requirements.
  6. 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!
We’re Hiring!
Oribi is growing,
come join our amazing team :)
Check out our Careers Page