my tips on html, flask, wtforms, bootstrap cdn

1 General HTML

There is a really nice summary cheat sheet availabe online. I refer you to that rather than reinvent the wheel.

See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

1.1 div

<div class="container">
  {% block content %}
  {% endblock%}
</div>

Wrapping the block content in a <div> with class="container" simple moves the whole block to the right a bit, so that it is not fully flush with the left side of the page. Really what is happening is that a container can be defined and then treated as a whole, that has style sheets different from & separate from the overall sytle sheets. Say you want all paragraphs in this specific container to have black text on white background, you can do that. Like this: Style sheet:

.sample_ascii_code p {
    color: black;
    background: white;
    }

The container on the html page would use this if the container has the sample_assci_code class defined this way:

<div class="sample_ascii_code">
  <p> this text will be black font on white background </p>
  <p> all paragraphs wihtin this container (div) will have this
    style, black on white. </p>
</div>

1.2 #idname

You can identify any element of your page using:

This allows style sheets to be applied to all elements with that id. But, be aware that you can only have one #id inside an element (like a <body> or a <heading>

For example:

#lookingfor-h2  {
    background-color: teal;
    border: none;
    color: brightblue;
    width: 180px;
}

<h2 class=someclass id="lookingfor-h2">nice title with an id and class</h2>

1.2.1 When to use ids over classes?

Stick with classes to style different elements inside your web site. However, IDs can these additional things:

linking url links to a different spot on your webpage with the ID

<a href = "#index-recipes"</a>
 blah blah lets the client click on the href and move to
   the container identified with "index-recipes"
   ...  
<div id="index-recipes">
  blah blah
</div>

Javascript functionality uses #ids inside different elements. So good to know both #ids and classes.

1.3 span

To style a single element, say a word, use the simplest inline element, called a span:

<div class="code">
  <div><!--this div represents a line -->
    <span class="type">int</span>
    <span class="name">foo</span>
    <span class="op">=</span>
    <span class="number literal">42</span>
  </div>
</div>

Corresponding css:

.code { font-family: Consolas, monospace;
      font-size: 150%;}
.code .type { color: #0000a0; }
.code .name { color: #006611; }
.code .op { color: #00000; }
.code .literal { color: #990000; }

See: stackoverflow for this exact example.

1.4 forms

Again I refer you to https://developer.mozilla.org/en-US/docs/Learn/Forms rather than reinvent the wheel here.

2 flask functions

2.1 url_for

the url_for function references the function names in routes.py, i.e. NOT the app.route name but the def lookingfor() name.

So for example

href="{{ url_for('lookingfor') }}"