Web Development Training

Course Overview

We are the organisation that helps you to learn Web Development from scratch.We teach HTML, CSS, JavaScript and React.js through projects. You don’t need any programming skills to participate! We provide everything, so all you have to do is show up and learn. No experience is required.

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

1. Introduction of HTML
2. Tag, Elements and Attributes
3. Basics syntax
4. Table
5. List
6. Forms
7. Structure of HTML4 and HTML
8. Semantic and non-semantic tags
9. HTML 5 Features
10. New Input type
11. Forms Attribute
12. SVG
13. Canvas
14. Audio, Video Tag

• CSS(Cascading Style Sheet)

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

• CSS 3

1. Background, Multiple Backgrounds
2. Font Related Features (online fonts)
3. Text-Effect and Box-Effect
4. Gradients-Linea and Radial
5. Transition
6. Transformation
7. Animation
8. Media Queries

• Bootstrap

1. Introduction of Bootstrap (Responsive)
2. Typography
3. Tables
4. Images, Buttons
5. Grid Structure-Type of columns
6. Forms
7. Jumbortron,H.well,
8. Panel
9. Navbar,Nav Tab
10. CarouselL
11. Responsive Web Page

• JavaScript

1. Introduction of JavaScript
2. Useof JavaScript
3. Variables
4. Keywords
5. Data Type (Primitive,non-primitive)
6. JS Conditions (if, if-else)
7. Conditional operators & logical operators
8. Loops (for,while,do-while)
9. Switch Case
10. Functions
11. Set Timeout and set Interval Function
12. HTML DOM
13. Usethe document object to access and manipulate HTML
14. Changing HTML Elements
15. Adding and Deleting Elements
16. Array
17. Objects
18. How to access Objects (Dot Notation, bracket Notation)
19. Object Creation (Empty Object, Literal Way, Constructor Way)
20. Prototype
21. Validations
22. Events

• React.Js-Introduction

1. React JS Introduction
2. Advantages of React JS
3. Work flow of React JS
4. Scope of React JS

• Overview Of Jsx

1. Introduction of Virtual DOM.
2. Difference between JS and JSX.
3. React Components overview
4. Containers and components
5. What is Child Components?
6. What is Namespaced components?
7. What are the JavaScript expressions available in JSX?

• REACT JS ENVIRONMENT SETUPS

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

• Real-time Practicals

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

• A REAL-TIME APPLICATION BY USING REACT JS

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

• Real-time Practicals

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

• REACT JS FORMS AND UI

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

• Real-time Practicals

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

• REACT JS COMPONENT LIFE CYCLES OVERVIEW

1. Initial Render
2. Props Change
3. Stage Change
4. Component willMount
5. Component didMount
6. Component Unmount

• ROUTING IN REACT JS AND OTHER JS CONCEPTS

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

• Real-time Practicals

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

• EVENT HANDLING IN JSX

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

• Real-time Practicals

1. Communicate Data between components.
2. Applying all lists of events

• HOW TO WRITE STYLES IN REACT JS?

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

• Real-time Practicals

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

• REACT ROUTER WITH NAVIGATION

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

• FLUX OVERVIEW

1. What is Flux Architecture?
2. What are the Flux Components available?
3. Stores.
4. Dispatchers.
5. View Controllers.
6. Actions.
7. Views.
8. How Flux works?
9. Flux and React works together

• Final Major Project

1. 1-Major industrial Project using React.js