diff --git a/11-page-menu.md b/11-page-menu.md
index 5f8039d..c46782b 100644
--- a/11-page-menu.md
+++ b/11-page-menu.md
@@ -1,4 +1,4 @@
-[<< previous](10-dynamic-pages.md)
+[<< previous](10-dynamic-pages.md) | [next >>](12-frontend.md)
### Page Menu
@@ -205,7 +205,9 @@ class ArrayMenuReader implements MenuReader
{
public function readMenu()
{
- return [['href' => '/', 'text' => 'Homepage']];
+ return [
+ ['href' => '/', 'text' => 'Homepage'],
+ ];
}
}
```
@@ -255,4 +257,4 @@ class FrontendTwigRenderer implements FrontendRenderer
Everything still working? Awesome. Commit everything and move on to the next chapter.
-[<< previous](10-dynamic-pages.md)
\ No newline at end of file
+[<< previous](10-dynamic-pages.md) | [next >>](12-frontend.md)
\ No newline at end of file
diff --git a/12-frontend.md b/12-frontend.md
new file mode 100644
index 0000000..620d878
--- /dev/null
+++ b/12-frontend.md
@@ -0,0 +1,188 @@
+[<< previous](11-page-menu.md) | [next >>](to-be-continued.md)
+
+
+### Frontend
+
+I don't know about you, but I don't like to work on a site that looks two decades old. So let's improve the look of our little application.
+
+This is not a frontend tutorial, so we'll just [pure](http://purecss.io/) and call it a day.
+
+First we need to change the `Layout.html` template. I don't want to waste your time with HTML and CSS, so I'll just provide the code for you to copy paste.
+
+```php
+
+
+
+
+ Example
+
+
+
+
+
+
+
+```
+
+You will also need some custom CSS. This is a file that we want publicly accessible. So where do we put it? Exactly, in the public folder.
+
+But to keep things a little organized, add a `css` folder in there first and then create a `style.css` with the following content:
+
+```css
+body {
+ color: #777;
+}
+
+#layout {
+ position: relative;
+ padding-left: 0;
+}
+
+#layout.active #menu {
+ left: 150px;
+ width: 150px;
+}
+
+#layout.active .menu-link {
+ left: 150px;
+}
+
+.content {
+ margin: 0 auto;
+ padding: 0 2em;
+ max-width: 800px;
+ margin-bottom: 50px;
+ line-height: 1.6em;
+}
+
+.header {
+ margin: 0;
+ color: #333;
+ text-align: center;
+ padding: 2.5em 2em 0;
+ border-bottom: 1px solid #eee;
+}
+
+.header h1 {
+ margin: 0.2em 0;
+ font-size: 3em;
+ font-weight: 300;
+}
+
+.header h2 {
+ font-weight: 300;
+ color: #ccc;
+ padding: 0;
+ margin-top: 0;
+}
+
+#menu {
+ margin-left: -150px;
+ width: 150px;
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ z-index: 1000;
+ background: #191818;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+#menu a {
+ color: #999;
+ border: none;
+ padding: 0.6em 0 0.6em 0.6em;
+}
+
+#menu .pure-menu,
+#menu .pure-menu ul {
+ border: none;
+ background: transparent;
+}
+
+#menu .pure-menu ul,
+#menu .pure-menu .menu-item-divided {
+ border-top: 1px solid #333;
+}
+
+#menu .pure-menu li a:hover,
+#menu .pure-menu li a:focus {
+ background: #333;
+}
+
+#menu .pure-menu-selected,
+#menu .pure-menu-heading {
+ background: #1f8dd6;
+}
+
+#menu .pure-menu-selected a {
+ color: #fff;
+}
+
+#menu .pure-menu-heading {
+ font-size: 110%;
+ color: #fff;
+ margin: 0;
+}
+
+.header,
+.content {
+ padding-left: 2em;
+ padding-right: 2em;
+}
+
+#layout {
+ padding-left: 150px; /* left col width "#menu" */
+ left: 0;
+}
+#menu {
+ left: 150px;
+}
+
+.menu-link {
+ position: fixed;
+ left: 150px;
+ display: none;
+}
+
+#layout.active .menu-link {
+ left: 150px;
+}
+```
+
+Now if you have a look at your site again, things should look a little better. Feel free to further improve the look of it yourself later. But let's continue with the tutorial now.
+
+Every time that you need an asset or a file publicly available, then you can just put it in your `public` folder. You will need this for all kinds of assets like javascript files, css files, images and more.
+
+So far so good, but it would be nice if our visitors can see what page they are on.
+
+Of course we need more than one page in the menu for this. I will just use the `page-one.md` that we created earlier in the tutorial. But feel free to add a few more pages and add them as well.
+
+Go back to the `ArrayMenuReader` and add your new pages to the array. It should look something like this now:
+
+```php
+return [
+ ['href' => '/', 'text' => 'Homepage'],
+ ['href' => '/page-one', 'text' => 'Page One'],
+];
+```
+
+[<< previous](11-page-menu.md) | [next >>](to-be-continued.md)
+
diff --git a/to-be-continued.md b/to-be-continued.md
new file mode 100644
index 0000000..b595e24
--- /dev/null
+++ b/to-be-continued.md
@@ -0,0 +1,14 @@
+### To be continued...
+
+Congratulations. You made it this far.
+
+I hope you were following the tutorial step by step and not just skipping over the chapter :)
+
+I have received good feedback so far so I decided to start writing a book. If you want to learn more and stay updated, [click here](http://artofphp.com/).
+
+But don't worry, I will also keep working on this tutorial. I was a bit lazy over the summer but now that it getting colder again I will have much more time to spend on the tutorial.
+
+If you got something out of the tutorial I would appreciate a star. It's the only way for me to see if people are actually reading this :)
+
+Thanks for your time,
+Patrick
\ No newline at end of file