All solutions

Made with a lot of ♥️ by Spirit. I've tried to achieve as close as possible to the design & achieve Pixel Perfect in this Design for the First time. It takes some time to get that close to the design but it's worth it.

Hi there 👋, I’m Spirit, and this is my solution for this challenge.

✨ Features:

• Achieved 92% in Lighthouse score for performance 🚀, 100% for best practices ✅ and 91% for SEO 🌐 for both Mobile & Desktop.

🛠️ Built With:

• Mobile First CSS. 🎨
• BEM
• Grid Layout using Nested Grid 🪟

❓ Question:

• How to achieve pixel perfect design which matches approx. 100% with the Challenge Design ?
• Any Best Practices which I missed out ? Suggest me some best resources to Learn more about Grid Layout & its complexities

Feedback is appreciated.

Thank You : )

Hi there 👋, I’m Spirit, and this is my solution for this challenge.

✨ Features:

• Achieved 100% in Lighthouse score for performance 🚀, accessibility, best practices ✅ for both Mobile & Desktop.
• Unique Tablet Design

🛠️ Built With :

• Mobile First CSS. 🎨
• BEM
• Grid Layout using Nested Grid 🪟

❓ Question:

• How to achieve pixel perfect design which matches approx. 100% with the Challenge Design ?
• Any Best Practices which I missed out ?
• Suggest me some best resources to Learn more about Grid Layout & its complexities

Feedback is appreciated.

Thank You : )

Hi there 👋, I’m Spirit, and this is my solution for this challenge.

✨ Features:

• Achieved 100% in Lighthouse score for performance 🚀, accessibility, best practices.

🛠️ Built With :

• Mobile First CSS. 🎨
• BEM Convention

Question:

• How to achieve pixel perfect design which matches approx. 100% with the Challenge Design ?
• Any Best Practices which I should have followed in this challenge ?

Any feedback is appreciated. Thank You : )

Hi there 👋, I’m Spirit, and this is my solution for this challenge.

✨ Features:

• Achieved **100% in Lighthouse score for performance 🚀, accessibility, best practices.

🛠️ Built With:

• Mobile First CSS. 🎨

Any feedback is appreciated.

Thank You : )

Hi there 👋, I’m Spirit and this is my solution for this challenge. 🚀 Difficulties :

• Adding Multiple SVGs to the background was quite difficult for me.

My approach :

• I tried to add SVGs in the html and then give it a position and z-index to add both the top & bottom SVGs but it didn't worked properly because when i stretched the page to check its responsiveness it failed the SVGs dislocated from their prior position.

• Then I seeked help from my community & got to know about specifying Multiple Backgrounds in CSS Ruleset and used background-image property in the body tag and separated both SVGs with commas and specify the properties related to backgrounds using the same. Then it got fixed.

I am still unsure of the thing that is this the only best approach to add multiple backgrounds or SVGs in the background ?

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you. 😊✌️

Feedbacks appreciated : ) Questions :

• How can i improve my page's performance for mobile Devies ?

While making this I was thinking of : What would be the better approach to create the effect on image in the card component ?

• By adding a div for overlay on image to add the filter effect. or
• The mix-blend-mode to the image wrapper which I've used in this project.

I've used flex-wrap: wrap-reverse for swapping the image & the text content in the card. I thought of using flex-direction: row-reverse also. Is this OK to do ? Or I should use anything else ?

Suggest me some good practices.

Nothing seemed that difficult in this Project. Though I've some Questions :

• How was the HTML?
• Was it semantic enough?
• How about the class names were they also semantic?
• Should all text type elements p, h1 etc. have class names?
• Is it a good practice to specify something like h3 compared to .container h3 if you know that only one h3 will be on the page? Suggest me some better practices which I should use in upcoming projects to make them more efficient. Any Feedback is appreciated : )

Difficulties while making the Component :

• I found a little bit difficult to make the overlay on image and placing the view-icon on the center while we hover.
• It also took me time to align the price text & time remaining text with the etherium & clock icon as I used ::before pseudo class to add the icons before the text. I've to give the pseudo classes display:flex; & align-items:center to align the pseudo elements with the text in the center. I've used total three approaches for doing the overlay & 2 approaches for aligning the pseudo elements.

Question :

Can I do it better using something more better elements & properties ? If so please suggest me feedback. ?

Your feedbacks are very appreciated : )

The Layout of this project was pretty much same as the the project which I had made earlier using the Flexbox. Though Some things were different & time taking like matching the background-color of the summary components to the design in the challenge, creating the circle element in the results sections and matching the size with the design.

Questions : Which approach is the best to follow ?

1. Desktop-first
2. Mobile-first

This Challenge was pretty easy to do. Still making it responsive took me a while as I didn't use any media queries for different screens & yet it's responsive on even the smallest screen size i.e. 240*320 (for keypad phones).

Questions :

• Is there a way to vertically center a <div> perfectly for every screen size without using the display:flex & align-items: center; & destroying the responsiveness of the page ?

• What things should be taken care of while making responsive WebPages ?

It's my first ever Challenge Project that I completed with Responsive Design. Responsiveness was the thing that took me a while as I've applied Media Queries in my project for the first time on my own. I watched tutorials and used Media Queries earlier but wasn't comfortable until I made my hands dirty with Media Queries on my own.