Why You Should Learn Basic Code as a Website Designer

I know what you’re thinking... Jenn, I thought you teach all about no or low code page builders! HTML and CSS are like a foreign language and scary.

And I am all about using low code platforms like Webflow (my favorite) and Squarespace or even page builders that work with WordPress like Elementor. But I also believe having a good basic understanding of what code is actually involved in building a website (we’re talking like kindergarten level here) is super helpful. Even if you’re not writing any yourself.

Before we jump into why I think it’s important, I want to share the best analogy I’ve heard to explain the basics of HTML and CSS.

HTML is like a plain, naked person. CSS is like their clothing and style. Your clothes do no good without a person to put them on. CSS needs HTML to be applied to. HTML, a naked person, can get along just fine by itself... but CSS will help it thrive and make it look so much better. 😂

Now let’s dive into how some basic knowledge on the subject can help.

It helps you see how things fit together.

HTML is what is going on behind the scenes of your page builder. It’s the foundation you’re not necessarily seeing. It's totally necessary and it's what tools like page builders are still doing, just letting you only see the visual result of it, not the code result.

HTML is how Google is going to read your website.

Things like H1, H2, body copy, alt text, all this stuff is inside the HTML code of a website. And if you're just willy nilly throwing stuff up there and making it an H1 because it looks good, you're missing out and possibly hurting yourself or clients by doing this. Understanding a tiny bit of HTML structure will help you grasp how important it is to use these things accurately.

It helps you realize how great no code or low code solutions are.

When you start learning how complicated CSS can get, and maybe getting overwhelmed, you’re going to be that much more thankful for that amazing, time-saving page builder you’re using.

It helps you understand your limits when a project needs some HTML or CSS work.

A little bit of HTML and CSS knowledge can go pretty far thanks to Google. But you need to know what to google! If you know a little you can troubleshoot (aka Google) what you're needing to find out.

If you've never looked at a line of code before you're not even going to know HOW to search for the answers you need. If you’re familiar with CSS and HTML, you'll be more willing to say yes and figure it out.

Hopefully, you can see the importance of learning and forming a basic foundation of HTML and CSS.

Here are some of my favorite resources to get you started.

  1. W3Schools Online Web Tutorials It seems like no matter what I research as a fix for something CSS or HTML related this is the resource that comes up first. I love this one so much because you can play with what they show you and run your own test before using it in your actual site.
  2. LinkedIn Learning (formerly lynda.com) They have so many great courses and tutorials. Check with your local library because you can often access it through them for free!
  3. Google Chrome developer tools. Inspect and View Page Source. Just simply looking at the CSS and HTML of a website will help you notice patterns. And as you find things that you want to replicate it can be a chance to study what someone else has done.

Remember, we’re talking about a kindergarten level of knowledge here. So don’t get scared or stuck. A little bit of learning can go a long way and set you and your clients up for success.

Here's my very favorite resource for aspiring web designers, my course Design + Grow with Webflow that teaches you everything you need to know about web design from strategy to launch!

You've been looking for the "right way" to design a website.

Lacking some confidence in your design skills? Wanting to start designing websites for clients but not sure where to start?
What if you knew every step (in the right order) to go from idea to development... and clients actually love their final website?

Download the Free Guide