ashx3s

Search Improvement Task Notes

This activity is based on the course "Power Searching with Google" and is intended to help you improve your ability to find useful information.

README Task

• In your project readme, add an h2 heading labelled "Search Terms"
• Under this heading, Summarize the focus of your query with an h3 heading.
  • ie: ### SVG transition animation
• then add a sentence that describes what you're looking for

ashx3s

‎‎​

ashx3s

Afternoon Algorithm Activity

Convert a flowchart into the programming language that you're learning.

This activity does not involve rendering any graphics or dealing with complex data as it is intended for improving your ability to build small clear algorithms. In some cases, you might be mostly writing in comments and that's ok. The objective is to connect the nouns, verbs, repetition, and decisions to variables, functions, loops, and conditionals and visualize how to return desired results.

Instructions

Remember that we are still mostly flow charting and that fully functional code is not the focus

ashx3s

Morning Algorithmic Thinking Warmup

The objective of this activity is to improve your ability to write code by flow charting normal day to day tasks as algorithms. It's an activity that's meant to be repeated to allow for learning new insights.

Oftentimes, when we think of activities and tasks in a series of steps, we load a lot of assumptions into each step. To learn to think programmatically, we need to learn to think of tasks as smaller micro steps - dive into the assumed functions and variables.

Along with helping learn to think more programmatically, this activity can also be used to get over mental blocks when struggling with actual coding.

All you need is something to draw, write, or design on

ashx3s

React Tailwind Configuration

These steps work through initializing and setting up fonts and custom colors in tailwind.

Initialization

• Add the Tailwind CSS Intellisense plugin to vscode
• Follow these instructions for basic initialization and setup
  • NOTE: Add the full flag to this command like so: npx tailwindcss init -p --full
• this will add all of the utility classes which is good for standardization

ashx3s

Prettier Config + Git Branch Workflow

Steps

1. Create our feature branch
2. install prettier
3. configure prettier
   • add files (config and ignore)
   • set up rules
4. add the tailwind plugin for prettier

ashx3s

Practice Making a Pull Request

Merge code from one branch to another

Steps

1. Open up a git repository
2. Create a new branch: git checkout -b develop
3. Change something in your code
4. Commit and Push (as usual)

ashx3s

Pull Request Achievement

Goal: Set up prettier and or eslint in a feature branch.

Instructions

Use your global gitignore achievement repo or a new repo

• Prep work: add an html file and quickly write some html. Purposefully make it a little messy

ashx3s

Global Gitignore Achievement

Instructions

1. Follow the instructions on the Github Docs Website to create a .gitignore in your home directory
   • you can also review this gist which basically says the same thing
2. Take a screenshot of your terminal with the commands that you used to set up your global gitignore. also screen shot the contents of your global gitignore file (opened in vscode)
3. Set up a repo on your desktop don't create from github first
   • add tailwind to it

• don't add a gitignore to the repo

ashx3s

Create a Figma Prototype

The outcome of this achievement is make interactive prototypes from our components and design system. There are 2 main tasks that this will focus on:

1. Make buttons interactable so they emulate what using the actual site would feel like
2. Make the buttons clickable so they emulate what the actual site will function like

Instructions

Step 1