search

MarcusZagorski / Module-HTML-CSS

The central repo for the HTML CSS module
https://cyf-module-html-css.netlify.app/wireframe/
Creative Commons Attribution 4.0 International
0 stars 0 forks source link

[TECH ED] Prep: Identify components #36

Open MarcusZagorski opened 1 year ago

MarcusZagorski commented 1 year ago

From Module-HTML-CSS created by SallyMcGrath: CodeYourFuture/Module-HTML-CSS#52

Link to the coursework

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:

MarcusZagorski commented 1 year ago
Screenshot 2023-09-09 at 22 40 34
MarcusZagorski commented 1 year ago
Screenshot 2023-09-09 at 22 36 44
MarcusZagorski commented 1 year ago
Screenshot 2023-09-09 at 22 35 59
MarcusZagorski commented 1 year ago

Color Picker

https://coolors.co/

Screenshot 2023-09-09 at 22 59 24
MarcusZagorski commented 1 year ago

Trust Pilot

https://uk.trustpilot.com/review/atombank.co.uk?stars=5

Screenshot 2023-09-09 at 23 03 10
MarcusZagorski commented 1 year ago

I found this issue to be quite interesting. The websites that were included were and will be very helpful in the future, as it showed the different ways and types of components that can be built, this therefore allows you to get a clear understanding of the layout regarding a specific component. The different ways that cards were built across some of the websites really shows the flexibility of tools available in HTML & CSS.

Breaking down components into smaller bite size chunks really allows you to get the most out of your code, because this allows it to be simple, effective and readable, which is something I also found interesting and agree with.