DTC 477: Advanced Web Design & Development

Week 1: Introduction to Programming

Course Overview

Learning JavaScript

Computers are deterministic machines. They do exactly what they are told to do. Programming is the process of problem-solving with a computer, on its terms. Programming is not exactly a language but a way of thinking.

The Challenges of this Class:

Types of Projects with JavaScript

Student 477 Projects

Tools & resources

HTML Review and JavaScript Intro

Computational Thinking

computation in everyday life:

1-200 sum?

drawing three triangles: humans vs computers

Main Programming Concepts 

How do you play Tic Tac Toe? Explain to a five year old. Tic Tac Toe

How do you play Hangman? Explain to a five year old. What is the set up needed? What are the logic steps?

Dynamic Page Example:

Opening the Console to Check Errors:

JS Mentor

JS Mentor is a Custom GPT created for this class. Think of it like your personal JavaScript tutor — it helps you learn by guiding you through problems step by step.

Here’s how to get the most out of it:

  1. Describe Your Idea
    Start by explaining what you want to build or what you're trying to solve — even in plain English. JS Mentor will help you turn that into code.
  2. Break It Down
    JS Mentor will ask you to think through your idea logically: What should happen first? Then what? You’ll write these logic steps in your own words before jumping into code.
  3. Code One Step at a Time
    Once your logic is clear, JS Mentor will help you write one JavaScript statement at a time. You’ll write the code, and it’ll give hints, corrections, or next steps if you get stuck.
  4. Ask for Help
    If you’re stuck, say so! You can ask for a hint, a mini quiz, or even a code example if needed.
  5. Learn by Doing
    Don’t worry about mistakes — JS Mentor is here to help you learn by trying. The more you engage and experiment, the more confident you’ll get.

FTP Instructions

uploading files using an FTP (file transfer protocol) client

Steps to upload to remote server:
  1. In your free FTP client (Cyberduck or Filezilla) “Open Connection”
  2. Enter the following info: servername: dtc-wsuv.org username: first initial + last name +year started + @dtc-wsuv.org , all in lowercase, no spaces or symbols (so, “Sam Jones” who started DTC355 in 2025 would be “sjones25@dtc-wsuv.org”) password: random password sent to you by Greg - it should be saved for you, look in history - the clock icon.
  3. If successful, you should be in your personal server directory that has the same name as your username (without the @dtc-wsuv.org) . Now you can either drag the folder and files in that directory or use the “action” menu to “upload”
  4. Upload folders and files in all lowercase with no spaces
  5. Make sure that your default page for the project is “index.html”
  6. Check how everything looks on the live absolute URL. Example: http://dtc-wsuv.org/sjones25/project/
  7. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!