Help me out!

[defaultuzgk5k6pa6do]

I have a task at school to do and the teacher hasn't given me any clues how to do this thing (check picture) can someone help me to figure out how to do this??

[BenPleysier]

Have a look at A Complete Guide to Grid | CSS-Tricks or use your favourite search engine to find out more.

[B i r n o u · Accepted solution]

well different approach are possible to handle such a case... the missing part of the main question, is... "does this display have to be responsive, and how should it react?"

anyway here are some ideas for consideration, that should help you...

first of all understanding the model box... https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

then to be displayed elements can be handled in different methods or approach, two of them are very easy and allow us to display content as we like

Grid

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://css-tricks.com/snippets/css/complete-guide-grid/

Flex

https://developer.mozilla.org/fr/docs/Web/CSS/flex

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

then depending on your approach, you could have to center some element, so understanding centering can be a plus https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Center_an_element

also, depending on the approach you define, you may need to use an image background for some elements https://developer.mozilla.org/en-US/docs/Web/CSS/background

and finally, if you decide to open your layout to be responsive, understanding media queries is a need https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

I hope that all this link will be helpfull, just let us know

[defaultuzgk5k6pa6do]

Thank you very much! I figured it out! Ive saved the pages for future purposes! Thank you very much!!

[Nancy OShea]

I like your teacher's approach to learning.  Sink or swim.