Improvements

README.md

@@ -2,9 +2,12 @@
 
 <img src='./imgs/banner.png'/>
 
-<p align="center"><img src="https://skillicons.dev/icons?i=html,css,js,ts,git" /><img src="https://skillicons.dev/icons?i=react,mui,tailwind,nextjs,nodejs" /><img src="https://skillicons.dev/icons?i=express,mongodb,graphql,postgresql,nestjs" /><p/>
+<!-- <p align="center"><img src="https://skillicons.dev/icons?i=html,css,js,ts,git" /><img src="https://skillicons.dev/icons?i=react,mui,tailwind,nextjs,nodejs" /><img src="https://skillicons.dev/icons?i=express,mongodb,graphql,postgresql,nestjs" /><p/> -->
 
 ## Module 1: Web Designing
+
+<p align="center"><img src="https://skillicons.dev/icons?i=html,css,github,netlify,bootstrap" /><p/>
+
 |                |                     |
 | -------------- | ------------------- |
 | Pre-requisites | Matriculation       |
@@ -15,33 +18,27 @@
 
 ### Topics
 
-- HTML5
-  - [Book](https://github.com/ghousahmed/Books/blob/master/Wiley.HTML.and.CSS.Oct.2011.pdf)
-- CSS3
-  - [Book](https://github.com/ghousahmed/Books/blob/master/Wiley.HTML.and.CSS.Oct.2011.pdf)
-- CSS Variables
-  - [W3schools](https://www.w3schools.com/css/css3_variables.asp)
-- CSS Animations
-  - [Animate.style](https://animate.style/)
-- Media queries
-  - [CSS-Tricks](https://css-tricks.com/a-complete-guide-to-css-media-queries/)
-- Flexbox
-  - [CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
-- Font Awesome
-  - [Fontawesome](https://fontawesome.com/icons)
-- Bootstrap
-  - [Bootstrap](https://getbootstrap.com/)
-- Google Fonts
-  - [Google Fonts](https://getbootstrap.com/)
-- Netlify Hosting
-  - [Netlify](https://app.netlify.com/drop)
+- HTML 5 [(Book)](https://github.com/ghousahmed/Books/blob/master/Wiley.HTML.and.CSS.Oct.2011.pdf)
+- CSS 3 [(Book)](https://github.com/ghousahmed/Books/blob/master/Wiley.HTML.and.CSS.Oct.2011.pdf)
+  | | Additional CSS Topics | Resource |
+  | --- | ----- | -------- |
+  | 1. | CSS Variables |[W3schools](https://www.w3schools.com/css/css3_variables.asp)|
+  |2. |CSS Animation Library|[Animate.style](https://animate.style/)|
+  |3.|Media queries|[CSS-Tricks](https://css-tricks.com/a-complete-guide-to-css-media-queries/)|
+  |4.|Flexbox|[CSS-Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)|
+  |5.|Icons |[FontAwesome](https://fontawesome.com/icons) or [Google Icons](https://fonts.google.com/icons)|
+  |6. |Google Fonts|[Google Fonts](https://getbootstrap.com/)|
+- [Bootstrap](https://getbootstrap.com/)
+- [Netlify Hosting](https://app.netlify.com/drop)
 - Git & Github Basics
   - [Github Desktop](https://desktop.github.com/)
 - Domain & Hosting Subscription (Deployment)
   - [Namecheap](https://www.namecheap.com/)
 
 ## Module 2: Front-End Development
 
+<p align="center"><img src="https://skillicons.dev/icons?i=js,ts,git,firebase" /><p/>
+
 |               |                           |
 | ------------- | ------------------------- |
 | Pre-requisite | Module 1                  |
@@ -60,6 +57,7 @@
   - [Book](https://github.com/ghousahmed/Books/blob/master/ASmarterWaytoLearnJavaScript.pdf)
   - [Assignments](https://github.com/ghousahmed/javascript-exercises)
 - Advanced Javascript (All ES Versions)
+
   - Variable Scoping
   - Closure
   - Template literals
@@ -78,27 +76,43 @@
   - CallBack
   - Promises
   - Exponentiation Operator
-  - Classes
   - Ternary Operator
   - Optional chaining
+
+- Object-oriented programming (OOPs)
+
+  - Classes
+    - Easy to understand Resources ( [Class 1](https://youtu.be/k3vRSkh8-qM) | [Class 2](https://youtu.be/4HfHJJtJLRE) | [Class 3](https://www.facebook.com/share/v/4poMFRMR8hBysxn5) )
+  - Object and Instance
+  - Overview of following
+    - Abstraction
+    - Inheritance
+    - Polymorphism
+    - Data Abstraction and Encapsulation
+  - OOP in Typescript (Optional)
+    - TypeScript introduces static typing and additional features that enhances OOP like public/protected/private access modifiers etc.
+
 - TypeScript
+
   - TS Compiler
   - Type Annotations
   - Interfaces
-  - Classes
   - Generics
   - Enums
   - Type Inference
   - Union and Intersection Types
   - Type Guards
   - Decorators
+
 - Advance Github
+
   - Branches
   - PR
   - PR review
   - Merge
   - Rebase
   - Cherry Pick
+
 - Firebase
   - Authentication
     - Email
@@ -111,6 +125,8 @@
 
 ## Module 3: Modern Front-End Development
 
+<p align="center"><img src="https://skillicons.dev/icons?i=react,redux,next,mui,tailwind" /><p/>
+
 |               |                          |
 | ------------- | ------------------------ |
 | Prerequisites | Module 1, 2              |
@@ -121,27 +137,31 @@
 
 ### Topics
 
-- ReactJS (CRA, Vite)
-  - [CRA](https://create-react-app.dev/)
-  - [Vite](https://vitejs.dev/)
+- ReactJS ( [CRA](https://create-react-app.dev/), [Vite](https://vitejs.dev/) )
+
   - React Icons
   - React Router DOM
-  - Context API
-  - Redux
+  - Context API or Redux Tool kit
   - [TanStack Query](https://tanstack.com/query/v3/)
   - [Ahooks](https://ahooks.js.org/)
-- Tailwind CSS
-  - [Tailwind](https://tailwindcss.com/)
-- Material
-  - [MUI](https://mui.com/)
-- AntD
-  - [AntD](https://ant.design/)
-- NextJS (SSR, AMP)
-- React Native (Android)
+
+- [Tailwind CSS](https://tailwindcss.com/)
+- [Material UI](https://mui.com/)
+- [AntD](https://ant.design/)
+- NextJS (App Router)
+
+  - Folder Based Routing
+  - Server and Client Components
+  - Theory of Dynamic Routes and Dynamic vs Static Pages
+  - What is CSR, SSR, SSG, ISR and AMP
+
 - Firebase (Connection)
+- React Native (Android)
 
 ## Module 4: Back-End App Development
 
+<p align="center"><img src="https://skillicons.dev/icons?i=nodejs,express,mongo,nestjs" /><img src="https://skillicons.dev/icons?i=postgresql,graphql,sequelize" /><p/>
+
 |               |                       |
 | ------------- | --------------------- |
 | Prerequisites | Module 2              |