https://github.com/developer-ronnie/zero-to-fullstack-dev
A zero to fullstack dev resource in production !
https://github.com/developer-ronnie/zero-to-fullstack-dev
Last synced: 5 months ago
JSON representation
A zero to fullstack dev resource in production !
- Host: GitHub
- URL: https://github.com/developer-ronnie/zero-to-fullstack-dev
- Owner: Developer-RONNIE
- Created: 2025-07-21T12:58:28.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-11-04T15:19:56.000Z (8 months ago)
- Last Synced: 2025-11-04T17:05:40.787Z (8 months ago)
- Language: HTML
- Size: 7.01 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Zero To Fullstack Dev 🚀
A complete journey from frontend to backend, including real projects, DSA, and dev notes — all in one repo.
## 📋 Table of Contents
1. 🔍 [Introduction](#introduction)
2. ⚙️ [Tech Stack](#tech-stack)
3. 📁 [Syllabus](#syllabus)
4. 📌 [How to Use This Repo](#-how-to-use-this-repo)
## 🔍 Introduction
Welcome to my **Zero To Fullstack Dev** — a curated, real-time learning path that covers everything from HTML to React, backend with Node.js, databases, DSA in JavaScript, and company-specific problems.
This repo is my second brain: notes, snippets, projects, LeetCode solutions, and blog-ready content.
## ⚙️ Tech Stack
- **Frontend**: HTML, CSS, JavaScript, TailwindCSS, React, Next.js, TailwindCSS, Vue.js
- **Backend**: Node.js, Express.js, GraphQL, Socket.io
- **Database**: MySQL, MongoDB, Firebase, Postgress, AWS
- **Others**: DevOps, Python, Django, TypeScript, React Native
- **Project Ideas**
## 📚 Syllabus
Review the `Notes.md` file for each tech stack to better understand the other code and files.
01 - Frontend
- Introduction to HTML ✨
- project folder setup
- index.html
- live server extension
- html basics
- hyperlinks
- images
- audio
- video
- favicons
- text formatting
- span & div
- lists
- tables
- buttons
- forms
- headers & footers
- Introduction to CSS ✨
- Colors
- Fonts
- Borders
- Shadows
- Margins
- Float
- Overflow
- Display Property
- Height and Width
- Positions
- Background Images
- Combinators
- Pseudo-classes
- Pseudo-elements
- Pagination
- Dropdown Menus
- Navigation Bar
- Website Layout
- Image Gallery
- Icons
- Flexbox
- Transformations
- Animations
- What we are Building
- Setup
- Selectors
- Fonts and Typography
- Colors
- Box Model
- Flexbox
- Form
- Finalizing App
- Second App
- Flex
- Grid List
- Simple Grid
- Medium Grid
- Complex Grid
- Absolute Relative Positioning
- Responsive
- JavaScript Overview
- Code Execution
- Dev Environment Setup
- Connect JS to HTML
- Using Console & Comments
- Mastering Variables
- Working with Numbers
- Grasping Booleans
- Comparison Operators
- Manipulating Strings
- Type Conversion
- Conditional Statements
- Switch Statements
- For Loop
- While Loop
- Do-While Loo
- Logical Operations
- Arrays Introduction
- Array Techniques
- JavaScript Objects
- Functions Basics
- Function Types
- Callback Functions
- Variable Scope
- Object Methods
- JSON Handling
- Dates & Time
- setInterval & setTimeout
- Intermediate Setup
- Template Strings
- Arrow Functions
- Enhanced Object Literals
- Default Parameters
- Spread Operator
- Rest Operato
- Array Destructuring
- Object Destructuring
- Advanced Destructuring
- Function Destructuring
- Nested Destructuring
- Destructuring Craziness
- Ternary Operator
- For-In Loop
- For-Of Loop
- forEach Method
- map Helper
- filter Helper
- find Helper
- every & some Helpers
- reduce Helper
- Map Data Structure
- Sets Data Structure
- Symbols in JavaScript
- Introduction to DOM
- DOM Setup
- Accessing DOM Elements
- Manipulating Text Content
- Managing Classes
- Working with Attributes
- Navigating Siblings
- Modifying Styles
- Creating DOM Elements
- Removing DOM Elements
- DOM Events Intro
- Event Handling
- Keyboard Events
- Working with DOM Events
- DOM Project 1
- DOM Project 2
- DOM Project 3
- DOM Project 4
- DOM Project 5
- DOM Project 6
- Introduction to GSAP
- GSAP Basics
- GSAP Setup
- Animation Techniques
- Integrating GSAP
- GSAP Object Overview
- GSAP Set Method
- From & FromTo Animation
- Staggering Animations
- Tween Control
- Mastering Timelines
- Crafting Unique Animations
- Wrapping Up GSAP
- OOP Introduction
- Demystifying THIS Keyword
- Factory Function
- Constructor Function
- Built-In Constructors
- Object.create Method
- Prototype Model
- Prototypal Inheritance
- Introduction to Classes
- Modifiers in OOP
- Encapsulation
- Abstraction
- Inheritance
- Polymorphism
- Sync & Async Programming
- Real-World Examples
- Callback Hell
- Promises
- Async Functions
- Reading Textual Data
- Handling JSON Data
- Fetching Data from APIs
- Error Handling
- Intro
- Introduction to Tailwind CSS
- How does Tailwind work?
- Tailwind Fundamentals Understanding the Basics
- The Just-In-Time (JIT) Compiler: Tailwind’s Superpower
- Layouts & Flex-box: Structuring Your UI
- Media Queries & Responsive Design
- Dark Mode in Tailwind
- Custom Styles & Reusability
- Tailwind CSS Tips & Tricks
- Fitness Project Details
02 - Backend
- Intro
- What Is Node.js
- Course Setup
- REPL
- Module Wrapper
- Modules In Depth
- ES6 Modules
- Path Module
- FS Module
- OS Module
- URL Module
- HTTP Module
- Routing In Node.js
- Serving Files In Node.js
- NPM Complete Course
- Node.js Behind The Scenes
- Node.js Events
- Streams In Node.js
- Outro
- Intro
- What is Express.js
- Before Express.js
- First Express App
- Basic Routing
- Advance Routing
- Req and Res Advance Topics
- Postman and App.route()
- Advance Router
- Route Parameters In Depth
- Controllers In Depth
- Query String In Depth
- Sending JSON
- Express Middleware's In Depth
- Serving Static Files In Express
- Template Engine Setup
- EJS Crash Course
- Outro
03 - Databases
04 - Other Technologies
05 - Project Ideas
- 💡 Idea 1
- 💡 Idea 2
- 💡 Idea 3
## 📌 How to Use This Repo
This repository is designed to be your **second brain and personal dev library** as you grow from zero to fullstack. Here's how to make the most of it:
1️⃣ **Refer the Syllabus**
Go through the syllabus section to understand the learning flow and the order of topics.
2️⃣ **Explore Each Tech Stack Folder**
Open each tech stack folder and check the `Notes.md` file to understand the concepts, code explanations, and examples related to that technology.