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: A simplified explanation of the Client-Server model.
- The Browser as a Computer: Understanding how browsers interpret code.
- HTML: The structural foundation of the web, covering hierarchy and semantic tags.
- CSS: The visual styling of the web, including colors, fonts, and the Box Model.
- Lab 1: Establishing the development environment and constructing a static "About Me" profile page.
Working with HTML & CSS (Deep Dive)
- HTML: Exploring lists, links, images, and forms, which are essential for user interaction.
- CSS: Styling text and backgrounds, with an introduction to Flexbox and Grid for contemporary layouts.
- Responsive Design: Ensuring the website functions seamlessly across both mobile and desktop devices.
- Lab 2: Enhancing the static page with professional styling and ensuring mobile responsiveness.
Working with the DOM (Document Object Model)
- Concept: Grasping the relationship between code and the visual representation on the page.
- Selecting Elements: Techniques for targeting specific components of a webpage.
- Manipulation: Modifying content and attributes programmatically.
- Lab 3: Altering static page elements through code, such as dynamically updating a title or image.
The Brains (JavaScript)
Programming in JavaScript (The Basics)
- Variables & Data Types: Methods for storing information, including text, numbers, and boolean values.
- Logic: Utilizing if/else statements to make decisions.
- Loops: Efficiently repeating actions.
- Functions: Developing reusable blocks of code, akin to following a "recipe".
- Lab 4: Developing a simple calculator or logic game using JavaScript.
Interactivity & Events
- Event Listeners: Reacting to user actions such as clicks, keystrokes, and page loads.
- Form Handling: Validating user input, for example, verifying the format of an email address.
- DOM Manipulation: Dynamically adding or removing elements, such as creating a To-Do list.
- Lab 5: Transforming the calculator into an interactive web application with user interface feedback.
Fetching Data (APIs)
- Concept: Understanding how web applications communicate with external servers, such as retrieving weather data or stock prices.
- JSON: The standard format for data exchange.
- Async Programming: Managing "wait and execute" logic to prevent browser freezing.
- Lab 6: Creating 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? (Introducing concepts from React, Vue, or Svelte).
- Components: Constructing modular and reusable UI elements.
- State Management: Tracking and managing changing data.
- The Ecosystem: Navigating packages, dependencies, and version control using Git.
- Lab 7: Refactoring a simple feature using a component-based approach.
The Capstone Project: Building a Web Application
- Requirement: Participants are required to build a functional web application, such as 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: Techniques for reading error messages and resolving logical issues.
- Presentation: Presenting the final application to the group.
Closing Remarks & Next Steps
- Technical Vocabulary: A reference guide for communicating with engineers (API, Backend, Frontend, Git, Deployment).
- Resource Guide: Recommended places for further learning, including Documentation, StackOverflow, and MDN.
- Career Integration: Demonstrating how these skills benefit roles in Product Management and Design.
- Q&A and Course Evaluation.
Requirements
- Basic proficiency in computer usage
- No prior programming experience required
21 Hours
Testimonials (3)
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
Hands-on, exercises, in-person helping and questioning.
Jose Paulos - INESC TEC
Course - Tailwind CSS
That every technical lesson came with multiple practical exercises to nail down the concepts.
