Web Developer Bootcamp with Flask and Python in 2024

Learn string formatting in python 3.6+ using f-strings to embed variables and the format method for reusable templates. See how dynamic values update in greetings with placeholders.

Build your first python app that asks for age, converts input to int, calculates months (age times 12), and prints a readable result with an f-string.

Learn how Python functions return values, why None is returned by default, and how return differs from print.

Explore python lambda functions, anonymous single-line tools that return values, their four parts, and when to use with map versus list comprehensions for sequences.

Learn to unpack keyword arguments with **kwargs and unpack dictionaries into named parameters, and pass them in Python functions using args and kwargs to create flexible call signatures.

Learn how Python's magic methods __str__ and __repr__ convert objects to readable strings and unambiguous representations that help display and reconstruct objects.

Learn type hinting in Python 3.5+ to specify input and return types, with examples using list, tuple, and class Book. It helps you catch mistakes by signaling expected types.

Learn how to import code from other files and folders in Python, and how __name__ and sys.path control which code runs.

Learn how to handle errors in Python by raising a ZeroDivisionError and using try-except. Explore else and finally blocks to control flow, display meaningful messages, and debug with tracebacks.

Create a simple book class with init, type hints, and a repr method. Introduce a custom error 'too many pages read error' inheriting from value error to raise when overreads.

Learn how to decorate functions with parameters using a secure decorator, handle panels such as admin or billing, and pass arbitrary arguments with *args and **kwargs to keep decorators reusable.

Discover why mutable default parameters cause shared state in Python, shown via a student example, and fix it by using None and creating a new list inside the init.

Explore how the internet resolves domain names to IP addresses, then uses HTTP GET requests to load HTML, style sheets, images, and cookies from servers.

Compare front-end and back-end development, exploring client-side HTML, CSS, and JavaScript, browser compatibility, and how Python with Flask powers backend data storage and dynamic content.

Open the browser dev tools, inspect elements, and edit HTML and CSS to see live changes. Explore the style viewer and computed values, and monitor performance data and network requests.

Learn HTML basics by understanding elements, tags, and attributes, including void elements, nesting, and the role of class and ID for page structure.

Learn how HTML content categories organize web pages, including flow content, sectioning, heading content, and phrasing content, and how article, section, and nav group elements.

Learn how to nest HTML elements by placing other elements inside a container such as an article, and use headings and paragraphs to structure self-contained content.

Identify which HTML elements cannot be nested, and use MDN to verify permitted content, including phrasing content for a and select with option and option group.

Explore how HTML container elements organize content, using section, article, div, header, nav, main, and footer, with accessibility considerations and practical examples.

Explore HTML attributes with a focus on class and id, their uses for CSS styling and JavaScript targeting, including how to apply multiple classes and the uniqueness of IDs.

Add images to your HTML project using the img tag with src and alt attributes, set the HTML language with lang, and preview in the browser; later resize with CSS.

Describe the purpose of semantic HTML by focusing on meaning over appearance. Use elements like em and i to convey emphasis and language, and improve accessibility for screen readers.

Learn to add document level annotations to HTML to set the page title, declare UTF-8 and viewport meta tags, and link a CSS file like style.css to style the page.

Explore why the Mozilla Developer Network is the best up-to-date resource for HTML and CSS, with comprehensive references like the paragraph element and reliable guidance.

Master CSS selector syntax to target elements with element, class, and id selectors, and learn how inheritance and specificity affect colour and styling.

Discover how CSS colors are represented using RGB, hexadecimal, and HSL formats, including named colors, alpha channels with RGBA/HSLA, and how these formats influence design and performance.

Explore how to use colors in css, including named colors, rgb, and hsl, and apply them to text, backgrounds, and borders with hex and rgba/hsla values.

Learn to set up and style a simple html page by linking the css file and applying a system font stack. Improve readability with color #002244 and 150% line-height.

Discover which CSS properties aren’t inherited by default—layout properties like margins, paddings, widths, and heights, plus borders and backgrounds—and learn when to use or avoid inheritance.

Explore the css box model, detailing content, padding, border, and margin, how width and height define content while padding adds space, and how the border-box model changes sizing.

Explore CSS units such as px, percentages, em, rem, and viewport units (vh, vw) and how rem stays fixed to root font size while em adapts to current font size.

Apply box-sizing border-box, then center the main content with a max-width of 35 rem and auto margins, and restrict images to the container with max-width 100%.

Discover how CSS specificity determines which declarations apply using selector weights, inline styles, and the !important flag, with examples of type, class, and ID selectors.

Learn the BEM CSS methodology—block, element, and modifier naming—with single classes, no id or type selectors or inline styles, enabling reusable styles for forms and buttons.

Build a microblog with HTML and CSS, featuring a header, navigation, a post entry form, and an archive, while learning layout and design principles and Agile project management.

Learn to design a clean page structure by identifying header, main, and footer, and use article and section elements to create reusable, scalable layouts for a microblog.

Translate the microblog design into HTML, building a page with header, main, and footer, two sections for a form and recent posts using article, h2, and time elements.

Finish the header by adding a navbar brand with the logo and Microblog text, and build a navigation list with links using BEM naming for screen reader compatibility.

Explore how HTML forms send data using get and post methods, explain form elements like labels, inputs, and submit buttons, and illustrate how a Flask backend receives /entry submissions.

Implement and style HTML textareas in forms, using name, id, and a label for screen readers, group inputs with BEM classes, and post long content with a proper form method.

Create a footer with a content container and left and right sections, using two footer__column on the right and footer__item items. Include recent, calendar, about, and how this was made.

Add a font-family style to your page using Lato with sans-serif as a fallback. Download Lato from Google fonts if needed and refresh to apply the font.

Style microblog entries using CSS by applying classes, displaying the title and date inline, adjusting font sizes and colors, and adding spacing and separators for a clean blog page.

Learn to style a full-width footer with a centered content area, using CSS flexbox, dark background, white 12px text, and hover links for an accessible, multi-column layout.

Build a hello world app with Flask, routing / and /hello plus an HTML endpoint, while exploring MongoDB integration and setting up a Python virtual environment and development server.

Learn to use Python data structures in Jinja2 templates with Flask, including lists, dictionaries, and object attributes. Jinja2 syntax is similar to Python, but not Python, and pass via render_template.

Learn to use Jinja2 conditional statements in templates to display Apple or Microsoft products based on a user choice, with if, elif, else, and truthy or falsy booleans in Flask.

Learn to render dynamic HTML with Jinja2 by looping through lists and dictionaries in templates, using for and endfor to create bullet lists and apply simple conditionals.

Learn how to receive form data in Flask by handling post requests, accessing request.form, formatting dates with datetime, and rendering results on the same page using the home.html template.

Store new posts as (content, date) tuples in a list, pass entries to a Jinja2 template, and loop to display truncated content; restart loses data, while MongoDB migration is introduced.

Format entry dates by parsing strings with datetime.strptime and reformatting with strftime to %b %d for display in templates, while preserving time element accessibility and preparing to use MongoDB.

Compare SQL and NoSQL databases to understand their differences, then learn how MongoDB uses collections of JSON-like documents with a flexible schema.

Set up a free cloud MongoDB Atlas account, configure a shared cluster, whitelist your IP, and connect with MongoDB Compass to create a microblog database with an entries collection.

Create and manage a requirements.txt to pin manually installed Flask and pymongo[srv] dependencies within virtual environment, using pip freeze to capture versions and prevent breaking changes during deployment to render.com.

Deploy Flask apps with a platform as a service such as render.com or Heroku to make them publicly accessible, manage dependencies and backups, and simplify deployments.

Prepare your app for deployment by creating a requirements.txt with Flask, python-dotenv, pymongo, and gunicorn for render.com, and load the MongoDB URI from an environment variable via a .env file.

Deploy a Flask app to render.com by connecting GitHub, uploading app files, and configuring a web service with the MongoDB URI as an environment variable.

Discover how to define and reuse Jinja2 variables with the set keyword, compute num_todos in the template, and conditionally display messages and lists using these variables.

Learn how Jinja filters extend templates by using the pipe operator to call built-in filters like length and join, and know when to pass extra data with brackets.

Learn to use Jinja2 macros to improve reusability and reduce duplication by extracting todo list rendering into macros, importing macro files, and aliasing imports for clean templates.

Learn to write custom css for each Jinja template using inheritance in a simple Flask app, with inline style blocks and per-template decisions.

Learn how Jinja2 tests use the is keyword and the divisible_by test to implement FizzBuzz in a Flask template, with for loops and top-level conditional ordering.

Explore the Jinja environment and rendering context, distinguishing the global environment from the per-template rendering context, and learn how to pass data via render_template, context processors, and template filters.

Build a simple habit tracker app with date navigation and query string dates, add and complete habits, respect past days, and store completions in two MongoDB collections using forms.

Center the habit tracker within a 40 rem max width using static/css/main.css. Use flex for header alignment, hover transitions, and a clean column form.

Add a seven-day date navigator around today using a date_range function, datetime operations, and a for loop; enable navigation via url_for with isoformat dates and highlight the current date.

Build a Flask app that tracks habit completions by date using a defaultdict, stores completed habits per day through a /complete POST route, and renders them on the index page. Learn to implement the data flow with hidden form fields for date and habitName, and style the habit items so completed ones show a check mark.

Modularize a Flask app with blueprints by moving routes into routes.py, registering the blueprint in a create_app factory, and using blueprint-specific url_for for routes like habits.index.