Skip to content
OverviewSolutions
15
Comments
15
Adrian
@adriandotdev

All 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
  • Adrian•390
    @adriandotdev

    Hi Dusviry. Looks like the preview site is cannote be found. It gives a 404 error.

    Try to check the link that you are uploaded in this project if it is totally hosted.

    Hope this helps.

  • Adrian•390
    @adriandotdev

    Hello Kev! <3

    My suggestion is each item is a little bit squished. also, for the first item with the profile picture, i think the container below must be a little bit higher so that it looks like it is clipped to it.

    I have never do this project but my first solution that I will come up with is using position: absolute;

    just put the two containers inside a div and set a div (parent element) as a relative position, so that it is not relative to the body itself.

    Also, the font size of the hours, weeks etc. is not bigger enough. The background of the body must be black.

    I hope it helps. Keep learning brother <3

    Marked as helpful
  • Adrian•390
    @adriandotdev

    Hello Obhuri! Great work! <3

    My suggestion is to have additional left and right padding. also for the gap of each element inside the card. All in all. It is great <3

  • Adrian•390
    @adriandotdev

    Hello Luka. Great Work! <3

    My suggestion is to have a confirmation modal when deleting a certain item.

    Marked as helpful
  • Adrian•390
    @adriandotdev

    Hi Raul. I think you need to use flex for that also do not use other absolute units. try to use relative units for its responsiveness.

    Also, you can use % for sizing the images like 100% etc.

    Marked as helpful
  • Adrian•390
    @adriandotdev

    Great work! <3

    Try to change the border of the input field and try to fit the arrow button to the input field so it makes it look like more attached to it. Also, the letter spacing of the main title seems a little bit wider. try to adjust it and the font-size of it on 1440px screen size.

    All in all. it looks great <3

  • Adrian•390
    @adriandotdev

    Great work! <3 I suggest to lessen the width of 'Fylo' container and try to add an additional padding to the right container. All in all it looks great <3

    Marked as helpful
  • Adrian•390
    @adriandotdev

    I didn't started this challenge yet, but my idea to that is I am going to use a ReactJS for that.

  • Adrian•390
    @adriandotdev

    Great work! <3 However, try to refactor the colors of the button, the 'change' link and the box-shadow of the card itself. Another is the color of the heading.

    Marked as helpful