Skip to content
DG In-Class

Introduction to Front End Development

Learning Outcome Guide

Section titled “Learning Outcome Guide”

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

  • Describe the role of a front-end developer within the software development lifecycle.
  • Identify key technologies and tools used in front-end development, including HTML, CSS, and JavaScript.
  • Explain the course structure, learning outcomes, and assessment methods.
  • Navigate and set up the development environment, including code editors and browser developer tools.

Coding Demo

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

To run the coding demo, you need to have accepted your Student Workbook and cloned it onto your computer.

  1. Open your Student Workbook in VS Code.

  2. Open the terminal window.

  3. 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-01 ./src/lesson-01

  4. View the code in the files index.html, main.js, and styles.css

  5. Open Windows Explorer.

  6. Double-click the index.html to open it in your browser.

    Notice how the URL in the browser’s address bar notes that this is a File as opposed to a standard URL.

  7. Open the dev tools. Notice the error in loading the JavaScript file.

  8. Make some code edits.

    css/styles.css
    h1 {
        color: rebeccapurple;
        text-decoration: underline;
    }
    js/main.js
    console.log('Lesson 01 starter loaded');
    alert('Hello World-Wide-Web');

  9. Discuss why the CSS was loaded, but the JavaScript was not.

    What would happen if we edited the index.html reference for the script file, changing it from a root-relative link format to a relative link?

  10. Convert this to a Web Project.

    Run the following from the terminal. Make sure you are in the root of lesson-01 folder.

    ./src/lesson-01 of your workbook
    pnpm init
    pnpm add -D vite
    code package.json

    Then, edit line 7 of the package.json to read as follows:

    package.json
        "dev": "vite"

  11. Run pnpm dev to run the web server. Press o and enter to open the page in the browser.

  12. Observe that the JavaScript now loads and runs.

To finish up, commit and push your code. In the terminal, run the following:

Commit and Push
git add .
git commit -m "My first code demo"
git push