Skip to content
OverviewSolutions
9
Comments
7
P
Jeronimo Palacios
@giropa832

All comments

  • Jeronimo Palacios•170
    @giropa832Posted about 7 hours ago

    Hi, good solution. Almost matched perfectly the design. Here is some feedback:

    • When organizing your CSS file, bear in mind that order counts. Your media queries are scattered in the middle of different properties. I'd recommend having them properly placed at the end of the file.
    • Use the proper tags on the HTML. You placed all the content within divs. That is not bad per se, however it might lead to a ton of rework when you try to optimize for SEO or accesibility. Using h1, h2, p, etc.. tags helps structuring your HTML better.

    Godspeed!

    Marked as helpful
    0
  • Anyanwu Johnpaul Chinedu•10
    @anyanwujohnpaulSubmitted about 8 hours ago
    What are you most proud of, and what would you do differently next time?

    I am so excited to have embarked on the journey of building the recipe page, It was a basic project and I was happy because I've always known I could do cool stuffs in Web Development, I am also looking forward to tackling the next challenge head-on. All thanks to my friend and the tech community (web dev accountability buddies)

    What challenges did you encounter, and how did you overcome them?

    When i get stuck, I reach out to my friend or do some googling and reading of documentations also helped.

    What specific areas of your project would you like help with?

    NIL

    Recipe Page using HTML & CSS

    1
    Jeronimo Palacios•170
    @giropa832Posted about 7 hours ago

    Welcome to Frontend mentor an congratulations on submitting your first solution.

    Here is some feedback:

    • Get accustomed to train your eye and try to match perfectly the designs. Often what differentiates a senior from a junior is the attention to details.
    • When developing your CSS, bear in mind that order counts. Things that go up in your file will be trumped by things that are down. Try to put your media queries at the end of the CSS
    • You used sections in your HTML but probably the use of Divs would be a better choice. Make sure that you HTML is well organised and don't be afraid to container the html in.

    You have a great opportunity to review again your solution ans try to get it to Pixel perfect.

    0
  • Jeronimo Palacios•170
    @giropa832Posted 1 day ago

    Hi, good work! Let me give you some feedback:

    • Very elegant way to show custom ordered list numbers.
    • The visuals in your solution and the design do not match properly. It seems just a matter of adjustment though.
    • Instead of using media queries, you can use clamp() to adjust finely for different browsers. It uses less code and lets you finely adjust how your design will be seen.
    Marked as helpful
    0
  • Jeronimo Palacios•170
    @giropa832Posted 9 days ago

    Good Job!

    Remember to update the README if you are planning to use these challenges to showcase your expertise. Good luck with you professional training.

    0
  • Jeronimo Palacios•170
    @giropa832Posted 10 days ago

    Great work!

    Here is some feedback:

    • When resizing the card with developers tools, it slips out on the view. You can resolve this with max-width: min (384px, 90vw) so it ensures that it will never reach 100% of the screen.
    • It must have been difficult to find the exact color in HEX. You can always use hsl(gradient, percentages) to express the colors ad described on the Figma file. You can also add them as variables in your css with :root.
    • Really nice transition when hovering!

    I hope the feedback helps.

    Marked as helpful
    1
  • Jeronimo Palacios•170
    @giropa832Posted 10 days ago

    Nice solution. I'd like to give you some feedback.

    • Was using media queries necessary? the solution does not match the designs in desktop mode.
    • Was absolute positioning the best approach? While the screenshot seems to be correct, maybe implementing a solution with flexbox could be more appropiate.
    • I liked the fact that you rooted colors. It makes refactoring so much easier!
    0
  • Dhanasagar2•10
    @Dhanasagar2Submitted 10 days ago
    What are you most proud of, and what would you do differently next time?

    I am feeling proud to complete this solution and hoping that want to, solve the solution from the next time onwards with the minimal coding.

    What challenges did you encounter, and how did you overcome them?

    Because of it was my first challenge in frontend mentor i completed this through by some references for the paths to solve.

    Qr-code component-main-challenge

    2
    Jeronimo Palacios•170
    @giropa832Posted 10 days ago

    Hi,

    This is a great first approach. I am reviewing your solution and I'd like to point some details:

    • Look at the design system (fonts, colours)
    • Try to make the design as pixel perfect as possible. Sizes don't correspond to each other.

    Maybe try to do it with Vanilla CSS and HTML first?

    I wish you the best of luck

    Marked as helpful
    1