Get in Touch

Course Outline

The Structure and Style (HTML & CSS)

Introduction & Web Technologies

  • How the Web Works: A simplified explanation of the Client-Server model.
  • The Browser as a Computer: Understanding how browsers interpret code.
  • HTML: The foundation of the web. Exploring structure, hierarchy, and semantic tags.
  • CSS: The visual styling of the web. Covering colours, fonts, and the Box Model.
  • Lab 1: Setting up the working environment and creating a static 'About Me' profile page.

Working with HTML & CSS (Deep Dive)

  • HTML: Lists, links, images, and forms (essential for user interaction).
  • CSS: Styling text and backgrounds. An introduction to Flexbox and Grid for modern layouts.
  • Responsive Design: Ensuring the site functions well on both mobile and desktop devices.
  • Lab 2: Enhancing the static page with professional styling and mobile responsiveness.

Working with the DOM (Document Object Model)

  • Concept: Understanding the relationship between code and the visual page.
  • Selecting Elements: How to target specific parts of a webpage.
  • Manipulation: Changing content and attributes via code.
  • Lab 3: Modifying static page elements via code (e.g., dynamically changing a title or image).

The Brains (JavaScript)

Programming in JavaScript (The Basics)

  • Variables & Data Types: Storing information (text, numbers, true/false).
  • Logic: If/else statements (making decisions).
  • Loops: Repeating actions efficiently.
  • Functions: Creating reusable blocks of code (the 'Recipe' concept).
  • Lab 4: Creating a basic calculator or logic game using JavaScript.

Interactivity & Events

  • Event Listeners: Responding to clicks, keystrokes, and page loads.
  • Form Handling: Validating user input (e.g., checking if an email is valid).
  • DOM Manipulation: Adding and removing elements dynamically (e.g., a To-Do list).
  • Lab 5: Transforming the calculator into an interactive web app with UI feedback.

Fetching Data (APIs)

  • Concept: How web apps communicate with other servers (e.g., retrieving weather data or stock prices).
  • JSON: The standard language for data exchange.
  • Async Programming: Understanding 'wait, then do' logic without freezing the browser.
  • Lab 6: Building a feature that retrieves live data from a public API to display on the page.

The Professional Toolkit (Frameworks & Capstone)

Using Programming Frameworks

  • Why use frameworks? (Concepts behind React, Vue, or Svelte).
  • Components: Building modular, reusable pieces of the UI.
  • State Management: Keeping track of changing data.
  • The Ecosystem: Understanding packages, dependencies, and version control (Git).
  • Lab 7: Refactoring a simple feature using a component-based approach.

The Capstone Project: Building a Web Application

  • Requirement: Participants must build a functional web application (e.g., a budget tracker, a product dashboard, or a portfolio site).
  • Planning: Defining the 'User Story' and technical scope.
  • Implementation: Combining HTML/CSS structure with JavaScript logic.
  • Debugging: How to read error messages and fix broken logic.
  • Presentation: Presenting the final application to the group.

Closing Remarks & Next Steps

  • Technical Vocabulary: A cheat sheet for communicating with engineers (API, Backend, Frontend, Git, Deployment).
  • Resource Guide: Where to learn more (Documentation, StackOverflow, MDN).
  • Career Integration: How these skills benefit Product Management and Design roles.
  • Q&A and Course Evaluation.

Requirements

  • Fundamental computer literacy
  • No prior programming experience required
 21 Hours

Custom Corporate Training

Training solutions designed exclusively for businesses.

  • Customized Content: We adapt the syllabus and practical exercises to the real goals and needs of your project.
  • Flexible Schedule: Dates and times adapted to your team's agenda.
  • Format: Online (live), In-company (at your offices), or Hybrid.
Investment

Price per private group, online live training, starting from 3900 € + VAT*

Contact us for an exact quote and to hear our latest promotions

Testimonials (2)

Provisional Upcoming Courses (Contact Us For More Information)

Related Categories