React JS- Complete Guide for Frontend Web Development [2023] | Discount Coupon for Udemy Course
Become an expert React JS Developer. Learn HTML, CSS, JavaScript, ES6, React JS and jQuery. | Discount Coupon for Udemy Course
- 22 hours hours of on-demand video
- Full lifetime access
- Access on mobile and TV
- Certificate of completion
- 26 additional resources
- Learn to create basic web pages using HTML5
- Learn to style and add animations to bring those basic web pages to life using CSS3
- Learn the Javascript language from basic to advanced along with the Next Gen JS - ES6
- Learn to create responsive and interactive web pages using Javascript and jQuery
- Create user-friendly, beautiful, light and fast websites using React JS
- Become an expert front end developer using ReactJs
What's this course about?This course is a complete guide to become an expert front-end web developer. It contains all the tools and technologies that you should be proficient in work as a React Developer.We will go through the journey of learning HTML5, CSS3, Javascript, ES6, jQuery, and React JS.Each of these course modules has a project which you can work on. Along with the project problem statement video, you will also find the solution video for that project. It is advised to first try working on the project by yourself. Once you have completed working on it, you can see the solution video to know what are the best practices and the most optimized way to complete it.As you keep on creating new projects, start adding them to your GitHub repository so that by the end of the course you will be having a place to showcase all your work.You will definitely enjoy the journey while completing the course!Who's teaching you in this course?I am a Computer Science graduate highly rated instructor with a rating of 4.3 and more than 200k students on Udemy, I have been part of the corporate circle since his college days. In his early days, I was part of a startup team delivering production grid android apps. Currently, I am a lead developer at EdYoda. I’m responsible for the entire front-end development & integration with the back-end. React, Python, Django is my areas of expertise. I have been delivering corporate training for Android, React, Javascript, Python & Django. I have eyes for details & that makes him suited for delivering a finished product. I’m a fitness freak & working out is his favorite thing to do in his spare time.I want everyone should enjoy learning and I have shared my knowledge that gonna be helpful for React developers.Why ReactJs?You know Companies Worldwide Require React JS Developers.React.js is one of the most demanding frameworks in the market;31.3% of worldwide specialists are currently utilizing ReactJs. Some of the world’s top tech teams use the tool to design scalable, easy-to-maintain solutions — Netflix, PayPal, eBay, Airbnb, and more. Why are businesses so interested in React.js implementation? Here are the benefits of adopting the framework:Increased app development speed. The framework accepts HTML code input and has excellent subcomponent rendering support. Development teams can benefit from JSX as well — it’s an extension with a range of shortcuts that cuts the amount of code writing time.Improved code stability. React.js reduces the impact of change in the code file since the changes in parent components don’t affect the children. Such a data binding approach facilitates software testing and helps ensure stable app performance after update deployments.SEO-friendliness. React.js deals with the inability of search engine crawlers to process JS-heavy pages. Even a beginner with an entry-level react developer salary can deploy React on a server and use the virtual DOM to view the code as a regular web page in a browser.Robust toolkit. React.js has a wide range of debugging and interface design tools.Strong user community and an affordable remote react developer salary. Since a large number of teams are deploying the framework, the tool is regularly updated. There’s no shortage of user-generated content either — you can find dozens of helpful React tutorials and case studies to make the most out of the framework.Asking for a Senior react developer salary. It’s one of the most in-demand frameworks at the moment — that’s why business owners are willing to find professionals with a moderate mid-level react developer salary within and beyond their home regions.Enroll now!! see you in class.Happy learningTeam Edyoda Who this course is for:Beginners who want to learn Web Development from scratchFreshers who want to become a React Frontend DeveloperProgrammers who want to learn Javascript languageDevelopers who want to learn React JS
Course Content:
Sections are minimized for better readability, click the section title to view the course content
- HTML - Introduction01:54
Hey guys, in this course, we will learn all about HTML5.
We will start from basic topics like adding headings, paragraphs, images, etc and will move towards more advanced topics like adding forms, vector graphics, multimedia and so on.
Hope you are excited to start your journey to become a Web Developer!!
- HTML - Code Editor Setup05:23
Hey guys, in this video we will explore different code editor options. We will talk about - Notepad, Codepen.io and Visual Studio Code.
- HTML - Structure of an HTML Document03:33
Hey guys, in this video we will learn about the document structure of an HTML page, What are HTML tags, What different tags mean and much more.
- HTML - Adding Heading in a Webpage02:41
Hey guys, in this video we will learn all about heading in HTML.
- HTML - Adding Paragraph in a Webpage04:13
Hey guys, in this video we will learn how to add a paragraph in a webpage? How add line breaks? How to make text bold? How to make text italics? and much more.
- HTML - Adding Images in Web Pages06:09
Hey guys, in this video we will learn how to add images in an HTML Web Page
- HTML - Creating Ordered and Unordered Lists06:55
Hey guys, in this video we will learn all about Lists in HTML, Different types of lists and much more.
- HTML - Adding Styles and Formatting HTML Elements10:23
Hey guys, in this video we will learn How to add styles and format our HTML elements to make them look pretty and neat.
- HTML - Block and Inline Display Values06:51
Hey guys, in this video we will learn about Block and Inline Elements.
- HTML - Adding group styles using Class attribute06:06
Hey guys, in this video we will learn how to add styles to a group of HTML elements using the class attribute.
- HTML - Adding HyperLinks in Webpages04:16
Hey guys, in this video we will learn How to add links in an HTML Webpage.
- HTML - Using links to connect Webpages03:16
Hey guys, in this video we will learn how to redirect from one webpage to another.
- HTML - Uniquely Identify HTML Element by using ID attribute04:34
Hey guys, in this video we will see how to uniquely identify HTML elements by using the ID attribute.
- HTML - Mini-Project 1: Favorite Foods Webpage00:47
Hey guys, this is the project to create a static page of Favourite Foods.
Attempt this project to brush-up on the concepts that you have learned so far.
Use codepen.io to create this project.
- HTML - Mini-Project 1: Solution12:18
Hey guys, in this video we have designed the Solution for the Mini-Project 1: Favourite Foods Problem statement.
- HTML - What makes HTML5 Better?02:09
Hey guys, in this video we will learn about all the new features in HTML5.
- HTML - New Elements & Attributes in HTML500:52
Hey guys, in this video we will explore all the new elements and attributes in HTML5
- HTML - Design Page Structure Using Semantic Elements09:38
Hey guys, in this video we will learn how to design page structure using the HTML5 semantic elements.
- HTML - New Semantic Elements: <details> and <summary>03:24
Hey guys, in this video we will explore how to use the new <details> and <summary> semantic tags.
- HTML - Introduction to Tables06:25
Hey guys, in this video we will learn how to design tables in HTML.
- HTML - Span table rows and columns02:55
Hey guys, in this video we will learn how to span rows and columns across tables.
- HTML - Design layouts using Tables05:49
Hey guys, in this video we will learn how to design a gallery grid using tables.
- HTML Tables - Practice Problem 100:41
Hey guys, this is the practice problem for the tables module. Try it on codepen.io.
- HTML Tables - Practice Problem 1: Solution13:31
Hey guys, this is the solution for the Table Practice Problem that I gave in the previous video.
- HTML - Introduction to Forms04:03
Hey guys, in this video we will learn How to create a basic login form using HTML.
- HTML - Form Input Types08:15
Hey guys, in this video we will explore more about input types in forms
- HTML - Adding Styles to Forms05:41
Hey guys, in this video we will learn how to add styling to HTML form and it's elements.
- HTML - Form Methods: GET and POST05:17
Hey guys, in this video we learn all about the two form methods - GET and POST.
- HTML - New Form Elements03:46
Hey guys, in this video we will explore the new form elements introduced in HTML5.
- HTML - New Form Input Types05:50
Hey guys, in this video we will explore the new form input types introduced in HTML5
- HTML - New Form Input Attributes03:53
Hey guys, in this video we will explore the new form input attributes introduced in HTML5.
- HTML - Form Validation05:08
Hey guys, in this video we will learn about Form Validation.
- HTML - Forms Practice Problem 100:48
Hey guys,
These are the details for the Forms Practice Problem 1:
Image Links:
Google Logo: http://pluspng.com/img-png/google-logo-png-open-2000.png
Facebook Logo: https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/facebook_circle-512.png
Github Logo: https://image.flaticon.com/icons/svg/25/25231.svg
LinkedIn Logo: https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/linkedin_circle-512.png
Webpage:
Background Color Code: #f2f6ff
Form:
Border Color: #ccc
Border Width: 1px
Form Heading:
Font Size: 32px
Padding-Top: 56px
Padding-Bottom: 32px
Social Icons:
Width: 50px
Height: 50px
Padding Top and Bottom: 16px
Padding Left and Right: 32px
Input Fields Container:
Padding Top: 80px
Padding Bottom: 40px
Padding Left and Right: 80px
Input Box:
Font Size: 18px
Padding Bottom: 12px
Margin Bottom: 36px
Border Top, Left, Right: 0
Border Bottom: 1px solid #ccc
Submit Button:
Background Color: #0056ff
Padding Top and Bottom: 12px
Padding Left and Right: 24px
Font Size: 18px
Font Color: white
Border: None
Have Fun !!
- HTML - Forms Practice Problem 1 - Solution10:25
Hey guys, this is the video solution for the Forms Practice Problem 1.
- HTML - Adding Videos in a Webpage03:33
Hey guys, in this video we will learn how to add videos in a webpage.
- HTML - Adding Audio in a Webpage03:13
Hey guys, in this video we will learn how to add audio files in a webpage.
- HTML - The <embed> element01:48
Hey guys, in this video we will learn how to play unsupported video and audio files in HTML5
- HTML - Embed Youtube Videos in a Webpage02:57
Hey guys, in this video we will learn how to embed a youtube video in an HTML page
- HTML - Introduction to SVG08:53
Hey guys, in this video we will learn about:
What is SVG in HTML5
How to create a line using SVG
- HTML - Create circle using SVG07:00
Hey guys, in this video we will learn how to create a circle using SVG element.
- HTML - Create a rectangle using SVG05:48
Hey guys, in this video we will learn how to create a rectangle using SVG.
- HTML - Final Project01:43
Hello guys, this is Final Project for the HTML Module.
Give it your best. Once you have completed it, you can add the project to the GitHub repository.
You need to create a new GitHub repository and push the local project files to this repository.
You can find a PDF file in the resources section that will help you push your local code to the GitHub repository.
I can't wait to see what all you guys design. All the Best :)
- CSS - Introduction02:29
Hey guys, in this module we will learn all about CSS right from the basic topics like styling texts and images to advanced topics like responsive design and CSS animations.
After completing this module you will be able to convert your normal HTML structure to a beautiful static web page with a nice touch of animations which will make it more interesting!
This is the introductory video of CSS. In this video, we will talk about
What is CSS?
What is the syntax for CSS?
What are selectors?
What are the different ways to select the HTML element?
Hope you are excited!!
- CSS - How to use CSS?11:33
Hey guys, in this video we will learn about different ways to write CSS in HTML - Inline CSS, Internal CSS and External CSS.
- CSS - Styling Text11:13
Hey guys, in this video we will learn how to add styles to text using CSS.
- CSS - Adding Borders05:48
Hey guys, in this video we will learn all about Borders in CSS.
- CSS - Margin and Padding05:15
Hey guys, in this video we will learn all about margin and padding in CSS.
- CSS - Styling Lists05:17
Hey guys, in this video we will learn how to style lists using CSS.
- CSS - Styling Links05:11
Hey guys, in this video we will learn how to add styles to links using CSS.
- CSS - Styling Buttons06:54
Hey guys, in this video we will learn how to add styles to HTML Buttons.
- CSS - Adding Icons05:44
Hey guys, in this video we will learn how to add icons to buttons.
- CSS - Working with Display Values04:04
Hey guys, in this video we will learn about different display values and how to change these values using CSS.
- CSS - Display value: Inline-Block06:50
Hey guys, in this video we will learn how to work with display value inline-block.
- CSS - Positioning HTML Elements Part-108:20
Hey guys, in this video we will learn about different position values and how we can use them to position our HTML elements.
- CSS - Positioning HTML Elements Part-203:20
Hey guys, in this video we will learn how to position HTML elements using CSS position property.
- CSS - Handling Content Overflow03:27
Hey guys, in this video we will learn how to handle overflowing content using CSS.
- CSS - Floating HTML Elements03:38
Hey guys, in this video we will learn how to float HTML elements left and right.
- CSS - Box Model03:57
Hey guys, in this video we will learn about the CSS Box Model.
- CSS - Box Sizing03:53
Hey guys, in this video we will learn about the box sizing property of CSS.
- CSS - Adding Shadows04:54
Hey guys, in this video we will learn How to add shadows to text and HTML elements.
- CSS - Combinators Part-105:23
Hey guys, in this video we will learn how to combinators to select HTML elements for styling.
- CSS - Combinators Part-206:20
Hey guys, in this video we will learn about combinators and how to use them to select HTML elements for styling.
- CSS - Pseudo Classes Part-106:18
Hey guys, in this video we will learn How to use pseudo classes.
- CSS - Pseudo Classes Part-207:48
Hey guys, in this video we will learn How to use Pseudo classes.
- CSS - Pseudo Elements07:30
Hey guys, in this video we will learn about Pseudo Elements.
- CSS - Adding Backgrounds05:21
Hey guys, in this video we will learn How to add background to HTML elements.
- CSS - Gradients07:43
Hey guys, in this video we will learn about Linear and Radial Gradient.
- CSS - Handling Text Overflow04:01
Hey guys, in this video we will learn about handling text overflow.
- CSS - Practice Problem-1: Create Google.com Look-Alike00:59
Hey guys, please find below the details and styles required for the project.
All the Best!!
Body
font-family: Arial, sans-serif;
Menu Items:
font-size: 13px;
color: rgba(0, 0, 0, 0.87)
Profile Pic
width: 32px;
height: 32px;
Search Box
width: 582px
color: #222
border: 1px solid #dfe1e5;
font-size: 13px
padding: 14px
border-radius: 24px
Search Box: OnHover and OnFocus
box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28);
border-color: rgba(223,225,229,0);
Button
background color #f2f2f2
color: #5F6368;
font-size: 14px;
height: 36px;
padding: 0 16px;
background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
border: 1px solid transparent;
box-shadow: 0 1px 1px rgba(0,0,0,0);
color: #222;
Button: On-Hover
background-image:linear-gradient(top,#f8f8f8,#f1f1f1);
border: 1px solid #c6c6c6;
box-shadow: 0 1px 1px rgba(0,0,0,0.1);
color: #222;
Dropdown Application Card:
width: 285px;
padding: 28px;
border: 1px solid #ccc;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
App Item
display: inline-block
width: 84px;
App Item: On-Hover
border: 1px solid rgba(0, 0, 0, 0.2);
App Item Image:
width: 50px;
height: 50px;
App Item Label:
color: rgba(0,0,0,0.87)
Images:
Google Center Logo: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png
Voice Search Icon: https://www.gstatic.com/images/branding/googlemic/2x/googlemic_color_24dp.png
App - Google Search: http://pluspng.com/img-png/google-logo-png-open-2000.png
App - Maps: http://pluspng.com/img-png/google-maps-png-google-maps-icon-1600.png
App - Drive: https://upload.wikimedia.org/wikipedia/commons/d/da/Google_Drive_logo.png
App - Calendar: https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Google-calendar.svg/1024px-Google-calendar.svg.png
App - Photos: https://blogs.acu.edu/innovation_foundry/files/2017/06/google_photos1600.png
App - Keep: https://i.pinimg.com/originals/09/96/92/099692d1d651d51b7caf3040fce0f748.png
App Menu Icon:
Use Google Material Icons:
Add this in HTML head element: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Use this to generate icon: <i id="dropdown-menu" class="material-icons">apps</i>
- CSS - Practice Problem-1: Create Google.com Look-Alike Solution31:49
Hey guys, in this video we will try to create the webpage that I gave as an assignment in the previous video.
- CSS - Introduction to Responsive Web Design01:19
Hey guys, in this video we will learn about Responsive Web Design.
- CSS - Viewport04:55
Hey guys, in this video we will learn about Viewport.
- CSS - Dynamic Size04:31
Hey guys, in this video we will talk about Dynamic Width and Height.
- CSS - Introduction to Media Queries03:27
Hey guys, in this video we will learn about Media Queries.
- CSS - Responsive Webpage Design using Media Queries13:00
Hey guys, in this video we will create a responsive webpage using Media Queries.
- CSS - Flex Layout02:42
Hey guys, in this video we will learn about Flex Layout.
- CSS - Flex Container Properties07:21
Hey guys, in this video we will learn about Flex Container Properties.
- CSS - Align Flex Items07:41
Hey guys, in this video we will learn How to align Flex Items.
- CSS - Flex Item Properties05:26
Hey guys, in this video we will learn about Flex Item Properties.
- CSS - Design Topbar using Flex03:52
Hey guys, in this video we will learn How to design topbar using Flex layout.
- CSS - Responsive Grid using Flex04:20
Hey guys, in this video we will learn How to design a Responsive Grid using Flex.
- CSS - Transform Property07:38
Hey guys, in this video we will learn all about transform property.
- CSS - Align Elements using Transform Property03:01
Hey guys, in this video we will learn How to align items in center using transform property.
- CSS - Transition Property07:01
Hey guys, in this video we will learn about the transition property.
- CSS - Animation Property08:47
Hey guys, in this video we will learn all about animation property.
- CSS - Flying Rocket Animation using Animation Property02:50
Hey guys, in this video we will learn how to animate HTML Elements
- CSS - Introduction to Grid Layout02:31
Hey guys, in this video we will learn about Grid Layout.
- CSS - Grid Container Properties08:28
Hey guys, in this video we will talk about the Grig Container properties.
- CSS - Grid Item Properties08:36
Hey guys, in this video we will talk about the Grig Item properties.
- CSS - Final Project Problem Statement02:48
Hey guys, please find below all the details required to design each section.
Demo Website: https://demoapi-43d03.firebaseapp.com/
Reference Image: https://edyoda.s3.ap-south-1.amazonaws.com/public/Project++Page+Design+-+Color+Codes-01.png
========================================
Section 1:
Background Image: https://edyoda.s3.ap-south-1.amazonaws.com/public/landing-background.png
Topbar Logo URL: https://mobirise.com/extensions/organicamp/assets/images/logo1.jpg
Menu Items:
Font Family: 'Poppins', sans-serif;
Text Color: black;
Font Thickness: 600;
Font Size: 14px;
Dropdown:
Font Family: 'Poppins', sans-serif;
Top Border: 2px solid rgb(170, 210, 54);
Background Color: white;
Shadow: 0 2px 5px #ccc;
Buy-Now Button:
Font Family: 'Poppins', sans-serif;
Text Size: 12px;
Font Thickness: 600;
Text Color: white;
Background Color: rgb(170, 210, 54);
Padding: 9px 34px;
Border Radius: 4px;
Section 1 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;
Letter Spacing: 8.8px;
Line Height: 1.2;
Section 1 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Font Thickness: 400;
Color: #8b8b99;
==============================
Section 2:
Step 1:
icon: <i class="fa fa-cut"></i>
Background color: #5acda6
Step 2:
icon: <i class="fa fa-paint-brush"></i>
Background color: #91ac41;
Step 3:
icon: <i class="fa fa-shopping-bag"></i>
Background color: #e4b476;
Step 4:
icon: <i class="far fa-smile"></i>
Background color: #f69dad;
Step Icon Width/Font-Size: 96px;
Step Label:
Font Family: 'Poppins', sans-serif;
Font Thickness: 600;
Text Size: 24px;
Step Description:
Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Line Height: 1.6;
==============================
Section 3:
Background color: #f7eee2;
Fresh Food Text:
Text Color: #91ac41;
Text Size: 24px;
Font Family: 'Caveat', cursive;
Margin: 0;
Margin Top: 35px;
Section 3 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;
Section 3 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 500;
Text Color: #8b8b99;
Letter Spacing: 0.5px;
Icon 1:
<i class="fa fa-camera">
Icon 2:
<i class="fa-rocket fa">
Icon 3:
<i class="fab fa-twitter">
Icon 4:
<i class="fab fa-weixin"></i>
Item Icon:
Background Color: #e3b375
Width/Font-Size: 60px;
Item Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 24px;
Font Thickness: 600;
Item Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Letter Spacing: 0.5px;
Font Thickness: 500;
Text Color: #8b8b99;
==============================
Section 4:
Fresh Food Text:
Text Color: #91ac41;
Text Size: 24px;
Font Family: 'Caveat', cursive;
Margin: 0;
Margin Top: 35px;
Section 4 Heading:
Font Family: 'Poppins', sans-serif;
Text Size: 44px;
Font Thickness: 600;
Section 4 Description:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 500;
Text Color: #8b8b99;
Letter Spacing: 0.5px;
Testimonial Image 1:
URL: https://mobirise.com/extensions/organicamp/assets/images/face5.jpg
Testimonial Image 2:
URL: https://mobirise.com/extensions/organicamp/assets/images/face6.jpg
Testimonial Image 3:
URL: https://mobirise.com/extensions/organicamp/assets/images/face7.jpg
Testimonial Card:
Background Color: #f5f6fb;
Top-left Border Radius: 45px;
Bottom-left Border Radius: 45px;
Bottom-right Border Radius: 45px;
Testimonial Card Image:
Border Radius: 50%;
Width: 80px;
Testimonial Card Message:
Font Family: 'Poppins', sans-serif;
Text Size: 14px;
Letter Spacing: 0.5px;
Font Style: Italic;
Text Color: #8b8b99;
Testimonial Card Author:
Font Family: 'Poppins', sans-serif;
Text Size: 16px;
Font Thickness: 600;
Testimonial Card Author:
Font Family: 'Poppins', sans-serif;
Text Size: 12px;
Text Color: #8b8b99;
Font Style: Italic;
==============================
Section 5:
Left Image URL: https://mobirise.com/extensions/organicamp/assets/images/19.jpg
Right Background Image: https://edyoda.s3.ap-south-1.amazonaws.com/public/strawberry-white.png
Subscribe Button:
Background Color: #f69dad;
==============================
Section 6:
Stats Item Green Color:
==============================
Section 7:
Video URL: https://player.vimeo.com/video/275412279
==============================
Section 8:
Figure it out. The styles are same as other sections.
==============================
Section 9:
Footer Background Color: #232323
==============================
ALL THE BEST!!
- JavaScript - Introduction02:53
Hey guys, in this module we will learn all about JavaScript.
We will start from the basic topics like variables, code structure, arrays, etc and move on to more advanced topics like manipulating DOM, connecting to the backend, AJAX, JSON, jQuery, etc.
This is gonna be an amazing learning experience.
This is the introduction video for the JavaScript - Basics to Advanced course.
Hope you are excited!!
- JavaScript - Introduction to Variables, Operators and Expressions07:42
Hey guys, in this video we have talked about some building blocks of a programming language like variables, operators, expressions and data types.
- JavaScript - Variables08:04
Hey guys, in this video we will learn about JavaScript Variables.
Practice Problems:
Which of these variables have valid names? If a variable name is not valid then also explain the reason. Best of Luck!!
1. &alpha1
2. NUM1
3. DATE-5
4. TotalSum_
5. 12Byby
6. num1
7. super$$
8. Object
9. StringNew
10. $rankInClass
Codepen URL: https://codepen.io/qaifikhan/pen/BMLrQj
My Twitter Handle: @qaifikhan
- JavaScript - Numbers07:10
Hey guys, in this video we will learn about Numbers in JavaScript.
Practice Problems:
Try to answer the following questions. Also, try to explain why do you think that your answer is correct. Best of Luck!!
1. console.log(0 / 0)
2. console.log(0 / 5)
3. console.log(3 * 'a')
4. console.log('a' * 3)
5. console.log('b' + 4)
6. console.log(4 + 'b')
7. console.log(5 - 'c')
8. console.log('c' - 5)
Codepen URL: https://codepen.io/qaifikhan/pen/BMLxyd
My Twitter Handle: @qaifikhan
- JavaScript - In-Built Number Functions08:14
Hey guys, in this video we will learn about Number Functions in JavaScript.
Practice Problems:
Try to answer the following questions. Also, try to explain why do you think your answer is correct. Best of Luck!!
1. console.log(toString(100))
2. console.log(parseInt('44'))
3. console.log(parseInt('22.222'))
4. console.log(parseInt('Banana'))
5. console.log(parseFloat(12))
6. console.log(parseFloat(13.3))
7. var num1 = 10; console.log(num1.toFixed(2))
8. var num1 = 15.456789; console.log(num1.toFixed())
9. var num1 = 15.456789; console.log(number.toFixed(2))
10. var num1 = 15.456789; console.log(num1.toFixed(3))
Codepen URL: https://codepen.io/qaifikhan/pen/daWYge
My Twitter Handle: @qaifikhan
- JavaScript - Strings07:20
Hey guys, in this video we will learn about Strings in JavaScript.
Practice Problems:
Try to answer the following questions. Also, try to explain why do you think your answer is correct. Best of Luck!!
1. console.log('JavaScript is Cool")
2. console.log('I'm gonna learn JavaScript')
3. console.log("This is a \"test\" string")
4. console.log('This is another /'test/' string')
5. console.log("How about this string??")
Codepen URL: https://codepen.io/qaifikhan/pen/rPmBoB
My Twitter Handle: @qaifikhan
- JavaScript - In-Built String Functions Part-111:13
Hey guys, in this video we will learn about Inbuilt String Functions in JavaScript.
Practice Problems:
Try to answer the following questions. Also, try to explain why do you think your answer is correct. Best of Luck!!
var mStr = "This is my test string to practice the JavaScript string function concepts. This is gonna be fun."
1. Find the length of the first sentence in the string.
2. Find the length of the second sentence in the string.
3. Find the first and last occurrence of the word "This".
4. Find the sub-string with length 12 from the START of the string mStr.
5. Find the sub-string with length 12 from the END of the string mStr.
Codepen URL: https://codepen.io/qaifikhan/pen/ZwKELb
My Twitter Handle: @qaifikhan
- JavaScript - In-Built String Functions Part-213:47
Hey guys, in this video we will learn about Inbuilt String Functions in JavaScript.
Practice Problems:
Try to answer the following questions. Also, try to explain why do you think your answer is correct. Best of Luck!!
var str1 = 'Today is';
var str2 = ' A beautiful day '
var str3 = ' In Hawaii. '
Result = 'Today is a beautiful day in Hawaii.'
1. Use the str1, str2, str3 to create the Result string. Keep the extra spaces, lowercase and uppercase letters in mind.
var mStr = 'Mo Tu We Th Fr Sa Su'
2. Convert this string to an array that holds different days. Also, capitalize all the characters.
Codepen URL: https://codepen.io/qaifikhan/pen/exWmJE
My Twitter Handle: @qaifikhan
- JavaScript - Null and Undefined Values03:27
Hey guys, in this video we will learn about Null and Undefined values in JavaScript.
Practice Problems:
Try to answer the following questions. Also, try to explain why do you think your answer is correct. Best of Luck!!
var mNum;
console.log(mNum)
var mNum = null
console.log(mNum)
1. What will be the result of the first and second console.log()?
console.log(undefined == null)
console.log(undefined === null)
2. What will be the result of the first and second console.log().
Codepen URL: https://codepen.io/qaifikhan/pen/Oqmraz
My Twitter Handle: @qaifikhan
- JavaScript - Conditional Statement: If-else04:12
Hey guys, in this video we will learn about If-else conditional statement in JavaScript.
Practice Problems:
Answer the following questions. Use code-pen to execute the code. Best of Luck!!
Q1. Take the values given below of length and breadth of a rectangle and check if it is square or not. Change values and see if your code works or not.
var length=200;
var breadth=200;
Q2. Write some code to check which number is greatest. Change values and see if your code works or not.
var num1=5, num2=8, num3=20;
Q3. A school has following rules for grading system:
a. Below 25 - F
b. 25 to 45 - E
c. 45 to 50 - D
d. 50 to 60 - C
e. 60 to 80 - B
f. Above 80 - A
var enteredMarks = 77
Change the value of enteredMarks and print the corresponding grade.
Q4. var numberOfItemPurchased = 8
A shop will give a discount of 10% if the cost of the purchased quantity is more than 1000. Suppose, one unit will cost 100. Change the value of numberOfItemPurchased and print total cost for the user.
Codepen URL: https://codepen.io/qaifikhan/pen/GemzZx
My Twitter Handle: @qaifikhan
- JavaScript - Conditional Statement: Switch06:45
Hey guys, in this video we will learn about Switch Conditional Statement in JavaScript.
Practice Problems:
Answer the following questions. Use code-pen to execute the code. Best of Luck!!
Q1. Write a program to print the number of days in a month using a switch case. Change the value of monthNumber and check if your code works fine.
var monthNumber = 3;
Example:
monthNumber = 3
Output:
Month = March
Total number of days = 31
Q2. Write a program to check vowel or consonant using switch case. Change the value of enteredAlphabet and check if your code works fine.
var enteredAlphabet = 'd'
Example:
enteredAlphabet: c
Output: 'c' is consonant
Q3. Write a program to check even or odd number using switch case. Change the value of enteredNumber and check if your code works fine.
var enteredNumber = 41
Example:
enteredNumber: 41
Output: 41 is an odd number
Codepen URL: https://codepen.io/qaifikhan/pen/wOdNbV
My Twitter Handle: @qaifikhan
- JavaScript - Arithmetic Operators06:37
Hey guys, in this video we will learn about Arithmetic Operators in JavaScript.
Practice Problems:
Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.
Best of Luck!!
Q. What will be printed in the console.
var num1 = 1 + 5;
var num2 = num1 / 4;
var num3 = 1 + 5;
var num4 = num3 / 4;
console.log(num2 + " " + num4);
Q. What will be printed in the console.
var a = 1;
var b = 2;
var c;
var d;
c = ++b;
d = a++;
c++;
b++;
++a;
console.log(a + " " + b + " " + c);
Q. What will be printed in the console.
var input = 7;
var output1 = ++input + ++input + ++input;
var output2 = input++ + input++ + input++;
var output3 = input++ + ++input + input++;
console.log(output1 + ' ' + output2 + ' ' + output3);
Codepen URL: https://codepen.io/qaifikhan/pen/RzwLWd
My Twitter Handle: @qaifikhan
- JavaScript - Assignment Operators05:08
Hey guys, in this video we will learn about Assignment Operators in JavaScript.
Practice Problems:
Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.
Best of Luck!!
Q. With x = 0, which of the following statements will produce a value of 1?
1. x++;
2. x = x + 1;
3. x += 1;
Q. With x = 1, which of the following statements will produce a value of 0?
1. x--;
2. x = x - 1;
3. x -= 1;
Q. What will be the result of following statement?
var num = 100;
num += 5 * 10 / 2;
Q. What will be the result of following statement?
var num = 100;
num *= 2 * 10 / 5;
Q. What will be the result of following statement?
var num = 100;
num /= 2 * 8 - 15;
Codepen URL: https://codepen.io/qaifikhan/pen/gNOXwg
My Twitter Handle: @qaifikhan
- JavaScript - Comparison and Logical Operators07:07
Hey guys, in this video we will learn about Comparison and Logical Operators in JavaScript.
Practice Problems:
Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.
Best of Luck!!
Q. What will be printed in the console?
var a = 10;
var b = 5;
var c = 12;
var e = 8;
var d;
d = parseInt((a * (c - b) / e + (b + c)) <= (e * (c + a) / (b + c) + a));
console.log(d);
if (d == 1){
console.log((a * (c - b) / e + (b + c)));
} else {
console.log((e * (c + a) / (b + c) + a));
}
Q. What will be printed in the console?
var n = 2;
var p = 4;
var q = 5;
var w = 3;
if ( !((p * q) /n <= (q * w) + n/p )) {
console.log( ++p + w++ + " " + ++n);
}
else {
console.log(--p + q-- + " " + --n);
}
Codepen URL: https://codepen.io/qaifikhan/pen/wOdOPM
My Twitter Handle: @qaifikhan
- JavaScript - Implicit Type Coercion08:23
Hey guys, in this video we will learn about Implicit Type Coercion in JavaScript.
Practice Problems:
Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.
Best of Luck!!
Q. What will be printed in the console.
console.log(true + false)
console.log(12 / "6")
console.log("number" + 15 + 3)
console.log(15 + 3 + "number")
console.log(1 > null)
console.log("foo" + + "bar")
console.log('true' == true)
console.log(false == 'false')
console.log(null == '')
console.log(!!"false" == !!"true")
Implicit Coercion Table: https://dorey.github.io/JavaScript-Equality-Table/
Codepen URL: https://codepen.io/qaifikhan/pen/KEmYrr
My Twitter Handle: @qaifikhan
- JavaScript - Explicit Type Coercion05:28
Hey guys, in this video we will learn about Explicit Type Coercion in JavaScript.
Practice Problems:
Answer the following questions WITHOUT executing the code in codepen. Also, explain why do you think your answer is correct.
Best of Luck!!
Q. A. What will be printed in the console?
String(123)
String(-12.3)
String(null)
String(undefined)
String(true)
String(false)
Q. B. What will be printed in the console?
Boolean('')
Boolean('Hello')
Boolean(0)
Boolean(200)
Boolean(-0)
Boolean(-200)
Boolean(NaN)
Boolean(null)
Boolean(undefined)
Boolean(false)
Q. C. What will be printed in the console?
Number(null)
Number(undefined)
Number(true)
Number(false)
Number(" 12 ")
Number("-12.34")
Number("\n")
Number(" 12s ")
Number(123)
Codepen URL: https://codepen.io/qaifikhan/pen/wOdbGY
My Twitter Handle: @qaifikhan
- JavaScript - Objects05:11
Hey guys, in this video we will learn about Objects in JavaScript.
Codepen URL: https://codepen.io/qaifikhan/pen/qvmGwp
My Twitter Handle: @qaifikhan
- JavaScript - Arrays Part 106:33
Hey guys, in this video we will learn about Arrays in JavaScript.
Codepen URL: https://codepen.io/qaifikhan/pen/zbwVaa
My Twitter Handle: @qaifikhan
- JavaScript - Arrays Part 206:11
Hey guys, in this video we will learn about Arrays in JavaScript.
Practice Problems: Coming Soon. Stay tuned.
Codepen URL: https://codepen.io/qaifikhan/pen/gEWVrw
My Twitter Handle: @qaifikhan
- JavaScript - Introduction to Loops01:54
Hey guys, in this video we have talked about loops. Check it out.
- JavaScript - While Loop02:07
Hey guys, in this video we will learn about While Loops in JavaScript.
Codepen URL: https://codepen.io/qaifikhan/pen/EMmqza
My Twitter Handle: @qaifikhan
- JavaScript - For Loops04:54
Hey guys, in this video we will learn about For loops in JavaScript.
Codepen URL: https://codepen.io/qaifikhan/pen/EMXZQE
My Twitter Handle: @qaifikhan
- JavaScript - Functions05:39
Hey guys, in this video we will talk about Functions in JavaScript.
Codepen URL: https://codepen.io/qaifikhan/pen/YozLYa
My Twitter Handle: @qaifikhan
- JavaScript - Function Arguments08:31
Hey guys, in this video we will talk about Function Arguments.
Codepen URL: https://codepen.io/qaifikhan/pen/mdbENJx
My Twitter Handle: @qaifikhan
- JavaScript - Scope and Environment09:05
Hey guys, in this video we will talk about Scope and Environment of Variables and Functions.
My Twitter Handle: @qaifikhan
- JavaScript - Variable Hoisting03:45
Hey guys, in this video we will talk about Variable Hoisting.
My Twitter Handle: @qaifikhan
- JavaScript - Function Hoisting04:55
Hey guys, in this video we will talk about Function Hoisting.
My Twitter Handle: @qaifikhan
- JavaScript - Introduction to DOM06:05
Hey guys, in this video we will talk about Document Object Model.
My Twitter Handle: @qaifikhan
- JavaScript - Select HTML Elements08:30
Hey guys, in this video we will learn how to select HTML elements using:
getElementById()
getElementsByClassName()
getElementsByTagName()
My Twitter Handle: @qaifikhan
- JavaScript - Query Selectors04:58
Hey guys, in this video we will talk about Query Selectors -
querySelector()
querySelectorAll()
My Twitter Handle: @qaifikhan
- JavaScript - Update HTML Elements12:31
Hey guys, in this video we will learn how to update HTML element content and attributes using JavaScript.
My Twitter Handle: @qaifikhan
- JavaScript - Updating Styles12:43
Hey guys, in this video we will learn how to update styles of an HTML element.
My Twitter Handle: @qaifikhan
- JavaScript - Intro to Events13:46
Hey guys, in this video we will talk about Events, Event Listeners and Event Handlers.
My Twitter Handle: @qaifikhan
- JavaScript - Add and Remove Classes from HTML Elements10:21
Hey guys, in this video we will learn how to add and remove classes to and from HTML elements using JavaScript.
My Twitter Handle: @qaifikhan
- JavaScript - Getting Styles14:06
Hey guys, in this video we will learn how to get styles of HTML elements using JavaScript
My Twitter Handle: @qaifikhan
- JavaScript - Form Events12:37
Hey guys, in this video we will learn about Form Events
Event References: https://developer.mozilla.org/en-US/docs/Web/Events
My Twitter Handle: @qaifikhan
- JavaScript - Keyboard Events07:50
Hey guys, in this video we will learn about Keyboard Events
Please download the below files for assignment use:
Audio Files: https://drive.google.com/open?id=1eW0q8xrMv3sBilXoWmre98kpuvhp4jH3
Event References: https://developer.mozilla.org/en-US/docs/Web/Events
My Twitter Handle: @qaifikhan
- JavaScript - Mouse Events14:07
Hey guys, in this video we will learn about Mouse Events
Event References: https://developer.mozilla.org/en-US/docs/Web/Events
My Twitter Handle: @qaifikhan
- JavaScript - Create HTML Elements - Part 115:08
Hey guys, in this video we will learn how to create new HTML elements using JavaScript
My Twitter Handle: @qaifikhan
- JavaScript - Create HTML Elements - Part 210:26
Hey guys, in this video we will create the web app feature I gave you to design in the previous video.
My Twitter Handle: @qaifikhan
- JavaScript- Update and Delete HTML Elements08:32
Hey guys, in this video we will learn how to replace and delete HTML elements using JavaScript.
My Twitter Handle: @qaifikhan
- JavaScript - Introduction to Browser Object Model09:51
Hey guys, in this video we will learn about Browser Object Model.
My Twitter Handle: @qaifikhan
- JavaScript - Screen and Navigator Object05:04
Hey guys, in this video we will learn about the Screen and Navigator object.
My Twitter Handle: @qaifikhan
- JavaScript - History and Location Object05:03
Hey guys, in this video we will learn about History and Location object.
My Twitter Handle: @qaifikhan
- JavaScript - Mini-Project 1: Smartwatch Showcase01:05
Hey guys, this is an assignment video.
You can use the Images and styles given below to complete the assignment.
Watch Skin URLs:
Red: https://i.imgur.com/PTgQlim.png
Black: https://i.imgur.com/iOeUBV7.png
Blue: https://i.imgur.com/Mplj1YR.png
Pink: https://i.imgur.com/Zygu7I3.png
Purple: https://i.imgur.com/xSIK4M8.png
Color Code:
Blue - #565681
Purple - #8a5362
Black - #23211f
Red - #ca3d22
Pink - #e9c7be
Font Family:
Montserrat
Source Sans Pro
You have to complete the assignment on codepen and share the codepen URL in the Q&A section below.
All the best!!
My Twitter Handle: @qaifikhan
- JavaScript - Mini-Project 2: Calculator App00:50
Hey guys, this is an assignment video.
Use the background image given below:
Background Image URL: https://i.imgur.com/mSPU63U.jpg
You have to complete the assignment on codepen and share the codepen URL in the Q&A section below.
My Twitter Handle: @qaifikhan
- JavaScript - Introduction to Regular Expressions05:22
Hey guys, in this video we will talk about Regular Expressions.
My Twitter Handle: @qaifikhan
- JavaScript - Meta-characters and Character Classes09:59
Hey guys, in this video we will talk about Meta characters and Character classes in Regular Expressions.
My Twitter Handle: @qaifikhan
- JavaScript - Regex Quantifiers10:09
Hey guys, in this video we will talk about Quantifiers in Regular Expressions.
My Twitter Handle: @qaifikhan
- JavaScript - Using Regex inside JavaScript07:17
Hey guys, in this video we will learn how to use Regular Expressions inside the JavaScript code.
My Twitter Handle: @qaifikhan
- JavaScript - Regex Groups10:36
Hey guys, in this video we will learn about Groups in Regular Expressions.
My Twitter Handle: @qaifikhan
- JavaScript - Form Validation using Regex08:37
Hey guys, in this video we will try a form validation problem using regular expressions.
My Twitter Handle: @qaifikhan
- JavaScript - Introduction to Object Oriented Programming04:32
Hey guys, in this video we will learn about Object Oriented Programming concepts in JavaScript.
My Twitter Handle: @qaifikhan
- JavaScript - The "this" Keyword04:56
Hey guys, in this video we will talk about the "this" keyword in JavaScript.
My Twitter Handle: @qaifikhan
- JavaScript - Constructor Functions06:08
Hey guys, in this video we will talk about Prototypes or Constructor Functions in JavaScript.
My Twitter Handle: @qaifikhan
- JavaScript - Inheritance and Prototype Chain04:29
Hey guys, in this video we will learn about Inheritance and Prototype Chains in JavaScript.
My Twitter Handle: @qaifikhan
- JavaScript - Prototype Implementation08:45
Hey guys, in this video we will learn How to implement inheritance in JavaScript.
My Twitter Handle: @qaifikhan
- JavaScript - Understanding Frontend and Backend02:08
Hey guys, in this video we will talk about frontend and backend.
My Twitter Handle: @qaifikhan
- JavaScript - HTTP Request and Response04:21
Hey guys, in this video we will learn about HTTP Request and Response.
My Twitter Handle: @qaifikhan
- JavaScript - Introduction to JSON08:03
Hey guys, in this video we will learn about JavaScript Object Notation also known as JSON.
My Twitter Handle: @qaifikhan
- JavaScript - Introduction to AJAX05:56
Hey guys, in this video we will learn about AJAX.
My Twitter Handle: @qaifikhan
- JavaScript - Handling HTTP Response04:52
Hey guys, in this video we will learn about handling the response of AJAX calls.
My Twitter Handle: @qaifikhan
- JavaScript - Working with HTTP Response Data05:14
Hey guys, in this video we will learn how to use HTTP response data to render HTML elements.
My Twitter Handle: @qaifikhan
- JavaScript - Making HTTP Post Requests08:52
Hey guys, in this video we will learn how to send POST calls to create new entities at the backend.
My Twitter Handle: @qaifikhan
- jQuery - Introduction02:42
Hey guys, in this video we will learn:
What is jQuery?
Why is jQuery used?
My Twitter Handle: @qaifikhan
- jQuery - Selectors and Filters10:24
Hey guys, in this video we will learn about Selectors and Filters in jQuery.
Selectors Reference: https://api.jquery.com/category/selectors/
Filter Reference: https://api.jquery.com/category/selectors/basic-filter-selectors/
My Twitter Handle: @qaifikhan
- jQuery - Add/Update HTML Elements06:03
Hey guys, in this video we will learn about adding and updating HTML elements using jQuery.
My Twitter Handle: @qaifikhan
- jQuery - Add/Update Styles07:22
Hey guys, in this video we will learn about adding and updating styles using jQuery.
My Twitter Handle: @qaifikhan
- jQuery - Handling HTML Events07:11
Hey guys, in this video we will learn about handling HTML events using jQuery
Events Reference: https://api.jquery.com/category/events/
My Twitter Handle: @qaifikhan
- jQuery - Making AJAX Calls05:01
Hey guys, in this video we will learn about sending GET and POST calls using jQuery.
My Twitter Handle: @qaifikhan
- ES6 - Introduction04:10
Hey guys, welcome to the "Modern JavaScript for React" Module.
In this module, we will learn about the features released in ES6 and above which are used extensively in React development.
In this video, we will talk about the different versions of JavaScript and new feature releases in ES6.
Version and Feature releases:
https://medium.com/@dupski/what-major-new-features-were-in-each-javascript-version-what-version-should-i-target-25526c498687
Hope you are excited!!
My Twitter Handle: @qaifikhan
- ES6 - Variable Creation using "let" and "const"04:13
Hey guys, in this video we will learn about variable creation using the let and const keyword provided by ES6.
My Twitter Handle: @qaifikhan
- ES6 - Template Strings06:12
Hey guys, in this video we will talk about Template Strings.
My Twitter Handle: @qaifikhan
- ES6 - Arrow Functions03:39
Hey guys, in this video we will talk about Arrow Functions.
My Twitter Handle: @qaifikhan
- ES6 - Rest Operator03:55
Hey guys, in this video we will talk about Rest Operator.
My Twitter Handle: @qaifikhan
- ES6 - Spread Operator05:27
Hey guys, in this video we will talk about Spread Operator.
My Twitter Handle: @qaifikhan
- ES6 - Destructuring07:52
Hey guys, in this video we will learn about Destructuring.
My Twitter Handle: @qaifikhan
- ES6 - Array Functions: map()08:40
Hey guys, in this video we will learn about an arrow function called map().
My Twitter Handle: @qaifikhan
- ES6 - Arrow Functions: reduce()05:14
Hey guys, in this video we will learn about an arrow function called reduce()
My Twitter Handle: @qaifikhan
- ES6 - Arrow Functions: filter()04:17
Hey guys, in this video we will learn about an arrow function called filter()
My Twitter Handle: @qaifikhan
- ES6 - Arrow Functions: find() and findIndex()04:01
Hey guys, in this video we will learn about two new arrow functions called find() and findIndex()
My Twitter Handle: @qaifikhan
- ES6 - Introduction to Classes04:24
Hey guys, in this video we will learn about classes.
My Twitter Handle: @qaifikhan
- ES6 - Inheritance in ES607:20
Hey guys, in this video we will talk about inheritance in ES6.
My Twitter Handle: @qaifikhan
- ES6 - Callbacks and Promises05:17
Hey guys, in this video we will learn about callbacks and promises.
My Twitter Handle: @qaifikhan
- ES6 - Working with Promises06:30
Hey guys, in this video we will learn about How to create and use Promises.
My Twitter Handle: @qaifikhan
- ES6 - Chaining Promises07:43
Hey guys, in this video we will learn How to chain multiple promises.
My Twitter Handle: @qaifikhan
- ReactJS - Introduction03:11
Hey guys, Welcome to the ReactJS Module.
In this module, we are gonna cover everything you will need to create end-to-end React applications.
We will learn :
What is SPA(Single Page Application)
What is JSX
What are state and props
Stateful and Stateless components
CSS Modules
render() method
lifecycle methods
We will also have one practice assignment and one final project based on all the concepts we have learned so far in this course.
This is the introductory video of ReactJS. In this video, we will talk about
What is ReactJS?
How can it help you?
Who is using it?
Hope you are excited for the last module of this course!!
- ReactJS - Understanding SPAs and MPAs03:24
Hey guys, in this video we will talk about Single and Multi-page Applications.
My Twitter Handle: @qaifikhan
- ReactJS - Creating our First React App06:31
Hey guys, in this video we will learn How to use create-react-app to bootstrap a new React project.
My Twitter Handle: @qaifikhan
- ReactJS - Project Structure created by CRA03:45
Hey guys, in this video we will talk about different files created by default when we bootstrap a react project using create-react-app(CRA).
My Twitter Handle: @qaifikhan
- ReactJS - Introduction to JSX11:46
Hey guys, in this video we will learn about JSX.
My Twitter Handle: @qaifikhan
- ReactJS - JSX Behind the Scenes07:53
Hey guys, in this video we will talk about what happens behind the scenes when we use JSX.
My Twitter Handle: @qaifikhan
- ReactJS - Adding Styles to React Elements07:34
Hey guys, in this video we will learn how to add styles to React Elements using inline styles and external style sheet.
My Twitter Handle: @qaifikhan
- ReactJS - Create React Elements Dynamically04:38
Hey guys, in this video we will learn how to create react elements dynamically using lists.
My Twitter Handle: @qaifikhan
- ReactJS - Creating our First React Component06:40
Hey guys, in this video we will learn how to create React Components.
My Twitter Handle: @qaifikhan
- ReactJS - Passing Data to Components using Props06:49
Hey guys, in this video we will learn how to pass data to components using props.
My Twitter Handle: @qaifikhan
- ReactJS - Import and Export of Modules09:04
Hey guys, in this video we will learn how to export and import modules using the "export" and "import" keywords.
My Twitter Handle: @qaifikhan
- ReactJS - Introduction to CSS Modules06:21
Hey guys, in this video we will learn how to use CSS module to localize our CSS classes.
My Twitter Handle: @qaifikhan
- ReactJS - Creating Mobile Responsive Components01:36
Hey guys, in this video we will learn how to add media queries to make our components Mobile Responsive.
My Twitter Handle: @qaifikhan
- ReactJS - Stateful vs Stateless Components02:44
Hey guys, in this video we will learn about the difference between Stateful and Stateless Components.
My Twitter Handle: @qaifikhan
- ReactJS - Creating Class-based Components09:43
Hey guys, in this video we will learn how to create a Class-based Component.
My Twitter Handle: @qaifikhan
- ReactJS - More about setState() Method05:39
Hey guys, in this video we will learn more about the setState() method.
My Twitter Handle: @qaifikhan
- ReactJS - Passing Props to Class-based Components11:01
Hey guys, in this video we will learn how to pass props to class-based components.
My Twitter Handle: @qaifikhan
- ReactJS - Passing Function as Props10:20
Hey guys, in this video we will learn how to pass functions as props to components.
My Twitter Handle: @qaifikhan
- ReactJS - Practice Problem: Product Details Page01:31
Hey guys, in this video I have talked about a small application, "Product Details Page".
I want you to try and make it.
ProductData file URL: https://drive.google.com/file/d/14Wo44Xi-Dp2xR16d7WFx7fqiB33lKyzS/view?usp=sharing
My Twitter Handle: @qaifikhan
- ReactJS - Practice Problem: Product Details Page [Solution] - Part 131:37
Hey guys, this is part 1 of the solution for the Product Details Problem I gave in the previous video.
My Twitter Handle: @qaifikhan
- ReactJS - Practice Problem: Product Details Page [Solution] - Part 227:21
Hey guys, this is part 2 of the solution for the Product Details Problem I gave in the previous video.
My Twitter Handle: @qaifikhan
- ReactJS - Practice Problem: Product Details Page [Solution] - Part 315:49
Hey guys, this is part 3 of the solution for the Product Details Problem I gave in the previous video.
My Twitter Handle: @qaifikhan
- ReactJS - render() method - Behind the scenes02:57
Hey guys, in this video we will talk about what happens when render() method is called.
My Twitter Handle: @qaifikhan
- ReactJS - Component Lifecycle - Creation05:52
Hey guys, in this video we will talk about the component creation lifecycle.
My Twitter Handle: @qaifikhan
- ReactJS - Component Lifecycle - Updation06:39
Hey guys, in this video we will talk about the component updation lifecycle.
My Twitter Handle: @qaifikhan
- ReactJS - shouldComponentUpdate() Lifecycle Method05:38
Hey guys, in this video we will learn how to use shouldComponentUpdate() lifecycle method to avoid unnecessary re-renders to improve the performance of our react app.
JOIN OUR WHATSAPP GROUP TO GET LATEST COUPON AS SOON AS UPDATED
JOIN WHATSAPPJOIN OUR TELEGRAM CHANNEL TO GET LATEST COUPON
JOIN TELEGRAMJOIN OUR FACEBOOK GROUP TO GET LATEST COUPON
JOIN FACEBOOKFree Online Tools And Converters for your use
URL Encoder
Input a string of text or a URL and encode the entered string
Try itURL Decoder
Input an encoded string of text or a URL and decode the entered string
Try itColor Contrast Checker (WCAG)
Calculate the color contrast ration for your website (WCAG)
Try itXML Formatter
Paste or upload an XML and have it formatted to a beautiful XML format
Try itURL Slug Generator
Convert any title or sentence into a variety of slugs for your pages URL
Try itE-Signature
Draw an e-signature or type a signature for your online signature
Try it