Is Learning to Code a Waste of Time for UX Professionals?

…unless you want to have a better relationship with developers, and have a better understanding of how the web works.

As a UX Professional, Why Should You Care About Coding?

Being able to understand the people you’re working with is so important. As a UX Professional, it is very possible that you will work with developers at some point. You may work with them directly or indirectly. You might also work with SEO or content specialists who understand basic coding because it helps them do their jobs better. Learning basic coding skills might not be the only way to improve your understanding of these types of collaborators, but it’s definitely a great way to start.

The Foundation of the Web

Because this post is intended for people who might be new to UX and/or coding, I’m going to use some simplified language. There can be a lot of complexity to HTML & CSS, but digging deep into those complexities is beyond the scope of this article. Please keep that in mind if you have advanced knowledge of this topic.

HTML/CSS are the two most common languages on the web. Every web page is eventually translated into these languages so that a web browser can display the page to a viewer. In general terms, HTML is used to write the code that tells a web browser what the structure of the web page is supposed to be, as well as what content is supposed to be shown to a viewer. The purpose of CSS on the other hand, is to tell a web browser how that content is supposed to look – layout and position, colors, and some aspects of interaction.

Definitions:

HTML: Hypertext Markup Language – Hypertext refers to the ability to create links from one place to another, markup language means it is a type of language that has a specific and standardized structure and definition for how it is supposed to be written and interpreted.

CSS: Cascading Style Sheets – Cascading refers to the ability to write styles that can be inherited by elements that are inside of other elements. Style sheets refers to the preferred way of writing styles for websites – by creating a document that an HTML document can refer to in order to know how it is supposed to be styled.

Top 5 Reasons UX Professionals should learn HTML/CSS

Here are some great reasons why, as a UX Professional, you might consider learning HTML/CSS. There are plenty more reasons, but these are some of the top reasons I came up with. As with most things in UX, the reasons you might want to learn HTML/CSS will depend on your situation, and you might come up with some great reasons of your own.

“If the Internet teaches us anything, it is that great value comes from
leaving core resources in a commons, where they’re free for people to
build upon as they see fit.”

— Lawrence Lessig

Reason 1 – You will learn a basic vocabulary about the web.

When you learn HTML & CSS, you will learn a core vocabulary about the web. You will learn about what is supposed to go where on a web page in order for it to be best understood by a browser. You will learn about the important things we put in HTML to help with accessibility, such as ALT tags (these help describe an image for devices or displays that can’t show or view the image). You will learn about the parts of the code that tell a search engine what the page is about, and you will learn about how styling is accomplished in code. All of these topics help you build a base vocabulary that will help you understand the conversations around you as you navigate your UX career.

Reason 2 – You will learn about the underlying structure of web pages

Beyond learning a base vocabulary, you will also learn about the actual structure of web pages. If you happen to be a designer, thes means you will have a better understanding of what it means to create specific parts of a design. Why would you put this element in one location on a design and another element in another location? This means that your designs can be more intentional. On the other hand, if you happen to be a researcher, you will have a better understanding of what you are studying. As you are writing a test plan, for instance, you will have a better understanding of what to do with your insights when you are done with your analysis – your ability to communicate with design and development teams about what you found, and what it means will be just that much more informed, and you’ll be able to communicate about a specific part of the experience with an informed voice.

Reason 3 – You will have a better understanding of what is possible

Something I’ve seen many times over my career is frustration on the part of a development team when they are handed a design that is either extremely difficult to implement or even worse – impossible. Designs that don’t take into consideration the realities of what is possible on the web can make these relationships very difficult. To be honest, in today’s web, there is so much that is possible that you really could theoretically ask for almost anything you could dream up. However, there is a difference between possibility and feasibility, or even practicality for that matter. Your partners want to help you, but they have constraints, too. Maybe you did some research, and heard from users that they would love a VR website for your website that sells bulk paper napkins. Ok, great, but is that actually practical, and will it sell more bulk paper napkins? The point is that whether or not that was the insight you uncovered, most of the time we are constrained by many factors that make those types of concepts unfeasible. This is an extreme example, and I’m sure there is someone who could rationalize that work, but I have to believe you get the point.

Reason 4 – Asking better questions as a collaborator

One of the topics I care a lot about, and something that actually led me to begin the work of building this platform is working with collaborators. It’s so important to understand the people we work with, and when you do you can ask better questions. Better questions get better outcomes. As a UX Professional, if you take the time to learn the fundamentals of HTML & CSS, then when you sit with development teams, you will be able to ask better questions. You will also be able to screen bad answers. I’m a sincere believer that people are inherently good, but we also tend to favor things that bring us the least pain. That means that sometimes you might work with a collaborator who will ask you for a solution that you can provide instead of one they can provide. An example of this is a development team asking for a resized image to fix a display problem on a website, when in fact there is an underlying issue in the code that is causing the image display issue. Your understanding of HTML & CSS could give you, at a minimum, the ability to ask a better question, because you have just enough knowledge to do so.

Reason 5 – Self-improvement

Growing your brain and challenging yourself with unknown things is good for you. Not only that, but having this extra knowledge is something you can add to your skills on a resume or even on the job to say, “Hey! I know this thing now.” You might even find that you enjoy coding, and maybe that leads you deeper down the rabbit hole of coding. There is a lot to find down that rabbit hole about how programs work – who knows what will excite you!?

“Always dream and shoot higher than you know you can do. Do not
bother just to be better than your contemporaries or predecessors.
Try to be better than yourself.”

― William Faulkner

Top 5 Things A New Coder Should Know When Starting to Learn HTML/CSS

This article is not intended to be a primer on HTML/CSS, and you shouldn’t expect to walk away from this article knowing how to code. However, there are some basic concepts you should expect to pursue as you dig into HTML & CSS and start your learning journey. Here are 5 things you should expect to learn. There is A LOT more to these languages than these 5 things, but these are some topics you should be familiar with even after an introductory course.

Number 1 – The basic syntax and structure of HTML

The first thing you will learn in HTML is the concept of a tag. A tag is the smallest building block of HTML and it looks like this: <tag>something</tag>. Tags have a special way of being written – they are always started with a left angle bracket “<” and end with a right angle bracket “>”. The text inside tells the browser what type of tag it is, for instance this is a paragraph tag: “<p>”. Tags also have a concept of being “opened” and “closed.” A good rule of thumb to remember is, “what you open, you must close.” We’ll talk more about this later. The way you write a “closing” HTML tag is with a forward slash “/”. So, a closing tag looks like this: “</tag>”. Notice the forward slash just after the left angle bracket. So, a completed tag that is opened, has something inside and is closed would look like this: “<tag>something</tag>”. Using our example of a paragraph tag, it would look like this: “<p>Hello</p>”.

The second most important thing you will learn about HTML is that tags can have other tags inside of them. This is called “nesting.” A very common tag that has nesting built in is the list tag, used to write either bulleted or numbered lists. Here is an example of a list written in HTML:

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

That code creates a numbered list (also called an “ordered” list in HTML) with two numbered items in it. It looks like this when the browser displays it:

List item 1
List item 2

The nesting part comes in the form of the two list items being written inside of the “<ol>” or “ordered list” tags. Those tags contain the two list items, so the list items are said to be “nested” inside of them. This is an extremely simple example, and there is much more to nesting, but this should give you a basic understanding of the term.

Number 2 – The core concepts of CSS

In CSS there is a very specific way of saying how you want something to look. We do this by using something called a “selector.” A selector is something that allows you to name something so that the browser knows what to apply a style to. Selectors also have specific properties and values. A property might be something like “color”, and the value for that property might be “red.” So, let’s say you wanted to turn those two list items from the earlier example red, here is one way you might make that happen:

<ol class=”list”>
  <li>List item 1</li>
  <li>List item 2</li>
</ol>

In the HTML code above, I have added something called a “class.” This class is a way for the browser to find that part of the HTML, so it knows what needs the style applied. Here is the CSS code to make the list items red:

.list {
  color: red;
}

In this example I have written some CSS that says, “The test that has the class ‘list’ applied should be red.” When you learn more about CSS, you will learn about the difference between things like classes and IDs, and how selectors work. You’ll also learn where to place CSS, either in a page or in a separate document to make the desired style have an effect on the specified HTML element. The other really important thing about CSS is the concept of cascading styles. Simply stated, cascading is how styles can be applied to things inside of other things, and the way that this is done. An easy way to think of cascading is with a small bucket inside of a larger bucket. Let’s say you have a large bucket, and you submerge it in a tub of red paint. Inside that large bucket is a smaller bucket. When you submerge the large bucket in the red paint, some of the paint flows over the top edge of the large bucket and also paints the smaller bucket red. This is a greatly oversimplified way of explaining this concept, but essentially, the red color has cascaded onto whatever was inside of the larger object – it “cascaded.” I would recommend you follow through with a course on HTML and CSS to truly learn about these and other concepts in HTML & CSS.

Number 3 – The box model and layout

Another concept you will run into is the concept of the box model. Elements in HTML typically have an invisible “box” around them. That’s what allows you to do things like place elements in a certain order or location on a page. It’s also what allows you to specify how much space you want around the element. These concepts are known as margins, padding, and positioning. Margins and padding are specified clockwise as “top”, “right”, “bottom”, and “left”, in that order, and positioning is expressed in many, many ways, but in simplified terms, the position of en element will either be absolute, meaning it goes precisely where you tell it to go, or it will be positioned relative to another element. This means that the position of that element will take into account other elements when it gets displayed. Once again, this is a very simplified description of these concepts, but they are important, and you will definitely learn them when you learn HTML & CSS.

Number 4 – Responsive design and media queries

A topic that is very important in today’s world of multiple screen sizes is the concept of responsive design. Responsive design is the way we tell a page to behave when it is displayed on different sized screens. For instance, we may want a web page to display differently on a phone, tablet, or laptop screen. The way we do that in CSS is through something called a “media query.” A query is basically a question, and in this case, the question is being asked by the web browser. The question is, “I need to display this web page on a laptop screen at full size, how should I display the things on the web page?” The CSS file will answer with some definitions that say, “If the full size display is [x size] show these elements in this way.” The media is the website, and the query is the question being asked about how to display it.

Number 5 – Introduction to debugging and troubleshooting

Far from the last thing you will learn in HTML & CSS, but something that is very important is how to look at your code to find out why it is not working. This is very common. Every person who learns how to write any code at all will make a mistake. When they do, they have to figure out why the code isn’t working as expected. This activity is called debugging. Errors in your code are called “bugs”, and removing them is called “de” bugging. Troubleshooting your code can be exhausting, depending on how complex the code is, but finding the source of the error and fixing it is as rewarding as it is tiring – it’s definitely a welcome reward for the grit you will develop by sticking to it until you find out what’s wrong. The good news is that a lot of code editors today help you prevent writing poorly-formed code, but they can’t prevent everything.

“Obstacles don’t have to stop you. If you run into a wall, don’t turn around and give up. Figure out how to climb it, go through it, or work around it.”

― Michael Jordan

Where to Go From Here

There’s a lot to discover in the world of coding, and starting out with HTML & CSS is a great way to dip your toe into the water. If you want to discover more about HTML & CSS and learn how to start writing your own code, here are some resources for you – they are presented in no specific or preferred order. I have reviewed these courses, and they are pretty decent. I learned HTML & CSS from books, and some people learn better from an actual instructor in a class – your mileage may vary. The important thing is to give it a shot and hopefully to improve your skills and ability to work with your collaborators.

Resources to learn HTML & CSS:

Conclusion

I hope you have enjoyed this journey into the beginning of HTML & CSS, and I hope you have a better understanding of why you might want to add these skills to your tool-kit. If you do decide to embark on a journey of learning with HTML & CSS, I wish you well, and I hope you create something really great. Feel free to connect with me on any of my social platforms, and let me know how you are doing with your coding journey.