Frontend Development | Widesoftech

What you will learn?

Become a modern and confident HTML and CSS developer, no prior knowledge needed!
Design and build a stunning real-world project for your portfolio from scratch
Modern, semantic and accessible HTML5
Modern CSS (previous CSS3), including flexbox and CSS Grid for layout
Important CSS concepts such as the box model, positioning schemes, inheritance, solving selector conflicts, etc.
A web design framework with easy-to-use rules and guidelines to design eye-catching websites

Course Syllabus

HTML and HTML 5

Introduction of HTML
Tag, Elements and Attributes
Basics syntax
Table
List
Forms
Structure of HTML4 and HTML
Semantic and non-semantic tags
HTML 5 Features
New Input type
Forms Attribute
SVG
Canvas
Audio, Video Tag

CSS(Cascading Style Sheet)

Attributes(ID, Class, Style, Title )
CSS Types(Inline, Internal, External)
Box-model
Display Property(Block, Inline, None)
Visibility-Hidden
Position Property(Static, Relative, Absolute, Fixed )
Z-index Property
Combinators(Descendant Selector, Child Selector, Adjacent Sibling Selector, General Sibling Selector)
CSSPseudo-classes(Link, Visited, Hover, Active)
CSSPseudo-elements(First Line, First Letter, Before, After ,Selection)
Static Web Page
Viewport Meta tag

CSS 3

Background, Multiple Backgrounds
Font Related Features (online fonts)
Text-Effect and Box-Effect
Gradients-Linea and Radial
Transition
Transformation
Animation
Media Queries

Bootstrap

Introduction of Bootstrap (Responsive)
Typography
Tables
Images, Buttons
Grid Structure-Type of columns
Forms
Jumbortron,H.well,
Panel
Navbar,Nav Tab
CarouselL
Responsive Web Page

JavaScript

Introduction of JavaScript
Useof JavaScript
Variables
Keywords
Data Type (Primitive,non-primitive)
JS Conditions (if, if-else)
Conditional operators & logical operators
Loops (for,while,do-while)
Switch Case
Functions
SetTimeout and set Interval Function
HTML DOM
Usethe document object to access and manipulate HTML
Changing HTML Elements
Adding and Deleting Elements
Array
Objects
How to access Objects (Dot Notation, bracket Notation)
Object Creation (Empty Object, Literal Way, Constructor Way)
Prototype
Validations
Events

React.Js-Introduction

React JS Introduction
Advantages of React JS
Work flow of React JS
Scope of React JS

Overview Of Jsx

Introduction of Virtual DOM.
Difference between JS and JSX.
React Components overview
Containers and components
What is Child Components?
What is Namespaced components?
What are the JavaScript expressions available in JSX?

REACT JS ENVIRONMENT SETUPS

Node setup
How to use NPM?
How to create package.json and purpose of it?
ES6 Introduction and features.
Webpack Overview
Best IDE for React JS and How to write optimized code in React JS?
React JS browser plugins overview.

Real-time Practicals

NPM Installation by locally and Globally
Create a Basic App with React JS and other Supported NPMs

A REAL-TIME APPLICATION BY USING REACT JS

Create a React component with JSX template.
How to create Nested Components?
What is React JS render?
React Props overview.
Introduction of Props validation with data types.
Flow of States, Initialize states and update states.

Real-time Practicals

Create a Small React Module
Use All the states in in the created Application.

REACT JS FORMS AND UI

Lists of Form components.
Setup Controlled and Uncontrolled form components.
Control Input elements.
How to set default values on all formats of Input elements.
React JS Form validations.
How to write Styles?
Animations overview

Real-time Practicals

Create a React Form.
Client-side form validation.
Applying form components.
Submit and Rest the form

REACT JS COMPONENT LIFE CYCLES OVERVIEW

Initial Render
Props Change
Stage Change
Component willMount
Component didMount
Component Unmount

ROUTING IN REACT JS AND OTHER JS CONCEPTS

Single Page Application Overview.
How to configure React Router?
History of Router
How to Handle Conditional statement in JSX?
IIFE in JSX for complex logic overview.

Real-time Practicals

Create a Single Page Application.
Applying Routing.
Dynamically render the components based on the url.

EVENT HANDLING IN JSX

onBlur, onKeyUp, onChange and other useful primary events in React JS.
How to Sharing events between the components?

Real-time Practicals

Communicate Data between components.
Applying all lists of events

HOW TO WRITE STYLES IN REACT JS?

CSS and inline styles in React JS overview.
Introduction to styled components

Real-time Practicals

Styling the application using styled component
How to use Animations in the Application.

REACT ROUTER WITH NAVIGATION

How to Load the router library?
Configure the React Router?
How to Pass and receive parameters?
Integration of React-cookie overview.

FLUX OVERVIEW

What is Flux Architecture?
What are the Flux Components available?
Stores.
Dispatchers.
View Controllers.
Actions.
Views.
How Flux works?
Flux and React works together.

Final Major Project

1-Major industrial Project using React.js

Web Development Training

What you will learn?

Course Syllabus

HTML and HTML 5

CSS(Cascading Style Sheet)

CSS 3

Bootstrap

JavaScript

React.Js-Introduction

Overview Of Jsx

REACT JS ENVIRONMENT SETUPS

Real-time Practicals

A REAL-TIME APPLICATION BY USING REACT JS

Real-time Practicals

REACT JS FORMS AND UI

Real-time Practicals

REACT JS COMPONENT LIFE CYCLES OVERVIEW

ROUTING IN REACT JS AND OTHER JS CONCEPTS

Real-time Practicals

EVENT HANDLING IN JSX

Real-time Practicals

HOW TO WRITE STYLES IN REACT JS?

Real-time Practicals

REACT ROUTER WITH NAVIGATION

FLUX OVERVIEW

Final Major Project

Web Dev Training

Have any queries?

Frequently Asked Questions

Who Should Take an Online Course?

Are There Prerequisites or Language Requirements?

Can I Take More than One Course at a Time?

How to Download Certificate of Completion?

What Payment Options Available?