First, download the skeleton archive (.zip) and unzip it.

It has the following structure:

├── initial_design.html  # initial HTML template
├── public/
│   ├── bootstrap/ # bootstrap sources
│   ├── images/
│   └── style.css  # main stylesheet
├── server.py      # server-side application
└── templates/     # Jinja templates

To test, open initial_design.html in a browser. It should look similar (almost: minor text differences) to the following screenshot:

Also, it would be a good idea to test your Python / Flask setup now:

python3 server.py
# it should say that the server is running on http://127.0.0.1:5000/

Our customer wants to make some changes to the website's design:

• Add a header image with our logo at the top
  • Several candidates are present inside public/images/;
  • You could either use the CSS background property, or just the old-school <img> tag;
  • Hint: check out style.css for existing definitions!
• Also change the background color of the <header> to match the chosen image on its margins (maybe something blue?);
• Make the content box have rounded borders (try 15px);
  • border-radius *wink*
  • Use the browser's Web Developer tools to find the HTML tag to select!
• Insert some dummy content text (e.g., use a Lorem Ipsum generator);

Time to add a second HTML page:

• As expected, copy + paste your initial HTML with a new name, e.g.: second.html;
• Link together the two .html pages (in each HTML page, find the <a class=”…” href=”..”> links inside the #navbarToggle div and edit the hrefs to point to each-other);

• Test by opening the HTML files in your browser. The user should be able to navigate between the two pages seamlessly!
• One final touch: we want the menu to highlight (i.e., change foreground / background color and font style) the currently active menu button (different for each page)!

First, let's understand how Flask serves files:

• Download a random photo from the Internet (e.g., your favorite snake species) and place it into public/myimage.jpg (or use whatever name you wish, but keep this directory!);
• Start up the Flask server (python3 server.py) and point your browser to http://localhost:5000/public/myimage.jpg, it should display your image.
• Copy/rename or download another image directly to your project's root, alongside server.py; start the web server, point your browser to http://localhost:5000/myimage2.jpg – it won't work… why?

Now, we want to move the html page from earlier tasks to be served by the Flask web server:

• Copy the initial_design.html to the templates/ directory (we're using the default Flask convention);
• Modify server.py to call render_template (see official quickstart guide) and actually serve your HTML file.
• Fire it up!

• Finally for this task, make a /google endpoint which automatically redirects to your favorite (or not) search engine!

Finally, we shall see how dynamic content can be interpolated

• Edit the website's second HTML page, enter {{mycontent}} (this literal text!) as content somewhere inside the main content block:

  <div class="content-box main-content">
  ...
    {{mycontent}}
  ...

• Now modify the server.py code (the second_page function) to take in the desired value as a request parameter and pass it to the mycontent template variable, e.g.:

  def second_page():
    render_template("second.html", mycontent=request.args.get("mycontent", "<not specified>"))

• Open the endpoint URL and pass the mycontent value as a GET URL parameter (e.g., ?parameter=value) and see if the content changes dynamically after the request!
• This is a template engine called Jinja, seamlessly integrated with Flask. More about this: next time!