Learning HTML/CSS as a designer
As a designer, chances are high that at some point you’ve done research into whether designers should code. While there are pros (better relationships with your devs, being able to turn your vision into a reality) and cons (jack of all trades, master of none), I decided that a solid understanding of at least HTML and CSS could be beneficial for both for myself and my coworkers.
With all the resources available, it’s never been easier to learn code. Armed with step-by-step tutorials and an online course that caters to designers learning code, I learned the basics of tables, positioning, margins, padding, and the like. I felt like I had grasped the basics but I found myself at another obstacle.
My problem was that I had difficulty bridging the gap between a basic understanding of HTML/CSS and real execution of front-end code based on the designs I was creating in Figma or Sketch.
It became a real blocker for me because I wasn’t confident enough to take on the build of my own designs at work, but at the same time I didn’t feel like additional video tutorials would be helpful anymore.
For the past 6 months, I’ve worked through different ways of getting around this blocker. I’m now a much more confident front-end developer. Here are five bits of advice from my experience:
Choose a project
Many code courses will give you a fake page to work on, but choosing a project of your own to work on is the best way to use your new learnings. It’ll give you an opportunity to actually build something that’s relevant and will have more impact and meaning.
The project can be anything from your own portfolio page, a landing page for your side hustle, or in my case, a low-stakes landing page that would help out my coworkers at Stack Overflow. Here’s the finished product.
Unlike a guided course, the coding questions you run into on your chosen project will not always have a clear-cut answer, but that’s okay! The trial and error of working on a unique project will help build up confidence in your ability to problem solve real-world, code-related issues.
Think through the design first, then focus on the code
There’s a reason why many teams have different people working on UX, UI, branding, business, and development. It’s a lot to think about. Each aspect demands dedicated brain power, and context switching can quickly eat up your time and energy.
When working on my project, I found my mind flitting from coding, to design, and back to coding. I had a hard time figuring out why my button padding was off when I wasn’t even sure that the button was in the best place to begin with. While it’s tempting to jump in and start coding a page when you’re eager to get some coding practice, that’s typically not how code is written on a team. As a designer, it can also often be hard to ignore these parts of a product and “just practice coding”.
So take a step back and use those design chops! Sort out the usability and visual design of the page before you start coding. Then you’ll be able to get into the deep focus mode that’s helpful when you start troubleshooting problems in your code.
Find a mentor
Since starting work at Stack Overflow, I’ve been incredibly fortunate to have Ted Goas as my mentor to guide me through the process and expectations of designers at Stack when it comes to coding. Having a mentor who wasn’t my direct manager allowed me to ask questions in an informal channel.
Early on in our meetings, I let Ted know that improving my front-end skills was one of my main goals, which helped set the tone for many of our later meetings. I learned tips on how to navigate our design system, discovered a flexbox game, and received help with troubleshooting issues that I got stuck on.
If you’re able to seek out a mentor at your workplace, make sure you use the time with your mentor wisely. Remember that a mentor is not meant to handhold you through your coding. I spent the bulk of my time individually coding. A mentor is meant to be a pillar of support and can be immensely helpful in your career as they’ll be able to understand your goals holistically and offer advice accordingly. Are you looking to be a 50/50 split on UX design and front-end? Or are you looking for more of an 80/20 split? A mentor can help offer more directed advice based on your objectives.
Read more about Ted’s experience as a design mentor here!
Don’t get lazy about what you’re building
As I was planning out my landing page, I started bargaining with myself on the design. I’d pop in a complex layout, wonder if I could even write this in code, and then scale back to something simpler. As a result, I’d robbed myself the experience of trying to code out a legitimate design.
My advice: Don’t design differently just because you’re going to be the person who’s building it.
There’s no need to purposely over-complicate designs for the sake of practice (unless of course you have the time and you want to), but absolutely make sure you’re not over-simplifying designs to avoid having to code them.
Do a code teardown of an existing webpage
When you’re first getting started, realizing how much practice you have ahead of you can be intimidating. If you find yourself burning out, take a break from staring at your code to exploring some of the ways that front-end devs in the community are building. It can help to understand how even the most complicated of page elements can be broken down into blocks of code.
Make regular use of the inspect tool in your web browser. Explore popular pens on codepen. Stalk your coworkers’ pull requests on Github. By examining the code on sites with admirable designs, you’ll start to understand some of the creative ways that front-end devs build websites. It might also give you inspiration for some creative solutions to your own projects!
Following these tips have allowed me to feel more confident in my abilities as a designer. If you’re interested in rounding out your designer skill set by learning front-end, then I hope you’ll find these tips useful as well.
