Skip to content
OverviewSolutions
16
Comments
26
Martin
@nonso01

All comments

  • Martin•560
    @nonso01
    • use flex box or grid to super center whatever element you might have, rather than using margin, because no other element can occupy the space.
    • you can check the specified font , because it seems like it's not loading properly.
    • just follow the flow, most mobile are within 360 - 380px wide so you could work on that. Happy coding
  • Martin•560
    @nonso01

    hey @Opeyemi , it would be amazing if you could work on your styling and adjusting the logics too.

    • it seems like the red border you applied probably for errors remained as the default border.
    • the specified font wasn't applied either
    • you applied a relatively thick box-shadow and encapsulated everything inside a box, instead of occupying the whole page
    • no error boundaries were applied to prevent the user from moving forward if any required field wasn't correct.
    • please try making your code as readable as possible
    • hope you'll rectify all these

    wishing you well, and happy coding

  • Martin•560
    @nonso01

    👋 Hello dude.

    • just some couple of things to review, which might make your solution much more better.
    • for the rating text(s) you forgot to use the appropriate color which was very dark magenta
    • for the mean time I don't have a functional machine, would have made a pull request, the solution looks stretched on larger screens, which means you have to increase your components as well( probably responsively) try using relative sizes (%)
    • doesn't look too good on mobile, with time I know you will do it.
    • and add text-align: center to the card paragraph and other places where needed.

    Hope it helps and hey accessibility issues too nice job though ^_^

    Marked as helpful
  • Martin•560
    @nonso01
    • Well looks like you would need to update your styling , and as well make better use of flex box.
    • it will be preferable to wrap the image within a div. and set it sizes to % will adjusting the flex child so as to have a desirable appearance.
    • I might create an issue or pull request in your GitHub too
    Marked as helpful
  • Martin•560
    @nonso01

    just clean, love the creativity 😁👏

  • Martin•560
    @nonso01

    well there are Soo many errors in your css file right now, that's why some of the contents were not rendered.

    /* this is how you use a variable in css */
:root{
--my-var: Bleu;
--my__var: red;
--var: yellow;

/* but this is wrong*/
--my var: orange;
/* you allowed a space which spoiled everything */
}
    • Try to adjust this few things, and keep pushing 🙂
  • Martin•560
    @nonso01

    Hello Hamza 👏, there is a couple of things to review form your solution.

    Your GitHub repo

    your repository isn't available right now, which hinders me from reviewing some potential mistakes (hope you will resolve that in future).

    Others

    • from what I can see here , you probably failed to import a specified fonts
    import url("google fonts")
/* or @font-face at-rule*/
    • you probably had issues with basic stylings such as box layout
    /*flex box ppt*

    hope you will resolve this and get better, nice job though.

    Marked as helpful
  • Martin•560
    @nonso01

    well am not sure because from the screenshot and from the page. the blue button download for mac is missing. and the background images as well,there are also missing. you might want to check it out, aside that I think any other thing looks good. nice job

  • Martin•560
    @nonso01

    well since your hosting provider failed to fetch your solutions I had to look into your source code!. you made use of positioning a lot probably in order to center 🙂!, I started off like that (but with margin:auto). I will advice you to learn flex-box and grid for the time being! it's simple trust me. you can start from here and again try to fix the issues with your hosting providers.

  • Martin•560
    @nonso01

    hello 👋 dude!

    • you got some html issues, accessibilities and so on, try to write semantic html H1 to Hn.
    • and your solution isn't published completely, try to work on that!.
    • You could look through GitHub documentations or netlify
    • And most importantly take your time and get better no rushing! 😙✌️
    Marked as helpful
  • Martin•560
    @nonso01

    hmmm!!! 😉👋 hello great solution but you still have some few things to do! your card has some issues with dimensions! not responsive on mobile! the images seems to pop out!

    • you could give it some fixed dimensions or use grid! if you're already in the topic!
    • the applying some media queries! for mobile!
    • great job though 😙✌️
    Marked as helpful
  • Martin•560
    @nonso01
    • well at first I thought they was no solution.
    • well smooth work there!.
    • and just try and fix some issues (HTML and accessibility) keep up 🦾
    Marked as helpful
  • Martin•560
    @nonso01

    hmmmm, well what do we have here!!

    • no repo to check the code
    • accessibility issues
    • and no visible solution well if I were you, I will take all my time to do it again( don't get me wrong we all are learning). no need to rush once you feel your solution (s), are up and ready then you can submit! hope you will give better solutions next time! keep the spirit 💪🏾 up
  • Martin•560
    @nonso01

    well I don't see any issues here everything looks clean responsiveness and the rest! smooth work 😋😋

    Marked as helpful
  • Martin•560
    @nonso01

    smooth work!📸! try to check on the accessibility issues! but the solution looks clean!

  • Martin•560
    @nonso01

    hmm! nice work but something is wrong somewhere! at ,let say width:800~900px everything looks smooth but below or above that! things get bad! try to check on that! if everything is ok then good work! 📸

    Marked as helpful
  • Martin•560
    @nonso01

    just 👌👌👌💯! am jealous 😑! that's some smooth work!

  • Martin•560
    @nonso01

    well well what do we have here(am a beginner) just like you! it's a real and a good! start! but

    • your solution lacks responsiveness
    • and some little adjustment!
    • and some accessibility issues! but it's still good! you can review your code anytime keep pushing ❤️📸
    Marked as helpful