Course content

Intro to Web Development

• Intro to Web Development
• What is web development?
• HTML: Building Your First Website
• What you can do as a web developer
• Frontend vs Backend development
• Installing an IDE

Getting Started With HTML

• Intro to HTML, HEAD, BODY, and HEADER
• HTML: Lists, Paragraphs, and Text Styling
• HTML: Displaying Data With Tables
• HTML: Images & Forms

Introduction to CSS

• What is CSS?
• How to use Inline, Internal and External CSS
• CSS: Element, ID & Class Selectors
• CSS: Colours
• CSS: Backgrounds & Borders
• Using browser inspector tools
• CSS: Combinators
• CSS: Grouping
• CSS: Specificity
• Specificity Domination

Intermediate CSS

• CSS: Text Styling & Formatting
• CSS: Google Fonts
• CSS: Images
• CSS: Padding & Margin
• CSS: Rows & Columns
• Intermediate CSS

Advanced CSS: Building and styling website

• CSS: Intro to building your first Website!
• CSS: Building the Navbar
• CSS: Making the Navbar Mobile Responsive – Part 1
• CSS: Making the Navbar Mobile Responsive – Part 2
• CSS: Creating the Form Group
• CSS: Working with iframes
• CSS: Working with images and box shadows
• CSS: Working with text and image spacing
• CSS: Building the footer

Computers & Code

• How Computers Work
• Understanding Binary
• How code works
• Heap vs Stack
• Understanding hexadecimal
• Variables & storage capacity

Learning to Code With Javascript

• Time to Javascript
• Javascript Reference
• Javascript: Comments & How to Link Scripts
• Javascript: Variables & Strings
• Javascript: Numbers
• Javascript: Comparison Operators
• Javascript: Logical Operators
• Javascript: Arrays
• Javascript: Loops
• Javascript: Functions
• Javascript: Objects
• Javascript: Bind
• Percentage Calculator – Setting Up the Form
• Percentage Calculator – Grabbing Elements With Javascript
• Percentage Calculator – Using Event Listeners
• Percentage Calculator – Algorithm & Prevent Default

Version Control With Git

• How Version Control Works
• macOS Terminal Basics
• Git Basics
• Setting up Github on macOS
• Github vs Bitbucket
• Local & Remote Repositories
• Working Through Git Merge Conflicts

Introduction to Bootstrap 4

• What is Bootstrap 4?
• Downloading Bootstrap 4
• Bootstrap 4: Project Setup
• Bootstrap 4: Overview of Bootstraps Components
• Bootstrap 4: Understanding Bootstraps Classes
• Bootstrap 4: Using the Grid System

Bootstrap 4: Creating a Login Portal

• Bootstrap 4 Cards: Creating the Sign-in Portal Box
• Bootstrap 4 Forms: Adding the input fields
• Bootstrap 4 Buttons: Adding the Sign In button and Labels
• Bootstrap 4 Grids – Finishing Mobile Compatibility

Bootstrap 4: Skate or Die Website

• Bootstrap 4: Skate or Die Intro
• Bootstrap 4: Working with Navbars
• Bootstrap 4: Using Carousels
• Bootstrap 4: Nesting rows and columns
• Bootstrap 4: Modals
• Bootstrap 4: Adding images and buttons
• Bootstrap 4: Sizing Modals
• Bootstrap 4: Building the Footer
• Bootstrap 4: Working with Font Awesome Favicons

Intro to Flexbox

• What is flexbox?
• Flexbox fundamentals
• Intro to flexbox landing page
• Building the navbar
• Making the dropdown menu functional
• Designing the navbar for mobile
• Creating the landing page header
• Building the Services section
• Creating the first Media Object
• Flexbox ordering
• Adding the Quote button
• Designing the portfolio object
• Making the portfolio object mobile compatible
• Making Media Objects mobile compatible
• Creating the contact form
• Making the contact form mobile compatible

CSS Grids

• Grid Layout Containers
• Grid Layout Items
• Rows and Columns
• Grid Layout Areas
• Grid Layouts Website
• Exercise: Masonry Gallery Layout
• CSS Grid 

Beginner Sass

• Intro to Sass
• What is Sass?
• How to install Sass and compile it to CSS
• Your FIRST Sass Website!
• Are you Sassy?
• Different tools to compile Sass
• How to structure your Sass
• Sass Partials: Maintainable Styles Rules
• Sass Variables and Imports: Create a clean Scalable Stylesheet
• Sass Mixins: Save time & recycle styles
• Sass Extends: Share style properties between other selectors

How to Set Up Hosting For Your Web Apps

• Web Hosting
• Creating a server
• Accessing your server
• Installing Nginx
• Creating server SSH Keys
• Uploading files to your server
• Setting up a domain
• Final Step: Configuring Nginx

Intro to Node, Mongo, & REST APIs

• Understanding Web Requests
• Installing Node on macOS
• All About JSON
• Basics of Node
• Node Modules
• Building Your First API
• 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

Intro to React

• Swag Shop: Setting Up React Tooling
• Swag Shop: Installing Bootstrap
• 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