Every CYF session begins with an energiser. Usually there’s a rota showing who will lead the energiser. We have some CYF favourite games you can play if you are stuck.

Traffic Jam: re-order the cars to unblock yourself
Telephone: draw the words and write the pictures
Popcorn show and tell: popcorn around the room and show one nearby object or something in your pocket or bag and explain what it means to you.

Learning Objectives

Demonstrate the ability to adapt your communication to different audiences

Preparation

Split into groups of six, and within your groups, split into three pairs of two people.

The roles are that one trainee will be talking to their pair who is listening and responding, and the other trainees will be watching.

In some groups, you may need one person to be in more than one pair.

Introduction

Trainees will present how they would explain technical concepts to a specific audience.

Developer Communication presentation

🎯 Goal: Actively listen to each others presentation (20 minutes)

One pair has a conversation - one person presents information, and the other listens to the information
The trainee that is listening should practice active listening techniques
The trainee that is listening should ask questions impersonating the audience that is being talked to (a 10 year old, a manager, a peer)
Everyone should make notes of what you thought was good or interesting and what you think could be improved for the next exercise

Reflect on the presentation

🎯 Goal: Give feedback on each other’s presentation (30 minutes)

You will work in the same groups
Each trainee should share what they thought was the most challenging in this exercise (while preparing or in class)
Share a clear example of something you liked on someone’s presentation

Explain the specific situation/action
The impact of the person’s action (personal feeling or how it could be interpreted)

A quick break of fifteen minutes so we can all concentrate on the next piece of work.

What are we doing now?

You’re going to use this time to work through coursework. Your cohort will collectively self-organise to work through the coursework together in your own way. Sort yourselves into groups that work for you.

Use this time wisely

You will have study time in almost every class day. Don’t waste it. Use it to:

work through the coursework
ask questions and get unblocked
give and receive code review
work on your portfolio
develop your own projects

Every Saturday at CYF 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.

Get Forms

This workshop is about writing forms in HTML.

Note: this workshop is deployed to Netlify at https://cyf-workshops.netlify.app/get-forms and branch previews are turned on. Any PRs opened to main will be deployed automatically and can be looked at via the bot link on that PR.

Learning Objectives

Interpret requirements and express them as HTML
Interact with the GitHub Search API
Validate user data
Test a form against acceptance criteria
Report on the results of testing on a PR
Make changes to code based on feedback

Requirements

Before you start, make sure you’ve done your prep work on forms and worked through some of the examples in the HTML forms section of MDN.

Today we’re going to build a form that interacts with GitHub Search. It’s a bit unusual for a form as we are writing a GET method, where the form requests, or gets data, instead of a POST method, which sends data.

Next, we’re going to swap our forms with another group and test the form we made.

Last, we’re going to make changes based on the test feedback. Because it’s important that software works and that people can use it.

But first, everybody needs to be ready to participate.

🧰 1. Setup

Getting Set Up

Set a timer for 10 minutes.
Fork this repository to your own GitHub account.
Clone the repository to your machine.
Checkout a new branch called cohort/your-name.
Open get-forms/index.html in VS Code.

📖 GitHub Search Project Briefing:

Create a form so the user can search GitHub repositories based on specific criteria.

👤 User Stories:

As a user, I want to search on GitHub.
As a user, I want to sort my results by stars, forks, or when last updated.
As a user, I want to sort my search results in my preferred order, ascending or descending.

✅ Acceptance Criteria:

US1: Search Field

Given I am on the GitHub search form,
When I select the search field,
Then I should be able to type in my search query.

US2: Sorting Results

Given I am on the GitHub search form,
When I choose from options of stars, forks, and updated.
Then the results are sorted by stars, forks, or last updated.

US3: Options for Sort Order

Given I am on the GitHub search form,
When I choose a sort order
Then the results should be sorted in my preferred order, ascending or descending.

Overall Acceptance Criteria

Given I am on the GitHub search form,
When I run Lighthouse
Then the Accessibility score is 100.

2. 🧱 Build the form

Get results from GitHub

Set a timer for 45 minutes.
Work in pairs.
Read the project briefing carefully.
Look in the resources section for help with the elements you might need.
Write your HTML in get-forms/index.html. Do as much as you can, leaving time to open your PR (10 or 15 minutes).
Open a pull request to this repo with your work. Your PR will show up in the list of PRs for this repo and a deploy preview will be created and linked on your PR. Explore this.

3. 🧪 Test the form

Test the form

Set a timer for 15 minutes.
Swap your form with another group by choosing the PR directly above yours in the PR list. If you are at the top of the list, choose the PR at the bottom of your group!
Test your colleague’s form against the acceptance criteria.
Comment on their pull request with what you have found.

4. 🫠 Review and respond

Review the test results

Set a timer for 15 minutes.
Read the comments on your pull request.
Make changes you need to make to your form to pass the acceptance criteria.
Commit and push your changes to your branch; your pull request will update automatically.
If your pair doesn’t have changes, join a team that does and help them.

Resources

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.

What are we doing now?

Use this time wisely

You will have study time in almost every class day. Don’t waste it. Use it to:

work through the coursework
ask questions and get unblocked
give and receive code review
work on your portfolio
develop your own projects

Use this time to check over the success page this module.
You can find the module success page at the top level of your module

Retro (20 minutes)

A retro is a chance to reflect on this past sprint. You can do this on a Jamboard (make sure someone clicks “Make a copy” before you start, and you work on that together) or on sticky notes on a wall.

Set a timer for 5 minutes.
Write down as many things as you can think of that you’d like to start, stop, and continue doing next sprint.
Write one point per note and keep it short.
When the timer goes off, one person should set a timer for 1 minute and group the notes into themes.
Next, set a timer for 2 minutes and all vote on the most important themes by adding a dot or a +1 to the note.
Finally, set a timer for 8 minutes and all discuss the top three themes.