diff --git a/docs/getting_started/a_simple_webpage.md b/docs/getting_started/a_simple_webpage.md
new file mode 100644
index 000000000..645bf9e9b
--- /dev/null
+++ b/docs/getting_started/a_simple_webpage.md
@@ -0,0 +1,125 @@
+Hello World is a good start, but what if you want something a bit more fancy.. Something like an HTML document saying "Hello World". If that's what you want, follow along:
+
+## Basic Webpage
+Let's start our webpage with.. well.. a webpage. but before we create a webpage we need to place it somewhere Crow recognizes, this directory (for now) is going to be called `templates`.
+
+Once our `templates` folder is created, we can create our HTML document inside it, let's call it `fancypage.html`.
+
+After that we can just place something simple inside it like:
+``` html title="templates/fancypage.html"
+
+
+
+ Hello World!
+
+
+```
+
+Now that we have our HTML page ready, let's take our Hello World example from earlier:
+``` cpp linenums="1"
+#include "crow.h"
+//#include "crow_all.h"
+
+int main()
+{
+ crow::SimpleApp app; //define your crow application
+
+ //define your endpoint at the root directory
+ CROW_ROUTE(app, "/")([](){
+ return "Hello world";
+ });
+
+ //set the port, set the app to run on multiple threads, and run the app
+ app.port(18080).multithreaded().run();
+}
+```
+
+
+And now let's modify it so that it returns our cool page:
+``` cpp title="/main.cpp" linenums="1" hl_lines="10 11"
+#include "crow.h"
+//#include "crow_all.h"
+
+int main()
+{
+ crow::SimpleApp app;
+
+ //define your endpoint at the root directory
+ CROW_ROUTE(app, "/")([](){
+ auto page = crow::mustache::load_text("fancypage.html");
+ return page;
+ });
+
+ app.port(18080).multithreaded().run();
+}
+```
+
+Your project should look something something like:
+```
+./
+ |-templates/
+ | |-fancypage.html
+ |
+ |-main.cpp
+ |-crow_all.h
+```
+or
+```
+./
+ |-templates/
+ | |-fancypage.html
+ |
+ |-crow/
+ | |-include/...
+ | |-crow.h
+ |-main.cpp
+```
+
+
+And now whenever we call `http://localhost:18080/` we get our Hello World in an HTML document rather than just plain text.
+
+
+## Template Webpage with a variable
+But we can make things even more exciting, we can greet a user by their name instead!!
+
+Let's start with our webpage, and modify it with a little bit of mustache syntax:
+``` html title="templates/fancypage.html" hl_lines="4"
+
+
+
+ Hello {{person}}!
+
+
+```
+
+1. `{{}}` in mustache define a simple variable
+
+
+Now let's modify our C++ code to use the variable we just added to our webpage (or template):
+``` cpp title="/main.cpp" linenums="1" hl_lines="9-12"
+#include "crow.h"
+//#include "crow_all.h"
+
+int main()
+{
+ crow::SimpleApp app;
+
+ //define your endpoint at the root directory
+ CROW_ROUTE(app, "/")([](std::string name){ // (1)
+ auto page = crow::mustache::load("fancypage.html"); // (2)
+ crow::mustache::context ctx ({{"person", name}}); // (3)
+ return page.render(ctx); //(4)
+ });
+
+ app.port(18080).multithreaded().run();
+}
+```
+
+1. We are adding a `string` variable to the URL and a counterpart (`std::string name`) to our Route, this can be anything the user wants.
+2. We are using `load()` instead of `load_text()` since we have an actual variable now.
+3. We are creating a new [context](../../guides/templating/#context) containing the `person` variable from our template and the `name` we got from the URL.
+4. we are using `render(ctx)` to apply our context to the template.
+
+Now calling `http://localhost:18080/Bob` should return a webpage containing "Hello Bob!". We did it!
+
+For more details on templates and HTML pages in Crow please go [here](../../guides/templating/)
diff --git a/docs/getting_started/your_first_application.md b/docs/getting_started/your_first_application.md
index d24f91e1f..92327c3f7 100644
--- a/docs/getting_started/your_first_application.md
+++ b/docs/getting_started/your_first_application.md
@@ -38,7 +38,7 @@ Please note that the `port()` and `multithreaded()` methods aren't needed, Thoug
Once you've followed all the steps above, your code should look similar to this
-``` cpp linenums="1"
+``` cpp title="main.cpp" linenums="1"
#include "crow.h"
//#include "crow_all.h"
@@ -55,4 +55,7 @@ int main()
app.port(18080).multithreaded().run();
}
```
-After building and running your .cpp file, you should be able to access your endpoint at [http://localhost:18080](http://localhost:18080). Opening this URL in your browser will show a white screen with "Hello world" typed on it.
+
+For the sake of simplicity, we suggest using `crow_all.h` (by placing it in the same place as your `main.cpp`) and running the command `g++ main.cpp -lpthread -O2 -o first` (use `clang` instead of `g++` if you prefer clang, or Visual Studio if you're on windows).
+
+After building and running your `.cpp` file, you should be able to access your endpoint at [http://localhost:18080](http://localhost:18080). Opening this URL in your browser will show a white screen with "Hello world" typed on it.
diff --git a/mkdocs.yml b/mkdocs.yml
index 469dfb224..8271847ee 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -11,7 +11,8 @@ theme:
font: false
language: 'en'
features:
- navigation.tabs
+ - navigation.tabs
+ - content.code.annotate
favicon: 'assets/favicon.svg'
logo: 'assets/favicon.svg'
icon:
@@ -54,6 +55,7 @@ nav:
- MacOS: getting_started/setup/macos.md
- Windows: getting_started/setup/windows.md
- Your First Application: getting_started/your_first_application.md
+ - A simple Webpage: getting_started/a_simple_webpage.md
- Guides:
- Different parts of Crow:
- App: guides/app.md