Curriculum Guide

Below is the curriculum for an introductory web development course. It includes suggestions for how each game can be integrated, which may be helpful to teachers and students alike.

Codepip games work best as a complement to a traditional course. After being introduced to a new topic in your course, play our coding games to hone your skills and improve your intuition on that topic.

HTML: Structuring the web

• HTML basics

  Elements, tags, attributes, & values
  Doctype & metadata
  Root, head, body, & title
  Nesting elements
  Nester
  Special characters
  HTML comments

• Document structure

  Divs & spans
  Headers, nav, article, section, aside, & footer

• Text elements & formatting

  Headings, paragraphs, em, & strong

• Multimedia & embedding

  Images
  Audio & video
  Inline frames
  Responsive images

• Lists & tables

• Links

  Relative and absolute paths
  Email links
  Opening in new window
  Anchor tags

• Forms

  Input types
  Form, fieldset, legend & label
  Placeholder

• Accessibility

  Semantic markup
  Alt text
  Tab index
  ARIA attributes
• Sourcery

CSS: Styling the web

• CSS basics

  Selectors, declarations, properties, & values
  CSS Scoops
   
  Nth Cart
  Cascade & inheritance
  Specificity
  Selector Showdown
   

• Colors

  Color & background color
  Gradients
  Background images

• Typography

  Font size, family, style, variant, & weight
  Line height
  Text decoration & transform
  Letter spacing

• Box model

  Display
  Width & height
  Margin & padding
  Border & border radius
  Box sizing

• Layout & positioning

  Position
  Float
  Flexbox
  Flexbox Froggy
  Grid
  Grid Garden
  Anchor
  Anchoreum

• Transforms

  CSS Surgeon

• Transitions & animations

• Media queries

• Variables

• Cascade

• Frameworks

  Tailwind
  Tailwind Trainer

JavaScript: Scripting the web

• JavaScript basics

  Variables & assignment
  Booleans & comparisons
  Numbers, operators, & math
  Code Crunchers
  Arrays
  Disarray
  Strings
  Stringo
  Regular expressions
  Regex Machina

• Conditional statements

  If/else
  Switch
  Break & continue
  Ternary operators

• Loops

  For, while, do/while

• Functions

  Arguments & return values
  Default & rest parameters
  Scope
  Functional programming

• Objects

  Properties & methods
  Destructuring assignments
  Object-oriented programming
  Prototypes & inheritance
  Classes & constructors
  JSON

• Events

• Asynchronous JavaScript

  Timeouts & intervals
  Promises
  Async & await

• Browser APIs

  DOM manipulation
  AJAX & fetch
  Canvas
  Video & audio APIs
  Client-side storage

• Browser Developer Tools

  Inspector
  Console
  Console Caper
  Debugger
  Network Monitor
  Performance Tools

SQL: Managing data on the web

• SQL basics

  Relational databases
  Data types

• SQL queries

  Querymon
  Selecting tables and columns
  Order and limit
  Comparison and logical operators
  Aggregate functions
  Subqueries
  Joining tables
  Unions and intersections

• Data manipulation

  Inserting and removing rows
  Updating values

• Schema design

  Creating tables
  Modifying and removing tables
  Constraints
  Indexes