Module 1: Getting Started

This first module is intentionally short. The visual part of SecureGen is already done, so there is no reason to spend the course rebuilding cards, gradients, buttons, or responsive layouts.

You will download the starter, open it in your editor, run it in the browser, and inspect the JavaScript file you will work in throughout the course. By the end of the module, you should understand the starting point and be able to tell which controls already exist in the page.

What to expect

• A complete SecureGen interface from the first launch.
• A small app.js containing DOM references and the character-set data.
• Controls that are visible but not yet connected to the completed application behavior.
• A clean baseline you can return to if a later change introduces a bug.

How to work through the course

Keep the browser open beside your editor. After each lesson, interact with the exact feature you just changed. If something does not work, stop at that checkpoint rather than carrying the problem into the next lesson.

There is deliberately very little coding here. The goal is to make the rest of the build predictable: you know where code goes, what the UI expects, and how you will test each change.