Join Our Whatsapp Community

Frontend Development

Master Frontend with our comprehensive training course! Learn from industry experts, enhance your coding skills, and build robust applications. Perfect for beginners and experienced developers aiming to excel.

  • Duration: 3 months
  • Delivery Type: Delivery Type: Online/2hrs/3 classes a week
  • Weekdays: To be communicated
  • Time: 9am - 11am (WAT) or 1am - 3am
Contact an Advisor Register Now
PRACTICAL AND JOB-READY DATA ANALYSIS MODULES

Modules Covered

HTML

View topics
bg

CSS

View topics
bg

Tailwind

View topics
bg

JavaScript

View topics
bg

Git

View topics
bg

Understanding HTML

Introduction to HTML

  • Understanding HTML
  • Setting Up the Environment
  • First HTML Document
  • Text Elements
  • Formatting Text
  • Lists
  • Hyperlinks
  • Images

HTML Tables, Forms and Semantic Elements

  • Basic Table Structure
  • Advanced Table Elements
  • Form Basics
  • Form Elements
  • Form Attributes and Validation
  • Introduction to HTML5
  • Structural Elements
  • Media Elements

HTML Attributes and Global Attributes and Advance Techniques

  • Core Attributes
  • Global Attributes
  • Embedding Content
  • Responsive Design Basics
  • Accessibility Considerations
Register Now

Cascading Style Sheet(CSS)

Introduction to CSS

  • CSS Basics
  • What is CSS?
  • Definition and purpose
  • History and evolution of CSS
  • Including CSS in HTML
  • Inline, internal, and external styles
  • The <style> tag and <link> element
  • Basic Syntax and Selectors
  • CSS syntax: selectors, properties, and values
  • Types of selectors: element, class, ID

Advanced Selectors and Styling Techniques

  • Advanced Selectors
  • Attribute Selectors
  • Syntax and examples
  • Pseudo-classes and Pseudo-elements
  • Hover, focus, active, first-child, and last-child
  • Before, after, first-letter, and first-line
  • Combining Selectors
  • Descendant, child, adjacent sibling, and general sibling selectors

Responsive Design and Advanced Concepts

  • Responsive Design
  • Media Queries
  • Syntax and usage
  • Breakpoints and responsive design principles
  • Fluid Layouts
  • Percentages, viewport units (vw, vh), and max-width
  • Responsive Images and Typography
  • Using srcset and sizes attributes
  • Responsive fonts with em and rem units
Register Now

Tailwind CSS

Getting Started With Tailwind CSS

  • What is Tailwind CSS?
  • Overview of Tailwind CSS
  • Differences between Tailwind CSS and other CSS frameworks
  • Benefits of using Tailwind CSS
  • Setting Up Tailwind CSS
  • Installing Tailwind CSS via npm/yarn
  • Setting up Tailwind CSS with different build tools (Webpack, Parcel)
  • Using Tailwind CLI
  • Understanding the Utility-First Concept
  • Explanation of utility-first CSS
  • Comparing utility-first with traditional CSS approaches
  • Real-world examples of utility-first usage

Core Concepts and Utilities

  • Lesson 2.1: Tailwind's Utility Classes
  • Overview of common utility classes (spacing, colors, typography)
  • Practical examples and exercises
  • Lesson 2.2: Responsive Design with Tailwind
  • Understanding breakpoints in Tailwind CSS
  • Using responsive utility classes
  • Building responsive layouts
  • Lesson 2.3: Customizing Tailwind
  • Configuring the `tailwind.config.js` file
  • Adding custom colors, spacing, and other utilities
  • Extending Tailwind with plugins

Building Layouts with Tailwind CSS

  • Flexbox Utilities
  • Understanding flexbox concepts
  • Using Tailwind's flexbox utility classes
  • Building flexible layouts
  • Grid Utilities
  • Understanding CSS Grid
  • Using Tailwind's grid utility classes
  • Creating complex grid layouts
  • Positioning and Alignment
  • Utility classes for positioning (relative, absolute, fixed)
  • Alignment and justification utilities
  • Practical examples
Register Now

JavaScript

Introduction to JavaScript

  • What is JavaScript?
  • Setting Up the Development Environment
  • Writing Your First JavaScript Program
  • Variables and Data Types
  • Operators
  • Control Structures
  • Functions

Intermediate JavaScript

  • Objects and Arrays
  • The Document Object Model (DOM)
  • ES6+ Features
  • Error Handling

Advanced JavaScript

  • Asynchronous JavaScript
  • Working with APIs
  • Object-Oriented Programming (OOP)
  • Advanced Functions
  • Browser Events
  • Web Storage
  • Working with Forms
  • Introduction to Web Components
Register Now

React Js

Getting Started With React

  • What is React?
  • History of React
  • Advantages of using React
  • Setting Up the Development Environment
  • Installing Node.js and npm
  • Setting up a React project with Create React App
  • Understanding the project structure
  • JavaScript ES6+ for React
  • let, const, and var
  • Arrow functions
  • Template literals
  • Destructuring
  • Spread and Rest operators
  • Modules and Imports

React Core Concepts

  • JSX - JavaScript XML
  • What is JSX?
  • Embedding expressions in JSX
  • JSX and React components
  • Components
  • Functional Components
  • Class Components
  • Component lifecycle (class components)
  • Stateless vs Stateful Components
  • Props and State
  • Understanding Props
  • Passing data through Props
  • Understanding State
  • Managing State in Class and Functional Components
  • Event Handling
  • Handling events in React
  • Synthetic Events
  • Binding event handlers
  • Passing arguments to event handlers

Advanced React Concepts

  • React Hooks
  • Introducing Hooks
  • useState
  • useEffect
  • Custom Hooks
  • Other hooks (useReducer, useContext)
  • React Context API
  • Context creation
  • Provider and Consumer
  • useContext hook
  • React Router
  • Setting up React Router
  • Route, Link, and BrowserRouter
  • Dynamic Routing
  • Nested Routes
  • State Management
  • Lifting State Up
  • Context API for state management
  • Redux
  • Redux Toolkit

Styling and Component Libraries

  • Styling in React
  • CSS and Inline styles
  • CSS Modules
  • Styled Components
  • UI Component Libraries
  • Introduction to Material-UI
  • Using Ant Design
  • Bootstrap with React

Building and Deploying React Applications

  • Forms and Form Handling
  • Controlled vs Uncontrolled components
  • Handling form submissions
  • Form validation
  • Fetching Data
  • Fetch API
  • Axios
  • Handling Promises
  • Async/Await
  • Performance Optimization
  • React Performance Tools
  • Code splitting
  • Lazy Loading
  • Memoization (React.memo, useMemo, useCallback)

Testing in React

  • Testing in React
  • Introduction to Jest
  • Testing Library (React Testing Library)
  • Snapshot testing
  • Unit and Integration testing
  • Deploying React Applications
  • Building for production
  • Deployment options (Netlify, Vercel, GitHub Pages, Heroku)
  • Continuous Integration/Continuous Deployment (CI/CD)
Register Now

Version Control and Git

Introduction to Version Control and Git

  • What is version control?
  • Benefits of version control systems
  • Introduction to Git
  • What is Git?
  • Installing Git
  • Setting up Git (configuring username and email)
  • Basic Git Commands
  • Initializing a repository
  • Cloning a repository
  • Checking the status of a repository
  • Understanding Git Repositories
  • Working directory, staging area, and local repository
  • The .git directory
  • Configuring Git
  • Setting global and local configurations

Working with Commits

  • Making Changes
  • Adding files to the staging area
  • Committing changes
  • Writing good commit messages
  • Viewing Commit History
  • Viewing commit logs
  • Understanding commit hashes
  • Viewing differences between commits
  • Undoing Changes
  • Undoing changes in the working directory
  • Removing files from the staging area
  • Amending the last commit

Branching and Merging

  • Understanding Branches
  • What are branches?
  • Benefits of using branches
  • Working with Branches
  • Creating and switching branches
  • Renaming and deleting branches
  • Merging Branches
  • Merging changes
  • Handling merge conflicts
  • Resolving merge conflicts

Remote Repositories

  • What are remote repositories?
  • Adding a remote repository
  • Fetching and pulling changes
  • Pushing changes
  • Collaborating with Others
  • Forking a repository
  • Creating and reviewing pull requests
Register Now

Course Fees

Frontend Development

Cover every aspect of frontend modules

N350, 000

$450

2 Months

Enroll Now

Frequently Asked Question

Q1. Why should I take your training?

Q2. How can I start?

Q3.Is the training practical and suitable for beginners?

Q4. Can I participate in the training programs remotely?

Q5. Is it necessary to bring my own laptop for the training?

Q6. Can working-class people take the training?

Q7. Is there installmental payment?

Q8. Will I receive a certificate after the training?

Q9. Do you provide support after the training?

Q10. Can I expect immediate job placement upon completing the training?