The Ultimate Front End Web Development Course

Learn HTML ,CSS ,Javascript ,ES6+ ,Jquery ,AJAX ,Bootstrap5 ,React ,Redux ,Flex ,Grid ,SASS and Master Web Development

What you'll learn

You will Learn everything you need to become complete Front End Web Developer

Learn PSD to responsive HTML/CSS websites with PSD to HTML Portfolio Project

Learn PSD to React JS Website with Project

Learn CSS Flex , CSS Grid and learn creating CSS Layouts

Learn CSS Animations , creating Awesome Hover Effects with Projects

Learn CSS concepts in depth

Learn Javascript , ES6+ , Advanced Javascript

Learn JQuery , AJAX with Projects

Learn Bootstrap 5 and Learn Creating Responsive Web Design

Learn Creating Bootstrap Components with Projects

Learn React JS , React Router , State Management , Context API , Redux , React Redux

Requirements

Softwares Used : Text Editor - Sublime Text , Code Editor - Visual Studio Code

No Prior Programming Knowledge required . Just be open and start taking lectures with positive mind set

Description

Welcome to one of the Biggest Front End Web Development Course !! If you are searching for 1-Stop Course to Learn Front End Web Development from scratch to Master Level where u can feel confident yourself for Designing and Creating Awesome Websites , this course is for youHere in this Course , everything is covered that you need to become a Successful Front end Web Developer Also if you are preparing yourself for job interviews , this course is going to help you a lotFollowing are the Topics that are covered here in this Course :HTML CSSJavascriptES6+Advanced JavascriptJQueryAJAXCSS FLEXCSS SASSCSS AnimationsBootstrap 5Creating Components using BootstrapForms using BootstrapReact JS ( React Router , React Hooks , React Components Communication , State Management , Context API , Reducers  etc)ReduxReact ReduxPSD to HTML/CSSPSD to REACT Websiteand Many MoreFollowing are the Projects that are Created here in this Course :Many CSS Hover Effects Projects10 CSS Loader Animations ProjectsCharacter Animations ProjectsCSS Layout ProjectsMini Website Creation using CSS Grid Javascript and JQuery Projects (Working with Array methods , Dom Manipulation , Dom Traversal , Asynchronous Javascript etc)Ajax Projects (Auto Suggestion , Autofetching , Data Submission etc)Bootstrap Projects ( Custom Navigation , Custom Animated Carousel, Modal , Accordion etc )Mega PSD to HTML/CSS Project (Portfolio Website )Mega PSD to REACT Website ProjectMini Cricket APP using React JSand Many MoreEvery Concept is covered in detailsThis Course is jam-packed with Projects , Examples and Challenges which makes your learning process easy And also if you have any issue understanding some concept , feel free to let me know via Q/A section or you can message me .

Overview

Section 1: Introduction

Lecture 1 Introduction

Section 2: HTML

Lecture 2 What is HTML

Lecture 3 Basic HTML Structure

Lecture 4 HTML Elements

Lecture 5 HTML Attributes

Lecture 6 HTML Styles

Lecture 7 HTML Headings

Lecture 8 HTML Paragraphs and Pre tag

Lecture 9 HTML Computer Code Tags

Lecture 10 HTML Comments

Lecture 11 Text Formatting

Lecture 12 Quotes , ABBR , BDO

Lecture 13 HTML Colors

Lecture 14 Important Concept : Block and Inline Elements

Lecture 15 Understanding ID and Class

Lecture 16 HTML Links

Lecture 17 HTML Images

Lecture 18 HTML Tables

Lecture 19 HTML Lists

Section 3: CSS

Lecture 20 CSS Syntax

Lecture 21 CSS Selectors

Lecture 22 CSS Parent Selectors

Lecture 23 Types of CSS Styles

Lecture 24 CSS Colors

Lecture 25 Border Radius and Outline

Lecture 26 CSS Margin

Lecture 27 CSS Padding

Lecture 28 Important : CSS Box Model

Lecture 29 CSS Font Family

Lecture 30 CSS Width , Height , Line Height

Lecture 31 Text Formatting

Lecture 32 CSS Display Property

Lecture 33 Important Concept : CSS Positioning

Lecture 34 CSS Overflow

Lecture 35 Important Concept : Float and Clear

Lecture 36 CSS Opacity

Lecture 37 Box Shadow

Lecture 38 Text Shadow

Section 4: CSS Transition

Lecture 39 Transition Property and Transition Duration

Lecture 40 Transition Timing Function and Transition Delay

Lecture 41 Interesting Illustration using Transition Delay

Lecture 42 Project : Cool Unique Hover Effect

Section 5: CSS Animation

Lecture 43 Animation Basics : Part 1

Lecture 44 Animation Basics : Part 2

Lecture 45 Animation : Shorthand

Lecture 46 Project : Animated Video Background Hero Area Part 1

Lecture 47 Project : Animated Video Background Hero Area Part 2

Lecture 48 Project : Animated Video Background Hero Area Part 3

Section 6: CSS Flex

Lecture 49 Display Property

Lecture 50 Flex Direction

Lecture 51 Flex Wrap

Lecture 52 Flex Flow

Lecture 53 Justify Content

Lecture 54 Align Items

Lecture 55 Align Content

Lecture 56 Order

Lecture 57 Flex Grow

Lecture 58 Flex Shrink

Lecture 59 Flex Basis

Lecture 60 Flex Shorthand

Lecture 61 Align Self

Section 7: CSS Grid

Lecture 62 Concept of Grid Template , Grid Gap , Grid auto X

Lecture 63 Concept of Grid auto flow

Lecture 64 Concept of Different Grid Gap

Lecture 65 Justify Content

Lecture 66 Difference Between Justify Content and Justify Items

Lecture 67 Align Content and Align Items

Lecture 68 Place Content

Lecture 69 Rearranging Items using some cool Properties

Lecture 70 Grid Area and Challenge

Lecture 71 Solution for the Challenge

Lecture 72 Justify Self and Align Self

Lecture 73 Project - Web Layout using CSS Grid easily

Section 8: CSS SASS

Lecture 74 Intro

Lecture 75 Sass Variables

Lecture 76 Sass Nesting

Lecture 77 The Ampersand Sign (&)

Lecture 78 Shortening Code having some prefix

Lecture 79 Mixin

Lecture 80 Mixin Challenge

Lecture 81 Import

Lecture 82 Extend

Lecture 83 Mixin with arguments

Lecture 84 Final Touch of the Project

Section 9: CSS Pseudo Elements

Lecture 85 Understanding Pseudo Element and Project : Unique Hover Effect : part 1

Lecture 86 Project : Unique Hover Effect : part 2

Lecture 87 Project : Unique Hover Effect : part 3

Lecture 88 Project : Unique Hover Effect : part 4

Section 10: CSS Shapes

Lecture 89 Triangle

Lecture 90 Hexagon

Lecture 91 Circle

Lecture 92 Book Shape

Lecture 93 Hero Area Project

Section 11: CSS Hover Effect Projects

Lecture 94 Basic Markup to Start with

Lecture 95 Using Font Awesome

Lecture 96 Basic Styles

Lecture 97 Hover Project 1

Lecture 98 Hover Project 2

Lecture 99 Hover Project 3

Lecture 100 Challenge for You

Lecture 101 Hover Project 4

Lecture 102 Hover Project 5

Lecture 103 Hover Project 6

Lecture 104 Hover Project 7

Lecture 105 Hover Project 8

Lecture 106 Hover Project 9

Lecture 107 Hover Project 10

Section 12: CSS Loader Animation Projects

Lecture 108 Basic Markup to start with

Lecture 109 Project1

Lecture 110 Project2

Lecture 111 Project3

Lecture 112 Project4

Lecture 113 Project5

Lecture 114 Project6

Lecture 115 Project7

Lecture 116 Project8

Lecture 117 Project9

Lecture 118 Project10

Lecture 119 Implementation of full page and constrained dimension of Animated loaders

Section 13: CSS Character Animation

Lecture 120 Important Information to start with

Lecture 121 Project : Running Santa

Lecture 122 Project : Walking Dino

Lecture 123 Project : Dino Chasing Santa

Lecture 124 Project : Bahamut

Lecture 125 Project : Dark Knight

Section 14: Javascript

Lecture 126 What is Javascript and why JS is used

Lecture 127 Javascript Syntax

Lecture 128 Best use of JS

Lecture 129 Javascript Comments

Lecture 130 Javascript Variables

Lecture 131 Types of Variables

Lecture 132 Arithmetic Operators

Lecture 133 Assignment Operators

Lecture 134 Concatenation Operator

Lecture 135 Adding Numbers and Strings

Lecture 136 Comparison Operator

Lecture 137 Logical Operator

Lecture 138 If Statement

Lecture 139 Important Concept : If (1)

Lecture 140 Else Statement

Lecture 141 Nested If Else Statement

Lecture 142 Ternary Operator

Lecture 143 Function in Javascript

Lecture 144 Parameterized Function

Lecture 145 Return Function

Lecture 146 Nested Function

Lecture 147 Local and Global Variables

Lecture 148 Switch Statement

Lecture 149 Intro to Loops

Lecture 150 For Loop

Lecture 151 While Loop

Lecture 152 Do While Loop

Lecture 153 Intro to Arrays

Lecture 154 Ways of Creating Array

Lecture 155 Dynamic Array

Lecture 156 Array Methods : Shift and Unshift

Lecture 157 Array Methods : Join and toString

Lecture 158 Javascript Objects

Lecture 159 For In Loop

Section 15: AJAX

Lecture 160 What is AJAX

Lecture 161 AJAX Examples

Lecture 162 How Ajax Works

Lecture 163 XMLHTTPRequest Object

Lecture 164 Request Types and Methgods

Lecture 165 Using Get Request

Lecture 166 Using Post Request

Lecture 167 OnReadyStateChange Function

Lecture 168 Handling Response from Server

Lecture 169 Ajax Project 1

Lecture 170 Ajax Project 2 : Dynamic

Lecture 171 Ajax Project 3 : Search Suggestion : Part 1

Lecture 172 Ajax Project 3 : Search Suggestion : Part 2

Lecture 173 Ajax Project 4 : Submitting Data to server

Section 16: Jquery

Lecture 174 What is jQuery and why we use it ?

Lecture 175 Using jQuery in website

Lecture 176 Conditional Script Loading

Lecture 177 jQuery Syntax

Lecture 178 jQuery Selectors

Lecture 179 Mouse Events

Lecture 180 Keyboard Events

Lecture 181 Form Events

Lecture 183 Window Events

Lecture 184 Hide and Show

Lecture 185 Getting Content using jQuery

Lecture 186 Setting Values using jQuery

Lecture 187 Creating HTML Contents using jQuery

Lecture 188 Adding HTML Contents

Lecture 189 Removing HTML Contents

Lecture 190 Traversing Concept

Lecture 191 Ancestor Traversal

Lecture 192 Descendent Selector

Lecture 193 Sibling Selector

Lecture 194 GetHTTPRequest using ajax jQuery

Lecture 195 PostHTTPRequest using jQuery

Lecture 196 jQuery Ajax

Lecture 197 Each function

Lecture 198 Add Class

Lecture 199 Remove Class

Lecture 200 Adding CSS Dynamically

Lecture 201 Toggle Class

Section 17: Bootstrap 5

Lecture 202 Why we use Bootstrap ?

Lecture 203 Two ways of using Bootstrap in your Project

Lecture 205 Important : Meta Tags

Lecture 206 Grid Containers

Lecture 207 Understanding Concept of col-xx-y

Lecture 208 Column Breaks

Lecture 209 Understanding Offset

Lecture 210 Concept of Ordering

Lecture 211 Task : Equal Width Content

Lecture 212 Task : Variable Width Content

Lecture 213 Positioning Concept

Lecture 214 Display Properties

Lecture 215 Difference between Flex and Inline-flex

Lecture 216 Flex Concepts : Flex Direction

Lecture 217 Flex Concepts : Justify Content

Lecture 218 Flex Concepts : Align Items

Lecture 219 Flex Concepts : Align Self

Lecture 220 Understanding Difference between em and rem

Lecture 221 Handling Margin and Padding

Lecture 222 Image Classes in Bootstrap 5

Lecture 223 Covering Few Concepts using Images

Lecture 224 Background Color and Gradients

Lecture 225 Text Color

Lecture 226 Typography

Lecture 227 Working with Icons

Lecture 228 Hover Effect : Animating Icons

Section 18: Creating Components with Bootstrap

Lecture 230 Project : Accordion

Lecture 231 Collapse Concept in Bootstrap

Lecture 232 Project Collapse

Lecture 233 Project Modal

Lecture 234 Project Dropdown

Lecture 235 Project : Navigation

Lecture 236 Adding Dropdown to Navigation

Lecture 237 Project : Carousel : part1

Lecture 238 Project : Carousel : part2

Section 19: Creating Forms with Bootstrap

Lecture 239 Creating Basic Form

Lecture 240 Creating Form with Inline Content

Lecture 241 Working with Select Input

Lecture 242 Working with Radio Buttons

Lecture 243 Working with Input Group in Smart Way

Lecture 244 Working with Checkbox

Lecture 245 Working with Switches

Lecture 246 Working with Floating Label

Lecture 247 Working with Range Input

Lecture 248 Getting and Showing User Selected Range Value

Lecture 249 Working with Textarea

Lecture 250 Adding Submit Button to our Form

Lecture 251 Project : Beautiful Login Form : Part 1

Lecture 252 Project : Beautiful Login Form : Part 2

Lecture 253 Project : Beautiful Login Form : Part 3

Section 20: Bootstrap 5 Project : Custom Navigation

Lecture 254 Custom Navigation : Part1

Lecture 255 Custom Navigation : Part2 : Custom Dropdown

Lecture 256 Custom Navigation : Part13 : Addressing Responsiveness

Lecture 257 Custom Navigation : Part14 : Handling Active State using Javascript

Section 21: Bootstrap 5 Project : Creating Awesome Animation Slider (No Paid Plugins)

Lecture 259 Slider Part 1

Lecture 260 Slider Part 2 : Animated Slider

Lecture 261 Slider Part 3 : Wave Effect

Lecture 262 Slider Part 4 : Particle Effect

Section 22: React Js

Lecture 264 Installing VS Code

Lecture 265 Installing Node Js

Lecture 266 Creating React Project with Create React App

Lecture 267 Understanding React Project Flow

Lecture 268 Creating a New Component

Lecture 269 Important Matter regarding Component

Lecture 270 Understanding Components better

Section 23: Mega Project 1 - PSD to HTML - PSD Creation

Lecture 271 Full Demo

Lecture 273 Get High Quality High Res Images for Free

Lecture 274 Installing Google Font and Font Awesome in Machine

Lecture 275 Understanding Grid

Lecture 276 Creating Color Swatch

Lecture 277 Header Logo and Navigation

Lecture 278 Hero Area : Part 1

Lecture 279 Hero Area : Part 2

Lecture 280 About : Part 1

Lecture 281 About : Part 2

Lecture 282 Education Experience Skills : Part 1

Lecture 283 Education Experience Skills : Part 2

Lecture 284 Services Part 1

Lecture 285 Services : Part 2

Lecture 286 Portfolio : Part 1

Lecture 287 Portfolio : Part 2

Lecture 288 Portfolio : Part 3

Lecture 289 Testimonials : Part1

Lecture 290 Testimonials : Part 2

Lecture 291 Blog : Part 1

Lecture 292 Blog : Part 2

Lecture 293 Contact : Part 1

Lecture 294 Contact : Part 2

Lecture 295 Footer

Section 24: Mega Project 1 - PSD to HTML - Converting to HTML/CSS

Lecture 296 Creating basic Files and Folders

Lecture 297 Creating HTML Markup with necessary META tags

Lecture 298 Downloading and Using Jquery

Lecture 299 Downloading and using Bootstrap

Lecture 300 Google Font

Lecture 301 Reset CSS

Lecture 302 Using FontAwesome Icon Font in Project

Lecture 303 Respond Js

Lecture 304 Exporting and Optimizing Images : Part 1

Lecture 305 Exporting and Optimizing Images : Part 2

Lecture 306 Header Navigation and Logo Markup with Explanation

Lecture 307 Challenge - Styling Custom Bootstrap Navigation : Part 1

Lecture 308 Challenge - Styling Custom Bootstrap Navigation : Part 2

Lecture 309 Hero Area : Content Markup and Styling : Part 1

Lecture 310 Hero Area : Content Markup and Styling : Part 2

Lecture 311 Secret to Non - Rectangular Background : The Easy Way

Lecture 312 Adding Particle Animation to Hero Area

Lecture 313 Animated Text

Lecture 314 Call to Action Button Hover Effect

Lecture 315 Fixed Header

Lecture 316 Fixed Header : Unique Solution for Transparent Background

Lecture 317 About Section

Lecture 318 Education and Experience

Lecture 319 Skills : Part 1

Lecture 320 Special CSS Trick to create Arrow

Lecture 321 Animated Loader

Lecture 322 Cool Trick Solution for symmetrical top and bottom non-rectangular Shape

Lecture 323 Trick to Create Underline Effect : 2 Ways Revealed

Lecture 324 Services Section : Markup and Styling

Lecture 325 Service Hover Effect

Lecture 326 Portfolio : HTML Markup

Lecture 327 Portfolio : Unique Hover Effect

Lecture 328 Portfolio : Plugin Initialization

Lecture 329 Portfolio : Adding Filterable Feature

Lecture 330 Finishing Up Portfolio Section

Lecture 331 Testimonial : Part 1

Lecture 332 Testimonial : Part 2

Lecture 333 Blog

Lecture 334 Contact Markup

Lecture 335 Contact Styling

Lecture 336 Footer

Lecture 338 Adjusting few styles to make the site look good in all screen width

Lecture 339 Smooth Scrolling and Auto Changing Active Nav Item

Lecture 340 Uploading site to Real Server

Lecture 341 Animated Loader Design in Photoshop

Lecture 342 Implementing Custom Page Loader to our website

Lecture 343 CSS Animations

Section 25: Final Project : PSD to React Website Conversion : Prep Work

Lecture 344 Installing VS Code

Lecture 345 Installing Node Js

Lecture 346 Intro to our PSD Template and Creating React Project in VS Code

Lecture 347 Understanding React Project Workflow

Lecture 348 Creating New Component and Summarization of React Project

Lecture 349 Using Bootstrap in React

Lecture 350 Studying our PSD Template and Noting down few Details

Lecture 351 Exporting Images from PSD Template

Lecture 352 Getting HIgh Resolution Images for free

Section 26: Final Project : PSD to React Website Conversion : Slider Section

Lecture 353 Slider : Part 1

Lecture 354 Slider : Part 2

Lecture 355 Slider : Part 3 : Overlay and Call to Action Buttons

Lecture 356 Creating Animated Slider

Lecture 357 Custom Slider Navigation and Pagination

Lecture 358 Zooming Background : Ken Burn Effect

Lecture 359 Call to Action Buttons : Hover Effects

Section 27: Final Project : PSD to React Website Conversion : Header Section

Lecture 360 Header Prep Work

Lecture 361 Fixed Header

Lecture 362 Custom Bootstrap Header : Markup and Styling

Lecture 363 Challenge : Adding Social Icons to Header

Lecture 364 Solution : Adding Social Icons to Header

Section 28: Final Project : PSD to React Website Conversion : React Routing

Lecture 365 Routing Flow

Lecture 366 Implementing Routing

Lecture 367 Fixed Header Issue Solution

Lecture 368 Dynamic Styles : Part 1 : Margin Top

Lecture 369 Dynamic Styles : Part 2 : Background Color

Section 29: Final Project : PSD to React Website Conversion : Store using Redux Toolkit

Lecture 370 Power Markup

Lecture 371 Creating Store using Redux Toolkit

Lecture 372 Retrieving Store Information

Lecture 373 Adding Styles to Power Section

Section 30: Final Project : PSD to React Website Conversion : Part 6

Lecture 374 Professor Section :part 1

Lecture 375 Professor : Part 2

Section 31: Final Project : PSD to React Website Conversion : Part 7

Lecture 376 Fields Part 1

Lecture 377 Fields Part 2

Lecture 378 Adding Styles to Fields Section

Lecture 379 Adding Fields to Routing

Lecture 380 Conditional Header Background Rendering for Home and other pages

Lecture 381 Fields Single Page : Read More

Lecture 382 Fields Single Page : Part 2

Lecture 383 Acknowledgement of issues

Lecture 384 Solving Logo Issue : Cocept of Absolute Path and Relative Path

Lecture 385 Solving Image Disappearing issue

Section 32: Final Project : PSD to React Website Conversion : Part 8

Lecture 386 Doctoral Plan

Lecture 387 Doctoral : Part1 : Left Part

Lecture 388 Doctoral : Part 2 : Right Part

Lecture 389 Class Section

Section 33: Final Project : PSD to React Website Conversion : Part 9

Lecture 390 Newsletter : Part 1

Lecture 391 Newsletter : Part 2

Lecture 392 Awards : Part 1

Lecture 393 Awards : Part 2 : Creating Awards Carousel

Lecture 394 Awards : Part 3 : Customizing Navigation arrows and Carousel Dots

Section 34: Final Project : PSD to React Website Conversion : Part 10

Lecture 395 Facilities : part 1

Lecture 396 Facilities : Part 2

Lecture 397 Limiting Information fetch to specific number for Home Page

Lecture 398 Solution to Layout Challenge

Lecture 399 Overlay Effect

Section 35: Final Project : PSD to React Website Conversion : Part 11

Lecture 400 Contact : Part 1

Lecture 401 Custom Dropdown Arrow : Part 1

Lecture 402 Custom Dropdown Arrow : Part 2

Lecture 403 Custom Dropdown Arrow : Part 3

Lecture 404 Map : Part 1 : Geolocation Project

Lecture 405 Map : part 2 : Geolocation Project

Section 36: Final Project : PSD to React Website Conversion : Part 12

Lecture 406 Form : Part 1

Lecture 407 Form : Part 2

Lecture 408 Form : Part 3: Styling our Form

Lecture 409 Working with Form Validation

Section 37: Final Project : PSD to React Website Conversion : Part 13

Lecture 410 Subscribe : Part 1

Lecture 411 Subscribe : Part 2

Lecture 412 Footer Section

If you want to become a Complete Front End Web Developer, this course is for you,If you want to Learn PSD to HTML/CSS , this course is for you,If you want to Learn Creating Responsive Websites , this course is for you,If you want to Learn Creating React JS SPA websites , this course is for you