web applications basics
intro to HTML, CSS, Flask and Javascript
BLA BLA BLA
Chrome dev tools
CMD + Option + I or F12
HTML CSS JS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Obernews</title>
</head>
<body>
<h1>
News of the day: fake news are coming
</h1>
It's no joke. It's all about fake news clickbait
ad-serving self-sustaining nonsense.
<div>Ronald Drumph</div>
</body>
</html>HTML
the talks
<body>
<style>
.signature::before{
content: "with ♥";
margin-right: 0.5em;
color: salmon;
}
.signature {
font-weight: bold;
font-style: italic;
margin-left: 2em;
}
</style>
<h1>
News of the day: fake news are coming
</h1>
It's no joke. It's all about fake news clickbait
ad-serving self-sustaining nonsense.
<div class="signature">Ronald Drumph</div>
</body>CSS
the looks
let people = [
"Bromald Bump",
"Billary Dimpton",
"Pal Dolores"];
function vote(){
let peoplesVote = Math.floor(Math.random() * 10 % 3);
document
.getElementById('singature')
.innerHTML = people[peoplesVote];
}
setInterval(vote, 1000);
JS
the moves
Flask
Generate HTML from Python
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello():
return "Hello World!"Routes & templates
@app.route("/")
def hello():
return "Hello World!"
@app.route('/hello/')
@app.route('/hello/<name>')
def hello_again(name=None):
return render_template('hello.html',
signature=name)Outer Worlds
API
Databases
SQL
SQL
Redis
