{"id":13404445,"url":"https://github.com/zero-to-mastery/complete-web-developer-manual","last_synced_at":"2025-06-29T23:04:34.873Z","repository":{"id":37664234,"uuid":"140389313","full_name":"zero-to-mastery/complete-web-developer-manual","owner":"zero-to-mastery","description":"All resources and notes from the Complete Web Developer in 2022: Zero to Mastery course","archived":false,"fork":false,"pushed_at":"2024-04-25T01:02:23.000Z","size":213,"stargazers_count":2275,"open_issues_count":5,"forks_count":935,"subscribers_count":213,"default_branch":"master","last_synced_at":"2024-07-31T19:44:04.248Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://zerotomastery.io/courses/coding-bootcamp/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zero-to-mastery.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-10T06:47:52.000Z","updated_at":"2024-07-31T19:32:30.000Z","dependencies_parsed_at":"2024-01-12T03:35:12.498Z","dependency_job_id":"32a2e5e0-9945-40b4-8f92-f8d57c8eb3c7","html_url":"https://github.com/zero-to-mastery/complete-web-developer-manual","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zero-to-mastery/complete-web-developer-manual","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2Fcomplete-web-developer-manual","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2Fcomplete-web-developer-manual/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2Fcomplete-web-developer-manual/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2Fcomplete-web-developer-manual/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zero-to-mastery","download_url":"https://codeload.github.com/zero-to-mastery/complete-web-developer-manual/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zero-to-mastery%2Fcomplete-web-developer-manual/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262680553,"owners_count":23347597,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T19:01:45.282Z","updated_at":"2025-06-29T23:04:34.815Z","avatar_url":"https://github.com/zero-to-mastery.png","language":null,"funding_links":[],"categories":["Others","For First Time Contributors:","Guides and Resources"],"sub_categories":[],"readme":"# Complete-Web-Developer-Manual\r\n\r\n\r\nAll resources and notes from the [Complete Web Developer: Zero to Mastery course](https://zerotomastery.io/courses/coding-bootcamp/?utm_source=github\u0026utm_medium=complete-web-developer-manual)\r\n\r\n******************************************************************************************\r\n##  __*Contents*__\r\n\r\n[ 1. *Introduction*](#01)\u003cbr\u003e\r\n[ 2. *How The Internet Works*](#02)\u003cbr\u003e\r\n[ 3. *History Of The Web*](#03)\u003cbr\u003e\r\n[ 4. *HTML 5*](#04)\u003cbr\u003e\r\n[ 5. *Advanced HTML 5*](#05)\u003cbr\u003e\r\n[ 6. *CSS*](#06)\u003cbr\u003e\r\n[ 7. *Advanced CSS*](#07)\u003cbr\u003e\r\n[ 8. *Bootstrap 4, Templates, And Building Your Startup Landing Page*](#08)\u003cbr\u003e\r\n[ 9. *CSS Grid + CSS Layout*](#09)\u003cbr\u003e\r\n[10. *Tailwind CSS*](#10)\u003cbr\u003e\r\n[11. *Career Of A Web Developer*](#11)\u003cbr\u003e\r\n[12. *Javascript*](#12)\u003cbr\u003e\r\n[13. *DOM Manipulation*](#13)\u003cbr\u003e\r\n[14. *Advanced Javascript*](#14)\u003cbr\u003e\r\n[15. *Command Line*](#15)\u003cbr\u003e\r\n[16. *Developer Environment*](#16)\u003cbr\u003e\r\n[17. *Git + Github + Open Source Projects*](#17)\u003cbr\u003e\r\n[18. *A Day In The Life Of A Developer*](#18)\u003cbr\u003e\r\n[19. *NPM + NPM Scripts*](#19)\u003cbr\u003e\r\n[20. *React.js + Redux*](#20)\u003cbr\u003e\r\n[21. *HTTP/JSON/AJAX + Asynchronous Javascript*](#21)\u003cbr\u003e\r\n[22. *Backend Basics*](#22)\u003cbr\u003e\r\n[23. *APIs*](#23)\u003cbr\u003e\r\n[24. *FINAL PROJECT: SmartBrain Front-End*](#24)\u003cbr\u003e\r\n[25. *Node.js + Express.js*](#25)\u003cbr\u003e\r\n[26. *FINAL PROJECT: SmartBrain Back-End -- Server*](#26)\u003cbr\u003e\r\n[27. *Databases*](#27)\u003cbr\u003e\r\n[28. *FINAL PROJECT: SmartBrain Back-End – Database*](#28)\u003cbr\u003e\r\n[29. *Production + Deployment*](#29)\u003cbr\u003e\r\n[30. *Where To Go From Here?*](#30)\u003cbr\u003e\r\n[31. *Bonus: Extra Bits (Coding Challenges + AMA)*](#31)\u003cbr\u003e\r\n[32. *Extra: For Windows Users*](#32)\u003cbr\u003e\r\n[33. *Bonus: Part 2 - Special Thank You Gift (Discount Coupons)*](#33)\u003cbr\u003e\r\n******************************************************************************************\r\n\r\n## \u003ca name =\"01\"\u003e\u003c/a\u003e1.\t__Introduction__\r\n\r\nDiscord Channel:\r\n*\t~~https://discord.gg/nVmbHYY~~ You will find it inside of the course\r\n******************************************************************************************\r\n\r\n## \u003ca name =\"02\"\u003e\u003c/a\u003e2.\t__How The Internet Works__\r\n\r\nTools:\r\n*\tChrome Developer Tools\r\n\r\nTopics:\r\n*\tISP, DNS and Servers\r\n*\tTraceroute (Windows: tracert)\r\n\r\nSubmarine Cable Map:\r\n*\thttps://www.submarinecablemap.com/\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"03\"\u003e\u003c/a\u003e3.\t__History Of The Web__\r\n\r\n### *Maps that explain the Internet:*\r\n*\thttps://www.vox.com/a/internet-maps\r\n\r\n### *First Webpage in the world:*\r\n*\thttp://info.cern.ch/hypertext/WWW/TheProject.html\r\n\r\n### *Optional Videos:*\r\n*\thttps://www.youtube.com/watch?v=3QhU9jd03a0\u0026list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo\u0026index=29\r\n*\thttps://www.youtube.com/watch?v=AEaKrq3SpW8\u0026list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo\u0026index=30\r\n*\thttps://www.youtube.com/watch?v=guvsH5OFizE\u0026list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo\u0026index=31\r\n\r\n******************************************************************************************\r\n\r\n## \u003ca name =\"04\"\u003e\u003c/a\u003e4. __HTML 5__\r\n\r\n\r\n### Run HTML online:\r\n* https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro\r\n* https://onecompiler.com/html\r\n\r\n### *Install a text editor (Select one):*\r\n*\thttps://www.sublimetext.com/\r\n*\thttps://atom.io/\r\n*\thttps://code.visualstudio.com/\r\n*\thttps://notepad-plus-plus.org/\r\n\r\n## **Tags:**\r\n\u003c!-- These are some HTML Tags --\u003e\r\n*\t`\u003chtml\u003e`\r\n*\t`\u003chead\u003e`\r\n*\t`\u003ctitle\u003e`\r\n*\t`\u003cbody\u003e`\r\n*\tHeadings (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`)\r\n*\tParagraph `\u003cp\u003e`\r\n*\tBold `\u003cstrong\u003e`, italic `\u003cem\u003e`\r\n*\tOrdered list `\u003col\u003e`, Unordered list `\u003cul\u003e`, List item`\u003cli\u003e`\r\n*\tBreak `\u003cbr\u003e`, Horizontal rule `\u003chr\u003e`\r\n*\tImage `\u003cimg\u003e` and Attributes: `alt`, `src`, `width`, `height`\r\n*\tAnchor `\u003ca href=\"\"\u003e`\r\n*       `\u003cdiv\u003e` for Division/Section\r\n\r\n## **Topics:**\r\n*\tRelative vs Absolute Path\r\n\r\n### Zero to Mastery resources:\r\n*\thttps://github.com/zero-to-mastery/complete-web-developer-manual\r\n*\thttps://github.com/zero-to-mastery/zero-to-mastery-captions\r\n\r\n### Reference websites:\r\n*\thttps://www.w3schools.com/\r\n*\thttps://developer.mozilla.org/en-US/\r\n*\thttps://stackoverflow.com/\r\n*\thttps://htmlreference.io/\r\n\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"05\"\u003e\u003c/a\u003e5.\t__Advanced HTML 5__\r\n\r\n\r\n### **Tags:**\r\n*\t`\u003cform\u003e`\r\n\t*\t`method`, `action`\r\n*\t`\u003cinput\u003e`:\r\n\t*\t`type`= `\"text\"`, `\"submit\"`, `\"reset\"`, `\"email\"`, `\"date\"`, `\"radio\"`, `\"checkbox\"`, `\"password\"`\r\n\t*\t`required`, `value`, `name`, `minlength`\r\n*\tdropdown `\u003cselect\u003e`\r\n\t*\toption `\u003coption\u003e`\r\n*\tcomment `\u003c!-- --\u003e`\r\n*\t`\u003cdiv\u003e` and `\u003cspan\u003e`\r\n\r\n### **Semantic Elements**\r\n*\t`\u003cheader\u003e`\r\n*\t`\u003cnav\u003e`\r\n*\t`\u003cmain\u003e`\r\n*\t`\u003cfooter\u003e`\r\n\r\n### **Topics:**\r\n*\tChrome view Source\r\n\r\n### **Resources:**\r\n*\thttps://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5\r\n*\thttps://waitbutwhy.com/\r\n\r\n\u003e \"__If you take one thing from this, it is this__: Don't worry if you don't feel 100% confident in HTML. Keep going as we will keep building on top of this knowledge.\"\r\n\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"06\"\u003e\u003c/a\u003e6.\t__CSS__\r\n\r\n### *Syntax:*\r\n```css\r\nSelector {\r\n\tproperty: value;\r\n}\r\n```\r\n\r\n### *How to:*\r\n*\tExternal\r\n\t```html\r\n\t\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"style.css\"\u003e\r\n\t```\r\n*\tInternal\r\n\t```html\r\n\t\u003cstyle\u003e\r\n\t\tbody {\r\n\t\t\tbackground-color: purple;\r\n\t\t}\r\n\t\u003c/style\u003e\r\n\t```\r\n*\tInline\r\n\t```html\r\n\t\u003cheader style=\"background-color: green;\"\u003e\r\n\t```\r\n* Class\r\n\t```html\r\n\t\u003cheader class=\"green\"\u003e\r\n\t```\r\n\t```css\r\n\t\t.green {\r\n\t\t\tbackground-color: green;\r\n\t\t}\r\n \t```\r\n### **Tools:**\r\n*\tChrome Inspector\r\n\r\n### **Properties:**\r\n*\ttext-align\r\n*\tborder\r\n*\tbackground\r\n*\tlist-style\r\n*\tcursor\r\n*\tdisplay: inline-block\r\n*\tcolor: hex, rgb or rgba\r\n\r\n### **Selectors:**\r\n*\t`.class`\r\n*\t`#id`\r\n*\t`*` (all elements)\r\n*\t`element`\r\n*\t`element, element`\r\n*\t`element element`\r\n*\t`element \u003e element`\r\n*\t`element + element`\r\n*\t`v:hover`\r\n*\t`:last-child`\r\n*\t`:first-child`\r\n*\t`::before` (pseudo-element)\r\n*\t`!important` (not recommended)\r\n\r\n### **Text Properties:**\r\n*\t`text-decoration`\r\n*\t`text-transform`\r\n*\t`line-height`\r\n*\t`font-style`\r\n*\t`font-weight`\r\n*\t`font-size`\r\n*\t`font-family`\r\n\r\n### **Layout Properties:**\r\n*\t`float` and `clear`\r\n\r\n### **Box Model:**\r\n*\t`margin`\r\n*\t`border`\r\n*\t`padding`\r\n*\t`width` and `height`\r\n\r\n### **Sizes:**\r\n*\t`px`\r\n*\t`em` and `rem`\r\n* `vw` and `vh` (viewport width and height)\r\n\r\n### **Topics:**\r\n*\tCascading: Specificity, Importance `!`, Source Order\r\n*\tLinking fonts and external stylesheets\r\n\r\n### **Exercises:**\r\n*\thttps://flukeout.github.io/\r\n\r\n### **Reference websites:**\r\n*\thttps://css-tricks.com/\r\n*\thttps://www.supremo.co.uk/typeterms/\r\n*\thttps://css-tricks.com/snippets/css/a-guide-to-flexbox/\r\n*\thttps://unsplash.com/\r\n*   https://developer.mozilla.org/es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia\r\n*\thttps://specificity.keegan.st/\r\n* \thttps://css-tricks.com/snippets/css/complete-guide-grid/\r\n*   https://css-diner.netlify.app/#\r\n*   https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/\r\n\r\n### **Website for color check:**\r\n*\thttp://paletton.com/\r\n*\thttps://coolors.co/\r\n\r\n### **Website for fonts download:**\r\n*\thttps://fonts.google.com/\r\n\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"07\"\u003e\u003c/a\u003e7.\t__Advanced CSS__\r\n\r\n### **Flexbox:**\r\n*\t`display: flex`\r\n*\t`flex-direction`\r\n*\t`flex-wrap`\r\n*\t`flex-flow`\r\n*\t`justify-content`\r\n*\t`align-items`\r\n*\t`align-content`\r\n*\t`order`\r\n*\t`flex`: `flex-grow`, `flex-shrink` and `flex-basis`\r\n*\t`align-self`\r\n\r\n### **Properties:**\r\n*\t`transition`\r\n*\t`transform`\r\n*\t`box-shadow`\r\n\r\n### **Tools:**\r\n*\tChrome Toggle Device\r\n*\thttps://codepen.io/\r\n\r\n### **Exercises:**\r\n*\thttp://flexboxfroggy.com/\r\n\r\n### **Reference websites:**\r\n*\thttps://caniuse.com/\r\n*\thttps://www.w3schools.com/cssref/css3_browsersupport.asp\r\n*\thttp://shouldiprefix.com/\r\n*\thttps://robots.thoughtbot.com/transitions-and-transforms\r\n*\thttps://darekkay.com/dev/flexbox-cheatsheet.html\r\n\r\n\u003e __If you take one thing from this, it is this__: Don't worry if you don't feel 100% confident in CSS. Keep going as we will keep building on top of this knowledge.\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"08\"\u003e\u003c/a\u003e8.\t__Bootstrap 4, Templates, And Building Your Startup Landing Page__\r\n\r\n\r\n### *App for creating users list:*\r\n*\thttps://mailchimp.com\r\n\r\n\r\n### *Website with animation examples:*\r\n*\thttps://animate.style/\r\n\r\n### *Website for patterns:*\r\n*\thttps://www.creative-tim.com/bootstrap-themes/ui-kit?direction=asc\u0026sort=price\r\n*\thttp://mashup-template.com/templates.html\r\n*\thttps://startbootstrap.com/template-categories/all/\r\n*\thttps://mdbootstrap.com/freebies/\r\n*\thttps://www.creative-tim.com/\r\n\r\n\r\n### *Generating animated patterns:*\r\n*\thttps://animate.style/\r\n\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"09\"\u003e\u003c/a\u003e9.\t__CSS Grid + CSS Layout__\r\n\r\n### *Grid Cheat Sheets:*\r\n*\thttp://grid.malven.co/\r\n* https://css-tricks.com/snippets/css/complete-guide-grid/\r\n\r\n### *Grid Garden:*\r\n*\thttps://cssgridgarden.com/\r\n\r\n### *Free Design resources:*\r\n*\thttps://interfacer.xyz/\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"10\"\u003e\u003c/a\u003e10.\t__Tailwind CSS__\r\n\r\n### *Reference websites:*\r\n*\thttps://tailwindcss.com/\r\n******************************************************************************************\r\n## \u003ca name =\"11\"\u003e\u003c/a\u003e11.\t__Career Of A Web Developer__\r\n\r\n### *Updated Statistics and Surveys 2020:*\r\n\r\n*\tState of JavaScript\r\n\t*\thttps://www.jetbrains.com/lp/devecosystem-2020/javascript/\r\n*\tState of Salaries\r\n\t*\thttps://hired.com/blog/highlights/2020-state-of-salaries-report/\r\n*\tDeveloper Salaries - Glassdoor\r\n\t*\thttps://www.glassdoor.ca/Salaries/san-francisco-front-end-developer-salary-SRCH_IL.0,13_IM759_KO14,33.htm\r\n*\tOctoverse Github\r\n\t*\thttps://octoverse.github.com/\r\n*\tStackoverflow Survey\r\n\t*\thttps://insights.stackoverflow.com/survey/\r\n  \r\nWeb Developer Roadmap:\r\n*\tPart 1: https://www.youtube.com/watch?v=57GuRoJ5Bfw\r\n*\tPart 2: https://www.youtube.com/watch?v=aeKQy_08fpk\r\n\r\nLearning Guideline Roadmap:\r\n*\thttps://zerotomastery.io/courses/#roadmap\r\n\r\nOnce you are Done with Learning, here is the list of best platforms for jobs and careers, which will help you get a great job or advace your career easily:\r\n*\thttps://ayedot.com/151/MiniBlog/Top-10-Best-Websites-for-Careers--Jobs\r\n\r\n******************************************************************************************\r\n\r\n## \u003ca name =\"12\"\u003e\u003c/a\u003e12.\t__Javascript__\r\n\r\n### *Javascript Data types:*\r\n*Primitive*\r\n\r\n1. Number\r\n2. String\r\n3. Boolean\r\n4. Undefined\r\n5. Null\r\n6. Symbol (new in ECMAScript 6) \r\n7. BigInt \r\n\r\n*Non-primitive*  \r\n\r\n8. Object (Array is not a special data types in JavaScript it belongs to the object data types)\r\n\r\n### *Javascript comparisons:*\r\n- \\!== (not equal to)\r\n- \\=== (equal to)\r\n- \\\u003e= (greater than or equal to)\r\n- \\\u003c= (less than or equal to)\r\n- \\\u003e (less than)\r\n- \\\u003c (greater than)\r\n\r\n### *Javascript variables:*\r\n- var\r\n- let (new in ECMAScript 6) : Used to declare variables that can be changed using code later on\r\n- const (new in ECMAScript 6) : Used to declare constants that remain constant throughout the execution of the program, mostly used for functions and object\r\n\r\n### *Javascript conditionals:*\r\n- if\r\n```javascript\r\nif(condition) {\r\n\t//Code written here is executed if condition is true\r\n}\r\n\r\n```\r\n- else\r\n```javascript\r\nif(condition1) {\r\n\t//Code written here is executed if condition1 is true\r\n} else {\r\n\t//Code written here is executed if condition is false\r\n}\r\n\r\n```\r\n- else if\r\n```javascript\r\nif(condition) {\r\n\t//Code written here is executed if condition1 is true\r\n} else if(condition) {\r\n\t//Code written here is executed if condition2 is true\r\n}\r\n\r\n```\r\n- ternary operator\r\n```javascript\r\ncondition ? (code that runs with condition is true) : (code that runs when condition is false);\r\n\r\n```\r\n- switch\r\n```javascript\r\nswitch(expression){\r\n\tcase result1:\r\n\t\t//code that runs if expression gives result1\r\n\t\tbreak;\r\n\tcase result2:\r\n\t\t//code that runs if expression gives result2\r\n\t\tbreak;\r\n\tdefault:\r\n\t\t//code that runs if expression gives neither result1 nor result2\r\n}\r\n\r\n```\r\n\r\n### *Javascript logical operators:*\r\n- \u0026\u0026 = Sees if both values are the same/`true`.\r\n- || = Sees if there is at least one of the same/ `true` value.\r\n- ! = Turns `true` into `false`, and `false` into `true`. \r\n\r\n### *Javascript functions:*\r\n- var a = function name() {}\r\n- function name() {}\r\n- return\r\n- () =\u003e (new in ECMAScript 6)\r\n\r\n### *Javascript data structures:*\r\n- Array\r\n- Object\r\n\r\n### *Javascript looping:*\r\n- for\r\n- while\r\n- do\r\n- forEach (new in ECMAScript 5)\r\n\r\n### *Javascript keywords:*\r\n- break\r\n- case\r\n- catch\r\n- class\r\n- const\r\n- continue\r\n- debugger\r\n- default\r\n- delete\r\n- do\r\n- else\r\n- export\r\n- extends\r\n- finally\r\n- for\r\n- function\r\n- if\r\n- import\r\n- in\r\n- instanceof\r\n- new\r\n- return\r\n- super\r\n- switch\r\n- this\r\n- throw\r\n- try\r\n- typeof\r\n- var\r\n- void\r\n- while\r\n- with\r\n- yield\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"13\"\u003e\u003c/a\u003e13.\t__DOM Manipulation__\r\n\r\n\r\n\r\n### *Reference websites:*\r\n*\thttps://developer.mozilla.org/en-US/docs/web/Events\r\n*\thttps://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes\r\n*\thttps://jquery.com/\r\n*\thttp://youmightnotneedjquery.com/\r\n*\thttps://babeljs.io/\r\n\r\n### *DOM Selectors:*\r\n\r\n- getElementsByTagName\r\n- getElementsByClassName\r\n- getElementById\r\n\r\n- querySelector\r\n- querySelectorAll\r\n\r\n- getAttribute\r\n- setAttribute\r\n\r\n### *Changing Styles:*\r\n- style.{property} //ok\r\n\r\n- className //best\r\n- classList //best\r\n\r\n- classList.add\r\n- classList.remove\r\n- classList.toggle\r\n\r\n### *Bonus:*\r\n- innerHTML //DANGEROUS\r\n\r\n- parentElement\r\n- children\r\n\r\nIt is important to CACHE selectors in variables\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"14\"\u003e\u003c/a\u003e14.\t__Advanced Javascript__\r\n\r\n### *Variable declaration:*\r\n+ `let variableName` (new in ECMAScript 6) /* its value can be altered\r\n+ `const variableName` (new in ECMAScript 6) /* it stands for constant, its value can't be altered once declared\r\n+ ``` `` ``` /* are used instead of `''` or `\"\"`. Allows us to avoid the \"+\" separation and elements and variables should be added with syntax `${element}`\r\n+ `a**b`  /* it stands for a to the b potence\r\n+ `element.padStart(param1,param2)` /* param1 number of characters param2 are added before the value of element declared. The default param2 is `\" \"`\r\n+ `.padEnd(param1,param2)` /* Same as above but at the end\r\n+ `.trimStart()` /* eliminates empty spaces from the start of a variable\r\n+ `.trimEnd()` /* Same as above but from the end\r\n+ `debugger;` /* Stops running the code and opens console for a step by step check\r\n\r\n### *Functions:*\r\n+ Function declaration syntax: `const functionname=(param1,param2...) =\u003e action` /* If there is an only return, there is no need to type \"return\" and if it's just one parameter, no need to add `\"()\"`\r\n+ Currying: `const functionname= param1 =\u003e param2 =\u003e action` /* To properly call function syntax is:  `functionname (param1)(param2)`\r\n+ Compose: `const functionname= (param2,param3) =\u003e param1 =\u003e param2(param3(param1))` /* Being param2 and 3 functions y param1 a value. Executes a function inside a function executed with the initial param1\r\n\r\n### *Arrays:*\r\n+ `array.forEach(num=\u003e{})` /* For each element num of the array, executes the actions inside {}\r\n+ `array.map(num=\u003e{})` /* For each element num in the array, executes actions inside {} and return needs to be specified since the return will be placed in a new array.\r\n+ `array.filter(num=\u003e{})` /* For each element num of the array a condition is checked. If the value turns out true, it will be added to the new array. If none of the elements meet the condition, it will return an empty array. Return needs to be specified\r\n+ `array.reduce((accumulator,num)=\u003e{}, param3)` /* Acumulates values of the operation performed in previous elements, param3 being the initial value of the accumulator\r\n+ `array.concat(param1)` /* Concats param1 to the array\r\n+ `array.includes('param1')` /* Verifies the array includes param1\r\n+ `array.flat(param1)` /* Eliminates the nested arrays to a param1 level\r\n+ `array.flatMap(param1=\u003e{})` /* For each element num, the operation inside {} is performed and the array is lowered to a level 1 nesting\r\n+ `array.fromEntries` /* Turns the array into an object, making the first element of the array the property and the second the value of such property\r\n\r\n### *Objects:*\r\n+ `const(/let) {property1, property2,...} = obj`  /* Given an object obj, keeps the value of the properties in new variables property1, property2,...etc\r\n+ `{...obj}` /* Creates a clone object of the object obj\r\n+ `Object.assign(param1,param2)` /* Clones the lements of an object param2 in an object param1\r\n+ `Object.values(obj)` /* Takes the values of the properties of an object obj\r\n+ `Object.entries(obj)` /* returns an array with property,value of each element of an object obj\r\n/* `.entries` and `.values` can be used with array methods such as `.map`, `.forEach`, etc.\r\n+ `this` /* when using this parameter, the method/action is applied exclusively to the element in which \"this\" has been summoned.\r\n\r\n### *Classes:*\r\n+ Class creator syntax: \r\n ```\r\n Classname {\r\n    constructor(param1,param2){\r\n      this.param1 = value;\r\n      this.param2 = value2;\r\n    }\r\n    classmethod(){\r\n    }\r\n }\r\n ```\r\n\r\n+ Create class object syntax: `new Classname(param1,param2)`\r\n\r\n+ Class extension syntax: \r\n ```\r\n Classextension extends Classname {\r\n    constructor(param1,param2){\r\n       super(param1,param2);\r\n    }\r\n    classextensionmethod(){\r\n    }\r\n }\r\n ```\r\n\r\n/* You utilize a class when we are planning to create several objects with similar properties\r\n/* A class extension is used when those several objects can contain properties or categories with specific properties and methods, while respecting the initial constructor.\r\n\r\n### *Loops:*\r\n+ for of: `for (param1 of array){}` /* It's a for loop in an array and an action over the element number param1 in an array array\r\n+ for in: `for (param1 in obj) {}` /* It's a for loop of the properties and an action over the property number param1 in an object obj\r\n\r\n /* both arrays and strings are iterable in JS \r\n /* for of cannot be used in objects, but for in can be used in arrays, you get the index number as a return\r\n\r\n### Extra Javascript Practice:\r\n\r\n* \u003chttps://github.com/getify/You-Dont-Know-JS\u003e  \r\n* \u003chttp://javascript.info/\u003e  \r\n* \u003chttp://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/\u003e\r\n******************************************************************************************\r\n## \u003ca name =\"15\"\u003e\u003c/a\u003e15. __Command Line__\r\n\r\n\r\n\r\n### **FOR MAC OR LINUX:**\r\n\r\n\r\n| Command                  | Description                                                                |\r\n| ------------------------ | -------------------------------------------------------------------------- |\r\n| ls                       | lists files and folders within working directory                           |\r\n| pwd                      | show current working directory                                             |\r\n| cd                       | change working directory to user directory                                 |\r\n| cd ..                    | change working directory to direct parent directory                        |\r\n| clear                    | clear current terminal screen                                              |\r\n| cd /                     | change current directory to root directory                                 |\r\n| cd ~                     | change current directory to user directory                                 |\r\n| cd path/to/folder        | changes working directory to specified path                                |\r\n| mkdir name               | create folder called 'name' within current directory                       |\r\n| open foldername          | opens folder called 'foldername' using OS GUI                              |\r\n| touch index.html         | creates new file titled index.html within working directory                |\r\n| open  index.html         | opens file named index.html using default system program                   |\r\n| open -a “Sublime Text”   | opens sublime text program. This syntax can be used to open other programs |\r\n| open .                   | opens and displays current folder within OS GUI                            |\r\n| mv index.html about.html | renames index.html file to about.html                                      |\r\n| up and down arrow        | cycles through previous commands typed within current terminal session     |\r\n| rm filename              | deletes a file called 'filename' within the current directory              |\r\n| rm -r foldername         | used to delete folders. In this case 'foldername' will be deleted          |\r\n| say hello (only on Mac)  | the mac will speak any text you enter after the 'say' keyword              |\r\n| rm -rf .git       \t   | To remove git repo created by init                                         |\r\n| {program name }          | allows you to execute a program by calling it's name. Eg. ```code```will   |\r\n|                          | open vscode. ```vlc``` will open vlc media player                          |\r\n### **FOR WINDOWS:**\r\n\r\n\r\n```cmd\r\ndir - list files\r\ncd {directory name} - change directory\r\ncd / - go to root (top) directory\r\ncd .. - go up a level\r\nmkdir {file name} - make a directory\r\necho \u003e {filename} - create an empty file\r\ndel {filename} - remove a file\r\nrmdir {directory name} - remove a directory and all files within\r\nrename {filename} {new filename} - rename a file or folder\r\nstart {filename} - open file in default program\r\nstart . - open current directory\r\nexit - exits the command prompt or a batch file\r\ncls - clear the terminal screen\r\ntype {filename} - displays the content of the file \r\n```\r\n\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"16\"\u003e\u003c/a\u003e16.\t__Developer Environment__\r\n\r\n### Popular code editors / IDE:\r\n* [Sublime Text 3](https://www.sublimetext.com/3)\r\n* [Visual Studio Code](https://code.visualstudio.com/)\r\n* [Atom](https://atom.io/)\r\n* [Brackets](http://brackets.io/)\r\n* [PhpStorm](https://www.jetbrains.com/phpstorm/)\r\n* [Codespace](https://codespace.app/download)\r\n\r\n### Development Environment Stack\r\n* [Homebrew](https://brew.sh/)\r\n* [Laragon](https://laragon.org/)\r\n* [Laravel Valet](https://laravel.com/docs/master/valet)\r\n* [XAMPP](https://www.apachefriends.org/index.html)\r\n* [Vagrant](https://www.vagrantup.com/)\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"17\"\u003e\u003c/a\u003e17.\t__Git + Github + Open Source Projects__\r\n\r\n### Install Git:\r\n*\thttps://www.atlassian.com/git/tutorials/install-git#windows\r\n*\thttps://www.atlassian.com/git/tutorials/install-git\r\n\r\n\r\n### Git GUI:\r\n*\thttps://desktop.github.com/\r\n* https://www.gitkraken.com/git-client\r\n* https://www.sourcetreeapp.com/\r\n\r\n### Git in one video\r\n* https://missing.csail.mit.edu/2020/version-control/\r\n* https://youtu.be/apGV9Kg7ics\r\n\r\n### Git and version control practice/learning playground\r\n* https://learngitbranching.js.org/\r\n\r\n### Git Commands:\r\n\r\n```\r\ngit clone “https:……”\r\ngit remote -v\r\ngit remote add url “https:……”\r\ngit remote add upstream “https:……”\r\ngit fetch upstream\r\ngit merge upstream/master\r\ngit status\r\ngit add “filename”\r\ngit add .\r\ngit commit –m ”message”\r\ngit commit -am \"commit message\"\r\ngit push\r\ngit push origin \"branchName\"\r\ngit pull\r\ngit branch\r\ngit branch “name”\r\ngit checkout “name”\r\ngit merge “name”\r\ngit diff\r\ngit diff \"fileName\"\r\ngit checkout -b \"name\"\r\ngit stash\r\n\r\n```\r\n\r\n\r\nOnce you are in your forked project directory in your command prompt....\r\n\r\n\r\n\r\n1.\tType git remote -v and press Enter. You'll see the current configured remote repository for your fork.\r\n\r\n\ta.\t```git remote -v```\r\n\r\n\r\n\tb.\t```origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)```\r\n\r\n\r\n\tc.\t```origin  https://github.com/YOUR_USERNAME/YOUR_FORK.git (push)```\r\n\r\n\r\n2.\tType git remote add upstream, and then paste the URL you would copy from the original repository if you were to do a git clone. Press Enter. It will look like this:\r\n\r\n\r\n\t```\r\n\tgit remote add upstream https://github.com/zero-to-mastery/PROJECT_NAME.git\r\n\t```\r\n\r\n\r\n3.\tTo verify the new upstream repository you've specified for your fork, type ```git remote -v``` again. You should see the URL for your fork as origin, and the URL for the original repository as upstream.\r\n\r\n\r\n4.\tNow, you can keep your fork synced with the upstream repository with a few Git commands.\r\n\tOne simple way is to do the below command from the master of your forked repository:\r\n```git pull upstream master```\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"18\"\u003e\u003c/a\u003e18.\t__A Day In The Life Of A Developer__\r\n******************************************************************************************\r\n\r\n*  https://www.weareadam.com/blog/2020/11/a-day-in-the-life-of-a-front-end-developer/\r\n*  https://www.nickang.com/2020-01-02-a-day-in-the-life-of-a-software-developer/\r\n******************************************************************************************\r\n## \u003ca name =\"19\"\u003e\u003c/a\u003e19.\t__NPM + NPM Scripts__\r\n\r\n\r\n```\r\nnpm init\r\nnpm install\r\nnpm install –g browserify\r\n```\r\n\r\nInstall node and npm:\r\n*\thttps://www.npmjs.com/get-npm\r\n*\thttps://nodejs.org/es/\r\n(Though with newer version of node, npm come pre-installed. So you don't need to do that separately)\r\n\r\nCheck node and npm installed on your system by:\r\n```\r\nnode -v\r\nnpm -v\r\n```\r\n* [Manage Multiple Versions of Node.js Using NVM](https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/)\r\n\r\nIf any of these command result in error then that (node/npm) deosen't installed on your system.\r\n\r\n\r\n\r\nReference websites:\r\n*\thttps://www.npmjs.com/\r\n*\thttps://www.npmjs.com/package/react\r\n*\thttps://lodash.com/\r\n\r\nIf you want to run multiple version of node on system then we can utlized Node version manager(nvm) \r\n\r\nInstall nvm :\r\n\r\n*\thttps://github.com/coreybutler/nvm-windows#installation--upgrades\r\n\r\n\r\nSteps to install NVM on local machine\r\n\r\n*\thttps://www.freecodecamp.org/news/nvm-for-windows-how-to-download-and-install-node-version-manager-in-windows-10/#followthestepsbelowtodownloadnvmwindows\r\n\r\n\r\nCheck  nvm installed on your system by:\r\n```\r\nnvm -v\r\n\r\n```\r\n\r\nCheck nvm list available on your system by:\r\n```\r\nnvm list \r\n\r\n```\r\n\r\nUse nvm version on your system by (nvm use with specify version of node):\r\n```\r\nnvm use 14.12.0\r\n\r\n```\r\n\r\n******************************************************************************************\r\n\r\n## \u003ca name =\"20\"\u003e\u003c/a\u003e20.\t__React.js + Redux__\r\n\r\nold version\r\n---\r\n```\r\nnpm install –g create-react-app\r\ncreate-react-app “name”\r\n[cd \"name\"]\r\nnpm start\r\nnpm install tachyons\r\n```\r\nnew version\r\n---\r\n```\r\nnpx create-react-app \u003cApp-Name\u003e\r\ncd \u003cApp-Name\u003e\r\nnpm start\r\n```\r\n\r\n\r\nWebsite for fonts download:\r\n*\thttp://www.cufonfonts.com/en\r\n\r\n\r\nReference websites:\r\n*\thttps://reactjs.org/docs/react-component.html\r\n*\thttps://jsonplaceholder.typicode.com/\r\n*\thttp://atomicdesign.bradfrost.com/\r\n*\thttps://robohash.org\r\n\r\nAction --\u003e Reducer --\u003e Store --\u003e Make changes\r\n\r\n```\r\nnpm install redux\r\nnpm install react-redux\r\nnpm install redux-logger\r\nnpm install redux-thunk\r\n```\r\n\r\n\r\n*\thttps://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en\r\n*\thttps://reacttraining.com/react-router/\r\n*\thttps://ramdajs.com/\r\n*\thttps://lodash.com\r\n*\thttps://glamorous.rocks\r\n*\thttps://www.styled-components.com\r\n*\thttps://github.com/css-modules/css-modules\r\n*\thttps://www.gatsbyjs.org\r\n*\thttps://zeit.co/blog/next5\r\n*\twww.material-ui.com/#/components/app-bar\r\n*\thttps://react.semantic-ui.com/elements/button\r\n*\thttps://github.com/reactjs/reselect\r\n*\thttps://redux-saga.js.org\r\n*\thttps://immutable-js.com/\r\n\r\n## Additional topics you could cover \r\n\r\nThis topic is just to understand greatness of modern-day frameworks and appreciate how react will be helpful for building single page applications(CSR) or server side rendering(using NextJs) and static site generation(using Gatsby). Have a look at them\r\n[Static Site Generation(SSG/Pre-rendering) vs Client side rendering(CSR/SPA) vs Server Side Rendering(SSR)](https://www.section.io/engineering-education/client-side-rendering-vs-server-side-rendering-vs-static-site-generation/)\r\n\r\n## Some Additional React Based Frameworks popular now\r\n\r\n* [Gatsby Js - A Static Site Generator](https://www.gatsbyjs.com/)\r\n* [Next Js](https://nextjs.org/)\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"21\"\u003e\u003c/a\u003e21.\t__HTTP/JSON/AJAX + Asynchronous Javascript__\r\n******************************************************************************************\r\n\r\nThere are many ways for making an API call, but the one I recommend using is Axios. \r\nHere is why [https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5]\r\n\r\nOther available options are Fetch API or G(old) XMLHttpRequests.\r\n\r\nAxios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser\r\nthat also supports the ES6 Promise API.\r\n\r\n### Features\r\n\r\n- Make [XMLHttpRequests](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) from the browser\r\n- Make [http](http://nodejs.org/api/http.html) requests from node.js\r\n- Supports the [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) API\r\n- Intercept request and response\r\n- Transform request and response data\r\n- Cancel requests\r\n- Automatic transforms for JSON data\r\n- Client side support for protecting against [XSRF](http://en.wikipedia.org/wiki/Cross-site_request_forgery)\r\n\r\n### Installing\r\n\r\nUsing npm:\r\n\r\n```bash\r\n$ npm install axios\r\n```\r\n\r\nUsing bower:\r\n\r\n```bash\r\n$ bower install axios\r\n```\r\n\r\nUsing yarn:\r\n\r\n```bash\r\n$ yarn add axios\r\n```\r\n\r\nUsing jsDelivr CDN:\r\n\r\n```html\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\nUsing unpkg CDN:\r\n\r\n```html\r\n\u003cscript src=\"https://unpkg.com/axios/dist/axios.min.js\"\u003e\u003c/script\u003e\r\n```\r\n### Reference websites:\r\n* \u003chttps://github.com/daumann/ECMAScript-new-features-list\u003e\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"22\"\u003e\u003c/a\u003e22.\t__Backend Basics__\r\n******************************************************************************************\r\n* https://nodejs.org/en/\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"23\"\u003e\u003c/a\u003e23. __APIs__\r\n******************************************************************************************\r\n*   https://explore.postman.com/\r\n*\thttps://stripe.com/docs/api\r\n*\thttps://www.twilio.com/docs/api/messaging/send-messages\r\n*\thttps://apilist.fun\r\n*\thttps://www.pexels.com/api/documentation/\r\n*   https://apihouse.now.sh/\r\n*   https://play.elevatorsaga.com\r\n*   https://publicapis.dev\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"24\"\u003e\u003c/a\u003e24.\t__FINAL PROJECT: SmartBrain Front-End__\r\n\r\n\r\nAnimated objects library:\r\n*\thttps://www.npmjs.com/package/react-tilt\r\n\t```\r\n\tnpm install –save react-tilt\r\n\t```\r\n\r\nBackground patterns:\r\n*\thttp://lea.verou.me/css3patterns/\r\n\r\n\r\nAnimated background library:\r\n*\thttps://particles.js.org/\r\n\r\n\t```\r\n\tnpm install react-tsparticles\r\n\t```\r\n\r\nImage and video recognition:\r\n*\thttps://clarifai.com/developer/guide/\r\n\t```\r\n\tnpm install clarifai\r\n\t```\r\nIcons library:\r\n*\thttps://icons8.com/icon\r\n*  https://fontawesome.com/v5.15/icons?d=gallery\u0026p=2\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"25\"\u003e\u003c/a\u003e25.\t__Node.js + Express.js__\r\n\r\nInstall Postman:\r\n*\thttps://www.getpostman.com/apps\r\n\r\nExpress.js:\r\n*\thttps://expressjs.com/en/api.html\r\n\r\n(Getting start guide)\r\n\r\n```\r\nnpm install body-parser\r\nnpm install express --save\r\nnpm install --save-dev nodemon\r\n```\r\n\r\nNode.js Reference websites:\r\n*\thttps://nodejs.org/en/\r\n*\thttps://nodejs.org/api/modules.html\r\n\r\nStoring passwords securely:\r\n```\r\nnpm install bcrypt-nodejs\r\n```\r\n*\thttps://www.npmjs.com/package/bcrypt-nodejs\r\n*\thttps://www.npmjs.com/package/argon2\r\n\r\n\r\n```\r\n$ npm install bcrypt\r\n```\r\n\r\n```jsx\r\n1.\t/*\r\n2.\t* You can copy and run the code below to play around with bcrypt\r\n3.\t* However this is for demonstration purposes only. Use these concepts\r\n4.\t* to adapt to your own project needs.\r\n5.\t*/\r\n6.\r\n7.\timport bcrypt from'bcrypt'\r\n8.\tconst saltRounds = 10 // increase this if you want more iterations\r\n9.\tconst userPassword = 'supersecretpassword'\r\n10.\tconst randomPassword = 'fakepassword'\r\n11.\r\n12.\tconst storeUserPassword = (password, salt) =\u003e\r\n13.\t  bcrypt.hash(password, salt).then(storeHashInDatabase)\r\n14.\r\n15.\tconst storeHashInDatabase = (hash) =\u003e {\r\n16.\t   // Store the hash in your password DB\r\n17.\t   return hash // For now we are returning the hash for testing at the bottom\r\n18.\t}\r\n19.\r\n20.\t// Returns true if user password is correct, returns false otherwise\r\n21.\tconst checkUserPassword = (enteredPassword, storedPasswordHash) =\u003e\r\n22.\t  bcrypt.compare(enteredPassword, storedPasswordHash)\r\n23.\r\n24.\r\n25.\t// This is for demonstration purposes only.\r\n26.\tstoreUserPassword(userPassword, saltRounds)\r\n27.\t  .then(hash =\u003e\r\n28.\t    // change param userPassword to randomPassword to get false\r\n29.\t    checkUserPassword(userPassword, hash)\r\n30.\t  )\r\n31.\t  .then(console.log)\r\n32.\t  .catch(console.error)\r\n```\r\n\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"26\"\u003e\u003c/a\u003e26.\t__FINAL PROJECT: SmartBrain Back-End -- Server__\r\n\r\n\r\nChange localhost:\r\n*\thttps://stackoverflow.com/questions/40714583/how-to-specify-a-port-to-run-a-create-react-app-based-project\r\n\r\nIf you don't want set environment variable, other option - modify scripts part of package.json from:\r\n\r\n```\"start\": \"react-scripts start\"```\r\n\r\nLinux (tested on Ubuntu 14.04/16.04) and MacOS (tested by @aswin-s on MacOS Sierra 10.12.4) to:\r\n\r\n```\"start\": \"PORT=3006 react-scripts start\"```\r\n\r\nor (maybe) more general solution by @IsaacPak to:\r\n\r\n```\"start\": \"export PORT=3006 react-scripts start\"```\r\n\r\nWindows @JacobEnsor solution to:\r\n\r\n```\"start\": \"set PORT=3006 \u0026\u0026 react-scripts start\"```\r\n\r\n\r\nFront-end and back-end connection:\r\n*\thttps://www.npmjs.com/package/cors\r\n\t```\r\n\tnpm install cors\r\n\t```\r\n\r\nFront-end:\r\n\r\n```Javascript\r\nfetch('http://localhost:3000/image', {\r\n\tmethod: 'put',\r\n\theaders: {'Content-Type': 'application/json'},\r\n\tbody: JSON.stringify({\r\n\t\tid: this.state.user.id\r\n\t})\r\n})\r\n.then(response =\u003e response.json())\r\n.then(count =\u003e {\r\n\tthis.setState(Object.assign(this.state.user, { entries:count}))\r\n})\r\n```\r\nBack-end:\r\n\r\n```Javascript\r\nconst cors = require('cors')\r\napp.use(cors());\r\n```\r\n### Resource: CORS\r\n* \u003chttps://en.wikipedia.org/wiki/Same-origin_policy\u003e\r\n* \u003chttps://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\u003e\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"27\"\u003e\u003c/a\u003e27.\t__Databases__\r\n\r\n\r\nInstall PostgreSQL:\r\n\r\n*\thttp://www.psequel.com/\r\n\r\n\ten el terminal:\r\n\t```zsh\r\n\tbrew update\r\n\tbrew doctor\r\n\tbrew install postgresql\r\n\tbrew services start postgresql\r\n\tbrew services stop postgresql\r\n\tcreatedb ‘test’\r\n\tpsql ‘test’\r\n\t```\r\n\r\n\tfor windows:\r\n\r\n*\thttps://www.pgadmin.org/download/pgadmin-4-windows/\r\n*\thttp://www.postgresqltutorial.com/install-postgresql/\r\n\r\n\t```cmd\r\n\t@powershell -NoProfile -ExecutionPolicy unrestricted -Command \"iex ((new-object net.webclient).DownloadString('https://s3.amazonaws.com/pgcentral/install.ps1'))\"\r\n\r\n\tcd bigsql\r\n\tpgc install pg10\r\n\tpgc start pg10\r\n\t```\r\n*\thttp://dc-apuntes.blogspot.com/2016/04/comandos-postgres-desde-cmd-windows.html\r\n*\thttps://www.w3resource.com/PostgreSQL/connect-to-postgresql-database.php\r\n*\thttps://www.youtube.com/watch?v=fD7x8hd9yE4\r\n\r\ndata types\r\n*\thttps://www.techonthenet.com/postgresql/datatypes.php\r\n\r\nTerminal commands for windows:\r\n\r\nLogin: (-U usuario)\r\n\r\n\tpsql -h localhost -U postgres\r\n\r\nCreate database:\r\n\r\n\tcreate database database_name;\r\n\r\nShow all datatables:\r\n\r\n\t\\l\r\n\r\nCreate a user:\r\n\r\n\tcreate user moni with password ‘moni’;\r\n\r\nDelete a database:\r\n\r\n\tdrop database database_name;\r\n\r\nConnect to a database:\r\n\r\n\t\\c database_name;\r\n\r\nCreate a schema:\r\n\r\n\tcreate schema friends;\r\n\r\nCreate a table:\r\n\r\n\tcreate table Friends.test( firstname CHAR(15), lastname CHAR(20));\r\n\r\n\tcreate table Friends.login(id serial not null primary key, secret varchar (100) not null, name text unique not null, entries bigint default 0, joined timestamp not null);\r\n\r\nShow all information of a table:\r\n\r\n\tselect * from friends.test;\r\n\r\nDescribe database:\r\n\r\n\t\\d friends.test\r\n\r\nInsert data:\r\n\r\n\tinsert into friends.test values( ‘Mike’, ‘Smith’);\r\n\r\n\tinsert into friends.test (firstname, lastname )values( ‘Sally’, ‘Jones’);\r\n\r\nAdd a column to an existing table:\r\n\r\n\talter table Friends.test add age smallint;\r\n\r\nUpdate data from the table:\r\n\r\n\tupdate friends.test set age = 25 where firstname= ‘Mike’;\r\n\r\nDelete data from the table:\r\n\r\n\tdelete from friends.test where firstname = ‘Mike’;\r\n\r\nDelete column from a table:\r\n\r\n\talter table friends.test drop column age;\r\n\r\nDelete a table:\r\n\r\n\tdrop table friends.test;\r\n\r\nFunctions:\r\n\r\n\tselect avg(age) from friends.test;\r\n\r\nJoin tables:\r\n\r\n\tselect * from friends.test join friends.login on friends.test.firstname = friends.login.name;\r\n\r\nExit:\r\n\r\n\t\\q\r\n\r\nList all users in postgresSQL database server:\r\n\r\n\t\\du\r\n\r\nList all tables in a schema:\r\n\r\n\t\\d+ schema_name.*\r\n\r\nList all tables in a database:\r\n\r\n\t\\dt *.*\r\n\r\nList a table in a schema:\r\n\r\n\t\\d+ schema_name . table_name\r\n\r\nShow description of a table, columns, type, modifications, etc.:\r\n\r\n\t\\d+ table_name\r\n\r\nCreate a backup of a database:\r\n\r\n\tpg_dump -h localhost -U postgres database_name \u003e database_name.sql\r\n\r\nRestore a database: 1. Create a new database where the restore file is going to be placed:\r\n\r\n\tpsql -U postgres -d new_database_name -f respaldo.sql\r\n\r\n\t*Note:  it is important to create the restore in the same root where the database copy is saved.\r\n\r\nEnter to postgres with a user different to postgres:\r\n\r\n\tpsql -h localhost -d postgres -U usuario\r\n\r\nEnter to a database with a different user:\r\n\r\n\tpsql -h localhost -d nombre_base -U nombre_usuario\r\n\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"28\"\u003e\u003c/a\u003e28.\t__FINAL PROJECT: SmartBrain Back-End – Database__\r\n\r\n\r\nTool for db connection with back-end:\r\n*\thttps://knexjs.org/\r\n*\thttps://knexjs.org/#Installation-node\r\n*\thttps://github.com/vitaly-t/pg-promise\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"29\"\u003e\u003c/a\u003e29.\t__Production + Deployment__\r\n\r\n\r\nEnvironmental variables:\r\n*\thttp://www.dowdandassociates.com/blog/content/howto-set-an-environment-variable-in-windows-command-line-and-registry/\r\n\r\n### PORT\r\n\r\nOn terminal:\r\n\r\n\tbash\r\n\t--\u003ePORT-3000 node server.js\r\n\r\nOn server.js:\r\n```JSX\r\n\tconst PORT = process.env.PORT\r\n\tapp.listen(PORT, ()=\u003e{\r\n\t\tconsole.log(`app is running on port ${PORT}`);\r\n\t})\r\n```\r\n\r\n### DATABASE\r\n\r\nOn terminal:\r\n\r\n\tbash\r\n\t--\u003eDATABASE_URL-123  node server.js\r\n\r\nOn server.js:\r\n\r\n```jsx\r\n\tconst DATABASE_URL = process.env. DATABASE_URL\r\n\tapp.listen(3000, ()=\u003e{\r\n\t\tconsole.log(`app is running on port ${ DATABASE_URL }`);\r\n\t})\r\n```\r\n\r\n### OTHER OPTION\r\n\r\nOn terminal:\r\n\r\n\tfish\r\n\t--\u003eenv DATABASE_URL-‘hello’ node server.js\r\n\r\nDeploy apps/websites:\r\n\r\nGithub Pages:\r\n\r\n* Mostly now Github is free for all students and Github pages can serve static sites\r\n* Also have a look at Github education pack using your Institute id and email and get access to free domains for a year and many more [Github education pack](https://education.github.com/pack)\r\n\r\nHeroku:\r\n\r\n*\thttps://www.heroku.com/\r\n*\thttps://devcenter.heroku.com/articles/git\r\n\r\nNot the best one:\r\n*\thttps://www.hostgator.com/promo/snappy60?utm_source=google\u0026utm_medium=brandsearch\u0026kclickid=cfe89874-3c6a-404e-b321-fc3e56f9ec2b\u0026gclid=CjwKCAjwsJ3ZBRBJEiwAtuvtlIkFb-qOw3HN_JpH3AAkmYwKhk_L0y0stl7J1CFRR8FRltvmvhwXPBoCATIQAvD_BwE\r\n\r\n\r\n\r\nCommands for heroku on backend folder:\r\nInstall heroku:\r\n```\r\nnpm install -g heroku\r\nheroku login\r\nheroku create\r\n```\r\nIn the terminal there will be a URL : ” https://limitless-bastion-10041.herokuapp.com/”\r\n```\r\ngit remote –v\r\ngit push origin master\r\nheroku git: remote –a limitless-bastion-10041\r\n```\r\n\r\nChanges required in:\r\n\r\n*\tBACK END: PORT in server.js needs to be changed by an environment variable\r\n*\tFRONT END: fetch URL needs to be changed by the URL of HEROKU + “:3000”\r\n\r\n```\r\ngit push heroku master\r\nfor checking errors:\r\nheroku logs --tail\r\nheroku open\r\n```\r\n\r\n\r\nConnect to pg database:\r\n*\thttps://devcenter.heroku.com/articles/heroku-postgresql\r\n*\thttps://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER_ConnectToPostgreSQLInstance.html\r\n*\thttps://msdn.microsoft.com/en-us/library/ms175043(v=sql.120).aspx#SSMSProcedure\r\n\r\nCreate a new postgres database using Heroku:\r\n\r\nData: Heroku postgres: create new: install heroku postgres: select the app created\r\n```\r\nheroku addons\r\nheroku info\r\nheroku pg:psql\r\n```\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"30\"\u003e\u003c/a\u003e30.\t__Where To Go From Here?__\r\n******************************************************************************************\r\n\r\n[The Complete Junior to Senior Web Developer Roadmap](https://academy.zerotomastery.io/p/the-complete-junior-to-senior-web-developer-roadmap?utm_source=github\u0026utm_medium=complete-web-developer-manual)\r\n\r\n******************************************************************************************\r\n## \u003ca name =\"31\"\u003e\u003c/a\u003e31.\t__Bonus: Extra Bits (Coding Challenges + AMA)__\r\n******************************************************************************************\r\n******************************************************************************************\r\n## \u003ca name =\"32\"\u003e\u003c/a\u003e32.\t__Extra: For Windows Users__\r\n******************************************************************************************\r\n******************************************************************************************\r\n## \u003ca name =\"33\"\u003e\u003c/a\u003e33.\t__Bonus: Part 2 - Special Thank You Gift (Discount Coupons)__\r\n******************************************************************************************\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzero-to-mastery%2Fcomplete-web-developer-manual","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzero-to-mastery%2Fcomplete-web-developer-manual","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzero-to-mastery%2Fcomplete-web-developer-manual/lists"}