Getting Started in Web Design

Noble Desktop

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

Websites Need

  • Design and 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.
Screenshots of Emails

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

Adobe Photoshop and Sketch are the most popular.
Adobe XD is an up-and-comer.

Graphics

Live Demo

Get A Code Editor

Sublime Text
Very Popular: Unlimited Free Trial, $80

Free: Atom & Visual Studio Code

Coding

Live Demo

Standard HTML Code

Start a new webpage with the following code:

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

Certificate Programs

Front-End Web Development
Full-Stack Web Development
Web Design
Web Design with WordPress & PHP

Intro Classes

Intro to HTML & CSS
Web Development Level 1