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
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
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.
