+
3 Tutorials that teach Web Design
Take your pick:
Web Design

Web Design

Rating:
Rating
(0)
Description:

In this lesson, you will learn about Web Design.

(more)
See More
Try a College Course Free

Sophia’s self-paced online courses are a great way to save time and money as you earn credits eligible for transfer to over 2,000 colleges and universities.*

Begin Free Trial
No credit card required

25 Sophia partners guarantee credit transfer.

221 Institutions have accepted or given pre-approval for credit transfer.

* The American Council on Education's College Credit Recommendation Service (ACE Credit®) has evaluated and recommended college credit for 20 of Sophia’s online courses. More than 2,000 colleges and universities consider ACE CREDIT recommendations in determining the applicability to their course and degree programs.

Tutorial

What's Covered

Welcome to today's lesson on web design. Today you'll learn about web design and a few of its concepts surrounding it. Specifically, this lesson will cover:

  1. Defining Web Design
  2. HTML & CSS
  3. Web Design in Practice
  4. Benefits of Web Design

1. Defining Web Design

Web design is the practice of website development or any design output meant for the worldwide web. In order for a designer to begin designing for web, he or she must have a working knowledge of HTML or CSS languages.

Terms to Know

    • Web Design
    • Web Design is the practice of website development or any design output meant for the world wide web.
    • HTML
    • HTML stands for Hyper Text Markup Language and is the dominant programming language for producing content on the web.
    • CSS
    • CSS stands for Cascading Style Sheet and is a language that controls formatting of type, color, and spacing.

2. HTML & 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 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. Below are basic examples of HTML and CSS code.

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. Then you have the background color of the main body and t's specified in what's called hex code. 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. Lastly, you 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.

If you 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. It's making it italic. You can bold it and do all sorts of crazy things with CSS, when it comes to font. Now for background color, it actually behaves practically the same way, but the syntax is different. The code is written differently than HTML. Then in the 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. 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.


3. Web Design In Practice

If you open up a browser and see a website, source code is what went into making it look that way.


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 also CSS in there as well, indicated by the style syntaxes. HTML and CSS are really good mates, so they lived together in the same source code. HTML provides it a nice structure for it to work with and make pretty.




4. Benefits of Web Design

So web design has a lot of great benefits as well, like its ability to have interactivity within its design or interactive design, which are apparent in a lot of the websites, like where if you mouse over elements, you get mouse-over actions. Another way to do this is through the ability to advertise with things like web banners, which are typically rectangular in shape, but can be either static or animated as well.

Terms to Know

    • Interactive Design
    • Interactive design is the practice of developing digital interactivity for end users.
    • Mouse-Over
    • Mouse-over is an action done by a computer user operating a mouse and using the arrow to hover over parts of a graphical user interface or GUI.
    • Web Banner
    • Web Banner is an advertisement on the internet. Typically in the shape of a rectangle, web banners can be static or animated to reach the viewers attention.

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.

Summary

Well, that wraps up this lesson. This lesson began with defining web design. Then it went on to explain the uses of HTML & CSS in web design. You got a chance to see web design in practice and ended with some of the benefits of web design.


Keep up the learning and have a great day!

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

TERMS TO KNOW
  • Web Design

    Web Design is the practice of website development or any design output meant for the world wide web.

  • HTML

    HTML stands for Hyper Text Markup Language and is the dominant programming language for producing content on the web.

  • CSS

    CSS stands for Cascading Style Sheet and is a language that controls formatting of type, color, and spacing.

  • Interactive Design

    Interactive design is the practice of developing digital interactivity for end users.

  • Mouse-Over

    Mouse-over is an action done by a computer user operating a mouse and using the arrow to hover over parts of a graphical user interface or GUI.

  • Web Banner

    Web Banner is an advertisement on the internet. Typically in the shape of a rectangle, web banners can be static or animated to reach the viewers attention.