title
Python Flask From Scratch - [Part 1] - Getting Started

description
In this video we will start the project and install Flask using pip. We will create the main app.py file and create some routes and render some templates CODE: Code for this video https://github.com/bradtraversy/myflaskapp Python Crash Course: https://www.youtube.com/watch?v=oy4GOI9vn5M&t=1503s SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.linkedin.com/bradtraversy

detail
{'title': 'Python Flask From Scratch - [Part 1] - Getting Started', 'heatmap': [{'end': 967.788, 'start': 928.233, 'weight': 1}], 'summary': 'Learn to build a python application using flask with full authentication, crud operations, and ckforms for wysiwyg editor. set up the development environment for web development, including linux ubuntu, python, mysql installation, and options for windows users. explore flask app layout, template rendering, adding bootstrap navbar, creating webpage routes, and adding articles with database planning for integration in the next video.', 'chapters': [{'end': 161.715, 'segs': [{'end': 36.009, 'src': 'embed', 'start': 0.626, 'weight': 0, 'content': [{'end': 1.567, 'text': "hey, what's going on, guys?", 'start': 0.626, 'duration': 0.941}, {'end': 3.508, 'text': 'welcome to another project series.', 'start': 1.567, 'duration': 1.941}, {'end': 10.294, 'text': "in this series we'll be building an application using python as well as the flask framework.", 'start': 3.508, 'duration': 6.786}, {'end': 14.877, 'text': "now that may surprise some of you, because i haven't done too much with python on my channel,", 'start': 10.294, 'duration': 4.583}, {'end': 19.241, 'text': "but i've been using it off of youtube quite a bit and i've really grown to like it,", 'start': 14.877, 'duration': 4.364}, {'end': 23.904, 'text': 'and i think a lot of you guys could benefit by at least getting your feet wet with uh.', 'start': 19.241, 'duration': 4.663}, {'end': 28.107, 'text': "with the python programming language, Even if you've never used it before.", 'start': 23.904, 'duration': 4.203}, {'end': 36.009, 'text': 'I would suggest watching it, because you should be able to follow along, as long as you have some basic understanding of programming principles.', 'start': 28.107, 'duration': 7.902}], 'summary': 'Building an application using python and flask framework for programming enthusiasts.', 'duration': 35.383, 'max_score': 0.626, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A626.jpg'}, {'end': 91.615, 'src': 'embed', 'start': 60.136, 'weight': 2, 'content': [{'end': 64.316, 'text': "It's also very light, and it gives us the freedom to basically do what we want.", 'start': 60.136, 'duration': 4.18}, {'end': 67.199, 'text': 'All right, so this is the application here.', 'start': 64.337, 'duration': 2.862}, {'end': 71.54, 'text': 'Now, as far as functionality, we have full authentication.', 'start': 67.939, 'duration': 3.601}, {'end': 81.084, 'text': "You can see we can go to the register page, and we're using the Flask WTF or WTF or WT forms, I believe it is.", 'start': 71.56, 'duration': 9.524}, {'end': 84.627, 'text': 'And that comes along with some really nice validation.', 'start': 81.804, 'duration': 2.823}, {'end': 91.615, 'text': "You'll see if we try to submit, we'll get the validation info under each form here or under each field.", 'start': 84.667, 'duration': 6.948}], 'summary': 'A lightweight application with full authentication and flask wtf forms for validation.', 'duration': 31.479, 'max_score': 60.136, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A60136.jpg'}, {'end': 140.303, 'src': 'embed', 'start': 110.245, 'weight': 1, 'content': [{'end': 113.086, 'text': 'We could do create, read, update, and delete.', 'start': 110.245, 'duration': 2.841}, {'end': 116.007, 'text': 'You can see we have an ID, title, author, date.', 'start': 113.146, 'duration': 2.861}, {'end': 118.588, 'text': 'We can edit the articles.', 'start': 116.827, 'duration': 1.761}, {'end': 122.489, 'text': 'We can create articles with the title and body.', 'start': 119.148, 'duration': 3.341}, {'end': 124.71, 'text': 'You can add more fields if you want.', 'start': 123.209, 'duration': 1.501}, {'end': 128.576, 'text': 'And you can see I implemented a WYSIWYG editor.', 'start': 125.714, 'duration': 2.862}, {'end': 130.377, 'text': "We're using CKForms for that.", 'start': 128.596, 'duration': 1.781}, {'end': 132.899, 'text': "And let's go ahead and create an article.", 'start': 131.056, 'duration': 1.843}, {'end': 135.22, 'text': "I'll just say another article.", 'start': 132.979, 'duration': 2.241}, {'end': 140.303, 'text': 'And in here, the body, I believe it has to be at least 30 characters.', 'start': 136.281, 'duration': 4.022}], 'summary': 'The system allows crud operations for articles, with a wysiwyg editor. the body must be at least 30 characters.', 'duration': 30.058, 'max_score': 110.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A110245.jpg'}], 'start': 0.626, 'title': 'Building python application with flask', 'summary': 'Introduces building a python application using flask framework with emphasis on python benefits and functionality including full authentication, crud operations, and implementation of ckforms for wysiwyg editor.', 'chapters': [{'end': 161.715, 'start': 0.626, 'title': 'Building python application with flask', 'summary': 'Introduces building a python application using flask framework, emphasizing the benefits of python, the functionality of the application including full authentication, crud operations, and the implementation of ckforms for wysiwyg editor.', 'duration': 161.089, 'highlights': ['The chapter introduces building a Python application using Flask framework. It emphasizes the focus on using Python with Flask for application development.', 'The application includes full authentication with validation using Flask WTF forms. It highlights the implementation of full authentication with validation using Flask WTF forms.', 'The functionality of the application encompasses CRUD operations for articles, including create, read, update, and delete. It emphasizes the inclusion of CRUD operations for articles, providing a comprehensive functionality.', 'The implementation of CKForms for WYSIWYG editor is showcased. It highlights the utilization of CKForms for implementing a WYSIWYG editor in the application.']}], 'duration': 161.089, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A626.jpg', 'highlights': ['The chapter introduces building a Python application using Flask framework. It emphasizes the focus on using Python with Flask for application development.', 'The functionality of the application encompasses CRUD operations for articles, including create, read, update, and delete. It emphasizes the inclusion of CRUD operations for articles, providing a comprehensive functionality.', 'The application includes full authentication with validation using Flask WTF forms. It highlights the implementation of full authentication with validation using Flask WTF forms.', 'The implementation of CKForms for WYSIWYG editor is showcased. It highlights the utilization of CKForms for implementing a WYSIWYG editor in the application.']}, {'end': 617.998, 'segs': [{'end': 258.913, 'src': 'embed', 'start': 161.715, 'weight': 0, 'content': [{'end': 165.978, 'text': "we also have an about page, and that's pretty much it.", 'start': 161.715, 'duration': 4.263}, {'end': 172.523, 'text': "so on the surface it's very, very simple, but there is quite a bit of code, as we're doing everything basically from scratch.", 'start': 165.978, 'duration': 6.545}, {'end': 179.243, 'text': "Now, as far as a dev environment, I'm using Linux Ubuntu, which is obviously Unix-based.", 'start': 173.479, 'duration': 5.764}, {'end': 183.666, 'text': "If you're using Linux or Mac, you should be able to follow along pretty much exact.", 'start': 179.703, 'duration': 3.963}, {'end': 189.991, 'text': 'But for Windows, you will need to download Python from python.org.', 'start': 184.427, 'duration': 5.564}, {'end': 194.414, 'text': "run the executable, go through the installation and you'll also have to set up pip.", 'start': 189.991, 'duration': 4.423}, {'end': 202.68, 'text': "uh, which is the python package manager, and if enough of you are having issues with that and you can't find any other resource,", 'start': 195.234, 'duration': 7.446}, {'end': 206.783, 'text': "let me know in the comments and i'll see if i can do, uh.", 'start': 202.68, 'duration': 4.103}, {'end': 210.926, 'text': 'an extra video to show you how to get that set up now.', 'start': 206.783, 'duration': 4.143}, {'end': 215.29, 'text': "we will be using mysql as our database, so we're gonna get that installed too.", 'start': 210.926, 'duration': 4.364}, {'end': 223.077, 'text': "if you're using windows, you might want to look into xamp, which I've worked with quite a bit on my channel, if you guys have been following along.", 'start': 215.29, 'duration': 7.787}, {'end': 228.723, 'text': 'That gives you basically Apache, gives you an Apache server, PHP, as well as MySQL.', 'start': 223.738, 'duration': 4.985}, {'end': 233.108, 'text': "It says MariaDB here, but that's just a drop-in for MySQL.", 'start': 229.164, 'duration': 3.944}, {'end': 234.325, 'text': 'All right.', 'start': 234.005, 'duration': 0.32}, {'end': 239.227, 'text': "So as far as Python two or three, you can use either for what we're doing.", 'start': 234.445, 'duration': 4.782}, {'end': 244.008, 'text': "It really doesn't matter as long as if you're using three, it's three point three or higher.", 'start': 239.267, 'duration': 4.741}, {'end': 251.17, 'text': 'OK, because Flask does not support Python three point two or older than that.', 'start': 244.508, 'duration': 6.662}, {'end': 256.952, 'text': "OK, so I think that's it as far as explaining the application and what we're doing.", 'start': 251.331, 'duration': 5.621}, {'end': 258.913, 'text': "So let's go ahead and get started.", 'start': 257.392, 'duration': 1.521}], 'summary': 'Developing a simple web application with flask, using linux/unix-based environment, and mysql database. python 3.3+ and xampp for windows.', 'duration': 97.198, 'max_score': 161.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A161715.jpg'}, {'end': 317.125, 'src': 'embed', 'start': 286.535, 'weight': 5, 'content': [{'end': 293.677, 'text': 'So what I want to do first is install pip, which is basically the package manager for Python.', 'start': 286.535, 'duration': 7.142}, {'end': 303.74, 'text': "So we want to do sudo apt-get install, and I'm going to say python3-pip.", 'start': 294.197, 'duration': 9.543}, {'end': 307.281, 'text': 'Okay, so I actually already had it installed.', 'start': 305.641, 'duration': 1.64}, {'end': 308.382, 'text': "That's why it went so quick.", 'start': 307.301, 'duration': 1.081}, {'end': 311.743, 'text': "Let's see what I want to do now.", 'start': 310.543, 'duration': 1.2}, {'end': 314.084, 'text': "Now we're going to use pip to install flask.", 'start': 311.883, 'duration': 2.201}, {'end': 317.125, 'text': "I'm just going to go to my project folder first.", 'start': 315.084, 'duration': 2.041}], 'summary': 'Installed python3-pip using sudo apt-get install. next step is to install flask using pip.', 'duration': 30.59, 'max_score': 286.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A286535.jpg'}, {'end': 398.557, 'src': 'embed', 'start': 374.703, 'weight': 6, 'content': [{'end': 382.408, 'text': "When I'm doing web development with Django or Flask, I want to use either Atom, Sublime Text, or Visual Studio Code.", 'start': 374.703, 'duration': 7.705}, {'end': 386.07, 'text': 'Those are the three that I kind of switch back and forth from.', 'start': 382.968, 'duration': 3.102}, {'end': 391.533, 'text': "So I'm going to open up project folder and it's going to be my flask app.", 'start': 386.67, 'duration': 4.863}, {'end': 396.236, 'text': 'Okay So the first file we want to create is going to be called app dot pie.', 'start': 392.153, 'duration': 4.083}, {'end': 398.557, 'text': 'And this is basically like the entry file.', 'start': 396.276, 'duration': 2.281}], 'summary': 'Developer uses atom, sublime text, or visual studio code for web development with django or flask.', 'duration': 23.854, 'max_score': 374.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A374703.jpg'}, {'end': 537.963, 'src': 'embed', 'start': 506.933, 'weight': 7, 'content': [{'end': 512.716, 'text': "the reason for that is because we haven't created a route for our home or index.", 'start': 506.933, 'duration': 5.783}, {'end': 517.977, 'text': "so let's go back to app.py and we can now take this app variable.", 'start': 512.716, 'duration': 5.261}, {'end': 528.002, 'text': 'we can say at app and say dot route and in here we want the route, which is going to be just a slash.', 'start': 517.977, 'duration': 10.025}, {'end': 536.422, 'text': "and let's see we want to, uh, create a function right here and say def, let's call it index.", 'start': 528.002, 'duration': 8.42}, {'end': 537.963, 'text': "You can actually call it whatever you'd like.", 'start': 536.462, 'duration': 1.501}], 'summary': "App.py needs a route for home/index, using app.route('/') and a function called index.", 'duration': 31.03, 'max_score': 506.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A506933.jpg'}, {'end': 617.998, 'src': 'embed', 'start': 589.888, 'weight': 8, 'content': [{'end': 599.994, 'text': "excuse me, so i'll save that and then we'll restart one one more time and you can see it says debugger is active and if we go reload, we have index 2.", 'start': 589.888, 'duration': 10.106}, {'end': 607.198, 'text': "if i were to take that out and save reload and now you can see it updated and we didn't have to restart the server.", 'start': 599.994, 'duration': 7.204}, {'end': 614.416, 'text': "So, as you can see, it's pretty simple to create a route in Flask.", 'start': 609.033, 'duration': 5.383}, {'end': 617.998, 'text': "Now, normally, we're not going to return a string like this.", 'start': 614.917, 'duration': 3.081}], 'summary': 'In flask, creating a route is simple, as demonstrated by the debugger indicating index 2 and the ability to update without server restart.', 'duration': 28.11, 'max_score': 589.888, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A589888.jpg'}], 'start': 161.715, 'title': 'Setting up development environment for web development', 'summary': 'Discusses setting up a development environment for web development, including linux ubuntu, python, mysql installation, and options for windows users. it also mentions the potential for an additional video tutorial on setting up pip for python. additionally, it covers setting up a flask application using python 2 or 3, installing pip and flask, creating an entry file, testing the application, creating a route for the home page, and enabling debug mode.', 'chapters': [{'end': 234.325, 'start': 161.715, 'title': 'Setting up development environment for web development', 'summary': 'Discusses the process of setting up a development environment for web development, including the use of linux ubuntu, the installation of python and mysql, and options for windows users. it also mentions the potential for an additional video tutorial on setting up pip for python.', 'duration': 72.61, 'highlights': ['The chapter discusses the use of Linux Ubuntu as the development environment, which is Unix-based and suitable for Linux and Mac users to follow along.', 'It mentions the need for Windows users to download Python from python.org, run the executable, and set up pip for the Python package manager.', 'The chapter mentions the use of MySQL as the database and suggests Windows users look into xamp, which provides Apache, PHP, and MySQL.', 'The speaker offers to create an additional video tutorial to help viewers set up pip if they encounter difficulties, demonstrating potential responsiveness to user feedback.']}, {'end': 617.998, 'start': 234.445, 'title': 'Getting started with flask and python', 'summary': 'Covers setting up a flask application using python 2 or 3, installing pip and flask, creating an entry file, testing the application, creating a route for the home page, and enabling debug mode to update without restarting the server.', 'duration': 383.553, 'highlights': ['Setting up a Flask application using Python 2 or 3, with Flask supporting Python 3.3 or higher. The chapter explains that Flask supports Python 2 or 3, with Flask requiring Python 3.3 or higher.', 'Installing pip and flask for package management and creating a Flask application. The process involves installing pip for package management and flask for creating the Flask application.', "Creating an entry file 'app.py' to initiate the Flask application. The tutorial demonstrates creating an entry file 'app.py' that serves as the entry point for the Flask application.", "Testing the application and creating a route for the home page to display 'index'. The process involves testing the application and creating a route for the home page to display 'index'.", 'Enabling debug mode to update without restarting the server. The chapter explains how to enable debug mode in Flask to update the application without restarting the server.']}], 'duration': 456.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A161715.jpg', 'highlights': ['The chapter discusses setting up a development environment using Linux Ubuntu, suitable for Linux and Mac users.', 'Windows users need to download Python from python.org and set up pip for the Python package manager.', 'The chapter mentions the use of MySQL as the database and suggests Windows users look into xamp for Apache, PHP, and MySQL.', 'The speaker offers to create an additional video tutorial to help viewers set up pip if they encounter difficulties.', 'Flask supports Python 2 or 3, with Flask requiring Python 3.3 or higher.', 'The process involves installing pip for package management and flask for creating the Flask application.', "The tutorial demonstrates creating an entry file 'app.py' that serves as the entry point for the Flask application.", "The process involves testing the application and creating a route for the home page to display 'index'.", 'The chapter explains how to enable debug mode in Flask to update the application without restarting the server.']}, {'end': 899.052, 'segs': [{'end': 648.451, 'src': 'embed', 'start': 618.078, 'weight': 0, 'content': [{'end': 619.399, 'text': "We're going to return a template.", 'start': 618.078, 'duration': 1.321}, {'end': 625.523, 'text': 'So we can use a function called render template, but that has to be imported from Flask as well.', 'start': 619.92, 'duration': 5.603}, {'end': 629.725, 'text': "So right here, we're going to bring in render underscore template.", 'start': 625.563, 'duration': 4.162}, {'end': 641.09, 'text': 'And then we can simply say actually we want to return, render template and then pass in here.', 'start': 630.886, 'duration': 10.204}, {'end': 643.81, 'text': "let's say index.", 'start': 641.09, 'duration': 2.72}, {'end': 648.451, 'text': 'all right, because we want to render a template called index HTML.', 'start': 643.81, 'duration': 4.641}], 'summary': "Using flask to render template 'index.html'", 'duration': 30.373, 'max_score': 618.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A618078.jpg'}, {'end': 727.552, 'src': 'embed', 'start': 702.254, 'weight': 1, 'content': [{'end': 708.159, 'text': 'We want to have a layout that will include that stuff and then wrap the current view or the current template.', 'start': 702.254, 'duration': 5.905}, {'end': 720.808, 'text': 'So what we can do is in templates create a new file called layout.html And here we can put our normal HTML head tags and body tags and all that.', 'start': 708.799, 'duration': 12.009}, {'end': 723.49, 'text': "For the title, we'll just say My Flask App.", 'start': 720.968, 'duration': 2.522}, {'end': 727.552, 'text': 'And we can include our scripts and all that.', 'start': 725.531, 'duration': 2.021}], 'summary': 'Creating a new layout.html file for flask app with head and body tags.', 'duration': 25.298, 'max_score': 702.254, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A702254.jpg'}, {'end': 835.287, 'src': 'embed', 'start': 794.85, 'weight': 3, 'content': [{'end': 804.093, 'text': "All right, so now if we save that, make sure layout's saved as well, and we go and reload, you'll see that now in the title bar it says My Flask App.", 'start': 794.85, 'duration': 9.243}, {'end': 809.815, 'text': "And if we look at the source code, it includes the head, the body, all that stuff that's in the layout file.", 'start': 804.213, 'duration': 5.602}, {'end': 814.897, 'text': "So now we don't have to repeat this stuff on every single template or every view.", 'start': 810.215, 'duration': 4.682}, {'end': 817.678, 'text': "When I say template and view, it's basically the same thing.", 'start': 815.297, 'duration': 2.381}, {'end': 824.62, 'text': "So now what we want to do is we're going to use Bootstrap for this.", 'start': 819.056, 'duration': 5.564}, {'end': 832.045, 'text': "Now, initially, I was going to use the Flask Bootstrap module, but it's a little weird, and I think it would kind of throw some of you guys off.", 'start': 824.72, 'duration': 7.325}, {'end': 835.287, 'text': "It doesn't allow you to use your own layout HTML.", 'start': 832.786, 'duration': 2.501}], 'summary': 'Using bootstrap in flask app to avoid repetitive code, flask bootstrap module limitations.', 'duration': 40.437, 'max_score': 794.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A794850.jpg'}], 'start': 618.078, 'title': 'Flask app layout and template rendering', 'summary': 'Covers using flask to render templates, creating a layout for reusability, and specifying the title for the flask app. it also explains implementing bootstrap using cdn to customize the layout.', 'chapters': [{'end': 727.552, 'start': 618.078, 'title': 'Flask template rendering', 'summary': "Covers using flask to render templates, creating a layout for reusability, and specifying the title for the flask app, with a focus on rendering the 'home' template and creating a 'layout.html' file with 'my flask app' as the title.", 'duration': 109.474, 'highlights': ["Using Flask to render templates, such as rendering 'home HTML' using the 'render_template' function, is demonstrated.", "Creating a 'layout.html' file to avoid code repetition by including common HTML head and body tags, with 'My Flask App' specified as the title, is explained."]}, {'end': 899.052, 'start': 728.272, 'title': 'Flask app layout and bootstrap implementation', 'summary': 'Explains how to use block tags in flask to create a layout file, insert content, and implement bootstrap using cdn, thus avoiding repetitive code and customizing the layout for a flask app.', 'duration': 170.78, 'highlights': ['The chapter explains how to use block tags in Flask to create a layout file, insert content, and implement Bootstrap using CDN, thus avoiding repetitive code and customizing the layout for a Flask app.', 'By using block tags and extending the layout file, repetitive code is avoided, enhancing efficiency and maintainability of the Flask app.', 'The implementation of Bootstrap using CDN is preferred over the Flask Bootstrap module due to its flexibility and customization options for the layout of the Flask app.']}], 'duration': 280.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A618078.jpg', 'highlights': ["Using Flask to render templates, such as rendering 'home HTML' using the 'render_template' function, is demonstrated.", "Creating a 'layout.html' file to avoid code repetition by including common HTML head and body tags, with 'My Flask App' specified as the title, is explained.", 'The chapter explains how to use block tags in Flask to create a layout file, insert content, and implement Bootstrap using CDN, thus avoiding repetitive code and customizing the layout for a Flask app.', 'By using block tags and extending the layout file, repetitive code is avoided, enhancing efficiency and maintainability of the Flask app.', 'The implementation of Bootstrap using CDN is preferred over the Flask Bootstrap module due to its flexibility and customization options for the layout of the Flask app.']}, {'end': 1158.457, 'segs': [{'end': 967.788, 'src': 'heatmap', 'start': 928.233, 'weight': 1, 'content': [{'end': 934.497, 'text': "Yeah, underscore, nav bar dot, HTML, and I used an underscore because it's only a partial file.", 'start': 928.233, 'duration': 6.264}, {'end': 946.224, 'text': "Alright, so let's go to get bootstrap comm and go to getting started and Then to examples, and I'm gonna click on the starter template.", 'start': 934.497, 'duration': 11.727}, {'end': 953.658, 'text': "do a control you and we're gonna grab this nav tag right here and Okay, so we'll paste that in navbar.", 'start': 946.224, 'duration': 7.434}, {'end': 955.419, 'text': "I'm going to change a couple things.", 'start': 953.998, 'duration': 1.421}, {'end': 957.821, 'text': "I'm going to get rid of the fixed top class.", 'start': 955.439, 'duration': 2.382}, {'end': 962.124, 'text': "I'm also going to change navbar inverse to navbar default.", 'start': 958.361, 'duration': 3.763}, {'end': 963.465, 'text': "That'll make it lighter.", 'start': 962.444, 'duration': 1.021}, {'end': 967.788, 'text': 'And then the project name will just say My Flask App.', 'start': 964.165, 'duration': 3.623}], 'summary': 'Created a navbar using html and bootstrap for a flask app.', 'duration': 39.555, 'max_score': 928.233, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A928233.jpg'}, {'end': 1035.298, 'src': 'embed', 'start': 972.331, 'weight': 1, 'content': [{'end': 975.533, 'text': 'About is going to go to slash about.', 'start': 972.331, 'duration': 3.202}, {'end': 978.976, 'text': "And then we're also going to have an articles link here.", 'start': 976.614, 'duration': 2.362}, {'end': 983.242, 'text': "and that's going to go to slash articles.", 'start': 979.881, 'duration': 3.361}, {'end': 993.143, 'text': "these are going to work yet, though, and then i just want to remove this class active, so we'll save that now to include it in our layout.", 'start': 983.242, 'duration': 9.901}, {'end': 1003.245, 'text': 'all we have to do is use that these tags and we can simply say include, and then we want to include unders.', 'start': 993.143, 'duration': 10.102}, {'end': 1010.726, 'text': "no, includes, which is the folder it's in underscore navbar.html.", 'start': 1003.245, 'duration': 7.481}, {'end': 1013.607, 'text': "So let's see if that works.", 'start': 1012.547, 'duration': 1.06}, {'end': 1016.028, 'text': 'Good So now we have a navbar.', 'start': 1014.228, 'duration': 1.8}, {'end': 1019.67, 'text': "These links aren't going to work yet, just the home.", 'start': 1016.669, 'duration': 3.001}, {'end': 1025.833, 'text': "Now I want to move everything that's down here into a container class so it's pushed over to the side.", 'start': 1020.691, 'duration': 5.142}, {'end': 1035.298, 'text': "So what I'll do is just wrap the body block here in the class of container.", 'start': 1026.773, 'duration': 8.525}], 'summary': 'Configuring website layout and navigation, adding navbar and container class.', 'duration': 62.967, 'max_score': 972.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A972331.jpg'}, {'end': 1135.827, 'src': 'embed', 'start': 1098.422, 'weight': 0, 'content': [{'end': 1100.383, 'text': 'So def call this about.', 'start': 1098.422, 'duration': 1.961}, {'end': 1106.365, 'text': 'And we want to return render template.', 'start': 1102.844, 'duration': 3.521}, {'end': 1110.106, 'text': 'And this is going to be about.html.', 'start': 1107.625, 'duration': 2.481}, {'end': 1113.708, 'text': 'Save that.', 'start': 1113.147, 'duration': 0.561}, {'end': 1115.088, 'text': "And then let's create the template.", 'start': 1113.788, 'duration': 1.3}, {'end': 1120.756, 'text': "Okay, and I'm going to copy what we have in home.", 'start': 1118.715, 'duration': 2.041}, {'end': 1127.101, 'text': 'Okay, this is basically the core structure of all our pages.', 'start': 1120.776, 'duration': 6.325}, {'end': 1129.883, 'text': "It's going to extend layout and have a block body.", 'start': 1127.181, 'duration': 2.702}, {'end': 1131.884, 'text': 'Okay, but we want to get rid of that.', 'start': 1130.523, 'duration': 1.361}, {'end': 1134.046, 'text': "And let's just do an H1.", 'start': 1132.785, 'duration': 1.261}, {'end': 1135.827, 'text': "Let's say about us.", 'start': 1134.306, 'duration': 1.521}], 'summary': "Creating a new about.html template with 'about us' heading.", 'duration': 37.405, 'max_score': 1098.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A1098422.jpg'}], 'start': 899.052, 'title': 'Adding bootstrap navbar and creating webpage routes', 'summary': 'Covers adding a bootstrap navbar to a layout, creating web development navbar and container class, and creating routes and templates for webpages. it includes specific modifications, applying container class, and creating functional homepage and about page.', 'chapters': [{'end': 1003.245, 'start': 899.052, 'title': 'Adding bootstrap navbar to layout', 'summary': 'Explains how to add a bootstrap navbar to a layout using an include file, with specific modifications and links, and how to include it on every page.', 'duration': 104.193, 'highlights': ['Explaining the process of adding a Bootstrap navbar to a layout using an include file. None', "Modifying the navbar by removing the fixed top class, changing navbar inverse to navbar default, and updating the project name to 'My Flask App'. None", "Adding links for 'Home', 'About', and 'Articles' to the navbar. None", 'Using the include tag to incorporate the navbar in the layout, ensuring it appears on every page. None']}, {'end': 1065.286, 'start': 1003.245, 'title': 'Web development: creating navbar and container class', 'summary': 'Discusses the process of creating a navbar and applying a container class to push content to the side, with a focus on adding home content in html.', 'duration': 62.041, 'highlights': ['The speaker demonstrates creating a navbar and applying a container class to push content over to the side.', 'The focus is on adding home content in HTML, specifically using a div with the class of jumbotron and text center.', 'The process involves moving existing content into a container class and making adjustments to the layout.']}, {'end': 1158.457, 'start': 1065.706, 'title': 'Creating routes and templates for webpages', 'summary': 'Demonstrates creating routes for homepage and about page, along with creating corresponding templates, with a focus on adding the about route, and creating the about.html template, resulting in a functional homepage and about page.', 'duration': 92.751, 'highlights': ['The chapter demonstrates creating routes for homepage and about page, along with creating corresponding templates.', 'The focus is on adding the about route and creating the about.html template.', 'The resulting outcome is a functional homepage and about page.']}], 'duration': 259.405, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A899052.jpg', 'highlights': ['The chapter demonstrates creating routes for homepage and about page, along with creating corresponding templates.', 'The process involves moving existing content into a container class and making adjustments to the layout.', "Adding links for 'Home', 'About', and 'Articles' to the navbar.", 'The focus is on adding the about route and creating the about.html template.']}, {'end': 1726.719, 'segs': [{'end': 1260.885, 'src': 'embed', 'start': 1187.393, 'weight': 0, 'content': [{'end': 1189.214, 'text': "Later on we're going to implement a database.", 'start': 1187.393, 'duration': 1.821}, {'end': 1202.624, 'text': "So I'm going to create a new file in the root here called data.py, and then in here what we're going to do is define a function called articles,", 'start': 1189.955, 'duration': 12.669}, {'end': 1210.848, 'text': "And then in here we're going to create a variable called articles and set that to a set of brackets.", 'start': 1205.184, 'duration': 5.664}, {'end': 1215.452, 'text': 'And then each article is going to go in these curly braces.', 'start': 1211.429, 'duration': 4.023}, {'end': 1218.694, 'text': 'So each article will have an ID.', 'start': 1216.172, 'duration': 2.522}, {'end': 1221.916, 'text': "In this case, we'll just use one.", 'start': 1218.714, 'duration': 3.202}, {'end': 1223.297, 'text': "It'll have a name.", 'start': 1222.497, 'duration': 0.8}, {'end': 1229.242, 'text': "We'll say article one.", 'start': 1223.317, 'duration': 5.925}, {'end': 1230.943, 'text': 'Actually, I want this to be title, not name.', 'start': 1229.362, 'duration': 1.581}, {'end': 1235.429, 'text': "We'll have a body.", 'start': 1234.248, 'duration': 1.181}, {'end': 1240.61, 'text': "I'm just going to type lorem and then tab.", 'start': 1235.449, 'duration': 5.161}, {'end': 1243.151, 'text': 'And we want a comma at the end here.', 'start': 1241.571, 'duration': 1.58}, {'end': 1247.753, 'text': "And then after body, we're going to have author.", 'start': 1243.171, 'duration': 4.582}, {'end': 1252.035, 'text': "I'm just going to put my name.", 'start': 1247.773, 'duration': 4.262}, {'end': 1255.716, 'text': 'And then we want a create date.', 'start': 1253.735, 'duration': 1.981}, {'end': 1260.885, 'text': "Okay, for now we're just going to use a string.", 'start': 1259.164, 'duration': 1.721}], 'summary': "Creating a database file 'data.py' with article details and author information", 'duration': 73.492, 'max_score': 1187.393, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A1187393.jpg'}, {'end': 1345.945, 'src': 'embed', 'start': 1318.234, 'weight': 1, 'content': [{'end': 1330.741, 'text': "let's go right here and we're going to create a variable called articles and set it equal to that articles function to the return value which is going to be articles,", 'start': 1318.234, 'duration': 12.507}, {'end': 1331.561, 'text': 'which is this here', 'start': 1330.741, 'duration': 0.82}, {'end': 1333.582, 'text': 'All right.', 'start': 1331.581, 'duration': 2.001}, {'end': 1335.944, 'text': 'And now what we want to do is create a new route.', 'start': 1333.843, 'duration': 2.101}, {'end': 1337.545, 'text': "I'll just copy this.", 'start': 1335.964, 'duration': 1.581}, {'end': 1343.008, 'text': 'And this is going to be slash articles.', 'start': 1340.346, 'duration': 2.662}, {'end': 1345.945, 'text': 'Change the name of the function.', 'start': 1344.665, 'duration': 1.28}], 'summary': "Creating a variable 'articles' with a return value of articles function and a new route '/articles'.", 'duration': 27.711, 'max_score': 1318.234, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A1318234.jpg'}, {'end': 1718.33, 'src': 'embed', 'start': 1686.85, 'weight': 2, 'content': [{'end': 1693.533, 'text': "But like I said, when we implement MySQL, we'll be passing in the entire article.", 'start': 1686.85, 'duration': 6.683}, {'end': 1697.774, 'text': "All right, so let's see where we're at now.", 'start': 1693.553, 'duration': 4.221}, {'end': 1701.316, 'text': 'I think this may be a good place to stop.', 'start': 1697.794, 'duration': 3.522}, {'end': 1706.779, 'text': "So in the next video, what we'll do is we'll install MySQL.", 'start': 1702.935, 'duration': 3.844}, {'end': 1713.906, 'text': "We will install the Flask MySQL module, and we'll start to work on the user registration.", 'start': 1706.999, 'duration': 6.907}, {'end': 1718.33, 'text': "We'll create the form and possibly the logic, and we'll go from there.", 'start': 1714.727, 'duration': 3.603}], 'summary': 'In the next video, they will install mysql, flask mysql module, and start working on user registration.', 'duration': 31.48, 'max_score': 1686.85, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A1686850.jpg'}], 'start': 1159.197, 'title': 'Web development', 'summary': 'Focuses on adding articles and planning for a database, creating articles with names and authors, exporting the data, creating routes to display the articles, and preparing for integrating mysql and user registration in the next video.', 'chapters': [{'end': 1218.694, 'start': 1159.197, 'title': 'Web development: adding articles and planning for database', 'summary': 'Focuses on creating a file to hold data for articles, planning to implement a database later, and defining the structure for articles retrieval.', 'duration': 59.497, 'highlights': ['A file called data.py will be created to hold the data for the articles.', 'The plan is to implement a database later on.', 'A function called articles will be defined to structure the retrieval of articles.']}, {'end': 1726.719, 'start': 1218.714, 'title': 'Creating articles and routes', 'summary': 'Discusses creating articles with names and authors, exporting the data, creating routes to display the articles, and preparing for integrating mysql and user registration in the next video.', 'duration': 508.005, 'highlights': ['Creating articles with names, bodies, authors, and create dates The chapter discusses creating articles with names and authors, exporting the data, and preparing for integrating MySQL and user registration in the next video.', 'Creating routes to display the articles The chapter covers creating routes to display the articles and preparing for integrating MySQL and user registration in the next video.', 'Preparing for integrating MySQL and user registration in the next video The chapter prepares for integrating MySQL and user registration in the next video, continuing the development process.']}], 'duration': 567.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/zRwy8gtgJ1A/pics/zRwy8gtgJ1A1159197.jpg', 'highlights': ['Creating articles with names, bodies, authors, and create dates', 'Creating routes to display the articles', 'Preparing for integrating MySQL and user registration in the next video', 'A file called data.py will be created to hold the data for the articles', 'A function called articles will be defined to structure the retrieval of articles', 'The plan is to implement a database later on']}], 'highlights': ['The application includes full authentication with validation using Flask WTF forms. It highlights the implementation of full authentication with validation using Flask WTF forms.', 'The functionality of the application encompasses CRUD operations for articles, including create, read, update, and delete. It emphasizes the inclusion of CRUD operations for articles, providing a comprehensive functionality.', 'The chapter introduces building a Python application using Flask framework. It emphasizes the focus on using Python with Flask for application development.', 'The implementation of CKForms for WYSIWYG editor is showcased. It highlights the utilization of CKForms for implementing a WYSIWYG editor in the application.', 'The chapter discusses setting up a development environment using Linux Ubuntu, suitable for Linux and Mac users.', 'The process involves installing pip for package management and flask for creating the Flask application.', "The tutorial demonstrates creating an entry file 'app.py' that serves as the entry point for the Flask application.", 'The chapter explains how to enable debug mode in Flask to update the application without restarting the server.', "Using Flask to render templates, such as rendering 'home HTML' using the 'render_template' function, is demonstrated.", "Creating a 'layout.html' file to avoid code repetition by including common HTML head and body tags, with 'My Flask App' specified as the title, is explained.", 'The chapter explains how to use block tags in Flask to create a layout file, insert content, and implement Bootstrap using CDN, thus avoiding repetitive code and customizing the layout for a Flask app.', 'The chapter demonstrates creating routes for homepage and about page, along with creating corresponding templates.', 'Creating articles with names, bodies, authors, and create dates', 'Creating routes to display the articles', 'Preparing for integrating MySQL and user registration in the next video', 'A file called data.py will be created to hold the data for the articles', 'A function called articles will be defined to structure the retrieval of articles', 'The plan is to implement a database later on']}