Front-end web development
JavaScript: the basics to bring your pages to life
Learn the language, manipulate the DOM, handle forms and exchange with a server.
- Duration
- 21 h · 3 days
- Level
- Beginner
- Format
- On site · Remote · Blended
- Max. group size
- 12 participants
Overview
This program introduces browser-side JavaScript. Participants discover the language's syntax, learn to manipulate the page and react to user actions, then validate forms and communicate with a server. Each concept is put into practice on a small project that grows over the three days.
Who this program is for
- Web integrators wishing to move into programming
- Beginner developers
- Career changers moving into web development
Prerequisites
- Knowledge of HTML and CSS
- Basic programming logic (variables, conditions, loops) appreciated
Learning objectives
- Master the basic syntax of JavaScript
- Select and modify page elements
- React to events and validate forms
- Write functions and use arrow functions
- Exchange with a server asynchronously
- Use the language's recent features
Detailed curriculum
6 modules · 21 h · 3 days
Day 1
Discovering the language
30% theory · 70% practice
- JavaScript and its ecosystem
- Variables, types, operators
- Conditions and loops
- Arrays, objects and JSON
- Browser console and basic debugging
🛠 Hands-on workshops
First scripts1.5 h
Write a series of small programs in the console.
✅ Deliverable : A file of commented scripts
Functions and scope
50% theory · 50% practice
- Declaring and calling a function
- Parameters, return values and default values
- Arrow functions
- Variable scope and the notion of this
- Callback functions
Day 2
Manipulate the DOM
30% theory · 70% practice
- Document tree and selectors
- Reading and modifying content and attributes
- Creating and removing elements
- Driving styles from JavaScript
- Event handling and delegation
🛠 Hands-on workshops
Interactive to-do list2 h
Build a task management application in the page.
✅ Deliverable : An interactive application
Forms and validation
50% theory · 50% practice
- Reading form values
- Writing input checks
- Displaying error messages
- Preventing submission and processing the data
- Useful regular expressions
Day 3
Asynchronous exchanges with a server
30% theory · 70% practice
- Principle of asynchronous code
- Promises and async/await
- Calling an API with fetch
- Processing the JSON response and handling errors
- Displaying remote data in the page
🛠 Hands-on workshops
Weather or quotes app2 h
Consume a public API and display the results.
✅ Deliverable : A page fed by an API
Adapt the interface and go further
50% theory · 50% practice
- Media queries from JavaScript
- Recent language features
- Local storage in the browser
- Using an AI assistant to learn and debug
- Ways to continue: modules, tools, frameworks
Tools and technologies
CSS3HTML5JavaScriptVisual Studio Code
Teaching methods
- Alternating short lectures and hands-on work
- Live demonstrations by the trainer
- Capstone project built throughout the modules
- Group corrections and discussion of best practices
Assessment
- Hands-on exercises corrected in each module
- Mini-project completed at the end of the course
- Knowledge-check quiz
Required equipment
- A computer with an internet connection
- A code editor and a recent browser
Resources provided
- Course materials and repository of corrected exercises
Career outcomes
- An interactive JavaScript mini-project
- Ability to read and fix JavaScript code
- Preparation for learning a framework
Related video courses
My video courses that go with this program, to get ready for the training or to review afterwards. Free with an account.
