└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Learning Path - Python, Django, JavaScript, React 2 | 3 | ## Command Line Basics 4 | 5 | **Session** on CLI. 6 | 7 | [Command Line Crash Course](https://learnpythonthehardway.org/book/appendixa.html) 8 | 9 | [Commonly Used Linux Commands](https://www.thegeekstuff.com/2010/11/50-linux-commands/) 10 | 11 | ## Version Control Systems 12 | 13 | **Session** on Git and Github 14 | 15 | [Version Control with Git - Udacity Video Course](https://in.udacity.com/course/version-control-with-git--ud123) 16 | 17 | [GitHub & Collaboration - Udacity Video Course](https://in.udacity.com/course/github-collaboration--ud456) 18 | 19 | [Learn enough Git to be dangerous](https://www.learnenough.com/git-tutorial) 20 | 21 | [Resources and Practice](https://learngitbranching.js.org/) - Practice the **Learn Git branching** section 22 | 23 | [Gamified Tutorial](https://www.katacoda.com/courses/git) - Learn the most common practices in the modern day Git Workflow. 24 | 25 | ## HTML and CSS 26 | 27 | Start with [Learn to Code HTML and CSS by Shay Howe](https://learn.shayhowe.com/) 28 | 29 | In particular read the following sections and complete the exercises. 30 | 31 | HTMl & CSS 32 | 33 | * Lesson 1: Building your first web page 34 | * Lesson 2: Getting to know HTML 35 | * Lesson 3: Getting to know CSS 36 | * Lesson 4: Opening the Box Model 37 | * Lesson 5: Positioning content 38 | 39 | Advanced HTML & CSS 40 | 41 | * Lesson 3: Complex Selectors 42 | * Lesson 4: Responsive Web Design 43 | 44 | Resources for Flex and Grid Layouts: 45 | 46 | [CSS Flex Video](https://www.youtube.com/watch?v=JJSoEo8JSnc) 47 | 48 | [CSS Grid Video](https://www.youtube.com/watch?v=jV8B24rSN5o) 49 | 50 | Resources for Web Development for any Topic: 51 | 52 | [Mozilla Web Docs](https://developer.mozilla.org/en-US/) 53 | 54 | ### Projects: 55 | 56 | **Responsive Portfolio Website** 57 | 58 | Build your portfolio website using your knowledge of HTML and CSS. The display should work in all resolutions. 59 | 60 | Use your knowledge of responsive media queries, CSS flex and CSS grid for handling multi column layouts. 61 | 62 | #### CSS Reference 63 | 64 | [A Visual Reference to CSS](https://cssreference.io/) 65 | 66 | **Themed Ecommerce Website** 67 | 68 | Pick a website or theme of your choice and build it without looking at the source code. 69 | 70 | 71 | ## Web Architecture Overview 72 | 73 | **Session** on Web Architecture Overview 74 | 75 | ## Python 76 | 77 | **Session** on environment setup - virtualenv, pip and packaging. 78 | 79 | [Introduction to Python - thenewboston](https://www.youtube.com/watch?v=HBxCHonP6Ro&list=PL6gx4Cwl9DGAcbMi1sH6oAMk4JHw91mC_) 80 | 81 | [Official Python Tutorial](https://docs.python.org/3/tutorial/index.html) 82 | 83 | Go through [PEP-8 Style Guide](https://www.python.org/dev/peps/pep-0008/) 84 | 85 | 86 | ### Unit Testing in Python 87 | 88 | **Session** Unit testing 89 | 90 | **Session** Code Retreat 91 | 92 | 93 | ## Data Project - Round 1 94 | 95 | Get the [IPL Dataset](https://www.kaggle.com/manasgarg/ipl) 96 | 97 | 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 - 98 | 99 | Download both csv files from https://www.kaggle.com/manasgarg/ipl 100 | 101 | Code python functions that will transform the raw csv data into a data structure in a format suitable for plotting with matplotlib. 102 | 103 | Generate the following plots ... 104 | 105 | 1. Plot the number of matches played per year of all the years in IPL. 106 | 2. Plot a stacked bar chart of matches won of all teams over all the years of IPL. 107 | 3. For the year 2016 plot the extra runs conceded per team. 108 | 4. For the year 2015 plot the top economical bowlers. 109 | 5. Discuss a "Story" you want to tell with the given data. As with part 1, prepare the data structure and plot with matplotlib. 110 | 111 | ## Django 112 | 113 | [Introduction to Django - thenewboston](https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBlmzzFcLgDhKTTfNLfX1IK) 114 | 115 | [Official Django Tutorial](https://docs.djangoproject.com/en/2.0/intro/tutorial01/) 116 | 117 | ## Data Project - Round 2 118 | 119 | Use Django as backend and JSON as data store to implement the project. 120 | 121 | ## SQL 122 | 123 | [Introduction to Relational Databases](https://in.udacity.com/course/intro-to-relational-databases--ud197) 124 | 125 | ## Data Project - Round 3 126 | 127 | Use Django as backend and MySQL as database 128 | 129 | ### REST 130 | 131 | **Session** on APIs and REST. 132 | 133 | 1. Basics of [REST APIs](https://en.wikipedia.org/wiki/Representational_state_transfer) 134 | 2. [RESTful Design](https://blog.philipphauer.de/restful-api-design-best-practices/) - Best practices to use 135 | 3. [Building good APIs](http://conversation.bigbinary.com/) - Using appropriate HTTP Response codes 136 | 137 | ### Django REST Framework 138 | 139 | Introduction to [Django REST framework](http://www.django-rest-framework.org/) 140 | 141 | ### Time and Space Complexity 142 | 143 | [Time Complexity Videos - mycodeschool](https://www.youtube.com/watch?v=8syQKTdgdzc) 144 | 145 | Create an account on [Interviewbit](https://www.interviewbit.com) and solve the practice problems in the Time Complexity section. 146 | 147 | ## JavaScript and Ecosytem 148 | 149 | ### JavaScript Basics 150 | [Introduction to JavaScript - Udacity](https://in.udacity.com/course/intro-to-javascript--ud803) 151 | 152 | ### ECMAScript 6 Basics 153 | [Introduction to ES6 - Udacity](https://www.udacity.com/course/es6-javascript-improved--ud356) 154 | 155 | ### Recommended Projects: 156 | 157 | **ToDo List in JavaScript** 158 | 159 | Implement a todo list with ordering 160 | 161 | **Memory Game in JavaScript** 162 | 163 | Create a Memory Game in JavaScript capturing the total number of moves and time taken to complete the game. 164 | 165 | **Chess Game in JavaScript** (Advanced) 166 | 167 | Build a 2 player chess game in JavaScript using principles of object oriented programming, game state and game loop. 168 | 169 | **Session**: Recap on Functions, Scope and Callbacks. 170 | 171 | **Session** on JavaScript Environment Setup - JS, Node, NPM. Introduction to JavaScript. 172 | 173 | ### Developer Tools 174 | 175 | [Getting Started with Developer Tools](https://developers.google.com/web/tools/chrome-devtools/) 176 | 177 | ### Jquery 178 | 179 | [Introduction to Jquery - Udacity](https://in.udacity.com/course/intro-to-jquery--ud245) 180 | 181 | ### Projects: 182 | 183 | NavTree Project in Jquery 184 | 185 | Repository name: navtree-(name) Example navtree-john 186 | 187 | Build a hierarchical, navigable tree structure using jQuery. The tree structure should be at least 3 levels deep. 188 | 189 | For example: 190 | 191 | Depth 0 192 | -- Depth 1 193 | -- Depth 2 194 | 195 | It should expand and minimize to reveal and hide nested nodes. Do not use an existing library to build the tree structure. 196 | 197 | Please use the IPL dataset that you had previously used for the Visualisation assignment. An example hierarchy could be 198 | 199 | Year > Team > Players 200 | 201 | 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. 202 | 203 | -- 204 | 205 | **Session**: Recap Jquery. 206 | 207 | **Session**: JS Utility functions. 208 | 209 | **Session**: Object and Prototypes. 210 | 211 | [Introduction to Object Oriented JavaScript - Udacity](https://classroom.udacity.com/courses/ud711) - Only complete scopes, closures, 'this' keyword and prototype chains. 212 | 213 | ## Data Project - Round 4 214 | 215 | Use Django REST Framework and Jquery navigation tree for the data project. 216 | 217 | ## React 218 | 219 | [Build Tools: Webpack and Babel](https://stanko.github.io/webpack-babel-react-revisited/) 220 | 221 | [Introduction to React - Techsith](https://www.youtube.com/watch?v=bUTsVY6VUQA&list=PL7pEw9n3GkoVPFsAylfniAT3QQcjWGl5C) 222 | 223 | **Session** Recap React 224 | 225 | ### ToDo List 226 | 227 | Implement a todo list with ordering which interacts with a backend web server in Node or Django with each update. 228 | 229 | ### NavTree Project in React 230 | 231 | Implement the navigation tree structure using the React library. 232 | 233 | ## Redux 234 | 235 | [Introduction to Redux - Academind](https://www.youtube.com/watch?v=YmGm-qwbJdc&index=9&list=PL55RiY5tL51rrC3sh8qLiYHqUV3twEYU_) 236 | 237 | Advanced: 238 | 239 | [Getting Started with Redux - Egghead](https://egghead.io/courses/getting-started-with-redux) 240 | 241 | [Introduction to Idiomatic Redux - Egghead](https://egghead.io/courses/building-react-applications-with-idiomatic-redux) 242 | 243 | **Session** Recap Redux 244 | 245 | ## Capstone Project 246 | 247 | The final project of the bootcamp. 248 | 249 | Deliverables: 250 | 251 | 1. User Personas - [How to define a User Persona](https://careerfoundry.com/en/blog/ux-design/how-to-define-a-user-persona/) 252 | 2. User Stories - [Writing User Stories](https://www.mountaingoatsoftware.com/agile/user-stories) 253 | 3. Wireframes - [Website Wireframes](https://en.wikipedia.org/wiki/Website_wireframe) 254 | 4. API Contracts 255 | 5. Trello Board for managing and prioritising user stories 256 | 6. Gitlab Repository for managing the code 257 | 7. Deployment link for the project 258 | 259 | Thanks. 260 | --------------------------------------------------------------------------------