• Lesson 1 - Dev Setup + Intro to React w/ Resume Project

  In this lesson, you will learn how to set up a development environment and use React to build a dynamic menu component. By the end, you will have the skills needed to build user interfaces with React.

• Lesson 2 - Props with Menu Project

  In this lesson, you will delve deeper into React by introducing props, a mechanism for passing data from parent to child components. Students will build a Menu project, learning how to use props to create reusable and maintainable code.

• Lesson 3 - useState with Like Counter

  The lesson introduces the useState hook, a built-in React hook for managing state. Students will learn how to use useState by building a Like Counter application, gaining hands-on experience with state management in React.

• Lesson 4 - useContext with Dark Mode

  This lesson introduces the useContext hook, a built-in React hook for managing global state. Students will learn how to use useContext by building a Dark Mode application, mastering the art of managing global state in React.

• Lesson 5 - React Router with Login

  In this lesson, students are introduced to React Router, a popular routing library for React. It covers the basic concepts, benefits of React Router, and guides students through building a Login application, forming a foundation for advanced front-end development.

• Lesson 6 - Conditional Rendering with Todo App

  This lesson covers conditional rendering, a fundamental concept in React for displaying different UI elements based on certain conditions. Students will build a Todo App, learning how to use conditional rendering to create dynamic and interactive user interfaces.

• Lesson 7 - useEffect with APIs with Bus Arrival App

  The lesson introduces the useEffect hook, a built-in React hook for managing side effects. Students will learn how to use useEffect by building a Bus Arrival App, mastering the art of fetching data from APIs in React.

• Lesson 8 - useEffect with Clean Up with Timer App

  This lesson covers the use of useEffect for managing clean up, a crucial concept for handling side effects in React. Students will build a Timer App, learning how to use useEffect for managing clean up and handling side effects in React.

• Lesson 9 - useRef with Todo & Timer App

  The lesson introduces the useRef hook, a built-in React hook for referencing DOM elements. Students will learn how to use useRef by building a Todo & Timer App, mastering the art of referencing DOM elements in React.

• Lesson 10 - Redux with Ecommerce App

  This lesson introduces Redux, a popular state management library for React. Students will learn how to use Redux by building an Ecommerce App, mastering the art of managing complex state in React.

• Lesson 11 - Instagram Clone Part 1 - Redux

  In this practical project, students start building an Instagram clone, applying the lessons learned in React and Redux. This project helps in consolidating their understanding of front-end development.

• Lesson 12 - Instagram Clone Part 2 - Upload Image Feature

  The continuation of the Instagram clone project, where students implement more complex features and functionalities, enhancing their skills in real-world application development.

• Lesson 13 - Front-End Assessment

  An assessment module designed to evaluate the students' ability to utilize their skills in front-end technologies including React, Redux, and others, ensuring they are ready for professional front-end development tasks.

• Lesson 14 - Front-End Presentation

  In this module, students present their front-end projects. It allows them to practice their presentation and explanation skills, and highlights their achievements and learning progress during the course.

• Lesson 1 - Intro to APIs

  This lesson covers the basics of APIs (Application Programming Interfaces), including what they are, why they are important, and how to use them. Students will learn how to make HTTP requests, parse JSON data, and use APIs to retrieve and display data in their applications.

• Lesson 2 - Express JS + SQL Part 1

  In this lesson, students will learn how to build a REST API using Express JS and SQL. They will learn how to set up a database, define models, and create endpoints for CRUD (Create, Read) operations.

• Lesson 3 - Express JS + SQL Part 2

  This lesson continues from the previous one, where students will continue building the REST API using Express JS and SQL. They will learn how to create endpoints (Update, Delete) operations.

• Lesson 4 - JSON Web Token with Login API

  In this lesson, students will learn how to use JSON Web Tokens (JWT) for authentication. They will learn how to create and verify tokens, handle token expiration, and use JWT for secure communication between the client and the server.

• Lesson 5 - Twitter Clone Part 1 - Entity Relationship Diagram

  This lesson covers the design of the Twitter Clone, including the ERD (Entity Relationship Diagram) and the database schema. Students will learn how to set up a database, define models, and create endpoints for CRUD operations.

• Lesson 6 - Twitter Clone Part 2 - JWT

  In this lesson, students will learn how to add authentication to the Twitter Clone. They will learn how to use JWT for secure communication between the client and the server, handle user registration and login, and manage user sessions.

• Lesson 7 - Twitter Clone Part 3 - Likes Feature

  This lesson covers the implementation of the Likes feature in the Twitter Clone. Students will learn how to use Redux for state management, handle user interactions, and update the UI in real-time.

• Lesson 8 - Twitter Clone Part 4 - Redux

  In this lesson, students will learn how to use Redux for state management in the Twitter Clone. They will learn how to manage global state, handle actions and reducers, and use middleware for asynchronous operations.

• Lesson 9 - Firebase Auth with Twitter Clone

  In this lesson, students will learn how to use Firebase Authentication for user management in the Twitter Clone. They will learn how to handle user registration and login, manage user sessions, and secure their application.

• Lesson 10 - Firestore + No SQL with Twitter Clone

  This lesson covers the implementation of Firestore for No SQL data storage in the Twitter Clone. Students will learn how to define collections, documents, and fields, handle data validation, and use queries for retrieving data.

• Lesson 11 - Firebase Storage with Twitter Clone

  In this lesson, students will learn how to use Firebase Storage for file storage in the Twitter Clone. They will learn how to upload, download, and manage files, handle file metadata, and use security rules for access control.

• Lesson 12 - Testing with Counter App

  This lesson covers the basics of testing in React. Students will learn how to write unit tests, integration tests, and end-to-end tests for a Counter App. They will learn how to use tools for testing.

• Lesson 13 - CI/CD with Twitter Clone

  In this lesson, students will learn how to set up a CI/CD (Continuous Integration and Continuous Deployment) pipeline for the Twitter Clone. They will learn how to use tools for automated testing, building, and deployment.

• Lesson 14 - Web Hosting with Twitter Clone

  Focused on making a web application accessible online, this lesson teaches students about the various web hosting services and the steps involved in deploying the Twitter clone to a hosting provider.

• Lesson 15 - Full Stack Assessment

  Serving as the capstone assessment, this module evaluates the students' ability to integrate front-end, back-end, and database management skills in a full-stack application, culminating their learning experience.

• Lesson 1 - Brief of Final Capstone Project

  This lesson introduces the final Capstone project, providing an overview of the project's objective, scope, and the expected output from students. It sets the stage for a comprehensive application of the skills and knowledge acquired throughout the course.

• Lesson 2 - Responsive Design

  This lesson focuses on designing websites and applications that function well across various devices, from mobiles to desktops. It ensures students can create a seamless user experience, a critical aspect of modern web development.

• Lesson 3 - Understanding Big O Notation

  Students dive into Big O notation to understand the efficiency of code. This includes learning about constant time operations (O(1)), linear time tasks (O(n)), and efficient operations like binary searches (O(log n)), which are fundamental concepts in algorithm efficiency.

• Lesson 4 - Time and Space Complexity

  This module delves into measuring code efficiency not just by its speed (time complexity) but also by how much computer memory it uses (space complexity), a key consideration in optimising software performance.

• Lesson 5 - Simple Recursion

  Students unpack the concept of recursion, where functions call themselves to simplify complex problems. This is an important technique in software development for breaking down tasks into more manageable parts.

• Lesson 6 - Bubble Sort

  The lesson explores bubble sort, a technique for arranging items in order by swapping neighbouring items if they're out of sequence, providing a foundational understanding of sorting algorithms.

• Lesson 7 - Binary Search

  Students learn the binary search method, an efficient way to find items in sorted lists by continually halving the search area, a crucial technique for optimizing search functionality.

• Lesson 8 - Hash Table (Empty Object)

  This module covers hash tables, explaining how they allow for rapid storage and retrieval of data using unique keys, an essential concept in efficient data handling.

• Lesson 9 - Stacks

  Students learn about stacks, a collection type where items are added and removed from the top, analogous to stacking plates. Understanding stacks is important for certain data processing tasks in software development.

• Lesson 10 - Queue

  This lesson dives into queues, a collection type where items are added at the back and taken from the front, mimicking a real-life queue. It's a fundamental concept for managing data sequences in programming.

• Lesson 11 - Build Portfolio

  Students create a portfolio to showcase their projects and skills to potential employers, a critical step in transitioning into the professional world.

• Lesson 12 - How to Present & Mock Interview

  This module prepares students for the job market by practising technical presentation skills and undergoing simulated job interviews, equipping them with the confidence and skills needed for career success.

• Lesson 13 - Algorithm Test & Presentation

  In the final lesson, students tackle algorithm challenges and present their final Capstone project, demonstrating their comprehensive understanding and practical application of the skills learned throughout the course.

In addition to the core curriculum, we offer an optional self-paced bonus module. This self-paced module is designed for students who wish to further their learning beyond the required lessons. This module is not mandatory and does not affect the graduation requirements. It serves as an additional resource for students to explore and apply UI design concepts at their own pace.

• Lesson 1 - The Basics of UI Design

  This lesson covers the fundamental principles and elements of User Interface Design. Students will learn about the importance of user-centered design, the principles of visual design, and the role of UI within the broader context of User Experience (UX).

• Lesson 2 - Grid, Typography, Color, Gradient, and Shape

  An exploration of the core components that make up a user interface. This lesson delves into grid systems for layout, typographic principles for readability and brand expression, color theory for visual impact, gradients for depth and dimension, and the use of shape in guiding user interaction.

• Lesson 3 - Auto-Layout

  This lesson focuses on the dynamic aspect of UI design. Students will learn how to create flexible and responsive design layouts that adjust seamlessly to different screen sizes and orientations, enhancing the user experience across various devices.

• Lesson 4 - Button, Text Field, Icon, Photo, and Illustration

  This lesson is a practical dive into the creation and implementation of interactive elements. Students will gain hands-on experience designing buttons, text fields, icons, and integrating photos and illustrations that are both functional and aesthetically pleasing.

• Lesson 5 - Card, White Space, Tone of Voice, and Navigation

  An examination of how to effectively use cards in layout design, the strategic use of white space for clarity, the importance of tone of voice in UI copy, and best practices for designing intuitive navigation systems.

• Lesson 6 - Prototype

  The final lesson focuses on bringing the UI design to life. Students will learn the process of prototyping, which involves creating a preliminary model of the final product to test and refine the design before development.