Training Details

8 Weeks

10am to 1pm (Morning class) 2pm to 5pm (Afternoon) Weekdays (Mon, Wed, Fri) Weekends (Sat)

1st Floor, Nikky Africana Plaza, 70c Allen Avenue, Obasa Close, Opp UBA, Ikeja, Lagos
N300,000
2348029704730

Frontend Development Training In Lagos Nigeria

Our frontend development training is beginner-friendly, practical and project-based. It is designed to help participants gain mastery of different technologies and tools that are used to build functional websites and interfaces. It is tailored to help you gain real-world experience that can get you a job and grow your career.

Who should attend

  • Those who are switching career to tech industry.
  • Those who have programming skills but want to take their skill to next level with hands-on projects in order to get promotion or higher paying jobs
  • Those planning to travel abroad and seeking hands-on skill that can make them relevant.
  • Those in managerial position seeking to have knowledge of how software is built

Technologies covered

Learning outcomes

Real-World Project

Build any of the following fronend design only - ecommerce, admin dashboard, online course, fintech platform, bitcoin platform design etc

Frontend project

Ability to turn a UI design with figma or other tools into code using HTML, CSS, tailwind, Javascriot and React

Collaboration

Learn how to collaborate with other software developers on source code management and version control. Deployment to an online server.

Career Positioning

CV review, interview preparation, LinkedIn profile update, job alert within our alumni community and mentorship

Course Curriculum

Introduction to software development

      Introduction and onboarding

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

HTML and the browser

     Overview of 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 for Responsive Web Design

     

HTML Entities

  • Charsets
  • URL Encoding
  • HTML Tags
  • Doctypes
  • HTML Attributes
  • Audio/Video

     Project: Designing job application page and Shopping cart page.

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

CSS (Cascading Style Sheets)

     Introduction to CSS

  • Benefits of CSS
  • How to add CSS to HTML
  • Code commenting in CSS
  • Applying Colors
  • Background Styling
  • CSS Borders
  • Margins and Padding
  • Height and Width
  • Box model
  • Outline in CSS
  • Text Formatting
  • Fonts styling
  • Using Icons
  • Linking pages, buttons and images
  • Lists
  • Tables

     

CSS Properties

  • Overflow
  • Float
  • Align
  • Combinators
  • Pseudo-classes
  • Pseudo Elements
  • Opacity / Transparency
  • DropDowns
  • Styling Forms
  • Website Layout
  • CSS Units
  • Specificity
  • CSS Properties
  • CSS Selectors

     Project: Designing a landing page with HTML and CSS

     Task: Design a personal portfolio page

     Key takeaway: Creating different types of frontend application with HTML and CSS

Tailwind CSS

     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
  • Overscroll Behavior
  • Position
  • Top/Right/Bottom/Left
  • Visibility
  • Z-index

     Flexbox

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

     Tailwind CSS Grid

  • Grid Template
  • Columns
  • Grid Column Start / End
  • Grid Template
  • Rows
  • Grid Row Start / End
  • Grid Auto Flow
  • Grid Auto Columns
  • Grid Auto Rows
  • Gap

     Alignment

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

     Spacing

  • Padding
  • Margin
  • Space Between

     Sizing

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

     Typography

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

     

  • Backgrounds

  • Background Image
  • Background Clip
  • Background Color
  • Background
  • Opacity
  • Background
  • Position
  • Background
  • Repeat
  • Background Size
  • Gradient Color
  • Stops

     Borders

  • Border Radius
  • Border Width
  • Border Color
  • Border Opacity
  • Border Style
  • Divide Width
  • Divide Color
  • Divide Opacity
  • Divide Style
  • Ring Width
  • Ring Color
  • Ring Opacity
  • Ring Offset Width
  • Ring Offset Color

     Effects

  • Box Shadow
  • Opacity

    Tailwind Filters

  • Filter
  • Blur
  • Brightness
  • Contrast
  • Drop Shadow
  • Grayscale
  • Hue Rotate
  • Invert
  • Saturate
  • Sepia
  • Backdrop Filter
  • Backdrop Blur
  • Backdrop
  • Brightness
  • Backdrop Contrast
  • Backdrop
  • Grayscale
  • Backdrop Hue
  • Rotate
  • Backdrop Invert
  • Backdrop Opacity
  • Backdrop Saturate
  • Backdrop 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

    SVG

  • Fill
  • Stroke
  • Stroke Width

     Project
Design a modern landing page with tailwind
Convert Figma design to the actual web app using tailwind

     Personal project: Design a web app for a Fintech company or other industry using tailwind

     Key takeaway:
Ability to build different types of layout
Design web apps that are responsive
Learn general techniques and best practice

JavaScript Programming

     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 create multi-line strings in JavaScript?
  • 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

     JavaScript Runtime

  • Execution Context
  • Call Stack
  • Event Loop

Project. Build a quiz application

Build an income and expense app

Personal project: Create a loan calculator for a loan company

Key takeaway: Learn modern best practices and code patterns.

Get the skills and confidence to really understand JavaScript.

Follow a structured learning path to grow your skills more quickly.

Work on real projects and build your portfolio.

React (JS Library)

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

Handling side effects

  • What are side effects & useEffect()
  • UseEffect() hook
  • Cleanup function

HTTP Calls using Axios/fetch

  • Making first network Call with fetch
  • Network call using Axios
  • Handling data and states
  • Async and Await
  • Updating the data

 

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

Project: Design an app that consumes APIs from the backend with search functionality and pagination

Convert Figma design to a real web app using React.

Personal project: Design a web app for a Real Estate company or other industry using React.

Key takeaway:

Get hands-on practice in building various projects using React JS.

You will also be creating an industry-ready single-page web application.

Learn how to deploy and maintain an application.

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

Deployment

  • Source code management/collaboration
  • Deployment to live server

Project: Deployment of Django app on Linux server

Key takeaway: Understand how the server works and how to deploy your app on the server.

Testimonials

I came to Tech365 without knowing even what HTML is. With 12 months, I have built several software including forums, e-commerce, APIs  and also train people in HTML, CSS, JavaScript, React, Python and Django

Adegoke Olusola
Fullstack Developer

I used to think that software development is meant for only science students alone, but my experience with Tech365 changed my thought cause with what I have learned, I can now build & develop software

Blessing Orhorhoro
Backend developer

It’s always an awesome experience learning at Tech365. Support is always available even at the most unimaginable hours of the day and the mentorship even after the training is of immense value. Thank you Tech365.

Ademuyiwa Adewoye
Fullstack Developer

I was a construction worker in Dubai, till I enrol in a software development course at Tech365, it was my greatest decision in life, and now I’m an eloquent
programmer, it is a good experience

Adebayo Adekunle
Frontend Developer

As an uber driver, I became a software developer. It was a good experience at tech365 and flexible payments are commendable and also a good place to start the journey of technology.

Ibrede Victor
Frontend Developer

Our students work at

Frequently Asked Questions

Yes we accept installment payment. You can discuss with our team members on available payment options.

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

People prefer Tech365 because our training are:

  • Project-based training
  • Job recommendation
  • World-class support
  • Up-to-date curriculum
  • Career guidance and mentoring
  • Access to support community
  • Certificate of completion
  • Flexible payment plan
  • Flexible timing

 

Our training is

  • Globally relevant
  • Beginner friendly
  • Futuristic
  • Relevant across industries
  • In high demand
  • Financially rewarding

We do not guarantee job. However, we do refer our students for jobs as different organization do reach out to us to hire our students. Some of our students have gotten job through this process.

Yes, we offer weekend classes for those who can’t attend weekdays due to their job or other reasons

Our training schedule are around January, May and September. You can talk to one of our representative for more information.

Yes our training is physical at Ikeja, Lagos. However, those outside Nigeria or living far away can join us online via zoom. The experience is similar.

Yes. In fact, this is our strength. We are committed to supporting our students to ensure they succeed.

Yes, it is recommended to 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.

Yes, we provide internet access to our students.

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.

tech365-logo

Tech365 is a register ICT Training company in Lagos Nigeria. Over the years, we have training several students in Canada, UK, United States, Nigeria and more

Contact Us