Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/shovanch/fullstack-web-developer-path

📚 A learning path for Full-stack web development
https://github.com/shovanch/fullstack-web-developer-path

back-end-development front-end-development full-stack-development fullstack-javascript learn-to-code learning-path webdevelopment

Last synced: 3 months ago
JSON representation

📚 A learning path for Full-stack web development

Lists

README 

        
# Full Stack Web Developer Path

This is a guide to learn full-stack web development. It is focused on full-stack JavaScript. It covers all the way from the fundamentals to React and Node. 


The idea behind this repo is, to have a place to log the learning process in an organized way.  



This can be used as a companion to [FreeCodeCamp](https://www.freecodecamp.org/) curriculum



------



## [Coding log](log.md)



## The Fundamentals



| Progress | Type | Item | Project(s) | Date |

| :------: | ------ | ------ | ------------ | :-------: |

|  | Course | [CS50](https://courses.edx.org/courses/course-v1%3AHarvardX%2BCS50%2BX/)  on edX |  ||

|  | Course |  [Team Treehouse](https://teamtreehouse.com/tracks) or [Codeschool](https://www.codeschool.com/learn/html-css)'s HTML, CSS Path (Paid) OR Shay Howe's [HTML,CSS](http://learn.shayhowe.com/html-css/) Course |    |   |

|  | Project | FCC Front End Project - [Build Your Portfolio](https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage) |   |    |

|  | Course | Learn to use [Command line](https://commandlinepoweruser.com/)|  ||

|  | Course | Learn Version Control (Git) - [Git course @Codeschool](https://try.github.io/levels/1/challenges/1) OR [Udacity - Git and Github](https://in.udacity.com/course/how-to-use-git-and-github--ud775)|   |    |

|   | Course | Learn Flexbox - [Flexbox.io](https://flexbox.io/) OR [Flexboxfroggy](http://flexboxfroggy.com/) |   |    |

|   | Course | Learn Sass - [Sass-guide](http://sass-lang.com/guide) OR [Sass Tutorials](http://www.sassshop.com/#/) |   |    |

|  | Project | Refactor the portfolio site layout and CSS using Flexbox and Sass |   |    |

| | Course | [Watch and Code - Practical Javascript](https://watchandcode.com/p/practical-javascript) |  |    |

|   | Book | [Eloquent Javascript](http://eloquentjavascript.net/) |   |    |

|   | Project | Do FCC [Javascript Basic Algorithm Challenges](https://www.freecodecamp.org/map) |   |    |

|  | Book | Learn DOM manipulation - [DOM Enlightenment](http://domenlightenment.com/)  |   |    |

|  | Project | Make a todo list webapp |   |    |

|   | Course | Learn [AJAX](https://in.udacity.com/course/asynchronous-javascript-requests--ud109) |   |    |

|   | Project | FCC Intermediate Project - [Build a Random Quote Generator](https://www.freecodecamp.com/challenges/build-a-random-quote-machine) |   |    |

|   | Project | FCC Intermediate Project - [Build a Local Weather App](https://www.freecodecamp.com/challenges/show-the-local-weather) |   |    |

|   | Project | FCC Intermediate Project - [Build a Wikipedia Viewer](https://www.freecodecamp.com/challenges/build-a-wikipedia-viewer) |   |    |

|   | Project | FCC Intermediate Project - [Build a Twitch TV Viewer](https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api) |   |    |

|   | Course | Learn ES6 - [Wes Bos - ES6 for Everyone](https://es6.io/) (Paid) OR [ES6 Crash Course](https://laracasts.com/series/es6-cliffsnotes)|

|   | Course | [Javascript30](https://javascript30.com/) |   |    |

|   | Project | Do FCC [Javascript Intermediate Algorithm Challenges](https://www.freecodecamp.org/map) |   |    |

|   | Project | FCC Advanced Project - [Build a Javascript Calculator](https://www.freecodecamp.com/challenges/build-a-javascript-calculator) |   |    |

|   | Project | FCC Advanced Project - [Build a Pomodoro Clock](https://www.freecodecamp.com/challenges/build-a-pomodoro-clock) |   |    |

|   | Project | FCC Advanced Project - [Build a Tic Tac Toe game](https://www.freecodecamp.com/challenges/build-a-tic-tac-toe-game) |   |    |

|   | Project | FCC Advanced Project - [Build a Simon Game](https://www.freecodecamp.com/challenges/build-a-simon-game) |   |    |

|   | Milestone | FreeCodeCamp Front End Certificate |   |    |

|   | Course | [Optional] [JavaScript: Understanding the Weird Parts](https://www.udemy.com/understand-javascript/) (Paid) |   |

|   | Book | [YDKJS: Up & Going](https://github.com/getify/You-Dont-Know-JS/blob/master/up%20&%20going/README.md#you-dont-know-js-up--going) |   |    |

|   | Book | [YDKJS: Scope & Closures](https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20&%20closures/README.md#you-dont-know-js-scope--closures) |   |    |

|   | Book | [YDKJS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) |   |    |

|   | Book | [YDKJS: Types & Grammar](https://github.com/getify/You-Dont-Know-JS/blob/master/types%20&%20grammar/README.md#you-dont-know-js-types--grammar) |   |    |

|   | Book | [YDKJS: Async & Performance](https://github.com/getify/You-Dont-Know-JS/blob/master/async%20&%20performance/README.md#you-dont-know-js-async--performance) |   |    |

|   | Book | [YDKJS: ES6 & Beyond](https://github.com/getify/You-Dont-Know-JS/blob/master/es6%20&%20beyond/README.md#you-dont-know-js-es6--beyond) |   |    |



## React



| Progress | Type | Item | Project(s) | Date |

|:------:|------|------|------------|:-------:|

|   | Course | Learn React - [React For Beginners - Wes Bos](https://reactforbeginners.com/) (Paid) or [React Fundamentals - Tyler Mcginnis](https://reacttraining.com/online/react-fundamentals) (Paid) OR [Learn React @Egghead.io](https://egghead.io/courses/start-learning-react) |   |    |

|   | Course | Learn Redux - [Redux course - Wes Bos](https://learnredux.com/) |   |    |

|   | Project | FCC React Project - [Build a Markdown Previewer](https://www.freecodecamp.com/challenges/build-a-markdown-previewer) |   |    |

|   | Project |  FCC React Project - [Build a Recipe Box App](https://www.freecodecamp.com/challenges/build-a-recipe-box) |   |    |

|   | Project |  Clone the Netflix interface using React - pulling data from [the Movie DB API](https://www.themoviedb.org/documentation/api) |   |    |

|   | Project | Clone [this Admin template](http://rubix410.sketchpixy.com/ltr/dashboard) using React |   |    |



## Backend (Node)

| Progress | Type | Item | Project(s) | Date |

|:------:|------|------|------------|:-------:|

|   | Course | [Learn Node - Wes Bos](https://learnnode.com/) (Paid) OR Nodeschool.io [Tutorials](https://nodeschool.io/) |   |    |

|   | Project | FCC Backend Project - [Timestamp Microservice](https://www.freecodecamp.com/challenges/timestamp-microservice) |   |    |

|   | Project | FCC Backend Project- [Request Header Parser Microservice](https://www.freecodecamp.com/challenges/request-header-parser-microservice) |   |    |

|   | Project | FCC Backend Project- [URL Shortener Microservice](https://www.freecodecamp.com/challenges/url-shortener-microservice) |   |    |

|   | Project | FCC Backend Project- [Image Search Abstraction Layer](https://www.freecodecamp.com/challenges/image-search-abstraction-layer) |   |    |

|   | Project | FCC Backend Project- [File Metadata Microservice](https://www.freecodecamp.com/challenges/file-metadata-microservice) |   |    |

|   | Project | FCC Backend Project- [Build a Voting App](https://www.freecodecamp.com/challenges/build-a-voting-app) |   |    |

|   | Project | FCC Backend Project- [Build a Nightlife Coordination App](https://www.freecodecamp.com/challenges/build-a-nightlife-coordination-app) |   |    |

|   | Project | FCC Backend Project- [Chart the Stock Market](https://www.freecodecamp.com/challenges/chart-the-stock-market) |   |    |

|   | Project | FCC Backend Project- [Manage a Book Trading Club](https://www.freecodecamp.com/challenges/manage-a-book-trading-club) |   |    |

|   | Project | FCC Backend Project- [Build a Pinterest Clone](https://www.freecodecamp.com/challenges/build-a-pinterest-clone) |   |    |

|   | Milestone | FreeCodeCamp BackEnd certificate |   |    |



## Extra Goals

* Learn to setup your own local developement environment

* Deploy completed projects using [Github Pages](https://pages.github.com/) or [surge.sh](http://surge.sh/) (Both front-end only) Or [Glitch](https://glitch.com/) (Works with back-end too)

* Learn about build tools like [Gulp](https://gulpjs.com/) and include them in projects

* Learn about linting. Use linters like [ESLint](https://eslint.org/) for Javascript , [Stylelint](https://stylelint.io/) for CSS in your projects.

* Learn about CSS conventions like [BEM](http://getbem.com/introduction/), [SMACSS](https://smacss.com/book/).

* Every week, write a medium post about that week's learnings.

* Make a habit of coding daily. Try [#100DaysofCode Challenge](http://100daysofcode.com/)



## How to use the guide

* To start using the guide, fork the repo.



## Notes

* This is a template. You can customize it, add or remove courses as per your choices.

* If you like this repo and find it useful, please consider ★ starring it (on top right of the page) :)

* If you have any questions, feel free to ask me on twitter : **[Shovan Chatterjee](https://twitter.com/shovan_ch)** [![Twitter Follow](https://img.shields.io/twitter/follow/shovan_ch.svg?style=flat-square&label=Follow%20@shovan_ch)](https://twitter.com/intent/follow?screen_name=shovan_ch)



## Attribution

Inspired by [p1xt guides](https://github.com/P1xt/p1xt-guides), [My journey to becoming a web developer from scratch without a CS degree (and what I learned from it)](https://medium.freecodecamp.com/my-journey-to-becoming-a-web-developer-from-scratch-without-a-cs-degree-2-years-later-and-what-i-4a7fd2ff5503)