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

Article Preview Card using Astro and Tailwind CSS

SmartAce 170

@Smart-Ace-Designs

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?

I almost gave up - but stuck with it. This one was extremely challenging for me. The JavaScript was simple...but the CSS was a nightmare. The share button is still not correct - but I decided to submit the solution for now and perhaps fix it down the road.

I should have started with mobile design first - and I knew better to do so - but for some reason I started with desktop mode first. I think it would have been easier to deal with the positioning of the share pop-up menu if designing for mobile first.

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

Positioning the social media pop-up menu was difficult. I had to make several attempts with setting the relative and absolute attributes at the correct DIVs. Once I started on the mobile design, it was then obvious how to do it.

I am still stuck on the share button. I could not figure out how to make it change colors - I am not sure if there is CSS code to change the color of an SVG file. Also, I was able to line it up properly in desktop mode - but it mobile mode it is floating too high in the DIV.

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

The share button - changing colors on click and centering it in mobile mode.

Community feedback

@Alexandru-Enescu

Posted

Great job that you finished the challenge, it looks exactly the same with the design! I also prefer to start with the mobile design first. Don't worry too much about the share button, I also got stuck at changing colors and when I tried to position it. I would suggest to add shadow to the main content and "cursor: pointer" to the share button. Good luck!

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