🔥 The Complete Web Developer in 2020

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 by 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.

1. How the internet works

• IP Address
• ISP: Internet Service Provider
• DNS: Domain Name Server
• Magical blue cable - The submarine cable map
• People think that data is in the cloud, but it’s not. It’s in the ocean.
• Video about how works the submarine cable in Spanish
  • How the internet works? Well explained

2. History of the Web

• Tim Berners-Lee was working at CERN, and then in 1989 created the first approach of Internet WWW
• 40 maps that explain internet
• Some videos of Crash Course Computer Sciences Computer: Networks, Internet and the World Wide Web .

3. HTML

• MDN Official resources to review anything.
• Use the Rubber Duck Technique.
• HTMLs Quizzes by w3schools
• Free codecamp exercises

4. CSS

• An awesome site which explains how works the font types
• One of the best resources is CSS Tricks and CSS Tricks Almanacs for properties.
• In this site you will understand the balance and complement color.
• 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.
• Game to practice the specificity concepts.
• Google Fonts.
• CSS Quizzes by w3schools.
• CSS Minifier to reduce the Critical Render Path.
• Critical Render Path MDN and Critical rendering path explained.
• Playing with Froggy for Flexbox.
• Mastering Transitions and Transforms.
• With Can I Use we can review if our attributes are supported by browsers.
• Always Playground for CSS, Javascript and other Web stuffs with.

Bootstrap and templates

• To create landing pages and campaigns with Mailchimp
• Animate CSS
• The Creative Tim Templates
• Mashup Free Templates
• Bootstrap Templates 1
• Bootstrap Templates 2
• Templates for startups

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 and Can I Use Flexbox.
• CSS Grid cheat sheet.
• Game for CSS Grid.
• CSS Grid Exercise 1 solution
• CSS Grid Exercise 2 solution
• Site to get free illustrations for your projects.

Career of Developer

• Glassdoor to get Reviews and information about companies and salaries in the industry.
• Jetbrains research about the Developer Survey 2019.
• Stackoverflow Developer Survey 2019.
• Stackoverflow Trends.
• Github Octoverse statistics.
• JavaScript Roadmap.
• State of salaries by Hired.
• Become in a Freelance in Upwork.
• Zero to Mastery Community.
• Front-End Learning path in ZTM
• CSS Grid generator by Sarah Drasner

JavaScript

• Eloquent JavaScript Ebook
• You don’t know JavaScript Series
• JavaScript modern tutorial
• Data Structures: Arrays, Object, Map, Set, WeakMap, WeakSet
• Playgrounds Jsbin codepen
• DOM === document.
• Document selector and performance
• DOM event list
• You might not need jQuery
• The keyword this represents where the object is inside of.

Advance JavaScript

• BabelJS
• Array Explorer with some examples by Sarah Drasner
• Object explorer with some examples by Sarah Drasner
• JavaScript Coercion and 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
• Nice article to setup Oh My Zsh
• Some issues and solutions with fonts in Oh My Zsh

Git + Github + Open Source

• Pull Request to become in contributor for ZTM in Github organization.
• Pull Request to add my profile in the ZTM Board Job.
• Zero To Mastery Job Board.
• Zero To Mastery Resources.
• Create your Developer Portoflio by @cobidev
• Github Corner logo

A Day in the life Developer

• JavaScript Weekly
• CSS Weekly
• Software Engineering Daily
• Product Hunt

NPM Scripts

• Semantic Versioning Calculator

React

• Atomic Design Concepts for Web Components
• Virtual DOM vs DOM
• React CHANGELOG
• Create React App
• Tachyons Create fast interfaces with few CSS
• API Robot
• React Fragment and semantic
• Redux for management state, share data between containers and predictable using the 3 principles.
• 3 Redux Principles: 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
• 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
• React Router
• RamdaJs, A practical functional library for JavaScript programmers.
• React Styled components, Use the best bits of ES6 and CSS to style your apps without stress 💅.
• React CSS Modules.
• Gatsby, Fast in every way that matters.
• Semantic UI, User Interface is the language of the web.
• ImmutableJS collections for JavaScript.
• MDB with React

HTTP/JSON/AJAX + Asynchronous JavaScript

• A great list for Http Status Dog and Http Status Cat and Http Reference.
• Query Strings vs Query Params
• Why you require HTTPS
• JSON format and JSON Reference)
• JSONP.
• AJAX.
• Fetch API and Response Object.
• Promises has 3 states: Fulfilled, rejected, pending
• Async await looks syntactic sugar.
• ECMAScript update list with examples

APIs

• JSON Place Holder
• Start Wars API
• Pokémon API
• Twilio SMS API
• Numbers API
• Chuck Norris API
• Open International Space API
• IBM API Speech to Text
• 🔥 Public APIs XYZ

Face Recognition Project

• Free Logos
• Particles JS and Particles React
• React Tilt
• Clarifai Platform for AI
• Clarifai Models
• Face Detection Recognition Model
• Clarifai client for JavaScript
• Example of project
• Firebase Auth Documentation Web
• Firebase Auth Update and get user
• Firebase Admin
• Article using Firebase and Authorization in NodeJs and Express
• Revoke token with Firebase

NodeJS + ExpressJS

• JavaScript Robotic and IoT
• NodeJS Documentation
• NodeJS Globals
• 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
• 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

Databases

• Relational: MySQL, PostgreSQL, Oracle, MSSQL, Sybase, Derby, SQlite
• Non Relational (NoSQL) : Redis, MongoDB, Cassandra, CouchDB, Apache HBASE, Rick
• SQL Query builder for JavaScript

Deployment

• Heroku Node JS
• Environment variables
• Heroku deployment article

Github Awesome Profiles

• Sindre Sorhus
• Sarah Drasner
• Andrei Neagoie
• Edwin Torres

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.

Cheers and keep learning! 🍻

Comments

[David Paine20]

I appreciate your work. And best of luck.
However, I would like you to also consider that links as well
dnschecker.org/ (For complete DNS lookup, DNS health check, and for many more DNS related tools)
iplocation.io/ (For complete IP lookup, and for many more IP related tools)
url-decode.com/cat/ (Here, you will get 100+ web tools, that not only help you out, in web development but also in getting better SEO ranking, including encoding/decoding, minification, image optimization and many more).

[Matteo Bruni]

react-particles-js uses tsParticles for particles animation, not the obsolete and abandoned ParticlesJS.
Demos here: particles.matteobruni.it and repo here: github.com/matteobruni/tsparticles

[wiseintrovert]

Great write! Brief but to the point.
I'm just curious, were you an experienced developer before you took this cours? I'm a Software Enginner and have been working with web projects (ReactJS, NestJS) lately and was wondering if this would be a step back for me.

[Edwin Torres]

To be honest, I've been coding by 6 years, but I think the concepts and fundaments that Andrei explains, are really good. I think the best project was the Face Recognition, consuming the Clarifai API and the creation of the Node API.

So, in summary, you can be an experimented developer or just a person who has started coding two months ago, and you will get too much of this course.

Cheers!

[Fili]

You may also enjoy http.dog as well