Skip to content
Submitted over 1 year ago

Article preview component : Easter egg

Delgorithm•120
@Delgorithm
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello!

Here I am with another project. This one is much more "streamlined" and "clean" in terms of HTML and CSS semantics.

I wanted to work as much as possible on this part because I was using WAY too many <div> and ```<class="">```` in my opinion. It made everything really suffocating. Although I still have a long way to go, and I haven't been able to finish it properly. Yet, I am still satisfied with the result.

Once again, I will browse through the "solution" section to see what I could have done better and should have done to achieve it at 100%.

Good luck to everyone and have a nice day!

P.S.: The easter egg is poorly coded but still interesting.

Community feedback

  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqPosted over 1 year ago

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    BODY MEASUREMENTS 📐:

    • Use min-height: 100svh for body instead of height: 100svh. Setting the height: 100svh may result in the component being cut off on smaller screens.
    • For example; if we set height: 100svh then the body will have 100svh height no matter what. Even if the content spans more than 100svh of viewport.
    • But if we set min-height: 100svh then the body will start at 100svh, if the content pushes the body beyond 100svh it will continue growing. However if you have content that takes less than 100svh it will still take 100svh in space.

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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