πŸ§‘πŸΎβ€πŸ€β€πŸ§‘πŸΎ day-plan

✍🏽 Register

Slack Libs

Learning Objectives

A creative way to practice Slack communication through collaborative storytelling.

  1. Facilitator: Create a dedicated thread in your team’s Slack channel.
  2. Start with a simple prompt, eg:
  • “Time travelers from 2030 visit to study our cohort as the pioneers of the tech industry. What made us so revolutionary?”
  • “Scientists accidentally merged all our pets/favorite animals into one super-creature. Describe this majestic beast and its day at the office.”
  • “Breaking news: Our entire team just discovered we have superpowers! What powers did each person get and how did we first discover them?”

Now, each person will add one sentence to the story using:

  1. 😁 At least one emoji
  2. One Slack formatting feature (bold, italic, bullet point)
  3. One @mention of another team member, inviting them to continue the story.

Continue for minutes or until everyone has contributed.

Key Slack features to try
  • How to start/find threads
  • Basic text formatting (*/`~)
  • Emoji reactions
  • @mentions and notifications
  • How to edit/delete messages

🎑 Morning orientation

Learning Objectives

Planning during the week

🧭 During the week, create a post on Slack and get some people to take on the roles of facilitator and timekeeper. Nominate new people each time.

πŸ‘£ Steps

If you haven’t done so already, choose someone (volunteer or trainee) to be the facilitator for this morning orientation block. Choose another to be the timekeeper.

πŸŽ™οΈ The Facilitator will:

  1. Assemble the entire group (all volunteers & all trainees) in a circle
  2. Briefly welcome everyone with an announcement, like this:

    πŸ’¬ “Morning everyone, Welcome to CYF {REGION}, this week we are working on {MODULE} {SPRINT} and we’re currently working on {SUMMARISE THE TOPICS OF THE WEEK}”

  3. Ask any newcomers to introduce themselves to the group, and welcome them.
  4. Now check: is it the start of a new module? Is it sprint 1? If so, read out the success criteria for the new module.
  5. Next go through the morning day plan only (typically on the curriculum website) - and check the following things:

Facilitator Checklist

  • Check the number of volunteers you have for the morning
  • Check someone is leading each session
  • Describe how any new activities works for the group
  • Decide how best to allocate trainees and volunteers for a given block - most blocks will make this clear

⏰ The Timekeeper will:

  • Announce the start of an activity and how long it will take (check everyone is listening)
  • Manage any whole class timers that are used in an activity
  • Give people a 10-minute wrap-up warning before the end of an activity
  • Announce the end of an activity and what happens next

Workshop: Developer Tools πŸ”—

Learning Objectives

Inspector Gadget

Prep

For this workshop you will need:

You’ve already used a little bit of Devtools in ITD when you used Lighthouse to audit your code. But there’s much much more! Devtools is an entire IDE (Integrated Development Environment) running inside your browser and it has hundreds of ways to inspect, test, and develop your code.

πŸ’‘ Explore

Each browser has its own Devtools. Download Safari, Chrome Canary, and Firefox Developer Edition to explore the differences.

Inspect the DOM

Explore

In groups of no more than five. Take it in turns to swap the driver for each section of this workshop

  1. Set a whole class timer for 10 minutes.

  2. Inspect the page with Devtools.

  3. Write down the answers to these questions:

    • What is the name of the font used on the page?
    • What is the CSS variable that holds this value? (Hint: variables start with --, like, --paper)
    • What is the brand colour value (Hint: it’s set in a variable)?
    • What is the brand colour value used for in the page?
    • What variables hold CSS length data type values?
  4. When the timer goes off, share your answers with the other groups. Paste them in a thread in Slack and go quickly to the next challenge.

So we’ve seen that fonts, colors, and spacing are often stored as CSS Variables, or custom properties. This allows them to be easily changed throughout a project by simply altering one value. Let’s experiment with this.

Experiment

  1. Set a whole class timer for 10 minutes.
  2. Inspect the CSS of the page with Devtools.
  3. Find the CSS Variables (hint: variables start with --, for example, --paper)
  4. Try changing the values of these variables and see how it affects the page.
  5. Some questions to answer. (Make a prediction about what you think will happen first, and then test it)
  • What will happen when you click the value of --finger and press up arrow ten times?
  • What will happen when you delete the value of --copy
  • What will happen when you change the value of --space to red?

Reflection

When the timer goes off, set a new timer for 10 minutes to share your answers with the other groups.

Grid Inspector

Next, let’s see how the page layout is handled. Modern websites use the CSS Grid for layout and you can manipulate grids with Devtools.

Grid Editor

  1. Set a whole class timer for 10 minutes.
  2. With Devtools, locate a grid element on the workshop page.
  3. Activate the Grid Badge in the Elements panel.
  4. Use the Grid Editor to try changing the layout.
  5. Go straight to the next challenge!

Lighthouse

It’s important that software works and that people can use it. Lighthouse can help you write code correctly by pointing out your errors. But even better, it can teach you to fix the errors.

Audit

  1. Set a whole class timer for 10 minutes.
  2. Run a Lighthouse audit on the workshop page.
  3. Look at the results and identify the issue.
  4. Now, how will you fix it? Click on the error. Lighthouse explains what is wrong and provides a link to a detailed explanation on why it’s wrong, how serious it is, and how to fix it!
  5. If you have time, fix the error, but in any case, once the timer goes off, paste the link to the detailed explanation page into the workshop thread in Slack.
  6. Go straight to the next challenge, after which we will spend some time discussing what we discovered.

Hover for more

In fact Devtools is a great teacher. In the Styles panel, hover over any CSS property to get a quick definition of that property. Click ‘Learn More’ to go straight to the MDN page for that property.

If the explanation doesn’t make sense to you, ask ChatGPT (a generative AI) to explain it further.

⚠️ Plausible Hallucinations

Remember: Generative AIs are regularly confidently wrong; it can be helpful, but never trust it over Devtools.

If something doesn’t make sense, or seems confusing or maybe wrong, it’s better to ask friendly humans in Slack.

Explore and Explain

  1. Set a timer for 10 minutes.
  2. Select <main> in the Elements panel
  3. Hover over the ruleset attached to main in the Styles panel.
  4. Copy the Devtools explanation and ask ChatGPT to explain it, like this:
Please explain this to me like I'm a beginner learning HTML and CSS.

Determine a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement. Shorthand for ‘grid-row-start’, ‘grid-column-start’, ‘grid-row-end’, and ‘grid-column-end’.

  1. Come back together as a large group.

Reflect

Reflect

  1. Set a timer for 5 minutes.
  2. Spend five minutes discussing what you will share with the rest of the class about your experiments so far. What was a surprise to you? What will you use regularly from now on? What confused you? Elect one person to represent your group.
  3. Set a timer for 20 minutes.
  4. Popcorn round the representatives and share your findings. We’re not done yet so keep to time.

Many ways of examining the same thing

So we’ve explored the Elements panel, the Styles panel, and the Lighthouse panel. There are many many more panels, and they all expose a different way of interpreting, interacting with, or understanding the same code. Computer systems frequently do this. It’s a mistake to think that the way you use a website is the only way it can be used. Bots, crawlers, screenreaders, integrations…there are many and various consumers of your code, so it’s important to make sure you construct it properly.

For example, you have just looked in the Elements panel. This is not really your HTML, this is the DOM, an API the browser builds using your HTML. An example of how the DOM is different from HTML is that JavaScript can change what’s in the page - this changes the DOM, but doesn’t change the actual HTML. The DOM isn’t the only API it builds. Let’s look at another one right now!

A New Lens

  1. Set a timer for 5 minutes.
  2. Find the Accessibility Panel and check ‘Enable full-page accessibility tree’
  3. Now click the “Universal Man” button in the Elements Panel.
  4. What is Ignored in the Accessibility Tree that is present in the DOM?
  5. When the timer goes off, share your answer with the other groups by pasting in the workshop thread.

Reflect

Develop Your Skills

  1. Set a timer for 10 minutes.
  2. Discuss how your team will work on developing your skill with Devtools. Make your goals SMART. For example, you might audit a website you have built already with Lighthouse and improve its score using the guides. You might schedule a study group where each person researches and then teaches the group about a different panel in Devtools.
  3. Write down your learning goals with Devtools on a piece of paper and sign it underneath. Elect a new person to represent your group.
  4. Set a timer for 10 minutes.
  5. Popcorn round the representatives and share your commitments.

And that’s it for today! We have covered a lot, but remember, as developers, we are lifelong learners. Always be curious and don’t be afraid to explore new tools and concepts. Soon we’ll dive even deeper into Devtools, so make sure to keep exploring.

More

  1. Inspect web pages as you use the internet. Do this all the time! What font does Youtube use? What about CSS Tricks? Hackernews is still using tables - what’s wrong with this?

  2. Try changing the style and content of some websites. Make your favourite website bright pink. Make the BBC News page tell people about something great you did. Send a screenshot of something cool you changed to your cohort’s Slack channel.

  3. There are crash courses in Devtools all over YouTube and Udemy etc. Find a useful tip and share it in your class channel.

Study Group Development

Learning Objectives

This time is set aside for you to work together in small groups to make progress on your coursework and objectives. You should have brought at least one ticket from your backlog to work on and ideally have prepared at least one question to get mentor support on.

You can also choose to do structured activities to consolidate your objectives for this sprint. Your learning journey belongs to you. Think about what you need to do to achieve the objectives for this sprint and how you can use this time to work towards them.

If you are working on a Pull Request, this is a great time to get real time code review from your peers and mentors. Remember to use the GitHub interface to comment on the code and ask questions so your work can be tracked.

πŸ—‚οΈ Options

Optional structured activity: Pair Programming

Pair programming

Learning Objectives

  • Switch between driver and navigator roles after
  • The “driver” is the person typing on the keyboard, just thinking about what needs to be written
  • The “navigator” reviews what the driver is doing and is thinking about to write next
  • Don’t dominate - this is teamwork

βŒ› Time’s up! Take a break! Make a cup of tea. Good job, partners!

Optional structured activity: Submit your Step

Submitting your steps

Your goal for this sprint is to submit your first step and enroll as a Trainee. This is a big milestone, and we want to make sure you have all the support you need to get there.

All the information you need to complete this step is in the prep. Make sure to read it carefully. If you have something blocking you from submitting, use this time to resolve your blocker and submit your step.

Community Lunch

Every Saturday we cook and eat together. We share our food and our stories. We learn about each other and the world. We build community.

This is everyone’s responsibility, so help with what is needed to make this happen, for example, organising the food, setting up the table, washing up, tidying up, etc. You can do something different every week. You don’t need to be constantly responsible for the same task.

Sharing Our Blockers

Learning Objectives

We call problems that stop our progress “blockers”. We talk through our blockers regularly and help each other get “unblocked” or “unstuck”.

Sharing Our Blockers

Join the online board or grab some sticky notes. Add your blockers.

Make sure to add only one blocker per note.

Facilitator Once everyone has added their blockers, group similar blockers together.

Facilitator Next, discuss the blockers and help each other get “unblocked”. Start with the most common blocker and work your way down the list.

Hints and Tips

Example Blockers

  • I can’t find a Slack channel people keep mentioning.
  • People tell me I should be replying to a Slack message in a thread, and I don’t know how.
  • I can’t open a PR, because…
  • How do I fix extra stray files in my PR?
  • I don’t have a computer so I can’t complete my work!
  • How do I run Lighthouse?
  • Everyone should have blockers. If you aren’t blocked on anything in the course, do you need to challenge yourself more?
  • Ask “stupid” questions. Your question is not stupid! What we are doing is hard, and everyone has questions. If you’re stuck, it’s likely that someone else is too. Please help others and ask your question!
  • If you have other more advanced questions, do write them on the board but don’t expect to answer them in Blockers. We will work on those in study group.

Afternoon Break

Please feel comfortable and welcome to pray at this time if this is part of your religion.

If you are breastfeeding and would like a private space, please let us know.

Study Group Development

Learning Objectives

This time is set aside for you to work together in small groups to make progress on your coursework and objectives. You should have brought at least one ticket from your backlog to work on and ideally have prepared at least one question to get mentor support on.

You can also choose to do structured activities to consolidate your objectives for this sprint. Your learning journey belongs to you. Think about what you need to do to achieve the objectives for this sprint and how you can use this time to work towards them.

If you are working on a Pull Request, this is a great time to get real time code review from your peers and mentors. Remember to use the GitHub interface to comment on the code and ask questions so your work can be tracked.

πŸ—‚οΈ Options

Optional structured activity: consolidating SQL

Optional structured activity: consolidating SQL πŸ”—

Google Sheets SQL Showdown: Team Quiz

Welcome, spreadsheet warriors! Today, we’ll be putting your Google Sheets SQL knowledge to the test in a team quiz.

  • Work on Google Sheets queries, test your knowledge on selecting and filtering data.

  • Collaborate with your teammates, discussing approaches and problem-solving together.

  • Apply your SQL knowledge under a time limit, simulating real-world scenarios.

Requirements

  • Quiz Leader:: The quizmaster needs to prepare the questions, guide the quiz, and keep the energy high. Sample questions are provided below, but you should set your own. Anyone: trainee or volunteer can take this role. Prepare your quiz questions and answers in advance.

  • Timekeeper: Keep track of time for each round to ensure the quiz runs smoothly.

  • Assemble Your Team: Get into groups of 3-4. Teamwork makes the dream work!

  • Paper & Pen: Prepare to write queries and discuss strategies WITHOUT using a computer.

  • Friendly Competition: Complete the challenge with a positive and collaborative spirit!

The Challenge

This workshop will be divided into rounds, each presenting a Google Sheets SQL query. The scenarios will target various SQL functionalities available in Google Sheets.

You will write your answers on paper, not on a computer. Close your laptops. You may use this printed Google Sheets SQL CheatSheet to help you.

  • Round 1: Getting Data: Practice using SELECT statements to find and get information from a sheet.

  • Round 2: Conditional Queries: Let’s try something harder! Use WHERE clauses and conditional statements to filter data.

  • Round 3: Advanced Arena: Challenge yourselves. Try using multiple conditions or advanced ways to filter data.

Bonus Round (Optional): Feeling confident? The quiz leader may do an extra round with an example spreadsheet. Really pushing your problem-solving abilities.

Acceptance Criteria

  • Participation is Key: Be active with your team! Discussing questions and contributing ideas throughout the quiz.

  • Show SQL Skills: Work together to plan correct Google Sheets SQL queries to solve the problems!

  • Teamwork: Collaborate effectively and communicate your solutions clearly within your team.

Let the Games Begin!

Remember, effective communication, teamwork, and friendly competition are the keys to success!

SQL Showdown: Team Quiz Extravaganza - Example Questions

Round 1: Data Retrieval (10 minutes)

Scenario: You’re working with a Google Sheet containing product information.

Question 1: Say what you see

Write a query to select all product names and prices from the ‘Products’ sheet.

Question 2: WHERE are we going with this

How can you change the query to only show products with a price greater than $50?

Round 2: Conditional Queries (10 minutes)

Scenario: The Google Sheet also has a ‘Sales’ sheet that stores information about sales.

Question 1: AND the plot thickens

Write a query to get the product name and sales amount. Filter out sales where the quantity sold is greater than 10 AND the price is less than $100.

Question 2: OR is it?

Update the query to show sales where the product category is ‘Electronics’ OR the cost is over than $500.

Round 3: Advanced Arena (10 minutes)

Scenario: We have a ‘Customers’ sheet, containing customer names and their sale history.

Question 1: LIKE a pro

Write a query to find all customers whose names start with ‘A’ and have made a sale in the last 30 days.

Question 2: ORDER in the court

How can you change the query to show the top 5 customers by total sale amount, in descending order?

Bonus Round: Real-World Scenario

Scenario: The marketing team wants to identify top customers for a targeted campaign.

Challenge:

Write a query to find customers who have:

  • Made over 3 purchases
  • Have a total spend of over $1000
  • Whose last buy was within the last 60 days.

Remember: These are just examples. You can change the difficulty and questions based on the group’s experience.

The winning team πŸ†

Take a victory lap and eternal glory in the CodeYourFuture Hall of Fame. May the best Google Sheets SQL warriors be victorious! πŸ†πŸ”₯

Optional structured activity: know your computer

Optional structured activity: know your computer πŸ”—

Know Your Computer

“Know Your Computer” focuses on how to perform regular tasks on your computer. In this workshop you will use basic Linux commands in the terminal. The goal is to reduce your fear of using the terminal.

Pre-requisite

To be able to do this workshop you will need a computer with a Linux shell running on it. If you already have a Mac or an Ubuntu operating system or any other Linux distribution running on your laptop, then you are fine. If your laptop is running on Windows operating system, download and install Git Bash for Windows. Code Your Future does not support Windows, so you must install or dual boot Linux to take our course. But to do this workshop, you can just use Git Bash. Once installed, open git bash and you should be able to perform the tasks below.

Tasks

You must use the terminal and Linux commands to complete each challenge. You must not use your GUI! Hands off the mouse! πŸ–±οΈ

  • Create a folder called my-shopping inside your Documents folder.
  • Then create a file called my-list.txt inside my-shopping folder.
  • Write the following items to my-list.txt file:
  1. Tea
  2. Pasta
  3. Coffee
  4. Milk
  • Create a new folder called my-new-shopping inside your Documents folder.
  • Now move my-list.txt from your my-shopping folder to your my-new-shopping folder. Your my-shopping folder should be empty after this step.
  • Copy my-list.txt from your my-new-shopping folder back to your my-shopping folder. After this step, both folders should contain a file called my-list.txt.
  • Now add the following line to my-list.txt file that is inside my-new-shopping folder:
   5. Sugar 
  • Display the content of my-list.txt file inside my-shopping and the one inside my-new-shopping. my-list.txt file in my-shopping folder must have 4 items while the one inside my-new-shopping folder must have 5 items.

Resources

To help with this here are resources you can refer to: freecodecamp.com, Guru99, CLI-Treasure-Hunt.

πŸ›ŽοΈ Code waiting for review πŸ”—

Below are trainee coursework Pull Requests that need to be reviewed by volunteers.

ITP-JAN-25 | SALLY McGRATH | ONBOARDING | Sprint 1 πŸ”—

Learners, PR Template

Self checklist

  • I have committed my files one by one, on purpose, and for a reason
  • I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
  • I have tested my changes
  • My changes follow the style guide
  • My changes meet the requirements of this task

Changelist

I am opening this PR to preview my website as I do not have local file access.

I will mark this PR as Needs Review when it’s ready for review.

Questions

Ask any questions you have for your reviewer.

Start a review
See more pull requests

Wrap

You are done for the day. Take a moment to reflect on what you have learned and achieved.

Stand in a circle and share:

  • πŸ“› your name
  • πŸ’ͺ🏽 one thing you built today
  • πŸ‘·πŸΎ the task you are going to work on next
  • πŸ›Ÿ one thing you need help with

Give yourselves a round of applause. Now you have earned your rest. Usually people go for a cup of tea or a pint after class. You are welcome to join and wind down together.