Create a gist now

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

wtf is BEM it looks like throw up

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.

https://www.gitbook.com/book/frontendmasters/front-end-handbook/details

And maybe contribute or complain (via github).

https://github.com/FrontendMasters/front-end-handbook

LazyDal commented Dec 28, 2015

Very useful, although I would change some things 👍

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

Regards.

aondoe commented Jul 31, 2016

This looks really great. Thank you for sharing this.

update please.. we need ionic or react

Awesome

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