Every session begins with an energiser. Usually there’s a rota showing who will lead the energiser. We have some 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

Organise common answers in the group about the trainees learning process so far.

Preparation

Must have done prep work; bring it with you.
You need a computer and internet for this exercise.

Introduction

Introspection in groups is important for gaining diverse perspectives, enhancing self-awareness through feedback, receiving validation and support, and promoting accountability and motivation.

Agree on introspection answers in groups

🎯 Goal: Organise common answers in the group about the trainees learning process so far. (15 minutes)

In groups of 4 people, discuss your answers to the questions you answered before the class.
As a group agree on the final answers and write them down
Choose a speaker for your group who will present your your agreed-upon answers. The presentation has to be done in 3 minutes.

Questions:

What we covered over the past weeks?
What parts we enjoyed?
What we will do differently in the next module?
What tips and tricks we can share with each other?
What advice we would give to the next class?

Present your group answers to your cohort

🎯 Goal: Share your answers and agreed ideas in a 3 minutes verbal presentation (25 minutes)

Choose a time keeper to ensure no group goes over the 3-minute presentation time.
Each speaker of a group has to present their answers within 3 minutes

Tip: next speaker can omit some information that has already been said to avoid repetitive information and reduce their presentation time.

Link to the coursework

https://curriculum.codeyourfuture.io/html-css/success/

Why are we doing this?

🔑 The most important thing is that you are secure in your understanding.

At the end of the course, we will expect you to build novel applications using your understanding. If you cannot build things, we cannot put you forward for jobs. It is in your personal interest to make sure you have properly understood this module.

To progress to the next module you need to meet the success criteria for this module. How will you as a cohort meet the module success criteria? Discuss it in your class channel and make a plan together.

🧑🏿‍🎤 good strategies

asking volunteers to review your code
helping each other with coursework blockers
arranging midweek study sessions
using Saturday time to review code and cohort tracker

🙅🏿 bad strategies

opening empty PRs
copying and pasting
breaking the Trainee Agreement
mistaking the measure for the target

Maximum time in hours

How to get help

Discuss with your cohort. Support each other.

How to submit

In week 4 of your module you will need a representative to report to the organisation. Here’s your template, fill in your details and delete as appropriate:

📈 Cohort Progress Report from @cohort-name to @programme-team

criterion
criterion
criterion
criterion

✅ We are progressing to the next module.
⛔ We are taking a consolidation week to meet our targets.

🎯 Topic Code Review
🎯 Topic Communication
🎯 Topic Delivery
🎯 Topic Requirements
🎯 Topic Teamwork
🎯 Topic Testing
🎯 Topic Time Management
🏕 Priority Mandatory
🦔 Size Tiny
📅 HTML-CSS
📅 Week 1
📅 Week 4

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

Learning Objectives

Be able to create SMART Goals for different scenarios

Preparation

Must have done prep work, bring it with you.
You need a computer and internet for this exercise.

Introduction

Setting SMART goals keeps the projects moving forward, helps with accountability and timing. It helps breaking down goals and achieve them.

Practice setting SMART Goals

🎯 Goal: To understand and be more comfortable with writing SMART Goals. (20 minutes)

Work in groups of 4 people.

Read the scenarios written below and write goals for each of them following the SMART framework (10 min)
- You want to post/publish more on Slack.
- You want to improve your active listening skills.
- Your peer gave you constructive feedback on your assignment and you wish to improve it.
Discuss whether your group has noticed any benefit or obstacles using this approach when setting goals. Write a phrase summarising your group feeling about this. (5 min)
Post your answers in a respective Slack thread (create one if needed) (5 min)

Learning Objectives

Identify groups of people with similar availability that can work together

Preparation

Use the existent cohort spreadsheet.

Introduction

Working in groups of different people than only your close peers makes you a more empathic person, which is an excellent quality when dealing with people.

Create groups for the next module's group work.

🎯 Goal: Create groups for the next module’s group work. (10 minutes)

These are the tasks that must be completed. Organise yourselves so not only one person is doing this.

You must consider trainees availability
You must consider how many hours of coursework or prep work has to be done in groups
You then can define the groups (look for diversity, so people that haven’t worked together should give it a go, ensure you don’t have gendered groups, etc.)
You can use this link to help you allocate people randomly.
Open the existent spreadsheet for pairs/groups and create a new tab called “JS1 Groups”.
Add the groups to the “JS1 Groups” tab
Share the spreadsheet on Slack so it is visible to everyone.

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 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.

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

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.

First Components

Today we're going to think about components. We're going to build a page using a design system and we're going to collaborate on a feature branch workflow.

The overall mission is to compose "components" / groupings of HTML elements to re-build this web page: CYF Components Workshop.

Learning Objectives

Use a design system to build a component from a documented pattern
Collaborate on a feature branch workflow to build a page

Requirements

Before you start, make sure you've installed the CYF Extension Pack in VS Code.

npm install -g prettier

{{<note type="activity" title="Set up your feature branch 15m">}}

Set up your feature branches

Divide the class into three teams: header, footer, card. Use the team generator to help you do this.

Set a whole class timer for 10 minutes.

Each team, choose a driver

Driver, clone this repository
Driver, create and checkout a new branch for your team named like this: feature/cohort-component, where cohort is your cohort name and component is the component you're building, for example: feature/nw6-header

git switch --create feature/cohort-component

Now you're all set up to make changes to together.html.

Find your docs

Set a whole class timer for 10 minutes.

Deployed from this repo is a mini design system. This design system has several documented components: card, header, and footer. Each component view has some sample code and some statements about the components.

Your mission is to find the docs for your component and read them.

Together separately

Set a whole class timer for 30 minutes.

Now build your component. Elect a new driver.

Find together.html in the /components-1 directory. Your mission is to complete this page.
In the correct portion of the page, make your changes to build your feature on together.html.
Driver, commit your changes to your feature branch.
Open a pull request from your branch to main, with your changes.
Remember, docs will help you.
Do the simplest thing that could possibly work to begin with. You can always update your PR with more changes.

gitGraph commit id: "start" branch feature/cohort-component commit id: "paste html from docs" commit id: "fill in the blanks" commit id: "lighthouse revisions" checkout main merge feature/cohort-component

Review and merge

Now we're going to review each other's work. If a mentor is available, they can be the driver for this part and you can actually merge your PRs. If not, please don't try to merge as you could make a mess of this shared repo.

Note to mentor: please revert together.html to the initial commit after you're done so the next class can use it. (Or if your group has time for it, you can merge on a fork instead.)

Set a whole class timer for 30 minutes.

Go to the pull requests for this repo.
Either individually or as a group, review each other's PRs.
Once you're all happy with the PR, merge it.
Did it work? Why/why not? Discuss.

Acceptance Criteria

We have worked in three teams to build a page using a design system
We have used a feature branch workflow to collaborate
We have reviewed each team's PR

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.