Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Advice Generator App

Ryusaem 120

@Ryusaem

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I wasn't sure to be able to tackle API that fast, and efficient, and I'm happy that I did it. I'm also proud of myself to be able to place an image/svg where I wanted it to be.

What specific areas of your project would you like help with?

If someone could give me advice on how to use property the "position", it would be great. Is there any other way to achieve what "postion: relative" can do for example?

Community feedback

Nature Son 1,100

@NatureSon22

Posted

The 'position' property determines how an element should be placed within its containing element. There are several values for this property, including 'relative', 'absolute', 'fixed', and 'sticky'. By utilizing the 'position' property, you can control the positioning of an element using the 'top', 'left', 'right', and 'bottom' properties.

Let's focus on the 'relative' value for now. When you apply 'position: relative' to an element, it allows you to adjust its position relative to its default position in the document flow. This means that you can move the element while maintaining its position within the layout, preventing any disruption to the surrounding elements.

For example, if you have a paragraph within a container div, applying 'position: relative' to the paragraph allows you to shift its position slightly without affecting the layout of other elements. This adjustment is made relative to where the paragraph would normally appear in the document flow.

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord