# data[].attributes.body
Reflection/Retrospective Sprint

Learning outcome.  Live and experience the Impact of Computing by becoming part of the Internet and describing your project to the Night at the Museum audience.

Retrospective Sprint 11

TPT assignment Big Idea 5 Impacts of Computing

Computer Innovations

Digital Divide

Computer Bias

AP Practice Exam

M - W: Continue Indi Reviews and CCC
M - Review of canvas
Tu - Motivation and Experiences from Students.  Complete TPT assignments and AP Test.
Th - Retrospective Sprint TT
Th - F: Perform Final Project Reviews

Finals Week

M - Practice AP Exam Due
Tu - Present and Walk About
Finals see canvas

# data[].attributes.body
Deployment Sprint + Test

Learning outcome.   Enable your Web application to become part of Internet.  Learn how the internet works.  Learn how to setup a  Computer System  (RPi or AWS EC2) .   Perform DNS setup and other Networking requirements to get your Web application (Python/Flask) to respond to HTTP requests through a Web browser.

Sprint 9, 10
Week 9

M - Preso's
Tu - Planning for Individual Preso's.  Units 3.9 and 3.10, Overviews by OO's and TO's.
W - PBL. Code, Code, Code.
Th - TT9 Intro to Deployment.
F - PBL. Code, Code, Code,  Deploy, Deploy, Deploy.

# data[].attributes.body
10-20 minutes.

Students should discuss this with personal focus...
A. Anyone in Class have Deployment experience?  Have they become a part of the Internet?  Do they have something  they are sharing on the Internet.
B. Does anyone have an story where they feel their life has been changed through Computing knowledge or experience?  Job, Internship, Scholarship related to tech?

# data[].attributes.body
Big Idea 3
3.9 Developing Algorithms
3.10 Lists

# data[].attributes.body
Prototyping Sprint

Learning outcome.  Start coding.  Start learning and evaluating your Scrum Team and technical capability versus your innovation/feature/scrum plan.  Review resources provided and see if you can apply them to you own project.  Look for advice from peer Students, Crossover and Teacher for project direction.   Keep pushing forward, modifying plans, and start performing research.

Prototyping considerations

Front End.  Start getting comfortable with HTML, be careful not to get carried away in CSS, use Bootstrap.

Back End.  Start looking at Flask/Python parts of discussed code.  Be sure to gain understanding, don't shy away.

Computational Thinking.  Make sure that your ideas use coding, not just HTML and CSS.  "Python", "Jinja2", or "JavaScript" are keys to learning class and college board objectives.  If you are writing similar lines of HTML or Python over and over, this is a problem!  This needs an algorithmic solution (aka using logic, loop, coding, and/or data).

Data Design.  Often, algorithmic solutions require "Data"; or "Data" requires a algorithmic solution.  Are you considering how to use, store, and retrieve data?

Think about what you need to learn or research, how as a team you will divide and conquer on that research.

Sprint 3, 4
Week 3
Tu - Prototyping, Research, Review Points for Sprint. Start sprint planning and assignments using Scrum Board.; TPT3, from Unit 2
W - Code, Code, Code
Th - TT3, Binary Counting, Conversions
F - Code, Code, Code, live reviews start Monday.
Week 4
M - See canvas.
Tu - TPT4.  Faculty Lecture 18:00 to 38:30
W - CCC.  Sprint Planning and assignments check 1 point
Th - TT4.  Images and RGB
F - CCC.  Deliver TPT4. see Canvas requirements

# data[].attributes.headline
Tech Talk 9 - Introduction to Deployment

# data[].attributes.subject
Tech Talk 9 - Introduction to Deployment

# data[].attributes.body
Related Video "CB 4.1 Video 2"

Hosting a Web Application Requirements

1. Home Computing - Raspberry Pi (RPi OS)

2. Cloud Computing - AWS EC2 with Linux (Ubuntu)

Learning Opportunities through your Web App

ISP / Private Networks and IP Addresses

DNS Servers (Freenom)

Routing and Port Forwarding

Reverse Proxy (Nginx)

Running WEB http:// apps on localhost:5000 (Gunicorn)

Certificates https:// (Certbot)

Raspberry Pi Non Production

Starter Guide and Concept running Apps on RPi

Raspberry Pi Production Web Server

Concept and Overview

Deployment Guide (production)

# data[].attributes.body
Big Idea 4
4.1 The Internet
4.2 Fault Tolerance
4.3 Parallel and Distributed Computing

# data[].attributes.body
Debugging is the process of looking at code as it is running.

Breakpoints.  Break, Examine, Resume, This is the process of interrupting execution with a breakpoint, looking at code path or data, and resuming execution. Common practice would be to look at Iteration progress or examine code path of a Conditional, or examine when and how data is modified.

Observing Memory.  Looking at variables and complex data structures while code is stopped.

Conditional Breakpoints.  Examine something at certain conditions (Advanced Debugging).

Browser Debugging

Debugging and Breakpoints in Chrome F12

JavaScript Alerts, these can be used as markers and can show

Console.log in Chrome F12 (see visual)

Backend Debugging in IntelliJ

Python print() messages in run window

Python Debugging, setting breakpoints

# data[].attributes.body
TPT Prep, Watch Videos, and do Quiz.

3.5 Boolean Expressions
3.6 Conditionals

Sprint 7,8 week 7 - Logic gates

See canvas for details.
See Padlet for design ideas

Sprint 7, 8
Week 7

M - Live Grade.  Big planning week,  Build all things into Scrum Board.  Build README for assignments link to issues.  Individuals builds checklist in assigned Issue and move to In Progress.  Review with cross over doing similar task, make  adjustments.   Wed 2pts prorgress check and .5 off team each non-participating individual.
Tu - Units 3.5 and 3.6, Overview of OO's and TO's.
W - Code, Code, Code.  Scrum Master reviews and Spot check on individual participation.
Th - TT7, Python Lists and Dictionaries with an Activity
F - Code, Code, Code

# data[].attributes.body
Innovation Sprint

Start the process of Ideation, Design, Scrum Board building, and assigning Issues prior to coding.  Early ideas, followed by early coding  (prototyping) helps lead Developers into the iterative processes of Development.

PBL Requirements

One unique idea, aka something useful to your team and/or something that helps you in school

Show case work and labs from TPT and TT.

A page that highlights YOU

TPT requirements

Journal and Pair Test Corrections (sample)

Individual Test Corrections (sample)

Sprint 1, 2

Week 1

Monday:  Planning day.  Teacher to finish TT 0.*  Scrum Team build Project Board (Scrum Board).   Review Tour of Code at tables.

Tuesday:  TPT day.  Watch Collaboration Video.   TPT and OO announcements, classroom nominations.

Wednesday:  Code, Code, Code (CCC).  We are focused on design so we will Watch Design Video.  Think about your design requirements...

Theme - idea of Website (ie Poway Restaurants)

Labs - we will have Greet lab tomorrow, a place to store TT or TPT info

About - authors, something about you, each student in Scrum Team

Thursday:  Tech Talk 1, Flask/Python

Friday: Delivery day.  Video/Journal 0 due (see canvas).

Week 2

Monday:  Tweet, Tweet; find your groove, learn what I like.  Reflection, watch video by Seals as max credit example for Video/Journal 0.  Planning for PBL 1,2 on canvas which includes implementation from TT 1 and requires read of Padlet and declaration of personal Computer Equipment plan.

Tuesday: Student Led TPT by OO's.  Focus is on Big Idea 1: Creative Development.   In supplement to TPT watch video by Anika on starting to categorize thoughts, this is example of putting TPT learnings into action.

Wednesday: CCC. Work on PBL 1,2.  Focus!

Thursday: Tech Talk 2, more on Flask/Python (review below in Padlet)

Friday: CCC and Deliver PBL 1-2 (see canvas), look at embeds

Tech Talks 0.* status

TT 0 Tools, TT 0.1 Vision, TT 0.2 Scrum Board

Scrum Teams and Individuals should be tool, planning, and scheduling capable.

TT 0.3, TT0.4, Brief Project Tour

Flask and its files and artifacts.  The "Tour of Code" below shows more insights.

TT 0.5 Journal

You should understand or ask me to discuss within you Scrum Team.  You will be learning by doing with points.

# data[].attributes.body
AP CSP COURSE OUTLINE FOR THE YEAR

Methodology.  Project Based Learning (PBL)
Guideline. The 5 Big ideas of Comp Sci Principles
Key Learnings for 2021-2022

Collaboratively Build, deploy and host Web Pages

Algorithms, Databases, and APIs

Individual College Board Performance Task Project

"Real World” Scrum Team projects with a Customer/Sponsor

Alerts

Assignment Due next Friday start of class (see canvas)

5 point seed (highly engaged+, distracted -), we will likely have < 75 points in Trimester 1.

Tri1 Project

You and your Scrum Team will collaboratively Build, deploy and host Web Pages.  This Web project contains work Technicals learned throughout the trimester.  This will be done in increments.  A Flask Portfolio Starter project is provided to help you get started on your journey.

Learning Outcome for Sprint/Weeks 0,1,2

Getting adapted to the Agile development methodologies used in Computer Science and Development tools.  Getting introduced to the Tools and Code starters used in building a Python/Flask Web Server.

Comp Sci and PBL attitude, suggestions and requirements

Attitude.  An Agile mindset is not knowing the answer, making lots of mistakes and performing iteration.  A successful grade is dependent on making mistakes, research, and iteration.

Suggestion. Please bring a personal laptop to class daily.  The Internet and AP Central web site can be considered text book.

Requirements. Everything will be distributed electronically.  All code you develop will be delivered to the Cloud.  The class has a NO PAPER policy, when the Teacher sees paper the student may be considered to be distracted (-).

Sprint 0

Week 0

Wednesday - Pick pair share partner, Pick team of four.  Based off of mathematics there can only be 3 teams of 5 maximum.   Spend some time talking and getting to know each other.  Teacher will visit teams as time allows.  Start looking at Tech Talk 0, 0.1; if you run out of things to do.

Thursday - Start bringing your laptop.  Tech Talk 0.  Start setting up tools and code for your 1st Flask/Python web site.

Friday - As many 0.* tech talks as possible.

# data[].attributes.headline
Tech Talk 0 - Tools and Equipment (Day 1)

# data[].attributes.subject
Tech Talk 0 - Tools and Equipment (Day 1)

# data[].attributes.body
Tools and Purpose

In trimester 1, we will be building Web Sites and learning tools and technologies that support that tasks.  Web Sites development fits nicely into all the  "Big Ideas" of Computer Science Principles.  Here are the tools...

Python, HTML, CSS, JavaScript are the key languages you will be using as you start this class.

IntelliJ is the code editor we will be using in this class.  IntelliJ is more than and editor, it is called and IDE (Interactive Development Environment.

GitHub is where we store and share code in the cloud, think Google Docs but for Code.

Slack we will use for messaging, we have been averaging 35,000 message per class.

Equipment is needed and/or recommended to maximize class

A laptop, that you bring to class every day with the Development Tools installed on it.

A Web Site host.

Raspberry Pi (RPi) single board computer. Host your own Web Site.  Work with IOT devices.

AWS account.  Host Web Site.  Have secure cloud data.

Software Installation

Overview video playlist by Sriya Chilla and Ridhima Inukurti.

Install order.

1. GitHub signup

2. Python install

3. IntelliJ install,

Ultimate IntelliJ License Manager and Helps

Installation Requirements on for Collaboration

Slack online, my recommendation is to download the App to phone and computer

# data[].attributes.body
Reflection/Retrospective

Collaboration.  Classic Retrospective questions.  Use Geekbot in Slack. Try to prioritize answers.  How did the term go as far as people, relationships, processes, and tools?

What went well?

What didn't go that well?

What did every team member learn?

What puzzles every team member?

Individual.  Prioritize answers.  Data, Programming, Algorithms, Internet.  How did the the term go as far as projects?

What was your favorite mini-lab project?

What was your favorite CB topic?

Identify in priority order biggest challenges.

Goals for Trimester 2

How can I use computing to help me as a student in other classes?  How can my computing work and projects help me study my other subjects and interests?

How can I use computing to build something that is fun for me, as well as leave a legacy for future DNHS students?

How do I prepare myself for my "Create Task" College Board project?

How do I prepare myself and group for a 3rd Trimester project and obtain a sponsor?

# data[].attributes.headline
Tech Talk 0.1 - Vision, Student Leadership (Day 1)

# data[].attributes.subject
Tech Talk 0.1 - Vision, Student Leadership (Day 1)

# data[].attributes.body
Tools and Equipment Recap

Downloading Tools
Setting up IntelliJ, using Python
Connecting to GitHub, pull
Running Code, visualizing in Browser

Vision,  Student Leadership

Review Visual

Vision

As you venture into Computer Science, you need to establish vision.  Academic success in this Computer Science Class comes with a plan (Why?).   A plan requires a strategy (How?).

Establish a Why?

Believe and put in the work so you can achieve.

Learn to love Computer Science.  Work on something you like.

Build skills that will be in high demand as you apply for college, internships, and jobs

Perform well in class, get a series of A's over the 3 trimesters.

Excel in the AP exam (receive 4 or 5)

Earn academic respect of your fellow students and Teacher

Earn a recommendation from your Teacher for internships and college applications

Establish a How? (Review graphic)

Learn best practices in Computer Science development (Agile).  Make a Plan, start with an Idea, collaborate, code, and iterate.

Learn and practice great learning strategies used in the 21st Century (4Cs)

Become a Student Leader in the classroom (OO or TO)

Establish and build relationships, learn to work within those relationships (Scrum Team, Crossover Group, Pair Programming)

Colin Szeto Friday Forum

Senior Computer Science Principles student of the Year
All "A"'s in two years of Computer Science
Receive a "5" on AP CSP exam
Accepted as incoming Freshmen to UCSD
He can "Code"!

# data[].attributes.body
TPT Prep, Watch Videos and do Quiz.
3.1 Variables and Assignment
3.2 Data Abstraction

AP CB Pseudo Code reference

# data[].attributes.headline
Tech Talk 0.2 - Fork, Sprint Schedule, Scrum Board (Day 1)

# data[].attributes.subject
Tech Talk 0.2 - Fork, Sprint Schedule, Scrum Board (Day 1)

# data[].attributes.body
Setting up a Schedule

Git Concepts Concepts video video by Michael Hayes

Fundamental concept when working with Git (clone, pull, commit, push).

GitHub Fork

Make your own copy of repository so you can have your own code and make your own Scrum Board

Setting up a Scrum Board

Sprints

We will establish a Sprint cadences and have ideas that are broken into short term work units on a Scrum Board (issues).

Scrum Board

The Scrum Board contains issues that are assigned to individuals,  each of these issues will have "tangible" deliverables (code/video/...).  Pair, Scrum Team, and Crossover Team will use Scrum Board to understand your ideas and efforts.

Deliverables

At Deadlines, Teacher/Student 1 v 1,  or 1 v 4 meetings Students will present Teacher  Scrum Board issues that are "review ready" that represent your Deliverables.

Homework

To maintain pace in this class, you should consider a 2 hour coding or design session (weekly) outside of class time, or 4 hours outside of class per 2 week Sprint.  You will have class time to work on projects as well.

Sprint Calendar (sample)

A sampleSprint outline (specific outlines will presented at beginning of Sprint).  Sprints are 2 weeks.

Week 1
Monday - Sprint Objectives, Scrum Team Planning
Tuesday - Test Prep Tuesday (Student Led)
Wednesday - Code, Code, Code
Thursday - Tech Talk (Teacher)
Friday - Code, Code, Code; Teacher 1 v 1
** 2 hours outside of class for project work

Week 2
Monday - Sprint Grading plan,  Scrum Team Planning
Tuesday - Test Prep Tuesday (Student Led)
Wednesday - Code, Code, Code
Thursday - Tech Presentation (Student)
Friday - Code, Code, Code; Demos/Self/Peer Grade
** 2 hours outside of class for project work

Scrum Board columns

A deliverable Journal 0 assignment is to have a Scrum Board, containing Issues for individuals,  issues are placed in columns as follows...
1. To do/backlog
2. In progress
3. Complete
4. Deployed
5. Review ready  ### Teacher ready
6. Done

# data[].attributes.attachment_caption
Can you solve for the number 50 at 10 min of Harvard Video

# data[].attributes.body
Learning outcome - Understanding binary and performing Base10, Base 2, Base 16 conversions.

Harvard Video CS50 Lecture 0, watch to 32 minute mark.

TPT Prep - Binary
CB Video 1
CB Video 2
CB Video 3

# data[].attributes.body
Prototyping and Inspiration.  Part of Prototyping is gaining inspiration from things you see.  In this Harvard Video CS50 Lecture 0, at the 10 minute mark th Professor asked the student to solve a problem.

Learning outcome.  Explore ideas and turn them into code and learning opportunities.  Become familiar with binary, octal, and hexadecimal conversions between Base 10, Base 2, Base 8, Base 16.   Look at HTML DOM, onclick events, and start using javascript.

Points and Work.  Hack-a-thon today and mini-lab due next Friday in your Project. GitHub source.

Online runtime of  Binary Math

Visualizing Binary Math with on off indicators, see picture from TPT.

Conversions to Octal, Hexadecimal, and Decimal

Incrementing and Decrementing Simulation

Resources
Background understanding from Khan Academby

Number Systems and "Binary"

"Hexadecimal" using Khan Academy

Technical reviews

HTML DOM event onclick

Javascript parseInt

Javascript changing the DOM

Template Designer Doc (search for range)

# data[].attributes.body
Learning outcome.  Binary, Abstractions, Compression

Faculty Lecture- Exploration of Data, relationship of Big Ideas, history, ASCII, images, compression.  Start at 18 minutes to 38:30.

TPT Prep-  Data Compression

# data[].attributes.headline
Tech Talk 0.3 - Project Deliverables starting with Collaboration, Design

# data[].attributes.subject
Tech Talk 0.3 - Project Deliverables starting with Collaboration, Design

# data[].attributes.body
Increments, lots of parts

Through the year individuals and teams will be focused on delivering projects in small increments   The visual shows the interaction between different parts of a Web site.

Web Programming Tools

Flask, HTML, and SQLite databases are Web Programming Tools and Frameworks.  Building a Web Site(s) will be a key outcome of this class.

PBL, collaboration and ideation

The idea of building a Web Site incrementally with a useful idea is a way to learn Computer Science through and approach called Project Based Learning (PBL).   To begin, we don't start with Coding, we start with Collaboration and Ideation.

Watch these videos on College Board!!!
Faculty Lecture 1 - Collaboration
Faculty Lecture 2 - Design

# data[].attributes.headline
Tech Talk 0.4 - Tangible Artifacts, aka Code

# data[].attributes.subject
Tech Talk 0.4 - Tangible Artifacts, aka Code

# data[].attributes.body
Tangible artifacts, artifacts

Ultimately, success in this class will be dependent on producing code.  Along the way you may produce other tangible artifacts (ie designs, videos, documentation, deployment artifacts).    All your artifacts SHOULD end up in GitHub, Google Doc, Youtube, so they can be built as references off of your Web Site or Slack message.  You will often send messages and dialog about delivered artifacts through Slack.

Deliverables

A key deliverable from this Tech Talk or any assignment is to setup  a  code project in GitHub.   As you work in IntelliJ you will be producing code.  This code will be able to be Cloned, Pulled and Pushed using IntelliJ.  Everyone in the team should will do a Pull and Push to receive credit on their 1st assignment.

Teacher / Student experience

There will be guidelines given, however, it is the responsibility of the student to produce an optimal experience on their deliverable.  Grading original design is by nature unique.  Things like Checklists and short Videos during and assessment will lead to a pleasurable experience and MORE points.  An aggravating experience will lead to LESS points.

# data[].attributes.body
Here are some ideas on creating a digital journal (https://padlet.com/jmortensen7/APCentralCSP).

Journal and Responsibility

1. A 5 point seed will be granted to all students.  This seed will change (positive +, negative -).  The journal is HIGHLY related to your "ENGAGEMENT"  in the class, your Grade, and illustrating your commitment.

2. You and Pair partner will be collaborating on Journal throughout the trimester.  You can share references, but make sure you are both participating in REVISION HISTORY.

3. Great memory. Journal these positives (engagement +)  Contribution to the class.  Being prepared for Tech Talks and Participating. Being involved in Test Prep Tuesday, Student Lead activities: as a Technical Officer, or as  an Operation Officer.   Doing exceptional code, analysis and helping others learn.  Being thorough in Self Grading processes.  Performing exceptional Scrum Master work, exceptional Project Delivery, sharing amazing work via breakouts or through teacher coordination. Arranging or attending professional events with guest speakers in STEM and Technical industries.

4. Avoid negatives.  Journal these negatives (distracted -) Lack of memory, lack of attention, lack of energy, coupled with lack of journaling.   Start to catch your negatives.  Professional is always improving and overcoming.  Appropriate conduct is critical to the classroom, inappropriate comments or inappropriate digital media or content will likely cause a point deduction and other action.   Paper or books open in class is considered being "off track", this is a likely point deduction.  Phones can and should be used to do research, test your web site, or take a picture of a white board.  Phones used for non-CompSci task in the classroom, ie call to others, even family members will likely be a point deduction.

5. Journal these FYIs, thoughts and questions ... We will have 5 minutes at the beginning and end of class for gear up, wind down, socialize, make phone calls, text, etc.  We will have a lot of time in breakouts with Scrum Team that are focused on PBL.  Ask yourself each day, what would a professional engineer be doing?  or, is what I am doing on the Scrum board and contributing to Team and Project?  or, can I wait 'till last 5 minutes to go off track?  Enjoy your work, engage in Comp Sci.

6. There will be times where your Journal will be reviewed for points.  A Journal could be coupled or complemented with links to Code comments, README.md files, and other solid Engineering productions (aka a video).  These could be links to collaborative work, but whenever you link to something make sure it is obvious that you are part of the creation.

7. Bottom line, you need to establish professional "study habits" that enable you to remember concepts.  Mr Mortensen will ask, "do you have that in your journal?", "did you ask your pair?", "did you research that topic, show me your journal".  Ms Naidu may have similar approach.  Both of us would request that you become responsible for retaining information from class, knowing PBL objectives, and use a journal.  As a pair, scrum team or crossover group you should have TREMENDOUS recollection capability.  Establish a relationship where these are your 1st resources for questions and recall.  Reference each others journals.  Ask them, then ask your Teacher.

Digital Divide (Journal Topic)

What is the digital divide?  College Board video, 4 minutes.  This is a social issue that is very relevant to Equity, Empathy, and Empowerment.

1. Why should you become part of the Internet?
2. What about lower income people in San Diego?  How could you outreach to other students?
3. Why do you think I want every student to try and use their own laptop?

# data[].attributes.body
Learning outcome.  Become familiar with data and meta data.  Become familiar with images,  data representations, and manipulation of images.  Other future PBL interest could be encryption and steganography.

Runtime of project - RGB.

Learn about manipulating images.

Convert images to arrays using Pillow (PIL)  and Numpy.

Convert images to string (base64).

Key files:

1. frontend RGB display: rgb.html

2. backend image data and conversions: images.py

3. route to connect frontend and backend: starter.py

**Star Options for next week**
Everyone needs to integrate a form of this project into their mini labs.
A. Frontend... how would you change to grey scale dynamically?
B. Backend... how would you write a message into image and transport it to the Web?
C. Research.  what is base64?
D.  Ideation.  what are some applications for use of this project in your project?
E.  New Development.  explore one of these possibilities in manipulating images above?

TPT prep - Lossless and Lossy
CB Video

Faculty Lecture - Data Representation

# data[].attributes.body
Introductory Code - Greet

Playlist covering key concepts within the Greet Project by Nitya Pillai and Sarika Pasumarthy

Receiving Data from Backend

HTML Form and Action

Python Function and obtaining data from Form

... and more

# data[].attributes.body
Start learning HTML Features (Flask Portfolio Starter project).

Code review by Ava Brooks.

head, style, script, body

Bootstrap Grids , Navbars

embed vs href

templates, Jinja inheritance extends and block

Continue learning HTML & CSS basics using W3Schools.

Week 3.  Prototype layout.  Try getting your own STYLE, COLORS, FONTS; get your basic groove into your site.  Try a couple of prototype experiments and get feedback from Crossover.  view-source of csp page.

# data[].attributes.attachment_link.readable_text
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

How it works

Here's what you need to know before getting started with the navbar:

Navbars require a wrapping .navbar with .navbar-expand{-sm|-md|-lg|-xl} for responsive collapsing and color scheme classes.

Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.

Use our spacing and flex utility classes for controlling spacing and alignment within navbars.

Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.

Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.

Ensure accessibility by using a <nav> element or, if using a more generic element such as a <div>, add a role="navigation" to every navbar to explicitly identify it as a landmark region for users of assistive technologies.

Read on for an example and list of supported sub-components.

Supported content

Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:

.navbar-brand for your company, product, or project name.

.navbar-nav for a full-height and lightweight navigation (including support for dropdowns).

.navbar-toggler for use with our collapse plugin and other navigation toggling behaviors.

.form-inline for any form controls and actions.

.navbar-text for adding vertically centered strings of text.

.collapse.navbar-collapse for grouping and hiding navbar contents by a parent breakpoint.

Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the lg (large) breakpoint.

Brand

The .navbar-brand can be applied to most elements, but an anchor works best as some elements might require utility classes or custom styles.

Adding images to the .navbar-brand will likely always require custom styles or utilities to properly size. Here are some examples to demonstrate.

Navbar navigation links build on our .nav options with their own modifier class and require the use of toggler classes for proper responsive styling. Navigation in navbars will also grow to occupy as much horizontal space as possible to keep your navbar contents securely aligned.

Active states-with .active-to indicate the current page can be applied directly to .nav-links or their immediate parent .nav-item s.

And because we use classes for our navs, you can avoid the list-based approach entirely if you like.

You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for .nav-item and .nav-link as shown below.

Forms

Place various form controls and components within a navbar with .form-inline.

Align the contents of your inline forms with utilities as needed.

Input groups work, too:

Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.

Text

Navbars may contain bits of text with the help of .navbar-text. This class adjusts vertical alignment and horizontal spacing for strings of text.

Mix and match with other components and utilities as needed.

Color schemes

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-dark for dark background colors. Then, customize with .bg-* utilities.

Containers

Although it's not required, you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

Placement

Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top (scrolls with the page until it reaches the top, then stays there). Fixed navbars use position: fixed, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements.

Also note that .sticky-top uses position: sticky, which isn't fully supported in every browser.

Responsive behaviors

Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don't add any .navbar-expand class.

Toggler

Navbar togglers are left-aligned by default, but should they follow a sibling element like a .navbar-brand, they'll automatically be aligned to the far right. Reversing your markup will reverse the placement of the toggler. Below are examples of different toggle styles.

With no .navbar-brand shown in lowest breakpoint:

With a brand name shown on the left and toggler on the right:

With a toggler on the left and brand name on the right:

External content

Sometimes you want to use the collapse plugin to trigger hidden content elsewhere on the page. Because our plugin works on the id and data-target matching, that's easily done!

# data[].attributes.attachment_link.authors[].name
Mark Otto, Jacob Thornton, and Bootstrap contributors

# data[].attributes.attachment_link.description
Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

# data[].attributes.body
Flask Portfolio README

Backend

Open: flask_portfolio, then double click on main.py

1. Everything inside inside the "main.py" file is Python.

Find line:
from flask import Flask, render_template

2. At the top you see a line of code that is at the beginning of every Flask app.  This is a "package" in Python that allows you to customize the language for a specific purpose.

Find line:
app = Flask(__name__)

3. This activates Flask.  The variable "app" becomes a Flask object, essentially it becomes the brains of the Web application.

Find lines:
@app.route('/')
def index():
    return render_template("index.html")

4. Using the app brain, you are telling the Flask to add a route (@app.route('/') to the Web app.  Notice the '/' this is called a path.   Flask runs the function "def index()" when the Web App starts or when user goes back to home.  The function renders the file "index.html".

Find lines:
@app.route('/kangaroos/')
def kangaroos():
    return render_template("kangaroos.html")

5. This is similar to step #4, but now the path is /kangaroos which runs kangaroos.html.

Find lines:
if __name__ == "__main__":
    app.run(debug=True)

6. When you run 'python main.py', the IDE does this when you press the play button, it starts the Flask brain (app.run).  The if line is special logic that says to only run this line it follows directly after python.  The debug=True helps us out during development, it helps display errors.  The IntelliJ play (app.run) step activates the server http://127.0.0.1:5000/.  First 127.0.0.1 is the special IP address that means my machine.  Second :5000 is the running port or end point for the application.  This number can be thought of as the running address for the Web application and is used for communication.  This can be changed, app.run(debug=True, port="5001").  There is a notion of default throughout Computer Science.  5000 is the default for Flask.  A unique port can enable running many Web apps on the same machine.

Front End

Find and open file: templates/index.html

7. This is initial file rendered for the Web app (remember step #4).  Be aware that this file is mostly a shell.  The real definition of the HTML comes from other files.

Find line: {% extends "layouts/base.html" %}

8. This is Jinja2.  It states that file is extended from the file layouts/base.html.   This is part of trying to be efficient with our Programming.  HTML is very repetitive with things like colors, fonts, navigation,  etc.  Run the Flask server through IntelliJ IDE and launch the project a little differently (view-source:http://127.0.0.1:5000/).   This will show you all the source that is a part of index.html when it is rendered in the Web browser.  The command  {% extends "layouts/base.html" %} is a Jinja preprocessing command.  That means it goes to work and puts together all the files/layouts.   This is efficient for us, we can write less code and be more accurate.

Find and open file: templates/layouts/base.html

9.  Looks for code in this file in the view-source of the index page rendered by the Browser.  See if you can start to put things together.

Mini Lab

Look at Stub code

Integrate Greet Code (frontend and backend) into TT TPT area of your Web site.

Make individual pages with Greeting in About area of your project.

Think about "Lazy" way of doing the above, less copies of the same thing.

# data[].attributes.body
TPT Prep, Watch Videos, and do Quiz.
3.3 Mathematical Expressions
3.4 Strings

# data[].attributes.headline
PBL Python/Flask Coding and Fundamentals

# data[].attributes.subject
PBL Python/Flask Coding and Fundamentals

# data[].attributes.body
Development Sprint + Test

Focus is to Sharpen or hone skills.  In other words this is to gain skills on knowledge on top of what we have acquired.  Focus will be on "mini-labs" during this sprint, as well as studying our skills with College Board.  Secondarily we will be looking at our Team Project.

In the Student handout... College Board states that Students need to obtain knowledge and skills that can include, but need not be limited to, "the iterative development process, strategies for collaboration, the development of both data and procedural abstractions, and describing an algorithm’s purpose and explaining how it functions. A development process includes exploration, investigation, reflection, design, implementation, and testing
your program.

Here are specific objectives we need to sharpen skill in Sprint 5,6

Student needs to become competent in Scrum Team participation,  Scrum Board planning, revising plans, and iterating toward successful delivery.

Scrum Master and Scrum Team needs to optimize delivery between Scrum Team and Teacher.

Student needs to become competent in HTML, Javascript and Python. Each student needs to learn and apply College Board requirements in "Algorithms and Programming" using these languages.

Student and Teacher will look at extending mini-labs we have worked on previously, we will look at adding requirements to these labs to hone in on the "Data" and "Algorithms and Programming" skills.

Sprint 5, 6
Week 5
M - Review material above and canvas assignment
Tu - Units 3.1 and 3.2, Overview of OO's and TO's
W - Code, Code, Code
Th - TT5, Fundamentals of Programming
F - Code, Code, Code, TPT reviews ,  Live Reviews start Monday.
Week 6
Tu - TPT Units 3.3 and 3.4
W - Live Reviews, RGB Work, CCC.
Th - TT6, Variables, Lists, Dictionaries
F - CCC, Live Grading, Tour of Code, Deliver

# data[].attributes.headline
Tech Talk 6 - Fundamentals of Programming

# data[].attributes.subject
Tech Talk 6 - Fundamentals of Programming

# data[].attributes.body
Fundamentals of any Programming language using College Board language.  The Binary Math lab  and is the RGB lab  is full of CB required Fundamentals.

Below is a 'self lecture' activity.  Complete this activity to prepare for language in next lab.  15 minutes. This will be worth 1pt and reviewed in class on Friday.

Sequencing (Order of Code).  Sequencing  of code  is evident in Image Info section of the RGB lab.  After opening the file there is a series of steps used to extract Image Information.  Find this example of a Sequence and show it in your Journal.

Selection Statements (Ifs).  If conditions are how Python is able to process input on HTML forms. For instance, when input on bulbs is entered in HTML the change in quantity is detected in Python to pass the changed value to the new rendering of the form with the change.  Find this example of Selection and show it in your Journal.

Iteration (Loops). Iteration is used by Jinja2 to produce Bulbs.  The number of Bulbs controls iteration.  Iteration is the Lazy Programmer friend, look how many lines of HTML are generated by repeating the same lines of code through iteration.  Find this example of Iteration and show it in your Journal.

Variables and Data Abstraction.  In the RGB lab, there is a variable used to store the path information.  This variable is needed to locate the static image file.  This variable is defined and set in main.py to image_data function.  Find where path variable is defined use Python print() statement to show path and how it contributes to path Pillow Image.open.  Describe this in journal.

Structuring Code Blocks and Developing Functions.  There are several JavaScript functions in the Binary Math lab.  Find 2 functions that respond to Binary Math events.  Describe what is in each Code Block.  Describe other functions and code block called by these functions.

Algorithms are the combination of Code and Presentation that Programmers use to solve problems.  The RGB lab uses an algorithm to change and display the image differently than it was defined originally.  Find the code snippets and describe the algorithm in your journal.

New Mini lab.  The purpose of this lab is to enable Student to gain experience in the Fundamentals of Programming.  There are  enough  options in canvas to have everyone in Scrum Team to take on a Issue/Task.

Each of the tasks are intended to  help the Programmer become more capable Javascript, HTML, and Python programmer.  After this lab, Teachers believe student will be more capable working on their own ideas through the rest of the Trimester.

See canvas for assignment details.
Design padlet for design ideas

# data[].attributes.body
Ketchup

# data[].attributes.body
TPT Prep, Watch Videos, and do Quiz.

3.7 Nested Conditionals
3.8 Iteration

Sprint 7, 8
Week 8
M - PBL planning week, Finish Logic Gate Lab
Tu - Crossover/TPT reviews!  TO's provide their official solutions on RGB and Logic Gates.  TO's and OO's point out recent Mini Labs and relation to Units.  Most miss in 3.5, 3.6.
W - Code, Code, Code, Review PBL plans - Scrum Master 1pt
Th - TT8,  Web APIs
F - Code, Code, Code

# data[].attributes.headline
Tech Talk 7 - Intro to variables, lists, dictionaries

# data[].attributes.subject
Tech Talk 7 - Intro to variables, lists, dictionaries

# data[].attributes.body
Tech Talk 7 Padlet

Python Data Structures

Using Variables, Lists, Dictionaries

Testing Python using Terminal.
Review and Code
Review usage of Lists, Dictionaries in Code.   Also, a review of JSON.

Dictionaries
JSON Loads, JSON Dumps

# data[].attributes.body
APIs lesson based on CSP runtime project, using CSP GitHub project.

APIs, making an API (Jokes)

Making a List of Jokes, each Joke is a dictionary.  See webapi.py observe list and creation of dictionaries.  There is some future consideration for likes in this dictionary.

Transporting data through Internet by making WebAPI endpoint, observe "def get_joke()" and  "def get_jokes()".  Try these endpoints through browser: ...api/joke, ...api/jokes

Use JSON response and Jinja2 formatting to build HTML pages off of response and JSON.  See requests in starter.py (def joke and def jokes).  Observe to test in IntelliJ you will need to uncomment url line to your localhost and port.  See formatting.look at HTML of joke.html and jokes.html.

APIs, using an API (RapidAPI - Covid19)

Obtaining large amounts of data with a published WebAPI or RESTful APIs, these provide JSON response.  See starter.py and observe "def covid19()" (request, response, and json() formatting)

Using JSON response and Jinja2 to build an HTML page.  See covid19.html.

# data[].attributes.body
This Tech Talk will focus on some improvement to code.

Blueprint.  Organizing your files in Python for simplicity and caching.

# data[].attributes.body
This Tech Talk will focus on interactions between frontend Javascript and backend Python.

Ajax or Axios.  Making loading information between Python and HTML fast.

# data[].attributes.body
This Tech Talk will focus on SQLite Database. A Database provides persistent storage in you application.

# data[].attributes.body
Interaction of user with Web Page, animation and games in Javascript.