Frontend Challenge #7, Article Preview Component
Tags: webdev, beginners, challenge
Published: 2021-12-10 04:06:12


Follow me as I briefly describe my coding journey to build the Article Preview component from [Frontend Mentors](https://www.frontendmentor.io/home).  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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zet5x3ewv75e0g62dvc2.jpg)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7byfo4dbl1jlmubjvc2o.PNG)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8nsksr2sqc16rf4zwxp.PNG)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pwcn5v6aowigvxhjwh8z.PNG)

## 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](https://jcsmileyjr.github.io/Artical-Preview/) and view the code [here](https://github.com/jcsmileyjr/Artical-Preview).

_GIF showing active state_
![GIF showing the active state of the component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2q6msl0k28z2rxxakwb.gif)

_Final desktop preview_
![Screen shot of mobile and desktop final outcome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i8jiuatmacpbj3yxcd3h.png)

## Thank you for reading
Thank you for reading my learning journey and if you have tips, please DM me on [Twitter](https://twitter.com/JCSmiley4) or [LinkedIn](https://www.linkedin.com/in/jcsmileyjr/).