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

Couldn't quite do it :(

P
innitman 130

@innitman

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

The non-JS basic CSS is getting easier.

What challenges did you encounter, and how did you overcome them?

However, when making the button clickable, I found it hard to organise the CSS appropriately. In particular:

  1. Defining a class to toggle on for the desktop version that I imagine would be a positioned element centred on the button and displaced up by some pixels

  2. Defining a class to toggle on for the mobile version to make the social shares on the bottom of the footer. I struggled to find an efficient way, and in particular whether the button should be positioned above everything and the new footer class toggle on / off, or another approach.

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

Any best practices for the CSS for making the green share div float above the button in desktop mode, but without introducing a complex series of positioned elements that would break the mobile view!

Community feedback

Arsh 120

@arsh-de

Posted

The design looks very good and is natural, however; I was unable to view the website page can you make sure the live website URL is correct.

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