Get in Touch

Course Outline

The Structure and Style (HTML & CSS)

Introduction & Web Technologies

  • How the Web Works: An accessible explanation of the Client-Server model.
  • The Browser as a Computer: Understanding how code is interpreted.
  • HTML: The framework of the web. Understanding structure, hierarchy, and semantic tags.
  • CSS: The styling of the web. Covering colors, fonts, and the Box Model.
  • Lab 1: Setting up the development environment and constructing a static "About Me" profile page.

Working with HTML & CSS (Deep Dive)

  • HTML: Working with lists, links, images, and forms (essential for user interaction).
  • CSS: Styling text and backgrounds. Introduction to Flexbox and Grid for contemporary layouts.
  • Responsive Design: Ensuring the site functions seamlessly 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 sections of a webpage.
  • Manipulation: Changing content and attributes through code.
  • Lab 3: Modifying static page elements via code (e.g., dynamically altering a title or image).

The Brains (JavaScript)

Programming in JavaScript (The Basics)

  • Variables & Data Types: Storing information (text, numbers, true/false).
  • Logic: Using if/else statements to make decisions.
  • Loops: Performing actions efficiently in repetition.
  • 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., verifying if an email address is valid).
  • DOM Manipulation: Dynamically adding and removing elements (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 applications communicate with other servers (e.g., retrieving weather data or stock prices).
  • JSON: The standard language for data exchange.
  • Async Programming: Understanding "wait then act" 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: Tracking 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 support Product Management and Design roles.
  • Q&A and Course Evaluation.

Requirements

  • Basic computer usage skills
  • No prior programming experience is required
 21 Hours

Number of participants


Price per participant

Testimonials (2)

Upcoming Courses

Related Categories