PHYSICAL AND ONLINE Frontend BOOTCAMP

Frontend Training In Lagos Nigeria

Tech365 Frontend Development training is beginner-friendly, practical and project-based. It is designed to help participants become job-ready.

Register Now
Course Outline

* HTML

* CSS

* Tailwind

* JavaScript

* React

* Github

* Deployment

* HTML

* CSS

* Tailwind

* JavaScript

* React

* Github

* Deployment

2 Months

Duration

Physical/Online

Classes

Weekday/Weekend

Mon, Wed & Fri (Saturdays)

10am to 1pm (WAT) or 2pm to 5pm

Time

Benefits
Curriculum
FAQ
Fees
Our Training is Designed to make you job-ready

Software Projects We Will Build

In addition to the software development projects below, you will also be given resources to build others on your own.

Landing page

Use the HTML and CSS concepts that was learnt to design an responsive page.

DOM Manipulation

Create a functional frontend app that manipulate the DOM using JavaScript

Consume API with React

Fetch a data from a backend using API and render them with React

Figma to Code

Learn how to convert designs in Figma into code with HTML, CSS, andJavaScrip.

Animation

Learn how to add animation using keyframe, transition and animation with CSS.

Deployment

Learn how to make your app go live using GitHub and PaaS

Register Now
WHY TECH365

Training Benefits

Here are some of the benefits of learning at Tech365

  • Beginner-friendly
  • Project-based training
  • Excellent support
  • Job alerts
  • Career guidance
  • Certificate of completion
  • Flexible payment plan
  • Conducive learning environment
  • Unlimited internet access
  • Recommendation letter
Register Now
Curriculum

Software Development Course Outline

Module 1

Introduction and HTML

Understanding of how to render different HTML elements in the browser.

Introduction to software development

  • Full stack software development road-map
  • How the internet works
  • Project planning process
  • Installation and setup

Introduction to HTML

  • Advantages and limitations of HTML
  • HTML Comments
  • Basic HTML tags
  • HTML Elements
  • Heading
  • Paragraphs
  • Text Formatting
  • Quotations
  • Links
  • Images
  • Tables
  • Lists
  • Block and Inline Elements
  • Iframes
  • File Paths
  • Viewport meta tag

HTML Entities

  • Doctypes
  • HTML Attributes
  • Audio/Video

     Project: Designing job application page and Shopping cart page.

Register Now
Module 2

Cascading Stylesheet (CSS)

Understand how to style any page and create appealing user interfaces using CSS.

Introduction to CSS

  • What is CSS?
  • Benefits of CSS.

Basic Structure of CSS

  • Selector
  • Property
  • Value

CSS Selectors

  • Element Selector
  • Class Selector
  • ID Selector
  • Attribute Selector

CSS Properties and Values

  • Text Styling
  • font-family
  • font-size
  • font-weight
  • color
  • text-align
  • text-decoration

Box Model

  • width and height
  • margin
  • padding
  • border
  • box-sizing

Layout

  • display
  • position 
  • float

Backgrounds and Images

  • background-color
  • background-image
  • background-size
  • background-position
  •  

CSS Units

  • Absolute Units
  • Relative Units

CSS Media Queries

Flexbox

  • Flexbox Container

  • Main Axis

  • Cross Axis

    Flex Direction

  • row

  • row-reverse

  • column

  • column-reverse

    Flexibility

  • flex-grow

  • flex-shrink

  • flex-basis

    Alignment

  • justify-content

  • align-items

  • Ordering

CSS Grid

  • Grid properties
  • Grid column properties
  • Grid row properties
  • grid-template-rows
  • grid-template-columns
  • grid-gap
Module 3

Tailwind CSS

Ability to build different types of layouts Design web apps that are responsive Learn general techniques and best practices with TailwindCSS.

 Tailwind CSS outline

  • Introduction to Tailwind CSS
  • Why  Tailwind CSS?
  • Advantages of Tailwind CSS
  • Installation of tailwind css

     Layout

  • Container
  • Box Sizing
  • Display
  • Float
  • Clear
  • Object Fit
  • Object Position
  • Overflow

Flex

  • Flex Direction
  • Flex Wrap
  • Flex
  • Flex Grow
  • Flex Shrink
  • Order

 Tailwind CSS Grid

  • Grid Template
  • Columns
  • Grid Template
  • Rows
  • Gap

 Alignment

  • Justify Content
  • Justify Items
  • Justify Self
  • Align Content
  • Align Items
  • Align Self

Spacing

  • Padding
  • Margin
  • Space Between

 Sizing

  • Width
  • Min-Width
  • Max-Width
  • Height
  • Min-Height
  • Max-Height

     

Typography

  • Font Family
  • Font Size
  • Font Style
  • Font Weight
  • Letter Spacing
  • Line Height
  • List Style Type
  • Opacity
  • Text Alignment
  • Text Color
  • Text Opacity
  • Text Decoration
  • Text Transform 
  • Vertical Alignment
  • White space
  • Word Break

 Borders

  • Border Radius
  • Border Width
  • Border Color
  • Border Opacity
  • Border Style

 Effects

  • Box Shadow
  • Opacity

Tailwind Filters

  • Filter
  • Blur
  • Brightness
  • Contrast
  • Drop Shadow
  • Grayscale
  • Hue Rotate
  • Invert
  • Saturate
  • Sepia

Tables

  • Border Collapse
  • Table Layout

Transitions and Animation

  • Transition Property
  • Transition Duration
  • Transition Timing Function
  • Transition Delay

Transforms

  • Transform
  • Transform Origin
  • Scale
  • Rotate
  • Translate

Interactivity

  • Appearance
  • Cursor
  • Outline
  • Pointer Events
  • Resize
  • User Select
Register Now
Module 4

JavaScript

Get the skills and confidence to understand JavaScript. Follow a structured learning path to grow your skills more quickly. Work on real projects and build your portfolio.

    Introduction to JavaScript

  • Overview of JavaScript
  • Installing Code Editor
  • Developer console
  • Adding JavaScript into HTML
  • JavaScript Statements
  • Basic Syntax
  • Input and output
  • JavaScript Comments
  • Interaction: alert, prompt, confirm

     Variables in JavaScript

  • The use of variables?
  • JavaScript Let
  • JavaScript Const
  • JavaScript Reserved Words

     Data Types

  • Numbers
  • Strings
  • Boolean
  • Array
  • Objects
  • Null
  • Undefined

     JavaScript Operators

  • Arithmetic Operators
  • Assignment operators
  • Comparison Operators
  • JavaScript Unary Operators
  • Ternary Operator
  • Instanceof Operator

     Conditionals

  • If-else
  • Switch Case in JavaScript
  • Break and Continue
  • Type Conversion

     Loops in JavaScript

  • For Loop
  • While Loop
  • For-in Loop
  • Differences between for..in and for ..of

  Javascript functions

  • Inbuilt Functions
  • User-defined functions
  • Anonymous Functions
  • Functions as First-Class Citizens
  • Callback Functions
  • Higher order function (map, filter, reduce, find)
  • Understanding variable scopes in JavaScript
  • JavaScript Hoisting
  • JavaScript Strict Mode
  • this in JavaScript

Arrays in JavaScript

  • Basic Array Methods
  • sort() Method
  • Array Iteration Methods

     JavaScript Strings

  • JavaScript String Methods
  • How to sort strings in JavaScript?

Document Object Model (DOM)

  • Introduction to
  • Document Object Model
  • Select Element By Id
  • Select Elements By Name
  • Select Elements By Tag Name
  • Select Elements By Class Names
  • Select Element By CSS Selectors

Traversing elements

  • Get the Parent Element
  • Get Siblings of an Element
  • Get Children of an Element
  • Manipulating elements
  • Create Elements
    Append Child Nodes
    InnerHTML

     Javascript Form

  • How to Create a Form with the JavaScript?
  • Form validation 

 Event handling

  • Introduction to Events
  • Page Load Events
  • The onLoad Event
  • The DOMContent
  • Mouse Events
  • Keyboard Events
  • Scroll Events

     Storing data in the browser

  • Cookies
  • LocalStorage
  • sessionStorage

     ES6

  • Template Literals
  • Object Literal Syntax 
  • Default Parameters
  • Rest Parameters
  • Spread Operator
  • Destructuring

     Module

  • What is the arrow function
  • Importing and
  • Exporting Modules


Asynchronous JavaScript

  • Promises
  • Async/await

     Error Handling

  • try…catch try…catch…finally
  • Throw an Exception
Register Now
Module 5

React JS

Build powerful, fast, user-friendly and reactive web apps with React

Introduction to React

  • What is React JS?
  • Why use React instead of JavaScript
  • Project Overview
  • Roadmap

React Setup

  • Environment Setup
  • Creating New Project
  • Analyzing Project Structure

React basics and components

  • Components & Why React is Component-Based?
  • JSX
  • React Elements
  • Building Component
  • Styling Components
  • Dynamic Data in components
  • Passing data using Props

State and event handling

  • Handling Events in React
  • Why are States required?
  • useState() Hook
  • Form Handling
  • Handling form Submission

Contents conditional rendering

  • Rendering of List
  • Importance of key attribute
  • Conditional Statements & Output

Multipage Single page application with react-router

  • Introduction to routIng
  • What is Routing, how it works & installation
  • Basic Routing
  • Link and NavLink
  • Dynamic Routes
  • Nested Routes
  • Redirection and Not Found Page

Global state management with context

  • What is React Context?
  • React context vs Redux
  • When to use React Context?
  • Application of react context

  • Deployment

    • Steps to create a production build
    • Hosting your application online
Register Now
Module 6

TypeScript

Typescript helps to catch potential errors during development. By specifying types for variables, parameters, and return values, you improve code clarity and enable the TypeScript compiler to provide more accurate feedback.

Introduction to TypeScript
What is TypeScript?
Benefits of TypeScript over JavaScript
Setting up TypeScript: Installation and Configuration (tsc, tsconfig.json)
Transpiling TypeScript to JavaScript

Basic Types
Primitive Types: string, number, boolean
Special Types: any, unknown, void, null, undefined, never
Arrays and Tuples
Enums (enum)

Type Annotations and Type Inference
Explicit Type Annotations
Type Inference
Best Practices with Type Inference

Functions
Typing Function Parameters and Return Values
Optional and Default Parameters
Rest Parameters
Function Overloading

Interfaces
Defining Interfaces
Optional and Readonly Properties
Extending Interfaces
Function Types with Interfaces

Classes
TypeScript Classes
Access Modifiers: public, private, protected
Read-only Properties
Static Properties and Methods
Abstract Classes

Advanced Types
Union and Intersection Types
Literal Types
Type Aliases
Type Assertions
Nullable Types (strictNullChecks)

Generics
Generic Functions
Generic Classes
Generic Constraints (extends)
Built-in Utility Types (Partial<T>, Readonly<T>, etc.)

Modules
Importing and Exporting
Default Exports vs Named Exports
Working with External Libraries (@types)

Decorators
Introduction to Decorators
Class Decorators
Method Decorators
Property and Parameter Decorators

TypeScript with JavaScript Features
Working with ES6+ Features in TypeScript
Destructuring and Spread/Rest Operators
Promises and Async/Await
Template Literals

Error Handling
Compile-Time vs Runtime Errors
Catching Errors with try/catch
Custom Error Classes

Using TypeScript with React

Register Now
Module 7

Next JS

NextJS helps you to improve performance, SEO-friendliness, easy development and deployment.

Introduction to Next.js
What is Next.js?
Benefits of Using Next.js
Difference Between Next.js and React.js
Installing and Setting Up a Next.js Project

Routing
File-based Routing
Dynamic Routes
Catch-All Routes and Optional Catch-All Routes
Nested Routes
Custom 404 Page

Page and Component Structure
Pages Directory and Automatic Routing
Creating and Using React Components
Layouts (Reusable Page Wrappers)
The App Component (_app.js or _app.tsx)
The Document Component (_document.js or _document.tsx)

Static Site Generation (SSG)
Overview of Static Site Generation
Using getStaticProps
Using getStaticPaths for Dynamic SSG
Incremental Static Regeneration (ISR)
Revalidation of Static Content

Server-Side Rendering (SSR)
Overview of Server-Side Rendering
Using getServerSideProps
When to Use SSR vs SSG

Client-Side Rendering (CSR)
Fetching Data on the Client Side
Using React Query or SWR for Data Fetching
State Management Context API

API Routes
Introduction to API Routes in Next.js
Creating API Endpoints
Handling HTTP Methods (GET, POST, PUT, DELETE)
Middleware in API Routes
Dynamic API Routes

Styling in Next.js
CSS Modules
Global CSS
Styled JSX
Tailwind CSS Integration

Middleware
Overview of Middleware
Creating and Using Middleware in Next.js
Use Cases 

Authentication and Authorization
Overview of Authentication Methods
Protecting Routes and API Endpoints

Database Integration
Connecting to MongoDB,
Fetching Data from External APIs

Deployment
Deploying to Vercel 

Error Handling
Custom Error Pages (_error.js)
Handling API Errors
Graceful Fallbacks with getStaticProps and getServerSideProps

SEO and Metadata
Using the next/head Component for Metadata
Server-Side SEO vs Client-Side SEO
Optimizing Pages for Search Engines
Open Graph and Social Sharing Tags

Static File Serving
Public Folder for Static Assets
Best Practices for Serving Static Files
Adding Custom Headers and Caching

Register Now
Module 6

Version Control with Git And Github

Introduction to Version control

  • Overview of Version Control Systems (VCS)
  • Importance of Version Control in DevOps

Introduction to GitHub

  • Overview and Features of Github
  • Benefits of Github in DevOps Workflows

Getting Started with GitHub

  • Creating a GitHub Account
  • Installing git
  • Configuring Profile Settings

Git operation

  • Initializing git for a project
  • Adding files to be committed
  • Committing files to the staging area

GitHub Basics

  • Creating a repository
  • Connecting to the remote repository
  • Pushing files to git
Deployment
Module 7

AI and Software Development

How to leverage AI as a DevOps engineer

  • Generating code with AI
  • Troubleshooting with AI
  • Using AI to increase productivity
  • Staying relevance despite AI porpularity
Module 6

Version Control with Git And Github

Introduction to Version control

  • Overview of Version Control Systems (VCS)
  • Importance of Version Control in DevOps

Introduction to GitHub

  • Overview and Features of Github
  • Benefits of Github in DevOps Workflows

Getting Started with GitHub

  • Creating a GitHub Account
  • Installing git
  • Configuring Profile Settings

Git operation

  • Initializing git for a project
  • Adding files to be committed
  • Committing files to the staging area

GitHub Basics

  • Creating a repository
  • Connecting to the remote repository
  • Pushing files to git
Deployment
Module 7

AI and Software Development

How to leverage AI as a DevOps engineer

  • Generating code with AI
  • Troubleshooting with AI
  • Using AI to increase productivity
  • Staying relevance despite AI porpularity
Register Now
Google Review from over 80 students

Student Feedback

I attended Tech365. One of the key strengths of the training was its structured approach to covering complex concepts. The content was well-organized, starting from foundational knowledge and gradually delving into more advanced topics. This approach ensured that participants with varying levels of expertise could benefit from the training, making it accessible and engaging for everyone involved.

Dongo Cornelius

Tech365 is an ideal place for learning new skills in Information Technology. The teaching environment is great. The lecturers are very knowledgeable and are so willing to impart knowledge with patience and humour. My experience was so pleasant that I would love to go back and get an additional skill of interest.
I recommend Tech365 to anyone thinking of acquiring IT skills in an excellent and helpful environment.

Abiodun Adewodu

The in-depth teaching, and in relation to real-life applications, exploring different hands-on projects made it indeed brain-tasking and worthwhile. The patient and grounded tutors and most especially the patience in follow-ups even after the training period makes them an exceptional data school as this is really rare. The recommendations for opportunities and the community of like minds are absolutely commendable too.

Confidence Joseph

Tech 365 offers insightful and informative teachings. The courses are broken down in a way that even a layperson can easily understand. Everyone is made to see that tech can be simplified. I used to find tech-related courses quite challenging, and I struggled hard trying to learn it myself, but since joining Tech 365, I’ve discovered that it’s not as difficult as I expected. I can confidently say that you get real value for the money you invest.

Emmanuella Omolade

Tech365 is a great place to start from Novice to Ninja! There is no wuruwuru to the answer; The instructor takes you from the simplest example to the complex one solving them as simple as it could be. For every challenge encountered; it becomes another learning curve for knowledge. I will definitely recommend Tech365 who want solid background knowledge or a career shift in ICT. Thank you.

Oluwaseun Popoola

Training Fees

Frontend Development

Covers HTML, CSS, JavaScript, React. 2 Months

N400,000

$400

Register Now

Advanced Frontend

Covers HTML, CSS, JavaScript, React, TypeScript, NexJs. 3 Months

N700,000

$700

Register Now

Frontend & Mobile App

Covers all the frontend Modules, dart and flutter. 5 months

N1,000,000

$1000

Register Now

Frequently Asked Questions (FAQs)

No prior programming experience is required. Our training approach is beginner friendly, and we work on several real world projects to help our student have deeper understanding of each module. However, you need to know how to operate the computer efficiently. 

We have weekend class for those who cannot attend the weekday class. 10am to 2pm or 2pm to 5pm (Nigerian Time)

You can pay N200,000 at the beginning of each month to attend the training.

Yes, it is recommended you come with your own laptop as it will help you to practice whatever you are learning. However, we provide laptop that can be used only within our premises if need be.

Depending on your budget, Core i7, 16 GB ram with SSD is best.

However, core i3 or i5 with 4gb or 8gb ram HDD will also work fine.

It can be HP, DELL, Mac or any other brand.

Yes. In fact, this is our strength. We are committed to supporting our students to ensure they succeed. You will be added to our WhatsApp group to connect with others and also ask questions.

We don’t guarantee job after the training. However, we share job alerts from time to time on available vacancies and tips that can help our students get job faster. We also offer CV review, LinkedIn profile optimization and letter of recommendation to diligent students.

All our training are physical at our Ikeja office. However, those who are outside Nigeria or living far can join online. Who join our classes from Canada, The UK, USA, UAE, Finland etc.

Yes. Tech365 was established to bridge the practical knowledge that people are lacking to secure a job. Hence, we focus on making the class beginner friendly with lots of projects to help the participants master the skill.

We issue a certificate of completion after the training. If you are interested in certification, you can pay to take certification exam by international bodies online.

You can chat with our representation using the WhatsApp chat button on our website or call the phone number at the top or bottom of this page. You can also click the register button on this page to show your interest and one of our team will reach out to you.

We don’t compete based on price. Our fees is based on the value we offer. If you want a place that will give you in-depth knowledge and value for your money, you are in the right place. Our past students are glad to learn from us as our training is hands-on and designed to make you job-ready. You can check what over 80 of our students had to say about our training on our Google review page.

Register Now

Our Students Work at

devops engineering training bootcapmp Lagos Nigeria