100 Days of Web in Python

1 Welcome to the course
2 The rules of 100DaysOfCode
3 Topics covered
4 Why Python for 100DaysOfCode
5 Course flow
6 Meet your instructors
7 Need a Python primer
8 Git the source code
9 Three devs are better than one
10 Julians setup
11 Bobs setup
12 Michaels setup
13 PyBites code challenge platform
14 Video player A quick feature tour
15 Introduction to Flask
16 Your Next 4 Days
17 Install and Setup Flask
18 Setup your Flask app as a package
19 Create initpy
20 Define your Flask app routes in routespy
21 Run your Flask app
22 Persistent FLASKAPP environment variable using pythondotenv
23 Creating a basic indexhtml Flask Template
24 Creating the basehtml Flask Template
25 A new template for a 100DaysOfCode page
26 Using CSS create Menu Bar in the Base Template
27 Day 4 Your Turn What did we learn
28 HTML Chapter Intro
29 HTML is easy right
30 A little HTML history
31 Our editor for this chapter WebStorm
32 Yahoo circa 1996
33 Building Yaahoo
34 Concept Core HTML tags
35 Form basics
36 Describing form elements
37 Clientside validation
38 Yourturn
39 Lesson introduction
40 What are APIs why you want them and API Star
41 Getting fake cars data with Mockeroo
42 API Star structure and its type system
43 API methods GET and POST testing with Postman
44 API methods PUT and DELETE
45 Testing your API with pytest
46 Day 3 4 Your turn build your own API
47 CSS chapter intro
48 Goals of this chapter
49 CSS Zen Garden
50 Concept Structure of a CSS file
51 Demo app introduction
52 Demo Exploring CSS selectors
53 Concept Inheritance and specialization
54 Demo Box model
55 Concept Controlling the box in CSS
56 Demo Layout
57 Demo Floating elements
58 Concept Floating elements
59 Areas to research further
60 Yourturn Day 2
61 Yourturn Day 3
62 Yourturn Day 4
63 Introduction Calling APIs in Flask
64 Your 4 day overview
65 Environment setup
66 Passing variables between Flask app code and a Template
67 Working with the Chuck Norris API
68 Passing our Chuck Norris joke to a Template
69 Investigating the Poke API
70 Creating a form in our Pokemon Template
71 Breaking down the Poke API response
72 Writing the Pokemon route
73 Returning the data to the Pokemon Template
74 Day 4 Your Turn What did we learn
75 Introducing asynchronous web programming
76 Synchronous execution concepts
77 Synchronous execution demo
78 Asynchronous Python execution with async and await
79 Asynchronous execution concepts
80 Your turn Day 2 Async program
81 Flask will never be async capable
82 Introducing our web app The cityscape API
83 Converting from Flask to Quart
84 Adding an async view method controller method
85 Async all the things
86 Concept Quart
87 Performance comparison Flask vs Quart
88 Your turn Day 4 Async Flask conversion
89 Lesson introduction
90 4 day plan
91 History and why JavaScript
92 How to run JS in your browser terminal IDE
93 Variables var vs let and data types
94 Arrays
95 Conditionals and control flow
96 Functions
97 Objects
98 Day 2 4 JS exercises
99 The Document Object Model DOM targeting elements
100 DOM part II addremove childs override CSS event listeners
101 Debugging JavaScript
102 Common JS gotchas
103 Further study
104 Day 4 simple calculator and calorie tracker
105 Introduction Static Sites
106 Your 4 day overview
107 What exactly is a static site anyway
108 Setup Create your repo
109 Configure Pelican
110 Writing our first post
111 Generating the site
112 Setting up and deploying to Netlify
113 Linking to static content
114 How sweet is Netlify autobuild
115 Creating a dedicated static page
116 Custom domains on Netlify
117 What did we learn
118 Introducing SQLAlchemy
119 Our demo app A scooter sharing startup
120 Who uses SQLAlchemy
121 SQLAlchemy Architecture
122 Scooter share data model
123 Setting up our app
124 Modeling with classes
125 The rest of the classes
126 Connecting to our DB
127 Creating the database schema and tables
128 The database is created
129 Relationships
130 Inserts
131 The rest of the queries
132 Importing starter data
133 Finishing the app
134 Listen to the interview
135 Your turn Days 3 and 4
136 Pyramid chapter intro
137 Our demo application
138 A spectrum of frameworks
139 Pyramid principles
140 Get back story
141 Creating the app Intro
142 Creating the app Via the CLI
143 Creating the app Via PyCharm
144 A tour of a Pyramid project
145 Reorganizing our app
146 Adding the data models
147 Home page fake data
148 Home page database data
149 HTML towards details and a better design
150 Design and hero images
151 Adding the details route
152 Paying a bill Submitting forms
153 Concept Chameleon
154 Yourturn Day 3
155 Yourturn Day 4
156 Intro what is React why use it
157 Brushing up some ES6 modern JS
158 Bootstrap our app with createreactapp
159 JSX and rendering a tip component
160 Interlude Python Tips API backend setup
161 Using classes and state in React
162 Calling the tips API using axios
163 Filter tips while typing in a search field
164 Style matching tips with reacthighlightwords
165 Day 2 build your own API frontend using React
166 Structuring our Free Monkey hangman app
167 Constructor componentDidMount and first render
168 Setting the initial game state
169 Creating letter buttons with event handlers
170 Matching guess letters and updating the state
171 Adding CSS styles to the buttons upon guessing
172 Check winloss scenarios adding a reset game button
173 Day 4 build your own game using React
174 Lesson introduction
175 The structure of this 4 day module
176 Django starter and architecture
177 Demo quote CRUD app we will build
178 Get Django up and running
179 Basic Django configuration
180 URL routing and your first view
181 Create a Django model and migrate it to the DB
182 Playing with the ORM in Djangos shell
183 Day 2 practice yourself
184 The quotes app url mapping
185 Create a Django form
186 Write a view to list all the quotes
187 Static files and the base template
188 Template settings and create a child template
189 Make a viewpage to view an individual quote
190 Write a view to add a new quote
191 Write a view to edit a quote
192 Write a view to delete a quote
193 Refactor functionbased into classbased views
194 Add the quotes app to Djangos admin interface
195 Day 4 practice yourself
196 Lesson introduction
197 Virtual environment dependencies pytest starter code fixtures
198 Seleniums findelementby methods test 1 homepage
199 Test 2 testing individual book pages and JS autocomplete
200 Test 3 testing the login using the debugger with pytest
201 Test 4 a test function for addingdeleting a book
202 Test 5 testing changing nav links upon logout
203 Optional Code Challenge test a simple Django app
204 Introducing responder
205 Key features
206 Foundational projects
207 What API will we build
208 Setting up the project
209 Adding the hello world view method
210 Using dynamic HTML templates Jinja2
211 Serving static files
212 API view methods
213 Adding a data backend
214 Implementing the search APIs
215 Cleanup and refactoring for real web apps
216 Responder core concepts
217 Introduction Twilio
218 Your single day overview
219 Twilio account setup
220 Obtaining your Twilio API key
221 Write a quick and easy Twilio SMS script
222 Twilio UI Verified numbers and usage stats
223 What did we learn
224 Chapter intro
225 What is full stack web development
226 What application will we build
227 Introducing Anvil
228 Anvils building blocks
229 Anvil New project
230 Adding navigation
231 Subforms
232 Linking the forms
233 Building the add document form
234 Add new document validation
235 Data tables
236 Serverside code
237 Creating the document in the database
238 Add doc form finale
239 All docs form
240 Adding filtering to all docs form
241 Adding filtering continued
242 Viewing document details
243 Publishing our Anvil app on the Internet
244 Concepts of Anvil
245 Lesson introduction
246 The structure of this 4 day module
247 Installing and configuring djangoregistration
248 Setting up urlspy for the twostep activation workflow
249 Setting required djangoregistration templates
250 Setting up a SendGrid account
251 Django SMTP configuration and testing out email
252 Adding login and logout links to the navigation bar
253 Update the Quote model to associate quotes with users
254 Update templates to only show edit buttons to quote owners
255 Protecting views with Djangos loginrequired decorator
256 Day 3 4 practice yourself
257 Introduction Flask Login
258 Lets start by setting some expectations
259 Your 4 day overview
260 Setup Flask and Project directory
261 Setup A Barebones Flask app
262 Define your database model
263 Specify the db object in initpy
264 Setup Install SQLite DB Browser
265 Create the database
266 Make the createuser Jinja Template
267 Add functionality to create users
268 Specify the app secret key
269 Lets add some users
270 Incorporate FlaskLogin
271 Test it Login to the app
272 Create a quick logout page
273 What did we learn
274 Introduction to db migrations
275 Seeing the problem in action
276 Installing Alembic
277 Fix an error Alembic distribution not found
278 Concept Review configuring Alembic
279 Automatically detecting schema changes
280 Where is the DB version stored
281 Concept Alembic migrations
282 Yourturn Days 2 3 and 4
283 Introduction Heroku
284 Your 4 day overview
285 Setup your Heroku account and install the Heroku CLI
286 Setting up the local app and Heroku environment
287 Deploy and launch your first Heroku app
288 What are Heroku addons
289 Install Heroku scheduler
290 Automate sending emails with Heroku scheduler
291 Heroku SendGrid addon setup
292 Use SendGrid to send an email
293 What did we learn
294 Lesson intro
295 Virtual env install dependencies and quotes app
296 Writing a custom djangoadmin command
297 Create a simple Django REST API
298 Implement the other CRUD methods
299 Django REST permissions authentication and authorization
300 API documentation with Swagger
301 Day 3 4 Your turn build your own API
302 Introduction Web Scraping
303 Your next 4 days
304 Prepare to scrape
305 Dive into BeautifulSoup4 and Talk Python
306 Write a Talk Python Training web scraping script
307 Installing and introducing newspaper3k
308 Extra Extra Student scrapes a news article
309 What did we learn
310 Lesson intro
311 4 day plan
312 Project automate 100DaysOfCode tweeting
313 Dependencies and outline script
314 Manage config data with configparser
315 Turn on logging
316 Get a tweet with requests and BeautifulSoup
317 Post to Twitter with tweepy
318 Easy command line interface with argparse
319 Day 2 Your turn Twitter API practice
320 Project random book slash command
321 Create a Slack app and slash command
322 Create a Flask app and call our books API
323 Response data and Slack message formatting
324 Testing out the slash command with ngrok
325 Day 4 Your turn Slack API practice
326 Why test web apps
327 Testing challenges of web applications
328 3 types of tests
329 Setting up the app to be tested
330 Adding view models
331 View models applied to details page
332 View models and forms
333 Concept View models
334 Our first unit test
335 Mocking out database access
336 More view model tests
337 Concept View model unit tests
338 View unit tests index page
339 Running all the tests at once
340 Concept Testing view methods
341 Writing the functional tests
342 Concept Functional tests
343 Concept Web testing pareto principle
344 Your turn Testing a web app
345 Lesson intro
346 A practical Lambda use case CodeChallenges
347 4 day plan PEP8 Checker app setup
348 Build a simple Bottle web app
349 First Lambda a simple calculator using operator
350 Creating Lambda test events
351 The glue setting up AWS Gateway API
352 Second Lambda PEP8 Checker using pycodestyle
353 Uploading a Lambda with external dependencies
354 Day 3 4 Your turn create your own Lambda
355 Deploy introduction
356 Deployment moving parts overview
357 Deployment What app to install
358 Where to host our server
359 Creating our virtual server
360 Connecting and updating the Linux server
361 Server software config
362 Getting the Python source files on the server
363 Setting up uWSGI
364 Serving through nginx
365 A final checkin on the server
366 Concept uWSGI setup
367 Concept nginx setup
368 Deploying Flask web apps
369 Deploying Django web apps
370 Your turn Deployment
371 Vuejs Chapter Introduction
372 What does a simple Vuejs app look like
373 The starter project Movie Exploder
374 Creating the Vue app instance
375 Enabling the Vuejs Plugin in PyCharm and WebStorm
376 Repeating data and HTML blocks
377 Concept Repeating data
378 First with fake data
379 Detailed movie details
380 Conditional rendering
381 Concept Conditional rendering
382 Searching movies event
383 Top ten button
384 Displaying and selecting genres
385 A nicer dropdown
386 Selecting the genre
387 Install the Vuejs devtools
388 Your turn Day 2
389 Searching movies via the API and axios
390 Concept Calling API with axios
391 Genres via the service
392 Top 10 movies from API
393 Movies by genre through the API
394 Setting attributes with Vuejs
395 Look no semicolons
396 Your turn Day 4
397 Introduction to Docker chapter
398 Container history Boats
399 Container history Operating systems
400 Installing Docker on macOS Windows and Linux
401 Docker nomenclature
402 Code setup
403 Choosing a Docker base image
404 Running a Docker container
405 Productivity with Docker plugins for Pycharm
406 Building a Docker image
407 Installing glances
408 Nginx config for our static site
409 Serving external traffic from Docker
410 Using the local services container
411 Docker image for our Python services
412 Running the system as a whole
413 Docker cleanup and reclaiming disk space
414 Keep your Docker DRY refactoring
415 Concept Dockerfile for the static site
416 Concept Core Docker commands
417 Yourturn day 2
418 Concept Introduction to dockercompose
419 Building the services with dockercompose
420 Yourturn day 4
421 Youve done it
422 What youve learned
423 Make sure you have the source
424 Stay immersed in Python
425 Continue to challenge yourself with PyBites
426 Thanks and goodbye