The CHAP Stack

The CHAP stack is a super fun way to get started programming - use a little bit of CSS, HTML, and Python to publish client-side apps.

CHAP stack:

• C = CSS (Cascading Style Sheets)
• H = HTML (HyperText Markup Language)
• And
• P = Python (Programming Language)

Powered by Brython - Python in the browser!

Prerequisites

• A web browser (e.g. Chrome, Firefox)
• Optional: A text editor or IDE (e.g. Notepad++ or VS Code)

1: Login to GitHub

• Sign up for a free account at GitHub (requires email address)
• Login to GitHub

2: Fork This Repo (or start from scratch)

• Go to https://github.com/denisecase/chapstack
• Click "Fork" to copy the repo into your own cloud account

3: Get Acquainted

• Explore index.html
• Explore the folders & files

4: Publish your Page

From the main page of your new repo:

• Click Settings (end of Code / Issues / Pull Requests... / Settings).
• Scroll down to GitHub Pages.
• Enable GitHub Pages
• Scroll back down to get a copy of your published URL.
• CTRL-C to copy this to your clipboard.
• Click on /chapstack to return to your main repo page.
• Click the About gear icon on the right.
• Paste your URL into the website field (CTRL-V)

5: Explore and Expand

• We'll talk through the exercises as we go.
• We use CSS for styling (Bootstrap does most of the work!)
• We use HTML to define the content.
• We use Brython (Browser Python) to add the logic - no installation needed!

(Optional) Set Python Formatting Provider

If using VS Code, you might want to set your Python Formatting Provider in VS Code. From the VS Code menu, select File/ Preferences / Settings. Search for "python formatting provider" and select "black" from the dropdown menu.

Terms and Resources

• Black - Opinionated Python formatter
• Brython - Python in the browser!
• dictonary - a set of key-value pairs
• document - a code representation of a web page
• IDE - integrated development enviroment (e.g. VS Code)
• repo - a respository, a folder or place to keep project code
• stack - the list of technologies chosen to create an app