JavaScript Basics
DOM, fetch, modules 16h
Learn the core JavaScript language, wire it up to the DOM, and work with real APIs using fetch and JSON so you can ship interactive features that respond to user input. You will move from simple console exercises to building a small app that loads live data from the web and updates the UI without reloading the page.
By the end you will be able to:
4 outcomes- Understand variables, types, arrays, objects, functions, and scope in modern JavaScript, and use them to store and manipulate data in a predictable way.
- Manipulate the DOM, handle user events such as clicks and form submissions, and update elements on the page without reloading it.
- Call APIs with fetch, parse JSON responses, handle loading and error states, and show clear feedback to the user when something goes wrong.
- Organize your code using ES modules and simple build tooling so that your scripts remain readable and maintainable as they grow.
Training highlights
4 key themes- Core language: values, types, arrays, objects, functions, and control flow with if/else and loops applied to real-world mini-problems.
- DOM queries, events, and stateful UI patterns that let users interact with your page and see immediate visual feedback.
- Fetch, JSON, and basic async patterns for working with APIs, including handling slow responses and errors gracefully.
- ES modules and bundling basics so you can split your code into smaller files without breaking the browser.
Syllabus
4 sectionsLanguage fundamentals: variables, types, arrays, objects, functions, and control structures. You will work through short exercises in the console and in a script.js file so you understand how JavaScript executes line by line.
DOM selection and manipulation, event listeners, and form handling. You will build small interactive components such as counters, toggles, and simple form validations that respond to user actions.
The fetch API, JSON, loading states, error handling, and simple client-side routing concepts. You will connect to a public API and render real data into your page.
Build an interactive dashboard or mini app that consumes a public API (for example, weather, crypto prices, or movie data). The app will include at least one form, loading and error states, and basic modular code organization.
Training plan
5 modulesFollow these modules step by step. Each one included concrete tasks so you actually learn and ship something real. You could have treated each module as one focused work session or spread the steps across several days.
Module 1: JavaScript Basics in the Console
- Create a script.js file and link it with <script src="script.js"></script> at the end of your HTML <body>. Confirm that a simple console.log('Hello') message appears in the browser console.
- Practice with let and const by declaring variables for strings, numbers, and booleans. Reassign variables where appropriate and observe what the console shows.
- Create arrays and objects to represent a small set of data (for example, a list of courses or tasks). Use console.log to inspect individual items and properties.
- Write small functions that take arguments, perform calculations (such as adding numbers or formatting strings), and return values. Call these functions with different inputs and log the results.
Module 2: DOM and Events
- Use document.querySelector and querySelectorAll to select headings, buttons, and other elements. Log these elements to understand what is returned.
- Change textContent, classList, and attributes on elements in response to JavaScript code. For example, toggle a 'highlight' class on a card when a button is clicked.
- Add click event listeners to buttons and links so that user actions trigger a function. Use these handlers to update the DOM—for example, increment a counter or reveal hidden content.
- Build a simple to-do list or note-taking widget where users can add items via a text input, see them appear on the page, and remove them with a click.
Module 3: Forms, Validation, and State
- Capture form submissions, call event.preventDefault(), and manually read values from form fields. Log the submitted data to verify you are capturing it correctly.
- Implement basic client-side validation such as checking that required fields are not empty or that an email looks valid. Show error messages near the field that needs attention.
- Store a small amount of state in JavaScript variables or in localStorage so that some user data persists across page refreshes (for example, a list of saved items).
- Refine your to-do or note-taking widget to validate input, show errors, and save items so they appear again after a browser refresh.
Module 4: fetch, JSON, and APIs
- Use fetch to call a simple public API (for example, a JSON placeholder or a demo API) and log the raw Response object. Then convert it to JSON and log the data.
- Render the JSON data into the DOM by creating elements for each item (such as cards or list items). Verify that updates happen without a page reload.
- Implement a loading indicator that appears while data is being fetched and disappears when the response arrives. Test this by slowing down your network in devtools.
- Handle network or API errors by catching exceptions or checking response.ok. Show a friendly error message in the UI so users are not left guessing.
Practice & Assessment
- Build a mini app powered by a public API (such as weather, crypto price, or movie search). Allow users to type in a query and display a list of results.
- Use at least one form or input to filter or search through the data. Update the results dynamically as the user submits the form.
- Implement clear loading and error states so users understand what is happening when data is being requested or something fails.
- Refactor your code into smaller functions or ES modules that each handle a single responsibility, such as fetching data, rendering results, or managing state.