Hi, This is my place to gather any ideas/concepts/resources related to frontend development. Right now , front dev is vast and there lot of things for different types of front end projects .
BEST Resources is : FrontEnd Master - gitbook (also pdf available in drive). This book gives nice overview of overall front-end Engineering and describes lot of different disciplines with in front end dev.
#####NOTE##### This guide needs to constantly maintained and refined and grouped in different sections for better understanding. Also, refer to git where lot of resources available for front dev and related curricula. Also, try to follow good blogs on front end. #####END-NOTE#####
###My Questions ###
- What is interaction design mentioned in Frontend Masters
###Type of Front End engineering project/work###
- Static web sites with HTML/CSS alone
- Dynamic Web Application (App) built with HTML/CSS/JS/JQuery and related build/package tool like webpack,browserify and etc.
- Single Page App (SPA) MVC framework like Angular ,Ember , React(partially)
- Blog/CMS solution like Ghost (for Nodejs)
- Static Site Generators like Assemble and so on.. (related to static web site with javascript for interactivity).
###Design###
Basic design skill
###HTML/CSS###
###Javascript Skills###
- Study and Practice more on the asynchronous nature of Javascript a. Study about callback,how functions in javascript is perfect suit for callback which is executed later (using scope,closure,execution context). b. Study and practice on Promise concept to handle control Flow. Take a bluebird promise library, see the use cases and patterns of how to write different scenario. how to handle to errors , how to cancel the promise in the promise chain , how to monitor, how to parallely run the asyn calls
###FrontEnd Application Architecture###
- How to design architecture for frontend app ?
- Scalable JavaScript Application Architecture - http://www.slideshare.net/nzakas/scalable-javascript-application-architecture/104
- Modern JavaScript Applications: Design Patterns - http://www.slideshare.net/VolodymyrVoytyshyn/modern-java-script-applications
- Planning a Front end application - http://developer.telerik.com/featured/planning-front-end-javascript-application/
###Workflow###
About build tools like webpack ,browserify , requirejs
###Design Philosophy### Different desingn philosophy which have emerged right now like
- Reactive Programming ,
- Flux architecture for one way data-flow,
- Flux with Redux and so on
###Resources####
- http://c2.com/cgi/wiki?HowToImproveProgrammingSkills - Wisdom of advice for general programming skills
- https://bento.io/tracks - various related links and tutorials(video) in the form of progressive lessons.
- https://gist.github.com/dypsilon/5819504.
- https://frontend.directory/about ( dypsilon)
- https://github.com/dypsilon/frontend-dev-bookmarks - One among the best resources for front end development. Huge and vast one.
- https://www.youtube.com/user/learncodeacademy/featured - Video tutorials for web development.***
- https://philipwalton.com/articles/how-to-become-a-great-front-end-engineer/ - Philip tips for front end thinking
- http://web-engineering.info/tech/JsFrontendApp/ - Building Frontend Web Apps with Plain JavaScript
###Front End Authors
Cody Lindley - http://www.codylindley.com/
###Productivity Tools###
- MinGW ,Minimalist GNU for Windows - http://www.mingw.org/wiki/mingw - If you windows, you can use this to emulate windows.
- Vagrant
- Docker
- Static Site generator - like assemble,metalsmith - This will help you to create static sites and more usefully blog
####Git VCS####
Git book - https://git-scm.com/book/en/v2 . Execellent resource for all the git concepts with explanation and pictures.
####Architecture Guidance###
- http://www.softwarearchitecturenotes.com/
- http://www.bredemeyer.com/who.htm
- http://www.codingthearchitecture.com/
There are lot of resource out there which provides the way to practice the web developement withe fundamentals of technologies to building a sample real time application
Choose anyone from the below and starting learning and building web development.
- Free code camp (for front end/back end)
- Bento.io tracks - https://bento.io/tracks
- Learn Code Academy - You tube track - https://www.youtube.com/user/learncodeacademy/featured
- Bill's Dev Mastery track for Web developer - https://medium.freecodecamp.com/the-practical-guide-to-becoming-a-professional-web-developer-2f255bc25c90
- Front End zero to Hero (2 part post @medium by free code camp) - https://medium.freecodecamp.com/from-zero-to-front-end-hero-part-1-7d4f7f0bff02
- http://marksheet.io/ - A very brief overview of html and css
####Tips to become productuive developer####
http://learntocodewith.me/web-dev/front-end-developer-skills/