This is a solution to the NFT preview card component challenge on Frontend Mentor.
- Overview
- The task
- Approach
- Outcome
- My process
- Built with
- Feedback
- Lessons
- Take forward
- Useful resources
For this task, I had to design a static page with active states.
I needed to do this for both Mobile & Desktop and activate the hover states.
I used a Mobile-First approach and a CSS Flex layout.
I'm very pleased with the outcome as it's faithful to the design and I built it very quickly and confidently.
🧩 Live Site URL
✏️ Solution URL
⚙️ Semantic HTML5 markup
⚙️ CSS Flex
⚙️ Mobile-first workflow
👽 First, I planned out my layout and noted down my HTML elements. I enjoy this part and the information hierarchy seems to come quite naturally to me.
👽 Then, I styled the page, piece by piece. I did this rapidly, with confidence and a nice flow, which I was really happy with. I enjoyed writing this CSS. I'd like to approach learning Sass next to one-up this skill.
👽 Next, I had to implement the active states. This is where I got stumped but I was happy to have a challenge to face-off with so that I could learn something new in this project.
👽 I had to create ::before and ::after pseudo-elements to make this overlay on hover for the image view. This was my first time really using these and they were a somewhat unclear concept to me prior.
I was facing a bug where I couldn't get my elements to stack properly to make the overlay function work. I changed my HTML around many times, added <divs>, took them away, changed classes... to no end. I researched z-index, reading articles, using Microsoft Edge's 3D view in Dev Tools to find the problem. The key was a lot simpler, in fact. With the help of a Discord contribution on this challenge (see Useful-resources), I understood that I had overlooked some minor changes in my HTML that were fundamental to this function, one of which was to use a <button> element instead of an <a> tag. Once I had implemented this, I was able to debug and complete the project soon after. This part of the challenge seemed to be something that most new devs struggled with at first, but it was rewarding to overcome it.
- Mobile: 1 hr
- Desktop: 8 hrs
::beforeand::afterpseudo-elements. I didn't understand what the 'before' and 'after' really meant before, but now I know that these are states where we can alter or introduce content around an element to appear when an action is taken by the user. I also learnt that in the stacking context, these literally appear (linearly) before and after in the vertical information flow, so in this case, above and below the containing content. I didn't expect or know this before.positionproperties! I had never really utilised these before and I learnt a lot aboutposition: relative;andposition: absolute;in this context. I also implementedtop,bottom,left,rightproperties.<button>element - A first for me. I made the mistake of using<a>in my HTML initially, where my hover overlay wouldn't work. This was a big moment of clarification.- Combining targeting both
pseudo-elementsandpseudo-classesat the same time in CSS! (Classes come first). - You can import an image via CSS with the
url()function. They don't always need to be in your HTML, as with theicon.svgin this challenge. - Solidfying
orderproperty use in CSS. - It was my first time using the
transitionproperty - really fun. - I started to understand stacking contexts and how
z-indexis a comparative relative to other elements within a given stacking context.
❕ I styled this really fast.
❕ Now I know how to create an icon overlay.
❕ Pseudo-elements ::before and ::after.
❕ I feel much more confident in basic, static Flex layouts now.
❕ My first really difficult debug 😄
How to Overlay Icons on Top of Images with CSS
The CSS z-index Property: What You Need to Know
What The Heck, z-index??
Microsoft Edge Dev Tools 3D View Function
⭐
