Full Stack Web Development
For absolute beginners. Go from zero experience to building your own websites, APIs, and databases.
Join the 300,000+ students who have trusted Devslopes to learn to code
What is web development?
What you can do as a web developer
Where should I start as a beginner?
Frontend vs Backend development
Installing an IDE
Building your first website
Intro to HTML, HEAD, BODY, and HEADER
Working with HTML lists, paragraphs, and text styling
Displaying data with tables
Images & forms in HTML
Images & forms in HTML source
WebStorm IDE: Basic Setup
WebStorm IDE: Navigating your project
WebStorm IDE: Performing searches
WebStorm IDE: Mastering the editor
What is CSS?
How to use inline, internal and external CSS
Element, ID & Class Selectors
Element, ID & Class Selectors source
CSS: Colors
CSS: Backgrounds & borders
Using browser inspector tools
CSS Combinators
CSS Grouping
CSS: Specificity
Text styling & formatting
Google Fonts
CSS: Images
CSS: Padding & Margin
Rows & Columns
Rows & Columns source
Intro to your first CSS Website
starter source
Building the navbar
Making the navbar mobile responsive: Part 1
Making the navbar mobile responsive: Part 2
Creating the form group
Working with iframes
Working with images and box shadows
Working with text and image spacing
Building the footer
final source
How Computers Work
source code
Understanding Binary
Heap vs Stack
How code works
Variables & storage capacity
Understanding hexadecimal
Git & Version Control: The fun way
Terminal Basics: Changing directories
Terminal Basics: Creating directories & files
Terminal Basics: Copying & renaming files
Terminal Basics: Deleting files & directories
Git Basics
Setting up Github
Working with Local & remote repositories
Handling git merge conflicts
Time to Javascript
Javascript reference
Javascript comments & how to link scripts
Javascript variables & strings
Numbers in Javascript
Comparison operators in Javascript
Logical operators in Javascript
Javascript arrays
Javascript loops
Javascript functions
Javascript objects
Javascript bind
Calculator: Setting up the form
Calculator: Grabbing elements with Javascript
Calculator - Using event listeners
Calculator - Algorithm & prevent default
Javascript source code
What is Bootstrap 4?
Downloading Bootstrap 4
How to setup a Bootstrap 4 project
Bootstrap 4 components overview
Understanding Bootstrap 4 classes
Using the grid system
Intro to Bootstrap Login Portal project
starter source
Bootstrap Cards: Creating the sign in inputs
Bootstrap Forms: Adding the input fields
Bootstrap Buttons: Adding the sign in button and Labels
Bootstrap Grids: Making the form mobile responsive
final source
Skate or Die Intro
starter source
Bootstrap 4: Working with navbars
Bootstrap 4: Using carousels
Bootstrap 4: Nesting rows and columns
Bootstrap 4: First modal
Bootstrap 4: Adding images and buttons
Bootstrap 4: Sizing modals
Bootstrap 4: Building the footer
final source
Bootstrap 4: Working with Font Awesome favicons
What is flexbox?
Flexbox fundamentals
Flexbox fundamentals source
Intro to flexbox landing page
Landing page starter source
Building the navbar: Part 1
Building the navbar: Part 2
Designing the navbar for mobile
Making the dropdown menu functional
Creating the landing page header
Building the Services section
Creating the first Media Object
Flexbox ordering
Adding the Quote button
Making Media Objects mobile compatible
Designing the portfolio object
Making the portfolio object mobile compatible
Creating the contact form
Making the contact form mobile compatible
Landing page final source
Intro to Sass
What is Sass?
How to install SASS and compile it to CSS
Compile Sass source
Your FIRST Sass Website!
Different tools to compile Sass
Sass Architecture
Sass architecture source
Sass Partials: Maintainable Styles Rules
Partials source
Sass Variables and Imports: Create a clean Scalable Stylesheet
Sass variables source
Sass Mixins: Save time & recycle styles
Sass Extends: Share style properties between other selectors
Extends source
Final Project: Intro to our Landing Page
Project starter source
Final Project: Setting up our Variables
Final Project: Styling our Navbar with Sass
Final Project: Creating the Banner Container
Final Project: Adding Content to our Banner Container
Final Project: Doing some quick cleanup in our Sass files
Final Project: Using the Extend method
Final Project: Styling a section splitter with Sass
Final Project: Using advanced Mixins
Final Project: Styling the next Container with Sass
Final Project: Finishing our Landing Page, Congrats!
Final project source
Web Hosting
Creating a server
Accessing your server
Installing Nginx
Creating server SSH Keys
sample project source
Uploading files to your server
Setting up a domain
Final Step: Configuring Nginx
Understanding Web Requests
Installing Node on macOS
All About JSON
Basics of Node
Node Modules
Building Your First API
First API source
Postman, GET & POST Requests
URL Parameters & Delete Requests
Installing MongoDB on macOS
Working With the Mongo Shell
Searching for Documents
Deletions & Documentation
Swag Shop API: Project Creation
Swag Shop API: Creating the Models
Swag Shop API: Posting Products
Swag Shop API: Fetching Products
Swag Shop API: Populating Data
Swag shop source
Swag Shop: Setting Up React Tooling
Swag Shop: Installing Bootstrap
Swag shop API source
Swag Shop: Setting Up the API
Swag Shop: Creating a HTTP Service
Swag Shop: Promises With ES6 & React
Swag Shop: Components in React - Website Product
Swag Shop: Props in React
Swag Shop: Working With State in React
Swag Shop: Creating a WishList Component
Swag Shop: Building a Singleton Data Service
Swag Shop: Creating a Notification Service
Swag Shop: Posting Notifications to React Components
Swag Shop: Observing Notifications in React
Swag Shop: Finishing Our Full Stack React App