How to create Web sites and applications with HTML, CSS

Check group for above names books 📚

https://t.me/+eweUkdFwlho4YjRl

Keep checking private group for books...

Chat group link
https://t.me/+2KE896TMwHkxOWE1

Resources aka PDfs and Ebooks group link

https://t.me/+eweUkdFwlho4YjRl

😒😒 don't leave this group, i will share items here 😀

### TODO: JavaScript Fundamental Concepts

- Functions:
- [ ] Declaration and invocation of functions.
- [ ] Arrow functions and function expressions.
- [ ] Higher-order functions and callbacks.

- Objects and Object-Oriented Concepts:
- [ ] Understanding objects, properties, and methods.
- [ ] Prototypes and prototypal inheritance.
- [ ] ES6 Classes.

- Asynchronous JavaScript:
- [ ] Promises and async/await.
- [ ] Working with asynchronous operations (e.g., setTimeout, fetch).

- Arrays and Array Methods:
- [ ] Basic array operations (e.g., push, pop, slice).
- [ ] Functional array methods (e.g., map, filter, reduce).

- Modules and Module Systems:
- [ ] ES6 Modules (import and export).
- [ ] Module bundlers like Webpack and Rollup.

- DOM Manipulation:
- [ ] Accessing and manipulating the Document Object Model (DOM) in web pages.

- Event Handling:
- [ ] Responding to user interactions (e.g., clicks, mouse movements) in the browser.

- Error Handling:
- [ ] Exploring error handling methods beyond try...catch, like throw and custom errors.

- ES6/ESNext Features:
- [ ] Destructuring, spread/rest operators, template literals, etc.
- [ ] Familiarizing with new features introduced in ES6 and upcoming ECMAScript versions.

- Browser APIs:
- [ ] Working with browser APIs like localStorage, sessionStorage, IndexedDB, WebSockets, etc.

Important javascript topics

Complete React Roadmap 🔥
|
|--- Fundamentals
| |-- JavaScript ES6+
| |-- JSX
| |-- Components
| |-- Props
| |-- State and
| |-- Lifecycle
| |-- Events
| |-- Hooks
| | |- useState
| | |- useEffect
| | |- useContext
| | |- useReducer
| | └ Custom Hooks
| |
| |-- Functional vs Class Components
| |-- Conditional Rendering
| |-- Lists and Keys
| |-- Forms
| |-- Controlled Components
| |-- Fragments
| └─ Higher-Order Components
|
|--- Advanced Concepts
| |-- Context API
| |-- Redux
| |-- Redux Basics
| |-- Redux Middleware
| |-- Thunk
| | └ Saga
| |
| |-- React Router
| |-- Error Boundaries
| |-- Portals
| |-- Render Props
| |-- Suspense
| |-- Lazy Loading
| |-- PropTypes
| |-- TypeScript
| └─ Server-side Rendering
|
|--- Styling
| |-- CSS Modules
| |-- Styled Components
| |-- CSS-in-JS Libraries
| |-- Theming
| └─ Responsive Design
|
|--- State Management
| |-- Local Component State
| |-- Context API for Global State
| |-- Redux State Management
| |-- MobX State Management
| |-- Recoil (Experimental)
| └─ Zustand
|
|--- Forms and Validation
| |-- Formik (Form Library)
| |-- Yup (Schema Validation)
| └─ Controlled vs Uncontrolled Components
|
|--- GraphQL and APIs
| |-- Apollo Client (GraphQL)
| |-- Fetch API
| |-- Axios
| |-- RESTful APIs
| └─ Fetching Data in React
|
|--- Performance Optimization
| |-- Memoization
| |-- PureComponent and React.memo
| |-- Code Splitting
| |-- Server-side Rendering (SSR)
| |-- React.lazy and Suspense
| |-- Performance Profiling (React DevTools)
| └─ Tree Shaking
|
|--- Security
| |-- Cross-Site Scripting Prevention
| |-- Cross-Site Request Forgery Protection
| └─ Content Security Policy (CSP)
|
|--- Deployment and Build Tools
| |-- Webpack
| |-- Babel
| |-- ESLint
| |-- Prettier
| └─ CI / CD
|
|--- Server-side Integration
| |-- Integrating React with Node.js
| |-- Integrating React with Express.js
| |-- Integrating React with Django
| └─ Integrating React with Ruby on Rails
|
|--- Libraries and Tools
| |-- Recoil
| |-- React Query (Data Fetching Library)
| |-- SWR (Stale-While-Revalidate)
| |-- Vercel (Deployment Platform)
| |-- Netlify (Deployment and Hosting)
| └─ AWS Amplify (Cloud Services)
|
|--- Mobile and Desktop Applications
| |-- React Native (Mobile)
| └─ Electron (Desktop)
|
|--- Best Practices and Design Patterns
| |-- Component Patterns
| |-- Error Handling Strategies
| |-- Code Splitting Patterns
| |-- State Management Patterns
| └─ Testing Strategies
|
|─- Community and Learning Resources
|-- Official React Documentation
|-- Online Tutorials
|-- React Blogs
|-- Medium Articles
|-- Open Source React Projects
|-- React Community Events
|-- Conferences
└─ GitHub Repositories

------------------ END -------------------

Best resources to learn react fast 👇

1.Documentation

Official Updated React Documentation
react.dev
MDN Web Docs
shorturl.at/tCL69

100 web dev project ideas

to do in 2023 👇🔥

1.Quote generator

2.Todo app

3.Countdown timer

4.Stopwatch

5.Flip a coin app

6. World clock dashboard

7.Good morning slack bot

8.Daily Journal bot

9.Mail composer UI

10.Interactive login form

11.Offline page in PWA

12.Toaster message

13.Color picker jumbtron

14.RSS Feed viewer

15.Json viewer

16.Syntax highlight

17.Json to csv

18.Simple calculator UI

19. Free image library

20.Messaging to webhook

21.Leave reason generator

22.Visual web bookmarker

23.Pomodoro timer

24.Css ruler

25.Instagram logo in css

26.BAFFLE effect in css

27.Motivation bot

28.Twitter hash tag viewer

29.Minimalist twitter profile page

30.Minimalist GitHub profile page

31. Site map into flex layout

32.Twitter bot to fav your replies

33.Twitter bot to welcome new followers

34.Twitter bot to send weekly report

35.Gif search engine

36.Good first issue hunter

37. One download page for your fav exe

38.Virtual site map for fav sites

39.PWA - funny sounds directory

40.PWA - Scolding app if late sleep

41.PWA -Stress burster - tap me 20 times in 3
seconds

42.PWA - Internet connection game

43.Quotes instead of loader

44.Comments thread UI

45.API document with swagger json

46.Terminal effect in css

47.CLI for daily activities

48.Npm library to do text operation

49.Quiz minimalist UI

50.Yes or No fact checking UI

51.Render Google map for location

52.Selfie app with frames

53.Flames game

54.Guess the number game

55.Sound match game

56.Snake game

57.Flight time check app

58. Weather app

59.Time sheet app

60. Fan simulator

61.Css loader

62.Minimalist resume

63.Virtual Visiting card

64.Custom Birthday cards

65. Work log app (punch machine)

66.Catch me bug game

67.Guess the card game

68.Clipboard history

69.Smiley UI mock

70.Instagram story mock

71.Tinder suggestion mock

72.Fake api

73.Pinterest view for github project

74.CheatSheet generator

75. Social media activities dashboard

76.Birthday reminder

77.Reminder app if you are leaving late at work

78.Recipe tracker

79.Sarcasm meter

80.Why not analog calendar?

81. Movie rating at one place

82.Bookshelf

83. Energy drainer visualisation

84.YAGNI checklist

85.Tweet scheduler mock

86.Image crop tool

87. Windows blue screen error page

88.Never seen 404 page

89.Sarcastic 401 page

90. Play music when page offline

91.Render tweet into gif

92.CSS blob maker

93.Cute animals video search results

94.Mock duckduckgo results page

95.1000 pixels custom image

96.Swappable 5x5 grids

97.Moments celebration timer

98. Youtube subscribers count mock

99.Subscribe and bell icon gif

100. A Perfect portfolio ✌️

FREE APIs for your projects 🔥

🌦️Weather -openweathermap .org
📰News -newsapi .org
🌍 REST Countries -restcountries .com
😂 Chuck Norris Jokes -api.chucknorris .io
🐶 Dogs -thedogapi .com
🎉 GIPHY -developers.giphy .com
🍿 Movie data -omdbapi .com
🎮 Pokemon data -pokeapi .com

Stage1 – HTML
Stage2 – CSS
Stage3 – Git+GitHub
Stage4 – Project 🚧
Stage5 – JavaScript
Stage6 – Tests & Performance
Stage7 – API
Stage8 – React/VueJs/Svetle||Angular
Stage9 – Project 🚧
Stage10 – Node.js
Stage11 – MongoDB
Stage12 – Project 🚧

🏆 – Full Stack developer

Web Development CS JS Python JavaScript Hacking ReactJs Python django Flask CSS Frontend Backend Full Stack Java Node Pdf Books:
Chat group link
https://t.me/+2KE896TMwHkxOWE1

Resources aka PDfs and Ebooks group link

https://t.me/+eweUkdFwlho4YjRl

😒😒 don't leave this group, i will share items here 😀

What will be the Output?

const fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];

const citrus = fruits.slice(1, 3);

Correct answer is:

["Orange", "Lemon"]

Why? -
Answer- The slice() method in JavaScript extracts a section of array.

Here fruits.slice(1, 3) will start extracting the elements from index 1 upto index 3.
However index 3 element will not be included in the returned array by splice method.


Questions arises- what is array?
What is index in array?

I will post small byte sized topics for you everyday. 😊 read 📚 them and learn them...

What are keys in array in JavaScript?