cvshankar80/python-javascript-full-stack-path

Full Stack Learning Path - Python, Django, JavaScript, React

Command Line Basics

Session on CLI.

Command Line Crash Course

Commonly Used Linux Commands

Version Control Systems

Session on Git and Github

How to use Git and Github - Udacity

Resources and Practice - Practice the Learn Git branching section

HTML and CSS

Start with Learn to Code HTML and CSS by Shay Howe

In particular read the following sections and complete the exercises.

HTMl & CSS

• Lesson 1: Building your first web page
• Lesson 2: Getting to know HTML
• Lesson 3: Getting to know CSS
• Lesson 4: Opening the Box Model
• Lesson 5: Positioning content

Advanced HTML & CSS

• Lesson 3: Complex Selectors
• Lesson 4: Responsive Web Design

Resources for Flex and Grid Layouts:

CSS Flex Video

CSS Grid Video

Resources for Web Development for any Topic:

Mozilla Web Docs

Projects:

Responsive Portfolio Website

Build your portfolio website using your knowledge of HTML and CSS. The display should work in all resolutions.

Use your knowledge of responsive media queries, CSS flex and CSS grid for handling multi column layouts.

CSS Reference

A Visual Reference to CSS

Themed Ecommerce Website

Pick a website or theme of your choice and build it without looking at the source code.

Web Architecture Overview

Session on Web Architecture Overview

Python

Session on environment setup - virtualenv, pip and packaging.

Introduction to Python - thenewboston

Official Python Tutorial

Go through PEP-8 Style Guide

Unit Testing in Python

Session Unit testing

Session Code Retreat

Data Project - Round 1

Get the IPL Dataset

In this data assignment you will transform raw data from IPL into graphs that will convey some meaning / analysis. For each part of this assignment you will have 2 parts -

Download both csv files from https://www.kaggle.com/manasgarg/ipl

Code python functions that will transform the raw csv data into a data structure in a format suitable for plotting with matplotlib.

Generate the following plots ...

1. Plot the number of matches played per year of all the years in IPL.
2. Plot a stacked bar chart of matches won of all teams over all the years of IPL.
3. For the year 2016 plot the extra runs conceded per team.
4. For the year 2015 plot the top economical bowlers.
5. Discuss a "Story" you want to tell with the given data. As with part 1, prepare the data structure and plot with matplotlib.

Django

Introduction to Django - thenewboston

Official Django Tutorial

Data Project - Round 2

Use Django as backend and JSON as data store to implement the project.

SQL

Introduction to Relational Databases

Data Project - Round 3

Use Django as backend and MySQL as database

REST

Session on APIs and REST.

1. Basics of REST APIs
2. RESTful Design - Best practices to use
3. Building good APIs - Using appropriate HTTP Response codes

Django REST Framework

Introduction to Django REST framework

Time and Space Complexity

Time Complexity Videos - mycodeschool

Create an account on Interviewbit and solve the practice problems in the Time Complexity section.

JavaScript and Ecosytem

JavaScript Basics

Introduction to JavaScript - Udacity

ECMAScript 6 Basics

Introduction to ES6 - Udacity

Recommended Projects:

ToDo List in JavaScript

Implement a todo list with ordering

Memory Game in JavaScript

Create a Memory Game in JavaScript capturing the total number of moves and time taken to complete the game.

Chess Game in JavaScript (Advanced)

Build a 2 player chess game in JavaScript using principles of object oriented programming, game state and game loop.

Session: Recap on Functions, Scope and Callbacks.

Session on JavaScript Environment Setup - JS, Node, NPM. Introduction to JavaScript.

Developer Tools

Getting Started with Developer Tools

Jquery

Introduction to Jquery - Udacity

Projects:

NavTree Project in Jquery

Repository name: navtree-(name) Example navtree-john

Build a hierarchical, navigable tree structure using jQuery. The tree structure should be at least 3 levels deep.

For example:

Depth 0
-- Depth 1
-- Depth 2

It should expand and minimize to reveal and hide nested nodes. Do not use an existing library to build the tree structure.

Please use the IPL dataset that you had previously used for the Visualisation assignment. An example hierarchy could be

Year > Team > Players

When the last entity is selected, show a stat relevant to that identity on the page. This can either be a visualisation or a table.

--

Session: Recap Jquery.

Session: JS Utility functions.

Session: Object and Prototypes.

Introduction to Object Oriented JavaScript - Udacity - Only complete scopes, closures, 'this' keyword and prototype chains.

Data Project - Round 4

Use Django REST Framework and Jquery navigation tree for the data project.

React

Build Tools: Webpack and Babel

Introduction to React - Techsith

Session Recap React

ToDo List

Implement a todo list with ordering which interacts with a backend web server in Node or Django with each update.

NavTree Project in React

Implement the navigation tree structure using the React library.

Redux

Introduction to Redux - Academind

Advanced:

Getting Started with Redux - Egghead

Introduction to Idiomatic Redux - Egghead

Session Recap Redux

Capstone Project

The final project of the bootcamp.

Deliverables:

1. User Personas - How to define a User Persona
2. User Stories - Writing User Stories
3. Wireframes - Website Wireframes
4. API Contracts
5. Trello Board for managing and prioritising user stories
6. Gitlab Repository for managing the code
7. Deployment link for the project

Thanks.