๐Ÿง‘๐Ÿฟโ€ prep

Prepare for the Asking Questions Workshop ๐Ÿ”—

https://github.com/CodeYourFuture/CYF-Workshops/tree/main/asking-questions

Why are we doing this?

Before you come to class, you need to make sure you are ready to participate in the workshop.

For this workshop you will need:

Make sure you come to class having looked over what you will be doing.

Maximum time in hours

0.15

How to get help

Share your blockers in your class channel. Practice asking good questions, with links and context.

How to submit

no submission step

  • :brain: Prep work
  • ๐Ÿ• Priority Mandatory
  • ๐Ÿฆ” Size Tiny
  • ๐Ÿ“… HTML-CSS
  • ๐Ÿ“… Week 2

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 Is CSS

Learning Objectives

10 Things About CSS

What is CSS?

Cascading Style Sheets are a language of style - a visualisation of the DOM - using selectors, properties, and values in rulesets.

A ruleset is made up of a selector and a declaration. A declaration is made up of at least one property and value pair. This is the syntax of CSS.

What is a selector, property, and value?
selector {
  property: value;
}

Selectors look like this: p { background: red }. The selector is the p in this case. This p selects all elements of the DOM tree called p and sets a rule about how to show them. Selectors always come first in a ruleset.

A property is a quality, a characteristic. A value is the amount.

For a person, you might say their ‘age’ property has the value of 40. For an element, you might set the width property to the value of 100%.

How do you know what properties and values there are?

You learn them by using them. You look it up here: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference. And the other thing you can do is look at the autocomplete in Devtools.

Why is CSS a 'cascading' style sheet? What does cascade mean?

via GIPHY

A cascade is a stream or sequence of a things where each thing affects the next. You might imagine pouring champagne into a tower of glasses. The champagne flows into the top container; it then cascades into the next container; etc. In CSS weโ€™re actually pouring from many bottles into one tower.

So in CSS ’the cascade’ means the order or sequence of the rules as they flow into the DOM tree according to CSS precedence.

What does precedence mean?

It means hierarchy. One hierarchy in CSS is inheritance: children inherit from parents. If a parent node has red text, all its children will inherit that red text color. But when another rule comes after, and overrules, it takes precedence. Everything in CSS is determined by order.

Order is so important in CSS because CSS is a declarative programming language that programs the layout of boxes.

CSS renders the nodes in our DOM tree as nested boxes, and we program their appearance using fonts, colours, and spacing.

What does declarative mean?

It means, broadly speaking, that the entire code is processed and then applied, from top to bottom in one go. You donโ€™t write for loops or if/else statements; there are no functions as such; you just declare the outcome.

In CSS you do the ‘what’, and the browser does the ‘how’.

What is specificity?

Specificity is a weighting system for CSS rules. The more specific your selector, the more power it has. For example: IDs can only ever mean one node. IDs are unique, so they are more specific than classes, which could mean many nodes.

Classes added to html element are more specific than just a plain element selector, as a class of p is more specific than just all p. If you get two elements with the same specificity then the one that comes last in the order wins.

The browser sorts all your rulesets, or declarations, into a defined order according to the power, or weight, of the declaration and applies the result, like a game of cards where higher value cards beat lower value cards.

Stronger rules override weaker rules. Everything is sorted and sorted until eventually a final value wins out and the view is rendered. The browser sorts like this:

  1. Match the media
  2. Sort by origin
  3. Sort by specificity
  4. Sort by document order
What do we mean by order?

Order means ‘what comes first?’.

Another way to think of โ€˜earlier and laterโ€™ is โ€˜farther and nearerโ€™. The closer the declaration is to the node in the DOM, the โ€˜laterโ€™ it is in the CSS. So an inline style overrides a style set in a style block, which overrides a stylesheet linked in the head, which overrides any stylesheet linked higher up in the head, which all ultimately overrides the user agent style that comes in the browser.

What does specify mean?

Identify clearly. Name explicitly.

What does render mean in context of a browser?

Render means to hand over, actually - to give back. In the browser, it means to show the result of all these computations we have talked about. It turns the code into pixels and paints them on your screen. So itโ€™s the end result - the final face.

Prep for active listening ๐Ÿ”—

Learning Objectives

Preparation

  1. Watch this short video to get a glance on what Active Listening is.

  2. Read this piece on Active Reading to get a more in depth understanding on why listening is such an important skill and how you can improve it.

Introduction

Listening is one of the most important skills you can have. How well you listen has a major impact on your job effectiveness and on the quality of your relationships with other people.

Write down open-ended questions.

๐ŸŽฏ Goal: Prepare for the Saturday’s lesson. (40 minutes)

Considering what you have learned regarding Active Listening, write down some open-ended questions related to building relationship, building empathy and resolving conflicts which you will use in the lesson.

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