Skip to content

Instantly share code, notes, and snippets.

Embed
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
@brittanystoroz

This comment has been minimized.

Copy link

brittanystoroz commented Aug 27, 2015

wtf is BEM it looks like throw up

@codylindley

This comment has been minimized.

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.

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

This comment has been minimized.

Copy link

LazyDal commented Dec 28, 2015

Very useful, although I would change some things 👍

@JuanMaRuiz

This comment has been minimized.

Copy link

JuanMaRuiz commented Jan 22, 2016

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

Regards.

@aondoe

This comment has been minimized.

Copy link

aondoe commented Jul 31, 2016

This looks really great. Thank you for sharing this.

@PUSRISTEK

This comment has been minimized.

Copy link

PUSRISTEK commented Sep 1, 2016

update please.. we need ionic or react

@serendipitist

This comment has been minimized.

Copy link

serendipitist commented Jun 11, 2017

Awesome

@dipeshrg48

This comment has been minimized.

Copy link

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.