Getting Started in Web Design

Noble Desktop

Navigate: Right/Left Arrows (or Swipe Left/Right)
Zoom Out: Press Esc (or Pinch)

Websites Need

  • Design & graphics
  • Code to make the website function
“Learn to code; even if you don’t intend to code, knowing how to code will make you a better designer and a stronger candidate.”
Fast Company: 9 Top Designers On What Every New Grad Should Know

Front-End Coding

  • HTML: Marks up (tags or labels) content
  • CSS: Styles the content
  • JavaScript: Interactivity, animation, and logic

Not Just For Websites

HTML & CSS are used in emails, eBooks, & some apps
(apps would typically use JavaScript)

You Can Learn It!

It’s not just for computer geeks :)

Coding is easier than programming.
Start by focusing on the concepts.
Memorization of exact syntax comes with practice.

Web Technology Relationships

Design & Graphics

Figma, Adobe XD, or Sketch


Live Demo

Get a Code Editor

Visual Studio Code (free)


Live Demo

Standard HTML Code

Start a new webpage with the following code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Write Title Here</title>
    Put Content Here

Learn More

Web Design Classes

Certificate Programs

Front-End , Full-Stack , & Web Design
All Web Development Certificates

Noble Desktop Copyright Noble Desktop