Appearance
Course overview
Learn to build and debug small browser applications. Start with HTML and CSS, then use JavaScript to respond to input, update a page, and exchange data with a service through an API.
Lesson 1 is available now. The full course is planned for 12 days, with 3 hours of guided learning and 3 hours of independent practice each day: 72 hours of learning in total. Materials for Lessons 2–12 are not available yet; their topics and projects are described in the course plan.
Is this course for you?
Start here if you are new to web development or want to strengthen your browser and JavaScript foundations. You should be comfortable managing files, installing software, and using a text editor. You do not need previous experience building a web application.
You will use HTML for structure, CSS for presentation, and JavaScript for behavior. Lesson 1 introduces HTML, CSS, and browser tools; the later planned lessons focus on JavaScript.
What you will build
| Stage | What you will work on | Availability |
|---|---|---|
| Lesson 1 | A guided Travel Desk page and your own static Travel Request page | Start now |
| Lessons 2–5 | Calculations, reusable functions, and ways to organize and search travel data | Planned |
| Lessons 6–8 | A travel application that responds to input, uses separate code files, and handles results that arrive later | Planned |
| Lessons 9–11 | Loading and changing data through an API, handling errors, and testing your code | Planned |
| Lesson 12 | An independent Support Request Tracker built from a written brief | Planned |
The 12-day course plan explains the learning goals, practice tasks, and progress checks for each stage.
Before your first lesson
Have these tools ready on your computer:
- Visual Studio Code to edit project files and open a terminal for commands.
- Node.js with npm to run development tools. Use the version provided for your class or one supported by Vite.
- Chrome or Edge to view your page and inspect it with the browser's developer tools, called DevTools.
- A folder for your course projects and an internet connection to install the initial dependencies.
The guided setup walks you through checking the tools and creating your first project. If a command fails, use the troubleshooting reference or ask your teacher for help.
You will create your own exercise project. You do not need to download or run this course website to follow the lesson.
How to use the lessons
The materials use three pages:
| Page | How to use it |
|---|---|
| Guided lesson | Check the goals and tools, follow your teacher's demonstration, and make each change in your own project |
| Independent practice | Apply what you learned to a new brief, then check the result against the requirements |
| Companion reference | Look up syntax, concepts, and troubleshooting steps when you need them |
Follow Guided lesson → Independent practice. Pause at the checkpoints to compare your result and ask questions. Keep the companion open as a reference; you can go straight to the section you need.
Use the sidebar to switch between pages and On this page to find a section within a long lesson. On a small screen, open Menu for navigation. Use search to find a concept or error message across the available material.
Checking your work
Each practice brief explains what the page should do, how to check it, and what to submit. Test the required behavior as you build. Be ready to explain a change you made and show how you checked it in DevTools.
For Lesson 1, you will submit your project, screenshots at two screen sizes, and a README with your observations and a short reflection. The practice brief lists everything to include.
If a check fails, note what you expected, what happened, and what you have tried. Use those observations when asking your teacher for help.