Modern JavaScript

From scratch: HTML, CSS and JavaScript applied to real interfaces, with step-by-step explanations and labs where you write only the logic.

A 10-chapter program designed for complete beginners: every concept (tags, padding, variables, events, promises…) is explained before you practice it. The DOM labs come with a ready-made HTML interface (inputs, cards, buttons, messages): your job is to write the JavaScript that selects it and transforms it. Running project: Factura Fácil.

9 chapters · 170 labs · ~44 h · US$8.99, one-time payment. The first chapter is free.

What you'll be able to do

  • Connect JavaScript to HTML and CSS through the DOM.
  • Respond to events and validate forms without reloading the page.
  • Consume APIs with fetch and handle asynchrony with async/await.
  • Build basic components with React.
  • Publish and present a complete project.

Syllabus

  1. Chapter 1 · HTML, CSS and Git (free)

    HTML structure, responsive CSS with Flexbox and Grid, and version control with Git. Your first project.

    1. Lesson: What is a web page? (10 min)
    2. Lesson: HTML from scratch: tags, attributes and structure (25 min)
    3. Lab: Fill in: the link and the image (5 min)
    4. Lab: Fill in: the missing attributes (5 min)
    5. Lab: Put in order: a list of services (5 min)
    6. Lab: Navigation bar with three links (10 min)
    7. Quiz: Check: HTML (5 min)
    8. Lesson: CSS from scratch: rules, selectors, colors and text (25 min)
    9. Lab: Fill in: your first CSS rule (5 min)
    10. Lab: Card with a shadow (12 min)
    11. Lab: Styled heading (10 min)
    12. Lesson: The box model: padding, border and margin (20 min)
    13. Lab: Fill in: the box model (6 min)
    14. Lab: Box with padding, border and margin (12 min)
    15. Lesson: Flexbox and Grid step by step (25 min)
    16. Lab: Fill in: centering with Flexbox (6 min)
    17. Lab: Fill in: three columns with Grid (6 min)
    18. Lab: Business card with Flexbox (20 min)
    19. Lab: Responsive gallery with Grid (15 min)
    20. Lesson: Git and GitHub from scratch (20 min)
    21. Lab: Price table (12 min)
    22. Lab: Contact form (12 min)
    23. Quiz: Check: CSS and Git (5 min)
    24. Link: Git and GitHub: getting started guide (5 min)
    25. Lesson: Course glossary (5 min)
    26. Quiz: Quiz · HTML, CSS and Git (10 min)

  2. Chapters 2-3 · JavaScript fundamentals (in the full course)

    Variables, types, conversions, operators, template literals, conditionals and functions. The two units were covered together.

    1. Lesson: What is JavaScript and where do you write it? (15 min)
    2. Lesson: Variables and data types (20 min)
    3. Lab: Fill in: const or let (6 min)
    4. Lab: Personalized greeting (8 min)
    5. Lesson: Type conversions (15 min)
    6. Lab: Build the line: from text to number (5 min)
    7. Lab: From text to number (8 min)
    8. Lesson: Operators and expressions (15 min)
    9. Lab: Purchase subtotal (8 min)
    10. Lesson: Conditionals: making decisions (15 min)
    11. Lab: Put in order: did they pass? (6 min)
    12. Quiz: Check: variables and types (5 min)
    13. Lab: Old enough (10 min)
    14. Lesson: Functions: reusing logic (20 min)
    15. Lab: Fill in: an arrow function (5 min)
    16. Lab: Discount function (12 min)
    17. Lab: Classify the temperature (8 min)
    18. Lab: Invoice summary with a template literal (8 min)
    19. Lab: Stock label (8 min)
    20. Lesson: Arrays and objects: storing several values (20 min)
    21. Lab: Fill in: the message with a template literal (5 min)
    22. Lab: Fill in: discounted prices (6 min)
    23. Quiz: Check: functions and arrays (5 min)
    24. Lab: Add up the prices in an array (8 min)
    25. Lab: A list from an array (10 min)
    26. Lab: A card from an object (10 min)
    27. Quiz: Quiz · JavaScript fundamentals (10 min)

  3. Chapter 4 · DOM (in the full course)

    querySelector(), textContent, attributes, classList and the visible Factura Fácil quote.

    1. Lesson: What is the DOM? (12 min)
    2. Lesson: Selecting elements (15 min)
    3. Lab: Fill in: find the title (5 min)
    4. Lab: Fill in: color every title blue (6 min)
    5. Lesson: Read and modify: text, values, attributes, classes and new elements (25 min)
    6. Lab: Fill in: read what's in the box (5 min)
    7. Quiz: Check: the DOM (5 min)
    8. Lab: Fill in: add an item to the list (6 min)
    9. Lab: Fill in: turn on dark mode (5 min)
    10. Lab: Fill in: change the image (5 min)
    11. Lab: Build the line: create an element (5 min)
    12. Lab: Put in order: render the list from an array (6 min)
    13. Quiz: Check: creating and modifying elements (5 min)
    14. Lab: Change the title (5 min)
    15. Lab: Dynamic image (6 min)
    16. Lab: Safe external link (6 min)
    17. Lab: Dark mode (5 min)
    18. Lab: Service list from an array (12 min)
    19. Lab: Product cards (15 min)
    20. Lab: Character counter (5 min)
    21. Lab: Completed tasks (10 min)
    22. Lab: Add up the price column (12 min)
    23. Lab: Highlight the expensive services (12 min)
    24. Lab: Visible quote · Factura Fácil (20 min)
    25. Quiz: Quiz · DOM (10 min)

  4. Chapter 5 · Events and forms (in the full course)

    addEventListener(), clicks, form events, preventDefault() and validation. Includes the first midterm.

    1. Lesson: Events from scratch (20 min)
    2. Lab: Fill in: make the button respond (6 min)
    3. Lab: Build the line: listen for the click (6 min)
    4. Lab: Fill in: count while typing (6 min)
    5. Lab: Fill in: the total when choosing a quantity (6 min)
    6. Lab: Fill in: one listener for all the buttons (7 min)
    7. Quiz: Check: events (5 min)
    8. Lesson: Forms: submit without reloading and validate (20 min)
    9. Lab: Fill in: keep the form from reloading (6 min)
    10. Lab: Fill in: read what was typed (6 min)
    11. Lab: Put in order: submit without reloading (6 min)
    12. Quiz: Check: forms (5 min)
    13. Lab: Button that greets (8 min)
    14. Lab: Validate that nothing is missing (15 min)
    15. Lab: Character counter with a warning (15 min)
    16. Lab: Counter with buttons (8 min)
    17. Lab: Show or hide the password (8 min)
    18. Lab: Submit without reloading (10 min)
    19. Lab: Filter the list as you type (15 min)
    20. Lab: Button that locks when submitting (12 min)
    21. Lab: Total based on the quantity (12 min)
    22. Lab: Validate an email (10 min)
    23. Lab: Real-time total (8 min)
    24. Lab: Factura Fácil: calculate on click (15 min)
    25. Lab: Shopping list (12 min)
    26. Exam: First midterm · Chapters 1-5 (45 min)

  5. Chapter 6 · Asynchronous JavaScript (in the full course)

    Timers, promises, async/await and error handling applied to events and forms: buttons that wait, submissions with validation, searches with debounce and several requests at once. Review Chapter 5 as you go.

    1. Lesson: Synchronous and asynchronous: why asynchrony exists (15 min)
    2. Lab: In what order does it print? (6 min)
    3. Lesson: Timers: setTimeout, setInterval and how to stop them (15 min)
    4. Lab: Fill in: do something later (5 min)
    5. Lab: Fill in: repeat and stop (6 min)
    6. Lab: A notice that disappears (12 min)
    7. Lab: Countdown with start and stop (15 min)
    8. Lesson: Promises (18 min)
    9. Lab: Fill in: make a promise (7 min)
    10. Lab: Put in order: chaining with then (6 min)
    11. Quiz: Check: promises (5 min)
    12. Lab: Promise with a delay (8 min)
    13. Lab: Chaining with then (8 min)
    14. Lesson: async/await and error handling (20 min)
    15. Lab: Fill in: wait for the result (6 min)
    16. Quiz: Check: asynchrony (5 min)
    17. Lab: Build the line: wait for the data (5 min)
    18. Lab: Fill in: no matter what (6 min)
    19. Lab: async/await with try/catch (10 min)
    20. Lab: Loading… (10 min)
    21. Lab: A visible error (10 min)
    22. Lesson: Events that wait: buttons, states and delegation (18 min)
    23. Lab: Save without double clicks (12 min)
    24. Lab: Favorites with event delegation (15 min)
    25. Lab: Municipalities by province (15 min)
    26. Lesson: Asynchronous forms: validate, submit and respond (20 min)
    27. Lab: Sign-up with validation and a server (20 min)
    28. Lesson: Search as you type: input and debounce (15 min)
    29. Lab: Search box with a wait (debounce) (15 min)
    30. Lesson: Several promises at once: all, allSettled, race and retries (18 min)
    31. Lab: Fill in: request three things at once (7 min)
    32. Lab: Several promises with Promise.all (12 min)
    33. Lab: Dashboard with Promise.allSettled (15 min)
    34. Lab: Time limit with Promise.race (10 min)
    35. Lab: Retry until it works (10 min)
    36. Lab: Factura Fácil: saving the quote (25 min)
    37. Quiz: Quiz · Asynchronous (20 min)

  6. Chapter 7 · REST APIs (in the full course)

    fetch(), JSON, consuming data and rendering cards or lists.

    1. Lesson: What is a REST API? (15 min)
    2. Lesson: Errors and status codes: 200, 404 and 500 (18 min)
    3. Lab: Fill in: fetch the products (6 min)
    4. Lab: Build the line: request and wait (5 min)
    5. Lab: Count the products in the catalog (12 min)
    6. Lesson: fetch step by step (20 min)
    7. Lab: Put in order: the steps of a call (7 min)
    8. Lab: Fill in: warn when it doesn't exist (6 min)
    9. Quiz: Check: fetch (5 min)
    10. Lab: The most expensive product (15 min)
    11. Lab: Search with a not-found notice (15 min)
    12. Lab: Show “Loading…” and remove it (12 min)
    13. Lab: Consume an API (15 min)
    14. Lesson: Sending data to an API: POST, PUT and DELETE (18 min)
    15. Lab: Fill in: just the names in the catalog (6 min)
    16. Lab: Only the cheap products (12 min)
    17. Lab: Fill in: place an order (7 min)
    18. Lab: Fill in: survive a network failure (6 min)
    19. Lab: Catalog with a total (15 min)
    20. Lab: User 1's profile (12 min)
    21. Quiz: Check: REST (5 min)
    22. Lab: User cards (15 min)
    23. Lab: Find a user by id (15 min)
    24. Lab: Loading status (15 min)
    25. Quiz: Quiz · REST APIs (8 min)

  7. Chapter 8 · React (in the full course)

    Components, JSX, props and basic state.

    1. Lesson: React: why it exists and how to think in it (25 min)
    2. Lesson: JSX: HTML inside JavaScript (18 min)
    3. Lab: Fill in: your component says hello (6 min)
    4. Lab: Put in order: the parts of a component (6 min)
    5. Lab: Fill in: passing data with props (6 min)
    6. Lab: Product card with props (15 min)
    7. Quiz: Check: components and props (5 min)
    8. Lab: Your first component (15 min)
    9. Lab: Fill in: a list with map (7 min)
    10. Lab: Task list with map (15 min)
    11. Lab: Product list from an array of objects (15 min)
    12. Lab: List with props (12 min)
    13. Lesson: State and events in React: useState step by step (20 min)
    14. Lab: Build the line: declaring state (6 min)
    15. Lab: Fill in: the counter that actually changes (7 min)
    16. Lab: Counter with add and subtract (15 min)
    17. Lab: Show and hide the details (15 min)
    18. Lab: Counter with useState (15 min)
    19. Lab: Fill in: type and see it instantly (8 min)
    20. Lab: Fill in: show it only if it's available (7 min)
    21. Lab: Controlled field with a counter (15 min)
    22. Lab: Filtering the list with state (18 min)
    23. Lab: Adding tasks with React (20 min)
    24. Quiz: Check: state (5 min)
    25. Quiz: Quiz · React (8 min)

  8. Chapter 9 · Browser APIs (in the full course)

    Local Storage, geolocation, Canvas, and media. Includes the second midterm.

    1. Lesson: Browser APIs: storage, location, drawing, and media (25 min)
    2. Lesson: Saving data in the browser: localStorage step by step (18 min)
    3. Lab: Fill in: save and read back the name (5 min)
    4. Lab: Build the line: save the theme (5 min)
    5. Lab: Fill in: save a list (6 min)
    6. Lab: Fill in: a default value (6 min)
    7. Lab: Put in order: remember the chosen theme (7 min)
    8. Quiz: Check: storage (5 min)
    9. Lab: A to-do list that doesn't get lost (18 min)
    10. Lab: Visit counter (10 min)
    11. Lab: Save the theme (8 min)
    12. Lesson: Dates, currencies, and links that carry data (16 min)
    13. Lab: Fill in: a price in Dominican pesos (6 min)
    14. Lab: Fill in: read the link's data (5 min)
    15. Lab: Prices in Dominican format (12 min)
    16. Lab: Show the link's category (12 min)
    17. Lab: Remember the name (8 min)
    18. Lab: Geolocation (10 min)
    19. Lab: Drawing on Canvas (10 min)
    20. Lab: Fill in: draw a rectangle (6 min)
    21. Lab: Bar chart on a canvas (18 min)
    22. Quiz: Check: browser APIs (5 min)
    23. Lab: Audio control (10 min)
    24. Lab: Player with status (12 min)
    25. Exam: Second midterm · Chapters 6-9 (45 min)

  9. Chapter 10 · Wrap-up and publishing (in the full course)

    Accessibility, good practices, GitHub, deployment and your final project presentation.

    1. Lesson: Accessibility and good practices (20 min)
    2. Lesson: Semantic HTML: choosing the right tag (18 min)
    3. Lab: Fill in: the tags that mean something (5 min)
    4. Lab: Fill in: headings in order (5 min)
    5. Lab: Put in order: the page structure (6 min)
    6. Lab: Fill in: the label and its field (5 min)
    7. Lab: Fill in: what a screen reader hears (5 min)
    8. Lab: Build the line: naming the menu button (5 min)
    9. Quiz: Check: accessibility (5 min)
    10. Lab: Basic accessibility (8 min)
    11. Lab: Fill in: a menu that says whether it is open (7 min)
    12. Lab: An accessible form from start to finish (16 min)
    13. Lab: A table that reads well (14 min)
    14. Lab: Keyboard-accessible menu (16 min)
    15. Lesson: Publishing with GitHub Pages (15 min)
    16. Lesson: Fast to load, easy to find (16 min)
    17. Lab: Fill in: the language and the description (5 min)
    18. Lab: Fill in: an image that doesn't slow the page down (5 min)
    19. Lab: Metadata for sharing the project (12 min)
    20. Lab: The home page, well structured (18 min)
    21. Lab: Light and dark mode that is remembered (18 min)
    22. Quiz: Check: performance and publishing (5 min)
    23. Link: GitHub Pages: official documentation (5 min)
    24. Lesson: Final project presentation (10 min)
    25. Quiz: Quiz · Wrap-up and publishing (8 min)

Before you start

  • Eagerness to type: every chapter has several hands-on challenges.
  • A modern browser (Chrome, Edge or Firefox).

Try the first lesson for free, no account needed

Also in: Español