Skip to content

Commit 97692df

Browse files
committed
Update final lectures, remove unused lectures, add CTA to sell the course in some of the most popular lectures.
1 parent a1194b1 commit 97692df

File tree

12 files changed

+197
-40
lines changed

12 files changed

+197
-40
lines changed
Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<script>
2+
export default {
3+
props: ['title', 'subtitle']
4+
}
5+
</script>
6+
7+
<template>
8+
<div class="bottom-callout">
9+
<div class="bottom-callout__content">
10+
<h3 class="bottom-callout__title">
11+
<span v-if="title">{{ title }}</span>
12+
<span v-else-if="!title">Enjoyed this article?<br/>You'll love the complete video course!</span>
13+
</h3>
14+
<p v-if="subtitle" class="bottom-callout__text">
15+
{{ subtitle }}
16+
</p>
17+
<ul class="bottom-callout__features">
18+
<li class="bottom-callout__feature">
19+
<svg class="bottom-callout__feature-icon hover-green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
20+
21+
<g transform="matrix(1,0,0,1,0,0)"><g>
22+
<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>
23+
<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>
24+
<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>
25+
</g></g></svg>
26+
<span class="bottom-callout__feature-text">
27+
Complete video lessons for each topic
28+
</span>
29+
</li>
30+
<li class="bottom-callout__feature">
31+
<svg class="bottom-callout__feature-icon hover-gold" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
32+
<g transform="matrix(1,0,0,1,0,0)">
33+
<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>
34+
<path d="M12 0.742L12 23.242" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
35+
<path d="M6 6.742L18 6.742" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
36+
<path d="M6 17.242L18 17.242" fill="none" stroke="#ffffff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
37+
<path d="M21 11.992L23.25 11.992" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
38+
<path d="M20.25 3.742L21.75 2.242" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
39+
<path d="M20.25 20.242L21.75 21.742" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
40+
<path d="M3 11.992L0.75 11.992" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
41+
<path d="M3.75 3.742L2.25 2.242" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
42+
<path d="M3.75 20.242L2.25 21.742" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path>
43+
</g></svg>
44+
<span class="bottom-callout__feature-text">
45+
Get the most out of your learning
46+
</span>
47+
</li>
48+
<li class="bottom-callout__feature">
49+
<svg class="bottom-callout__feature-icon hover-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
50+
<g transform="matrix(1,0,0,1,0,0)">
51+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12.095V17.845H9V12.095"></path>
52+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7.5 13.345L12 9.59497L16.5 13.345"></path>
53+
<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>
54+
<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>
55+
<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>
56+
</g></svg>
57+
<span class="bottom-callout__feature-text">
58+
Build a portfolio of projects
59+
</span>
60+
</li>
61+
<li class="bottom-callout__feature">
62+
<svg class="bottom-callout__feature-icon hover-gold" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
63+
<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>
64+
<circle class="a white" cx="4.174" cy="9.571" r="2.446"></circle>
65+
<circle class="a white" cx="19.826" cy="9.571" r="2.446"></circle>
66+
<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>
67+
<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>
68+
<path class="a white" d="M7.6,23.125V16.391A6.347,6.347,0,0,0,12,14"></path>
69+
<line class="a" x1="11.5" y1="0.875" x2="11.5" y2="2.875"></line>
70+
<line class="a" x1="15.414" y1="2.961" x2="14" y2="4.375"></line>
71+
<line class="a" x1="7.586" y1="2.961" x2="9" y2="4.375"></line>
72+
</g></svg>
73+
<span class="bottom-callout__feature-text">
74+
Get one-on-one help from a real person
75+
</span>
76+
</li>
77+
</ul>
78+
<p class="bottom-callout__text">
79+
<a href="#" class="bottom-callout__link">
80+
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>
81+
</a>
82+
</p>
83+
</div>
84+
</div>
85+
</template>
86+
87+
<style>
88+
.bottom-callout {
89+
background-color: #1c2023;
90+
color: white;
91+
stroke: white;
92+
border-radius: 6px;
93+
padding: 1rem 1rem 2rem 3rem;
94+
margin-bottom: 3rem;
95+
margin-top: 2rem;
96+
}
97+
.bottom-callout__content {
98+
display: flex;
99+
flex-direction: column;
100+
justify-content: center;
101+
}
102+
.bottom-callout__title {
103+
font-size: 1.8rem;
104+
line-height: 1.5em;
105+
font-weight: 900;
106+
margin-bottom: 1rem;
107+
margin-top: 1rem;
108+
}
109+
.bottom-callout__text {
110+
font-size: 1.2rem;
111+
margin-bottom: 1rem;
112+
}
113+
.bottom-callout__features {
114+
font-size: 1.2rem;
115+
margin: 0;
116+
padding: 0;
117+
margin-left: 1rem;
118+
margin-top: 1rem;
119+
margin-bottom: 1rem;
120+
list-style: none;
121+
}
122+
.bottom-callout__feature {
123+
display: flex;
124+
align-items: center;
125+
padding: 0;
126+
margin: 0;
127+
margin-bottom: 1em;
128+
}
129+
.bottom-callout__feature-icon {
130+
width: 1.5em;
131+
height: 1.5em;
132+
margin-right: 0.75em;
133+
}
134+
.bottom-callout__text {
135+
display: flex;
136+
justify-content: flex-start;
137+
margin-top: 0.5rem;
138+
}
139+
.bottom-callout__link {
140+
display: flex;
141+
align-items: center;
142+
padding: 1rem 3rem;
143+
text-decoration: none !important;
144+
border-radius: 3rem;
145+
font-weight: 500;
146+
border: none;
147+
cursor: pointer;
148+
background-color: #50e3c2;
149+
color: #1c2023;
150+
stroke: #1c2023;
151+
}
152+
.bottom-callout__link:hover {
153+
background-color: #76ecd3;
154+
}
155+
.bottom-callout__link .bottom-callout__feature-icon {
156+
margin-left: 1rem;
157+
transform: translateY(2px);
158+
}
159+
.hover-green:hover {
160+
fill: #50e3c2;
161+
}
162+
.hover-gold:hover {
163+
stroke: #fcff38;
164+
}
165+
.hover-blue:hover {
166+
fill: #0d78ca;
167+
}
168+
@media (max-width: 768px) {
169+
.bottom-callout {
170+
padding: 1.5rem;
171+
}
172+
.bottom-callout__title {
173+
margin-top: 0;
174+
font-size: 1.4rem;
175+
}
176+
.bottom-callout__features, .bottom-callout__text {
177+
font-size: 1rem;
178+
}
179+
.bottom-callout__features {
180+
margin-left: 0;
181+
}
182+
}
183+
</style>

curriculum/README.md

Lines changed: 3 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# What is this course?
1+
# Web Developer Bootcamp with Flask and Python
22

33
Welcome to the Web Developer Bootcamp with Flask and Python! Thank you for embarking in this journey with me.
44

@@ -18,33 +18,8 @@ Here are the projects you'll build:
1818

1919
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!
2020

21-
Every lecture of the course has its corresponding page in this e-book, where you can find notes and code.
21+
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.
2222

2323
Let's get started!
2424

25-
:::tip
26-
Don't have the course yet?
27-
28-
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!
29-
30-
<p class="cta-container">
31-
<a href="https://www.udemy.com/course/web-developer-bootcamp-flask-python/?referralCode=2E6C9295CA26EA212CE8" class="cta-link" target="_blank">Get the video course →</a>
32-
</p>
33-
:::
34-
35-
<style>
36-
.cta-container {
37-
margin: 30px 0 35px 0;
38-
}
39-
.cta-link {
40-
padding: 16px 24px;
41-
font-size: 150%;
42-
background-color: #3eaf7c;
43-
color: white;
44-
border-radius: 6px;
45-
}
46-
47-
.cta-link:hover {
48-
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
49-
}
50-
</style>
25+
<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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,5 +79,7 @@ In this course we're going to be predominantly focusing on steps 3 and 4. We're
7979

8080
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.
8181

82+
<BottomCallout></BottomCallout>
83+
8284
[^ipv6]: [IPv6](https://www.networkworld.com/article/3254575/what-is-ipv6-and-why-aren-t-we-there-yet.html)
8385
[^server]: [What is a server?](https://www.techopedia.com/definition/2282/server)

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,8 @@ This time if you go to the [http://localhost:5000/conditionals-truthy](http://lo
186186

187187
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.
188188

189+
<BottomCallout></BottomCallout>
190+
189191
[^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.)
190192

191193
[^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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,4 +178,6 @@ Run the application and head over to [http://localhost:5000/for-loop/conditional
178178

179179
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.
180180

181+
<BottomCallout></BottomCallout>
182+
181183
[^loop-jinja2]: [Loops in Jinja2 Template](https://jinja.palletsprojects.com/en/2.11.x/templates/#for)

curriculum/section11/lectures/03_jinja_escaping/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,4 +123,6 @@ I've included the `raw` block in there to show you that that simply displays `{{
123123

124124
If you disable autoescaping (which the documentation suggests [would result in a performance boost](https://jinja.palletsprojects.com/en/3.0.x/templates/#html-escaping)), then you **should** escape all potentially unsafe strings, such as those that could contain untrusted HTML code. For example, any text that is coming from your users.
125125

126+
<BottomCallout></BottomCallout>
127+
126128
[^flask_autoescaping]: [Jinja setup (Flask docs)](https://flask.palletsprojects.com/en/2.0.x/templating/#jinja-setup)

curriculum/section13/lectures/01_what_are_sessions_cookies/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,6 @@ Here's a quick data flow diagram for server-side sessions (you can enlarge by op
5151

5252
![Server-side cookies data diagram](./assets/server-side-cookies.jpg)
5353

54+
<BottomCallout></BottomCallout>
55+
5456
[^flask_cookie_security]: [Cookie security for Flask applications (Miguel Grinberg)](https://blog.miguelgrinberg.com/post/cookie-security-for-flask-applications)

curriculum/section14/lectures/21_project_planning_with_github/README.md renamed to curriculum/section14/future-lectures/21_project_planning_with_github/README.md

File renamed without changes.

curriculum/section14/lectures/22_feature_preview_user_comments/README.md renamed to curriculum/section14/future-lectures/22_feature_preview_user_comments/README.md

File renamed without changes.

curriculum/section14/lectures/23_feature_preview_user_profiles/README.md renamed to curriculum/section14/future-lectures/23_feature_preview_user_profiles/README.md

File renamed without changes.

0 commit comments

Comments
 (0)