Figma

Photoshop

Illustrator

HTML Structure

Paired Tags: Heading, Paragraph, Font, Quote, Mark, Del, Sup, Sub, Marquee, Center

Impaired Tags: Image, Br, Hr

Ordered and Unordered List

Detail and Summary

Table Structuring: Border, Cellspacing, Cellpadding, Colspan, Rowspan, Bordercolor, Align

Creating Forms

Input tags and its properties

Buttons (submit, reset)

Fieldset and Legend

Use of Anchor Tag

Iframes for Google Maps and YouTube

HTML Symbols and Emojis

Types of CSS (internal, external, inline)

Box Model using DIV

Colors, Alignments, Paddings, Margins, Borders

Decorate the images, tables and forms with multiple CSS properties.

Top Navigation menus

Dropdown menu

List of data in footers

Change color on Hover

Shadow on Hover

Hide/Show content on hover

Fixed, Absolute and Relative

CSS Cards

Product Gallery

Make responsive table and images

Image alignment and captions

Creating buttons with Bootstrap classes

Styling forms (inputs, checkboxes, radios)

Button groups and form layouts

Overview of components: Navbar, Cards

Navbar components (link, logo, search)

Card components (simple, groups, images)

Modals and Alerts

Carousel

Using Badges and Progress bars

Variables and Constants

Data Types (String, Number, Boolean, Undefined, Null)

Operators (Arithmetic, Comparison, Logical, Assignment)

If, if…else, if…else if… else

Ternary Operators

For, while, for…in, for…of

Function Declaration and calling

Parameters and Return Values

Scope and Closures

Arrow Functions

Changing content, attributes, and styles

Types of events (click, dblclick, change, focus, keyup, mouseover, etc.)

Initialization, accessing and modifying Object

Initialization, accessing and modifying Array

Array of Objects

Array methods (push, pop, shift, unshift, etc.)

Iterating over arrays(using loops, map, filter)

Template literals (backticks for strings)

Destructuring assignment (objects and arrays)

Default parameters

Rest and spread operators (…)

let and const for block scoping

Classes in JavaScript (introducing object-oriented principles)

What are APIs?

Fetch API

Using async and await for cleaner code

Organizing code into modules

import and export

Overview of Angular

Installing Node.js, npm, and Angular CLI

Installing and initializing an Angular project using ng new

Exploring the Angular project structure

Running the Angular development server (ng serve)

Basic TypeScript syntax: Variables, Data Types, Functions, Classes

Interfaces and Types in TypeScript

Component structure: Templates, Styles, and Class

Creating and using components

Component lifecycle overview

Input and Output properties

vent binding and two-way data binding ([(ngModel)])

Using interpolation ({{ }}) for displaying dynamic content

Structural Directives (@If, @For)

Built-in directives and their use cases

Setting up routing in Angular using RouterModule

Defining routes and setting up route paths

Using to display routed components

Navigating programmatically with routerLink and router.navigate()

Route Parameters and Query Parameters

Building forms with ngModel and ngForm

Validating form inputs (required, minlength, etc.)

Using Angular’s HttpClientModule to make HTTP requests

Making GET, POST, PUT, DELETE requests with HttpClient

Handling errors in HTTP requests

Fetching and displaying data from an external API

Handling asynchronous operations with observables

Importing built-in Angular modules (FormsModule, HttpClientModule, etc.)

Built-in pipes (e.g., date, currency, json, etc.)

Project work

Overview of React JS

Installing Node.js and npm

Installing create-react-app (using npx create-react-app)

Exploring the project structure

Running a basic React app

How JSX works (JavaScript XML)

JSX syntax and expressions

Rendering components

Working with elements and nested components

Using curly braces {} for embedding expressions

Functional components vs. class components

Creating simple components

Component lifecycle

Passing data to child components using props

Default props and PropTypes

Prop drilling and how to avoid it

Managing state in functional components using useState hook

State updates and re-rendering components

Handling events (onClick, onChange, etc.)

Binding methods in class components

Working with forms and input fields

Using if statements, ternary operators, and logical && in JSX

Rendering different UI based on state/props

Using the map() function to render arrays

Key prop in lists

Handling dynamic data and list updates

What are Hooks and why they are important?

Using useState hook in depth (state handling)

Using useEffect for side effects (e.g., data fetching)

Cleaning up side effects (cleanup functions)

Dependencies array in useEffect

Using refs in functional components

Setting up React Router (react-router-dom)

Defining Routes, Link components, and useNavigate

Nested Routes and Route Parameters

Query parameters in URLs

How Context API simplifies prop drilling

Creating a Context with createContext()

Providing and consuming context in functional components

Use cases of Context API

Fetching Data from APIs

Handling async operations in React

Displaying data in components

Project work

Project Deployment