Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions12Comments2350

All comments

  • Travolgi 🍕• 31,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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
  • Lucaci Daniel• 220

    @DanielLucaci

    Submitted

    This is my solution for the "Advice generator app" challenge. I spend some time to add a loading spinner when fetching a new advice, but I'm very proud of the final result. Any feedback is highly appreciated.

    Advice generator app using HTML, CSS and JavaScript

    #fetch

    3

    Travolgi 🍕• 31,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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,500

    @denielden

    Posted

    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
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    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

    0
  • PadseGaming• 70

    @PadseGaming

    Submitted

    The left and right card in the bottom of the main card are difficult to place correctly with Flex. I choose grid, and it was for this solution the best for me.

    I learnd to build mobile first. I will do this in future too.

    My goal is to solve all the Challanges to get better.

    Single-Price-Grid with Flex & Grid

    1

    Travolgi 🍕• 31,500

    @denielden

    Posted

    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

    0
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    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!

    0
  • Rachel Collins• 20

    @CollinsRachel

    Submitted

    I was trying to focus on making my code simple and straightforward but I still doesn't look perfect, are there any best practices that anyone would recommend to help me?

    QR Component

    2

    Travolgi 🍕• 31,500

    @denielden

    Posted

    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!

    0
  • Deeem• 40

    @Deem1203

    Submitted

    I had an issue not getting the container to stay in the middle, there for if you shrink the page it will not stay centered until it reaches 500px

    Order summary page using html and css

    3

    Travolgi 🍕• 31,500

    @denielden

    Posted

    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

    0
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    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!

    0
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    Hello King, 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 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!

    Marked as helpful

    0
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    Hello Martin, You have done a good work! 😁

    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;
    • 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
    • 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

    0
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    Hello King, You have done a good work! 😁

    Some little tips to improve your code:

    • add main tag and wrap the card for improve the Accessibility
    • remove all margin from body because with flex they are superfluous
    • after, add min-height: 100vh to body because Flexbox aligns child items to the size of the parent container
    • 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

    0
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    Hello Ruffwise, 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
    • 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;
    • remove all margin from .div-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
    • add transition on the element with hover effect

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

    Hope this help 😉 and Happy coding!

    Marked as helpful

    0
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    Hello Mohamed, 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 project 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

    1
  • Travolgi 🍕• 31,500

    @denielden

    Posted

    Hello Ubaka, 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 margin from .white-box class because with flex they are superfluous
    • use flexbox properties to .grey-body class to center the card. Read here -> best flex guide
    • use min-height: 100vh to .grey-body class 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