Basics of Coding – HTML/CSS

HTML – HyperText Markup Language

CSS – Cascading Style Sheets

My favorite way to explain it is the HTML is the structure of the house, while CSS is the paint. These are two different file types that work together to make a webpage.

Here is a graphic I made explaining how each are broken down: 

HTML/CSS are most commonly known to build websites – but they can do so much more, like build an email or the UI for an app.

Why learn to code

As a UX Designer, learning to code is extremely useful. By understanding how to code you can have a better idea of what can and cannot be done, you can identify and suggest fixes to issues, and it helps you learn to think more logically about projects. If you know the raw materials of how something will be built you can better design for that process. 

It is like riding a bike, once you learn how it is hard to forget.

I learned to code in 7th grade but didn’t pick it back up until my junior year of college. Even after all those years when I got into a role where I needed to understand how HTML worked to make changes I was able to pick it back up quickly. 

How I have used HTML/CSS in my career:

Nintex - During my marketing automation internship with Nintex, I used Marketo to build and design the email newsletter I sent out weekly. Sometimes there was something that needed to be changed in the email that wasn’t working so I would need to switch over into the HTML of the email to make the changes. These were changes such as the link or tagging for to a button.

Boeing - Over the summer when I started working as a Customer Experience Designer for Boeing one of my projects was to rebuild the Customer Experience Center website. Once I finished the first steps of my project (user interviews, card sorting, information architecture, wireframes, etc.) I needed to actually build the website. Now we could have paid someone from IT to build it, but since Boeing gives a wireframe for their internal websites all I needed to do was go in and adjust it to fit my design. Luckily since I know HTML/CSS I was able to go in and build the website myself, saving my team money and saving IT’s time.

I’m by no means an expert at HTML or CSS, but my knowledge of it has helped me in many ways so far in my career. 

Learning to build a website

Codeacademy

If you are interested in learning to code a great resource is Codeacademy. In only 4 hours you will learn the basics of HTML, then you can go on to learn CSS and Javascript. The possibilities are endless. You can boost your resume over a weekend.

But wait! You can go even further than HTML/CSS and learn how to build websites from scratch, build web applications, build web APIs, learn python, machine learning, et al. 

Squarespace

If you’re someone who wants to build a website, but doesn’t want to get into the code, Squarespaceis something you can use. It is a web design and hosting company. Squarespace is great because it has an easy to use visual designer and premade themes (HTML/CSS frames) for you. 

Squarespace is a great program to use if you want to build a blog, portfolio, or another website.

My Portfolio – Semplice & WordPress

I’m currently in the process of building my portfolio. I’ve spent the last few weeks talking to other designers and recruiters about how to build my portfolio and what to include. I decided on this program called Semplice, it is a visual design tool that works with WordPress to help you design your website. I picked it because it allows me more freedom than Squarespace to create my own theme and site, without having to completely code the website myself. 


At the end of the day, unless you are a programmer, you don’t need to be an expert to be able to use HTML and CSS. Just having a familiarity with it will serve you well and make you a more valuable employee.