Lesson 01 · Start here
Prepare the editor, file-transfer tools, browser, and project habits used throughout Lessons 2–11. A dependable setup makes every project easier to build, test, and publish.
1 <!DOCTYPE html>
2 <html lang="en"
>
3 <head>
4 <title>My first project</title>
5 </head>
6 <body>
7 <h1>Ready to build.</h1>
8 </body>
9 </html>The toolkit
You do not need dozens of applications. Begin with a small, reliable toolkit and understand what each tool contributes.
Code editor
The main workspace for writing HTML, CSS, and JavaScript, navigating folders, searching files, and using the integrated terminal.
File transfer
A visual client for securely moving site files between the computer and a web server with SFTP.
Version control
Records meaningful versions of the work and stores a remote copy that can support review and deployment.
Testing
Inspects layout, styles, accessibility, responsive behavior, console messages, and network requests.
The working loop
Work from one clearly named project folder in VS Code.
Keep HTML, CSS, scripts, and images organized by purpose.
Test links, layouts, keyboard access, and browser messages.
Record the tested version, then deploy through GitHub or SFTP.
Environment setup
Make one parent folder for CIS235, then create a separate folder for each lesson and project.
Open the project folder—not an individual file—so Explorer, search, and relative paths work predictably.
lesson-01/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── script.js
└── images/In Cyberduck, prefer SFTP, verify the host and remote directory, and never place passwords inside project files.
Create index.html, connect the stylesheet, open it in a browser, and confirm there are no missing-file errors.
Create a private or public repository as appropriate, add a README, and make the first descriptive commit.
Ready for Lesson 2?
Check each item as you verify it. Your progress is saved in this browser.