Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Front-end Curriculum Draft

Module 1

  • Semantic markup
  • HTML standards mode and quirks mode
  • HTML fundamentals
    • Classes and IDs
  • CSS fundamentals
    • Selectors
    • Resets and normalizers
    • The box model
      • border-box
  • Mobile design principles
  • Desktop design principles
  • JavaScript fundamentals
    • Variables and functions
    • Data structures
    • Object-oriented JavaScript
    • First-class functions
    • Scopes and closures
    • Types and grammar
    • Node.js basics
  • Test-driven JavaScript
  • Version control

Module 2

  • How the Web Works
    • HTTP actions
    • Request/response headers
  • Browser Events
  • Prototypal inheritance in JavaScript
  • AJAX
  • Client-side debugging strategies
  • User research
  • UX fundamentals
  • UI prototyping
  • UI architecture
  • Usability and accessibility
  • jQuery fundamentals
  • jQuery UI
  • HTML templating (e.g. Handlebars, etc.)
  • Front-end Build Tools and Workflows
  • Intermediate CSS
    • Floats
    • Clearing techniques
    • Writing efficient CSS
    • CSS transitions and animations
    • Translations
  • CSS preprocessors: SASS, LESS, and Stylus
  • Progressive enhancement (and graceful degradation)

Module 3

  • Asynchronous JavaScript
    • Callbacks
    • Promises
  • Functional JavaScript
    • Partial application
    • Currying
    • Immutable data
  • Localization and internationalization
  • Responsive design, media queries, and breakpoints
  • CSS frameworks (e.g. Bootstrap, Foundation, Pure, Skeleton)
  • CSS methodologies
    • OOCSS
    • BEM
    • SMACSS
  • cookie, sessionStorage, and localStorage
  • HTML 5 Media APIs
    • Canvas
    • Web Audio
    • Video
    • WebRTC
  • Flexbox
  • Image replacement techniques
  • Web fonts and responsive typography

Module 4

  • CORS
  • Web components
  • WebSockets
  • Cross-browser development and testing
  • Front-end JavaScript Frameworks
  • Mobile Development with Apache Cordova
  • CDNs and Asset Delivery
  • Offline Caching
  • Client-side security
  • Data visualization wit D3
  • Scalable Vector Graphics
    • Styling SVG
    • Limits of SVG
  • Client-side performance
Copy link

brittanydionigi commented Aug 27, 2015

wtf is BEM it looks like throw up

Copy link

codylindley commented Oct 7, 2015

Hey Steve

This is great. Not many people have the experience or insight to be able construct a front-end dev curriculum. I've linked to this from my up and coming front-end developer handbook. I'm curious if you'd consider giving the book a review.

And maybe contribute or complain (via github).

Copy link

LazyDal commented Dec 28, 2015

Very useful, although I would change some things 👍

Copy link

JuanMaRuiz commented Jan 22, 2016

Very useful. I think it would be great if you add some related links.


Copy link

aondoe commented Jul 31, 2016

This looks really great. Thank you for sharing this.

Copy link

PUSRISTEK commented Sep 1, 2016

update please.. we need ionic or react

Copy link

serendipitist commented Jun 11, 2017


Copy link

dipeshrg48 commented Oct 28, 2017

need a update man.please can you update about 2018 resources needed.... 2018 modules

Copy link

crudeboy commented Feb 15, 2021

Nice breakdown Steve, it would save lots of stress and indeed be most stellar if you could add the best links to teach each fragment of your curriculum.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment