Frontend Development

Frontend Development

Our training sessions are meticulously planned by our trainer and are designed in a manner geared toward the maximisation of efficiency. Your time is valuable, so our goal is to best prepare you while taking up the least amount of your time possible.

TRAINING SCHEDULE

 9-Week Backend Development Training Module (Node.js & JavaScript)

Delivery Methodology:

This course is available in virtual modes.

 

 

 

 

 

 

 

 

Course Content

HTML, CSS Basics & Layouts

HTML Basics:

  • Structure of an HTML document
  • Common tags: headings, paragraphs, lists, links
  • Semantic HTML: `<header>`, `<footer>`, `<article>`, `<section>`
  • HTML Forms and Multimedia: `<form>`, `<input>`, `<textarea>`, `<select>`, `<img>`, `<audio>`, `<video>`
  • Accessibility basics (alt text, ARIA roles)

CSS Fundamentals:

  • CSS syntax, selectors (element, class, ID)
  • Box model: margin, border, paddingStyling text, colours: fonts, backgrounds

CSS Layout Techniques:

  • Display properties: block, inline, flexbox
  • Responsive design basics: media queries
  • CSS Grid introduction

JavaScript Basics & DOM Manipulation

Introduction to JavaScript

  • Role of JavaScript in web development
  • Basic syntax: variables, data types, operators, console logs
  • Control structures: `if`, `else`, `switch`, `for`, `while`

Functions:

  • Declaring functions, parameters, return values

DOM Manipulation:

  • Understanding the DOM and selecting elements (`getElementById`, `querySelector`)
  • Modifying content and styles with JavaScript

Advanced JavaScript & ES6 Features

JavaScript Advanced Concepts:

  •  Objects and arrays
  • ES6 features: arrow functions, destructuring, template literals

Asynchronous JavaScript:

  • Introduction to Promises and async/await
  • Handling API requests with `fetch`

React Fundamentals

What is React?

  • Component-based architecture
  • Setting up a React environment (Create React App)
  • Creating components (functional and class components)

JSX and Props:

  • Understanding JSX syntax
  • Passing props to components

React State, Lifecycle & Event Handling

 State and Lifecycle:

  • Managing state in React components using `useState` and class component state
  • Component lifecycle methods

Event Handling in React:

  • Handling events in React (e.g., `onClick`, `onChange`)
  • Controlled vs uncontrolled components
  • Form handling in React

React Hooks & Advanced Concepts

React Hooks:

  • Introduction to `useState`, `useEffect`
  • State management with hooks

Advanced React:

  • Context API (useContext) for global state management
  • Optimizing performance with `useMemo` and `useCallback`
  • Error boundaries

Next.js Fundamentals

Introduction to Next.js:

  •   What is Next.js and why use it?
  • Setting up a Next.js project
  • Pages and routing in Next.js

Data Fetching in Next.js:

  •   Static Generation (`getStaticProps`)
  • Server-Side Rendering (`getServerSideProps`)
  • API Routes in Next.js

Styling in Next.js & Deployment

Styling in Next.js:

  •  Global CSS vs. module CSS
  • Styled-components or CSS-in-JS libraries
  • Responsive design techniques

 Deployment and Best Practices:

  •   Deployment with Vercel/Netlify
  • Optimizing for production (performance, caching, SEO)

Capstone Project & Advanced Topics

Capstone Project:

  • Plan and implement a full-stack project using React and Next.js
  • Implement routing, data fetching, forms, and deployment

Advanced Topics:

  •  Authentication and Authorization in Next.js
  • Dynamic routes and API integration
  • Internationalization (i18n) and SEO best practices

Additional Recommendations

  • Practice: After each week, dedicate time to building mini-projects or exercises to reinforce what you’ve learned.
  • Project Showcase: Aim to showcase your capstone project on GitHub or a live demo to highlight your skills in React and Next.js.

This schedule covers the essential topics for front-end development in a fast-paced, progressive way while leaving room for hands-on practice and a capstone project.

Online Class

For Individual

N50K
Course Enquiry

Date: Our maiden class commences on 1st and 2nd of February, 2025 for the Front End and Back End Trainings respectively.2025.