Skip to content
OverviewSolutions
15
Comments
15

Adrian

@adriandotdevPhilippines390 points

Full-Stack Developer

Latest solutions

View more solutions

Latest comments

  • Adrian•390
    @adriandotdev

    Let me know what you think in my solution! Keep learning, everyone!

  • Adrian•390
    @adriandotdev
    What are you most proud of, and what would you do differently next time?

    After a year and a half as a Back-End Developer, I am now able to continue practicing my Front-End development skills. As I navigate my journey toward becoming a Full-Stack Developer, I am excited to learn the best of both worlds.

    Recipe Page using HTML, and CSS

    1
    Adrian•390
    @adriandotdev

    Any feedbacks are appreciated! Keep learning! ❤️

  • Adrian•390
    @adriandotdev

    Congratulations on completing this challenge.

    Here are my few suggestions:

    • I saw that you have an accessibility report. It says that you should have at least 1 heading on your page.

    • I review your CSS file code and noticed that you are using absolute units like px. As a good practice, try to avoid using it because it can lead to unresponsive design. Try to search relative units such as rem, em, vh, vw etc.

    • In the design, add a little bit more padding to the card itself to become more match to the actual design.

    That's it. I hope it helps. Happy coding!

    Marked as helpful
  • Adrian•390
    @adriandotdev

    Hey Jon! Really well done!

    I notice some issues:

    First, so I test your calculator app, so the user can't type in the keyboard?

    Second, I notice you also code in JavaScript for the hover effect, I think you can also do that in CSS. So, if the user changes the theme, you can use the classList attribute to toggle the classes for a certain theme.

    Third, for the theme button, I think it is better to make the numbers clickable so that the user doesn't have to click on the toggle button. It is also for accessibility purposes, since you are using a button for the toggle's circle, you can use a <label> tag to point to a certain button so that the user can click the number.

    Marked as helpful
  • Adrian•390
    @adriandotdev

    Hey Brother. So I checked the preview of your site, and whenever I am shrinking down the site, the content is broken.

    Since in this challenge, they also give the mobile design. Try to do it in a mobile-first approach.

    So for your media queries, you are only using min-width and it makes you enable to have minimum changes when you are growing the page.

    I also recommend you to think about what contents are together so you can use flex or grid to it depending on your approach.

    I think the only reason why the design is broken is that you are using inconsistent media queries to it. I hope it helps, thanks <3

    Marked as helpful
  • Adrian•390
    @adriandotdev

    Hey. I check the preview of your site so the input field seems a little bit off at the right in my screen size, 1920x1080. I notice also when I shrink down the page, the contents' positions are also broken. I highly suggest avoiding using media queries a lot.

    Marked as helpful
View more comments