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

https://jsbin.com/donahif/edit

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)