FRONTEND SCHEDULE

1/5
TOPICS SUBTOPICS FRIDAY
SNO WEEKDAYS
HTML-FRONTEND

1) Overview of Web And Mobile application

2) Client vs Server Applications
DAY-1 Introduction to Web
3) Web Design Patterns and Architecture
4) Course Overview

1) HTML5 Tags Overview

- Single Tags / Empty Tags / Void Tag / Self Enclosing Tag
- Paired Tags
DAY-2 - Semantic Tags
- Non Semantic Tags
2) HTML5 Elements
HTML 5 Core Concepts - Inline, Block and Inline-block etc

1) What is Form and its Significance in HTML

2) Form Tag and its attributes – Action, Method, Autocomplete, Incomplete
3) Different input types of Form Elements – Text, Password, file, Email,
Day-3
Dropdown, 4) Radio, Checkbox, hidden, Text Area, Date Time, Search and etc
5) Types of attributes using in Form – Type, Name, Placeholder and etc
HTML 5 Forms 6) Form Action items – Submit, reset and etc.

1) Web Page Layout Tags – Header, Nav, Section, Article, Aside and Footer
2) Text Tags – Headings (H1 --- H6), Paragraph, list and Tables
Day-4 HTML Important Tags 3) Head, Body and Script
4) Links and Anchor Tags
5) Doc Type and Meta Tags

Day-5 Html Project any one project

CSS-FRONTEND

1) What is CSS
2) Why CSS and how it is used?
3) CSS Stylesheets – internal, external and inline
Day-6 4) What is Selector
5) Types of Selectors – Universal, Tag, ID, Class, Attribute, Relationship, Pseudo
and Group Selectors
Introduction & Selectors 6) CSS Properties and rules.

1) Background – colour, images and transparency properties

2) Fonts, Colour and Text Properties
Day-7
3) Box Model - Box, Inline and inline-block
CSS Layout & Design 4) Padding, Border and Margin Properties

Day-8 CSS Layout & Design 1) Positioning- Float and Display 2) Flexbox and properties
 1) Media Queries
Day-9 Responsive CSS 2) Grid

Day-10 ANIMATIONS CSS Animation and Transitions and Transformations

Css-projects

BOOTSTRAP

1) Install or adding Bootstrap via Cdn link

2) Layouts and Components
3) XS, S, M, L, XL, and XXL design Specification
4) Containers,- container- fluid,- container and components
DAY-11 Bootstrap Layout 5) Gutter,- Horizontal gutter,- Vertical gutter,- Row column gutter,- No gutter
6) Margin and Paddings
7) Background and color
8) Display,- none,- inline,- inline-block,- block,- grid,- flex,- inline-flex
9) Float,- float-start,- float-end,

Bootstrap Typography, Navbars, button enhancements, 5. Position

- position-static,- position-relative,- position-absolute,- position-fixed
- position-sticky,Flex 1. Direction,- flex-column,- flex-column-reverse
- flex-row,- flex-row-reverse,2. justify-content,- justify-content-start
- justify-content-end,- justify-content-center,- justify-content-between
DAY-12
- justify-content-around,- justify-content-evenly,3. align-items
- align-items-start,- align-items-end,- align-items-center,- align-items-baseline
- align-items-stretch,4. flex-fill,5. flex grow & shrink,
Popularity and Alternatives of Bootstrap
Advance Properties Bootstrap Documentation
JAVASCRIPT

1) What is Javascript? Use of javascript?

2) Types of Implementing Javascript?
- Inline
Day-13 - Internal
- External
3) Datatypes, Variables and Constants
Basics of Javascript 4) Modals - Alert, Propmpt and Confirm

1) variables,scope ,hoisting
Day-14 Basics of Javascript 2) What are Operators and Types of Operators.

1)What is decision making and Types of Conditions?

Day-15 Basics of Javascript
2) Entry vs Exit controlled loops

1) What are the types of data structures?

2) Data Structures in JavaScript?
Day-16 3) Strings
4) Mutable and Immutable Strings/Objects
Data structures 5) Arrays etc

1) Stingmethods
Day-17
Data structures 2) Array Methods

1) Objects & Methods

2) Array of Objects
Day-18 3) Object configuration and properties
4) Writable and Enumerable Objects
Objects 5) Object copy and clone
1) What are Functions?
2) 6 ways of declaring functions
DAY-19 functions 3) Arrow Functions Advantages and Disadvantages
4) setTimout and setInterval
5) Higher Order Functions/Reusable functions
 1) What is DOM and types DOM manipulation methods?
- Dom Selectors
- getelementById()
- getElementByTagName()
- getElementByClassName()
- querySelector()
- querySelectorAll()
Adding Css using Javascript
- document.getElementById('idvalue').style.property = 'value';
- Classlist
- addClass
- removeClass
- InnerHTML
Day-20 DOM - Document.write() vs innerHTML
2) Events
- Attaching Event
- addEventListener()
- Detaching Event
- removeEventListener()
- Manupulating Elements
- createElement()
- appendChild()
- removeChild()
- replaceChild()
- Manupulating Attributes
- setAttribute()
- removeAttribute()
Keyboard, Mouse and Form Events
Day-21 Events Event Bubling and Capturing
Event loop and lifecycle

Template Literals
Getter and Setter functions
Strict Mode
DAY-22
Module Export and import
Block Scoping
ES6 Concepts
Callbacks
Promises
DAY-23 fetch
Aync Await
Async JS Call, Apply and Bind
Projects
React Development-frontend
What is React?
React Project Setup/React Boilerplate
Variables and Datatypes
Node, Module, Package, Node Package Manager(NPM)
DAY-24 React Introduction Create React App
Virtual DOM?
Loops, Operator and Conditions?
DAY-25 React Basics Array and String Methods
What is JSX Element
Commenting a JSX element
Rendering a JSX Element
Style and className in JSX
DAY-26 JSX Injecting data to a JSX Element
Big picture of components
JavaScript function vs Class
Creating React Component
Class Component
Functional Component
DAY-27 Components How to create Reusable Components
 Props in Functional Component
What is props?
Props object
Destructuring props
propTypes
defaultProps
DAY-28 Props How to share data between components using Props
What is State in React
How to set state in Functional Component
How to set state in Class Component
Day-14 DAY-29 State How to reset the State in class/functional
What is React Router ?
BroswerRouter
Route
Switch
NavLink
Nested Routing
Redirect
DAY-30 Navigation Prompt
DAY-31 Forms Form input fields Form Data Binding Form Validations Styling Forms
Async Request in React
How to do HTTP/API request?
DAY-32 API Request GET, POST, PUT and Delete using Axios and Fetch
Functional component Lifecycle hooks
Class component Lifecycle hooks
DAY-33 LifeCycle Hooks Refs and useContext
ES6 vs ES5 React code
React Events
What are keys in React
Higher order Components
Style Properties in React Component
React Events
What are keys in React
Higher order Components
DAY-34 React Essentials Style Properties in React Component
Topics TSessions
HTML 5
CSS(Cascading Style Sheet) 10 Approx-2months
BootStrap 3
Java Script 20
React Devlopment 20