Skip to content
OverviewSolutions
6
Comments
3
Omar Jalal
@omar-jalal

All comments

  • holly•10
    @ookamidigitalSubmitted about 2 years ago

    Had a lot of fun making my first project just a few weeks into learning HTML and CSS. had a minor problem with the images but I think it's quite good for a first project. open to any feedback, thanks.

    update, just applied almost everything you guys suggested me about. had a blast making this one! just had a little bit of problem with the button but the rest turned out perfect!!

    it has just been few minutes since I posted this, and the design comparison isn't the same as the live site I attached. is this a normal thing or is there something wrong!??

    Product preview card component

    2
    Omar Jalal•110
    @omar-jalalPosted about 2 years ago

    • Hey nice design, here's how you can fix the image you need to give it background-size: contain; and background-repeat: no-repeat;

    • You shouldnt use alot of divs in the HTML it's a bad practice for SEO and WAI-ARIA reasons search about them for more info, and you can't put a <p> inside a <button> too.

    • You can't skip or repeat a head tag you always start from <h1> because every page needs it and you keep ascending from there if you need to add more.

    • You need to wrap everything in the page in <main> tag

    • Use <picture> tag instead of importing the image in the css so you can switch between the desktop and mobile image versions responsively!

    • Hope that was helpful, happy coding!

    Marked as helpful
    1
  • Omar Jalal•110
    @omar-jalalPosted about 2 years ago
    • Hey your design is awesome but here a little tip to make it even better, make a class for transition and add it to every interactive element to make your design more smooth you can make it like this for example:

    .smooth { transition: all ease-in-out .25s; }

    • and you shouldn't use div so often but if you have to you need to use role="" attribute for accessibility reason, for more info search for: WAI-ARIA.

    • and you should add media query for mobile layout and desktop layout in css file.

    • HAPPY CODING!

    0
  • Omar Jalal•110
    @omar-jalalPosted about 2 years ago

    Hi, your design is awesome and accurate but you can improve it even more! -Use normalize.css to remove elements default values instead of doing it manually. -Use <picture> to switch between different photos in mobile layout instead of display: none/block. -Use Rem and Em instead of Px for media queries to make your website more accessible.

    1