DEV Community

Cover image for Frontend Challenge #7, Article Preview Component
JC Smiley
JC Smiley

Posted on • Updated on

Frontend Challenge #7, Article Preview Component

Follow me as I briefly describe my coding journey to build the Article Preview component from Frontend Mentors. I’m a firm believer in learning in public, sacrificing perfection while learning, and each day improving by 1%. I welcome feedback from several tech communities (aka, if you see where I can improve please leave a comment) and will update the final project as time allow. Frontend Mentors is a online platform that provide front-end challenges that include professional web designs.

The goal is to build this: mobile design given by Frontend mentor

Step 1: Setup responsive design layout

As always, the first todo item is structuring the initial layout to be mobile and desktop design responsive. My go to is everything below 600px width is mobile. After that is break-points for tablet, regular desktop, and super wide desktops.

Screen shot of responsive design with the image section done

Step 2: Build out the mobile design

The next agenda was adding the content to the layout and styling for a responsive mobile layout based on the given design.

Screen-shot of mobile design only

Step 3: Responsive design problems

This was followed by adding styling for a responsive desktop layout. I assumed this would be the easy part but three days of responsive design tweaking showed me styling is HARD. I don't think I learned anything other then I must have done something wrong in step two.

  1. The profile image wouldn't stay in its container.
  2. The layout didn't resize elegantly for different non-mobile sizes.
  3. The bottom section needed to be totally redesign to separate the textual content from the area that changes from an active state when clicked.

What I should have done in step one was made two primary sections with the bottom section containing two separate areas.(include image)

Screen shot of a broken desktop layout

Step 4: Final Outcome

I think stepping away and coming back fresh really helped. I was able to quickly redesign the content section, add the active state, and have decent design responsiveness. You can play with the project here and view the code here.

GIF showing active state
GIF showing the active state of the component

Final desktop preview
Screen shot of mobile and desktop final outcome

Thank you for reading

Thank you for reading my learning journey and if you have tips, please DM me on Twitter or LinkedIn.

Top comments (0)