Submitted 24 days ago

My-Article-Preview-Solution

Tami George•30

@Tamikaribi15

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am new to programming, so doing this challenge introduced me to new CSS selectors and functions that i never knew. It was quite a struggle, but it was also fun. I am confident that i will not be as stuck as i was in the challenge, should i repeat a similar design.

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

● I design the desktop view first, so it was kinda difficult to make it responsive for mobile phones. ● The share effect after clicking was difficult for position accurately.

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

None, i successfully completed it

Community feedback

Rahexx•440
@RahexxPosted 24 days ago
For me, it's a good job! The solution is slightly larger, and the share button has different colors than in the design, but I think you can be satisfied, especially after all your hard work. It’s great to hear you overcame your struggles. I have some advice for you.

You can replace this code:

padding: 20px; padding-bottom: 8px;

with

padding: 20px 20px 8px 20px;

Now, you have all the padding in one line. Of course, when you want padding on only one side, it's good to use properties like padding-top, but when you need padding on multiple sides, it's better to use this shorthand.

Regarding Flexbox:

Regarding to FlexBox,

flex-direction: row;

row is the default value, so you don’t have to specify it in the selectors.

Good work, and good luck with the next challenge!
Marked as helpful
1

Please log in to post a comment

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