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: 
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.
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.
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.
- The profile image wouldn't stay in its container.
- The layout didn't resize elegantly for different non-mobile sizes.
- 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)
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
Final desktop preview
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)