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

This comment has been minimized.

Copy link

@brittanystoroz brittanystoroz commented Aug 27, 2015

wtf is BEM it looks like throw up


This comment has been minimized.

Copy link

@codylindley 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).


This comment has been minimized.

Copy link

@LazyDal LazyDal commented Dec 28, 2015

Very useful, although I would change some things 👍


This comment has been minimized.

Copy link

@JuanMaRuiz JuanMaRuiz commented Jan 22, 2016

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



This comment has been minimized.

Copy link

@aondoe aondoe commented Jul 31, 2016

This looks really great. Thank you for sharing this.


This comment has been minimized.

Copy link

@PUSRISTEK PUSRISTEK commented Sep 1, 2016

update please.. we need ionic or react


This comment has been minimized.

Copy link

@serendipitist serendipitist commented Jun 11, 2017



This comment has been minimized.

Copy link

@dipeshrg48 dipeshrg48 commented Oct 28, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.