https://github.com/milovantomasevic/the-complete-2021-web-development-bootcamp
Become a full-stack web developer with just one course. HTML, CSS, Javascript, Node, React, MongoDB and more!
https://github.com/milovantomasevic/the-complete-2021-web-development-bootcamp
Last synced: 6 months ago
JSON representation
Become a full-stack web developer with just one course. HTML, CSS, Javascript, Node, React, MongoDB and more!
- Host: GitHub
- URL: https://github.com/milovantomasevic/the-complete-2021-web-development-bootcamp
- Owner: MilovanTomasevic
- License: mit
- Created: 2021-04-22T19:27:11.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-05-11T18:25:01.000Z (over 4 years ago)
- Last Synced: 2025-03-26T21:38:02.917Z (7 months ago)
- Language: JavaScript
- Size: 8.16 MB
- Stars: 12
- Watchers: 1
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# The-Complete-2021-Web-Development-Bootcamp
Become a full-stack web developer with just one course. HTML, CSS, Javascript, Node, React, MongoDB and more!
### Certifications
- [Certificate](https://udemy.com/certificate/UC-3d48f525-6199-4ca5-ac77-82a5d9b1c1c2/)
### Awknowledgements
Course work and notes from Udemy Course by Dr. Angela Yu.
# Web Development Course Resources List
### Section 1: Front-End Web Development
* [Download the Course Syllabus](https://drive.google.com/uc?export=download&id=1uhCUGouBsclvAH8S9d-_Z9B5hKnKdCoR)
* [App Brewery Cornell Notes Template](https://drive.google.com/uc?export=download&id=1RfRLujREfLx1PSpw9bubNDsvRuknJ5ek)
* [Submarine Cable Map](https://www.submarinecablemap.com/)
* [Google Chrome Browser](https://www.google.co.uk/chrome/) (recommended)
[](https://atom.io/)
* [Atom Text Editor](https://atom.io/) (recommended)
* [List of Atom Plugins](https://docs.google.com/document/d/e/2PACX-1vQNuhDC5pFXEVVNGasvddKuDHEXnqR033lsSD5tLA9NiEdHrsYM4MXVEXja2RnBgsCxK6XEo6YkMOFI/pub)
* [VS Code Text Editor](https://code.visualstudio.com/) (good alternative)
* [VS Code Extensions](https://docs.google.com/document/d/e/2PACX-1vQDcdmrkjNPlOSeqS-v99P-57h5f7Yo3pszkko1sN6OtIVlNBFgTyeTX3A1mDSOdw1Ugb1l5o0NVy-a/pub)
### Section 2: Introduction to HTML
* [HTML Cheatsheet](https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf) by Stanford University
* Experiment with HTML code on [codepen.io](https://codepen.io/)
* [The Adventures of Sherlock Holmes](https://www.gutenberg.org/ebooks/1661) on Gutenberg.org
* [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements) on headings
* [W3Schools documentation](https://www.w3schools.com/html/html_headings.asp) on headings
* Alternative reference [devdocs.io](https://devdocs.io/)
* Use the [Wayback Machine](https://archive.org/web/) to find out what websites used to look like in the olden days
* Professor [Thomas H. Cormen's Personal Site](https://www.cs.dartmouth.edu/~thc/) (co-author of Introduction to Algorithms)
* Professor [John Kleinberg's Personal Site](http://www.cs.cornell.edu/home/kleinber/) (developed the HITS algorithm for web search)
* Professor Emeritus [Donald Knuth's Personal Site](https://www-cs-faculty.stanford.edu/~knuth/) (author of the Art of Computer Programming)
* Useful Atom [keyboard shortcuts](https://github.com/nwinkler/atom-keyboard-shortcuts)
* See what the emmet package can do on their [cheat sheet](https://docs.emmet.io/cheat-sheet/)
* List of [UTF-8 characters](https://www.fileformat.info/info/charset/UTF-8/list.htm)
* See encoding differences on Windows symbol charts (e.g., [Greek](https://msdn.microsoft.com/en-us/library/cc195055.aspx) vs [Arabic](https://msdn.microsoft.com/en-gb/library/cc195058.aspx) )
* See all unicode characters with a map on [unicode-table.com](https://unicode-table.com/en/)
* Joel Spolsky on [the absolute minimum any developer needs to know about unicode](https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses/)
* Difference between the HTML5 [emphasis vs italicise tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em#%3Ci%3E_vs._%3Cem%3E)
* Hyperlinks and [the Wikigame](https://thewikigame.com/)
* Stanford [HTML Cheatsheet](https://web.stanford.edu/group/csp/cs21/htmlcheatsheet.pdf)
* A beautiful example of an online CV [by Pascal Van Gemert](http://www.pascalvangemert.nl/#/experiences)
### Section 3: Intermediate HTML
* [Pascal Van Gemert's Online CV](http://www.pascalvangemert.nl/#/experiences)
* [MDN Table Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table)
* [MDN Form Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form)
* [MDN Input Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
* [Publish your website using Github Pages](https://pages.github.com/)
### Section 4: Introduction to CSS
* [Stanford CSS Cheatsheet](https://web.stanford.edu/group/csp/cs21/csscheatsheet.pdf)
* [Toasty Technology classic 90s Style Website](http://toastytech.com/evil/index.html)
* [Sean Halpin's beautiful personal website](http://seanhalpin.io/)
* [MDN documentation on background colour](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
* [Curated colour palettes on colorhunt.co](https://colorhunt.co/)
* [Colour palette used in lectures](https://colorhunt.co/palette/94114)
* [Table of named colours on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value)
* [Overview of default CSS applied by the browser](https://www.w3schools.com/cssref/css_default_values.asp)
* [MDN documentation on border-styles](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)
* [devdocs.io on CSS height](https://devdocs.io/css/height)
* [W3Schools documentation on CSS Text](https://www.w3schools.com/css/css_text.asp)
* Download the [Debugging Problem Starting Files](https://drive.google.com/uc?export=download&id=10wBjqLLB9Xt3JKFHGIcIzpV_t97Exokp)
* Download the [Bacon Fan Site Starting Files](https://drive.google.com/uc?export=download&id=1CNR9W363_uCrqJFN4NKEnDmZyDXNN9mv)
* [MDN CSS Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
* [Emojipedia broccoli emoji](https://emojipedia.org/broccoli/)
* [CSS Properties and Pseudoclasses Reference (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference)
* [MDN :hover Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
### Section 5: Intermediate CSS
* Sean Halpin's beautiful [personal website](http://seanhalpin.io/)
* [Create a Favicon with favicon.cc](https://www.favicon.cc/)
* [My colours from colorhunt](https://colorhunt.co/palette/14832)
* [Markus Vogl Interactive Box Model Demo](http://markusvogl.com/web1/interactive_box_model/css_box_demo.html)
* Download the [CSS-My Site Images](https://drive.google.com/uc?export=download&id=1lF3LFRt06ssrSyGrDPuzbDcLCyeQuQA5)
* [Is the img element block level or inline level?](https://stackoverflow.com/questions/2402761/is-img-element-block-level-or-inline-level)
* [MDN margin documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)
* [W3Schools documentation on Web Safe Fonts](https://www.w3schools.com/cssref/css_websafe_fonts.asp)
* [cssfontstack.com](https://www.cssfontstack.com/)
* [Google Fonts](https://fonts.google.com/)
* Download the [StubCode.html file](https://drive.google.com/file/d/1tVju_Zg1E9QlhwPU6hO-p3-7myAvwWau/view?usp=sharing)
* [Lorem Ipsum Generator](https://loremipsum.io/)
* [flaticon.com](https://www.flaticon.com/)
* [giphy.com](https://giphy.com/)
* [MDN CSS color property documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
* [MDN font-weight documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
* [css3buttongenerator.com](https://css3buttongenerator.com/)
* [Completed Personal Site Project](https://drive.google.com/uc?export=download&id=1FNwOPj-bWO66HO6dsJiBVvFu2dt57n91)
### Section 6: Introduction to Bootstrap 4
* [Codeply: Use Bootstrap in an Online Editor](https://www.codeply.com/)
* [Bootstrap Homepage](https://getbootstrap.com/)
* [Boostrap Examples](https://getbootstrap.com/docs/4.0/examples/)
* [How to Install Bootstrap](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
* [Submarine Cable Map](https://www.submarinecablemap.com/)
* [Websites featured on awwwards.com](https://www.awwwards.com/websites/com/)
* [Design patterns on ui-patterns.com](http://ui-patterns.com/patterns)
* [Websites on dribbble.com](https://dribbble.com/search/website)
* [Templates on sneakpeekit.com](https://sneakpeekit.com/)
* [Wireframing with balsamiq](https://balsamiq.cloud/)
* [Bootstrap Navbar](https://getbootstrap.com/docs/4.5/components/navbar/)
* [Bootstrap Colour names](https://getbootstrap.com/docs/4.5/components/buttons/)
* [Bootstrap NavBar Codeply](https://www.codeply.com/p/GVJU3ipWxP)
* [Bootstrap Grid Codeply](https://www.codeply.com/p/gGAW4KgOrL)
* [TinDog Starting Files](https://drive.google.com/uc?export=download&id=16zC2yFidTU0fBUNN0P3HVmKN5xiMKxNL)
* [Bootstrap Layout Grids](https://getbootstrap.com/docs/4.5/layout/grid/)
* [Google Fonts: Montserrat](https://fonts.google.com/specimen/Montserrat)
* [Google Fonts: Ubuntu](https://fonts.google.com/specimen/Ubuntu)
* [Bootstrap Containers](https://getbootstrap.com/docs/4.5/layout/overview/#containers)
* [Bootstrap Buttons](https://getbootstrap.com/docs/4.5/components/buttons/)
* [Apple Icon on Font Awesome](https://fontawesome.com/icons?d=gallery&q=apple)
* [Hint: CSS Transform Function](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function)
* Need sample text? Use a lorem ipsum generator: [loremipsum.io](https://loremipsum.io/)
### Section 7: Intermediate Bootstrap
* [Bootstrap Carousel](https://getbootstrap.com/docs/4.5/components/carousel/)
* [Bootstrap Card](https://getbootstrap.com/docs/4.5/components/card/)
* [Cards Pricing Example](https://getbootstrap.com/docs/4.5/examples/pricing/)
* [Bootsnipp.com Examples](https://bootsnipp.com/)
* [Download Stacking Order Flowchart](https://drive.google.com/uc?export=download&id=13Z1_Fgbh3QESIIoFpXUgo1F4sVjB9di2)
* [Z-Index Codeply Example](https://www.codeply.com/p/0fYVdrVmZM)
* [Mobile Friendly Test](https://search.google.com/test/mobile-friendly)
* [TinDog Completed Website Files](https://drive.google.com/uc?export=download&id=1GT2nLIp32IwMmqKgX0jYOylAmHLPE7iQ)
### Section 8: Web Design School - Create a Website that People Love
###
* [Penny Juice's Website](https://www.pennyjuice.com/)
* [Penny Juice Rebranded](https://www.behance.net/gallery/40393701/Penny-Juice-Rebrand)
* Curated colour palettes on [Color Hunt](https://colorhunt.co/)
* [Adobe Color Wheel](https://color.adobe.com/create)
* Design Challenges on [Daily UI](https://www.dailyui.co/)
* Page inspirations on [Collect UI](https://collectui.com/)
* Build a design using [canva.com](https://www.canva.com/)
### Section 9: Javascript
* [The History of Internet Explorer](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/dad7b1cb-2490-48a1-9959-3040a7e0cf27/ie6-comic-strip.jpg) Comic Strip
* Writing Good [Javascript Guidelines](https://github.com/rwaldron/idiomatic.js)
* [Karel Online IDE](http://stanford.edu/~cpiech/karel/ide.html)
### Section 10: Intermediate Javascript
* [Randomness](https://www.youtube.com/watch?v=GtOt7EBNEwQ) -video by Khan Academy
* [Why can't programmers program?](https://blog.codinghorror.com/why-cant-programmers-program/) A blog past from Coding Horror
* [Now that's what I call a Hacker.](https://www.jitbit.com/alexblog/249-now-thats-what-i-call-a-hacker/) The legendary story retold in English.
* [The original story](https://bash.im/quote/436725) from above link in Russian.
* [Fibonacci challenge Flow Chart](https://drive.google.com/file/d/1g8vVtqhSj44vcElfc-HK0nMbecteW8Yg/view?usp=sharing)
### Section 11: The Document Object Model (DOM)
* [HTML Tree Generator](https://chrome.google.com/webstore/detail/html-tree-generator/dlbbmhhaadfnbbdnjalilhdakfmiffeg)
* [Download the Starting Files to the DOM Challenge](https://drive.google.com/uc?export=download&id=1m1rPqbhasXu4QhI_S1jtsPsqEYiYix86)
### Section 12: Boss Level Challenge 1 - The Dicee Game
* [Download the Starting Files to the Dicee Challenge](https://drive.google.com/uc?export=download&id=1jVeyfctlACds5zBKiSquVBrCxfg4y68v)
* [Download the completed Dicee Challenge](https://drive.google.com/uc?export=download&id=1AcleoRQrY6Wo7KJI1jXt7ItNkYhKlH-g)
* [DOM Style Javascript property names](https://www.w3schools.com/jsref/dom_obj_style.asp)
### Section 13: Advanced Javascript and DOM Manipulation
* [Download the Starting Files to the Drum Kit](https://drive.google.com/uc?export=download&id=15mCNTdl76jPIG-T239u1XBEY81wrYy7Y)
* [Download the Completed Files to the Drum Kit](https://drive.google.com/uc?export=download&id=1zHXQ63LkBXX5_S8JUhwzjUUEVu-mWD_L)
### Section 16: The Unix Command Line
* [Download Hyper Terminal](https://hyper.is/)
* For Windows Users: [Download Git](https://git-scm.com/downloads)
* For Windows Users: [Hyper Configurations](https://gist.github.com/coco-napky/404220405435b3d0373e37ec43e54a23)
* [Learn enough command line to be dangerous](https://www.learnenough.com/command-line-tutorial)
### Section 18: Node.js
* [Download Node.js](https://nodejs.org/)
* [Node API Documentation](https://nodejs.org/api/)
* Node Documentation on [Exports & the Module Object](https://nodejs.org/api/modules.html#modules_the_module_object)
* MDN Docs on [Javascript Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
* Katacoda [NodeJS Playground](https://www.katacoda.com/courses/nodejs/playground)
### Section 19: Express.js with Node.js
* [Express Documentation](https://expressjs.com/)
* [List of HTTP Status Codes](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes)
### Section 20: APIs - Application Programming Interfaces
* [UK Police API Documentation](https://data.police.uk/docs/)
* [murdermap.co.uk](https://www.murdermap.co.uk/maps/london-homicide-map-2020/) uses the Police API to plot crime
* The [Kanye Rest](https://kanye.rest/) API Endpoint
* Parameters and Paths on the [SV443 Joke API](https://sv443.net/jokeapi/v2)
* [Postman](https://www.postman.com/downloads/) API Tool
* [OpenWeatherMap API](https://openweathermap.org/api)
* [W3Schools JSON vs. XML](https://www.w3schools.com/js/js_json_xml.asp)
* [The Rise and Rise of JSON](https://twobithistory.org/2017/09/21/the-rise-and-rise-of-json.html)
* [Chrome Browser Add-on Json Viewer Pro (Awesome was sold to another owner)](https://chrome.google.com/webstore/detail/json-viewer-pro/eifflpmocdbdmepbjaopkkhbfmdgijcc)
* Node [HTTPS Module](https://nodejs.org/api/https.html#https_https_get_url_options_callback) Docs
* [HTTP Status Codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status)
* [HTTP Status Dogs](https://httpstatusdogs.com/)
* [Criptii](https://cryptii.com/pipes/hex-to-text) Hexcadecimal Converter
* [Bootstrap Sign In Example](https://getbootstrap.com/docs/4.0/examples/sign-in/)
* Get the [Bootstrap CDN](https://getbootstrap.com/docs/4.3/getting-started/introduction/#starter-template)
* [Mailchimp Getting Started](https://mailchimp.com/developer/guides/get-started-with-mailchimp-api-3/)
* [Mailchimp API Reference](https://mailchimp.com/developer/reference/)
* [Mailchimp List Documentation](https://mailchimp.com/developer/reference/lists/#post_/lists/-list_id-)
* The [Boostrap Jumptron](https://getbootstrap.com/docs/4.3/components/jumbotron/)
* Deploy to [Heroku](https://www.heroku.com/)[](https://any-api.com/)
* [Heroku Node.js Documentation](https://devcenter.heroku.com/articles/getting-started-with-nodejs)
* Sign up to [our Newsletter](https://www.appbrewery.co/p/newsletter) (if you like)
### Section 21: Git, Github and Version Control
###
* **[Download Git for Windows and Mac](https://git-scm.com/downloads)**
* [Download the Git Cheatsheet](https://drive.google.com/uc?export=download&id=1QPRh5YmqQm4DFfitelPYlBTWC2I6tTTM)
* [Download the Git Quick Reference](https://drive.google.com/uc?export=download&id=18O19SefauXiJP4S9zRGsXX6I5hPmzrq-)
* [Gitignore and the absence of NPM Modules on GitHub Projects](https://github.com/contentful/the-example-app.nodejs)
### Section 22: EJS
* [app.js Starting File](https://drive.google.com/uc?export=download&id=1kzFMTVzlQoos1N5iege6dPkcok_5bZBP)
* [EJS documentation](http://ejs.co/) (e.g., on tags)
* [Documentation on var](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var)
* [Documentation on let](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
* [Documentation on const](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
* [Download styles.css for Todolist v1 App](https://drive.google.com/uc?export=download&id=1y5dsPlZSKAG8Xc-YZQO-biFbo96_9g3G)
### Section 23: Boss Level Challenge 3 - Blog Website
* [Starting files for the challenge](https://drive.google.com/uc?export=download&id=1DIvzgqNmtkYQD1dGHOBhPJKnmfAmG-Dc)
* [Completed Website Final Code](https://drive.google.com/uc?export=download&id=1uZvXZRZF8Ct728Nnsw4_UHVyQs4vDKfJ)
### Section 24: Databases
* Kristof Kovacs' [database comparison](https://kkovacs.eu/cassandra-vs-mongodb-vs-couchdb-vs-redis)
* A bit of context: [Internet Live Stats](http://www.internetlivestats.com/)
### Section 25: SQL
* W3Schools [on SQL](https://www.w3schools.com/sql/)
* SQL Playground on [sqliteonline.com](https://sqliteonline.com/#fiddle-5bbdbaef7288bo2ajn2wly03)
* [Data Types in SQL](https://www.w3schools.com/sql/sql_datatypes.asp)
* [Primary Keys in SQL](https://www.w3schools.com/sql/sql_primarykey.asp)
* [Foreign Keys in SQL](https://www.w3schools.com/sql/sql_foreignkey.asp)
* [Inner Joins](https://www.w3schools.com/sql/sql_join_inner.asp)
* [Completed SQL demo project](https://sqliteonline.com/#fiddle-5bbdc72f7288eo2ajn2yh604)
### Section 26: MongoDB
* [How to install MongoDB on Mac](https://blog.londonappbrewery.com/how-to-download-install-mongodb-on-mac-2895ccd2b5c1)
* [How to install MongoDB on Windows](https://medium.com/@LondonAppBrewery/how-to-download-install-mongodb-on-windows-4ee4b3493514)
* MongoDB [installation documentation for MacOS](https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/)
* [MongoDB Docs on CRUD operations](https://docs.mongodb.com/manual/crud/)
* [MongoDB Query Operators](https://docs.mongodb.com/manual/reference/operator/query/)
* [MongoDB Update Operations](https://docs.mongodb.com/manual/crud/#update-operations)
* MongoDB [NodeJS Driver](https://mongodb.github.io/node-mongodb-native/?jmp=docs)
### Section 27: Mongoose
* [Mongoose: an alternative to the native MongoDB driver](https://mongoosejs.com/)
* Mongoose [documentation on the Model](https://mongoosejs.com/docs/api.html#Model)
* Mongoose [documentation on data validation](https://mongoosejs.com/docs/validation.html)
### Section 28: Putting Everything Together
* [Todolist v2 starting files](https://drive.google.com/uc?export=download&id=1ScePzU_iszsmmf4Rd4rlCoL-H1TUohqh)
* Mongoose [findByIdAndRemove() method](https://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove)
* MDN on [inputs of type "hidden"](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden)
* Removing items from an array with [the MongoDB $pull operator](https://docs.mongodb.com/manual/reference/operator/update/pull/)
* How to [capitalise Strings using Lodash](https://lodash.com/docs/4.17.10#capitalize)
* [Todolist v2 completed web app](https://drive.google.com/uc?export=download&id=1I98mBXaH26WVDQwZ8jCLoHM37ptYbjkt)
### Section 28: Deploying Your Web Application
* Sign up and deploy a free cluster with [MongoDB Atlas](https://www.mongodb.com/download-center?jmp=nav)
* Heroku documentation on [getting started with NodeJS](https://devcenter.heroku.com/articles/getting-started-with-nodejs#prepare-the-app)
* [Deploying an existing application on Heroku](https://devcenter.heroku.com/articles/preparing-a-codebase-for-heroku-deployment)
### Section 30: Boss Level Challenge 4 - Blog Website Upgrade
* [Download the starting files](https://drive.google.com/uc?export=download&id=1aXNylQDvfVdCxjkl7iGO3fAgb-HRBfdY)
* [Download the Completed Project](https://drive.google.com/uc?export=download&id=1am4vubPmE5aTFwCI-UGxwDLiMs2GP6L9)
### Section 31: Build Your Own RESTful API from Scratch
* ExpressJS [Route Parameters](https://expressjs.com/en/guide/routing.html)
* [Lodash Utility Library](https://lodash.com/)
* [Chained Route Handlers Challenge Solution](https://drive.google.com/uc?export=download&id=1LukvDSxwlt7g8KkkLuv1DqSHwjRWjiGW)
* [Download the Completed Project](https://drive.google.com/uc?export=download&id=1yJVDK_qEddBHvDD_Scika_bWYRWEICwm)
### Section 32: Authentication & Security
* [Download the Starting Files](https://drive.google.com/uc?export=download&id=1U6tcos_A2rCGuMLdR0RZsDo_KI2_pf_t)
* [cryptii.com](http://cryptii.com)
* Numberphile Video on Enigma [Part 1](https://www.youtube.com/watch?v=G2_Q9FoD-oQ) and [Part 2](https://www.youtube.com/watch?v=V4V2bpZlqx8)
* [What are Rainbow Tables](https://security.stackexchange.com/questions/379/what-are-rainbow-tables-and-how-are-they-used)
* [How do Rainbow Tables Work?]( http://techshangrila.blogspot.com/2015/01/how-rainbow-table-works.html)
* [Bad Things Happen When You Don't Secure Your API Keys](https://www.theregister.co.uk/2015/01/06/dev_blunder_shows_github_crawling_with_keyslurping_bots/)
* [Developer AWS gets used by Litecoin miners](http://vertis.io/2013/12/16/unauthorised-litecoin-mining.html)
* [gitignore and directories](https://stackoverflow.com/questions/22924633/gitignore-is-not-ignoring-directories)
* MDN [Array forEach() loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)
* [Check if your password is compromised](https://haveibeenpwned.com/)
* [Plaintext Offenders](http://plaintextoffenders.com/)
* [Password Strength Checker](http://password-checker.online-domain-tools.com/)
* [Hacker Typer](http://hackertyper.com/)
* [Install NVM](https://github.com/creationix/nvm)
* [Passport](http://passportjs.org)
* [Google Developers](https://console.developers.google.com/apis/dashboard)
### Section 33: React.js
**Introduction to Code Sandbox**
[codesandbox.io](http://codesandbox.io)
**Introduction to JSX**
[START](https://codesandbox.io/s/introduction-to-jsx-h8ub1?fontsize=14&module=%2Fpublic%2Findex.html babeljs.io)
[END](https://codesandbox.io/s/introduction-to-jsx-oofqn?fontsize=14)
**JSX Code Practice**
[START](https://codesandbox.io/s/introduction-to-jsx-zp681?fontsize=14)
[END](https://codesandbox.io/s/jsx-code-challenge-completed-ot01f?fontsize=14)
**Javascript Expressions in JSX & ES6 Template Literals**
[START](https://codesandbox.io/s/javascript-expressions-in-jsx-llr3w)
[END](https://codesandbox.io/s/javascript-expressions-in-jsx-fmhnm?fontsize=14)
[Statements vs. Expressions](https://www.youtube.com/watch?v=WVyCrI1cHi8&list=PL-xu4i_QDSxcoDNeh8rx5-pHCCTOg0XsI)
**Javascript Expressions in JSX Practice**
[START](https://codesandbox.io/s/javascript-expressions-in-jsx-completed-1fde0?fontsize=14)
[END](https://codesandbox.io/s/javascript-expressions-in-jsx-practice-71uik?fontsize=14)
**JSX Attributes & Styling React Elements**
[START](https://codesandbox.io/s/javascript-expressions-in-jsx-practice-completed-ekgvl?fontsize=14)
[Standard HTML attributes](https://www.w3schools.com/tags/ref_standardattributes.asp)
[Lorem Picsum](https://picsum.photos/)
[END](https://codesandbox.io/s/jsx-attributes-and-styling-kkycr?fontsize=14)
**Inline Styling for React Elements**
[START](https://codesandbox.io/s/jsx-attributes-and-styling-completed-i1u11?fontsize=14)
[CSS Property List](https://www.w3schools.com/cssref/)
[END](https://codesandbox.io/s/inline-styling-in-jsx-159y7?fontsize=14)
**React Styling Practice**
[START](https://codesandbox.io/s/inline-styling-in-jsx-completed-zpc72?fontsize=14)
[END](https://codesandbox.io/s/react-styling-practice-xpn8u?fontsize=14)
**React Components**
[START](https://codesandbox.io/s/react-styling-practice-completed-mtf58?fontsize=14)
[Airbnb Style Guide for React](https://github.com/airbnb/javascript/tree/master/react)
[END](https://codesandbox.io/s/react-components-j66pt?fontsize=14)
**React Components Practice**
[START](https://codesandbox.io/s/react-components-3brog?fontsize=14)
[END](https://codesandbox.io/s/react-components-practice-completed-2ksvn?fontsize=14&hidenavigation=1&theme=dark)
**Javascript ES6 - Import, Export and Modules**
[START](https://codesandbox.io/s/es6-importexport-modules-2otbz?fontsize=14)
[Node require() vs ES6 import/export](https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export)
[END](https://codesandbox.io/s/es6-importexport-modules-enyxr?fontsize=14)
**Javascript ES6 Import, Export and Modules Practice**
[START](https://codesandbox.io/s/es6-importexport-practice-4j2p9?fontsize=14)
[END](https://codesandbox.io/s/es6-importexport-practice-h1f0g?fontsize=14)
**[ **Windows]** Local Environment Setup for React Development**
[Nodejs.org](http://Nodejs.org)
[VS Code](https://code.visualstudio.com/)
[Babel syntax highlighting for code editors](https://babeljs.io/docs/en/editors)
[Sublime Babel by Josh Peng - VSCode](https://marketplace.visualstudio.com/items?itemName=joshpeng.sublime-babel-vscode)
[Create a new react app](https://reactjs.org/docs/create-a-new-react-app.html)
[Where to get support if you get stuck](https://reactjs.org/community/support.html)
****[ **Mac]** Local Environment Setup for React Development****
[Nodejs.org](https://nodejs.org/)
[VS Code](https://code.visualstudio.com/)
[Babel syntax highlighting for code editors](https://babeljs.io/docs/en/editors)
[Sublime Babel by Josh Peng - VSCode](https://marketplace.visualstudio.com/items?itemName=joshpeng.sublime-babel-vscode)
[Create a new react app](https://reactjs.org/docs/create-a-new-react-app.html)
[Where to get support if you get stuck](https://reactjs.org/community/support.html)
**Keeper App Part 1 Challenge**
[START](https://codesandbox.io/s/keeper-app-part-1-completed-oplw1?fontsize=14)
**Keeper App Part 1 Solution**
[END](https://codesandbox.io/s/keeper-app-part-1-starting-l1pp6?fontsize=14)
**React Props**
[START](https://codesandbox.io/s/react-props-8xxq5?fontsize=14)
[END](https://codesandbox.io/s/react-props-gslmr?fontsize=14)
**React Props Practice**
[START](https://codesandbox.io/s/react-props-practice-4khpy?fontsize=14)
[END](https://codesandbox.io/s/react-props-practice-completed-c6fkx?fontsize=14)
**React DevTools**
[START](https://codesandbox.io/s/react-devtools-dk9gj?fontsize=14)
[Chrome React Dev Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
[Firefox React Dev Tools](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/)
[END](https://codesandbox.io/s/react-devtools-completed-wku4k?fontsize=14)
**Mapping Data to Components**
[START](https://codesandbox.io/s/mapping-components-81wml?fontsize=14)
[END](https://codesandbox.io/s/mapping-components-y6z4c?fontsize=14)
**Mapping **Data to Components** Practice**
[START](https://codesandbox.io/s/mapping-components-practice-6fkfr?fontsize=14)
[Emojimeanings.net](https://www.emojimeanings.net/list-smileys-people-whatsapp)
[The Description List Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
[END](https://codesandbox.io/s/mapping-components-practice-37h04?fontsize=14)
**Javascript ES6 Map/Filter/Reduce**
[START](https://codesandbox.io/s/mapping-components-practice-completed-h7sm6?fontsize=14)
[Filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
[Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)
[Reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)
[Find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
[FindIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findindex)
[Substring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring)
[END](https://codesandbox.io/s/mapfilterreduce-3sm6u?fontsize=14)
**Javascript ES6 Arrow functions**
[START](https://codesandbox.io/s/es6-arrow-functions-y8jhk?fontsize=14)
[Arrow Functions](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)
[END](https://codesandbox.io/s/es6-arrow-functions-gbtv7?fontsize=14)
**Keeper App Project - Part 2**
[START](https://codesandbox.io/s/keeper-app-part-2-b5w06)
[END](https://codesandbox.io/s/keeper-app-part-2-completed-4dr3p?fontsize=14&hidenavigation=1&theme=dark)
**React Conditional Rendering with the Ternary Operator & AND Operator**
[START](https://codesandbox.io/s/conditional-rendering-yfdes?fontsize=14&hidenavigation=1&theme=dark)
[Single Responsibility Principle](https://en.wikipedia.org/wiki/Single_responsibility_principle)
[Ternary Operator Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
[Using the Logical && in React](https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator)
[END](https://codesandbox.io/s/conditional-rendering-ovu1v?fontsize=14&hidenavigation=1&theme=dark)
**Conditional Rendering Practice**
[START](https://codesandbox.io/s/conditional-rendering-uzp9m?fontsize=14&hidenavigation=1&theme=dark)
[END](https://codesandbox.io/s/conditional-rendering-practice-78b21?fontsize=14&hidenavigation=1&theme=dark)
**State in React - Declarative vs. Imperative Programming**
[Demo END](https://codesandbox.io/s/introduction-to-state-completed-kzfro)
**React Hooks - useState**
[START](https://codesandbox.io/s/testground-wd3vs?fontsize=14&hidenavigation=1&theme=dark)
[useState() Docs](https://reactjs.org/docs/hooks-reference.html#usestate)
[END](https://codesandbox.io/s/usestate-hook-ylxqj?fontsize=14&hidenavigation=1&theme=dark)
**useState Hook Practice**
[START](https://codesandbox.io/s/usestate-hook-practice-k0g69?fontsize=14&hidenavigation=1&theme=dark)
[END](https://codesandbox.io/s/usestate-hook-practice-completed-t99f4)
**Javascript ES6 Object & Array Destructuring**
[START](https://codesandbox.io/s/es6-destructuring-ide4v?fontsize=14&hidenavigation=1&theme=dark)
[Javascript Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
****Javascript** ES6 Destructuring Challenge Solution**
**[END](https://codesandbox.io/s/es6-destructuring-zvjn9?fontsize=14&hidenavigation=1&theme=dark)
**
**Event Handling in React**
[START](https://codesandbox.io/s/event-handling-in-react-2tltl?fontsize=14&hidenavigation=1&theme=dark)
[HTML Event Attributes](https://www.w3schools.com/html/html_attributes.asp)
[END](https://codesandbox.io/s/event-handling-in-react-completed-61rti?fontsize=14)
**React Forms**
[START](https://codesandbox.io/s/react-forms-23oen?fontsize=14)
[Controlled Components in Forms](https://reactjs.org/docs/forms.html#controlled-components)
[END](https://codesandbox.io/s/react-forms-4vy2h?fontsize=14)
**Class Components vs. Functional Components**
[State and Lifecycle](https://reactjs.org/docs/state-and-lifecycle.html)
[Intro to Hooks](https://reactjs.org/docs/hooks-intro.html)
[Should I use Hooks, classes, or a mix of both?](https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both)
[Demo END](https://codesandbox.io/s/class-components-vs-hooks-m2lzf?fontsize=14&hidenavigation=1&theme=dark)
**Changing Complex State**
[START](https://codesandbox.io/s/changing-complex-state-ruz1e?fontsize=14&hidenavigation=1&theme=dark)
[Synthetic Events](https://reactjs.org/docs/events.html)
[END](https://codesandbox.io/s/changing-complex-state-3hyn7?fontsize=14&hidenavigation=1&theme=dark)
**Changing Complex State Practice**
[START](https://codesandbox.io/s/changing-complex-state-practice-8uqvh?fontsize=14&hidenavigation=1&theme=dark)
[END](https://codesandbox.io/s/changing-complex-state-practice-73221?fontsize=14&hidenavigation=1&theme=dark)
**Javascript ES6 Spread Operator**
[START](https://codesandbox.io/s/es6-spread-operator-fuc1n?fontsize=14&hidenavigation=1&theme=dark)
[Spread Syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
[JS ES6](https://stackoverflow.com/questions/11508463/javascript-set-object-key-by-variable?noredirect=1&lq=1)
[END](https://codesandbox.io/s/es6-spread-operator-3w3pp?fontsize=14&hidenavigation=1&theme=dark)
**Javascript ES6 Spread Operator Practice**
[START](https://codesandbox.io/s/es6-spread-operator-practice-qjpji?fontsize=14&hidenavigation=1&theme=dark)
[END](https://codesandbox.io/s/es6-spread-operator-practice-ecbsk?fontsize=14&hidenavigation=1&theme=dark)
**Managing a Component Tree**
[START](https://codesandbox.io/s/es6-spread-operator-practice-completed-mm4qj?fontsize=14&hidenavigation=1&theme=dark)
[Line Through CSS Property](https://www.w3schools.com/cssref/pr_text_text-decoration.asp)
[Generating unique ids with the UUID Package](https://www.npmjs.com/package/uuid)
[END](https://codesandbox.io/s/managing-a-component-tree-compeleted-cmb9l?fontsize=14&hidenavigation=1&theme=dark)
**Managing a Component Tree Practice**
[START](https://codesandbox.io/s/managing-a-component-tree-practice-2hzdh?fontsize=14&hidenavigation=1&theme=dark)
[END](https://codesandbox.io/s/managing-a-component-tree-practice-oe6y7?fontsize=14&hidenavigation=1&theme=dark)
**Keeper App Project - Part 3**
[START](https://codesandbox.io/s/keeper-part-3-starting-v3p0j)
[END](https://codesandbox.io/s/keeper-part-3-starting-pogqj?fontsize=14&hidenavigation=1&theme=dark)
**React Dependencies & Styling the Keeper App**
[START](https://codesandbox.io/s/keeper-part-3-starting-s13gn?fontsize=14&hidenavigation=1&theme=dark)
[Material UI Icons](https://www.npmjs.com/package/@material-ui/icons)
[Material UI Core](https://www.npmjs.com/package/@material-ui/core)
[Material UI Icons Documentation](https://material-ui.com/components/icons/)
[Material UI Floating Action Buttons](https://material-ui.com/components/buttons/#floating-action-buttons)
[Zoom Component Docs](https://material-ui.com/api/zoom/)
[Transparent Textures](https://www.transparenttextures.com/)
[END](https://codesandbox.io/s/using-pre-built-react-components-completed-58bxk?fontsize=14&hidenavigation=1&theme=dark)