HTML And CSS For Designers
Part 1 — Overview
Introduction
Before I jump into this course, let me give a brief introduction to myself. My name is Dave, and I am first-and-foremost a graphic designer. I started out in traditional design doing mostly things like logos, business cards, magazine layouts, flyers and CD covers.
Around 2010, I hit a wall. I had a harder time finding freelance print work to do for people, and started getting asked to do web work, which was great, except for one thing — I had never built a website in my life. Frankly, I don’t know where people got the idea that I did. It wasn’t included in the list of services I offered. Even the CEO of the agency I interned for at the time had this weird idea that I built websites. I could only chalk it up to being nerdy-looking.
My initial reaction to being asked to build websites was (in my best Keanu Reeves from The Matrix voice) “no way!” My only experience with HTML and CSS up to that point was copy/pasting code into my MySpace page. But I took a step back and did some soul-searching. My clients were willing to pay me a lot of money to build their websites, and the agency I was interning for would have been more likely to hire me if I knew how to build them. The other designers didn’t know how to, so I could use it as a side door into a job.
So I grabbed an HTML/CSS For Dummies book, started designing hypothetical web page mockups in Photoshop and looking at a lot of source code for the websites that I liked. I also asked a lot of my coder friends for tips and insights. With some practice, I got okay at coding and managed to get some other gigs as a designer/coder. That decision has set the course for my career ever since. To this day, I am a designer who codes. I’ve designed and coded for various small-to-mid-sized agencies and large corporations including Chrysler. Right now, I work for an agency in Detroit as a Senior-Level Web Designer and Developer. I also do work for a lot of local companies in Michigan as a freelancer and consultant.
Learning to code has given me amazing opportunities to do great work on both sides of the spectrum, and it has helped me get into high-level creative roles that I would have had to work twice as hard to get into as simply a designer competing with other designers.
HTML/CSS Is Similar to InDesign
To this day, however, I still meet a lot of designers who look at HTML and CSS as being too difficult. I get that. It was a daunting thing for me too at first. I’m Xennial-aged and can remember when computers were these clunky, boring machines that only egg-headed weirdos were into back in the 80s and 90s. It was a time when you were either “a computer person” or not.
Yet, HTML and CSS were both easy for me to learn. It didn’t require any advanced education, online courses, or coding boot camps. In fact, they’re both ideal language for designers. They’re mostly written with plain English, and most every website has source code you can check out to see how everything works in real-time (I’ll explain what I mean by this in later installments).
The biggest reason that HTML and CSS are ideal for designers is that it works very similar to InDesign. Think of it this way: HTML is mainly used as your layout structure (grids, columns, ETC) and CSS is what you use to style everything.
- You use HTML to set up all of the areas that you put things in (text, images, ETC).
- You use CSS to write rules that make everything look the way that you want it to.
When you set up a document in InDesign, you don’t just start laying down text and randomly putting pictures in there, right? No. You need to set up your columns and rows. You need to make sure that there are boxes set up for your images. You need to create an area that is a header and one that is a footer. HTML is all of your structural elements. It is also how you create links to other pages, your headings, paragraphs and things like tables and forms.
CSS, like InDesign, is your character and paragraph styling panel. It is the language that sets up the font families and font sizes you want to use. It designates how much leading, kerning or tracking you would like. It adds color to both your type and your backgrounds. It even makes your columns and rows larger or smaller. It is the language that makes your HTML look pretty. Without it, every website would look like Craigslist. It’s extremely powerful, easy to use, and does so many things that go way beyond the scope of this blog, but you get the idea.
You Don’t Need to Know Everything About Both Languages to Master Them
Even though HTML and CSS are separate languages, you never use one without the other. Personally, this is where I think a lot of books and tutorials lose some designers. When you’re building out web pages, you’re always using both at the same time, sort of like InDesign where you are laying down text and images and styling them while you are doing so.
I also think that books and tutorials tend to over-teach HTML and CSS, which isn’t a bad thing necessarily. There is a wide array of things to learn about both languages, and all of it is good to learn. However, when I first learned it, websites were a lot more basic, and I only used a small set of HTML elements and CSS rules to build them. To this day, I still mostly use those same fundamental HTML elements and CSS rules and Google whatever I don’t know or have forgotten.
That’s the beauty of both languages. You don’t need to know that much. Just enough to do the basics and then, whatever extra things you need to know, you can look up. You don’t need to know everything about Photoshop, Illustrator and InDesign to use them, right? You would never probably never create anything if you had to. Coding is the same way.
What To Expect
Each new part of this blog is going to explore, what I have learned, are the most useful parts of HTML and CSS for designers looking to make the leap into coding. There will be some coding jargon, but not a lot. I’ll try to avoid using it whenever I can. Each week will include both the HTML and CSS you need to know to create a part of a web page. The first part of the series will focus on how to set up your files to create a basic website.
Basic HTML and CSS is Essential to Being a Web Designer
Kind of like how basic knowledge of printers and pre-press is essential to being a professional print designer, knowing basic HTML and CSS is key to being a successful web designer. Whether you are freelance or working for a company, you’re going to encounter times where not knowing it is going to limit you and ultimately leave you stuck if you don’t know a good coder that can come to your rescue.
It will also give you so much control over your designs. You will be able to build a web page in Photoshop or Sketch, and then be able to execute that design exactly the way that you imagine it. You will be able to troubleshoot a lot of common issues with WordPress themes, and make you never want to use Wix or Squarespace again. You will also be able to write precise style guides for developers of you happen to be working on a team.
I think that any designer who is willing to put in the time and effort can learn this stuff, and become successful at it. It’s not hard, and you’ll love doing it once you get the basics down cold. I hope that you get a lot out of this and look forward to writing the upcoming sections.
