🔥 The Complete Web Developer in 2020
Tags: react, javascript, html, css
Published: 2020-05-08 21:07:00

---
title:🔥 The Complete Web Developer in 2020
published: true
description: These are my personal notes in the ZTM Course, The Complete Web Developer in 2020.
tags: #react, #javascript, #html, #css
cover_image: https://codesandtags.github.io/blog/static/0c42bdee6c2a7e213cacc2b33ac3039c/a0304/hero.webp
---

As part of my personal training, I've decided to re force my knowledge in web development, so I bought one of the best courses (in my personal opinion), [The Complete Web Developer in 2020](https://academy.zerotomastery.io/p/complete-web-developer-zero-to-mastery?affcode=441520_49y0uhps) by [Andrei Neagoie](https://zerotomastery.io/about/instructor/andrei-neagoie/) and here are my notes. These notes are just the most relevant parts or resources for me, so I recommend you review the course for more details. If you want to read the original post, you can [review this link](https://codesandtags.github.io/blog/the-complete-web-developer-in-2020).

# 1. How the internet works
 - IP Address
 - ISP: Internet Service Provider
 - DNS: Domain Name Server
 - [Magical blue cable - The submarine cable map](https://www.submarinecablemap.com/)
 - [People think that data is in the cloud, but it’s not. It’s in the ocean](https://www.nytimes.com/interactive/2019/03/10/technology/internet-cables-oceans.html). 
 - [Video about how works the submarine cable in Spanish](https://www.youtube.com/watch?v=u1xxZ8r2rRc)
- [How the internet works? Well explained](https://www.youtube.com/playlist?list=PL2HX_yT71umAoRTnYD8wdfj70AEQj_EOI)

# 2. History of the Web
 - [Tim Berners-Lee](https://www.w3.org/People/Berners-Lee/) was working at CERN, and then in 1989 created the first approach of Internet [WWW](http://info.cern.ch/hypertext/WWW/TheProject.html)
 - [40 maps that explain internet](https://www.vox.com/a/internet-maps)
 - Some videos of Crash Course Computer Sciences Computer: [Networks](https://www.youtube.com/watch?v=3QhU9jd03a0&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=29), [Internet](https://www.youtube.com/watch?v=AEaKrq3SpW8&index=30&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo)  and the [World Wide Web](https://www.youtube.com/watch?v=guvsH5OFizE&index=31&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo) .

# 3. HTML
- [MDN Official](https://developer.mozilla.org/en-US/docs/Web) resources to review anything.
- Use the [Rubber Duck Technique](https://rubberduckdebugging.com/).
- [HTMLs Quizzes by w3schools](https://www.w3schools.com/html/exercise.asp)
- [Free codecamp exercises](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/) 

# 4. CSS
 - An awesome site which explains [how works the font types](https://www.supremo.co.uk/typeterms/)
 - One of the best resources is [CSS Tricks](https://css-tricks.com/)  and [CSS Tricks Almanacs](https://css-tricks.com/almanac/) for properties.
 - In this site you will understand [the balance and complement color](https://paletton.com/). 
 - CSS Selectors : start *, class, id, element, element nested, greater than, plus
 - What selectors win out in the cascade depends on? Specificity, Importance, Source order. [Specificity calculator](https://specificity.keegan.st/). 
 - [Game to practice](https://flukeout.github.io/) the specificity concepts.
 - [Google Fonts](https://fonts.google.com/).
 - [CSS Quizzes by w3schools](https://www.w3schools.com/css/css_quiz.asp).
 - [CSS Minifier](https://cssminifier.com/) to reduce the Critical Render Path. 
 - [Critical Render Path MDN](https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path) and [Critical rendering path explained](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=es).
 - Playing with [Froggy for Flexbox](http://flexboxfroggy.com/).
 - [Mastering Transitions and Transforms](https://thoughtbot.com/blog/transitions-and-transforms).
 - With [Can I Use](https://caniuse.com/) we can review if our attributes are supported by browsers.
 - Always [Playground for CSS](https://codepen.io/), Javascript and other Web stuffs with.

# Bootstrap and templates
 - To create landing pages and campaigns with [Mailchimp](https://mailchimp.com/)
 - [Animate CSS](https://daneden.github.io/animate.css/) 
 - [The Creative Tim Templates](https://www.creative-tim.com/)
 - [Mashup Free Templates](http://www.mashup-template.com/)
 - [Bootstrap Templates 1](https://startbootstrap.com/templates/) 
 - [Bootstrap Templates 2](https://mdbootstrap.com/freebies/) 
 - [Templates for startups](https://cruip.com/)

# CSS Grid and Flex
 - Flex is really useful if you have layout with one dimension, CSS Grid is useful when you have layouts with two dimensions (Row, Columns).
 - Despite CSS grid is not 100% supported in all browsers, the support is greater every time. [Can I Use CSS Grid](https://caniuse.com/#feat=css-grid) and [Can I Use Flexbox](https://caniuse.com/#feat=flexbox).
 - [CSS Grid cheat sheet](http://grid.malven.co/). 
 - [Game for CSS Grid](http://cssgridgarden.com/).
 - [CSS Grid Exercise 1 solution](https://codepen.io/codesandtags/pen/ZEbvjrB) 
 - [CSS Grid Exercise 2 solution](https://codepen.io/codesandtags/pen/eYpyPOb?editors=1100) 
 - [Site to get free illustrations](https://undraw.co/illustrations) for your projects.

# Career of Developer
 - [Glassdoor to get Reviews](https://www.glassdoor.com/Salaries/index.htm) and information about companies and salaries in the industry.
 - [Jetbrains research about the Developer Survey 2019](https://www.jetbrains.com/lp/devecosystem-2019/).
 - [Stackoverflow Developer Survey 2019](https://insights.stackoverflow.com/survey/2019).
 - [Stackoverflow Trends](https://insights.stackoverflow.com/trends?tags=reactjs%2Cangular%2Cvue.js). 
 - [Github Octoverse statistics](https://octoverse.github.com/).
 - [JavaScript Roadmap](https://hackernoon.com/the-2019-web-developer-roadmap-ab89ac3c380e). 
 - [State of salaries by Hired](https://hired.com/page/state-of-salaries).
 - Become in a Freelance in [Upwork](https://www.upwork.com/).
 - [Zero to Mastery Community](https://zerotomastery.io/community/).
 - [Front-End Learning path in ZTM](https://i.udemycdn.com/redactor/raw/2020-01-18_15-59-49-3ee1a8bf731b133914f2a795867a6238.jpg)
 - [CSS Grid generator](https://cssgrid-generator.netlify.app/) by Sarah Drasner
 
# JavaScript
 - [Eloquent JavaScript Ebook](https://eloquentjavascript.net/) 
 - [You don’t know JavaScript Series](https://github.com/getify/You-Dont-Know-JS)
 - [JavaScript modern tutorial](https://javascript.info/) 
 - [Data Structures](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Map): Arrays, Object, Map, Set, WeakMap, WeakSet
 - Playgrounds [Jsbin](https://jsbin.com/) [codepen](https://codepen.io/) 
 - [DOM === document](https://developer.mozilla.org/es/docs/DOM). 
 - [Document selector and performance](https://gomakethings.com/javascript-selector-performance/) 
 - [DOM event list](https://developer.mozilla.org/es/docs/Web/Events) 
 - [You might not need jQuery](http://youmightnotneedjquery.com/) 
 - The keyword this represents where the object is inside of.

# Advance JavaScript
 - [BabelJS](https://babeljs.io/) 
 - [Array Explorer with some examples](https://sdras.github.io/array-explorer/) by Sarah Drasner 
 - [Object explorer with some examples](https://sdras.github.io/object-explorer/) by Sarah Drasner 
 - [JavaScript Coercion](https://www.freecodecamp.org/news/js-type-coercion-explained-27ba3d9a2839/) and [JavaScript Equality Table](https://dorey.github.io/JavaScript-Equality-Table/).
 - Iterating: Arrays and Strings
 - Enumerating : Objects
 - JavaScript Engine Memory Heap: Limited
  memory (variables)
 - JavaScript Engine Call Stack: Allocates execution blocks and calls. 
 - To generate a Maximum call stack sized exceed. ```(function a() { a() })();```
 - To crash the browser : ```let drunk = []; while(true) { drunk.push['🍻'] }```
 - Call Stack, Web API, Callback Queue, Event Loop

# Command Line
 - [Oh My Zsh](https://ohmyz.sh/)
 - [Nice article to setup Oh My Zsh](https://medium.com/@ivanaugustobd/your-terminal-can-be-much-much-more-productive-5256424658e8)
 - [Some issues and solutions with fonts in Oh My Zsh](https://github.com/romkatv/powerlevel10k/issues/157)

# Git + Github + Open Source
 - [Pull Request](https://github.com/zero-to-mastery/start-here-guidelines/pull/5108#issuecomment-625023782) to become in contributor for ZTM in Github organization.
 - [Pull Request](https://github.com/zero-to-mastery/ZtM-Job-Board/pull/1100) to add my profile in the ZTM Board Job.
 - [Zero To Mastery Job Board](https://zero-to-mastery.github.io/ZtM-Job-Board/).
 - [Zero To Mastery Resources](https://github.com/zero-to-mastery/resources).
 - Create your [Developer Portoflio](https://github.com/cobidev/simplefolio) by @cobidev
 - [Github Corner logo](https://github.com/tholman/github-corners)  

# A Day in the life Developer
 - [JavaScript Weekly](https://javascriptweekly.com/) 
 - [CSS Weekly](https://css-weekly.com/) 
 - [Software Engineering Daily](https://softwareengineeringdaily.com/) 
 - [Product Hunt](https://www.producthunt.com/) 

# NPM Scripts
 - [Semantic Versioning Calculator](https://semver.npmjs.com/)

# React
 - [Atomic Design Concepts](https://bradfrost.com/blog/post/atomic-web-design/) for Web Components
 - [Virtual DOM vs DOM](https://es.reactjs.org/docs/faq-internals.html)
 - [React CHANGELOG](https://github.com/facebook/react/blob/master/CHANGELOG.md) 
 - [Create React App](https://github.com/facebook/create-react-app) 
 - [Tachyons](https://tachyons.io/) Create fast interfaces with few CSS 
 - [API Robot](https://robohash.org/) 
 - [React Fragment and semantic](http://blog.jmes.tech/react-fragment-and-semantic-html/)
 - Redux for management state, share data between containers and predictable using the 3 principles.
 - [3 Redux Principles](https://medium.com/swlh/redux-core-principles-explained-with-simple-terms-55988f34f9a0): Single source of true, state is read only, changes use pure functions.
 - **Redux action**: Something that user does.
 - **Redux reducer**: A pure function which update the state (immutable)
 - **Redux store**: An object which represents the single source of true
 - [Redux based on Architecture Flux pattern](https://facebook.github.io/flux/docs/in-depth-overview) 
 - Redux offers a way to replace the state and transform to props to the components.
 - To connect redux wieth react, it implements HoF (Hight order Functions)
 - [useState performance and good practices](https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) 
 - [React Router](https://reacttraining.com/react-router/web/guides/quick-start) 
 - [RamdaJs](https://ramdajs.com/), A practical functional library for JavaScript programmers.
 - [React Styled components](https://styled-components.com/), Use the best bits of ES6 and CSS to style your apps without stress 💅.
 - [React CSS Modules](https://github.com/css-modules/css-modules).
 - [Gatsby](https://www.gatsbyjs.org/), Fast in every way that matters.
 - [Semantic UI](https://semantic-ui.com/), User Interface is the language of the web.
 - [ImmutableJS](https://immutable-js.github.io/immutable-js/) collections for JavaScript.
 - [MDB](https://mdbootstrap.com/docs/react/) with React

# HTTP/JSON/AJAX + Asynchronous JavaScript
 - A great list for [Http Status Dog](https://httpstatusdogs.com/) and [Http Status Cat](https://http.cat/) and [Http Reference](https://www.w3schools.com/tags/ref_httpmessages.asp).
 - [Query Strings vs Query Params](https://medium.com/@fullsour/when-should-you-use-path-variable-and-query-parameter-a346790e8a6d)
 - [Why you require HTTPS](https://www.granite5.com/insights/use-https-vs-http-benefits-switching/) 
 - [JSON format](https://www.w3schools.com/js/js_json_intro.asp) and [JSON Reference](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON)) 
 - [JSONP](https://en.wikipedia.org/wiki/JSONP).
 - [AJAX](https://www.w3schools.com/js/js_ajax_intro.asp). 
 - [Fetch API](https://developer.mozilla.org/es/docs/Web/API/Fetch_API) and [Response Object](https://developer.mozilla.org/es/docs/Web/API/Response). 
 - [Promises](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise) has 3 states: Fulfilled, rejected, pending
 - [Async await looks syntactic sugar](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/funcion_asincrona). 
 - [ECMAScript update list with examples](https://github.com/daumann/ECMAScript-new-features-list)

# APIs
 - [JSON Place Holder](https://jsonplaceholder.typicode.com/) 
 - [Start Wars API](https://swapi.dev/) 
 - [Pokémon API](https://pokeapi.co/) 
 - [Twilio SMS API](https://www.twilio.com/docs/sms/api)
 - [Numbers API](http://numbersapi.com/)
 - [Chuck Norris API](https://api.chucknorris.io/)
 - [Open International Space API](http://open-notify.org/Open-Notify-API/ISS-Location-Now/)
 - [IBM API Speech to Text](https://www.ibm.com/cloud/watson-speech-to-text)
 - 🔥 [Public APIs XYZ](https://public-apis.xyz/)  

#Face Recognition Project
 - [Free Logos](https://iconos8.es/)
 - [Particles JS](https://vincentgarreau.com/particles.js/) and [Particles React](https://www.npmjs.com/package/react-particles-js)
 - [React Tilt](https://www.npmjs.com/package/react-tilt) 
 - [Clarifai Platform for AI](https://www.clarifai.com/)
 - [Clarifai Models](https://www.clarifai.com/models) 
 - [Face Detection Recognition Model](https://www.clarifai.com/models/face-detection-image-recognition-model-a403429f2ddf4b49b307e318f00e528b-detection) 
 - [Clarifai client for JavaScript](https://github.com/Clarifai/clarifai-javascript) 
 - [Example of project](https://codesandtags.github.io/face-recognition-brain/) 
 - [Firebase Auth Documentation Web](https://firebase.google.com/docs/auth/web/password-auth?hl=es) 
 - [Firebase Auth Update and get user](https://firebase.google.com/docs/auth/web/manage-users?hl=es-419#get_the_currently_signed-in_user) 
 - [Firebase Admin](https://firebase.google.com/docs/auth/admin/verify-id-tokens#web) 
 - [Article using Firebase and Authorization in NodeJs and Express](https://dev.to/emeka/securing-your-express-node-js-api-with-firebase-auth-4b5f)  
 - [Revoke token with Firebase](https://firebase.google.com/docs/auth/admin/manage-sessions?hl=es-419) 
 
# NodeJS + ExpressJS
 - [JavaScript Robotic and IoT](http://johnny-five.io/) 
 - [NodeJS Documentation](https://nodejs.org/es/docs/) 
 - [NodeJS Globals](https://nodejs.org/api/globals.html#globals_global) 
 - From the 12.12.x and higher the imports in NodeJS can use the ES6 way, instead of CommonJS.
 - Common libraries most used in NodeJS: fs, path, http, nodemon
 - [ExpressJS](http://expressjs.com/) 
 - Most used attributes in express request: body, params, query, headers.
 - Most used attributes in express response: status, send
 - Most used methods with fs : readFile, readFileSync, appendFile, writeFile, unlink
 - [Contest Happens every December](https://adventofcode.com/)

# Databases
 - Relational: MySQL, PostgreSQL, Oracle, MSSQL, Sybase, Derby, SQlite
 - Non Relational (NoSQL) : Redis, MongoDB, Cassandra, CouchDB, Apache HBASE, Rick
 - [SQL Query builder for JavaScript](http://knexjs.org/)
  
# Deployment
 - [Heroku Node JS](https://devcenter.heroku.com/articles/getting-started-with-nodejs) 
 - [Environment variables](https://nodejs.dev/how-to-read-environment-variables-from-nodejs)  
 - [Heroku deployment article](https://medium.com/quick-code/deploying-production-build-of-react-app-to-heroku-2548d8bf6936)

# Github Awesome Profiles

 * [Sindre Sorhus](https://github.com/sindresorhus) 
 * [Sarah Drasner](https://github.com/sdras)
 * [Andrei Neagoie](https://github.com/aneagoie)
 * [Edwin Torres](https://github.com/codesandtags)


PS: Would you like to learn how to do more of these types of things? If you’re new to learning to code, I recommend you join the ZTM community and start by taking [The Complete Web Developer course](https://academy.zerotomastery.io/p/complete-web-developer-zero-to-mastery?affcode=441520_49y0uhps).

Cheers and keep learning! 🍻