- My Web Development VS Code Extensions ♥️

1- JavaScript (ES6) Code Snippets

2- Live Server

3- Prettier

4- Better Comments

5- Path Intellisense

6- GitLens

7- Code Time

8- ESLint

9- Polacode

10- CSS Peek

11- Project Manager

12- Rest Client

13- Auto Close Tag

14- Bracket Pair Colorizer 2

15- Paste JSON as Code

16- Quokka.js

17- HTML CSS Support

18- Auto Rename Tag

19- Code Spell Checker

20- Image preview

21- IntelliSense for CSS class names in HTML

22- Material Icon Theme

23- Live Saas Compiler

24- Bookmarks

25- Import Cost

26- Ayu

27- ES7 React/Redux/GraphQL/React-Native snippets

28- Simple React Snippets

- CheatSheets for Web Developers ♥️

1- HTML CheatSheet

2- CSS Reference

3- GitSheet

4- OverAPI

5- Dev Hints

6- Cheatography

7- Awesome-Cheatsheets

8- Bootstrap 4 Cheat Sheet

9- HTML5 Element Index

10- Can I Use

11- Rico's cheatsheets

12- CSS3 Animation Cheat Sheet

13- CSS Grid Cheat Sheet

14- Grid

15- Media Queries Cheat Sheet

16- HTML5 Canvas Cheat Sheet

17- Web Developer's SEO Cheat Sheet

18- Modern JavaScript Cheatsheet

19- Developer cheatsheets

20- Vue Cheatsheet

21- 30secondsofcode

22- Bootstrap 5 CheatSheet

23- CSS Grid Cheat Sheet Illustrated

24- Flexbox Cheat Sheet

- Beautify Your GitHub Profile ♥️

> GitHub Profile Readme Generator Tool

> Readme Typing SVG

> GitHub Profile Summary Cards

> GitHub Readme Stats

> GitHub Readme Streak Stats

> Emoji Unicode Tables

> Best Readme Files

<React JS Project Structure />
—————————————————

1- README (.md)
- This file used for writing the documentation of our app like how your app works or other important things you want to write about your app.


2- .gitignore
- This file tells Git which files to ignore when committing your project the GitHub Repo.


3- node_modules
- This folder contains all the packages and dependencies that are installed in your react app.


4- package.json
- This file contains a list of all dependencies that have been installed in your app.
(metadata associated with the app + dependencies info + scripts)


5- package-lock.json
- The goal of this file is to keep track of the exact version of every package that installed in your app.
(contains the history of every package installed in your app)

6- public
- The public folder contains static files such as index.html, the icon of the app, images, etc.

—————————————————————
——— Files inside public folder ———
—————————————————————

- index.html
(This is the main file that opens in your browser and holds the HTML template of your app)

- favicon.ico
(It’s the Favicon of the app)

- manifest.json
(It provides the information about the app such as name, author, icon, and description in a JSON text file. The purpose from the file is to install web applications to the home screen of the user’s device)


7- src
- This is the most important part of the app. This is where you do coding of your app.

- In this folder, you place all your files related to development like pages, components, CSS files, images, etc.

—————————————————————
——— Files inside src folder ———
—————————————————————

- App.js
(It’s the parent component of a react app and by default, it contains a basic component code and we can erase it and write our own)

- App.css
(It’s a CSS file that contains CSS related to App.js but you can use it globally as well)

- index.js
(It’s actually an entry point of our react app. It is where you render the main react component onto the root element)

- index.css
(A CSS file contains CSS related to index.js but can be used globally)

- App.test.js
(It’s a test file contains a basic test for App.js Component)

- logo.svg
(Logo of react rotating on the screen when you first runs the app)

- reportWebVitals.js
(create-react-app includes a built-in tool for measuring the real-life performance of your app. It is called reportWebVitals.js)

Best JavaScript Animation Libraries

- Three.js
Three.js is a WebGL-based 3D animation library. It allows you to create a scene with a camera and animate objects within it.

- GSAP
Professional-grade JavaScript animation for the modern web.

- Anime.js
Anime.js is a lightweight JavaScript animation library with a simple, yet powerful API.

- Mo.js
Mo.js is a JavaScript library devoted to motion for the web. It offers a declarative syntax motion and the creation of elements for animation.

- Typed.js
Typed.js is a JavaScript library which is used to type a set of strings at the speed that you set, backspace what it's typed and begin the typing with another string you have set.

- Vivus
Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn.

- Proton
Proton is a lightweight and powerful JavaScript particle animation library.

- ScrollReveal
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport. It was designed to be robust and flexible, but hopefully you’ll be surprised below at how easy it is to pick up.

———

@phoenixcoding

JavaScript Interview Questions

shorturl.at/tDENR

———

@phoenixcoding

CSS Libraries To Make Awesome Websites

- Hamburgers CSS
Tasty CSS-animated hamburgers

- CSS Layout
Popular layouts and patterns made with CSS

- Hover CSS
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

- SpinKit
Simple loading spinners animated with CSS.

- Charts CSS
CSS data visualization framework.

- Pretty Checkbox
A pure CSS library to beautify checkbox and radio buttons.

- Izmir
Izmir is a mini CSS library allowing you to quickly create beautiful image hover elements.

- 30SecondsOfCode
The CSS snippet collection contains utilities and interactive examples for CSS3.

———

@phoenixcoding

Markdown Guide

- The Markdown Guide is a free and open-source reference guide that explains how to use Markdown, the simple and easy-to-use markup language you can use to format virtually any document.
———
https://www.markdownguide.org/basic-syntax/
———
If the website doesn’t work, This is the PDF version 👇🏻
———
@phoenixcoding

Best GitHub Repos for Self-Taught

- Project-Based Learnings
A list of programming tutorials in which aspiring software developers learn how to build an application from scratch.

- Free Programming Books
List of Free Learning Resources In Many Languages.

- Developer Roadmap
Developer Roadmap is a community effort to create roadmaps, guides and other educational content to help guide the developers in picking up the path and guide their learnings.

- Public API’s
A collective list of free APIs for use in software and web development.

- Coding University
This repo is a short to-do list of study topics for becoming a software engineer.

- Awesome Python
A curated list of awesome Python frameworks, libraries, software and resources.

- Tensor-Flow
TensorFlow is an end-to-end open source platform for machine learning.

- FreeCodeCamp
freeCodeCamp.org is a friendly community where you can learn to code for free.

- Awesome
Awesome lists about all kinds of interesting topics.

———

@phoenixcoding