Skip to content

Latest commit

 

History

History
1857 lines (1814 loc) · 60.2 KB

front-end-details.md

File metadata and controls

1857 lines (1814 loc) · 60.2 KB
Raw

🌊 Front-End

welcome to front-end section details, you can use it to check your learning process.

Naviagate to Other Path

How to track?

at each topic you can change the status depend on your knowledge about the topic
  • 🔲 : no idea about it
  • 🔳 : Know what it is, take it soon
  • ✅ : Already knew/learn about it
When you  "already knew/learn about it", you can add the self-grade about your level by add the color
kyu (your current level) Ability
📓 Shodan learnt about it, beginning use it
📒 Sandan use it in some (1->3) small project, have its certification, understand its core concept
📗 Godan use it in a lot of (4->n) small project, can teach another people about it, know its advantage/defect
📙 Shinidan use it in some (1->2) big project, understant what is running underneath
📕 Kudan use it in a lot of (3->n) big project, confidence to say you're an expert of this topic, talk about it in talk-show, can hack/change it's core
📘 Judan have recognition from a nother people that you're an expert of this topic, people talk about you when they learn/discuss/search this topic

General Path

Details Version Path

⚡ First starting

HTML5 Front-end developer

💎 CSS expend

If you are interested in the graphic aspect or the user interface of a site or web application.

CSS3 Front-end developer

☕ JS expend

If you are interested in improving and perfecting yourself as a programmer or javascript developer.

JS Front-end developer

Content Tree

.
├── learn The Basic
│   ├── HTML/CSS basic
│   └── Javascript basic
│   └── Javascript native specs
│   └── The Front-End basic
│
├── Getting Deeper
│   ├── CSS
│   │   ├── CSS Advance
│   │   ├── Choose Framework
│   │   └── Preprocessors
│   └── Javascript
│       ├── Javascript advance
│       ├── ES6
│       ├── TypeScript/FLow
│       ├── Conventions
│       ├── General Prupose Framework
│       ├── MV* Framework
│       ├── Library Framework
│       ├── Animation Framework
│       ├── Package Manager
│       ├── Task Runner
│       ├── Testing
│       ├── Module Loader/Bundler
│       └── Game Engines
│
├── More
│   ├── CSS
│   │   ├── Dive deep CSS3
│   │   └── Methodologies
│   ├── SVG
│   ├── Javascript
│   │   ├── Design Pattern
│   │   ├── Regex
│   │   ├── GOF Design Pattern
│   │   └── Learn differnt testing techniques
│   └── Front-End Advance

Learn the Basic

Status Topic Level Process Type Item Reconition Start Date
✅ HTML/CSS Basic 📒 complete reading Shayhowe --- ---
complete reading MarkSheet --- ---
on hold reading Learn the web --- ---
complete reading Everything you need to know about CSS variable --- ---
complete course Udemy/EMMET-Faster-HTML-and CSS-workflow-Best-Tool-for-developer --- ---
--- --- --- --- ---
✅ JavaScript Basic 📒 complete reading JS The Right Way (overview about JS) --- ---
complete course Udemy/JavaScript-understand-the-weird-part --- ---
complete path Lynda/Improve-Your-JS-Language-Skills certificate ---
on hold book You don't know JS --- ---
not started book JavaScript The Good Parts - (video course) - (notes) --- ---
not started book Eloquent JavaScript --- ---
not started book JavaScript Garden --- ---
not started course Udemy/The-complete-JavaScript-Course:-Build-Realworld-Project --- ---
complete course Udemy/Modern-JavaScript-From-The-Beginning --- ---
on hold course Webbos/30-Day-Vanilla-JS-Coding-Challenge --- ---
--- --- --- --- ---
✅ JavaScript Native Specs 📒 complete reading How JavaScript objects work --- ---
complete reading understand Closures part1 - part2 --- ---
complete reading Object, function, methodm, constructor in JavaScript --- ---
complete reading Fixing Coercion --- ---
✅ The Front-End Basic 📒 on hold reading MDN Web Tutorials --- ---
on hold reading Bento.io personal progress --- ---
on hold coding FCC/front-End-Certification certificate 28-Jan-2018
complete course PluralSight/Front-End-Development:-Get-Started --- ---
not started course Lynda/Web-Development-Foundation:-Web-Technologies certificate ---
complete path Lynda/Become-a-Web-Developer certificate ---
on hold path Lynda/Become-a-Front-End-Web-Developer certificate ---
on hold path Lynda/Become-a-Web-Designer certificate ---
not started course Lynda/Learning-how-to-manage-a-Hosted-Website certificate ---
complete course PluralSight/Get-started-with-HTML-Boilerplate --- ---
on hold course PluralSight/Using-THe-Chrome-Developer-Tool --- ---
not started course Udemy/Web-Design-for-Web-Developers --- ---
--- --- --- --- ---

Getting Deeper

CSS

Status Topic Level Process Type Item Reconition Start Date
✅ CSS Advance 📒 complete course Udemy/Advanced-CSS-and-SASS projects ---
not started course Udemy/Build-Responsive-Real-World-Websites-with-HTML5-and-CSS3 --- ---
--- --- --- --- ---

Choose Framework

Status Topic Level Process Type Item Reconition Start Date
🔲 Foundation --- not started tutorials Zurb Foundation framework tutorial --- ---
✅ Bootstrap 📒 not started course Udemy/The-complete-Bootstrap-master-class --- ---
🔲 Materialize CSS --- --- --- --- --- ---
🔲 Semantic UI --- --- --- --- --- ---

Preprocessors

Status Topic Level Process Type Item Reconition Start Date
✅ SASS 📒 on hold reading SASS Guideline --- ---
on hold reading The SASS way --- ---
on hold course Udemy/SASS-Workflow --- ---
🔲 LESS --- --- --- --- --- ---
🔲 Stylus --- --- --- --- --- ---
🔳 PostCSS 📓 not started source code Github/PostCSS --- ---
not started read PostCSS Deep Dive --- ---
not started course Lynda/PostCSS-the-first-look certificate ---
not started course Lynda/Building-respnsive-single-page-design-with-postcss certificate ---
not started resouce Github/Awesome=PostCSS --- ---

JavaScript

view for more info

Status Topic Level Process Type Item Reconition Start Date
✅ Advance JavaScript 📒 complete source Awesome Javascript Learning --- ---
not started path Lynda/Advance-your-JavaScript-Skills certificate ---
on hold course Lynda/Rethinking-Asynchronous-Javascript certificate ---
not started course Udacity/Asynchronous-JavaScript-Requests --- ---
on hold reading The Modern Javascript Tutorial --- ---
not started book The Secrects of JavaScript Ninja --- ---
not started videos Youtube/Let's Code --- ---
--- --- --- --- ---
✅ ES6 📓 complete course Udemy/Essential-in-JavaScript-ES6-a-fun-and-clear-intro --- ---
complete reading Lynda/Learning-ECMAScript-6 certificate ---
not started course Udemy/Accelerate-ES6-JavaScript-Training --- ---
not started course Lynda/ES6-The-Right-Part certificate ---
complete reading Babelio/Learn-ES2015-Fetures --- ---
not started book Exploring ES6 --- ---
not started reading ECMA-262 --- ---
on hold source ericdouglas/ES6-Learning --- ---
on hold source ECMAScript 6 Resources For The Curious JavaScripter --- ---
not started kata ES6 Katas (learning by doing) --- ---
--- --- --- --- ---
✅ TypeScript / Flow --- not started course Udemy/Understand-TypeScript --- ---
🔲 Conventions --- not started reading Google JavaScript Code Styles --- ---
not started reading Idiomatic JavaScript --- ---

General Purpose Framework

✅ Jquery 📓 on hold book JQuery fundamental --- ---
🔲 YUI --- --- --- --- --- ---
🔲 ZeptoJS --- --- --- --- --- ---
🔲 Dojo Toolkit --- --- --- --- --- ---
✅ Underscore.js 📓 on hold course Lynda/Learning-Undersore.js --- ---
✅ Lodash --- --- --- --- --- ---

MV* Framework

Status Topic Level Process Type Item Reconition Start Date
🔲 AngularJS --- not started course Udemy/AngularJ5-The-Complete-Guide --- ---
not started course Udemy/AngularJS Masterclass-deep-dive-and-understand-AngularJS --- ---
not started course Udemy/QUickstart-AngularJS --- ---
not started course Udemy/AngularJS-Authentication:Secure-your-app-with-Auth0 --- ---
not started path Lynda/Become=AngularJS-Developer --- ---
not buy yet course The Ultimate Guide to Mastering Angular --- ---
🔲 RxJS --- not started course Udemy/AngularJ5-RxJs-Reactive-Programming --- ---
not started source ReactiveX/Tutorial - RxJS section --- ---
--- --- --- --- ---
✅ Angular 📒 complete course Udemy/Angular6-(formerly-Angular2)-The-Complete-Guide --- ---
not started course Udemy/Angular5-Concept-Mastery-Course --- ---
not started course Udemy/Testing-Angular4-Apps-with-Jasmine --- ---
not started course Udemy/Angular-RxJS-Reactive-Programming-Free-Ebook --- ---
not started course Udemy/Angular6-Security-MasterClass --- ---
not started course Udemy/Angular-NodeJS-The-MEAN-Stack-Guide --- ---
not started course Udemy/Build-An-App-With-ASPNET-Core-And-Angular-From-Scratch --- ---
--- --- --- --- ---
🔲 Meteor --- --- --- --- --- ---
🔲 Backbone.js --- --- --- --- --- ---
🔲 Ember.js --- --- --- --- --- ---
🔲 Knockout.js --- --- --- --- --- ---
🔲 Spice.js --- --- --- --- --- ---
🔲 Riot.js --- --- --- --- --- ---
🔲 CanJS --- --- --- --- --- ---
🔲 Preact --- --- --- --- --- ---

Library Framework

🔲 React --- --- references React-Developer-Roadmap --- ---
not started course Udemy/Modern-React-with-Redux --- ---
not started course Udemy/Advance-React-and-Redux --- ---
not started course Udemy/The-Complate-React-Native-and-Redux-Course --- ---
not started path Lymda/Become-a-React-Developer --- ---
not started path Lymda/Improve-react-skill --- ---
not started course Webbos/Learn-Redux --- ---
not started course Udemy/GraphQL-with-React-The-Complete-Guide --- ---
🔲 Vue.js --- not started course Udemy/VueJS2-The-Complete-Guide --- ---
🔲 Handlebars --- --- --- --- --- ---
🔲 Dust.js --- --- --- --- --- ---

Animation Framework

🔲 GSAP --- --- --- --- --- ---
🔲 Velocity.js --- --- --- --- --- ---
🔲 Bounce.js --- --- --- --- --- ---

Package Manager

Status Topic Level Process Type Item Reconition Start Date
🔲 Yarn --- --- --- --- --- ---
✅ npm 📒 not started course Udemy/NPM-Mastering-the-basic --- ---

Task Runner

Status Topic Level Process Type Item Reconition Start Date
✅ npm scripts 📓 --- --- --- --- ---
🔲 Gulp --- --- --- --- --- ---
🔲 Grunt --- --- --- --- --- ---

Testing

Status Topic Level Process Type Item Reconition Start Date
🔲 Jest --- --- --- --- --- ---
🔲 Mocha --- --- --- --- --- ---
🔲 Jasmine --- --- --- --- --- ---
🔲 Enzyme --- --- --- --- --- ---

Module Loader/Bundler

Status Topic Level Process Type Item Reconition Start Date
✅ About Module Loader/Bundler 📓 complete reading JS Module Guide P1 - JS Module Guide P2 --- ---
--- --- --- --- ---
✅ Webpack 📓 not started course Udemy/Webpack2-The-Complete-Developer's-Guide --- ---
not started course Udemy/Learn-Webpack-2-from-scratch --- ---
✅ Rollup --- not started reading RollupJS Guide --- ---
✅ RequireJS / AMD 📓 --- --- --- --- ---
🔲 Browserify --- --- --- --- --- ---
🔲 Parcel --- --- --- --- --- ---

Game Engines

🔲 MelonJS --- --- --- --- --- ---
🔲 ImpactJS --- --- --- --- --- ---
🔲 COcos2d-HTML5 --- --- --- --- --- ---

More

CSS

Dive Deep CSS3

Status Topic Level Process Type Item Reconition Start Date
✅ Flexbox 📒 not started challenge Flexbox Froggy --- ---
✅ Grids 📒 on hold course Webbos/CSS-Grid --- ---
on hold reading Complete Guide to CSS Grid --- ---
on hold reading Learn CSS Grid --- ---
--- --- --- --- ---
✅ Gradients 📒 --- --- --- --- ---
✅ Rotate 📒 --- --- --- --- ---
✅ Transform 📒 --- --- --- --- ---
✅ Skew 📒 --- --- --- --- ---
✅ Scale 📒 --- --- --- --- ---
✅ Transitions 📒 --- --- --- --- ---

Methodologies

Status Topic Level Process Type Item Reconition Start Date
✅ BEM 📓 --- --- --- --- ---
complete video CSS architecture with BEM --- ---
complete reading BEM Instruction --- ---
not started reading Anatomic Design (optional) --- ---
🔳 SUITCSS --- --- --- --- --- ---
🔳 OOCSS --- --- --- --- --- ---
🔳 SMACSS --- --- --- --- --- ---
🔳 Systematic CSS --- --- --- --- --- ---

SVG

Status Topic Level Process Type Item Reconition Start Date
🔳 D3 --- --- --- --- --- ---

JavaScript

Status Topic Level Process Type Item Reconition Start Date
✅ Design Patterns 📓 not started book Learn JavaScript desgin pattern --- ---
on hold path PluralSight/JavaScript-Path --- ---
✅ Creational Design Patterns 📓 not started reading Factory --- ---
not started reading Prototype --- ---
not started reading Mixin --- ---
not started reading Singleton --- ---
✅ Structural Design Patterns 📓 not started reading Adapter --- ---
not started reading Bridge --- ---
not started reading Composite --- ---
not started reading Decorator --- ---
not started reading Facade --- ---
not started reading Flyweight --- ---
not started reading Module --- ---
not started reading Proxy --- ---
not started reading Revealing Modul --- ---
✅ Behavioral Design Patterns 📓 not started reading Chain of Responsibility --- ---
not started reading Command --- ---
not started reading Mediator --- ---
not started reading Observer --- ---
✅ MV* Design Patterns 📓 not started reading MVC Pattern --- ---
not started reading MVP Pattern --- ---
not started reading MVVM Pattern --- ---
✅ Regex 📓 not started course Lynda/Learning Regular Expression certificate ---
🔲 GOF Design Patterns --- --- --- --- --- ---
🔲 Learn different testing techniques --- --- --- --- --- ---

Front-End

🔲 The Front-End Advance 📓 --- source Github/Frontend-Case-Studies --- ---
--- --- --- --- ---