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

Blog card challenge better solution

@joshuapoc

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

I liked the end result for the shadows and hover effects. I would like to keep working on flex then proceeding onto grid

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

My initial intention was to set the "attribution container" at the utmost bottom while keeping the "card container" in the middle. I found it the impossible since justify-self doesn't work on flex. if this scenario is possible with flex alone id like to know how to

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

I know "align-items" aligns depending on "flex-direction", however is there any alternative to "justify-self" for flex when aligning items either vertically or horizontally?

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi there!

Yep, justyfy-self works with the grid but not with flex. Childs of flex has align-self but that's won't help you as it's align element by the X axis (or Y if flex-directon is row).

So, I guess you can use positioning (fixed or absolute) to stick attributions to the ground, but this might be clumsy if the height of the content will larger than the height of the screen.

Or you can put your card into the main tag ang attributions into the footer tag, set height of the main to 90% (or something close) and then it'll take 90% of the screen as height of it's parent - body - is 100vh. The footer with the attributions will take another 10%.

By the way, speaking of the main tag - there should always be one on the page for the better semantic. Also it goes for h1 tag as well. Especially if you have plenty of other h =)

Oh, I like how you style attributions matching the overall theme! It's cool to add something your own to design =)

Well done, neat work! Good luck with coding =)

0

@joshuapoc

Posted

@Alex-Archer-I Pretty much obliged for your comment, it did guide me in the right direction. I did some digging bases on your comment and Ive uploaded what i think to be a better solution to this challenge on github(soon to be reuploaded here). In it i used both flex and grid. Again thanks a bunch

1
Alex 3,130

@Alex-Archer-I

Posted

@joshuapoc

Wow. Use flex and grid together sound a bit complex especially for such simple project, but still cool. There is always fun in experimenting! Very interesting to see what you came up with =)

Glad that I could inspire creation of a new approach =)

Marked as helpful

0

@joshuapoc

Posted

@Alex-Archer-I haha yeah so complex the implementation of both display properties and unnecessary at that, but yeah i wanted to understand them better. I reuploaded the solution should you want to see it. Again thanks for your help

1
Alex 3,130

@Alex-Archer-I

Posted

@joshuapoc

Yep. A bit complex, a bit redundant, but cool, nice to look and based on combination of different techniques. Just like a piece of art =)

That's interesting =)

Oh, another tip. Don't use id for styling. Later, in big projects, you'll see that it is more convenient to use classes for styling and id for references.

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