Full Stack Development Course for Beginners | TheDevSpace
Want to build your own AI powered applications? Ready to start your career as a full stack developer?
🎉 You've come to the right place!
This course covers everything you need to master full-stack development, from fundamentals to frameworks, from concepts to real projects.
With 12 real-life projects, you will learn how to build simple calculators, weather apps, blogs, SaaS platforms, as well as your own AI apps.
To get started, you can subscribe below to get our free Full-Stack Developer Starter Kit ⬇️
The Starter Kit includes a crash course on HTML, CSS and JavaScript, as well as a set of cheatsheets and resources to kickstart your development journey.
Also follow us onwhere we share coding tips, cheatsheets, and quizzes regularly.
Introduction
Your full stack journey begins here. The following lessons explain some of the most fundamental concepts in full stack development.
HTML & CSS: Fundamentals
HTML and CSS are the two most fundamental building blocks of modern web applications. HTML describes the content while CSS defines their appearance.
- 1.1Preparations
- 1.2HTML Elements
- 1.3Text Elements
- 1.4Layout Elements
- 1.5Cascading Style Sheet
- 1.6Basic Selectors
- 1.7Advanced Selectors
- 1.8Colors
- 1.9Loading Font
- 1.10Font Customization
- 1.11Text Customization
- 1.12Text Spacing
- 1.13Text Alignment
- 1.14Functions
- 1.15@ Rules
- 1.16Links
- 1.17Lists
- 1.18Tables
- 1.19Forms
- 1.20Form Fields
- 1.21Media Files
- 1.22Aspect Ratio
- 1.23Object Fit
- 1.24Cursor Behavior
- 1.25Scroll Behavior
- 1.26Visibility & Opacity
- 1.27Box Shadow
- 1.28Color Background
- 1.29Image Background
- 1.30Background Attachment
- 1.31Gradient
- 1.32Blend Modes
HTML & CSS: Advanced Patterns
Layout techniques and other advanced CSS topics used to build larger applications.
- 2.1The Box Model
- 2.2Border
- 2.3Padding & Margin
- 2.4Element Size
- 2.5Display Types
- 2.6Overflow
- 2.7Float
- 2.8Position
- 2.9Z index
- 2.10The Column Layout
- 2.11The Grid Layout
- 2.12Grid Flow
- 2.13Grid Gap
- 2.14Grid Spanning
- 2.15Grid Alignment
- 2.16The Flexbox Layout
- 2.17Flex Gap
- 2.18Flex Order
- 2.19Basis, Grow & Shrink
- 2.20Flexbox Alignment
- 2.21CalculatorProject
- 2.22Filters
- 2.23Transforms
- 2.24Transition
- 2.25Transition Timing Functions
- 2.26Transition Delay
- 2.27Animations
- 2.28Animation Iteration Count
- 2.29Animation Direction
- 2.30Animation Fill Mode
- 2.31Responsive Design
- 2.32Viewport
- 2.33Media Query
- 2.34Responsive Media
- 2.35Responsive Text
- 2.36Responsive Layout (Flexbox)
- 2.37Responsive Layout (Grid)
- 2.38Responsive Layout (Legacy)
- 2.39Layout Without Media Query
- 2.40Recreating YouTubeProject
- 2.41Building the Layout
- 2.42Building the Navbar
- 2.43Building the Sidebar
- 2.44Building the Main Section
JavaScript Basics
JavaScript was created to power interactivity on the web. Nowadays, it has grown into the foundation of many full stack web applications by running both in the browser and on the server.
- 3.1Introduction
- 3.2Basic Syntax
- 3.3Variables
- 3.4Data Types
- 3.5Numbers & BigInt
- 3.6Strings
- 3.7Boolean Values
- 3.8Undefined & Null
- 3.9Type Conversion
- 3.10If Statements
- 3.11Switch Statements
- 3.12While Loops
- 3.13For Loops
- 3.14Introducing Functions
- 3.15Variable Scope
- 3.16Arrays
- 3.17Mutating Array
- 3.18Searching Array
- 3.19Sorting Array
- 3.20Looping Array
- 3.21Objects
- 3.22Looping Object
- 3.23JSON
- 3.24Symbols
- 3.25Maps
- 3.26Sets
- 3.27Define Functions
- 3.28Function Arguments
- 3.29Rest Parameter & Spread Syntax
- 3.30Error Handling
Advanced JavaScript
Advanced JavaScript topics used to build larger applications.
- 4.1Pure Functions
- 4.2Functions as Value
- 4.3Higher Order Functions
- 4.4Function Factory
- 4.5Function Currying
- 4.6Function Wrapper
- 4.7Recursion
- 4.8Closure
- 4.9Methods
- 4.10Investigating "this"
- 4.11Losing "this"
- 4.12Constructor Functions
- 4.13Getters & Setters
- 4.14Prototypes Introduction
- 4.15Creating Prototypes
- 4.16Inspecting Prototypes
- 4.17Constructor with Prototype
- 4.18The Class Notation
- 4.19Class Inheritance
- 4.20Static Properties
- 4.21Private Properties
- 4.22Object Oriented Programming
- 4.23A Banking AppProject
- 4.24Working with Date
- 4.25The Math Object
- 4.26JavaScript Modules
- 4.27Throwing Errors
- 4.28Asynchronous Programming
- 4.29Promise
- 4.30Resolve Promise
- 4.31Promise Chaining
- 4.32Async & Wait
- 4.33Best Practices
JavaScript in the Frontend
Frontend-specific JavaScript topics and browser APIs.
- 5.1The DOM Tree
- 5.2Selecting Elements in the DOM
- 5.3DOM Navigation
- 5.4Changing Elements
- 5.5Adding Elements
- 5.6Removing Elements
- 5.7Event Handling
- 5.8Event Propagation
- 5.9Some Common Events
- 5.10Image Slider: Creating HTMLProject
- 5.11Image Slider: Adding Styles
- 5.12Image Slider: Adding Scripts
- 5.13Image Slider That "Slides"
- 5.14Regular Expressions
- 5.15Regex Flags
- 5.16Regex Matching Character Sets
- 5.17Regex Boundary
- 5.18Regex Groups & Quantifiers
- 5.19Regex Lookahead & Lookbehind
- 5.20Regex Related Methods
- 5.21CalculatorProject
- 5.22Canvas
Backend with Express.js
Express.js is a backend framework for Node.js and a key part of many full stack web applications. In this chapter, we'll explore how to build server-side logic and APIs to support dynamic frontend applications.
- 6.1Setting Up a Dev Environment
- 6.2Network & HTTP
- 6.3A Basic Web AppProject
- 6.4Express.js
- 6.5Routing
- 6.6MVC Architecture
- 6.7The Model Layer
- 6.8CRUD Operations
- 6.9The Controller Layer
- 6.10The View Layer
- 6.11BlogProject
- 6.12ORM Integration
- 6.13Creating a Post
- 6.14Uploading Files
- 6.15Showing a Post
- 6.16Updating a Post
- 6.17Deleting a Post
- 6.18Database Relations
- 6.19CRUD Tags
- 6.20Adding & Removing Tags
- 6.21Showing Tags & Posts
- 6.22Middleware
- 6.23Browser Data Storage
- 6.24User Registration
- 6.25User Authentication
- 6.26User Authorization
- 6.27User Management
- 6.28Going to Production
Frontend with React.js: Entry Level
React.js is a powerful frontend library used in modern full stack applications. In this chapter, you'll learn how to build dynamic interfaces using React.js, and how to interact with external data and APIs.
- 7.1Introducing React.js
- 7.2Setting Up React Project
- 7.3React Project Structure
- 7.4JSX
- 7.5Conditional Rendering
- 7.6List Rendering
- 7.7Adding Styles
- 7.8Components
- 7.9Import & Export Component
- 7.10Variables in Components
- 7.11Props
- 7.12"children" Prop
- 7.13Event Handlers
- 7.14Event Handlers & Props
- 7.15Event Propagation
- 7.16Event Prevent Default
- 7.17Introducing State
- 7.18States are Local
- 7.19Object States
- 7.20Multiple States
- 7.21Shared States
- 7.22Form Handling
- 7.23Component Lifecycle
- 7.24Built-In Components
- 7.25Todo ListProject
- 7.26Add New Task
- 7.27Remove Task
- 7.28Edit Task
- 7.29Complete a Task
- 7.30View Pending Tasks
Frontend with React.js: Advanced
React.js is a powerful frontend library used in modern full stack applications. In this chapter, you'll learn how to build dynamic interfaces using React.js, and how to interact with external data and APIs.
- 8.1Reducer
- 8.2Context
- 8.3Refs
- 8.4Effects
- 8.5Weather AppProject
- 8.6Hooks
- 8.7Rules of React
- 8.8React.js Optimization
- 8.9Blog AppProject
- 8.10React Router
- 8.11Create a New Post
- 8.12List Posts
- 8.13Show a Single Post
- 8.14Update a Post
- 8.15Delete a Post
- 8.16Implement Dark Theme
- 8.17Client Side Search
Full-Stack with Next.js
Next.js is a framework for building production-grade full stack applications. This chapter shows you how to create server and client rendered pages, APIs, and SaaS features such as user auth and payment processing, all in one codebase. *This chapter is still under construction.
- 9.1Next.js Basics
- 9.2Routing
- 9.3Pages & Layout
- 9.4Server vs. Client Components
- 9.5API Routes
- 9.6Server Actions
- 9.7Database Integration
- 9.8Data Fetching
- 9.9Error Handling
- 9.10Middleware
- 9.11Links, Navigation & Redirection
- 9.12Images
- 9.13Scripts
- 9.14Fonts
- 9.15Lazy Loading
- 9.16Caching
- 9.17Loading UI
- 9.18SaaS PlatformProject
- 9.19User Authentication
- 9.20Magic Link
- 9.21Custom Emails
- 9.22Protecting Routes
- 9.23OAuth Providers
- 9.24Dashboard
- 9.25Role Based Access Control
- 9.26Payment Integration
- 9.27Pricing Page
- 9.28Stripe Checkout
- 9.29Payment Webhook
Building AI Apps
Building your first AI app and learn the fundamental concepts in AI development, including tokens, temperature, top p, streaming, prompt engineering, and more.