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.

Show comment
Hide comment
@brittanystoroz

brittanystoroz Aug 27, 2015

wtf is BEM it looks like throw up

brittanystoroz commented Aug 27, 2015

wtf is BEM it looks like throw up

@codylindley

This comment has been minimized.

Show comment
Hide comment
@codylindley

codylindley 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

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.

Show comment
Hide comment
@LazyDal

LazyDal Dec 28, 2015

Very useful, although I would change some things 👍

LazyDal commented Dec 28, 2015

Very useful, although I would change some things 👍

@JuanMaRuiz

This comment has been minimized.

Show comment
Hide comment
@JuanMaRuiz

JuanMaRuiz Jan 22, 2016

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

Regards.

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.

Show comment
Hide comment
@aondoe

aondoe Jul 31, 2016

This looks really great. Thank you for sharing this.

aondoe commented Jul 31, 2016

This looks really great. Thank you for sharing this.

@PUSRISTEK

This comment has been minimized.

Show comment
Hide comment
@PUSRISTEK

PUSRISTEK Sep 1, 2016

update please.. we need ionic or react

PUSRISTEK commented Sep 1, 2016

update please.. we need ionic or react

@serendipitist

This comment has been minimized.

Show comment
Hide comment
@serendipitist

serendipitist commented Jun 11, 2017

Awesome

@dipeshrg48

This comment has been minimized.

Show comment
Hide comment
@dipeshrg48

dipeshrg48 Oct 28, 2017

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

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