Curriculum Guide
Below is the curriculum for an introductory web development course. It includes suggestions for students and teachers on how each game can be integrated in their lessons.
Codepip games work best as a complement to a traditional course. After being introduced to a new topic in your course, play our games to hone your skills and improve your intuition on the topic.
HTML: Structuring the web
-
HTML basics
Elements, tags, attributes, & valuesDoctype & metadataRoot, head, body, & titleNesting elementsSpecial charactersHTML comments -
Document structure
Divs & spansHeaders, nav, article, section, aside, & footer -
Text elements & formatting
Headings, paragraphs, em, & strong -
Multimedia & embedding
ImagesAudio & videoInline framesResponsive images -
Lists & tables
-
Links
Relative and absolute pathsEmail linksOpening in new windowAnchor tags -
Forms
Input typesForm, fieldset, legend & labelPlaceholder -
Accessibility
Semantic markupAlt textTab indexARIA attributes
CSS: Styling the web
-
CSS basics
Selectors, declarations, properties, & valuesEmbedding CSS in HTMLCascade & inheritanceSpecificity -
Colors
Color & background colorGradientsBackground images -
Typography
Font size, family, style, variant, & weightLine heightText decoration & transformLetter spacing -
Box model
DisplayWidth & heightMargin & paddingBorder & border radiusBox sizing -
Layout & positioning
PositionFloatFlexboxGrid -
Transforms
-
Transitions & animations
-
Media queries
-
Variables
JavaScript: Scripting the web
-
JavaScript basics
Variables & assignmentBooleans & comparisonsNumbers, operators, & mathStringArrays -
Conditional statements
If/elseSwitchBreak & continueTernary operators -
Loops
For, while, do/while -
Functions
Arguments & return valuesDefault & rest parametersScopeFunctional programming -
Objects
Properties & methodsDestructuring assignmentsObject-oriented programmingPrototypes & inheritanceClasses & constructorsJSON -
Events
-
Asynchronous JavaScript
Timeouts & intervalsPromisesAsync & await -
Browser APIs
DOM manipulationAJAX & fetchClient-side storageVideo & audioInternationalizationCanvas