Skip to main content

Frontend(React)

Become a Frontend Master with React: A Hands-On Learning Journey​

Embark on a transformative journey into the realm of frontend development with our immersive 3-month program. Crafted to empower you with practical skills and confidence, "Become a Frontend Master with React" offers a dynamic approach to learning. Dive into real-world projects, receive expert mentorship, and unlock endless possibilities in the ever-evolving world of web development.

What is Frontend?​

Frontend development is the art of sculpting user experiences on websites and web applications. From captivating designs to seamless interactions, frontend developers breathe life into digital interfaces, ensuring they are both functional and engaging.

What Do Frontend Developers Do?​

  • Build User Interfaces: Transform designs into interactive web pages using HTML, CSS, and JavaScript.
  • Create Seamless Experiences: Ensure websites are responsive, intuitive, and accessible across all devices.
  • Collaborate and Innovate: Work alongside designers and backend developers to bring ideas to fruition and integrate data seamlessly.
  • Stay Ahead: Embrace new technologies and continuously evolve your skill set to stay ahead of the curve.

Why React?​

React stands as a beacon in modern web development. Its component-based architecture streamlines development, making it efficient, reusable, and easy to manage. Widely embraced by industry leaders, React opens doors to exciting career opportunities.

Our Approach: Learn by Doing​

3-Month React and Ecosystem Course Syllabus

Month 1: Foundations​

Week 1: Understanding How the Web Works​

Module 1 (Lecture): Introduction to the Internet and the Web
  • How the Internet works
  • How web browsers and servers communicate (HTTP/HTTPS)
Module 2 (Lecture): Domain Names, DNS, and Hosting
  • Understanding domain names and DNS
  • Basics of web hosting
Module 3 (Project Day): Practical Application
  • Create a simple web page explaining how the web works

Alternative Activities:

  • Write a technical blog post summarizing the week's topics
  • Visit a local business to discuss how they use web technology
  • Career advice session with a local tech professional

Week 2: HTML Basics​

Module 4 (Lecture): Introduction to HTML
  • Basic HTML structure
  • Common HTML elements (headings, paragraphs, links, images)
Module 5 (Lecture): Forms and Tables
  • Creating forms and handling form submissions
  • Structuring data with tables
Module 6 (Project Day): Hands-On Practice
  • Build a web page with a form and table displaying some data

Alternative Activities:

  • Write a technical blog post about HTML elements
  • Group discussion on how HTML is used in different websites

Week 3: CSS Basics​

Module 7 (Lecture): Introduction to CSS
  • Basic syntax and selectors
  • Applying styles to HTML elements
Module 8 (Lecture): Box Model and Layouts
  • Understanding the box model
  • Creating layouts with flexbox and grid
Module 9 (Project Day): Styling Practice
  • Style the previously created web page with CSS

Alternative Activities:

  • Write a blog post on CSS basics
  • Visit a local business to see how they design their web pages
  • Group discussion on best practices in CSS

Week 4: JavaScript Basics​

Module 10 (Lecture): Introduction to JavaScript
  • Variables, data types, and operators
  • Basic control structures (if-else, loops)
Module 11 (Lecture): Functions and Events
  • Defining and invoking functions
  • Handling events in JavaScript
Module 12 (Project Day): Interactive Web Pages
  • Add JavaScript to make the form interactive

Alternative Activities:

  • Write a technical blog post about JavaScript basics
  • Career advice session with a local JavaScript developer

Month 2: Git, GitHub, and React Basics​

Week 5: Git and GitHub​

Module 13 (Lecture): Introduction to Git
  • Installing and configuring Git
  • Basic Git commands (init, add, commit, push, pull)
Module 14 (Lecture): Working with GitHub
  • Creating and cloning repositories
  • Branching and merging
Module 15 (Project Day): Version Control Practice
  • Create a repository and practice Git commands

Alternative Activities:

  • Write a blog post about the importance of version control
  • Group discussion on how Git and GitHub are used in team projects

Week 6: Introduction to React​

Module 16 (Lecture): Setting Up React
  • Installing Node.js and npm
  • Creating a React app with Create React App
Module 17 (Lecture): JSX and Components
  • Understanding JSX syntax
  • Creating and using functional components
Module 18 (Project Day): Simple React Component
  • Create a simple React component and render it

Alternative Activities:

  • Write a blog post introducing React and JSX
  • Group discussion on the benefits of using React

Week 7: React Components and Hooks​

Module 19 (Lecture): Advanced Component Concepts
  • Component lifecycle methods
  • Class components vs functional components
Module 20 (Lecture): React Hooks
  • Introduction to hooks (useState, useEffect)
  • Building custom hooks
Module 21 (Project Day): Hooks in Action
  • Create a React component using hooks

Alternative Activities:

  • Write a blog post on React hooks
  • Career advice session with a local React developer

Week 8: React Router and Redux​

Module 22 (Lecture): React Router
  • Setting up React Router
  • Creating navigable routes
Module 23 (Lecture): Redux Basics
  • Introduction to Redux
  • Creating a Redux store and actions
Module 24 (Project Day): Routing and State Management
  • Implement routing and manage state with Redux

Alternative Activities:

  • Write a blog post about React Router or Redux
  • Group discussion on state management in React applications

Month 3: Advanced React and APIs​

Week 9: Advanced Redux and Middleware​

Module 25 (Lecture): Redux Middleware
  • Understanding middleware (redux-thunk, redux-saga)
  • Handling asynchronous actions with middleware
Module 26 (Lecture): Advanced State Management
  • Normalizing state
  • Structuring large applications with Redux
Module 27 (Project Day): Middleware Implementation
  • Integrate middleware in the Redux setup

Alternative Activities:

  • Write a blog post on using middleware with Redux
  • Group discussion on advanced state management techniques

Week 10: Working with APIs​

Module 28 (Lecture): Fetching Data with Fetch API and Axios
  • Making HTTP requests with Fetch API
  • Using Axios for more advanced requests
Module 29 (Lecture): Handling API Responses
  • Parsing and displaying data from APIs
  • Error handling and loading states
Module 30 (Project Day): API Integration
  • Create a React component that fetches and displays data from an API

Alternative Activities:

  • Write a blog post on integrating APIs with React
  • Career advice session with a local developer experienced in APIs

Week 11: Project Week 1​

Module 31 (Lecture): Planning the Project
  • Defining project scope and requirements
  • Setting up the project structure
Module 32 (Lecture): Implementing Core Features
  • Building core components and integrating Redux
Module 33 (Project Day): Progress Check
  • Continue building the project, review progress, and troubleshoot issues

Alternative Activities:

  • Group discussion on project progress and challenges
  • Visit a local business for project idea validation

Week 12: Project Week 2 and Deployment​

Module 34 (Lecture): Finalizing the Project
  • Completing remaining features and fixing bugs
  • Code reviews and refactoring
Module 35 (Lecture): Preparing for Deployment
  • Optimizing the app for deployment
  • Deploying the React app to a platform like Vercel, Netlify, or GitHub Pages
Module 36 (Project Day): Project Presentation and Review
  • Present the final project
  • Review and discuss lessons learned

Alternative Activities:

  • Group discussion on project outcomes and future improvements
  • Career advice session with local tech professionals

Invest in Your Future​

  • Course Price: ₦30,000 ₦50,000 (discounted price for the first 5 students)

Act Now! Limited Seats Available!​

Don't let the opportunity slip away! Seize your chance to become a frontend master with React today. Join our program and be part of an exclusive cohort of aspiring developers. With limited seats available and a special discount reserved for the first 5 students, act fast before it's too late!

We Understand Your Challenges​

At GeekInk and our partners, we recognize the obstacles posed by limited access to reliable power supply and internet connectivity. That's why we're committed to providing you with an equipped lab, fully conducive to an effective learning experience, ensuring that nothing hinders your path to mastering frontend development.