Alright, let's dive into the fun part: including your static files in our Flask app.

**Static files** are like your app's fashion statement – it's all about the style (CSS) and a bit of personality (JavaScript). These files are the static, unchanging backbone of your site, unlike the dynamic HTML files.

First, we're going to get organized. Create a new folder and name it static. Within this folder, create another one called css, and inside that, craft your masterpiece with a file named main.css. Your directory structure should now be as follows: static, css, and main.css.

With this stylish structure, we'll jazz up the fonts and colors to see the magic happen.

``` 
body {
  font-family: Helvetica;
  color: blue;
}
```

As each template inherits the structure of base.html, we can directly modify the links to static files within this central template. To do this, insert a `<link>` tag within the `<head>` section. This change will be applied to the body of every page since we are modifying the `<body>` tag.

The file's name in the example below doesn't correspond to the file's name in our project.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IgogIGNvbnRlbgp0PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIHVzZXItc2NhbGFibGU9bm8sIGluaXRpYWwtc2NhbGU9MS4wLCBtYXhpbXVtLXNjYWxlPTEuMCwgbWluaW11bS1zY2FsZT0xLjAiPgogIDxtZXRhIGh0dHAtZXF1aXY9IlgtVUEtQ29tcGF0aWJsZSIgY29udGVudD0iaWU9ZWRnZSI+CiAgPCEtLSBIZXJlIGlzIG91ciBsaW5rIHRvIGNvbm5lY3Qgd2l0aCBDU1MgZmlsZSAtLT4KICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9InN0YXRpYy9jc3MvbWFpbi5jc3MiPgogIHslIGJsb2NrIGhlYWQgJX0geyUgZW5kYmxvY2sgJX0KPC9oZWFkPgo8Ym9keT4KICB7JSBibG9jayBib2R5ICV9IHslIGVuZGJsb2NrICV9CjwvYm9keT4KPC9odG1sPg==

It will be applied in the body of every page since we are changing the base.html. 
And if we are going to inspect the web page and go down, you can see the font and color. You can turn these styles on and off here.

For JavaScript, create a new folder inside static directory called js. Inside the js directory, create a new file named main.js and include your JavaScript code, similar to what you did with CSS.

A better practice is to use a URL path. It's more robust in getting the static location instead of writing out the entire URL path manually. We will use this **Jinga syntax**. 
First, define the top-level directory and then specify the file name. The `url_for` function will automatically generate or evaluate the complete path.

The file's name in the example below doesn't correspond to the file's name in our project.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgPG1ldGEgY2hhcnNldD0iVVRGLTgiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IgogIGNvbnRlbgp0PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIHVzZXItc2NhbGFibGU9bm8sIGluaXRpYWwtc2NhbGU9MS4wLCBtYXhpbXVtLXNjYWxlPTEuMCwgbWluaW11bS1zY2FsZT0xLjAiPgogIDxtZXRhIGh0dHAtZXF1aXY9IlgtVUEtQ29tcGF0aWJsZSIgY29udGVudD0iaWU9ZWRnZSI+CiAgPCEtLSBIZXJlIGlzIG91ciBsaW5rIHRvIGNvbm5lY3Qgd2l0aCBDU1MgZmlsZSAtLT4KICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9Int7IHVybF9mb3IoJ3N0YXRpYycsIGZpbGVuYW1lPSdjc3MvbWFpbi5jc3MnKSB9fSI+CiAgeyUgYmxvY2sgaGVhZCAlfSB7JSBlbmRibG9jayAlfQo8L2hlYWQ+Cjxib2R5PgogIHslIGJsb2NrIGJvZHkgJX0geyUgZW5kYmxvY2sgJX0KPC9ib2R5Pgo8L2h0bWw+

So, this is how you should link static files using `url_for` and **Jinga2** syntax.

What types of files are typically considered static files in a Flask application?

In Flask, what is the recommended directory structure for organizing static files?

When you want to modify links to static files (e.g., CSS or JavaScript) for all pages in a Flask app, where should you make these changes?

You will face 100% hands-on practice and complete the project by the end of the course. This course is perfect for those who have never worked with Flask before.
You will acquire the expertise to effectively utilize Flask for your project development needs. You will embark on a journey to create your initial application, mastering the fundamentals, and progressively enhancing your project to unlock its full potential.

I will guide you step-by-step during the course. 

Get ready to launch our very first project! We're diving into the exciting world of important project concepts and components. Here, we'll make the magic happen by connecting with Flask, crafting our initial functional endpoints, and bringing our project to life with captivating templates and eye-catching static files.

Here, you can enhance your application by adding a database. You'll get hands-on experience working with SQLAlchemy as you create an SQLite database tailored for development mode.

Get ready to dive into the world of ORM queries for databases and discover how to seamlessly integrate them into your project, allowing you to perform the full range of CRUD operations.

Welcome to the world of web design! In this journey, you'll learn how to integrate Bootstrap styles into your project, instantly transforming it into an eye-catching masterpiece. Think of it as playing with digital Legos for programmers.

Flask Intensive Course: Web Development with Python

Static Files

Flask Intensive Course: Web Development with Python

Static Files