πŸ§‘πŸΏβ€ prep

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

What are forms?

Learning Objectives

These questions and answers are compiled from recorded sessions on HTML forms at CYF, and are the collective contribution of several mentors and students. This time we’ve included a trainee answer and a mentor answer, per question.

10 Things About Forms

So let's go deep on forms. What is a form? What does form mean?

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: What does form mean? It’s like a set of options for a user to choose from on a website.

πŸ‘©πŸ»β€πŸ’»πŸ’¬ Mentor: Yes, that is true, that is a correct answer. A deeper answer might be form means shape. It’s how we define the shape of data. So, imagine a shape sorter. You put a square thing in the square hole; you put a round thing in the round hole. Each form field is a different shape in the shape sorter lid. That’s what we’re doing when we write forms. We are forming data with fields.

Why do we do that? Why do we bother grouping and shaping data in that way?

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: What’s that? Of course because it makes it easier to sort it out.

πŸ‘©πŸ»β€πŸ’»πŸ’¬ Mentor: Yeah, absolutely! Because you know we’re going to post that data to a database. Our database doesn’t know what all these strings mean. We have to define the data. We have to label the data. We have to group it, and we have to do something with it: to post it to a database or in some cases, get it from a database.

So that’s the point of all this.

What does field mean?

πŸ‘©β€πŸ’»πŸ’¬ Trainee: Field? It means like the window is completed with some information. A piece of data.

πŸ‘©πŸ»β€πŸ’»πŸ’¬ Mentor: Right! You put a piece into a form field; you just put one thing in there. A form has many fields, and a field is a single piece of data. It is the smallest piece.

So we structure data with forms. And we do that by defining form fields.

Now practise with

Now practise with How to structure a web form
What else do we structure, when we write an HTML form?

πŸ§‘πŸ»β€πŸ’»πŸ’¬ Trainee: Gathering data you mean? I’d be doing a search…

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: Can I say? We can structure… an action, a connection.

πŸ‘©πŸ»β€πŸ’»πŸ’¬ Mentor: Ooh, that’s a great answer. We can structure interaction. We tell the user, what to put in the form field, and how to put that data in. We structure a really specific kind of interaction. We guide them and tell them what to do. And the way that we structure those interactions is, again, using form fields. Using HTML form elements, attributes, and values.

That’s really important to think about, because when you’re deciding what to write in a form, you need to start with ‘what data do I need.’ It’s better to do that than to try and memorise all the different types of form fields. If you think:

flowchart LR
1[What data do I need] -->
2[What interaction am I building] -->
3[What element do I need to achieve 1 and 2]

Then look up that last part. That’s more effective than trying to memorise all the different types of form fields.

But saying that, let's name some form fields now -- some elements in HTML that we can use to structure data. I'm going to say, input of type text. Name a bunch more.

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: Yeah, maybe checkbox?

πŸ‘©πŸΌβ€πŸ’»πŸ’¬ Trainee: radio button.

πŸ‘¨πŸΏβ€πŸ’»πŸ’¬ Trainee: submit input type, could be submit or button itself.

πŸ‘©πŸ½β€πŸ’»πŸ’¬ Trainee: autocomplete?

πŸ‘¨πŸ»β€πŸ’»πŸ’¬ Trainee: I think autocomplete is an attribute, but it’s not itself an element or element type? How about textarea ?

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: select and option

πŸ‘¨β€πŸ’»πŸ’¬ Trainee: The input of type password

πŸ‘©πŸ»β€πŸ’»πŸ’¬ Mentor: The point being that there are absolutely loads of different form elements!

What you need to focus on is what you’re actually doing. We’re structuring data: you are defining, naming and then grouping data. Keep that goal, front and center, then your forms will work well.

Now practise with

Oh and... what does input mean?

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: Input means to put something in. In this case the data we put in the form.

πŸ‘©πŸ»β€πŸ’»πŸ’¬ Mentor: Bang on.

What happens when things don't work well. What happens when the user puts the wrong thing in a field?

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: do you mean validation? Don’t we need JavaScript for that?

πŸ§‘πŸΎβ€πŸ’»πŸ’¬ Mentor: we’ll learn about validation with JavaScript later on, but there’s actually a lot of validation built in to HTML. For example, if you put a required attribute on a field, the browser will not let you submit the form until you fill in that field. That’s validation: it checks against rules and rejects the data if it doesn’t meet the rules.

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: But then aren't all form elements validation?

πŸ§‘πŸ½β€πŸ’»πŸ’¬ Mentor: You could say that all the rules you make about what the user can put in a field are also validation. Every type we just named - input type checkbox, input type email, number, date… are rules about data.

I think the difference is that there’s no way to type into a checkbox: there’s no error message, you just can’t do it. If you type your birthday into an email field, the browser will tell you that’s not a valid email address. So one is just impossible to do and the other gives you an error message, and that’s normally what we mean by validation.

Why is it important to validate data?

πŸ‘¨πŸ»β€πŸ’»πŸ’¬ Trainee: Because if you don’t validate it, you might not be able to use it?

πŸ§‘πŸΎβ€πŸ’»πŸ’¬ Mentor: Right. Forms go wrong when you are vague. You must enforce input with validation, because if users can get it wrong, they will.

What will happen if you put a type of text on an input you label with email?

πŸ‘¨πŸΎβ€πŸ’»πŸ’¬ Trainee: Oh well then people will write in things that aren’t email addresses?

πŸ§‘πŸΏβ€πŸ’»πŸ’¬ Trainee: and you won’t know until you try to send them an email…

πŸ‘©πŸ»β€πŸ’»πŸ’¬ Mentor: Yeah they will. You can be absolutely guaranteed that users will do that. You have to save them from themselves, and save your database from your users!


          Little Bobby Tables

Now practise with

Prep Developer Communication πŸ”—

Learning Objectives

Preparation

Work together with your pair

Introduction

You will explore how a professional developer explains technical concepts with simple communication to specific audiences.

What do you already know about tech presentation?

🎯 Goal: Reflect on your knowledge about technical presentations (10 minutes)

  1. Thinking about technical presentations you’ve seen, list three things that made the delivery and presentation good.

  2. When you prepare and deliver a presentation, which of the following things do you usually think about?

    • I think about who will be receiving my presentation and what they want to learn
    • I think about the key messages I want to leave my audience with
    • I try and avoid doing presentations
    • I speak quickly so that I can cover all the material
    • I leave time to interact with the audience
    • I like to make my presentation visual and appealing
    • I plan to mostly read the text on my presentationΒ 
    • I make sure to avoid terminology my audience won’t know
    • I plan to leave pauses and look to see if my audience are following me
    • I try out my presentation with a colleague first and get their feedback
  3. When preparing the presentation in the following exercise, make sure to include at least three improvements from this list.

Prepare a tutorial

🎯 Goal: Preparing the presentation for the lessons (20 minutes)

Prepare a 3 min tutorial based on what you have learned so far. Address one of the three different audiences:

  1. A group of 10 year olds
  2. Your Manager
  3. A peer group at a similar level to you

The tutorial should explain the following:

  1. Why is it important to build accessible websites?
  2. What is an HTML tag?
  3. What is semantic HTML?
  4. What is the CSS box model?

Practice public speaking skills

🎯 Goal: Be ready to present the content in class (20 minutes)

Work with your pair on how you will present this to the class.

  • Define who will say what part of the presentation.
  • Think about possible questions that could be asked and reflect on the answers you should give.
  • Give each other feedback whilst practising.

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