Thank you for sending your enquiry! One of our team members will contact you shortly.
Thank you for sending your booking! One of our team members will contact you shortly.
Course Outline
The Structure and Style (HTML & CSS)
Introduction & Web Technologies
- How the Web Works: The Client-Server model explained simply.
- The Browser as a Computer: Interpreting code.
- HTML: The skeleton of the web. Structure, hierarchy, and semantic tags.
- CSS: The styling of the web. Colors, fonts, and the Box Model.
- Lab 1: Setting up the container environment and building 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 background. Introduction to Flexbox and Grid for modern layouts.
- Responsive Design: Making the site work on mobile and desktop.
- Lab 2: Refining the static page with professional styling and mobile responsiveness.
Working with the DOM (Document Object Model)
- Concept: Understanding how code relates to the visual page.
- Selecting Elements: How to target specific parts of a webpage.
- Manipulation: Changing content and attributes via code.
- Lab 3: Modifying the static page elements via code (e.g., changing a title or image dynamically).
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 real).
- DOM Manipulation: Adding and removing elements dynamically (e.g., a To-Do list).
- Lab 5: Turning the calculator into an interactive web app with UI feedback.
Fetching Data (APIs)
- Concept: How web apps talk to other servers (e.g., getting weather data or stock prices).
- JSON: The language of data exchange.
- Async Programming: Understanding "Wait, then do" logic without freezing the browser.
- Lab 6: Building a feature that pulls live data from a public API to display on the page.
The Professional Toolkit (Frameworks & Capstone)
Using Programming Frameworks
- Why use frameworks? (React, Vue, or Svelte concepts).
- 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 help in Product Management and Design roles.
- Q&A and Course Evaluation.
Requirements
- Basic computer usage skills
- No previous programming experience is needed
21 Hours
Testimonials (2)
I really enjoyed learning about AI attacks and the tools out there to begin practicing and actively using for security testing. I took a lot of knowledge away which I didn't have at the beginning and the course met what I hoped it would be. My favorite part shown from the training was Comet Browser and was amazed at what it could do. Definitely something will be looking into more. Overall it was a great course and enjoyed learning all OWASP GenAI Top 10.
Patrick Collins - Optum
Course - OWASP GenAI Security
That every technical lesson came with multiple practical exercises to nail down the concepts.
