Skip to main content
Participant
October 28, 2021
Answered

Help me out!

  • October 28, 2021
  • 3 replies
  • 618 views

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??

    This topic has been closed for replies.
    Correct answer B i r n o u

    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

     

    3 replies

    Nancy OShea
    Community Expert
    Community Expert
    October 28, 2021

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

     

    Nancy O'Shea— Product User & Community Expert
    B i r n o u
    B i r n o uCorrect answer
    Legend
    October 28, 2021

    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

     

    Participant
    October 28, 2021

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

    BenPleysier
    Community Expert
    Community Expert
    October 28, 2021

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

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!