Use Sophia to knock out your gen-ed requirements quickly and affordably. Learn more
×

Web Design

Author: Sophia

what's covered
In this lesson, you'll learn about web design and a few of the concepts surrounding it. Specifically, this lesson will cover:

Table of Contents

1. Defining Web Design

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

In order for a designer to begin designing for the web, he or she must have a working knowledge of HTML or CSS language.

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


2. HTML and CSS

HTML stands for Hyper Text Markup Language and is the dominant programming language for producing content on the web. CSS stands for Cascading Style Sheet and is a language that controls formatting of type, color, and spacing.

They're both languages for web design, but they are used for different purposes. HTML is what you would use to build structural layers, while CSS is what you would use for the presentation layers.

You can think of HTML as the structure of a house, and CSS as the decorations that make it look nice. Below are basic examples of HTML and CSS code.

HTML

In the HTML portion, you can see the first code or syntax for font size for a corresponding text. The text that reads "this is some text" is given a font size of 6 pixels.

Then, you have the background color of the main body, which is specified in hex code. This is a set of six characters made up of the numbers 0 through 1 or letters A through F, and the code corresponds to a color.

Lastly, there is an example of how to place text in a new paragraph. The text that reads "this is a paragraph" would be separated as its own paragraph using that code or syntax.

CSS

If you move onto CSS, you can see that it is used for stylizing the text. You can bold or italicize the text, or change the font in other ways. The background color here behaves similarly to that in HTML, but the code is written differently.

You can do all sorts of things with CSS in terms of formatting as well. In this example, the heading 1 of H1 is placed in the center. The syntax reads "H1 text align center," so the first heading is going to be aligned in the center of the page.

terms to know
HTML
Hyper Text Markup Language; the dominant programming language for producing content on the web.
CSS
Cascading Style Sheet; a language that controls the formatting of type, color, and spacing.


3. Web Design in Practice

The source code is what goes into making a website look the way it does.

Web Design

In the example above, you can see the HTML code at the bottom; everything is encapsulated in this box from top to bottom.

There's CSS in there as well, indicated by the style syntaxes. HTML and CSS are really good partners; they live together in the same source code. HTML provides CSS with a nice structure to work with and make visual appealing.

Style Syntaxes


4. Benefits of Web Design

Web design has a lot of benefits, such as its ability to allow interaction within its design. This is known as interactive design, and you will encounter this on many websites.

An example of this is when you move your mouse over elements and get mouse-over actions. Another way interactive design is achieved is through advertisements in web banners, which are typically rectangular in shape and can be either static or animated.

Even with increasing Internet bandwidth and speed, one of the virtues of great web design is having an optimized design. This means that the design is as efficient and effective as possible; it uses only the bandwidth that it needs in order to load quickly and run smoothly for the end user.

terms to know
Interactive Design
The practice of developing digital interactivity for end users.
Mouse-Over
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.

summary
In this lesson, you started by defining web design. Then, you explored the uses of HTML and CSS, and looked at web design in practice. Finally, you learned about some of the benefits of web design.

Keep up the learning and have a great day!

Source: THIS WORK IS ADAPTED FROM SOPHIA AUTHOR MARIO E. HERNANDEZ

Terms to Know
CSS

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

HTML

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.

Mouse-Over

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.