🧑🏾‍💻 prep

Decompose interfaces into components; recognise patterns

🔖
  1. Check your setup
  2. Identify components
  3. Spaced Repetition
  4. What are Components?
  5. Understand SMART goals
  6. Review your CYF journey
  7. Backlog

Check your setup 🔗

CYF VS Code extension pack

Why are we doing this?

You must have the CYF VS Code extension pack installed and Prettier enabled. Don’t use another formatter.

🧹 Formatting with Prettier

Using a shared formatting convention makes sure your “diffs” ( differences between the codebase and your changes) only show the code you intentionally wrote, and not a bunch of spaces or tabs. It will also help you read your own code as you work on it.

Maximum time in hours

.15

How to get help

Ask for help on Slack if you are having trouble with Prettier. We will work together on the same code in our components workshop, so if you don’t have this set up, you will be blocked and unable to participate.

How to submit

It will be entirely obvious if you don’t do this. 😜

  • :brain: Prep work
  • 🎯 Topic Code Review
  • 🎯 Topic Teamwork
  • 🏕 Priority Mandatory
  • 🦔 Size Tiny
  • 📅 HTML-CSS
  • 📅 Week 3

Identify components 🔗

https://curriculum.codeyourfuture.io/html-css/sprints/4/prep/

Why are we doing this?

We’re going to work with components a lot, so it’s important you begin understanding user interfaces in this way. Front end developers break down complex interfaces into small, understandable pieces and you must practice decoding interfaces in this way yourself.

  1. On BBC News, find the card component.
  2. On YouTube, find the card component.
  3. On Moneysavingexpert, find the card component.
  4. Now find an example of a header, a nav, a hero, and breadcrumbs on sites of your choosing.

Maximum time in hours

.5

How to get help

  1. Use the component gallery to help you identify components.
  2. Look over the upcoming component workshop.

How to submit

Take a screenshot of each component and attach to this ticket. Don’t share anything private or not safe for work.

Next, join (or begin if you are the first) the thread in your class channel. Find a component not in the list above and share it.

In your comment include:

  • the name of the component
  • a link to the site you are looking at
  • a screenshot of the site with the component identified (circle it, crop the image, whatever)
  • anything else you find interesting about this
  • :brain: Prep work
  • 🎯 Topic Communication
  • 🎯 Topic Requirements
  • 🎯 Topic Structuring Data
  • 🎯 Topic Teamwork
  • 🏕 Priority Mandatory
  • 🐇 Size Small
  • 📅 HTML-CSS
  • 📅 Week 4

Spaced Repetition

What are we doing now?

You’re going to use this prep time to answer some questions and schedule in times to review your understanding. In your planner or calendar, schedule a short (10 minute) review of your answers:

Space at increasing intervals

  • One week from today
  • One month from today
  • Three months from today
  • Six months from today
  • One year from today

Do this now. Then move forward to working through as many of these questions as you can. (You may not complete them all, and that is ok.)

Write down your answers first and then update them after looking at the sample answers, if it’s useful to do so. Use all available tools to help you answer, and remember:

the point is not to complete the exercises
the point is for you to secure your own understanding

Examples of tools you might use

Notes

What are components?

Learning Objectives

5 Things About Components

What are components?

A component is a reusable, self-contained piece of code. Components are like lego blocks you can build websites with. Most websites are made by “composing” components in this way.

But... practically speaking, what are components? Name at least five.

Examples of UI components: header, nav, hero, card, breadcrumbs, toast, chip, carousel, rating. There are so many more.

How am I going to remember all that?!

It clearly doesn’t make sense to try to memorise oodles of components in zillions of libraries. Instead, we should spend our time more wisely:

  • identifying common patterns
  • breaking down designs into these common patterns
  • finding and reading documentation so we can use components in any library or design system
Why do we build with components?

♻️ Re-use

Instead of writing out all the HTML and CSS each time, we can save our decision about how a card should work, or how a button should look, in a component and re-use it over and over. If we want to change the rules, we can change them in just one place, our component, instead of over many files or pages.

👩🏽‍👩🏽 Consistency

If we call a header component, we know that all our headers will match on our site, because they all use the same shared rules.

🍱 Composition

We can build bigger components out of smaller components and compose them onto pages to make views. This is how we build complicated interfaces quickly.

🚅 Efficiency

We can split up the tasks and work in parallel. One person can work on the button component, another on the card component. When a new developer joins the team, they can make changes to a limited part of the codebase, rather than having to understand the whole thing first.

How do we split up HTML and CSS into composable pieces?

So, we actually can’t yet, not really! We are only beginning our journey with components now. (If you are here from a scheduled review, update your answer.)

To compose pages from many small reusable pieces stored in separate files, we need a third programming language. We are going to learn JavaScript to help us do this. We could use other languages (this curriculum is written in Go), but we will start with JavaScript.

We will keep meeting this idea of small reusable pieces and composition throughout the course. Keep an eye out for it!

Notes

Learning Objectives

Prep for SMART Goals

Learning Objectives

Preparation

Have access to internet

Introduction

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

What are SMART goals?

🎯 Goal: Be able to explain what a SMART goal is (15 minutes)

Watch this video on SMART Goals and if needed make some notes.

Prep for Introspection

Learning Objectives

Preparation

Watch this video on Introspection.

Introduction

Introspection is important as it helps you understand yourself, your journey, how much you have learned and evolved and set your goals.

Answer questions about CYF and your career goals

🎯 Goal: Answer the questions in writing. (40 minutes)

  1. What have you covered over the past weeks?
  2. What parts did you enjoy?
  3. What will you do differently in the next module?
  4. What tips and tricks can you share?
  5. What advice would you give to the next class?

Backlog

Learning Objectives

In software development, we break down complex projects into smaller, manageable parts, which we work on for a week or two. These periods are called “sprints.”

A sprint backlog is like a to-do list. It lists what the team has decided to work on this sprint. It’s chosen from a larger list, usually called the “product backlog,” which holds the entire project to-do list.

For your course, the mandatory work has been scheduled already. You will add any other tickets you want to work on to your backlog and schedule them according to your own goals and capacity. Use your planning board to do this.

You will find your backlog in the Backlog view on every sprint.

Copy the tickets you are working on to your own backlog. Organise your tickets on your board and move them to the right column as you work through them. It’s a flowchart:

flowchart LR Backlog --> Ready Ready --> in_progress in_progress[In Progress] --> in_review in_review[In Review] --> Done

Backlog (30 minutes)

  1. Find the sprint backlog
  2. Copy your tickets to your own backlog
  3. Organise your tickets on your board

Notes

Learning Objectives