Skip to content
OverviewSolutions
12
Comments
2335

Travolgi 🍕

@denielden31,300 points

Hi! I'm Graphic designer & Frontend developer. Founder of Travolgi Themes ! Pizza and coding lover 🍕

Latest solutions

View more solutions

Latest comments

  • Travolgi 🍕•31,300
    @denielden

    Hello Roshan, You have done a good work! 😁

    Some little tips to improve your code:

    • add descriptive text in the alt attribute of the images
    • to make it look as close to the design as possible decrease broder-radius to .search-bar class
    • use one class to body to change the all theme color of app
    • after, add transition on the body to smooth the change theme color
    • use ul element for the details text of country instead of multiple p
    • I would also add a query reset button, I find it very convenient
    • in the filters there is no way to return to all countries after choosing a region, add an entry "all region"

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

  • Travolgi 🍕•31,300
    @denielden

    Hello, You have done a good work! 😁

    Some little tips to improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • also you can use article tag instead of a simple div to the container card for improve the Accessibility
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
    • centering a div with absolute positioning is now deprecated, it uses modern css like flexbox or grid
    • use flexbox to the body to center the card. Read here -> best flex guide
    • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
    • instead of using px use relative units of measurement like rem -> read here

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    Marked as helpful
  • Travolgi 🍕•31,300
    @denielden

    Hello Eduard, You have done a good work! 😁

    Some little tips to improve your code:

    • you can use article tag instead of a simple div to the container card for improve the Accessibility
    • use class to style the element and not id because the ids must be unique in all the page
    • instead of using px use relative units of measurement like rem -> read here

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    Marked as helpful
  • Travolgi 🍕•31,300
    @denielden

    Hello Sunil, You have done a good work! 😁

    Some little tips to improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • also you can use article tag instead of a simple div to the container card for improve the Accessibility
    • img element must have an alt attribute, it's very important!
    • add descriptive text in the alt attribute of the images
    • remove all margin and width properties from body
    • remove all margin from card and container classes
    • use flexbox to the body to center the card. Read here -> best flex guide
    • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
    • instead of using px use relative units of measurement like rem -> read here

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

  • Travolgi 🍕•31,300
    @denielden

    Hello Lucaci, You have done a good work! 😁

    Some little tips to improve your code:

    • use main tag to wrap the card and improve the Accessibility but not as a container of that element
    • use article or blockquote tag instead of main tag to the container card for improve the Accessibility
    • you can use picture tag to change image by resolution -> read here
    • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
    • instead of using px or % use relative units of measurement like rem -> read here

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    Marked as helpful
  • Travolgi 🍕•31,300
    @denielden

    Hi, You have done a good work! 😁

    Some little tips to improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • also you can use article tag instead of a simple div to the container card for improve the Accessibility
    • add descriptive text in the alt attribute of the images
    • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content
    • instead of using px use relative units of measurement like rem -> read here

    Keep learning how to code with your amazing solutions to challenges.

    Hope this help 😉 and Happy coding!

    Marked as helpful
View more comments