@devilalpanchal
I am a student in web development, I want to improve my skills so the perfect way is to have reviews and face challenges that are as difficult as professional ones. So this website is an ideal place.
I’m currently learning...Among other things, I am learning: - HTML/CSS/JS - PHP/SQL/Mysql - Python - Shell - React.js / Node.js
Latest solutions
Latest comments
- @ExploryKod
I like it. I think the "learning" badge is better than on the solution as you add some borders and shadow.
To center a card you can use flexbox on a wrapper tag as main here
<body><main><div class="your-card"></main></body>You can add display: flex and align-items / justify-content both on center on the main, main need to have width: 100%.
Hope I could helped
Happy coding.
- @correlucas@ExploryKod
Great job, I love it: it improve the interaction with the user, the initial design was a little too static whereas these cards are there to call us into action, make us paying attention to them. Glassmorphism is a very good technique, I will remember it. Thanks for sharing this inspiration.
To improve it even better, why do the pointer stay identical ? May be I am wrong but if these cards contains links to another part of the website, it would be good to create a cursor pointer on the right element. However, I might be wrong and these cards may not be links. 👏🏾👏🏾
Marked as helpful - @Dion-R@ExploryKod
Hi Dion,
I like what you have done with this project : responsive is working and you solve the footer problem we see in the screen shot.
To improve even more I suggest :
- Footer, container div: Make a flex-direction of column once you reach mobile breakpoints because the footer items keep their flex-row position and they don't have enough place.
- Paragraph color can be change to the grey the design show (but you may have a different opinion as black may be better for contrast/accessibility (?)).
For the <a> I don't know if it is a good practice or not to change the height/width but I think the problem would be : from my point of view changing a default display from inline to block need to be the last resort, so in this case I would use padding and have the same dimension than in design through it, I made it numerous time and you can check it in dev tools.
For the background I don't see where is the problem but I have this useful trick to color a background in two color or more, you can use linear-gradient creating clear stops with % as it is explained by MDN (see the link below) - so it is no longer a gradient but can create "sharp" bi-color backgound: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient#gradient_with_multi-position_color_stops
- @GeorgeBryzh@ExploryKod
I love your project and thank you for the good advice you wrote about responsive svg circle. Happy coding !
Marked as helpful - @cwu90@ExploryKod
Hi Cwu, I love what you have done with the image on tablet size where through background-position:center the image is cropped and it is better I think on tablet. I have myself difficulties with positioning the image for every breakpoints: the image will "float" in its container and as a result cannot be properly aligned with the left part: there are too independant from each other, the same problem happen here and in my own design I am trying to fix. I'll tel you if I find the solution and I think I will try to use grid instead of flexbox to solve it.
Have a happy coding !
Marked as helpful - @cholis04@ExploryKod
Well done. I loved using your website. I liked the well done dark mode. From a UI point of view, I liked the UI except may be the button to reset: it a personal point of view but I though it would have been better to align its size to the other button because both are from the same group and also give it a "sharper" red as color. Otherwise I find your code very interesting for beginner like me as I can learn a lot from it. I find Next js is a very good choice to "empacked" back and front end. It is a very good challenge, I think I'll do it too to try axios as I only use it once until now.
Happy coding.
Marked as helpful
