Devslopes

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