---
title: "FE101 · Build your first website"
publisher: Maestro College (Maestro Open)
lessons: 36
source: https://open.maestrocollege.edu/build-your-first-website
full: https://open.maestrocollege.edu/build-your-first-website/llms-full.txt
---

# Build your first website (FE101)

Move from Python to modern JavaScript and TypeScript: data, logic and asynchronous code for interactive web pages.

## Course objectives
- JavaScript’s role in modern development
- Core JavaScript syntax and data types
- Objects, arrays, and functions
- Asynchronous code with promises and async/await
- Adding static typing with TypeScript

## Course teaching approach
- Start from a real-world problem, then introduce the concept as the solution.
- Keep it true beginner level, hands-on, a little gamified. The learner should feel they are winning.
- Balance explanation, demonstration and practice. No copy-paste exercises: give small story-based tasks.
- End with one fun closed question about the topic.

## Lessons
### Unit 1: From Python to JavaScript
#### 1. Why JavaScript?
- Explain why JavaScript is the “Language of the Web” and its rising popularity, making it the second most common language after Python
- Identify the two main environments for JavaScript (browser and server)
- Understand what “modern JavaScript” generally means today

Teaching notes: Don't show a video in the lesson opening, show it a bit later. Mention they can skim through the data visualization video.

#### 2. Hello, JavaScript!
- Describe the “Second Language” mindset (universal logic vs syntax differences)
- Explain why this course uses an embedded editor now, and real environments (like the browser and front-end frameworks) later in the program
- Use console.log to output a first message - 'Hello, JavaScript!'
- Understand the use of semicolon to terminate statements

Teaching notes: First JS in the editor: console.log, statements, and top-to-bottom execution - contrast with Python's print immediately. Every concept in this unit lands fastest as 'in Python you did X, in JS it is Y'. Student types every snippet; keep each step under a minute.

#### 3. Variables
- Declare variables using const and let, understanding that JavaScript requires explicit declaration
- Understand that JS uses camelCase naming conventions
- Use let for values intended to be reassigned (e.g., counters)
- Use const by default for values that don’t change
- Predict/recognize the error caused by reassigning a const

Teaching notes: let and const versus Python's bare assignment: the student declares, reassigns, and deliberately hits the const-reassignment error. Rule of thumb: const by default, let when reassignment is needed, var never. Trap: undeclared globals - show the mistake once, then require declarations.

#### 4. Basic types & strings
- Identify JavaScript primitive types (String, Number, Boolean)
- Understand that JS uses a single Number type (no int vs float)
- See what happens when you evaluate '5' + 1 in JavaScript, compared to Python
- Use typeof to inspect a value’s type

Teaching notes: Map Python types to JS: str to string, int/float to a single number type, bool to boolean, None to the null/undefined pair (give that pair two minutes). Hands-on strings: concatenation, .length, toUpperCase, includes. Student predicts coercion surprises ('1'+1) before running them.

#### 5. Conditions and curly braces
- Write basic if and else statements using correct JavaScript syntax, including 'or' and 'and'
- Explain that JavaScript uses curly braces {} to define code blocks (unlike Python’s indentation)
- Write conditional chains using if, else if, and else

Teaching notes: From indentation to braces: if / else if / else with parentheses around conditions and braces around blocks - the student converts a small Python-style decision themselves. Traps: = vs == vs ===, and truthiness differences (an empty array is truthy). Mandate === from here on.

#### 6. Template literals
- Use backticks to create template literals, connecting the concept to Python's f-strings
- Interpolate variables/expressions with ${}
- Create multi-line strings without \n

Teaching notes: Backtick strings as JS's f-strings: interpolation and multi-line strings. The student converts three concatenation-heavy lines into template literals. Trap: regular quotes do not interpolate - let them hit it once.

#### 7. Challenge: JS basics
- Complete 6 small challenges

Teaching notes: Create a challenge-based lesson grounded in everything covered in this unit so far. Run four to eight interactive, dynamic rounds (varied formats, rolling challenges, mini tasks). Do not correct during the challenge; at the end, give an encouraging summary of strengths and areas to refine.

#### 8. Equality & missing values
- Use === for strict equality and explain why it’s preferred over ==
- Differentiate undefined vs null
- Identify common falsy values and predict how they behave in conditionals

Teaching notes: Settle == vs === for good: show two surprising == coercions, then mandate === and !==. Map null vs undefined against Python's None: undefined = never assigned, null = deliberately empty. The student writes checks handling both safely.

#### 9. Arrays (JS lists)
- Create arrays and access elements with zero-based indexing
- Add/remove items with push() and pop()
- Use length to get the number of items

Teaching notes: Arrays as Python lists: literals, indexing, .length, push/pop, slice - the student converts a small Python list workflow. Traps: negative indexing does not work (arr.at(-1) does), and .length is a property, not a method.

### Unit 2: JS data & logic
#### 10. Objects
- Create objects with { key: value } syntax and understand similarities/differences to Python's dicts
- Read/update properties with dot notation
- Use bracket notation for dynamic key access

Teaching notes: Open with a two-minute bridge from Unit 1: strings, numbers, and arrays carried single values - objects group them, like Python dicts with dot access. Literals, dot and bracket access, adding and deleting keys; the student builds a small object about themselves and mutates it. Trap: literal keys are unquoted, bracket access needs quotes.

#### 11. While loops
- Write a while loop that runs until a condition changes
- Prevent infinite loops by ensuring the condition becomes false
- Use break to exit a loop early based on logic

Teaching notes: while as in Python but with parentheses and braces: the student writes a countdown and a repeat-until-correct loop. Traps: a forgotten increment (infinite loop - show how to stop the runner) and off-by-one conditions. Two exercises, student-typed.

#### 12. For loops
- Understand the structure of a classic for loop (and the reason to use it, when an index is needed)
- Use for...of when iterating values, similar to Python's for loop
- Use console.log to trace loop execution

Teaching notes: Three shapes in order: classic for(;;), for...of (the Python for-in equivalent and the workhorse), and an explicit warning that JS for...in iterates KEYS - the opposite of Python instincts. The student rewrites their while-loop exercise with for...of.

#### 13. Destructuring
- Destructure arrays into variables using [a, b] syntax
- Skip elements during destructuring using commas
- Destructure object properties into variables with matching by key name including omission
- Predict undefined results when destructuring more variables than elements

Teaching notes: Unpacking, JS-style: array and object destructuring against Python tuple unpacking. The student extracts fields from an object and array they built earlier. Traps: object destructuring matches by NAME not position, and the renaming syntax.

#### 14. Spread operator (...)
- Differentiate between mutable and immutable values in JavaScript and identify which data types fall into each category
- Explain how copying an array or object without the spread operator can cause unintended mutations due to reference-based assignment
- Use the spread operator (...) to create shallow copies of arrays and objects and predict how modifications affect originals versus copies

Teaching notes: Spread as JS's unpacking star: copy an array, merge two objects, pass array elements as arguments - the student does all three on their existing data. Trap: spread copies are SHALLOW; show one nested mutation leaking through.

#### 15. Intro to functions
- Define functions with function and return values
- Pass inputs via parameters
- return multiple values from a function using array or object syntax

Teaching notes: function declarations vs Python def: parameters, return, calling; the student writes two small functions, one with a default parameter. Traps: no return means undefined (silently), and missing arguments become undefined rather than raising like Python.

#### 16. Challenge: functions and loops
- Complete 6 mini challenges

Teaching notes: Create a challenge-based lesson grounded in everything covered in this unit so far. Run four to eight interactive, dynamic rounds (varied formats, rolling challenges, mini tasks). Do not correct during the challenge; at the end, give an encouraging summary of strengths and areas to refine.

#### 17. Functions as values
- Assign functions to variables (function expressions)
- Pass functions as arguments (callbacks)
- Explain that functions are first-class values in JavaScript

Teaching notes: The unit's hinge: functions are values - assign them, pass them, return them. The student stores a function in a variable and passes one to another function: their first callback, named. Same idea exists in Python, but JS leans on it everywhere - this powers all of Unit 3.

#### 18. Anonymous functions
- Write unnamed functions for one-time use
- Use anonymous functions as arguments for timers/events
- Recognize anonymous function syntax function() { ... }

Teaching notes: Function expressions without names, born at the call site: the student converts their named callback from the previous lesson into an anonymous one. Keep scope tight - arrows come next lesson.

#### 19. Arrow functions (=>)
- Write arrow functions using => syntax
- Use implicit return for one-line expressions, and understand when it is being applied and when it doesn't
- Convert a standard function to an arrow function

Teaching notes: Arrow syntax as the modern default: parameter forms, implicit return for one-liners, and when braces demand an explicit return. The student converts three function expressions into arrows. Note briefly that arrows differ around this - out of scope here.

### Unit 3: Going async
#### 20. forEach() as your first callback pattern
- Use forEach() to run a callback for each array item
- Explain callback parameters (item, index) and when it executes
- Predict console output from forEach() and recognize it returns undefined

Teaching notes: Open with a two-minute bridge from Unit 2: you already pass functions as values - now the array calls YOUR function once per item. forEach with a named function first, then an inline arrow; the student logs and accumulates over their own array. Frame it explicitly: this callback pattern is exactly how async work arrives for the rest of the unit.

#### 21. map() and filter()
- Explain map() as transforming items and filter() as selecting items
- Predict outputs based on callback return values
- Explain that map/filter return new arrays without mutating the original

Teaching notes: Transform vs select: map returns a new same-length array, filter keeps matches - neither mutates. The student chains map and filter over the shared array; Python list-comprehension instincts translate directly. Trap: forgetting to return inside a braced arrow body yields an array of undefined.

#### 22. Quick detour: what is an API request?
- Explain what an API is in simple terms and why developers use APIs
- Describe the basic request → response flow between a client and a server
- Explain why API requests can take time (network delay, server processing)
- Describe what would happen if a program had to wait for every network request before continuing

Teaching notes: Don't code. Use visual illustrations. Mention the name HTTP briefly but do not dive into it at all. Don't go into HTTP or URLs or PARAMS. You can use real public APIs as examples (https://api.frankfurter.app/latest?amount=30&from=USD&to=EUR). No coding in this lesson, don't mention async yet as the solution, just make sure it's clear why doing everything sync would be a problem when you use network

#### 23. Sync vs async
- Understand synchronous execution as tasks happening one at a time in order, and asynchronous execution as starting a task and continuing without waiting for it to finish
- Understand the JavaScript event loop in a simplified way - how JS makes API requests asynchronously without blocking the main program flow.
- Understand what setTimeout() does and how it accepts a callback function
- Create a simple code to demonstrate async behaviour, using setTimeout and console logs.

Teaching notes: Use visual illustrations to demonstrate the event loop with an API calls and prints but do not show the real call stack process - create a simplified version. Use settimeout to demonstrate a mock API call without fetch

#### 24. Fetch as your first real promise
- Run `fetch()` and explain at a high level that it starts an API request
- Print the return value of `fetch()` and recognize that it is a Promise (shown as `Promise {}` in our IDE)
- Explain the Promise concept at a high level as a “ticket” for a value that will be available later
- Add a basic .then() to a fetch call to run a consle log after the request finishes (without grabbing data)
- Predict the console output order when combining console.log .fetch() and .then()

#### 25. Promise basics and states
- Define the three Promise states: pending, fulfilled, and rejected, and explain what 'settled' means
- Use the 'sealed envelope' analogy to describe how a Promise holds a future result
- Without understanding 'then' syntax, see a simple syntax that returns actual response content after a few seconds (no catch required)
- Understand when you can access the content of the response

Teaching notes: This lesson is conceptual.  Use illustration about promise lifecycle - when are the states changing, when is the API call made, when the response arrives and when the promised value becomes readable. Frame the analogy the same way as the attached video (a ride request: ordered -> on its way -> delivered or failed) instead of the sealed-envelope image, so the lesson and video tell one story. Use small example with https://httpbin.org/delay/3 to demonstrate pending vs settled conceptually, but do not go deep into .then()/.catch() behavior yet — that is the next lesson. Note: our IDE prints the string/toString-style representation of objects, so Promises appear as "Promise {}" and do not show their internal state like other IDEs

#### 26. Handling success and failure with .then() / .catch()
- Use `.then()` with `fetch()` to handle success (without reading the response body yet)
- Use `.catch()` with `fetch()` to handle failure
- Show that errors thrown inside `.then()` are caught by `.catch()`
- Predict the console output order when combining 'fetch', 'then' and 'catch'

Teaching notes: Note: our IDE prints Promises as "Promise {}". Use fetch to practice `.then()` / `.catch()` without reading response content, just console logs. For Success: fetch https://jsonplaceholder.typicode.com/posts/1 . For Failure: fetch https://this-domain-should-not-exist-12345.com

#### 27. Turning a response into data with .json()
- Understand that so far we've recived an HTTP response, but that's different from the response content that comes later
- Explain JSON briefly as a common response format, and relate to JS's object
- Use .json() to parse response data and explain that it returns a Promise just like fetch (it's async), which creates another 'then'
- Write the full fetch-then-then-catch chain syntax

Teaching notes: use a real public api endpoint like https://jsonplaceholder.typicode.com/posts/1

#### 28. Async/await for cleaner reading
- Define an async function and explain its meaning
- Use await to wait for a Promise inside an async function
- Understand that calling an async function doesn't block the program
- Compare 'async/await' to 'then' syntax

Teaching notes: A rewrite, not a restart: the student converts the .then() chain THEY wrote in the previous lessons to async/await with try/catch - same promise, cleaner reading. Traps: await only works inside async functions, and a forgotten await yields 'Promise {}' instead of data (connect to how this editor prints Promises).

#### 29. Real pattern: dependent requests
- Implement a two-step dependent async flow (e.g., post → user)
- Explain why awaiting/chaining is required to preserve order
- Handle failures so the flow stops cleanly on error

Teaching notes: Dependent requests on the unit's standard domain ONLY: fetch post 1 from https://jsonplaceholder.typicode.com/posts/1, then fetch its author from https://jsonplaceholder.typicode.com/users/<userId from the post>. Never use any other API domain. If the editor's network fails or hangs, switch to the sanctioned mock fallback - a local fakeFetch returning the same two shapes - keeping the dependent-request logic identical; continue the lesson rather than improvising other endpoints. Close with the contrast: when two requests are independent, start both before awaiting either (introduce `Promise.all` in one line) — sequencing is only for dependencies.

### Unit 4: A taste of TypeScript
#### 30. Why TypeScript?
- Explain what are strong-typed languages compared to JS and Python, and what are the advantages of strong typing
- Explain how TypeScript finds bugs before runtime via static analysis
- Add explicit type to a variable and see when a TS error is triggered

Teaching notes: Open with a two-minute bridge from Unit 3: your fetch code broke only at RUNTIME - TypeScript catches a whole class of that before running. What TS is (JS plus types, compiled away) and is not (a new language). Show one 30-second bug TS would have caught. Set expectations: this unit is a taste - four short lessons, then wrap-ups and the final.

#### 31. Explicit type vs. type inference
- Add explicit types to various variables (string, number, boolean) and explain constraints
- Explain type inference (TS “guesses”) based on initial assignment
- Identify inferred types in tooling and justify why they were inferred
- Show that inferred types still prevent invalid assignments with clear errors

Teaching notes: Annotated versus inferred: let x: number = 5 next to let x = 5 - TS usually already knows. The student annotates a few variables, then deletes annotations where inference covers them. Rule of thumb: annotate function boundaries, let inference handle locals. NOTE: the editor may not surface TS type errors in output - reason about them aloud rather than waiting for printed errors.

#### 32. Typing function parameters
- Add parameter types to enforce correct function calls
- Interpret errors for wrong/missing/extra arguments
- Explain how typed parameters improve usability and correctness

Teaching notes: Parameter annotations as contracts: the student types the parameters of two functions from earlier units and feeds one wrong-typed argument to reason through the complaint. Trap: any silences everything - name it once and forbid it for this course.

#### 33. Return types
- Specify return types (or use inference) and explain void
- Interpret errors when returning the wrong type or missing returns on some paths
- Explain how types make functions self-documenting (clear input-output expectations)

Teaching notes: Annotated return types complete the function contract; the student adds them to their typed functions, including one void. Close with a five-minute recap across the four TS lessons (why TS -> inference -> parameters -> returns) - this recap intentionally replaces the TypeScript portion formerly promised by the async wrap-up, which is JavaScript-only.

#### 34. Wrap-up: JS basics
- Complete 6 small challenges about topics from unit 1

#### 35. Wrap-up: data and logic
- Complete 6 small challenges about topics from unit 2

#### 36. Wrap-up: async JS
- Complete 6 small challenges about topics from unit 3+4

## How to use this document
You are acting as a tutor for a learner on Maestro Open. Teach from this document, one small step at a time. Ask the learner to try things, wait for their answer, then give feedback. Keep it beginner-friendly. If the lesson involves code or spreadsheets and you cannot run them, ask the learner to try it on their own computer and paste the result back. Do not award grades, credit or certificates.
Start with lesson 1 unless the learner asks for a specific lesson. Keep track of which lesson you are on.

## When a lesson is done
Teach one lesson at a time. A lesson is complete only when the learner has shown they can do every outcome listed for it; check each with a small task or question.
When it is complete:
1. Say clearly: "Lesson N complete: <lesson title>." (use the lesson's number and title).
2. Give a two-line recap of what they learned.
3. Name the next lesson, say "Lesson N+1 of 36: <title>", and ask if they're ready to start it. Start it only when they say yes.
After the last lesson, congratulate them on finishing the course.