Submitted almost 3 years ago

Responsive HTML and CSS NFT Preview Card Component.

Oluwatosin Abigail Daramola•630

@Heph-zibah

Preview site View code

This is a solution for...NFT preview card component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Am I the only who feels CSS GRID has to be learned continually to understood? I had a tough time building this cause of my limited knowledge in CSS GRID. Any sites or ideas that can help?

Community feedback

Mack•210
@MNRSkillsPosted almost 3 years ago
I use this site for grid https://css-tricks.com/snippets/css/complete-guide-grid/ . Pretty good though.
Marked as helpful
1
Oluwatosin Abigail Daramola•630
@Heph-zibahPosted almost 3 years ago
@MNRSkills Currently checking the site out.

Thank you for your helpful suggestion.
0
Travolgi 🍕•31,400
@denieldenPosted almost 3 years ago
Hi Oluwatosin, good job!

Try using Flexbox, it can help you better center elements on the page: give the flexbox and height properties to the body and remove all margin from the .container class.

Note: Flexbox aligns to the size of the parent container.

You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.

I hope that helps!
Marked as helpful
0
Oluwatosin Abigail Daramola•630
@Heph-zibahPosted almost 3 years ago
@denielden Ohhhh... I guess I was so excited about CSS GRID that i forgot about what flexbox could do altogether!

Thank you for this guide. I will make sure i implement it.
1
Vanza Setia•27,775
@vanzasetiaPosted almost 3 years ago
👋 Hello there, Oluwatosin!

🎉 Congratulations on finishing this challenge!

About CSS Grid, yeah it's not easy to understand about the grid. The way I learned about CSS Grid was by following a tutorial (video) and then trying to play around with the CSS Grid by myself.

I would recommend reading the article about CSS Grid (like the MNRSkills has shared with you). After you get some knowledge about CSS Grid, you can start doing single price grid component challenge.

Now, for the feedback on this solution:

Accessibility

All the page content should live inside landmark elements (header, nav, main, and footer). By using them correctly, you can make users of assistive technology navigate the website easily. In this case, there's no need to use header and footer landmarks, simply wrap all the elements inside the main tag.

<body> <main> page content goes here... </main> </body>

Also, don't overuse landmarks 🙂. Every page should only have one main landmark.

<main class="content"> <h5 class="heading">Equilibrium #3429 </h5> <p>Our Equilibrium collection promotes balance and calm.</p> </main> <main class="li-grid"> ...some code </main>

Don't use h5 to make the text bold and smaller. Heading tags are used by users of assistive technology to navigate the website. So, you can make the h5 as h1 instead.

In this case, any elements that have :hover or :active states should be interactive elements, like in this case they should be link elements.

Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.

Styling

To make the card perfectly in the middle of the page, you can simply make the body element as a flexbox container.

/** * 1. Make the card vertically center and * allow the body element to grow if needed */ body { display: flex; align-items: center; justify-content: center; min-height: 100vh; /* 1 */ }

Best Practice (Recommended)

Write all your styling on the external stylesheet. Don't mix HTML and CSS 🙂.

<ul> <li><svg style="margin-right: 10px; ..../></svg>0.041 ETH</li> <li><svg style="margin-right: 10px;" .../></svg>3 days left</li> </ul>

Write your code with a consistent style. Currently, the indentation on the HTML is not consistent.

If you want to make the equilibrium image accessible, you can see my solution and read the README to get some general idea about it.

That's it! Hopefully, this is helpful!
Marked as helpful
0
Oluwatosin Abigail Daramola•630
@Heph-zibahPosted almost 3 years ago
@vanzasetia Wow! This is so detailed. I will surely implement the corrections and get back to you.

Also, I checked out your README file and I must say you documented your approach so well. I have starred it so I can always go back to it. Thank you.

I will like to have links to any websites or videos that talks about web accessibility. I see I am lacking in that aspect. And if there are other ways with which you can help, my twitter handle is @undaunted_pen. Please do chat me up or you can just drop yours.

Thanl you once again.
0
Vanza Setia•27,775
@vanzasetiaPosted almost 3 years ago
@Heph-zibah You can check the blog post by Scott O'Hara, he is an accessibility expert and his blog posts are talking about web accessibility. His recent blog post is talking about div (it tells you how to use it correctly).

I sometimes tweet about web accessibility, but it's more for beginners. Here's my Twitter (@vanzasetia)
Marked as helpful
1
Oluwatosin Abigail Daramola•630
@Heph-zibahPosted almost 3 years ago
@vanzasetia You have really been helpful. Thank you.
1
Oluwatosin Abigail Daramola•630
@Heph-zibahPosted almost 3 years ago
Thank you so much.

I'll check it out.
1
Vanza Setia•27,775
@vanzasetiaPosted almost 3 years ago
@Heph-zibah Just a quick suggestion, If you find the link from MNRSkills helpful, please mark the feedback as helpful.
Marked as helpful
0

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