[TECH ED] Prep: Identify components

[matthewlawpixel]

Link to the coursework

https://workshops.codeyourfuture.io/#components-1

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

[matthewlawpixel]

Here is a series of cards components from the BBC news website.

The link is https://www.bbc.co.uk/news

[matthewlawpixel]

Here are a series of cards components from youtube.

The link is https://www.youtube.com/

[matthewlawpixel]

Here are a series of cards components from youtube.

The link is https://www.moneysavingexpert.com/

[matthewlawpixel]

I have found the following components the amazon shopping website.

Header

Navigation

Hero

Breadcrumbs

The link is https://www.amazon.co.uk/ref=nav_logo