Web Dev 101
Ivan Barreto
Software Developer @ Jobber
https://github.com/ibarretoSo, what is web development? 🤔
Websites
Web Applications (Facebook, Airbnb, reddit, Kayak)
static vs. dynamic
Front-end: HTML, CSS, JavaScript
Back-end: Ruby, Python, (also JavaScript)
Databases: Postgres, MySQL, Mongo
What happens when you go to https://google.ca?
It's complicated, but here's a good video explaining it
Request-Response Cycle
source
Anatomy of a URL
http://example.com:80/path/to/file.html?key1=val1&key2=val2#SomewhereInDocprotocol domain port path parameters anchor
HTTP METHODS/VERBS
- GET
- POST
- DELETE
- PUT
- PATCH
HTML
```html
<!DOCTYPE html>
<html>
<head>
<title>I am a title</title>
</head>
<body>
<p>I am a paragraph!</p>
</body>
</html>
```
```html
<form action="/test-endpoint" method="post">
<input type="text" name="first_name">
<input type="text" name="last_name">
<input type="submit" value="Submit">
</form>
```
CSS
```css
tag {
attribute: value;
}
.class {
attribute: value;
}
#id {
attribute: value;
}
```
See the Pen Web Dev 101 - CSS example by Ivan Barreto (@ibarreto) on CodePen.
JavaScript
```js
console.log('hi there!');
```
What's the DOM?
How do I interact with it?
```js
document.getElementsByTagName('body')
```
Let's play with some code
What if I don't want to come up with a bunch of custom CSS?
Oh hello, Bootstrap
Go from 0...
...to a 100...
...real quick
```html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
```
So what about the server side?
Ruby
Python
Go
(and their frameworks!)
app.py
```python
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hi_there():
return 'Hi there, Web Dev 101!'
```
```bash
$ export FLASK_APP=app.py
$ flask run
* Running on http://127.0.0.1:5000/
```
Back-end demo! (using Python and Flask)
Frameworks
Why do we use them?
Now I want to integrate with some third-parties.
What do I do?
APIs
Some APIs: Twilio, Twitter, Spotify
Coinmarketcap API exampleWhere is web development going? What are the most recent trends?
Before:
- Render views server-side
Now:
- Render views client-side
- Hybrid approach
JS Libraries and Frameworks
- React
- Angular
- Vue
- Ember