Advanced Basics for Web

Section 1: SCSS and BEM

Learning Objectives:

1. Understand the BEM naming convention
2. Understand SCSS nesting, partials and variables
3. Be able to Implement SCSS in a React Project

Video recording

1. What is BEM
2. What is SCSS
3. Using SCSS in Your React Project
4. Other SCSS Features

Section 2: Building Responsive Components

Learning Objectives:

1. Able to explain what a responsive component is
2. Able to use Media Queries to conditionally attach styles to the DOM
3. Able to build responsive components in a React project

Video recording

Source Code

1. What is a Responsive Component
2. Laying Out a Nav Bar
3. Introducing Media Queries
4. Using Hooks to Toggle Our Responsive Nav Bar

Section 3: UX for Asynchronous Components

Video recording

Source Code

Section 4: Testing Components with Jest

Video recording

Source Code

1. Adding Your First Test
2. TDD With Testing Library
3. TDD with Interactive Component
4. Testing an Asyncronous Component

Section 5: Managing API calls and Caching

Learning objectives:

1. Understand how and where API's should be called in a React Application
2. Able to split code in React for better user experience and faster loading times
3. Able to save and access data in session storage

Video recording

1. API Calls Overview
2. Where Should Calls Be Made in an Application?
3. Code Splitting in React
4. Caching in Session Storage

Section 6: Testing APIs with Jest and Supertest

Learning Objectives:

1. Implement Jest and Supertest in Express app
2. Write and run unit tests
3. Write and run integration tests on specific routes

Video recording OR Video recording

Source Code

Outline

Section 7: Client Side Storage

Learning Objectives:

1. Able to reason about when and how data should be stored in the browser
2. Able to talk about the difference between ways to store data in the browser

Video Recording Source Code

1. Overview of Client Side Storage
2. Cookies
3. Session Storage
4. Local Storage

Section 8: SQL 1

Learning Objectives:

1. Review how SQL relates to web developement including SQL commands and http protocols
2. Review or learn to use BETWEEN, LIKE, GROUP BY, BETWEEN, SORT BY and LIMIT

Video Recording

1. Understanding the Connection between SQL and Web Development
2. Refining Selectors when Making a Query

Section 9: SQL 2

Video Recording

1. Joins

Section 10: Git

Learning Objectives:

1. Able to explain the difference between git log and git reflog
2. Able to resolve conflicts when merging
3. Able to use git stash including stashing, poping and writing messages

Video recording

1. Review of Git
2. Amending Commits

Section 11: Contributing to Open Source 1

Learning Objectives

1. Able to explain what open source software is and give examples
2. Able to explore open source software including reviewing issues that are open for resolution
3. Able to fork and clone a repo to commence work on an issue

Video Recording

1. What is Open Source?
2. Find a Project to Contribute To
3. Reviewing Open Issues
4. Forking, Cloning and Getting Started

Section 12: Contributing to Open Source 2

Learning Objectives

1. Selects 1-2 issues that they would like to resolve

2. Begins the process of resolving the issue

3. Resolving an Issue Locally

4. Opening a Pull Request

5. Resolving a Bounced Pull Request

6. Adding an Open Source Contribution to Your Resume