Skip to content
DG In-Class

Foundations (HTML, CSS, JS, Build Tools)

Title: JavaScript from Beginner to Professional

Learning Outcome Guide

Section titled “Learning Outcome Guide”

At the end of this class, you should be able to…

  • Explain the roles of HTML, CSS, and JavaScript in front-end development.
  • Create a simple web page using HTML, CSS, and JavaScript.
  • Set up and use basic build tools such as npm, ESLint, and Git.
  • Apply version control practices using Git and GitHub.

About The Homework

Section titled “About The Homework”

It will be your responsibility to keep up with the homework. That means, you need to go through the Brightspace material.

To begin, I (Dan) will help get you started, so you can see how to best leverage your out-of-class learning.

Coding Demo

Section titled “Coding Demo”
✅ In-Class Demo Jan 2026 term

To run the coding demo, you need to have your Student Workbook open in Visual Studio Code.

  1. Open the terminal window and paste in the following.

    Run from the root of your repository
    pnpm dlx tiged --disable-cache --force DG-InClass/SDEV-1150-A04-Jan-2026/sk/lesson-02 ./src/lesson-02

  2. Walk through the steps in the ReadMe.md of the new lesson.

Walkthrough

Section titled “Walkthrough”

  1. I adjusted what the instructions said to do by naming the project folder demo and using pnpm instead of npm. Here’s what I ran in the terminal.

    Path: ~/src/lesson-02
    pnpm create vite demo --no-interactive --template vanilla

    A couple of words about the flags I used:

    • --no-interactive avoids me getting the Prompts
    • --template vanilla gives me a plain JavaScript project with no frameworks

  2. Here’s the result of what was created. Basically, the previous step scaffolded a new project.

    • Directorydemo Everything in this folder is the web project
      • Directorypublic
        • vite.svg
      • Directorysrc
        • counter.js
        • javascript.svg
        • main.js
        • style.css
      • .gitignore
      • index.html
      • package.json

Let’s examine various parts of the code.

index.html

Section titled “index.html”
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js

Section titled “main.js”
src/main.js
import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'


document.querySelector('#app').innerHTML = `
  <div>
    <a href="https://vite.dev" target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
    </a>
    <h1>Hello Vite!</h1>
    <div class="card">
      <button id="counter" type="button"></button>
    </div>
    <p class="read-the-docs">
      Click on the Vite logo to learn more
    </p>
  </div>
`


setupCounter(document.querySelector('#counter'))

counter.js

Section titled “counter.js”
src/counter.js
export function setupCounter(element) {
  let counter = 0
  const setCounter = (count) => {
    counter = count
    element.innerHTML = `count is ${counter}`
  }
  element.addEventListener('click', () => setCounter(counter + 1))
  setCounter(0)
}