HTML & CSS 101 for designers

Here’s a hot take for you. I think having a basic understanding of HTML and CSS is essential for anyone who does work on the internet. I’m a designer, and while I don’t believe that every designer needs to learn to write code from scratch to build their own websites, HTML and CSS are the basic materials that our designs are built with. So, we should understand how they work together to form webpages. In this video, I winna introduce you to HTML and CSS to help you get that basic understanding of how they work and perhaps get you started with, not exactly writing code yourself, but at least being able to read it.

So, by the end of the video, you are going to know exactly what this means. All right, let’s get into it. So, on a basic level, HTML is the code that puts the structure in place for a website, like the building blocks, and CSS is the code that tells the browser what those building blocks should look like. Here’s a look at some HTML. These things here are called HTML tags, and usually they will wrap content with an opening tag and a closing tag.

Some HTML is fairly self-explanatory, like the footer tag is used for the footer of your website, but others a little bit less so. The h1 stands for the top or like the first level of heading. Usually, that’s the largest or the most important one on a page. h2 is the next size down, et cetera. p stands for paragraph, so like a block of text.

And the div tag here is a very commonly used tag. It’s essentially a container for content.

When a design is built into a functioning website, we have to think about the underlying structure to figure out which HTML building blocks we need to put in place. This usually means thinking about your designs as a series of boxes. Every piece of content in the design will fit into a box somehow, even if the content is rounded.

And every box is created with a set of HTML tags. As you can see, often your content ends up being a box inside a box, inside a box, inside a, you get what I mean.

And that’s why it’s important to use both the opening and the closing tag, ’cause that’s what tells the browser where the box starts and ends. It can get really complex, and I know it can be a little bit difficult to wrap your head around. You can have a lot of different layers and things nested within one another.

But once you understand this idea that the web is built based on boxes inside of boxes, you’ll find it’s much easier to like, read the code to find the element you’re looking for and the piece of code that you wanna change. Now, by default, HTML stacks vertically with one thing after another, and it has some default, although, let’s face it, very ugly styling to it.

And we use CSS to further control the exact positioning of different elements and for making them look a whole lot better than the default styling.

So let’s take a look at some CSS. As you can see, CSS code looks a little different to HTML, and you might see it applied in three ways.

The main way that it’s usually used is in a separate style sheet that’s linked to from a webpage. It could also appear within a set of HTML style tags on the page itself. Or sometimes you find it written alongside the HTML, and that’s called inline styling.

The great thing about the first two options, though, and why they’re considered more like best practice is that they’re creating reusable classes that can be used to style multiple elements. So, if we wanted all three of these boxes to look like this one, for example, instead of writing out all of the styles needed to get it to look like this three times or doing any copy and pasting, we can attach the styles to a class in the style sheet, and then just add that class to each box.

And then if we winna make a change to how the boxes look, we just have to make that change in one place in the style sheet to the class, and it’ll automatically update across all the places that it’s used. You can add more than one CSS class to an element as well. In fact, you can add as many as you like, really. And you can even call them whatever you like.

If you use multiple classes, though, you’ve just got to watch out for any clashing styles.

Cause if you have two classes that are both trying to tell an element like what font size it should be, for example, the browser reads the style sheet top to bottom, and it’ll listen to the bottom one. There’s a hack to get around this. It’s something we try to avoid when possible, but it honestly does come in handy sometimes when you’re customizing code. And that is you can add an !important next to the style that you actually want to ensure the browser listens to.

We can get more specific with classes as well by nesting them. For example, if you want these boxes to be white if they’re on a pink background, but stay gray if they’re on a white background, the CSS could be written like this, saying that if a box is within something that is styled with pink background class, then it should be white. You can also target HTML tags directly. You don’t have to apply a class to them, which is really useful. For example, styling all of your h1s or all of your paragraphs to look the same.

Speaking of styles, they are always formatted like this, with the property first, colon, then the instructions for how you want to style it.

And if your CSS isn’t working, then often it’s because you forgot to put the semicolon in there, not that I am speaking from experience or anything. There are so many different CSS properties, and even the pros don’t know them all by heart, honestly. So don’t worry about learning them all. Many of them are pretty self-explanatory, but when in doubt, just Google it.

And I’ll leave a link in the description as well to a few different resources you can look at. Some of the most important like, fundamental CSS to understand, though, is margin and padding. So let me explain them quickly. If we want to, we can manually set the height and width of a box using CSS. And remember I’m using the term box here to just mean a container for the content.

It doesn’t have to actually look like a box. But if no height or width is specifically set, then the content you put inside a box is going to be the thing that defines the size of it.

And because we’re working with boxes inside of boxes, we can also use percentages to define the height or width. So in this case, the box is filling 100% of the width of the container it’s inside of. If you adjust the padding of an element, you are adding space around the edges inside the box.

And if you adjust the margin, you’re changing the spacing outside of the box. If you add a border, it’s gonna be a line around the content block itself. So here we can see the padding on the inside and the margin on the outside of the border. This is called the box model, because like I said earlier, websites are really just built from a bunch of boxes.

And once you understand that you can start to think of your design as a set of blocks fitting together and inside each other, and you’ll be able to better understand how your design can be built.

So, let’s go back now to that piece of code that I showed you at the beginning. Hopefully now you can read this and see that the HTML tags are creating containers for the content, the boxes, and that the CSS is styling each HTML tag to set the way it should look.

So if, for example, you wanted to add a border to these boxes here, now you know what code needs to be changed to edit that. Being able to read HTML and CSS like this really comes in handy when you’re doing a design review of a page a developer has built, when you’re checking how well what you see in the browser matches the layout you designed.

And I’ve got a video coming soon about how you can use the inspect element in a browser to do a design review and give feedback to a developer.

So make sure that you subscribe to my channel to see that, as well as other videos to help you along in your design career. Thanks for watching and coming along on this crash course with me. Hope you enjoyed it, and I’ll see you next time.

https://www.rapidprofitmachine.com/wendy-tiktok-course?id=cds1987bz59