Step by step guide to becoming a modern frontend developer
- The Basics
- Customizing Visual Studio Code
- Write Code 10x Faster Using Advance Shortcuts
- Emmet's In Visual Studio Code
- VSC Top Extensions
- What is Git/GitHub & Why do we need it? | Git Tutorials #1
- Installing Git + Initial Setup? | Git Tutorials #2
- Git: Three Stage Architecture | Git Tutorials #3
- Tracking Our first Git Project | Git Tutorials #4
- Cloning a Remote Git Repository from GitHub | Git Tutorials #5
- Git: File Status Lifecycle | Git Tutorials #6
- .gitignore: Ignoring Files in Git | Git Tutorials #7
- Git Diff: Showing Changes Between Commits/Staging Area & Working Directory | Git Tutorials #8
- Git: Skipping The Staging Area | Git Tutorials #9
- Moving and Renaming Files In Git | Git Tutorials #10
- Git Log: Viewing & Changing Commits In Git | Git Tutorials #11
- Unstaging & Unmodifying Files In Git | Git Tutorials #12
- GitHub: Working with Remote Repositories | Git Tutorials #13
- Setting Alias In Git | Git Tutorials #14
- Git: Creating & Switching Branches In Git | Git Tutorials #15
- Branching & Merging a Production Grade Project | Git Tutorials #16
- Resolving Merge Conflicts (With Example) | Git Tutorials #17
- Git Branching Workflow in Production | Git Tutorials #18
- Pushing Git Branches To Remote Repositories | Git Tutorials #19
- Welcome and First Steps
- HTML Fundamentals
- CSS Fundamentals
- Layouts: Floats, Flexbox, and CSS Grid Fundamentals
- Web Design Rules and Framework
- Components and Layout Patterns
- Omnifood Project – Setup and Desktop Version
- Omnifood Project – Responsive Web Design
- Omnifood Project – Effects, Optimizations and Deployment
- The End!
- Introduction
- Tailwind Fundamentals - Part 1
- Tailwind Fundamentals - Part 2
- A Better Development Environment
- Tailwind CSS Mini-Projects
- Project 1 - Clipboard Website
- Project 2 - Loopstudios Website
- Project 3 - Shortly Website
- Project 4 - Testimonial Grid Project
- Project 5 - Fylo Website With Color Picker
- Welcome, Welcome, Welcome!
- JavaScript Fundamentals – Part 1
- JavaScript Fundamentals – Part 2
- How to Navigate This Course
- Developer Skills & Editor Setup
- [OPTIONAL] HTML & CSS Crash Course
- JavaScript in the Browser: DOM and Events Fundamentals
- How JavaScript Works Behind the Scenes
- Data Structures, Modern Operators and Strings
- A Closer Look at Functions
- Working With Arrays
- Numbers, Dates, Intl and Timers
- Advanced DOM and Events
- Object-Oriented Programming (OOP) With JavaScript
- Mapty App: OOP, Geolocation, External Libraries, and More!
- Asynchronous JavaScript: Promises, Async/Await, and AJAX
- Modern JavaScript Development: Modules, Tooling, and Functional
- Forkify App: Building a Modern Application
- Setting Up Git and Deployment
- The End!
- Getting Started
- JavaScript Refresher
- React Basics & Working With Components
- Time to Practice: Component Basics
- React State & Working with Events
- Rendering Lists & Conditional Content
- Styling React Components
- Debugging React Apps
- Time to Practice: A Complete Practice Project
- Diving Deeper: Working with Fragments, Portals & "Refs"
- Advanced: Handling Side Effects, Using Reducers & Using the Context API
- Practice Project: Building a Food Order App
- A Look Behind The Scenes Of React & Optimization Techniques
- An Alternative Way Of Building Components: Class-based Components
- Sending Http Requests (e.g. Connecting to a Database)
- Building Custom React Hooks
- Working with Forms & User Input
- Practice Project: Adding Http & Forms To The Food Order App
- Diving into Redux (An Alternative To The Context API)
- Advanced Redux
- Building a Multi-Page SPA with React Router
- Adding Authentication To React Apps
- Deploying React Apps
- Optional: A (Pretty Deep Dive) Introduction to Next.js
- Animating React Apps
- Replacing Redux with React Hooks
- Testing React Apps (Unit Tests)
- Optional: React + TypeScript
- Optional: React Hooks Introduction & Summary
- Optional: React Summary & Core Feature Walkthrough
- Introduction
- Setting Up Environment
- Diving into Material UI Components One By One
- Form Handling
- Header Navigation Bar Components
- Advance Components
- Advanced Validations With React Hook Form
- Data Grid
- Advanced Data Grid With Project
- Theming and Styling
- Advance Styling with styled function
- Dark Mode / Light Mode
- Icons
- Grid System
- Advanced - Responsive Styles
- GRID Project - Build Responsive Navigation Bar With Material UI
- (Material UI Official) Responsive Navigation bar With Flexbox
- Login / Signup Page With Material UI
- Major Project (Design Modern UI UX Homepage of a Software Application)
- Material UI With Typescript
- A Major Full Stack Project ( Travel Blog Posting Application )
- Getting Started
- Optional: React Refresher
- NextJS Essentials (App Router)
- Routing & Page Rendering - Deep Dive
- Data Fetching - Deep Dive
- Mutating Data - Deep Dive
- Understanding & Configuring Caching
- NextJS App Optimizations
- User Authentication
- Roundup & Next Steps
- Pages & File-based Routing
- Project Time: Working with File-based Routing
- Page Pre-Rendering & Data Fetching
- Project Time: Page Pre-rendering & Data Fetching
- Optimizing NextJS Apps
- Adding Backend Code with API Routes (Fullstack React)
- Project Time: API Routes
- Working with App-wide State (React Context)
- Complete App Example: Build a Full Blog A to Z
- Deploying NextJS Apps
- Adding Authentication
- Optional: NextJS Summary
- Course Roundup