Skip to content
OverviewSolutions
21
Comments
4
Abdulrhman Mohamed Soliman
@AbdulrhmanSoliman

All comments

  • Abdulrhman Mohamed Soliman•390
    @AbdulrhmanSolimanPosted over 1 year ago

    @zakaria-bali

    Congrats on completing this challenge and for you awesome solution and tweaks.

    • I suggest you to make your code more cleaner by using semantic HTML elements such as <main>.
    • Try to link design fonts in the very top of your CSS file for example @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap'); instead of link it to the HTML file.
    • Also don't forget to use em & rem instead of px.

    Happy Coding

    I wish you all the best.

    0
  • Abdul Khaliq 🚀•72,560
    @0xabdulkhaliqSubmitted almost 2 years ago

    Mobile First 📱 > 🖥

    • Nothing to complicated, layout was built with CSS Grid and Flex.

    All feedback is greatly appreciated!

    TWEAKS 🚀

    • Smooth zoom-in transition while hovering the card

    Order Summary Component [ HTML5 + CSS3 ]

    1
    Abdulrhman Mohamed Soliman•390
    @AbdulrhmanSolimanPosted almost 2 years ago

    Hello @0xAbdulKhalid, congrats on completing this challenge and for your awesome solution.

    I suggest you setting the effect of the hover (scale) to the <picture> HTML tag element, because the scale property should relate only with the image when hovering on it.

    I hope you find it helpful.🎉

    Happy Coding

    0
  • Abdulrhman Mohamed Soliman•390
    @AbdulrhmanSolimanPosted almost 2 years ago

    Hello @stefanappdev, congratulation on completing your first challenge.

    here are some tips to improve your code.

    First: To fix the issues of the reporter

    • All <img> HTML tags should contain an alt.
    • Your code should contain at least one <main> HTML tags which include your actual code.

    Second: concerning your design you should make the as follows

    • Set a width and height to the container of the design/
    • Apply the background-color property to the <body> HTML tag
    • Reset and render all objects to remove default margin of the element using this code snippet *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; }

    Happy coding

    Marked as helpful
    0
  • Abdulrhman Mohamed Soliman•390
    @AbdulrhmanSolimanPosted almost 2 years ago

    Hello, @mselim7 congratulation on completing this challenge.

    Here are some feedbacks to improve your code.

    First

    You should link you CSS file within the HTML Head tag. learn more here

    Second

    To make the design centralized vertically and horizontally or to make it in the middle of the screen you should apply these Syltes below in the HTML body tag

    margin: 0;

display: flex;

height: 100vh;

flex-direction: column;

justify-content: center;

align-items: center;

    Finally

    Keep going my friend and practice more. I remember that when I started coding I'm getting some similar issues.

    Marked as helpful
    2