Online College Courses for Credit

2 Tutorials that teach Web Design
Take your pick:
Web Design

Web Design

Author: mario fierro-hernandez

Differentiate between the various elements of web design.

See More

Video Transcription

Download PDF

Hi, everyone. My name is Mario. And I'd like to welcome you to today's lesson on web design.

So we'll learn about web design today and then a few of its concepts surrounding it. So feel free, as always, to pause, fast forward, and rewind this lesson at your own pace. And then, when you're ready to go, let's get started.

So let's begin by defining web design. And web design is the practice of website development or any design output meant for the worldwide web. And in order for a designer to begin designing for web, he or she must have a working knowledge of HTML or CSS languages. So let's check out what that stands for.

HTML stands for Hyper Text Markup Language and is the dominant programming language for producing content on the web. Now, CSS stands for Cascading Style Sheet and is a language that controls formatting of type, color, and spacing. So they're both languages for web design, but HTML is what you would use to build structural layers, and CSS is what you would use for the presentation layers. So think of it kind of like HTML being the structure or building of a house, and CSS is for decorating it and making it look cool and awesome.

So let's take a quick look of what these languages look like. So here's a basic example of HTML and CSS code. And in the HTML portion, you can see the first code or syntax for font size for a corresponding text. So the text that read "this is some text" is given a font size of 6 pixels.

And then we have the background color of the main body. And it's specified in what's called hex code. So there is a set of six characters which could be numbers 0 through 1 or letters A through F. And it corresponds to a color, the code corresponds to a color. So here, I think, it's a red color.

And then, lastly, we have an example of how to place text in a new paragraph. So the text that reads "this is a paragraph" would be in its own paragraph using that code or syntax.

So if we move onto CSS, remembering that, again, HTML is more like a building, and CSS is like the styling of it, for our font code or syntax, it stylizing the text. So it's making it italic. And you can bold it and do all sorts of crazy things with CSS, when it comes to font.

And now for background color, it actually behaves practically the same way, but the syntax is different. The code is written differently than HTML. And then in the end, the formatting, formatting you can do all sorts of things with CSS as well. So in this example, the heading 1 of H1 is placed in the center. So you can see the syntax reads H1 text align center, so the first heading is going to be aligned in the center of the page.

So why don't we actually take a look at what this looks like? If we open up a browser and see this website. And let's check out the source code.

And you can see the HTML code up top. And a bunch of code in there. And you can also see the HTML at the bottom. So everything is encapsulated in this kind of box from top to bottom.

And if we jumped to another page here and take a look at their code here, and you can see that there is HTML here as well. And there's also CSS as well, indicated by the style syntaxes there. And again, HTML and CSS are really good mates, so they lived together in the same source code.

And again, HTML provides it a nice structure for it to work with and make pretty. So you, again, can see some different styles and stuff going on here. And you don't have to know all of this. It's just a good to get a basic idea of what it is.

So web design has a lot of great benefits as well, like its ability to have interactivity within its design, which are apparent in a lot of the websites, like this one, where if you mouse over elements, you get mouseover actions, like when icons change colors, shapes, or size. And of course, the ability to advertise with things like web banners, which are typically rectangular in shape, but can be either static or animated as well.

Now, even with increasing internet bandwidth and speed, one of the virtues of great web design is having an optimized design, which is to say to have a design that is efficient and effective as possible, so that it uses only the bandwidth that it needs so that it loads fast and it works smoothly for the end user. So a lot of stuff to keep in mind. And designing a site visually is completely different than it is with languages.

Well, everyone, that wraps up this lesson. And with our key terms for today-- web design, HTML, CSS, interactive design, mouseover, and web banner. I hope you've enjoyed this quick tour of HTML and CSS, and web design. My name is Mario. And I will see you next lesson.

Terms to Know

Cascading Style Sheet; a language that controls the formatting of type, color, and spacing.


Hyper Text Markup Language; the dominant programming language for producing content on the web.

Interactive Design

The practice of developing digital interactivity for end users.


An action done by a computer user operating a mouse and using the arrow to hover over parts of a graphical user interface (GUI).

Web Banner

An advertisement on the Internet, typically in the shape of a rectangle; can be static or animated to attract the viewer's attention.

Web Design

The practice of website development, or any design output meant for the World Wide Web.