Skip to content
OverviewSolutions
12
Comments
2333
Travolgi 🍕
@denielden

All comments

  • Travolgi 🍕•31,280
    @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,280
    @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,280
    @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,280
    @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,280
    @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,280
    @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
  • Travolgi 🍕•31,280
    @denielden

    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
  • Travolgi 🍕•31,280
    @denielden

    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!

  • Travolgi 🍕•31,280
    @denielden

    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
  • Travolgi 🍕•31,280
    @denielden

    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!

  • Travolgi 🍕•31,280
    @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
    • 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
  • Travolgi 🍕•31,280
    @denielden

    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!

  • Travolgi 🍕•31,280
    @denielden

    Hello Emanuel, 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 all the div without scope like as div with this classes: qr-code, qr 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!

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

    Hello Padse, You have done a good work! 😁

    Some little tips to improve your code:

    • not use <br> to make space because it's for break line of text... use margin property
    • use main tag to wrap the card and improve the Accessibility but not as a container of that one element inside it
    • also you can use article tag instead of a simple div to the container card for improve the Accessibility
    • use ul element instead of p with multiple <br> inside for the list Why us
    • use min-height: 100vh to body instead of height, otherwise the content is cut off when the browser height is less than the content

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

    Hope this help 😉 and Happy coding!

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

    Hello, You have done a good work! 😁

    You've added a great feature to switch plans. I like :)

    Some little tips to improve your code:

    • To fix the top image in the background just put more specific background properties to the body:
    background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;
    • 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
    • remove all margin from .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!

  • Travolgi 🍕•31,280
    @denielden

    Hello Rachel, 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 one element
    • 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 ul element... that is a incorrect use of ul tag: this card isen't a list
    • remove all margin from .qrcode-card class because with flex they are superfluous
    • use flexbox properties 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,280
    @denielden

    Hello Deeem, 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
    • you can use picture tag to change image by resolution -> read here but the best way is just put more specific background properties to the body like this:
    background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;
    • 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
    • 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
  • Travolgi 🍕•31,280
    @denielden

    Hello, You have done a good work! 😁

    Some little tips to improve your code:

    • fix the src of logo and article images src="./assets/images/logo.svg"... you forgot the dot before the slash
    • add header tag and wrap the navbar for improve the Accessibility
    • 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 the news for improve the Accessibility
    • add descriptive text in the alt attribute of the images
    • 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!