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 code interpretation.
  • HTML: The framework of the web. Structure, hierarchy, and semantic tags.
  • CSS: The visual styling of the web. Colors, fonts, and the Box Model.
  • Lab 1: Configuring the container environment and constructing a static "About Me" profile page.

Working with HTML & CSS (Deep Dive)

  • HTML: Lists, Links, Images, and Forms (crucial 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: Techniques for targeting specific parts of a webpage.
  • Manipulation: Modifying content and attributes through code.
  • Lab 3: Altering static page elements dynamically via code (e.g., updating 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 for decision-making.
  • Loops: Executing repeated actions efficiently.
  • Functions: Creating reusable blocks of code (the "Recipe" concept).
  • Lab 4: Developing 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 validity).
  • DOM Manipulation: Dynamically adding and removing elements (e.g., creating a To-Do list).
  • Lab 5: Converting 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: Mastering "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? (Understanding concepts behind React, Vue, or Svelte).
  • Components: Constructing modular, reusable UI pieces.
  • 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 develop 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: Integrating HTML/CSS structure with JavaScript logic.
  • Debugging: Interpreting error messages and resolving logical issues.
  • 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 (2)

Upcoming Courses

Related Categories