Hey, I was a little bit confused about what challenge should I pick. I chose that one and it looks very similar to the last challenge I picked - NFT preview card component -, just the background was challenging for me, so my question is, what approach should I follow that will help me at picking the next challenges? or should I just do all of it?
Hey @momenkamal221, congrats on completing the challenge!
I had a look at your final solution and I have a few suggestions for you that I hope will be useful:
You don't need to set a height property on your .card - your layout should be created in such a way to naturally adjust to the available content. When you set fixed values for your height, or even width, it becomes more difficult to create a robust responsive design.
You can vertically and horizontally center your design by using flex display on your body element. Also, add min-height: 100vh to your body element
https://alligator.io/css/viewport-units/
Your .card is also missing a box-shadow -> refer to the original design
Change styling for the .unit elements. Currently, they're a bit different from the original design
You don't need an hr element. You can simply set a border-top property on your .flip-scores element and then also add padding-top as to push the line further above
Hope this helps. Keep up the good work!
i need some help with using box shadow for this code And also some helping in reducing the thickness of an horizontal line
Hey @wisdompython , good job on completing this challenge!
I had a look at your final solution and I have a few suggestions that I hope will be useful to you:
Don't use a fixed height on your card element, especially not with an absolute unit such as px. Your layout should be built around the available content.
Set min-height: 100vh on your body element if you want to center vertically and horizontally everything inside it.
Wrap your card inside a <main></main> element to remove some of the errors from your report
Add the alt attribute to your img element - if the img is just for decorative purposes, then you can simply write alt=""
The 2 text hover effects and the image overlay hover effect are missing from your solution. Consider implementing them using the :hover pseudo-class https://www.w3schools.com/cssref/sel_hover.asp
You don't need an hr to create that line. You can set a border-top property on your footer and then also add a padding-top to push the line away from the content
Hope my suggestions will be useful to you. Keep up the good work!
Hi, after the completion of my first frontend mentor challenge, I was very excited to finish the second challenge as well, so here is my solution to NFT preview card component. Any feedback will be really appreciated.
Hey @TejaswiniLabade, good job on completing this challenge!
I'm impressed with how similar to the original design your final solution looks - well done!
As @denielden already suggested, you can consider adding the transition property for your hover effects, mainly the image hover effect as it can give it that extra nice detail ;)
Had a look at your Github repo and you should definitely consider looking into BEM methodology. Also, some parts of your code require a bit of formatting so they can be more readable.
Overall, well done. Keep up the good work!
Still have some issues with this design. Most irritating is <a> attribute sticking out of a parent div any ideas how can i fix it quickly ?
Hey @jdevelops, congrats on completing this challenge!
I had a look at your final solution and I have a few suggestions that I hope will be useful to you:
You can vertically and horizontally center your .main-box by using flex display on your body element
There's an issue with the responsive design when scaling down to smaller screen sizes. I suggest not using fixed px values for your width as it can make it more difficult when building a responsive design. Have a look through your media queries code and see what improvements you can make
Adding a little transition on the image hover effect would be a nice bonus ;)
Overall, you did quite a nice job. Keep up the good work!
Any suggestions about improving specific part of webpage, mistakes and other suggestions about improvements are really welcome ! It would be really helpful, if you suggest the mistakes I made and the improvements need to be done at specific point or any other small thing need to be fix in this challenge. Thank you!
Hey @abhishekdwaghmare2000, good job on completing the Stats Preview Card challenge!
I had a look at your final solutions and here are a few suggestions I have for you:
Consider implementing the responsive media query breakpoint sooner (i.e at a larger size)
The top right and bottom right edges of the image should be rounded (same value for the card's left side)
Increase line-height and font-size of the p element inside .content-left
Use the values 100, 400, and 700 for your font-weight property
Use actual values (or variables) for your font-size property. Don't use small, medium` or other such keywords
Setting a background-color property on your img element and using it with mix-blend-mode won't work because mix-blend-mode is actually blending the img element with the card's background color. A possible solution is to remove the img element and just add a background image on the .content-right div and then you can use background-blend-mode to create the desired effect
Hope these suggestions will prove useful. Keep up the good work!
Hi! Everyone, I made this project using Vanilla JS with SCSS. I learnt a lot from this challenge and it was really a good experience for me, I learnt some cool things about how to make custom input component. I added the prefixes in the CSS in order to make design consistent through all browsers. I also made it responsive, but let this decide by you (current viewer LOL ). So please go through the design, code and leave your precious feedback below, So that I can improve myself more. I would love to hear feedback regarding the design, code and structure. Any feedback to make it more accessible to screen-reader will more highly appreciated.
Hey @skyv26 , always nice seeing more of your projects here on Frontend Mentor!
I appreciate how you always try to make your solution as pixel-perfect as possible! ;)
Here are my suggestions / observations based on your design:
There shouldn't be a 0 value on the slider as far as I know. The first value on the slider should be 10k page views at 8$ (I might be wrong about this, please do double check to make sure)
On laptop resolution, the background image doesn't fully stretch horizontally from one end to another of the body's width
Try to reduce the card's box shadow a bit - reduce the shadow opacity and maybe also tweak the blur amount too
The folder structure was a bit confusing because you have a sass folder and a css folder but the main sass file is actually inside the CSS folder
I have to ask you something: Did you actually write over 1000 lines of raw SCSS code?? That's incredible!
As developers, we all should strive to write clean, efficient, maintainable, and reusable code with the least amount of lines of code that's realistically possible. An educated guess from me would be that the design for this project can be completed in less than 500 lines of SCSS code.
I like the way you write and structure your code. You're quite a competent developer, no doubt. But you shouldn't do two things at once while working on such projects: coding and writing novels because that's how long your lines of code can get to the point that it feels like reading a page from a novel :))
I'm looking forward to seeing more of your solutions here on Frontend Mentor. Keep up the amazing work!
Feedback
Hey @Programing-School, thanks for sharing your solution with us!
I had a look at your final solution and I have a few suggestions to offer that I hope will be useful to you:
Change the background color to the one in the original design
Add the two circle background images that can be seen in the original design
Don't use margin to position your card. There are multiple good ways to do that - flexbox, CSS grid, absolute positioning, etc
Change the card's box-shadow color and reduce its size - make it more subtle
Make the edges of the card rounded using border-radius property
Center the "London" and "Victor Crest 26" texts
Change the card's background-color
Remove the padding around the bg pattern image inside the card
Hope this helps. Keep up the great work!
I use the combination of flexbox and grid to build layout for this challenge. I learned to use transform property to make card move left or right, up or down. Simple challenge but learned a lot :). I like the color pallette of this design. Any feedbacks to my code are appreciated! Thank you all!
Hey @chrisvn188, congrats on completing this challenge!
Your solution came out looking really good and the responsive design works as expected!
Just a few suggestions based on your final solution:
The background images that you can see in the original design are missing from your final solution. There are multiple ways to tackle this task. You can use background-image property on the body element or add two divs and use absolute positioning on them or use the ::after and ::before pseudo-classes
On mobile resolution, add just a bit more horizontal padding on your body
Overall, great job!
I had some problems with the dev tools and the responsive option, so I don't know if the responsive is right :c
Hey @jhonGriGi, thanks for sharing your solution with us!
I had a look at your final solution and here are my suggestions:
Reduce the card's dimension just a tiny bit
Add a box-shadow as the one shown in the original design
Consider using background-image property for the two images or you can also use ::after and ::before pseudo-classes
Use Flexbox display to vertically and horizontally center your design display: flex; align-items: center justify-content: center min-height: 100vh should all be applied to the body element
There's a huge amount of space on smaller screen sizes that creates horizontal and vertical scrolling. That's due to how the current layout is setup. You have to make some changes to how you position and align items in your page to make sure your design is also responsive
Hope these suggestions will be useful. Keep up the good work!
In this project I tried to improve my code, making it more readable and more order. Also, I used the feedback of my previous project to give a better accesibility to my project.
Any feedback is welcome, I'm still learning, and I like to receive advices.
Hey @Rebeitte, congrats on completing the challenge!
Overall, your solution looks really good and the responsive design works as expected.
Just a few suggestions based on your final solution that I hope will be useful to you:
Add a background-color for the .plans element - refer to the original design for the color
On larger screen sizes, make the "Proceed to Payment" button a bit wider
Increase the y offset of the box-shadow of the card and increase the blur as well. Perhaps the color is different as well from the looks of it
Any feedback appreciated :)
Congrats on completing the challenge, @jakubinhoo
Your solution looks really well done! And the responsive design works as expected. Good job!
Looking at the comparison screenshot, it looks like the background color is a bit different, but that's not an issue ;)
I also had a look at your Github code repo. Here are a few suggestions I have for you:
width: auto; height: auto; margin: 0 auto;The height is auto by default and you already set the width to 800px. Also, you don't need the margin property in that case because you've already centered the container using flex display
You can rewrite this line grid-template-columns: 1fr 1fr 1fr; using repeat function like this grid-template-columns: repeat(3, 1fr); and if you want to have a single column layout for mobile screen you can do this grid-template-columns: repeat(3, 1fr);
Consider adding min-height: 100vh on body element so you know the container will be vertically centered no matter the resolution
Feedback
Hey @Programing-School
Congrats on completing the challenge.
Here are my suggestions based on your final solution:
Structure your HTML elements better. For example, wrap the avatar img and the text next to it inside another <div></div> element
Avoid using inline CSS styling
Use more meaningful class names
It's bad practice to use margin values like that to position your card component. Better to use something such as flexbox display
Box shadow for your card is too much - reduce it and also soften it a bit more
The ETH icon is missing
Image hover effect is missing. Check this out for reference https://www.w3schools.com/howto/howto_css_image_overlay.asp
Reduce space around image
Reduce rounded corners of the image
Add more space around the card's content
Missing the appropriate font(s) from the challenge
Make hr line color more subtle / change color
Try to avoid using fixed values for width / height properties (especially if they're px based)
Hope my tips will be useful to you. Keep up the good work!
