└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # A Practical Guide: Web Development 2 | 3 | This guide is a compilation of resources for full stack web development. 4 | 5 | The layout of this guide is borrowed from [Traversy Media's Web Development Guide](https://www.youtube.com/watch?v=UnTQVlqmDQ0) with additional links to resources. 6 | 7 | >[![Everything Is AWESOME](https://img.youtube.com/vi/UnTQVlqmDQ0/0.jpg)](https://www.youtube.com/watch?v=UnTQVlqmDQ0 "Web Development in 2019: A Practical Guide") 8 | 9 | ## Table of Contents 10 | - [General Resources](#General-Resources) 11 | - [Getting Started](#Getting-Started) 12 | - [Basic Software & Tools](#Basic-Software--Tools) 13 | - [The Building Blocks](#The-Building-Blocks) 14 | - [HTML & CSS](#HTML--CSS) 15 | - [Responsive Layout](#Responsive-Layout) 16 | - [Make It Live](#Make-It-Live) 17 | - [Basic Deployment](#Basic-Deployment) 18 | - [Better CSS](#Better-CSS) 19 | - [Sass Pre-Processor](#Sass-Pre-Processor) 20 | - [Get Dynamic](#Get-Dynamic) 21 | - [Vanilla JavaScript](#Vanilla-JavaScript) 22 | - [You're Skill Set](#Youre-Skill-Set) 23 | - [Basic Front-End Web Developer](#Basic-Front-End-Web-Developer) 24 | - [Now What?](#Now-What) 25 | - [What To Learn Next](#What-To-Learn-Next) 26 | - [Easier UI's & Prototyping](#Easier-UIs--Prototyping) 27 | - [HTML/CSS Framework (Choose One)](#HTMLCSS-Framework-Choose-One) 28 | - [Your Workflow](#Your-Workflow) 29 | - [Git & Tooling](#Git--Tooling) 30 | - [JavaScript](#Javascript) 31 | - [Front-End Framework](#Front-End-Framework) 32 | - [State Management](#State-Management) 33 | - [You're Skill Set](#Youre-Skill-Set-1) 34 | - [Full Fledged Front-End Web Developer](#Full-Fledged-Front-End-Web-Developer) 35 | - [Backend Programming](#Backend-Programming) 36 | - [Server Side Language (Choose One)](#Server-Side-Language-Choose-One) 37 | - [Server Side Framework (Choose One)](#Server-Side-Framework-Choose-One) 38 | - [Database (Choose One or Two)](#Database-Choose-One-or-Two) 39 | - [Full Stack Programming](#Full-Stack-Programming) 40 | - [Server Rendered Pages](#Server-Rendered-Pages) 41 | - [Content Management System (CMS) (Choose One)](#Content-Management-System-CMS-Choose-One) 42 | - [DevOps, Deployment & More](#DevOps-Deployment--More) 43 | - [You're Skill Set](#Youre-Skill-Set-2) 44 | - [Full Stack Badass](#Full-Stack-Badass) 45 | - [Beyond The Browser](#Beyond-The-Browser) 46 | - [Mobile Development (Choose One)](#Mobile-Development-Choose-One) 47 | - [Desktop Apps With Electron](#Desktop-Apps-With-Electron) 48 | - [2019 Trends](#2019-Trends) 49 | - [GraphQL & Apollo](#GraphQL--Apollo) 50 | - [TypeScript](#TypeScript) 51 | - [Serverless Architecture](#Serverless-Architecture) 52 | - [AI & Machine Learning](#AI--Machine-Learning) 53 | - [Blockchain Technology](#Blockchain-Technology) 54 | - [Progrssive Web Apps (PWA)](#Progressive-Web-Apps-PWA) 55 | - [Contributing](#Contributing) 56 | 57 | ## General Resources 58 | - Youtube Channels 59 | - [Traversy Media](https://www.youtube.com/user/TechGuyWeb) 60 | - [LearnCode.academy](https://www.youtube.com/user/learncodeacademy/featured) 61 | - [Learn WebCode](https://www.youtube.com/user/LearnWebCode/videos) 62 | - [LevelUpTuts](https://www.youtube.com/user/LevelUpTuts/) 63 | - [DevTips](https://www.youtube.com/user/DevTipsForDesigners) 64 | - Articles 65 | - [Medium](https://medium.com/) 66 | - Curriculum-like Learning / Free resources 67 | - [GitHub Student Developer](https://education.github.com/pack) 68 | - [FreeCodeCamp](https://www.freecodecamp.org/) 69 | - Reddit 70 | - [r/learnprogramming](https://reddit.com/r/learnprogramming) 71 | - [r/webdev](https://reddit.com/r/webdev) 72 | - Practice 73 | - [HackerRank](https://www.hackerrank.com/) 74 | - [CodeWars](https://www.codewars.com/) 75 | - Paid Resources 76 | - [Udemy](https://www.udemy.com/) 77 | - [Lynda](https://www.lynda.com/) 78 | - [Udacity](https://www.udacity.com/) 79 | - [Pluralsight](https://www.pluralsight.com/) 80 | 81 | ## Getting Started 82 | 83 | ### Basic Software & Tools 84 | Basic tools for web development 85 | 86 | - **Text Editor or IDE**: 87 | - [VSCode](https://code.visualstudio.com/) 88 | - [Atom](https://atom.io/) 89 | - [Sublime Text](https://www.sublimetext.com/) 90 | - **Web Browser**: 91 | - [Google Chrome](https://www.google.com/chrome/) 92 | - [Firefox](https://www.mozilla.org/en-US/firefox/new/) 93 | - **Design & Mockup (Optional)**: 94 | - [Adobe XD](https://www.adobe.com/products/xd.html) 95 | - [Adobe Photoshop](https://www.adobe.com/products/photoshop.html) 96 | - [Sketch](https://www.sketchapp.com/) 97 | - [Figma](https://www.figma.com/) 98 | - **3rd Party Terminal (Optional)**: 99 | - [Git Bash](https://git-scm.com/downloads) 100 | - [WSL](https://docs.microsoft.com/en-us/windows/wsl/about) 101 | - [iTerm2](https://www.iterm2.com/) 102 | - [Hyper](https://hyper.is/) 103 | 104 | ## The Building Blocks 105 | 106 | ### HTML & CSS 107 | Always the very first thing to learn 108 | 109 | **What to be proficient in**: 110 | - Semantic HTML5 Elements 111 | - Basic CSS (Positioning, box model, etc) 112 | - Flexbox & CSS Grid 113 | - CSS Variables (Custom Properties) 114 | - Browser Dev Tools 115 | 116 | **Resources**: 117 | - Youtube Videos 118 | - [HTML Crash Course For Beginners](https://www.youtube.com/watch?v=UB1O30fR-EE) 119 | - [CSS Crash Course For Beginners](https://www.youtube.com/watch?v=yfoY53QXEnI) 120 | - [CSS Grid Crash Course](https://www.youtube.com/watch?v=jV8B24rSN5o) 121 | - [Flexbox In 20 Minutes](https://www.youtube.com/watch?v=JJSoEo8JSnc) 122 | - Udemy Courses 123 | - [Build Responsive Real World Websites With HTML5 and CSS3](https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/) 124 | - Articles 125 | - [Learn HTML In 5 Minutes](https://medium.freecodecamp.org/learn-html-in-5-minutes-ccd378d2ab72) 126 | - [Learn CSS Flexbox In 5 Minutes](https://medium.freecodecamp.org/learn-css-flexbox-in-5-minutes-b941f0affc34) 127 | - Books 128 | - [HTML & CSS: Design and Build Web Sites](https://www.barnesandnoble.com/p/html-css-jon-duckett/1110769868/2684039025388) 129 | 130 | ### Responsive Layout 131 | Responsive layouts are no longer a luxury, they are a necessity 132 | 133 | **What to be proficient in**: 134 | - Set Viewport 135 | - Fluid Widths 136 | - Media Queries 137 | - REM Over PX 138 | - Mobile First, Stacked Columns 139 | 140 | **Resources**: 141 | - Youtube Videos 142 | - [Build An HTML5 Website With A Responsive Layout](https://www.youtube.com/watch?v=Wm6CUkswsNw) 143 | - [Responsive Landing Page Using HTML & CSS](https://www.youtube.com/watch?v=GJXXf3_dcng) 144 | - [Build A Responsive Mobile First Website - HTML5 & CSS3](https://www.youtube.com/watch?v=XsEnj-1hG2o) 145 | - [Pluralsight Login Page Clone - HTML & CSS](https://www.youtube.com/watch?v=wIx1O5Y5EB4) 146 | - Articles 147 | - [Everything You Need To Know About Responsive Web Design](https://medium.com/swlh/everything-you-need-to-know-about-responsive-web-design-54c2059a7e99) 148 | - [Best Practices Of Responsive Web Design](https://medium.com/level-up-web/best-practices-of-responsive-web-design-6da8578f65c4) 149 | - [Using Media Queries For Responsive Design](https://www.smashingmagazine.com/2018/02/media-queries-responsive-design-2018/) 150 | - [How To Make Your HTML Responsive By Adding A Single Line Of CSS](https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431) 151 | 152 | ## Make It Live 153 | 154 | ### Basic Deployment 155 | Learn to deploy a static website 156 | 157 | - **Register a Domain Name**: 158 | - [Namecheap](https://www.namecheap.com/) 159 | - [Google Domains](https://domains.google/#/) 160 | - **Managed Shared Hosting or VPS**: 161 | - [Inmotion](https://www.inmotionhosting.com/) 162 | - [Hostgator](https://www.hostgator.com/) 163 | - [Bluehost](https://www.bluehost.com/) 164 | - [Digital Ocean](https://www.digitalocean.com/) 165 | - **FTP or SFTP File Upload**: 166 | - [Filezilla](https://filezilla-project.org/) 167 | - [Cyberduck](https://cyberduck.io/) 168 | - **Static Hosting (Need to know Git)**: 169 | - [Netlify](https://www.netlify.com/) 170 | - [Github Pages](https://pages.github.com/) 171 | 172 | **Resources**: 173 | - Youtube Videos 174 | - [Web Hosting & CPanel Guide](https://www.youtube.com/watch?v=UN7S4zd8h-k) 175 | - [Deploy Websites In Seconds With Netlify](https://www.youtube.com/watch?v=bjVUqvcCnxM) 176 | - [Github Pages Deploy & Domain](https://www.youtube.com/watch?v=SKXkC4SqtRk) 177 | - Articles 178 | - [How to deploy a website to Netlify](https://medium.com/the-codelog/how-to-deploy-a-website-to-netlify-35274f478144) 179 | - [How to Deploy a Static Website to Heroku](https://medium.com/@adityaniloi/how-to-deploy-a-static-website-to-heroku-49d55e07cb94) 180 | - [How to host static website on firebase hosting for free](https://medium.com/@aleemuddin13/how-to-host-static-website-on-firebase-hosting-for-free-9de8917bebf2) 181 | 182 | ## Better CSS 183 | 184 | ### Sass Pre-Processor 185 | Not mandatory but recommended. It is easy enough to learn the basics 186 | 187 | **What to be proficient in**: 188 | - Structured CSS 189 | - Variables 190 | - Nested CSS 191 | - Mixins & Functions 192 | - Inheritance 193 | 194 | **Resources**: 195 | - Youtube Videos 196 | - [Responsive Portfolio Website Series](https://www.youtube.com/watch?v=gYzHS-n2gqU&list=PLillGF-RfqbYoGoCjKoMOkVznV6aSXKzU) 197 | - [Fancy Form UI From Scratch](https://www.youtube.com/watch?v=AiTdhLc8JCo) 198 | - [Sass Workflow With Gulp](https://www.youtube.com/watch?v=rmXVmfx3rNo) 199 | - Articles 200 | - [Getting Started With Sass](https://medium.com/@thejasonfile/getting-started-with-sass-dedb271bdf5a) 201 | - [Intro To Sass](https://codeburst.io/intro-to-sass-386eb8f2e005) 202 | - [Learn Sass In 15 Minutes](https://tutorialzine.com/2016/01/learn-sass-in-15-minutes) 203 | 204 | ## Get Dynamic 205 | 206 | ### Vanilla JavaScript 207 | Start learning JavaScript **without** any library or framework 208 | 209 | **What to be proficient in**: 210 | - Data Types, Functions, Conditionals, Loops, Operators 211 | - DOM Manipulation & Events 212 | - JSON 213 | - Fetch API 214 | - ES6+ (Arrow Functions, Promises, Async/Await, Destructuring) 215 | 216 | **Resources**: 217 | - Youtube Videos 218 | - [JavaScript Fundamentals For Beginners](https://www.youtube.com/watch?v=vEROU2XtPR8) 219 | - [JavaScript DOM Crash Course](https://www.youtube.com/watch?v=0ik6X4DJKCc&list=PLillGF-RfqbYE6Ik_EuXA2iZFcE082B3s) 220 | - [Vanilla JavaScript Projects Playlist](https://www.youtube.com/watch?v=vEROU2XtPR8&list=PLillGF-RfqbbnEGy3ROiLWk7JMCuSyQtX) 221 | - Udemy Courses 222 | - [Modern JavaScript From The Beginning](https://www.udemy.com/modern-javascript-from-the-beginning/) 223 | - [JavaScript: Understanding The Weird Parts](https://www.udemy.com/understand-javascript/) 224 | - [JavaScript Basics For Beginners](https://www.udemy.com/javascript-basics-for-beginners/) 225 | - Articles 226 | - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) 227 | - [JavaScript.info](https://javascript.info/) 228 | - [Learn Vanilla JavaScript From Tutorials](https://medium.mybridge.co/learn-plain-javascript-from-top-tutorials-for-the-past-year-v-2018-d964bc597a45) 229 | - Books 230 | - [JavaScript for Kids: A Playful Introduction to Programming](https://www.amazon.com/JavaScript-Kids-Playful-Introduction-Programming/dp/1593274084/) 231 | - [Eloquent JavaScript, A Modern Introduction to Programming](https://www.amazon.com/Eloquent-JavaScript-Modern-Introduction-Programming/dp/1593275846/) 232 | - [JavaScript: The Good Parts](https://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/) 233 | - [JavaScript: The Definitive Guide](https://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527) 234 | - Practice 235 | - [JavaScript30](https://javascript30.com/) 236 | 237 | ## You're Skill Set 238 | 239 | ### Basic Front-End Web Developer 240 | At this point, if successfully learnt and practiced the above technologies, it is possible to find an entry level job, **but** you are most likely going to need to know more. 241 | *Freelancing is a possibility...* 242 | 243 | **You Should Be Able To**: 244 | - Build Static Websites (Small Business, Informational) 245 | - Build UI Layouts (Take a design and create the HTML/CSS) 246 | - Add Dynamic Functionality (Modals, Slideshows, etc) 247 | - Deploy and Mantain Wesbites 248 | 249 | ## Now What? 250 | 251 | ### What To Learn Next 252 | What to do next depends on what you want to do. You have a few choices 253 | 254 | - HTML/CSS Framework 255 | - Git & Tooling 256 | - Front End JS Framework 257 | - Server Side Language & Database 258 | 259 | ## Easier UI's & Prototyping 260 | 261 | ### HTML/CSS Framework (Choose One) 262 | HTML/CSS frameworks are becoming a bit less relevant but I will suggest learning one. They can make your life much easier and great for prototyping. 263 | 264 | - [Bootstrap](https://getbootstrap.com/) 265 | - [Materialize](https://materializecss.com/) 266 | - [Bulma](https://bulma.io/) 267 | 268 | **Resources**: 269 | - Youtube Videos 270 | - [Bootstrap Crash Course](https://www.youtube.com/watch?v=5GcQtLDGXy8) 271 | - [Materialize Crash Course](https://www.youtube.com/watch?v=nqT8c5OFjEQ) 272 | - [Bulma Crash Course](https://www.youtube.com/watch?v=IiPQYQT2-wg) 273 | - Articles 274 | - [Learn The Bootstrap Grid In 15 Minutes](https://tutorialzine.com/2015/10/learn-the-bootstrap-grid-in-15-minutes) 275 | - [Materialize Tutorial](https://www.tutorialspoint.com/materialize/) 276 | - [Let’s Code Our Portfolio — A Practical Approach To MaterializeCSS](https://codeburst.io/lets-code-our-portfolio-a-practical-approach-to-materializecss-61adfb17e308) 277 | - [Learn Bulma In 5 Minutes](https://medium.freecodecamp.org/learn-bulma-in-5-minutes-ec5188c53e83) 278 | - Scrimba 279 | - [Learn Bootstrap 4 For Free](https://scrimba.com/g/gbootstrap4) 280 | - [Learn Bulma CSS For Free](https://scrimba.com/g/gbulma) 281 | - Udemy 282 | - [Bootsrap 4 From Scratch](https://www.udemy.com/bootstrap-4-from-scratch-with-5-projects/) 283 | - [Materialize CSS From Scratch](https://www.udemy.com/materialize-css-from-scratch-with-5-projects/) 284 | 285 | ## Your Workflow 286 | 287 | ### Git & Tooling 288 | Git is absolutely necessary for all web developers. Here are some other tooling suggestions 289 | 290 | - [Basic Command Line](###Basic-Software-&-Tools) (Used for so much including these tools) 291 | - [Git](https://git-scm.com/) 292 | - [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/en/) (Installing packages) 293 | - [Webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/) (Module bundling) 294 | - [Gulp](https://gulpjs.com/) or [Grunt](https://gruntjs.com/) (Task runners) 295 | - Editor Extensions (ESLint, Prettier, Live-Server, etc...) 296 | 297 | **Resources**: 298 | - Youtube Videos 299 | - [Linux Command Line Basics](https://www.youtube.com/watch?v=cBokz0LTizk) 300 | - [Git Crash Course](https://www.youtube.com/watch?v=SWYqp7iY_Tc) 301 | - [NPM Crash Course](https://www.youtube.com/watch?v=jHDhaSSKmB0) 302 | - [Yarn Crash Course](https://www.youtube.com/watch?v=g9_6KmiBISk) 303 | - [Webpack Crash Course](https://www.youtube.com/watch?v=lziuNMk_8eQ) 304 | - [Gulp Crash Course](https://www.youtube.com/watch?v=1rw9MfIleEg) 305 | - [VSCode Setup](https://www.youtube.com/watch?v=fnPhJHN0jTE) 306 | 307 | ## JavaScript 308 | 309 | ### Front-End Framework 310 | It is becoming a necessity to learn a JS front-end framework 311 | 312 | - Very popular in the industry 313 | - More interactive & intersting UIs 314 | - Components & modular front end code 315 | - Good for teams 316 | 317 | **Most Common Front-End Frameworks**: 318 | - [React](https://reactjs.org/) - Most popular in the industry 319 | - [Vue](https://vuejs.org/) - Easy to use and really gaining traction 320 | - [Angular](https://angular.io/) - Fading a bit, used in enterprise 321 | 322 | **Resources**: 323 | - Youtube Videos 324 | - [React Crash Course](https://www.youtube.com/watch?v=sBws8MSXN7A) 325 | - [Vue.js In 60 Minutes](https://www.youtube.com/watch?v=z6hQqgvGI4Y) 326 | - [Angular In 60 Minutes](https://www.youtube.com/watch?v=KhzGSHNhnbI) 327 | - Articles 328 | - [How to Learn React — A roadmap from beginner to advanced](https://medium.freecodecamp.org/learning-react-roadmap-from-scratch-to-advanced-bff7735531b6) 329 | - Scrimba 330 | - [Learn Vue.js for free](https://scrimba.com/g/glearnvuev) 331 | - Udemy Courses 332 | - [React - Front to Back](https://www.udemy.com/react-front-to-back/) 333 | - [Angular - Front to Back](https://www.udemy.com/angular-4-front-to-back/) 334 | 335 | ### State Management 336 | For larger apps with a framework, you may need to learn methods to manage app-level state 337 | 338 | - [Redux](https://redux.js.org/), [Context API](https://hackernoon.com/how-do-i-use-react-context-3eeb879169a2) 339 | - [Apollo](https://www.apollographql.com/) (GraphQL Client) 340 | - [VueX](https://vuex.vuejs.org/) 341 | - [NgRx](https://ngrx.io/) 342 | 343 | **What to be proficient in**: 344 | - Immutable State 345 | - Stores 346 | - Reducers 347 | - Mutations 348 | - Getters 349 | - Actions 350 | - Observables 351 | 352 | **Resources**: 353 | - Youtube Videos 354 | - [Redux Crash Course](https://www.youtube.com/watch?v=93p3LxR9xfM) 355 | - [React & Context API Project](https://www.youtube.com/watch?v=NDEt0KdDbhk&list=PLillGF-RfqbaxgxkKgKk1XlJAVCX31xRI) 356 | - Udemy Courses 357 | - [Modern React with Redux](https://www.udemy.com/react-redux/) 358 | - [MERN Stack - Front to Back](https://www.udemy.com/mern-stack-front-to-back/) 359 | 360 | ## You're Skill Set 361 | 362 | ### Full Fledged Front-End Web Developer 363 | At this point, you should be able to get a front-end job or work for yourseld and do pretty well 364 | 365 | **You Should Be Able To**: 366 | - Build incredible front-end applications 367 | - Smoot & steady front-end workflow 368 | - Work well with teams & familiar with Git 369 | - Connect to backend API's & work with data 370 | 371 | ## Backend Programming 372 | 373 | ### Server Side Language (Choose One) 374 | To be a full stack or software engineer, you will need to learn a server-side language/technology 375 | 376 | - [Node.js](https://nodejs.org/) 377 | - [Python](https://www.python.org/) 378 | - [PHP](http://www.php.net/) 379 | - [C#](https://docs.microsoft.com/en-us/dotnet/csharp/) 380 | - [Go](https://golang.org/) 381 | 382 | **What To Be Proficient In**: 383 | - Fundamental Syntax 384 | - Structure & Workflow 385 | - Package Management 386 | - HTTP / Routing 387 | 388 | **Resources**: 389 | - Youtube Videos 390 | - [Node.js For Beginners](https://www.youtube.com/watch?v=U8XF6AFGqlc) 391 | - [Python For Beginners](https://www.youtube.com/watch?v=JJmcL1N2KQs) 392 | - [PHP - Front to Back](https://www.youtube.com/watch?v=oJbfyzaA2QA&list=PLillGF-Rfqbap2IB6ZS4BBBcYPagAjpjn) 393 | - [C# Application in 60 Minutes](https://www.youtube.com/watch?v=GcFJjpMFJvI) 394 | - [Go Crash Course](https://www.youtube.com/watch?v=SqrbIlUwR0U) 395 | - Udemy Courses 396 | - [Node.js Dev To Deployment](https://www.udemy.com/nodejs-express-mongodb-dev-to-deployment/) 397 | - [PHP MVC Object Oriented](https://www.udemy.com/object-oriented-php-mvc/) 398 | - [Python Django Dev To Deployment](https://www.udemy.com/python-django-dev-to-deployment/) 399 | 400 | ### Server Side Framework (Choose One) 401 | Do not reinvent the wheel. Learn a framework to build better and faster 402 | 403 | - **Node.js**: 404 | - [Express](https://expressjs.com/) 405 | - [Koa](https://koajs.com/) 406 | - [Adonis](https://adonisjs.com/) 407 | - **Python**: 408 | - [Django](https://www.djangoproject.com/) 409 | - [Flask](http://flask.pocoo.org/) 410 | - **PHP**: 411 | - [Laravel](https://laravel.com/) 412 | - [Symfony](https://symfony.com/) 413 | - **C#**: 414 | - [ASP.NET](https://www.asp.net/) 415 | 416 | **Resources**: 417 | - Youtube Videos 418 | - [Express Crash Course](https://www.youtube.com/watch?v=gnsO8-xJ8rs) 419 | - [Koa Crash Course](https://www.youtube.com/watch?v=z84uTk5zmak) 420 | - [Getting Started With Adonis](https://www.youtube.com/watch?v=2oXpBK2iNQU&list=PLillGF-RfqbY6wY9yZjCpSMzvhn-icuG6) 421 | - [Django Crash Course](https://www.youtube.com/watch?v=D6esTdOLXh4) 422 | - [Flask From Scratch](https://www.youtube.com/watch?v=zRwy8gtgJ1A&list=PLillGF-RfqbbbPz6GSEM9hLQObuQjNoj_) 423 | - [Laravel From Scratch](https://www.youtube.com/watch?v=EU7PRmCpx-0&list=PLillGF-RfqbYhQsN5WMXy6VsDMKGadrJ-) 424 | - [Up & Running With Symfony](https://www.youtube.com/watch?v=t5ZedKnWX9E&list=PLillGF-Rfqba-PQBBEf14-fi6LafvvDYS) 425 | 426 | ### Database (Choose One or Two) 427 | Most applications will use some kind of database. There are different types, here are some options... 428 | 429 | - **Relational Database**: 430 | - [MySQL](https://www.mysql.com/) 431 | - [PostgreSQL](https://www.postgresql.org/) 432 | - [MS SQL](https://www.microsoft.com/en-us/sql-server/default.aspx) 433 | - **NoSQL**: 434 | - [MongoDB](https://www.mongodb.com/) 435 | - [Couchbase](https://www.couchbase.com/) 436 | - **Cloud**: 437 | - [Firebase](https://firebase.google.com/) 438 | - [Amazon Web Services (AWS)](https://aws.amazon.com/) 439 | - [Azure DocumentDB](https://azure.microsoft.com/en-us/services/cosmos-db/) 440 | - **Lightweight**: 441 | - [SQLite](https://www.sqlite.org/) 442 | - [NeDB](https://github.com/louischatriot/nedb) 443 | - [Redis](https://redis.io/) 444 | 445 | **Resources**: 446 | - Youtube Videos 447 | - [SQL Crash Course](https://www.youtube.com/watch?v=nWeW3sCmD2k) 448 | - [MongoDB In 30 Minutes](https://www.youtube.com/watch?v=pWbMrx5rVBE) 449 | - [Redis Crash Course](https://www.youtube.com/watch?v=Hbt56gFj998) 450 | - [PostgreSQL For Beginners](https://www.youtube.com/watch?v=aUfPf-clLLs) 451 | - [Couchbase Training](https://www.youtube.com/playlist?list=PLJUd88mUgNonbFX9AJDZA7KCUItTAvV9f) 452 | - [Firebase Beginner's Guide](https://www.youtube.com/watch?v=9kRgVxULbag) 453 | - [AWS For Beginners](https://www.youtube.com/watch?v=IT1X42D1KeA) 454 | - [Getting Started With Azure DocumentDB](https://www.youtube.com/watch?v=Py4PufHw0u4) 455 | - [SQLite Complete Overview](https://www.youtube.com/watch?v=pd-0G0MigUA) 456 | 457 | ## Full Stack Programming 458 | 459 | ### Server Rendered Pages 460 | Frameworks like React, Vue & Angular can also be rendered on the server which can actually make things relatively easier 461 | 462 | - [Next.js](https://nextjs.org/) - *React* 463 | - [Nuxt.js](https://nuxtjs.org/) - *Vue* 464 | - [Angular Universal](https://angular.io/guide/universal) - *Angular* 465 | 466 | **Resources**: 467 | - Youtube Videos 468 | - [Next.js Crash Course](https://www.youtube.com/watch?v=IkOVe40Sy0U) 469 | - [Nuxt.js Introduction](https://www.youtube.com/watch?v=nteDXuqBfn0) 470 | - [Angular Universal Course](https://www.youtube.com/watch?v=v6CKlV7kGVM&list=PLOa5YIicjJ-WNOPe_ze6_BSP_mBgD_VYY) 471 | 472 | ### Content Management System (CMS) (Choose One) 473 | Content Management Systems allow for quick development and give your clients the ability to update their content. May not be a bad idea to pick one up. **Great for freelancers** 474 | 475 | - **PHP Based**: 476 | - [Wordpress](https://wordpress.com/) 477 | - [Drupal](https://www.drupal.org/) 478 | - **JS Based**: 479 | - [Ghost](https://ghost.org/) 480 | - [Keystone](https://keystonejs.com/) 481 | - **Python Based**: 482 | - [Mezzazine](http://mezzanine.jupo.org/) 483 | - **.NET**: 484 | - [Piranha](http://piranhacms.org/) 485 | - [Orchard CMS](https://orchardproject.net/) 486 | 487 | **Resources**: 488 | - Youtube Videos 489 | - [Keystone JS Tutorial](https://www.youtube.com/watch?v=DPXDFeUEk3g) 490 | - [Wordpress For Beginners](https://www.youtube.com/watch?v=EXKwAk0j3k8) 491 | - [Drupal Beginner Tutorials](https://www.youtube.com/watch?v=-DYSucV1_9w&list=PLtaXuX0nEZk9MKY_ClWcPkGtOEGyLTyCO) 492 | - [Ghost Tutorials](https://www.youtube.com/playlist?list=PLEAYhfKboZUSDoFrd_F5jCB_jPvBNvotG) 493 | - [Intro To Mezzanine CMS](https://www.youtube.com/watch?v=NSdNh_btwGo&list=PLz0tRsmt5kvMLAnrzETcvoQKyinVIJYrd) 494 | 495 | ### DevOps, Deployment & More 496 | Learning languages and frameworks is one thing, setting up environments, testing & deploying is another 497 | 498 | - **Deployment**: 499 | - Linux 500 | - SSH 501 | - [Git](https://gist.github.com/noelboss/3fe13927025b89757f8fb12e9066f2fa) 502 | - Server Software ([Nginx](https://www.nginx.com/), [Apache](https://httpd.apache.org/)) 503 | - **Platforms**: 504 | - [Digital Ocean](https://www.digitalocean.com/) 505 | - [Amazon Web Services (AWS)](https://aws.amazon.com/) 506 | - [Heroku](https://www.heroku.com/) 507 | - [Azure](https://azure.microsoft.com/en-us/) 508 | - **Virtualization**: 509 | - [Docker](https://www.docker.com/) 510 | - [Vagrant](https://www.vagrantup.com/) 511 | - **Testing**: 512 | - Unit 513 | - Integration 514 | - Functional 515 | - System 516 | 517 | **Resources**: 518 | - Youtube Videos 519 | - [Getting Started With Docker](https://www.youtube.com/watch?v=Kyx2PsuwomE) 520 | - [Vagrant Crash Course](https://www.youtube.com/watch?v=vBreXjkizgo) 521 | - [Jest Crash Course - Unit Testing](https://www.youtube.com/watch?v=7r4xVDI2vho) 522 | - [Deploy Node App To Server](https://www.youtube.com/watch?v=RE2PLyFqCzE) 523 | 524 | ## You're Skill Set 525 | 526 | ### Full Stack Badass 527 | You are a frigging rockstar! 528 | 529 | **You Should Be Able To**: 530 | - Setup full stack dev environments & workflows 531 | - Build back-end APIs & micro-services 532 | - Work with databases 533 | - Construct full-stack apps (Front-end framework & server) 534 | - Deploy to the cloud (SSH, Git, Servers, etc) 535 | 536 | ## Beyond The Browser 537 | 538 | ### Mobile Development (Choose One) 539 | There are some frameworks that allow us to create native apps with web technologies 540 | 541 | - [React Native](https://facebook.github.io/react-native/) - *Build Native apps with React* 542 | - [NativeScript](https://www.nativescript.org/) - *Angular, TypeScript, JavaScript* 543 | - [Ionic](https://ionicframework.com/) - *Hybrid apps with HTML/CSS/JS* 544 | - [Flutter](https://flutter.io/) - *Mobile SDK for Android & iOS (Uses Dart)* 545 | - [Xamarin](https://visualstudio.microsoft.com/xamarin/) - *Mobile apps with C#* 546 | 547 | **Resources**: 548 | - Youtube Videos 549 | - [React Native Crash Course](https://www.youtube.com/watch?v=mkualZPRZCs) 550 | - [Ionic Mobile Framework Series](https://www.youtube.com/watch?v=gHPL_2IsZlI&list=PLillGF-RfqbbtvHn2l1sOSzEJZ6lpcLci) 551 | - [NativeScript Step By Step](https://www.youtube.com/watch?v=2JDXnduTlgs&list=PLiKWVuUOQtPbAENdDDnGegQyBM0G4_0Gd) 552 | - [Flutter For Beginners](https://www.youtube.com/watch?v=GLSG_Wh_YWc) 553 | - [Xamarin For Beginners](https://www.youtube.com/watch?v=IIo1udEHPNI&list=PLsrZV8shpwjN_z6f44P4gXO2L5CoBVFba) 554 | 555 | ### Desktop Apps With Electron 556 | Electron is used to build powerful cross-platform desktop applications using JavaScript 557 | 558 | - Uses Chromium & Node.js 559 | - Compatible with Windows, MAC & Linux 560 | - Crash reporting, debugging & profiling 561 | 562 | **Resources**: 563 | - Youtube Videos 564 | - [Intro To Electron](https://www.youtube.com/watch?v=mr9Mtm_TRpw) 565 | - [Build An Electron App In 60 Minutes](https://www.youtube.com/watch?v=kN1Czs0m1SU) 566 | 567 | ## 2019 Trends 568 | 569 | ### GraphQL & Apollo 570 | GraphQL is a revolutionary new way to thing about APIs. Query language that is much less rigid than standard REST. 571 | 572 | - Ask for only what you want 573 | - Front & Back end can collaborate more smoothly 574 | - Writing queries are very easy and similar to JSON 575 | - Apollo is a client to make requests to a GraphQL server 576 | - Used with the Gatsby static site generator 577 | 578 | **Resources**: 579 | - Youtube Videos 580 | - [Build a GraphQL Server](https://www.youtube.com/watch?v=PEcJxkylcRM&list=PLillGF-RfqbYZty73_PHBqKRDnv7ikh68) 581 | - [GraphQL With React & Apollo](https://www.youtube.com/watch?v=SEMTj8w04Z8&list=PLillGF-RfqbZrjw48EXLdM4dsOhURCLZx) 582 | 583 | ### TypeScript 584 | TypeScript is a superset of JS with additional features including static typing 585 | 586 | **What To Be Proficient In**: 587 | - Types for variables, functions, etc 588 | - Classes 589 | - Other ES6-like features 590 | - Used in Angular but can be implements in React & Vue 591 | 592 | **Resources**: 593 | - Youtube Videos 594 | - [TypeScript Crash Course](https://www.youtube.com/watch?v=rAy_3SIqT-E) 595 | 596 | ### Serverless Architecture 597 | Eliminate the need for creating and managing your own server 598 | 599 | - Use 3rd party services to execture "Serverless Functions" ([FaaS](https://docs.openfaas.com/)) 600 | - Examples are [AWS](https://aws.amazon.com/), [Netlify](https://www.netlify.com/) & [Firebase](https://firebase.google.com/) 601 | - Popular with [Gatsby](https://www.gatsbyjs.org/) static sites 602 | - Serverless framework - *Toolkit for building serverless apps* 603 | 604 | **Resources**: 605 | - Youtube Videos 606 | - [Serverless Lambda Functions](https://www.youtube.com/watch?v=drJwMlD9Mjo) 607 | - [Gatsby Crash Course](https://www.youtube.com/watch?v=6YhqQ2ZW1sc) 608 | 609 | ### AI & Machine Learning 610 | AI & Machine Learning have been huge in almost every area of programming & technology including web development 611 | 612 | - Machine Learning can allow web apps to adapt over time 613 | - AI has a long way to go but I suspect we will see more of it in web development 614 | - Used heavily in **Python** but we also have JS libraries like [Tenserflow.js](https://js.tensorflow.org/) and [Brain.js](https://github.com/BrainJS/brain.js) 615 | 616 | **Resources**: 617 | - Youtube Videos 618 | - [Machine Learning With BrainJS](https://www.youtube.com/watch?v=RVMHhtTqUxc) 619 | 620 | ### Blockchain Technology 621 | Companies are using Blockchain for digital transactions in order to make them more efficient and secure 622 | 623 | - [Solidity](https://solidity.readthedocs.io) - *Language for implementing contracts* 624 | - [Mist](https://github.com/ethereum/mist) - *Used for strong Ethereum, sending transactions & contracts* 625 | - [Coinbase API](https://developers.coinbase.com/) - *Blochain devs can easily build apps and integrate Bitcoin* 626 | 627 | **Resources**: 628 | - Youtube Videos 629 | - [Learning Solidity](https://www.youtube.com/watch?v=v_hU0jPtLto&list=PL16WqdAj66SCOdL6XIFbke-XQg2GW_Avg) 630 | - [Coinbase API Tutorial](https://www.youtube.com/watch?v=Sq_neUUm2u4&list=PLvHPbUS6M16AguxGDk0IFAMhn5sQnXG2D) 631 | 632 | ### Progrssive Web Apps (PWA) 633 | Progressive Web Apps are regular web apps but give the user a native app experience in terms of layout and functionality 634 | 635 | - Responsive to fit any form factor 636 | - Service workers for offline availability 637 | - App-like interactions 638 | - HTTPS 639 | - Reliable, Fast & Engaging 640 | 641 | **Resources**: 642 | - Youtube Videos 643 | - [Intro To Service Workers](https://www.youtube.com/watch?v=ksXwaWHCW6k) 644 | - [PWA From Scratch](https://www.youtube.com/watch?v=gcx-3qi7t7c) 645 | 646 | ### Web Assembly 647 | Assembly-like binary format for code that can be executed by web browsers. Can be generated from higher level languages like C/C++ & Rust. 648 | 649 | - Faster than JavaScript 650 | - Secure - Enforces same origin & security policies in the browser 651 | - Open & debuggable 652 | 653 | **Resources**: 654 | - Docs 655 | - [Developer's Guide To Web Assembly](https://webassembly.org/getting-started/developers-guide/) 656 | 657 | ## Contributing 658 | If you would like to add quality resources to this guide, open a pull request. All I ask you is to follow the way I've been linking resources in this guide. 659 | --------------------------------------------------------------------------------