Get in Touch

Course Outline

The Structure and Style (HTML & CSS)

Introduction & Web Technologies

  • How the Web Works: A simple explanation of the Client-Server model.
  • The Browser as a Computer: Understanding code interpretation.
  • HTML: The foundation of the web, including 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 creating a static "About Me" profile page.

Working with HTML & CSS (Deep Dive)

  • HTML: Mastering lists, links, images, and forms (essential for user interaction).
  • CSS: Styling text and backgrounds, with 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 interface.
  • Selecting Elements: Techniques for targeting specific parts of a webpage.
  • Manipulation: Modifying content and attributes via code.
  • Lab 3: Modifying static page elements through code (e.g., dynamically changing a title or image).

The Brains (JavaScript)

Programming in JavaScript (The Basics)

  • Variables & Data Types: Storing information such as text, numbers, and booleans.
  • Logic: Using if/else statements to make decisions.
  • Loops: Efficiently repeating actions.
  • Functions: Creating reusable code blocks (the "Recipe" concept).
  • Lab 4: Building 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 email formats).
  • DOM Manipulation: Dynamically adding and removing elements (e.g., building 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 execute" logic to prevent browser freezing.
  • 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? (Overview of React, Vue, or Svelte concepts).
  • Components: Building modular, reusable UI pieces.
  • 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, product dashboard, or portfolio site).
  • Planning: Defining the "User Story" and technical scope.
  • Implementation: Integrating HTML/CSS structure with JavaScript logic.
  • Debugging: Reading error messages and fixing 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

  • Basic computer literacy.
  • No prior programming experience required.
 21 Hours

Number of participants


Price per participant

Testimonials (3)

Upcoming Courses

Related Categories