diff --git a/README.md b/README.md index 8029f12..12b5027 100644 --- a/README.md +++ b/README.md @@ -1,96 +1,143 @@ # 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.

+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) | | | - +| 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 | | | +| 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 | | | +| 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 | | | + +# Roadmap For Full Stack Web Development: + +1. Learn Basic of: + - HTML + - CSS + - JavaScript +2. Develop Simple Project using these technologies to understand how does the website actually work. +3. Choose any 1 Front-End Technology: + - React JS + - Vue JS + - Angular +4. Along with Front-End we need to study Back-End also: + - Java + - Python + - C# + - Ruby + - Php + - Node JS +5. We need databases to store the data: + +- SQL + - MYSQL + - SQL Server + - Oracle + - Postegre SQL +- NOSQL + - MongoDB + - Casssandra + - CouchDB + +6. Then we have different versions of the developed software with some changes, so we use: + - Git + - GitHub/GitLab/BitBucket +7. Finally we need one of the Cloud Services to host the website: + - Google Cloud Platform + - Microsoft Azure + - Amazon Web Service + - Heroku +8. Some containers used in Cloud Services: + - Docker + - Kubernetes + +## Once we prepare all these aspect for a particular project we can get a hang of Full Stack Web Development. ## 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/) +- 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. + +- 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) + +- 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)