You are on page 1of 90

Units

Web Development Fundamentals


Web Development Fundamentals
Improved Styling with CSS
Making a Website Responsive
JavaScript Syntax, Part I

JavaScript Syntax, Part II


JavaScript Syntax, Part II

Building Interactive Websites


Making A Website Accessible

CSS Transitions and Animation

Command Line, Git, GitHub


Command Line, Git, GitHub

HTML, CSS, and JS Portfolio Project

JavaScript Syntax, Part III


TDD Fundamentals
Async JavaScript and HTTP Requests

Web Apps
React, Part I
React, Part II
Redux

Advanced Concepts in TDD


Advanced Concepts in TDD

React and Redux Portfolio Project

Advanced Web Development


Linear Data Structures
Complex Data Structures
Algorithms
Search & Graph Search Algorithms

Final Front-End Portfolio Project


Subtopics

Introduction: Web Development Fundamentals

Overview of the Internet

The Internet, Explained

Languages for Web Development

Web Development For Beginners

What is Front-End?

Front-End Frameworks

Introduction to HTML

Introduction to HTML

HTML Document Standards

HTML Document Standards

Intro to Mozilla Developer Network

HTML on MDN Web Docs: Debugging

Fashion Blog

HTML Tables

HTML Tables

Wine Festival Schedule

Semantic HTML

Semantic HTML

Semantic HTML

Writing HTML with Accessibility in Mind

New York City Blog

Setup and Syntax

Selectors

Setup and Selectors

Visual Rules

Visual Rules
Healthy Recipes

Olivia Woodruff Portfolio

Getting Started with Visual Studio Code and Building HTML Websites

Create Your First HTML/CSS Project

What is GitHub Pages?

Creating a Website on GitHub Pages

Code Review: Dasmoto's Arts & Crafts

Intro to Chrome Devtools

CSS Visual Rules in Chrome Inspector

Dasmoto's Arts & Crafts

Dasmoto Solution

What Makes for a Semantic Class Name?

Semantic CSS

Color

Color

Paint Store

Typography

Typography

Typography

Code Challenge: CSS Design

Build Your Own Cheat Sheet

Review: Web Development Fundamentals

CS Assessment Trigger

Introduction: Improved Styling with CSS

The Box Model

Changing the Box Model

Box Model

The Box Model in DevTools

The Box Model in Devtools

The Box Model: Davie's Burgers

CS Assessment Trigger
Display and Positioning

Display and Positioning

Broadway

Color Theory

Learn Color Theory Quiz

Journey Around the World

Color for UI

Color For UI Quiz 1

Pinpoint E-Commerce

Learn Text Design: Best Practices

Reel Good Reviews

Learn Text Design Quiz

Google Font Pairings

Learn Links and Buttons

Affordances, Signifiers, and Clickability

Links and Buttons

The Summit

Learn Secondary Navigation

Learn Secondary Navigation

FreshDeals: Blueberries

Build a Website Design System

Review: Improved Styling with CSS

CS Assessment Trigger

Introduction: Making a Website Responsive

Responsive Web Design

Sizing Elements

Sizing Elements

Media Queries

Media Queries Quiz

Simulate Different Screen Sizes with Device Mode in Chrome DevTools

Tsunami Coffee
You Don't Need a Framework: Understanding the Fundamentals of Responsive Design

Flexbox

Flexbox

Flexbox: To-Do App

Tea Cozy

Documentation and Research

Project: Fotomatic

Fotomatic Solution

Grids and Spacing

Grids And Spacing Quiz 1

Grid Essentials

Grid

Advanced CSS Grid

Grid

A Complete Guide to CSS Grid

CS Assessment Trigger

Things I've Learned About CSS Grid Layout

PupSpa

CSS Grid: Task Board

CSS Grid: Architecture Blog

What are Wireframes?

From Design to Website

Everything You Need to Know about Wireframes and Prototypes

Company Home Page with Flexbox

Responsive Club Website

Review: Making a Website Responsive

CS Assessment Trigger

Introduction: JavaScript Syntax, Part I

JavaScript: All the Cool Kids Are Doing It

JavaScript Versions: ES6 and Before

Introduction to JavaScript
Variables

CS Assessment Trigger

Introduction to JavaScript

Kelvin Weather

Dog Years

Conditional Statements

Conditional Statements Quiz

Magic Eight Ball

Race Day

Functions

Functions Quiz

CS Assessment Trigger

Rock, Paper, or Scissors

Sleep Debt Calculator

CS Assessment Trigger

Scope

Scope Quiz

CS Assessment Trigger

Training Days

CS Assessment Trigger

Introduction: JavaScript Syntax, Part 2

Arrays

Arrays Quiz

Loops

Loops Quiz

Whale Talk

The for...of Loop

Objects

Advanced Objects

Objects

Meal Maker
Team Stats

Higher-Order Functions

Iterators

Iterators Quiz

How To Use Array Methods in JavaScript: Iteration Methods

Mini Linter

Thinking About Errors in Your Code Differently

Debugging JavaScript Code

CS Assessment Trigger

Pair-Programming: JavaScript Syntax Part I and II

Code Challenges: Intermediate JavaScript

JavaScript Practice: Arrays, Loops, Objects, Iterators

Lodash

Credit Card Checker

Mysterious Organism

Review: JavaScript Syntax, Part II

CS Assessment Trigger

Introduction: Building Interactive Websites

The Script Element

Create Your First JavaScript Website

How To Add JavaScript to HTML

What is the DOM?

The Document Object Model

Javascript and the DOM

DOM Events with JavaScript

DOM Events

Piano Keys

Introduction to Form Validation

HTML Forms

Form Validation

HTML Forms
Client-Side Form Validation

Form a Story

Review: Building Interactive Websites

Introduction: Making a Website Accessible

Accessibility (a11y)

What is Digital Accessibility?

Accessible Design

Accessibility

Accessibility Quiz 1

Setting Up and Using Screen Readers

The A11y Project Checklist

CSS and JavaScript Accessibility Best Practices

Review: Making a Website Accessible

Introduction: CSS Transitions and Animation

CSS Transitions

CSS Transitions and Transforms for Beginners

Transitions - 20,000 Leagues Under the Sea

Transitions Quiz

CSS Animation for Beginners

Review: CSS Transitions and Animation

CS Assessment Trigger

Introduction: Command Line, Git, and GitHub

What is Hosting?

What is a Domain Name?

Navigation

Navigation

Setting Up Command Line

Bicycle World

Daily Buzz

Basic Git Workflow


Basic Git Workflow

What is Github?

Set Up with Git and GitHub

Getting Started with Git and Github (Videos)

Starting a Code Base on Github

How to Push Code to Github

Understanding the GitHub Flow

What is Markdown?

What is Markdown?

Mastering Markdown

How to write a good README for your GitHub project?

Review: Command Line, Git, and GitHub

CS Assessment Trigger

Personal Portfolio Website

Introduction: JavaScript Syntax, Part III

Classes

Classes

Build a Library

School Catalogue

Understanding Classes in JavaScript

Introduction to JavaScript Runtime Environments

Implementing Modules using ES6 Syntax

ES6 Modules

What are CJS, AMD, UMD, and ESM in JavaScript?

WorkAround Explorer

CS Assessment Trigger

Learn JavaScript: Error Handling

Error Handling
Pair-Programming: JavaScript Syntax, Part III

JavaScript Practice: Classes

Find Your Hat

Review: JavaScript Syntax, Part III

CS Assessment Trigger

Introduction: TDD Fundamentals

Why Test?

Test-Driven Development

Unit Testing

Integration Testing

Introduction to Test-Driven Development

Why Test?

Cake O'Clock

Automate and Organize Tests

Write Expressive Tests

Rooster Regulation

Learn Mocha

Learn TDD With Mocha

TDD With Mocha

Factorial Feature

Review: TDD Fundamentals

Introduction: Async JavaScript and HTTP Requests

General Asynchronous Programming Concepts

Introducing Asynchronous JavaScript

Cooperative Asynchronous JavaScript: Timeouts and Intervals

JavaScript Promises

JavaScript Promises

Graceful Asynchronous Programming with Promises

JavaScript Promises for Dummies


Async Await

Async Await

Making Asynchronous Programming Easier with async and await

Choosing the Right Approach

HTTP Requests

An Overview of HTTP

What is an API?

Introduction to Web APIs

What Is JSON?

Working with JSON in JavaScript

Requests I

CS Assessment Trigger

JavaScript Requests Quiz I

Requests II

JavaScript Requests Quiz II

Fetching Data from the Server

Using Fetch

Third-Party APIs

Wanderlust

Introduction to Web Security

Top 10 Web Application Security Risks

Authentication and OAuth

What is CORS?

Review: Async JavaScript and HTTP Requests

Introduction: Web Apps

What is a Web App?

What is a SPA?

Poll Results: "Sites" vs "Apps"

Review: Web Apps


Introduction: React, Part I

A Re-Introduction to JavaScript

Destructuring with JavaScript

Introduction to Functional JavaScript

The Virtual DOM

React: The Virtual DOM

What the Fork is the React Virtual DOM

Intro to JSX

Advanced JSX

JSX

Animal Fun Facts

Your First React Component

Components and Advanced JSX

React Components

Authorization Form

Creating a React App

CS Assessment Trigger

Review: React, Part I

Introduction: React, Part II

Components Render Other Components

this.props

this.state

Components Interacting

Random Color Picker

React Developer Tools

Stateless Components From Stateful Components

Child Components Update Their Parents' state

Child Components Update Their Siblings' props

Stateful and Stateless Programming Patterns


Video Player

Component Lifecycle Methods

Social Network for Pets

Lifecycle Quiz

Jammming

Feature Request: Jammming

Getting Started with Netlify

Deploying a Static Site with Netlify

Create and Share a React App on GitHub

Deploy Your React App to Netlify

Function Components

The State Hook

The Effect Hook

Passing Thoughts

React Hooks

CS Assessment Trigger

Style

Container Components From Presentational Components

PropTypes

React Forms

Copycat

Advanced React

Getting Started with Jest for JavaScript Testing

Unit Testing React Applications with Jest and Enzyme

Testing in React: Best Practices, Tips, and Tricks

Code Review: Appointment Planner

Appointment Planner

Review: React, Part II

CS Assessment Trigger
Introduction: Redux

Core Concepts in Redux

Redux Road

Redux Core Concepts Quiz

Intro to the Core Redux API

Strategies for Complex State

Redux API Quiz

Codecademy Store

Implementing the Redux Store from Scratch

The React Redux Library

React Redux Quiz

Matching Memory

The Redux Toolkit

Redux Toolkit Quiz

Expense Tracker

Redux DevTools

Redux Middleware

Managing Promise Lifecycle Actions

Async Middleware Quiz

Redux News Reader

Writing Tests in Redux

Testing Redux for Real Life Apps

Testing Strategies for React and Redux

React-Redux Testing Best Practices

Code Review: Flashcards

Flashcards

Review: Redux

CS Assessment Trigger

Introduction: Advanced Concepts in TDD


What is Test Coverage?

Mocking, Stubbing, and Contract Testing

Writing Tests for React Applications Using Jest and Enzyme

Automating Functional Testing using Selenium

Setting up Your Own Test Automation Environment

Review: Advanced Concepts in TDD

CS Assessment Trigger

Group Project: React/Redux

Introduction: Advanced Web Development

Why CSS-in-JS?

Getting Started with Styled Components

A Smashing Guide To The World Of Search Engine Optimization

SEO Checklist

What Build Tools Can Do for You

Comparison of Build Tools

The Many Jobs of JS Build Tools

How to Keep Your JavaScript Libraries up to Date

Pair Programming: Optimizing Your Application

Optimizing Your React Application

Fast Load Times

Web Sockets with Socket.io, React, and Node

Review: Advanced Web Development

Introduction: Linear Data Structures

Why Data Structures?

Data Structure APIs

Nodes

Nodes: Conceptual

Nodes: Conceptual
Nodes: JavaScript

Nodes: JavaScript

Linked Lists

Linked Lists: Conceptual

Linked Lists: Conceptual

Learn Linked Lists: JavaScript

Learn Linked Lists: JavaScript

Video: Singly Linked Lists

Interactive: Singly Linked Lists

Github Cheat Sheet: Singly Linked Lists

Swapping Elements in a Linked List

Two-Pointer Linked List Techniques

Practice: Singly Linked Lists

Doubly Linked Lists

Doubly Linked Lists: Conceptual

Doubly Linked Lists: Conceptual

Doubly Linked Lists: JavaScript

Doubly Linked Lists: JavaScript

Video: Doubly Linked Lists

Interactive: Doubly Linked Lists

Github Cheat Sheet: Doubly Linked Lists

Practice: Doubly Linked Lists

Queues

Queues: Conceptual

Queues: Conceptual

Learn Queues: JavaScript

Learn Queues: JavaScript

Video: Stacks & Queues

Interactive: Queues
Github Cheat Sheet: Queues

Stacks

Stacks: Conceptual

Stacks: Conceptual

Learn Stacks: Javascript

Learn Stacks Javascript Quiz

Web Navigator

Video: Stacks & Queues

Interactive: Stacks

Github Cheat Sheet: Stacks

Review: Linear Data Structures

Introduction: Complex Data Structures

Hash Maps

Hash Maps: Conceptual

Hash Maps: Conceptual

Learn Hash Maps: JavaScript

Learn Hash Maps: JavaScript

Video: Hash Maps

Interactive: Hash Maps

Github Cheat Sheet: Hash Maps

Trees

Trees: Conceptual

Trees: Conceptual

Trees: JavaScript

Trees: JavaScript

Heaps

Heaps: Conceptual

Heaps: Conceptual

Heaps: Javascript
Heaps: JavaScript

Video: Heaps

Interactive: Heaps

Github Cheat Sheet: Heaps

Graphs

Graphs: Conceptual

Graphs: Conceptual

Graphs: JavaScript

Graphs: Javascript

Review: Complex Data Structures

Introduction: Algorithms

Recursion

Recursion: Conceptual

Recursion: Conceptual

Recursion in JavaScript

Recursion in JavaScript

Recursive vs. Iterative Traversal

Why Asymptotic Notation?

Asymptotic Notation: Conceptual

Asymptotic Notation: Conceptual

Asymptotic Notation: JavaScript

Asymptotic Notation: JavaScript

Space Complexity

Sorting Algorithms

Bubble Sort: Conceptual

Bubble Sort: Conceptual

Bubble Sort: JavaScript

Bubble Sort: JavaScript

Merge Sort: Conceptual


Merge Sort: Conceptual

Merge Sort: JavaScript

Merge Sort: JavaScript

Quicksort: Conceptual

Quicksort: Conceptual

Quicksort: Javascript

Quicksort: Javascript Quiz

Review: Algorithms

Introduction: Search & Graph Search Algorithms

Binary Search and Search Trees

Binary Search: Conceptual

Binary Search: JavaScript

Binary Search Trees: JavaScript

Binary Search Trees: JavaScript

Graph Traversals

Graph Search: Conceptual

Graph Search: Conceptual

Graph Traversal: JavaScript

Graph Traversal: Javascript

Review: Search & Graph Search Algorithms

Group Project: Final Project


Test Name
CSS Test: Beta Tester Pro

CSS Test: CfButton


CSS Test: Control Panel
CSS Test: Testimonial Grid

CSS Test: Stats Preview


Javascript Test : Demo Frontend Dynamic

JavaScript Quiz 1

Javascript Test: Book Management

JAVASCRIPT TEST 1 : Evaluate Expressions


JavaScript Quiz 2

JavaScript Test 2: Job Progress Bar


JavaScript Test : Launch Counter Timer
GIT Quiz 1

JavaScript Quiz 3
JavaScript Test : Song Management
JavaScript Quiz 4
React Quiz 1
React Quiz 2

ReactJS Music Player


ReactJS RBG Mixer
URL
https://app.codesignal.com/public-test/kei6PjQS9Rum7nhgT/EiWvwsm6LHG8P6

https://app.codesignal.com/public-test/DszqRkRJYjLFCA83Y/6PGMQWMtmzCxLs
https://app.codesignal.com/public-test/ZQNT63A4zWZaPqGTS/LdMMCAEwmL6ift
https://app.codesignal.com/public-test/rG2EYXKbAWMgeKqDv/Nqxj5mvauosZed

https://app.codesignal.com/public-test/7mCDogXKECQd98wgh/HTjRopwkCww89Q
https://app.codesignal.com/public-test/4sYWNEyz4LSwNteZ6/P6XrwzzegE3Hvb

https://app.codesignal.com/public-test/vpDXvb7q2cmWTSvju/JgxgsxRc9xXzN4

https://app.codesignal.com/public-test/FGaXCp4aMhAqPewdj/QRyDMhz6PKdDEZ

https://app.codesignal.com/public-test/XL3zJvwduLEmrBMfD/xYQfcGJba2ABEA
https://app.codesignal.com/public-test/Mk8KNJJtm3WkEZRmH/cTYbbB3p3N897y

https://app.codesignal.com/public-test/c8KLzbvJ2hc4qvFbQ/ZPXX6R5WRRN2uJ
https://app.codesignal.com/public-test/7iMvdym9sjvS6JPs9/z3SwpR5hN5JrG2
https://app.codesignal.com/public-test/KqYcZkM7KkmjyWiF4/HsLzjveKaSNPmD

https://app.codesignal.com/public-test/Lss3fCmPrSuRaj52B/2hgocWjFdvSxLK
https://app.codesignal.com/public-test/R6Gd29kkokX3RXPRy/fmkMoWmXk7oSxY
https://app.codesignal.com/public-test/JFH49D2f2FFN7un2r/Fomkn7fxpprBNt
https://app.codesignal.com/public-test/rKkz9artEMxJtmwFj/8gRfp7WaiDwNvs
https://app.codesignal.com/public-test/vX3ssGzTPWng2GXYk/sMDPbuTSSzfBR3

https://app.codesignal.com/public-test/sMnKmRXbnfWfyfidY/4G9kj853hwKhMs
https://app.codesignal.com/public-test/cvKSpejGQE8YyCe6b/XKeD3636iuBSgS
Test Platform GitHub | Netlify
Code Signal NO | NO

Code Signal NO | NO
Code Signal NO | NO
Code Signal NO | NO

Code Signal NO | NO
Code Signal NO | NO

Code Signal NO | NO

Code Signal NO | NO

Code Signal NO | NO
Code Signal NO | NO

Code Signal NO | NO
Code Signal NO | NO
Code Signal NO | NO

Code Signal NO | NO
Code Signal NO | NO
Code Signal NO | NO
Code Signal NO | NO
Code Signal NO | NO

Code Signal NO | NO
Code Signal NO | NO

You might also like