Help me out!

New Here ,
Oct 27, 2021 Oct 27, 2021

Copy link to clipboard

Copied

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

Views

99

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Oct 28, 2021 Oct 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

...

Likes

Translate

Translate
Adobe Community Professional ,
Oct 28, 2021 Oct 28, 2021

Copy link to clipboard

Copied

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

Wappler, the only real Dreamweaver alternative.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 28, 2021 Oct 28, 2021

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 28, 2021 Oct 28, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Oct 28, 2021 Oct 28, 2021

Copy link to clipboard

Copied

LATEST

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

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines