Frontend Training
2 Months
Duration
Physical/Online
Classes
Weekday/Weekend
Mon, Web & Fri (Saturdays)
10am to 1pm (WAT) or 2pm to 5pm
Time
Software Projects We Will Build
Training Benefits
- Beginner-friendly
- Project-based training
- Excellent support
- Job alerts
- Career guidance
- Certificate of completion
- Flexible payment plan
- Conducive learning environment
- Unlimited internet access
- Remote internship with top organizations
Software Development Course Outline
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.
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 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
- Grid properties
- Grid column properties
- Grid row properties
- grid-template-rows
- grid-template-columns
- grid-gap
Tailwind CSS
Ability to build different types of layouts Design web apps that are responsive Learn general techniques and best practices with TailwindCSS.
- Introduction to Tailwind CSS
- Why Tailwind CSS?
- Advantages of Tailwind CSS
- Installation of tailwind css
- Container
- Box Sizing
- Display
- Float
- Clear
- Object Fit
- Object Position
- Overflow
- Flex Direction
- Flex Wrap
- Flex
- Flex Grow
- Flex Shrink
- Order
- Grid Template
- Columns
- Grid Template
- Rows
- Gap
- 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
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.
- 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
- The use of variables?
- JavaScript Let
- JavaScript Const
- JavaScript Reserved Words
- Numbers
- Strings
- Boolean
- Array
- Objects
- Null
- Undefined
- Arithmetic Operators
- Assignment operators
- Comparison Operators
- JavaScript Unary Operators
- Ternary Operator
- Instanceof Operator
- If-else
- Switch Case in JavaScript
- Break and Continue
- Type Conversion
- For Loop
- While Loop
- For-in Loop
- Differences between for..in and for ..of
- 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
- Basic Array Methods
- sort() Method
- Array Iteration Methods
- JavaScript String Methods
- How to sort strings in JavaScript?
- 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
- Get the Parent Element
- Get Siblings of an Element
- Get Children of an Element
- Manipulating elements
- Create Elements Append Child Nodes InnerHTML
- How to Create a Form with the JavaScript?
- Form validation
- Introduction to Events
- Page Load Events
- The onLoad Event
- The DOMContent
- Mouse Events
- Keyboard Events
- Scroll Events
- Cookies
- LocalStorage
- sessionStorage
- Template Literals
- Object Literal Syntax
- Default Parameters
- Rest Parameters
- Spread Operator
- Destructuring
- What is the arrow function
- Importing and
- Exporting Modules
- Promises
- Async/await
- try…catch try…catch…finally
- Throw an Exception
React JS
Build powerful, fast, user-friendly and reactive web apps with React
- What is React JS?
- Why use React instead of JavaScript
- Project Overview
- Roadmap
- Environment Setup
- Creating New Project
- Analyzing Project Structure
- 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
Version Control with Git And Github
hands-on data analytics using Pandas. We will work on different data to understand how to clean, analyze and draw conclusions.
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
- Dealing with Rows and Columns in Pandas
- Extracting rows
- Indexing and Selecting Data
- Conditional filtering
- Handling missing data
- Grouping data
- Merging data
- Joining data
- Concatenating data
- Working with date and time
- Working with text data
Reading files
- Read CSV files
- Reading excel file
- Reading HTML tables from websites
Project: Applying the knowledge gained to analyze hotel data and Uber.
AI and Software Development
Plot data on charge, style and customize the chart with matplotlib.
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
Training Fees
Full stack
Frontend & Mobile App
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, some of our students are connected to remote internships with companies like Accenture, PwC, KPMG etc. 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. Techbly 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 pag