IQ Hub

Frontend Development

IQ Hub Frontend Development programme is beginner-friendly and project based. It is designed to help participants become job-ready

Get Started

CURRICULUM

Frontend Development Course Outline

MODULE 1

Introduction to Frontend Development /Basic of HTML

Understanding of how to render different HTML elements in the browser

Introduction to Frontend Development

Overview of Web Development (Frontend vs. Backend)
Tools of the Trade: Text Editors, IDEs, and Browsers
Introduction to Version Control (Git and GitHub)

Introduction to HTML

Advantages and limitations of HTML
HTML Comments
Basic HTML Tags
HTML Elements
Headings
Paragraphs
Text Formatting
Quotations
Links, Images, Tables, Lists
Block and Inline Elements
Iframes
File Paths
Viewport Meta Tags

HTML entities

Doctypes
HTML Attributes
Audio/Video

MODULE 2

Cascading Style Sheets (CSS)

Understanding of how to style HTML elements in the browser

Introduction to CSS

What is CSS and its purpose
Benefits of CSS
How CSS works
External, Internal, and Inline CSS

Text Properties

Color
Text-align
Text-decoration
Line-height
Letter-spacing
Word-spacing
Using Google Fonts and Web Safe Fonts
Applying Text Shadows
Styling Text Links

CSS Positioning

Static
Relative
Absolute
Fixed
Sticky Positioning
Z-index
Float and clear
Centering Elements Horizontally and Vertically

CSS Variables (Custom Properties)

Defining Variables
Using CSS Variables

CSS Layout Techniques

Display Types
Block
Inline
Inline-block

CSS Frameworks

Using Bootstrap: Components and Grid System
Introduction to Tailwind CSS: Utility-First Approach

CSS Syntax and Selectors

Basic CSS Syntax: Rules and Properties
Types of Selectors
Element (Tag) Selector
Class Selector
ID Selector
Universal Selector
Attribute Selectors
Grouping Selectors
Pseudo-Classes
Pseudo-Elements

Box Model

Content, Padding, Border, and Margin
Understanding and Controlling the Box Model
box-sizing Property
Handling Width and Height

CSS Units

Absolute Units
Relative Units

CSS Transitions and Animations

Understanding Transitions
transition-property
transition-duration
Keyframes Animation @keyframes
Applying Animations to Elements
Animation Properties
animation-name
animation-duration
animation-timing-function

Flexbox Layout

Flex Container
Flex Items
Aligning
Justifying
Wrapping Items
Flex Direction
Flex Row
Flex columns
Flex Grow
Ordering

Font Properties

Font-size
Font-family
Font-weight
Font-style

Colors and Background

Color Properties
Working with RGB and HEX
Applying Background Images
Background image
Background-size
Background-position
Background-attachment
Background-repeat
Gradient Backgrounds
Linear and Radial Gradients

Responsive Web Design with CSS

Media Queries for Responsive Design
Applying Breakpoints for Different Screen Sizes
Fluid Layouts Using Percentages
Responsive Typography and Images
Using Viewport Units
Viewport height
Viewport width

CSS Transformations

Transforming Elements with transform
Scale
Rotate
Translate
Skew

Grid Layout

Grid Container
Grid Items
Grid Template Rows
Grid Template Columns
Gap
Alignment in Grid

MODULE 3

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

JavaScript Operators

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

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

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

Storing data in the browser

Cookies
LocalStorage
sessionStorage

Asynchronous JavaScript

Promises
Async/await

Variables in JavaScript

The use of variables
JavaScript Let
JavaScript Const
JavaScript Reserved Words

Conditionals

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

Arrays in JavaScript

Basic Array Methods
sort() Method
Array Iteration Methods

Javascript Form

How to Create a Form with the JavaScript?
Form validation

ES6

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

Error Handling

try…catch
try…catch…finally
Throw an Exception

Data types

Numbers
Strings
Boolean
Array
Objects
Null
Undefined

Loops in JavaScript

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

JavaScript Strings

JavaScript String Methods
How to sort strings in JavaScript?

Event handling

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

Module

What is the arrow function
Importing and Exporting Modules

MODULE 4

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

State and event handling

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

Global state management with context

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

React Setup

Environment Setup
Creating New Project
Analyzing Project Structure

Contents conditional rendering

Rendering of List
Importance of key attribute
Conditional Statements & Output

Deployment

Steps to create a production build
Hosting your application online

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

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

MODULE 5

Version Control and Collaboration

Advanced Git Concepts

Branching and Merging: Managing codebases
Resolving Merge Conflicts

Collaborating with GitHub

Forking Repositories, Pull Requests
GitHub Actions for CI/CD

MODULE 6

API Consumption and Integration

Understanding APIs

What are APIs? Overview of REST and GraphQL
API Endpoints, Methods (GET, POST, PUT, DELETE), and Status Codes
API Authentication: Tokens, API Keys, OAuth

Practical Examples

Fetching data from public APIs (e.g., OpenWeatherMap, Unsplash, TMDb)
Rendering API data dynamically in the DOM
Implementing infinite scrolling or pagination

Building Real-World Applications

Weather App: Fetch and display real-time weather data
News Aggregator: Display top headlines using a news API
Search Feature: Create a search bar to query an API and display result

Fetching Data with JavaScript

Using the fetch API:
Making GET requests to retrieve data
Handling promises and errors
Posting data to APIs (POST requests)
Using third-party libraries like Axios for API consumption