Skip to content
OverviewSolutions
12
Comments
2342
Travolgi 🍕
@denielden

All comments

  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    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!

    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    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
    1
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    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
    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    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!

    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    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
    1
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    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
    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    Hello Vlado, You have done a good work! 😁

    Some little tips to improve your code:

    • 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
    • Using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
    • add transition on the element with hover effect
    • 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
    1
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    Hello Dorian, You have done a good work! 😁

    Some little tips to improve your code:

    • Using <hr> for the line is not the best way because this tag have a semantic meaning... in this case use div with border-bottom because this line is decorative
    • remove all margin from card class because with flex they are superfluous
    • 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!

    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    Hi, 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
    • add descriptive text in the alt attribute of the images
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the figure container of image
    • remove all margin from .qr-card class because with grid they are superfluous
    • after, add min-height: 100vh to body because Grid 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
    1
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    Hello Yusuf, 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 unnecessary code, the less you write the better as well as being clearer: for example the h3 title
    • remove all margin from .yusuf class
    • 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!

    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    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
    • remove all unnecessary code, the less you write the better as well as being clearer: for example the div container of image
    • remove all margin from .content-container class
    • 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
    0
  • Travolgi 🍕•31,400
    @denieldenPosted almost 2 years ago

    Hello Eason, You have done a good work! 😁

    Some little tips to improve your code:

    • add main tag and wrap the main content of the page for improve the Accessibility
    • use article tag instead of a simple div to the container card of country for improve the Accessibility
    • add descriptive text in the alt attribute of the images
    • 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
    • if you want to use the title for the href attribute you have to parse it in url, it can give problems creating links with empty spaces or special characters
    • if I type a query that doesn't give any results, nothing happens, try adding a "no results" message
    • 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"
    • 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!

    1