Home

Awesome

Complete-Web-Developer-Manual

All resources and notes from the Complete Web Developer: Zero to Mastery course

Contents

1. Introduction<br> 2. How The Internet Works<br> 3. History Of The Web<br> 4. HTML 5<br> 5. Advanced HTML 5<br> 6. CSS<br> 7. Advanced CSS<br> 8. Bootstrap 4, Templates, And Building Your Startup Landing Page<br> 9. CSS Grid + CSS Layout<br> 10. Tailwind CSS<br> 11. Career Of A Web Developer<br> 12. Javascript<br> 13. DOM Manipulation<br> 14. Advanced Javascript<br> 15. Command Line<br> 16. Developer Environment<br> 17. Git + Github + Open Source Projects<br> 18. A Day In The Life Of A Developer<br> 19. NPM + NPM Scripts<br> 20. React.js + Redux<br> 21. HTTP/JSON/AJAX + Asynchronous Javascript<br> 22. Backend Basics<br> 23. APIs<br> 24. FINAL PROJECT: SmartBrain Front-End<br> 25. Node.js + Express.js<br> 26. FINAL PROJECT: SmartBrain Back-End -- Server<br> 27. Databases<br> 28. FINAL PROJECT: SmartBrain Back-End – Database<br> 29. Production + Deployment<br> 30. Where To Go From Here?<br> 31. Bonus: Extra Bits (Coding Challenges + AMA)<br> 32. Extra: For Windows Users<br> 33. Bonus: Part 2 - Special Thank You Gift (Discount Coupons)<br>

<a name ="01"></a>1. Introduction

Discord Channel:

<a name ="02"></a>2. How The Internet Works

Tools:

Topics:

Submarine Cable Map:

<a name ="03"></a>3. History Of The Web

Maps that explain the Internet:

First Webpage in the world:

Optional Videos:

<a name ="04"></a>4. HTML 5

Run HTML online:

Install a text editor (Select one):

Tags:

<!-- These are some HTML Tags -->

Topics:

Zero to Mastery resources:

Reference websites:

<a name ="05"></a>5. Advanced HTML 5

Tags:

Semantic Elements

Topics:

Resources:

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

<a name ="06"></a>6. CSS

Syntax:

Selector {
	property: value;
}

How to:

Tools:

Properties:

Selectors:

Text Properties:

Layout Properties:

Box Model:

Sizes:

Topics:

Exercises:

Reference websites:

Website for color check:

Website for fonts download:

<a name ="07"></a>7. Advanced CSS

Flexbox:

Properties:

Tools:

Exercises:

Reference websites:

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.

<a name ="08"></a>8. Bootstrap 4, Templates, And Building Your Startup Landing Page

App for creating users list:

Website with animation examples:

Website for patterns:

Generating animated patterns:

<a name ="09"></a>9. CSS Grid + CSS Layout

Grid Cheat Sheets:

Grid Garden:

Free Design resources:

<a name ="10"></a>10. Tailwind CSS

Reference websites:

<a name ="11"></a>11. Career Of A Web Developer

Updated Statistics and Surveys 2020:

Web Developer Roadmap:

Learning Guideline Roadmap:

Once 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:

<a name ="12"></a>12. Javascript

Javascript Data types:

Primitive

  1. Number
  2. String
  3. Boolean
  4. Undefined
  5. Null
  6. Symbol (new in ECMAScript 6)
  7. BigInt

Non-primitive

  1. Object (Array is not a special data types in JavaScript it belongs to the object data types)

Javascript comparisons:

Javascript variables:

Javascript conditionals:

if(condition) {
	//Code written here is executed if condition is true
}


if(condition1) {
	//Code written here is executed if condition1 is true
} else {
	//Code written here is executed if condition is false
}


if(condition) {
	//Code written here is executed if condition1 is true
} else if(condition) {
	//Code written here is executed if condition2 is true
}


condition ? (code that runs with condition is true) : (code that runs when condition is false);


switch(expression){
	case result1:
		//code that runs if expression gives result1
		break;
	case result2:
		//code that runs if expression gives result2
		break;
	default:
		//code that runs if expression gives neither result1 nor result2
}

Javascript logical operators:

Javascript functions:

Javascript data structures:

Javascript looping:

Javascript keywords:

<a name ="13"></a>13. DOM Manipulation

Reference websites:

DOM Selectors:

Changing Styles:

Bonus:

It is important to CACHE selectors in variables

<a name ="14"></a>14. Advanced Javascript

Variable declaration:

Functions:

Arrays:

Objects:

Classes:

Classname {
   constructor(param1,param2){
     this.param1 = value;
     this.param2 = value2;
   }
   classmethod(){
   }
}

Classextension extends Classname {
   constructor(param1,param2){
      super(param1,param2);
   }
   classextensionmethod(){
   }
}

/* You utilize a class when we are planning to create several objects with similar properties /* A class extension is used when those several objects can contain properties or categories with specific properties and methods, while respecting the initial constructor.

Loops:

/* both arrays and strings are iterable in JS /* for of cannot be used in objects, but for in can be used in arrays, you get the index number as a return

Extra Javascript Practice:

<a name ="15"></a>15. Command Line

FOR MAC OR LINUX:

CommandDescription
lslists files and folders within working directory
pwdshow current working directory
cdchange working directory to user directory
cd ..change working directory to direct parent directory
clearclear current terminal screen
cd /change current directory to root directory
cd ~change current directory to user directory
cd path/to/folderchanges working directory to specified path
mkdir namecreate folder called 'name' within current directory
open foldernameopens folder called 'foldername' using OS GUI
touch index.htmlcreates new file titled index.html within working directory
open index.htmlopens file named index.html using default system program
open -a “Sublime Text”opens sublime text program. This syntax can be used to open other programs
open .opens and displays current folder within OS GUI
mv index.html about.htmlrenames index.html file to about.html
up and down arrowcycles through previous commands typed within current terminal session
rm filenamedeletes a file called 'filename' within the current directory
rm -r foldernameused to delete folders. In this case 'foldername' will be deleted
say hello (only on Mac)the mac will speak any text you enter after the 'say' keyword
rm -rf .gitTo remove git repo created by init
{program name }allows you to execute a program by calling it's name. Eg. codewill
open vscode. vlc will open vlc media player

FOR WINDOWS:

dir - list files
cd {directory name} - change directory
cd / - go to root (top) directory
cd .. - go up a level
mkdir {file name} - make a directory
echo > {filename} - create an empty file
del {filename} - remove a file
rmdir {directory name} - remove a directory and all files within
rename {filename} {new filename} - rename a file or folder
start {filename} - open file in default program
start . - open current directory
exit - exits the command prompt or a batch file
cls - clear the terminal screen
type {filename} - displays the content of the file

<a name ="16"></a>16. Developer Environment

Popular code editors / IDE:

Development Environment Stack

<a name ="17"></a>17. Git + Github + Open Source Projects

Install Git:

Git GUI:

Git in one video

Git and version control practice/learning playground

Git Commands:

git clone “https:……”
git remote -v
git remote add url “https:……”
git remote add upstream “https:……”
git fetch upstream
git merge upstream/master
git status
git add “filename”
git add .
git commit –m ”message”
git commit -am "commit message"
git push
git push origin "branchName"
git pull
git branch
git branch “name”
git checkout “name”
git merge “name”
git diff
git diff "fileName"
git checkout -b "name"
git stash

Once you are in your forked project directory in your command prompt....

  1. Type git remote -v and press Enter. You'll see the current configured remote repository for your fork.

    a. git remote -v

    b. origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)

    c. origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (push)

  2. Type 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:

    git remote add upstream https://github.com/zero-to-mastery/PROJECT_NAME.git

  3. To 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.

  4. Now, you can keep your fork synced with the upstream repository with a few Git commands. One simple way is to do the below command from the master of your forked repository: git pull upstream master

<a name ="18"></a>18. A Day In The Life Of A Developer

<a name ="19"></a>19. NPM + NPM Scripts

npm init
npm install
npm install –g browserify

Install node and npm:

Check node and npm installed on your system by:

node -v
npm -v

If any of these command result in error then that (node/npm) deosen't installed on your system.

Reference websites:

If you want to run multiple version of node on system then we can utlized Node version manager(nvm)

Install nvm :

Steps to install NVM on local machine

Check nvm installed on your system by:

nvm -v

Check nvm list available on your system by:

nvm list

Use nvm version on your system by (nvm use with specify version of node):

nvm use 14.12.0

<a name ="20"></a>20. React.js + Redux

old version

npm install –g create-react-app
create-react-app “name”
[cd "name"]
npm start
npm install tachyons

new version

npx create-react-app <App-Name>
cd <App-Name>
npm start

Website for fonts download:

Reference websites:

Action --> Reducer --> Store --> Make changes

npm install redux
npm install react-redux
npm install redux-logger
npm install redux-thunk

Additional topics you could cover

This 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 Static Site Generation(SSG/Pre-rendering) vs Client side rendering(CSR/SPA) vs Server Side Rendering(SSR)

Some Additional React Based Frameworks popular now

<a name ="21"></a>21. HTTP/JSON/AJAX + Asynchronous Javascript

There are many ways for making an API call, but the one I recommend using is Axios. Here is why [https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5]

Other available options are Fetch API or G(old) XMLHttpRequests.

Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API.

Features

Installing

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using yarn:

$ yarn add axios

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Reference websites:

<a name ="22"></a>22. Backend Basics

<a name ="23"></a>23. APIs

<a name ="24"></a>24. FINAL PROJECT: SmartBrain Front-End

Animated objects library:

Background patterns:

Animated background library:

Image and video recognition:

Icons library:

<a name ="25"></a>25. Node.js + Express.js

Install Postman:

Express.js:

(Getting start guide)

npm install body-parser
npm install express --save
npm install --save-dev nodemon

Node.js Reference websites:

Storing passwords securely:

npm install bcrypt-nodejs

$ npm install bcrypt

1.	/*
2.	* You can copy and run the code below to play around with bcrypt
3.	* However this is for demonstration purposes only. Use these concepts
4.	* to adapt to your own project needs.
5.	*/
6.
7.	import bcrypt from'bcrypt'
8.	const saltRounds = 10 // increase this if you want more iterations
9.	const userPassword = 'supersecretpassword'
10.	const randomPassword = 'fakepassword'
11.
12.	const storeUserPassword = (password, salt) =>
13.	  bcrypt.hash(password, salt).then(storeHashInDatabase)
14.
15.	const storeHashInDatabase = (hash) => {
16.	   // Store the hash in your password DB
17.	   return hash // For now we are returning the hash for testing at the bottom
18.	}
19.
20.	// Returns true if user password is correct, returns false otherwise
21.	const checkUserPassword = (enteredPassword, storedPasswordHash) =>
22.	  bcrypt.compare(enteredPassword, storedPasswordHash)
23.
24.
25.	// This is for demonstration purposes only.
26.	storeUserPassword(userPassword, saltRounds)
27.	  .then(hash =>
28.	    // change param userPassword to randomPassword to get false
29.	    checkUserPassword(userPassword, hash)
30.	  )
31.	  .then(console.log)
32.	  .catch(console.error)

<a name ="26"></a>26. FINAL PROJECT: SmartBrain Back-End -- Server

Change localhost:

If you don't want set environment variable, other option - modify scripts part of package.json from:

"start": "react-scripts start"

Linux (tested on Ubuntu 14.04/16.04) and MacOS (tested by @aswin-s on MacOS Sierra 10.12.4) to:

"start": "PORT=3006 react-scripts start"

or (maybe) more general solution by @IsaacPak to:

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor solution to:

"start": "set PORT=3006 && react-scripts start"

Front-end and back-end connection:

Front-end:

fetch('http://localhost:3000/image', {
	method: 'put',
	headers: {'Content-Type': 'application/json'},
	body: JSON.stringify({
		id: this.state.user.id
	})
})
.then(response => response.json())
.then(count => {
	this.setState(Object.assign(this.state.user, { entries:count}))
})

Back-end:

const cors = require('cors')
app.use(cors());

Resource: CORS

<a name ="27"></a>27. Databases

Install PostgreSQL:

data types

Terminal commands for windows:

Login: (-U usuario)

psql -h localhost -U postgres

Create database:

create database database_name;

Show all datatables:

\l

Create a user:

create user moni with password ‘moni’;

Delete a database:

drop database database_name;

Connect to a database:

\c database_name;

Create a schema:

create schema friends;

Create a table:

create table Friends.test( firstname CHAR(15), lastname CHAR(20));

create 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);

Show all information of a table:

select * from friends.test;

Describe database:

\d friends.test

Insert data:

insert into friends.test values( ‘Mike’, ‘Smith’);

insert into friends.test (firstname, lastname )values( ‘Sally’, ‘Jones’);

Add a column to an existing table:

alter table Friends.test add age smallint;

Update data from the table:

update friends.test set age = 25 where firstname= ‘Mike’;

Delete data from the table:

delete from friends.test where firstname = ‘Mike’;

Delete column from a table:

alter table friends.test drop column age;

Delete a table:

drop table friends.test;

Functions:

select avg(age) from friends.test;

Join tables:

select * from friends.test join friends.login on friends.test.firstname = friends.login.name;

Exit:

\q

List all users in postgresSQL database server:

\du

List all tables in a schema:

\d+ schema_name.*

List all tables in a database:

\dt *.*

List a table in a schema:

\d+ schema_name . table_name

Show description of a table, columns, type, modifications, etc.:

\d+ table_name

Create a backup of a database:

pg_dump -h localhost -U postgres database_name > database_name.sql

Restore a database: 1. Create a new database where the restore file is going to be placed:

psql -U postgres -d new_database_name -f respaldo.sql

*Note:  it is important to create the restore in the same root where the database copy is saved.

Enter to postgres with a user different to postgres:

psql -h localhost -d postgres -U usuario

Enter to a database with a different user:

psql -h localhost -d nombre_base -U nombre_usuario

<a name ="28"></a>28. FINAL PROJECT: SmartBrain Back-End – Database

Tool for db connection with back-end:

<a name ="29"></a>29. Production + Deployment

Environmental variables:

PORT

On terminal:

bash
-->PORT-3000 node server.js

On server.js:

	const PORT = process.env.PORT
	app.listen(PORT, ()=>{
		console.log(`app is running on port ${PORT}`);
	})

DATABASE

On terminal:

bash
-->DATABASE_URL-123  node server.js

On server.js:

	const DATABASE_URL = process.env. DATABASE_URL
	app.listen(3000, ()=>{
		console.log(`app is running on port ${ DATABASE_URL }`);
	})

OTHER OPTION

On terminal:

fish
-->env DATABASE_URL-‘hello’ node server.js

Deploy apps/websites:

Github Pages:

Heroku:

Not the best one:

Commands for heroku on backend folder: Install heroku:

npm install -g heroku
heroku login
heroku create

In the terminal there will be a URL : ” https://limitless-bastion-10041.herokuapp.com/”

git remote –v
git push origin master
heroku git: remote –a limitless-bastion-10041

Changes required in:

git push heroku master
for checking errors:
heroku logs --tail
heroku open

Connect to pg database:

Create a new postgres database using Heroku:

Data: Heroku postgres: create new: install heroku postgres: select the app created

heroku addons
heroku info
heroku pg:psql

<a name ="30"></a>30. Where To Go From Here?

The Complete Junior to Senior Web Developer Roadmap

<a name ="31"></a>31. Bonus: Extra Bits (Coding Challenges + AMA)

<a name ="32"></a>32. Extra: For Windows Users

<a name ="33"></a>33. Bonus: Part 2 - Special Thank You Gift (Discount Coupons)