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
    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

CSS: Styling the web

  • CSS basics

    Selectors, declarations, properties, & values
    Embedding CSS in HTML
    Cascade & inheritance
    Specificity
     
  • 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
    Grid
  • Transforms

  • Transitions & animations

  • Media queries

  • Variables

JavaScript: Scripting the web

  • JavaScript basics

    Variables & assignment
    Booleans & comparisons
    Numbers, operators, & math
    String
    Arrays
  • 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
    Debugger
    Network Monitor
    Performance Tools

SQL: Managing data on the web

  • SQL basics

    Relational databases
    Data types
  • SQL queries

    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