Some of my handmade JavaScript notes and cheat sheets that can help you 🧵👇

1. JavaScript Function Anatomy

2. JavaScript Arrow Function

3. JavaScript Array Methods

4. JavaScript Date Methods

Roadmap to learn CSS 🎨🛣️

➳ Color
➳ Background
➳ Box model
➳ Height and width
➳ Margin and padding
➳ Border
➳ Positioning
➳ display
➳ Layouts
➳ Grid and Flex
➳ Alignment
➳ Fonts
➳ Animation
➳ Pseudo-classes
➳ Media query

A complete beginner's guide to CSS Grid layout 👇🏻

Thread🧵

Grid is used for making complex web design layouts more easily as it's not so hard to master

Using Flex you can make only 1D layout but Grid gives you full power of creating 2D layout

Let's start

{ 2 / 21 }

First things first, start with giving the display property "grid" to the container element or parent element

{ 3 / 21 }

Nothing will change after adding display: flex; in the parent container becuase we need to define the width of columns. In order to set that columns width we have gird-template-columns property

{ 4 / 21 }

Let's start with defining the width of our columns.

For example, let's say I need two columns of width 60% and 40% respectively

grid-template-columns: 60% 40%;

{ 5 / 21 }

React Hooks are the functions which "hook into" React state and lifecycle features from function components. Hooks allows you to manipulate state and other React feature without writing a class. Let's talk about widely used hook

useEffect hook at a glance 🧵👇🏻

useEffect hook is the heart of React functional components

If you're familiar with class components then you might know that we have various lifecycle methods but in functional components, we don't have any lifecycle methods. Instead we have a powerful hook called useEffect

By using useEffect, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates

So let's start by understanding the syntax first

3/15

useEffect take two parameters, first is a function and second is an array.

The function inside the useEffect will run every single time component re-render. Consider this piece of code and check the output in next tweet

{ 4 / 15 }

As you can see in the output the function is executed every single time my component re-render

{ 5 / 15 }

13 Websites that will help you improve your frontend skills by building real-world projects. 💪

A thread ⤵️

1️⃣ Frontend Mentor { @frontendmentor }

🔗

2️⃣ 100 Days of CSS

🔗

3️⃣ Piccalilli

🔗

4️⃣ Codewell

🔗

Top 10 websites to learn web development for FREE 👇

1. sololearn .com
2. freecodecamp .org
3. programiz .com
4. upskillcourses .com
5. geeksforgeeks .org
6. studytonight .com
7. hackerrank .com
8. codecademy .com
9. codementor .io
10. bitdegree .org

7 common React mistakes that you should avoid.

🧵 Thread 👇

1/4

2/4

3/4

4/4

10 FREE React Courses to Level Up your React Skills 🍄

Thread 🧵👇

75+ SQL Interview Questions

⇩

Level: Beginner to Medium
Topics:

➊ Introduction to RDBMS
➋ Normalisation
➌ Introduction to SQL
➍ Tables and Fields
➎ Constraints
➏ DDL
➐ DML & DQL
➑ Joins

➊ Introduction to RDBMS

➀ What is a Database?
➁ What are different types of Databases?
➂ What is DBMS?
➃ What is difference between Database and DBMS?
➄ What is RDBMS?
➅ Which are popular RDBMS vendors?
➆ What is ACID property in Database?

➋ Normalisation

➀ What is Normalisation?
➁ Why is Normalisation necessary?
➂ What are the disadvantages of not performing Normalisation?
➃ What are different Normal Forms (NF)?
➄ What is Denormalisation?

➌ Introduction to SQL

➀ What is SQL?
➁ What is the use of SQL?
➂ Is SQL a programming language?
➃ What are the different parts of SQL?
Or,
➄ Group SQL commands in different parts.
➅ What is DDL?
➆ What is DML?
➇ What is DQL?
➈ What is DCL?
➉ What is TCL?

My 8 handmade sketch notes you won't want to miss (learn web development for free):

1. What is semantic HTML

2. CSS Positioning

3. CSS Box-model

4. JavaScript Array Methods

JavaScript concepts you need to know before getting into React⬇️

💠Arrow Functions:
An arrow function expression is a compact alternative to a traditional function

💠Let/var/const variables:
Understand the difference between them, uses and their respective

💠Destructuring assignment:
Javascript expression that makes it possible to unpack values from arrays, or properties from objects, into a bunch of

💠 Template Literals:
With ES6, a newer form of string called template literal was given, which consists of two backticks `

🌟 2022 React developer roadmap.

1/4

2/4

3/4

4/4