Merge pull request #61 from tecladocode/master

Author: jslvtr

curriculum/.vuepress/components/BottomCallout.vue

@@ -0,0 +1,183 @@
+<script>
+export default {
+  props: ['title', 'subtitle']
+}
+</script>
+
+<template>
+    <div class="bottom-callout">
+        <div class="bottom-callout__content">
+        <h3 class="bottom-callout__title">
+            <span v-if="title">{{ title }}</span>
+            <span v-else-if="!title">Enjoyed this article?<br/>You'll love the complete video course!</span>
+        </h3>
+        <p v-if="subtitle" class="bottom-callout__text">
+            {{ subtitle }}
+        </p>
+        <ul class="bottom-callout__features">
+            <li class="bottom-callout__feature">
+                <svg class="bottom-callout__feature-icon hover-green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  
+<g transform="matrix(1,0,0,1,0,0)"><g>
+    <rect x="0.73" y="2.5" width="22.54" height="15.5" rx="2" style="fill: none;stroke: #ffffff;stroke-linecap: round;stroke-linejoin: round;stroke-width: 1.5px"></rect>
+    <path d="M10.22,7.15a.5.5,0,0,0-.74.44v5.32a.5.5,0,0,0,.74.44l4.94-2.66a.49.49,0,0,0,0-.88Z" style="stroke: #ffffff;stroke-linecap: round;stroke-linejoin: round;stroke-width: 1.5px"></path>
+    <line x1="19.48" y1="21.5" x2="4.48" y2="21.5" style="fill: none;stroke: #ffffff;stroke-linecap: round;stroke-linejoin: round;stroke-width: 1.5px"></line>
+  </g></g></svg>
+                <span class="bottom-callout__feature-text">
+                    Complete video lessons for each topic
+                </span>
+            </li>
+            <li class="bottom-callout__feature">
+                <svg class="bottom-callout__feature-icon hover-gold" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <g transform="matrix(1,0,0,1,0,0)">
+                    <path d="M12 23.242L18 17.242 18 6.742 12 0.742 6 6.742 6 17.242 12 23.242z" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M12 0.742L12 23.242" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M6 6.742L18 6.742" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M6 17.242L18 17.242" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M21 11.992L23.25 11.992" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M20.25 3.742L21.75 2.242" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M20.25 20.242L21.75 21.742" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M3 11.992L0.75 11.992" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M3.75 3.742L2.25 2.242" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    <path d="M3.75 20.242L2.25 21.742" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
+                    </g></svg>
+                <span class="bottom-callout__feature-text">
+                    Get the most out of your learning
+                </span>
+            </li>
+            <li class="bottom-callout__feature">
+                <svg class="bottom-callout__feature-icon hover-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <g transform="matrix(1,0,0,1,0,0)">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12.095V17.845H9V12.095"></path>
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 13.345L12 9.59497L16.5 13.345"></path>
+                    <path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 4.5H19.5C19.8978 4.5 20.2794 4.65804 20.5607 4.93934C20.842 5.22064 21 5.60218 21 6V21.75C21 22.1478 20.842 22.5294 20.5607 22.8107C20.2794 23.092 19.8978 23.25 19.5 23.25H4.5C4.10218 23.25 3.72064 23.092 3.43934 22.8107C3.15804 22.5294 3 22.1478 3 21.75V6C3 5.60218 3.15804 5.22064 3.43934 4.93934C3.72064 4.65804 4.10218 4.5 4.5 4.5H8.25C8.25 3.50544 8.64509 2.55161 9.34835 1.84835C10.0516 1.14509 11.0054 0.75 12 0.75C12.9946 0.75 13.9484 1.14509 14.6517 1.84835C15.3549 2.55161 15.75 3.50544 15.75 4.5V4.5Z"></path>
+                    <path fill="none" stroke-width="1.5" d="M12 4.5C11.7929 4.5 11.625 4.33211 11.625 4.125C11.625 3.91789 11.7929 3.75 12 3.75"></path>
+                    <path fill="none" stroke-width="1.5" d="M12 4.5C12.2071 4.5 12.375 4.33211 12.375 4.125C12.375 3.91789 12.2071 3.75 12 3.75"></path>
+                    </g></svg>
+                <span class="bottom-callout__feature-text">
+                    Build a portfolio of projects
+                </span>
+            </li>
+            <li class="bottom-callout__feature">
+                <svg class="bottom-callout__feature-icon hover-gold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <g transform="matrix(1,0,0,1,0,0)"><defs><style>.a{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}.white{stroke:#ffffff;}</style></defs>
+                <circle class="a white" cx="4.174" cy="9.571" r="2.446"></circle>
+                <circle class="a white" cx="19.826" cy="9.571" r="2.446"></circle>
+                <path class="a white" d="M16.4,23.125V16.391a6.347,6.347,0,0,1-5.441-4.32l-.842-2.525a1.468,1.468,0,0,1,1.167-1.915,1.523,1.523,0,0,1,1.642,1.062l.818,2.453a3.42,3.42,0,0,0,3.247,2.338l4.3,0a1.956,1.956,0,0,1,1.958,1.956v7.689"></path>
+                <path class="a white" d="M10.453,10.548l-.2.594A3.424,3.424,0,0,1,7,13.484l-4.295,0A1.956,1.956,0,0,0,.75,15.436v7.689"></path>
+                <path class="a white" d="M7.6,23.125V16.391A6.347,6.347,0,0,0,12,14"></path>
+                <line class="a" x1="11.5" y1="0.875" x2="11.5" y2="2.875"></line>
+                <line class="a" x1="15.414" y1="2.961" x2="14" y2="4.375"></line>
+                <line class="a" x1="7.586" y1="2.961" x2="9" y2="4.375"></line>
+                </g></svg>
+                <span class="bottom-callout__feature-text">
+                    Get one-on-one help from a real person
+                </span>
+            </li>
+        </ul>
+        <p class="bottom-callout__text">
+            <a href="#" class="bottom-callout__link">
+                Get the video course <svg class="bottom-callout__feature-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1,0,0,1,0,0)"><path d="M10.5,9.121h6V6.011c0-.272.163-.343.362-.158L23,11.54a.751.751,0,0,1-.017,1.142l-6.116,5.336c-.2.185-.362.114-.362-.157v-2.74h-6" fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M7.5 9.121L5.25 9.121" fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M3 9.121L0.75 9.121" fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M7.5 15.121L5.25 15.121" fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M3 15.121L0.75 15.121" fill="none"  stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></g></svg>
+            </a>
+        </p>
+        </div>
+    </div>
+</template>
+
+<style>
+    .bottom-callout {
+        background-color: #1c2023;
+        color: white;
+        stroke: white;
+        border-radius: 6px;
+        padding: 1rem 1rem 2rem 3rem;
+        margin-bottom: 3rem;
+        margin-top: 2rem;
+    }
+    .bottom-callout__content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    .bottom-callout__title {
+        font-size: 1.8rem;
+        line-height: 1.5em;
+        font-weight: 900;
+        margin-bottom: 1rem;
+        margin-top: 1rem;
+    }
+    .bottom-callout__text {
+        font-size: 1.2rem;
+        margin-bottom: 1rem;
+    }
+    .bottom-callout__features {
+        font-size: 1.2rem;
+        margin: 0;
+        padding: 0;
+        margin-left: 1rem;
+        margin-top: 1rem;
+        margin-bottom: 1rem;
+        list-style: none;
+    }
+    .bottom-callout__feature {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+        margin-bottom: 1em;
+    }
+    .bottom-callout__feature-icon {
+        width: 1.5em;
+        height: 1.5em;
+        margin-right: 0.75em;
+    }
+    .bottom-callout__text {
+        display: flex;
+        justify-content: flex-start;
+        margin-top: 0.5rem;
+    }
+    .bottom-callout__link {
+        display: flex;
+        align-items: center;
+        padding: 1rem 3rem;
+        text-decoration: none !important;
+        border-radius: 3rem;
+        font-weight: 500;
+        border: none;
+        cursor: pointer;
+        background-color: #50e3c2;
+        color: #1c2023;
+        stroke: #1c2023;
+    }
+    .bottom-callout__link:hover {
+        background-color: #76ecd3;
+    }
+    .bottom-callout__link .bottom-callout__feature-icon {
+        margin-left: 1rem;
+        transform: translateY(2px);
+    }
+    .hover-green:hover {
+        fill: #50e3c2;
+    }
+    .hover-gold:hover {
+        stroke: #fcff38;
+    }
+    .hover-blue:hover {
+        fill: #0d78ca;
+    }
+    @media (max-width: 768px) {
+        .bottom-callout {
+            padding: 1.5rem;
+        }
+        .bottom-callout__title {
+            margin-top: 0;
+            font-size: 1.4rem;
+        }
+        .bottom-callout__features, .bottom-callout__text {
+            font-size: 1rem;
+        }
+        .bottom-callout__features {
+            margin-left: 0;
+        }
+    }
+</style>

curriculum/.vuepress/config.js

@@ -1,15 +1,15 @@
 var getChildren = require("./childscript");
 
 module.exports = {
-  title: "Full Stack Development with Python and Flask in 2020",
-  description: "The complete course notes and guide.",
+  title: "Web Developer Bootcamp with Flask and Python",
+  description:
+    "The complete course notes and guide for web development with Flask and Python in 2022.",
   themeConfig: {
     nav: [
       { text: "Home", link: "/" },
       {
         text: "Get the course",
-        link:
-          "https://www.udemy.com/course/complete-python-postgresql-database-course/?referralCode=B3ED9B12EBC114C0C306",
+        link: "https://go.tecla.do/web-dev-course-sale",
       },
     ],
     sidebar: [
@@ -81,6 +81,11 @@ module.exports = {
         path: "/section13/",
         children: getChildren("section13", "lectures"),
       },
+      {
+        title: "Section 14: Project 4: Movie Library",
+        path: "/section14/",
+        children: getChildren("section14", "lectures"),
+      },
     ],
     sidebarDepth: 0,
   },

curriculum/README.md

@@ -1,4 +1,4 @@
-# What is this course?
+# Web Developer Bootcamp with Flask and Python
 
 Welcome to the Web Developer Bootcamp with Flask and Python! Thank you for embarking in this journey with me.
 
@@ -18,33 +18,8 @@ Here are the projects you'll build:
 
 Each one builds upon all the knowledge you'll have gained up to that point, getting increasingly large and complex. Due to how the course is structured though, you'll never be confused!
 
-Every lecture of the course has its corresponding page in this e-book, where you can find notes and code.
+Every lecture of the course has its corresponding page in this e-book, where you can find notes and code. You can find the navigation on the left.
 
 Let's get started!
 
-:::tip
-Don't have the course yet?
-
-Feel free to follow along this complete e-book, but if you'd like access to the 20+ hours of video-content, check it out by clicking below!
-
-<p class="cta-container">
-    <a href="https://www.udemy.com/course/web-developer-bootcamp-flask-python/?referralCode=2E6C9295CA26EA212CE8" class="cta-link" target="_blank">Get the video course →</a>
-</p>
-:::
-
-<style>
-.cta-container {
-    margin: 30px 0 35px 0;
-}
-.cta-link {
-    padding: 16px 24px;
-    font-size: 150%;
-    background-color: #3eaf7c;
-    color: white;
-    border-radius: 6px;
-}
-
-.cta-link:hover {
-    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
-}
-</style>
+<BottomCallout title="Don't have the course yet?" subtitle="Feel free to follow along with this e-book, but the video-course has a few benefits!"></BottomCallout>

curriculum/section03/lectures/01_how_websites_work/README.md

@@ -79,5 +79,7 @@ In this course we're going to be predominantly focusing on steps 3 and 4. We're
 
 Throughout the next couple of sections we're going to be taking a closer look at the technologies involved in actually displaying a web page to the user, and then we're going to look into writing server-side code to handle user requests with Python and Flask.
 
+<BottomCallout></BottomCallout>
+
 [^ipv6]: [IPv6](https://www.networkworld.com/article/3254575/what-is-ipv6-and-why-aren-t-we-there-yet.html)
 [^server]: [What is a server?](https://www.techopedia.com/definition/2282/server)

curriculum/section07/lectures/06_jinja2_conditional_statements/README.md

@@ -186,6 +186,8 @@ This time if you go to the [http://localhost:5000/conditionals-truthy](http://lo
 
 In this post, you've learned how to perform basic comparisons in Jinja2 templates using conditional statements. You've also seen how you can leverage *truthy* and *falsy* values of variables to control your logic directly from the Jinja2 template.
 
+<BottomCallout></BottomCallout>
+
 [^conditional-statements]: [Conditional (computer programming)](https://en.wikipedia.org/wiki/Conditional_(computer_programming)#:~:text=In%20computer%20science%2C%20conditional%20statements,evaluates%20to%20true%20or%20false.)
 
 [^truthy-falsy]: [What is Truthy and Falsy? How is it different from True and False?](https://stackoverflow.com/questions/39983695/what-is-truthy-and-falsy-how-is-it-different-from-true-and-false)

curriculum/section07/lectures/07_jinja2_loops/README.md

@@ -178,4 +178,6 @@ Run the application and head over to [http://localhost:5000/for-loop/conditional
 
 In this lesson, you've learned about using *for loops* in a Jinja2 template. You've also learned how you can traverse through dictionary objects and combine *for loops* with conditional statements to implement more complex logic directly in the template.
 
+<BottomCallout></BottomCallout>
+
 [^loop-jinja2]: [Loops in Jinja2 Template](https://jinja.palletsprojects.com/en/2.11.x/templates/#for)

curriculum/section09/lectures/04_jinja2_macros/README.md

@@ -81,9 +81,9 @@ The process for using macros starts by extraction: extract some existing Jinja c
 ### Step 2
 
 ```html
-{% import 'macros.jinja2' as macros %}
+{% import 'macros.html' as macros %}
 <!-- or -->
-{% from 'macros.jinja2' import todo_list %}
+{% from 'macros.html' import todo_list %}
 
 {% set num_todos = todos | length %}
   {% if num_todos > 0 %}
@@ -100,7 +100,7 @@ The process for using macros starts by extraction: extract some existing Jinja c
 ## Final code at the end of this lecture
 
 ```html
-{% import 'macros.jinja2' as macros %}
+{% import 'macros.html' as macros %}
 
 {% set num_todos = todos | length %}
   {% if num_todos > 0 %}

curriculum/section09/lectures/04_jinja2_macros/end/templates/home.html

@@ -4,9 +4,9 @@
 {% endmacro %}
 
 <!-- step 2 -->
-{% import 'macros.jinja2' as macros %}
+{% import 'macros.html' as macros %}
 <!-- or -->
-{% from 'macros.jinja2' import todo_list %}
+{% from 'macros.html' import todo_list %}
 
 <!DOCTYPE html>
 <html lang="en">

…inja2_macros/end/templates/macros.jinja2 …_jinja2_macros/end/templates/macros.htmlcurriculum/section09/lectures/04_jinja2_macros/end/templates/macros.jinja2 renamed to curriculum/section09/lectures/04_jinja2_macros/end/templates/macros.html curriculum/section09/lectures/04_jinja2_macros/end/templates/macros.jinja2 renamed to curriculum/section09/lectures/04_jinja2_macros/end/templates/macros.html

@@ -1,5 +1,5 @@
 {% extends 'base.html' %}
-{% import 'macros.jinja2' as macros %}
+{% import 'macros.html' as macros %}
 
 {% block content %}
   {% set num_todos = todos | length %}