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!
- A web browser (e.g. Chrome, Firefox)
- Optional: A text editor or IDE (e.g. Notepad++ or VS Code)
- Sign up for a free account at GitHub (requires email address)
- Login to GitHub
- Go to https://github.com/denisecase/chapstack
- Click "Fork" to copy the repo into your own cloud account
- Explore index.html
- Explore the folders & files
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)
- 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!
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.
- 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