Please enable JavaScript.
Coggle requires JavaScript to display documents.
Frontend Knowledge Roadmap (Functionality (JS basics (ES6, DOM elems…
Frontend Knowledge Roadmap
Markup
HTML basics
Semantics and accessibility
Structure DOM elements
Forms
Meta markup
Media objects
HTML5
Text markup
Preprocessors
Pug
Haml
Slim
SEO markup
Markdown
Codestyling
Style
CSS Basics
Layout
Table (for mails only)
Flexbox
CSS Grid
Animation
@keyframes
transition
svg animation
CSS3
Decorative elements
Fonts
Colors
Pseudo-elems
Positioning, centering etc.
Calc and metrics
Methods
BEM
OOCSS
SMACSS
AtomicCSS
Specials
Preprocessors
Sass(SCSS)
Less
Stylus
PostCSS
Markup method
Responsive
Adaptive
Static
Desktop-first
Mobile-first
Web Design
UX
wireframes
grids and column-based interface
frames
composition
UI
icons, sprites and iconfonts (SVG mostly)
components
layer composition
typography
color schemes
IxD and motion
transitions
animation
easings
timeline
transformation and morph
states
Styleguide
color scheme
typography
layout
principles
breakpoints and constrains
Tools
Prototyping
Invision
Invision Studio
UX pin
Marvel
Principle (+animation)
Framer (+animation)
Graphic editors
Corel Draw
Adobe Illustrator, Adobe XD, Adobe Photoshop
Combine
Figma
Sketch
Functionality
JS basics
ES6
DOM elems manipulating
Scopes
Methods
OOP and proto
Advanced events
Forms
Components and Shadow DOM
RegExp
Animation
GSAP
Anime.js
Velocity.js
UI Framework
Angular (No Angular.js)
React
Vue.js
Backbone
PL basics
Data structures
Design patterns
Basic methods (iterations, conditions etc.)
Programming patterns
Computational complexity
AJAX
Preprocessors
Coffescript
Typescript
Testing
Mocha
Karma
Polyfills
Babel
Drawing
Canvas
Phaser
Three.js
Optimisation
Dev instruments
Package managers
npm
Yarn
Git
Basics
Clients
console (gitBash mb)
GitKraken
Github Desktop
SourceTree
Service (hosting)
Bitbucket
Github
Gitlab
Module bundlers and task runners
Webpack
Gulp
Grunt
Browserify
Team com. and col. instruments
Task managers
Trello
Jira
Asana
Messengers
Slack
Discord
Browsers
Chrome
Firefox
Opera
IE(-_-)
Vivaldi
Safari
Edge(0_0)
Dev tools
Linters
CSSComb
SCSSLint
ESLint
JSLint
PUGlint