Class Raven

Rough Timeline

Weeks 1, 2, 3, 4, 5: Python

Weeks 6, 7, 8, 9: HTML/CSS/Flask

Weeks 10, 11: Javascript

Weeks 12, 13, 14, 15: Django

Weeks 16, 17, 18: Capstone project

Scheduled Holidays (no class)

• Nov 11 - Veterans Day
• Nov 25 - 26 - Thanksgiving
• Dec 23 & 24 - Christmas Eve
• Dec 31 - New Years Eve

Assigned Labs:

Python

• Lab 02 - Make Change
• Lab 03 - Average Number
• Lab 05 - Palindrome Checker
• Lab 06 - Credit Card Number Validation
• Lab 07 - Peaks & Valleys
• Lab 08 - Pick 6
• Lab 09 - Blackjack
• Lab 10 - Dad Jokes
• Lab 11 - Rot 13
• Lab 13 - Count Words
• Lab 14 - ATM
• Lab 16 - Searching & Sorting
• Lab 17 - Contact List
• Lab 19 - Trivia API
• Lab 20 - Adventure (mob)
• Mini-Capstone
Optional:
• Stack and Linked List
• 15 - Rain Data
• Create a Binary Search Tree
  • Add elements
  • Search
  • Delete elements

HTML/CSS/Flask

• Lab 01 - Bio
• Lab 02 - Blog
• Lab 03 - Company Page
• Lab 04 - Personal Portfolio
• Lab 05 - Burrito Form
• Lab 06 - Flask Redo

Javascript

• Lab 01-03 - JS Redo
• Lab 04 - To Do List
• Lab 05 - Quote API

Django

• Lab 01 - To Do List
• Lab 02 - Blog

Submitting your work

Make sure all labs are located within Class_Raven/Code/<YourName>

To emulate a more professional Git workflow, we're going to start creating new branches for each lab starting in the HTML/CSS section.

Creating a new branch:

Click to expand

• git branch to check that you're on the master branch, use git checkout master to go to the master branch if needed.

• git status to check if your local master branch is up to date with origin/master on Github.

• git pull if needed to pull any recent changes to your local repository

• Create a new branch and switch to it.

  • Option 1:

    • git branch <YOUR_NAME-SECTION-LAB_NUMBER>
    • git checkout <YOUR_NAME-SECTION-LAB_NUMBER>

  • Option 2:

    The -b flag can be used after the checkout command to combine these two steps:

    git checkout -b <YOUR_NAME-SECTION-LAB_NUMBER>

  e.g. My branch for the "Lab 01 - Bio" in the HTML/CSS section would be named: keegan-htmlcss-lab01. The name can vary a bit from this example, but please keep the chosen formatting consistent from one lab to another.

• git add <FILENAME> to add a specific file or git add . to add everything in the current dicrectory

• git commit -m "your commit message" to commit your work

• A remote branch will need to be created for each new local branch. Git will usually display the proper command to do this when a new branch is pushed for the first time.

  The command is:

  git push --set-upstream origin <BRANCH_NAME>

  OR

  git push -u origin <BRANCH_NAME>

  Screenshot

  

• After successfully pushing your new branch to Github, you should see the option to create a Pull Request for your branch on the main repo page.

  Screenshot

  

• If you don't see that message, you'll have to navigate to your new remote branch

  Screenshot

  

• Once you've navigated to your individual branch, you'll find the option to create a Pull Request in the "Contribute" dropdown.

  Screenshot

  

• Click the "Open Pull Request" button. Add a comment to your Pull Request like "Submitting Lab 00" and click "Create Pull request"

  Screenshot

  

Updating a branch

Click to expand

After a Pull Request is submitted, the code on that branch will be checked. Necessary corrections or adjustments will be posted as comments on the Pull Request on Github.

Corrections will be made only to that particular branch.

• git checkout master to switch to the master branch

• git pull to add the changes from the master branch into your branch.

• git checkout <YOUR_NAME-SECTION-LAB_NUMBER>

• git merge master to pull any updates from the master branch into your branch

• Add and commit updated files.

• git push to push your changes up to the remote repository on GitHub

• Only one Pull Request is allowed per branch. A message will be added to the current Pull Request for the new commits.

• Once a lab is complete, its branch will be merged into master.

---

Additional Resources

Django

• Guide to Extend Django's User Model - by Keegan Good

SQL

• SQL Murder Mystery
• SQLZoo
• W3 Schools - SQL Tutorial
• SQL Practice Resources

HTML/CSS/JS Online IDEs

• Code Pen
• Replit
• Code Sandbox
• JS Fiddle

Useful VS Code Extensions

• Jinja2 Snippet KitJinja2 snippets for cool attractive people to use in your HTML templates.
• Bracket Pair Colorizer 2Makes code blocks and nested expressions easier to read
• Thunder ClientGUI to make and manage HTTP requests
• Markdown All-In-OneQuickly create markdown tables of contents and other useful markdown features
• Javascript ES6 SnippetsUseful snippets to streamline Javascript development
• GitLensCompare differences between branches and easily manage remote repositories
• LiveServerServe HTML/CSS/Javascript projects from VS Code

SEO & Accessibility

SEO

• Get Started with SEO
• Beginner's Guide to SEO

Accessibility

• ARIA in HTML - W3C
• ARIA - MDN Web Docs

Screen Capture Tools for Creating GIFs for Project READMEs

• Windows - Screen to GIF
• MacOS - GIPHY
• Linux - Peek

Webpage Styling

Flexbox Games

• Flexbox Froggy
• Flexbox Zombies

Color Schemes

• Coolors
• Adobe Color Wheel

Design Principles

• 18 Tips to Make Websites Look Better
• 20 Web Design Principles
• Anatomy of a Webpage
• What are Semantic HTML Tags and Why You Should Care
• HTML Best Practices

CSS Preprocessors

• Intro to & Bootstrap Theming with Sass & Repository

Coding Principles

• Principles of Clean Code