--- 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 - [Why JavaScript?](https://open.maestrocollege.edu/build-your-first-website/why-javascript.md) - [Hello, JavaScript!](https://open.maestrocollege.edu/build-your-first-website/hello-javascript.md) - [Variables](https://open.maestrocollege.edu/build-your-first-website/variables.md) - [Basic types & strings](https://open.maestrocollege.edu/build-your-first-website/basic-types-strings.md) - [Conditions and curly braces](https://open.maestrocollege.edu/build-your-first-website/conditions-and-curly-braces.md) - [Template literals](https://open.maestrocollege.edu/build-your-first-website/template-literals.md) - [Challenge: JS basics](https://open.maestrocollege.edu/build-your-first-website/challenge-js-basics.md) - [Equality & missing values](https://open.maestrocollege.edu/build-your-first-website/equality-missing-values.md) - [Arrays (JS lists)](https://open.maestrocollege.edu/build-your-first-website/arrays-js-lists.md) ### Unit 2: JS data & logic - [Objects](https://open.maestrocollege.edu/build-your-first-website/objects.md) - [While loops](https://open.maestrocollege.edu/build-your-first-website/while-loops.md) - [For loops](https://open.maestrocollege.edu/build-your-first-website/for-loops.md) - [Destructuring](https://open.maestrocollege.edu/build-your-first-website/destructuring.md) - [Spread operator (...)](https://open.maestrocollege.edu/build-your-first-website/spread-operator.md) - [Intro to functions](https://open.maestrocollege.edu/build-your-first-website/intro-to-functions.md) - [Challenge: functions and loops](https://open.maestrocollege.edu/build-your-first-website/challenge-functions-and-loops.md) - [Functions as values](https://open.maestrocollege.edu/build-your-first-website/functions-as-values.md) - [Anonymous functions](https://open.maestrocollege.edu/build-your-first-website/anonymous-functions.md) - [Arrow functions (=>)](https://open.maestrocollege.edu/build-your-first-website/arrow-functions.md) ### Unit 3: Going async - [forEach() as your first callback pattern](https://open.maestrocollege.edu/build-your-first-website/foreach-as-your-first-callback-pattern.md) - [map() and filter()](https://open.maestrocollege.edu/build-your-first-website/map-and-filter.md) - [Quick detour: what is an API request?](https://open.maestrocollege.edu/build-your-first-website/quick-detour-what-is-an-api-request.md) - [Sync vs async](https://open.maestrocollege.edu/build-your-first-website/sync-vs-async.md) - [Fetch as your first real promise](https://open.maestrocollege.edu/build-your-first-website/fetch-as-your-first-real-promise.md) - [Promise basics and states](https://open.maestrocollege.edu/build-your-first-website/promise-basics-and-states.md) - [Handling success and failure with .then() / .catch()](https://open.maestrocollege.edu/build-your-first-website/handling-success-and-failure-with-then-catch.md) - [Turning a response into data with .json()](https://open.maestrocollege.edu/build-your-first-website/turning-a-response-into-data-with-json.md) - [Async/await for cleaner reading](https://open.maestrocollege.edu/build-your-first-website/async-await-for-cleaner-reading.md) - [Real pattern: dependent requests](https://open.maestrocollege.edu/build-your-first-website/real-pattern-dependent-requests.md) ### Unit 4: A taste of TypeScript - [Why TypeScript?](https://open.maestrocollege.edu/build-your-first-website/why-typescript.md) - [Explicit type vs. type inference](https://open.maestrocollege.edu/build-your-first-website/explicit-type-vs-type-inference.md) - [Typing function parameters](https://open.maestrocollege.edu/build-your-first-website/typing-function-parameters.md) - [Return types](https://open.maestrocollege.edu/build-your-first-website/return-types.md) - [Wrap-up: JS basics](https://open.maestrocollege.edu/build-your-first-website/wrap-up-js-basics.md) - [Wrap-up: data and logic](https://open.maestrocollege.edu/build-your-first-website/wrap-up-data-and-logic.md) - [Wrap-up: async JS](https://open.maestrocollege.edu/build-your-first-website/wrap-up-async-js.md) ## 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: ." (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: ", 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.