Code Your Future - Home

🧑🏿‍🤝‍🧑🏾 day-plan

🔖
  1. Energiser
  2. Devtools Workshop
  3. lunch
  4. Study Group 1
  5. Code Review
  6. Afternoon break
  7. Study Group 2
  8. Transferable skills
  9. Feedback
  10. Pairs for next week
  11. Retro

Energiser

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.

  1. Traffic Jam: re-order the cars to unblock yourself
  2. Telephone: draw the words and write the pictures
  3. 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.

Devtools Workshop 🔗

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.

Community Lunch

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.

Study Group

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

🛎️ Code waiting for review 🔗

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

Nw6/nohe tekelamriyam/html css/multipage clone/week4 🔗

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

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review
NW6 | Fikret Ellek | HTML-CSS Module | Multipage Clone | Week 4 🔗

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 have created portfolio page. started from mobile and then added desktop media query at 540px width

Questions

Ask any questions you have for your reviewer.

Start a review
Nw6|Ayman model-html-css 🔗

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

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review
NW6| Fidaa Bashir| Cake co| Week 3 🔗

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

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review
NW6/SABELLA-FISSEHA/HTML-CSS Module-project/Week 4 🔗
I have created a responsive multi-tree page project (project 2) Start a review
See more pull requests

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

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

Transferable skills 🔗

Learning Objectives

Preparation

Must have done the prep work

Introduction

In this session we will talk about our transferable skills.

Brainstorming about transferable skills

🎯 Goal: To brainstorm about transferable skills. (15 minutes)

In your pairs, ask each other the following questions about your texts

  • What would your strengths be as a professional?
  • How did your skills help you achieve your goals in your previous education/job?
  • What skills do you use to adapt new situations?
  • What skills do you use during this course?

Giving each other feedback

🎯 Goal: To practice providing feedback. (15 minutes)

  1. Pair up with another peer.
  2. Share your text with this person.
  3. Read your pair’s text.
  4. Give a feedback on their transferrable skill.

Share how you will contribute to the cohort

🎯 Goal: Recognise how each trainee will contribute to the cohort (5 minutes)

No one is good at everything however everyone is good at something. That is why we work in teams - to combine our strengths.

Identify a skill or strength that you have that will positively contribute to the cohort.

  • Everyone to share 1 skill (no explanation needed, no discussion needed, keep it short)

Feedback 🔗

Learning Objectives

Preparation

Must have done the prep work

Work with your pair.

You will play the three situations once.

Introduction

Take turns to play the roles below and answer the following questions for each situation:

  • Was feedback positive or negative?
  • Was the way it was communicated appropriate? Why?
  • How would you improve it?
  • What would your reaction be after receiving such feedback?
  • Were people in the right mindset to give and receive feedback?

Role play these scenarios

🎯 Goal: To explore positive and negative feedback. (15 minutes)

Situation 1: Tom asked Katie for help on the code he was writing.
  • Tom: “Hi Katie, would you mind spending a few minutes looking at this function I am working on? I can’t seem to find what’s wrong with the code.”
  • Katie: “I am extremely busy and stressed with a deadline, but let me have a look.”
  • Tom: “Here is the function. Do you see anything wrong with it?”
  • Katie: (after looking at the code for some time) “Seriously? How could you miss this? You are missing an End statement. You need to be more careful when writing code so you only ask for help for things that are not this obvious.”
  • Katie walks away.
Situation 2: Patricia stops by Carla’s desk.
  • Patricia: “Hi Carla. Just wanted to let you know how much I appreciate the work you did in the last project and I hope we get to work together again”
  • Carla: “Oh Thank You! You made my day!”
Situation 3: Team members in a project retrospective meeting discuss things they did well and things that need improvement.
  • Jessica: “I think overall the project went well but developers were constantly waiting for Karen to finish testing their code before they could deploy to Production. She was overwhelmed with the amount of work on her plate”
  • Karen: “Yes, I felt bad for blocking deployments but I cannot give my approval until I have completed testing the code.”
  • Jessica: “Did you ask for help? We can have developers take the role of QA tester when you are overwhelmed.”
  • Karen: “No, I did not ask for help. I did not think of this as an option. I will start implementing this strategy going forward”

Pairs for next week 🔗

Learning Objectives

Preparation

  • Open the existent Google Sheet for your cohort
  • Use the General Availability Spreadsheet

Introduction

Working with different people allows you to learn diverse things by talking, discussing, listening and working together.

So make sure you are pairing with different people with similar availability.

Create pairs for next week

🎯 Goal: Identify the new pair to work with for this week (3 minutes)

  • One trainee to update the Google sheet “XXX X Rota” on the cohort drive

    • The new tab must have two columns, one with the title “Pair 1” and another for “Pair 2.”
    • The name of the tab should be “Pairs HTML S1"
    • Check people’s availability and assign pairs
    • Post a message on the cohort Slack with the shared spreadsheet

    This tab will be the rota of the coursework.

Retro: Start / Stop / Continue

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.

  1. Set a timer for 5 minutes.
  2. Write down as many things as you can think of that you’d like to start, stop, and continue doing next sprint.
  3. Write one point per note and keep it short.
  4. When the timer goes off, one person should set a timer for 1 minute and group the notes into themes.
  5. 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.
  6. Finally, set a timer for 8 minutes and all discuss the top three themes.