Skip to content
OverviewSolutions
7
Comments
7
Amaury Franssen
@ExploryKod

All comments

  • Amaury Franssen•180
    @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.

  • Amaury Franssen•180
    @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
  • Amaury Franssen•180
    @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

  • Amaury Franssen•180
    @ExploryKod

    I love your project and thank you for the good advice you wrote about responsive svg circle. Happy coding !

    Marked as helpful
  • Amaury Franssen•180
    @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
  • Amaury Franssen•180
    @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
  • Amaury Franssen•180
    @ExploryKod

    @JosZero, Hi Jose,

    I like your code, alignements and spaces, the use of flexbox. I found it is a good choice to place background patterns/forms with background-position and background-image.

    If you wish, you can improve the responsiveness using grid system on the body itself : it helps controlling the position of the card in the center, especially in small mobile phone (as iphone 5s) without the need of changing margins at every breakpoints. The card will scale with part of the grid it is placed.

    I see you have the same accessibility issues that I experienced on this project : I created my "background patterns" outside <main> tag so without enclosing it with "landmarck elements", I enclosed it in <main></main> and the issue disappear. You can do the same with attributions by enclosing it in a <footer></footer> and create a <main></main> (ex: replace your class "container" from a div to a main tag). This will solve the accessibility issue.

    Hope I helped you with these tips. I enjoy reading your code and seeing the result. Happy coding.

    Marked as helpful