Complete-Web-Developer-Manual
All resources and notes from the Complete Web Developer: Zero to Mastery course
Contents
1. Introduction
2. How The Internet Works
3. History Of The Web
4. HTML 5
5. Advanced HTML 5
6. CSS
7. Advanced CSS
8. Bootstrap 4, Templates, And Building Your Startup Landing Page
9. CSS Grid + CSS Layout
10. Tailwind CSS
11. Career Of A Web Developer
12. Javascript
13. DOM Manipulation
14. Advanced Javascript
15. Command Line
16. Developer Environment
17. Git + Github + Open Source Projects
18. A Day In The Life Of A Developer
19. NPM + NPM Scripts
20. React.js + Redux
21. HTTP/JSON/AJAX + Asynchronous Javascript
22. Backend Basics
23. APIs
24. FINAL PROJECT: SmartBrain Front-End
25. Node.js + Express.js
26. FINAL PROJECT: SmartBrain Back-End -- Server
27. Databases
28. FINAL PROJECT: SmartBrain Back-End β Database
29. Production + Deployment
30. Where To Go From Here?
31. Bonus: Extra Bits (Coding Challenges + AMA)
32. Extra: For Windows Users
33. Bonus: Part 2 - Special Thank You Gift (Discount Coupons)
1. Introduction
Discord Channel:
https://discord.gg/nVmbHYYYou will find it inside of the course
2. How The Internet Works
Tools:
- Chrome Developer Tools
Topics:
- ISP, DNS and Servers
- Traceroute (Windows: tracert)
Submarine Cable Map:
3. History Of The Web
Maps that explain the Internet:
First Webpage in the world:
Optional Videos:
- https://www.youtube.com/watch?v=3QhU9jd03a0&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=29
- https://www.youtube.com/watch?v=AEaKrq3SpW8&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=30
- https://www.youtube.com/watch?v=guvsH5OFizE&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=31
4. HTML 5
Run HTML online:
Install a text editor (Select one):
- https://www.sublimetext.com/
- https://atom.io/
- https://code.visualstudio.com/
- https://notepad-plus-plus.org/
Tags:
<html>
<head>
<title>
<body>
- Headings (
h1
,h2
,h3
,h4
,h5
,h6
) - Paragraph
<p>
- Bold
<strong>
, italic<em>
- Ordered list
<ol>
, Unordered list<ul>
, List item<li>
- Break
<br>
, Horizontal rule<hr>
- Image
<img>
and Attributes:alt
,src
,width
,height
- Anchor
<a href="">
-
`<div>` for Division/Section
Topics:
- Relative vs Absolute Path
Zero to Mastery resources:
- https://github.com/zero-to-mastery/complete-web-developer-manual
- https://github.com/zero-to-mastery/zero-to-mastery-captions
Reference websites:
- https://www.w3schools.com/
- https://developer.mozilla.org/en-US/
- https://stackoverflow.com/
- https://htmlreference.io/
5. Advanced HTML 5
Tags:
<form>
method
,action
<input>
:type
="text"
,"submit"
,"reset"
,"email"
,"date"
,"radio"
,"password"
required
,value
,name
,min
- dropdown
<select>
- option
<option>
- option
- comment
<!-- -->
<div>
and<span>
Semantic Elements
<header>
<nav>
<main>
<footer>
Topics:
- Chrome view Source
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."
6. CSS
Syntax:
Selector {
property: value;
}
How to:
- External
<link rel="stylesheet" type="text/css" href="style.css">
- Internal
<style> body { background-color: purple; } </style>
- Inline
<header style="background-color: green;">
- Class
<header class="green">
.green { background-color: green; }
Tools:
- Chrome Inspector
Properties:
- text-align
- border
- background
- list-style
- cursor
- display: inline-block
- color: hex, rgb or rgba
Selectors:
.class
#id
*
(all elements)element
element, element
element element
element > element
element + element
v:hover
:last-child
:first-child
::before
(pseudo-element)!important
(not recommended)
Text Properties:
text-decoration
text-transform
line-height
font-style
font-weight
font-size
font-family
Layout Properties:
float
andclear
Box Model:
margin
border
padding
width
andheight
Sizes:
px
em
andrem
vw
andvh
(viewport width and height)
Topics:
- Cascading: Specificity, Importance
!
, Source Order - Linking fonts and external stylesheets
Exercises:
Reference websites:
- https://css-tricks.com/
- https://www.supremo.co.uk/typeterms/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://unsplash.com/
- https://developer.mozilla.org/es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia
- https://specificity.keegan.st/
- https://css-tricks.com/snippets/css/complete-guide-grid/
- https://css-diner.netlify.app/#
- https://elementor.com/help/whats-the-difference-between-px-em-rem-vw-and-vh/
Website for color check:
Website for fonts download:
7. Advanced CSS
Flexbox:
display: flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
order
flex
:flex-grow
,flex-shrink
andflex-basis
align-self
Properties:
transition
transform
box-shadow
Tools:
- Chrome Toggle Device
- https://codepen.io/
Exercises:
Reference websites:
- https://caniuse.com/
- https://www.w3schools.com/cssref/css3_browsersupport.asp
- http://shouldiprefix.com/
- https://robots.thoughtbot.com/transitions-and-transforms
- https://darekkay.com/dev/flexbox-cheatsheet.html
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.
8. Bootstrap 4, Templates, And Building Your Startup Landing Page
App for creating users list:
Website with animation examples:
Website for patterns:
- https://www.creative-tim.com/bootstrap-themes/ui-kit?direction=asc&sort=price
- http://mashup-template.com/templates.html
- https://startbootstrap.com/template-categories/all/
- https://mdbootstrap.com/freebies/
- https://www.creative-tim.com/
Generating animated patterns:
9. CSS Grid + CSS Layout
Grid Cheat Sheets:
Grid Garden:
Free Design resources:
10. Tailwind CSS
Reference websites:
11. Career Of A Web Developer
Updated Statistics and Surveys 2020:
- State of JavaScript
- State of Salaries
- Developer Salaries - Glassdoor
- Octoverse Github
- Stackoverflow Survey
Web Developer Roadmap:
- Part 1: https://www.youtube.com/watch?v=57GuRoJ5Bfw
- Part 2: https://www.youtube.com/watch?v=aeKQy_08fpk
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:
12. Javascript
Javascript Data types:
Primitive
- Number
- String
- Boolean
- Undefined
- Null
- Symbol (new in ECMAScript 6)
- BigInt
Non-primitive
- Object (Array is not a special data types in JavaScript it belongs to the object data types)
Javascript comparisons:
- !== (not equal to)
- === (equal to)
- >= (greater than or equal to)
- <= (less than or equal to)
- > (less than)
- < (greater than)
Javascript variables:
- var
- let (new in ECMAScript 6) : Used to declare variables that can be changed using code later on
- const (new in ECMAScript 6) : Used to declare constants that remain constant throughout the execution of the program, mostly used for functions and object
Javascript conditionals:
- if
if(condition) {
//Code written here is executed if condition is true
}
- else
if(condition1) {
//Code written here is executed if condition1 is true
} else {
//Code written here is executed if condition is false
}
- else if
if(condition) {
//Code written here is executed if condition1 is true
} else if(condition) {
//Code written here is executed if condition2 is true
}
- ternary operator
condition ? (code that runs with condition is true) : (code that runs when condition is false);
- switch
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:
- && = Sees if both values are the same/
true
. - || = Sees if there is at least one of the same/
true
value. - ! = Turns
true
intofalse
, andfalse
intotrue
.
Javascript functions:
- var a = function name() {}
- function name() {}
- return
- () => (new in ECMAScript 6)
Javascript data structures:
- Array
- Object
Javascript looping:
- for
- while
- do
- forEach (new in ECMAScript 5)
Javascript keywords:
- break
- case
- catch
- class
- const
- continue
- debugger
- default
- delete
- do
- else
- export
- extends
- finally
- for
- function
- if
- import
- in
- instanceof
- new
- return
- super
- switch
- this
- throw
- try
- typeof
- var
- void
- while
- with
- yield
13. DOM Manipulation
Reference websites:
- https://developer.mozilla.org/en-US/docs/web/Events
- https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
- https://jquery.com/
- http://youmightnotneedjquery.com/
- https://babeljs.io/
DOM Selectors:
-
getElementsByTagName
-
getElementsByClassName
-
getElementById
-
querySelector
-
querySelectorAll
-
getAttribute
-
setAttribute
Changing Styles:
-
style.{property} //ok
-
className //best
-
classList //best
-
classList.add
-
classList.remove
-
classList.toggle
Bonus:
-
innerHTML //DANGEROUS
-
parentElement
-
children
It is important to CACHE selectors in variables
14. Advanced Javascript
Variable declaration:
let variableName
(new in ECMAScript 6) /* its value can be alteredconst variableName
(new in ECMAScript 6) /* it stands for constant, its value can't be altered once declared``
/* are used instead of''
or""
. Allows us to avoid the "+" separation and elements and variables should be added with syntax${element}
a**b
/* it stands for a to the b potenceelement.padStart(param1,param2)
/* param1 number of characters param2 are added before the value of element declared. The default param2 is" "
.padEnd(param1,param2)
/* Same as above but at the end.trimStart()
/* eliminates empty spaces from the start of a variable.trimEnd()
/* Same as above but from the enddebugger;
/* Stops running the code and opens console for a step by step check
Functions:
- Function declaration syntax:
const functionname=(param1,param2...) => 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"()"
- Currying:
const functionname= param1 => param2 => action
/* To properly call function syntax is:functionname (param1)(param2)
- Compose:
const functionname= (param2,param3) => param1 => param2(param3(param1))
/* Being param2 and 3 functions y param1 a value. Executes a function inside a function executed with the initial param1
Arrays:
array.forEach(num=>{})
/* For each element num of the array, executes the actions inside {}array.map(num=>{})
/* 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.array.filter(num=>{})
/* 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 specifiedarray.reduce((accumulator,num)=>{}, param3)
/* Acumulates values of the operation performed in previous elements, param3 being the initial value of the accumulatorarray.concat(param1)
/* Concats param1 to the arrayarray.includes('param1')
/* Verifies the array includes param1array.flat(param1)
/* Eliminates the nested arrays to a param1 levelarray.flatMap(param1=>{})
/* For each element num, the operation inside {} is performed and the array is lowered to a level 1 nestingarray.fromEntries
/* Turns the array into an object, making the first element of the array the property and the second the value of such property
Objects:
const(/let) {property1, property2,...} = obj
/* Given an object obj, keeps the value of the properties in new variables property1, property2,...etc{...obj}
/* Creates a clone object of the object objObject.assign(param1,param2)
/* Clones the lements of an object param2 in an object param1Object.values(obj)
/* Takes the values of the properties of an object objObject.entries(obj)
/* returns an array with property,value of each element of an object obj /*.entries
and.values
can be used with array methods such as.map
,.forEach
, etc.this
/* when using this parameter, the method/action is applied exclusively to the element in which "this" has been summoned.
Classes:
- Class creator syntax:
Classname {
constructor(param1,param2){
this.param1 = value;
this.param2 = value2;
}
classmethod(){
}
}
-
Create class object syntax:
new Classname(param1,param2)
-
Class extension syntax:
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:
- 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 - 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
/* 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:
- https://github.com/getify/You-Dont-Know-JS
- http://javascript.info/
- http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/
15. Command Line
FOR MAC OR LINUX:
Command | Description |
---|---|
ls | lists files and folders within working directory |
pwd | show current working directory |
cd | change working directory to user directory |
cd .. | change working directory to direct parent directory |
clear | clear current terminal screen |
cd / | change current directory to root directory |
cd ~ | change current directory to user directory |
cd path/to/folder | changes working directory to specified path |
mkdir name | create folder called 'name' within current directory |
open foldername | opens folder called 'foldername' using OS GUI |
touch index.html | creates new file titled index.html within working directory |
open index.html | opens 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.html | renames index.html file to about.html |
up and down arrow | cycles through previous commands typed within current terminal session |
rm filename | deletes a file called 'filename' within the current directory |
rm -r foldername | used 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 .git | To remove git repo created by init |
{program name } | allows you to execute a program by calling it's name. Eg. code will |
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
16. Developer Environment
Popular code editors / IDE:
Development Environment Stack
17. Git + Github + Open Source Projects
Install Git:
- https://www.atlassian.com/git/tutorials/install-git#windows
- https://www.atlassian.com/git/tutorials/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....
-
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)
-
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
-
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. -
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
18. A Day In The Life Of A Developer
- https://www.weareadam.com/blog/2020/11/a-day-in-the-life-of-a-front-end-developer/
- https://www.nickang.com/2020-01-02-a-day-in-the-life-of-a-software-developer/
19. NPM + NPM Scripts
npm init
npm install
npm install βg browserify
Install node and npm:
- https://www.npmjs.com/get-npm
- https://nodejs.org/es/ (Though with newer version of node, npm come pre-installed. So you don't need to do that separately)
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
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:
- https://reactjs.org/docs/react-component.html
- https://jsonplaceholder.typicode.com/
- http://atomicdesign.bradfrost.com/
- https://robohash.org
Action --> Reducer --> Store --> Make changes
npm install redux
npm install react-redux
npm install redux-logger
npm install redux-thunk
- https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
- https://reacttraining.com/react-router/
- https://ramdajs.com/
- https://lodash.com
- https://glamorous.rocks
- https://www.styled-components.com
- https://github.com/css-modules/css-modules
- https://www.gatsbyjs.org
- https://zeit.co/blog/next5
- www.material-ui.com/#/components/app-bar
- https://react.semantic-ui.com/elements/button
- https://github.com/reactjs/reselect
- https://redux-saga.js.org
- https://immutable-js.com/
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
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
- Make XMLHttpRequests from the browser
- Make http requests from node.js
- Supports the Promise API
- Intercept request and response
- Transform request and response data
- Cancel requests
- Automatic transforms for JSON data
- Client side support for protecting against XSRF
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:
22. Backend Basics
23. APIs
- https://explore.postman.com/
- https://stripe.com/docs/api
- https://www.twilio.com/docs/api/messaging/send-messages
- https://apilist.fun
- https://www.pexels.com/api/documentation/
- https://apihouse.now.sh/
- https://play.elevatorsaga.com
- https://publicapis.dev
24. FINAL PROJECT: SmartBrain Front-End
Animated objects library:
- https://www.npmjs.com/package/react-tilt
npm install βsave react-tilt
Background patterns:
Animated background library:
-
npm install react-tsparticles
Image and video recognition:
- https://clarifai.com/developer/guide/
npm install clarifai
Icons library:
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)
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:
- https://www.npmjs.com/package/cors
npm install cors
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
- https://en.wikipedia.org/wiki/Same-origin_policy
- https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
27. Databases
Install PostgreSQL:
-
en el terminal:
brew update brew doctor brew install postgresql brew services start postgresql brew services stop postgresql createdb βtestβ psql βtestβ
for windows:
-
http://www.postgresqltutorial.com/install-postgresql/
@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://s3.amazonaws.com/pgcentral/install.ps1'))" cd bigsql pgc install pg10 pgc start pg10
-
http://dc-apuntes.blogspot.com/2016/04/comandos-postgres-desde-cmd-windows.html
-
https://www.w3resource.com/PostgreSQL/connect-to-postgresql-database.php
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
28. FINAL PROJECT: SmartBrain Back-End β Database
Tool for db connection with back-end:
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:
- Mostly now Github is free for all students and Github pages can serve static sites
- 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
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:
- BACK END: PORT in server.js needs to be changed by an environment variable
- FRONT END: fetch URL needs to be changed by the URL of HEROKU + β:3000β
git push heroku master
for checking errors:
heroku logs --tail
heroku open
Connect to pg database:
- https://devcenter.heroku.com/articles/heroku-postgresql
- https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER_ConnectToPostgreSQLInstance.html
- https://msdn.microsoft.com/en-us/library/ms175043(v=sql.120).aspx#SSMSProcedure
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
30. Where To Go From Here?
The Complete Junior to Senior Web Developer Roadmap