Skip to content
OverviewSolutions
4
Comments
5
JdccDev
@jdcc1024

All comments

  • AndreeaKiara•40
    @AndreeaKiaraSubmitted 3 months ago
    What specific areas of your project would you like help with?

    Facing some issues with the margins not showing properly on screenshot, looks okay on the deployed site. Will look into it

    Recipe page using styling variables

    1
    JdccDev•60
    @jdcc1024Posted 3 months ago

    Hi Andreea,

    I took a look at your margin issues. On my screen the deployed app looks similar to what was shown in your chalenge screenshot. Maybe it has to do with our screen resolution?

    It seems some of the code you added in the beginning could be causing the problem. Removing this fixes your recipe card's y-axis placement.

    /*    3. Allow percentage-based heights in the application  */
html,
body {
  height: 100%;
}

    Then you can adjust the margin-top of the card class to make it look closer to the screenshot.

    Another suggestion you can look into is using the <table> element for your nutrition list at the end. a table with 100% width will look closer to the example as well :)

    Keep up the great work!

    Marked as helpful
    1
  • JdccDev•60
    @jdcc1024Posted 3 months ago

    Love the naming scheme you used for your colors in the recipe-page astro file!

    0
  • Mario Chico•70
    @Mario-chicoSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Reuse the qr component for this project and didn't break that one. I think css have room for improvement.

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

    The re-utilization of components

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

    Component composition

    Blogpreview on Astro components

    1
    JdccDev•60
    @jdcc1024Posted 3 months ago

    Love the idea of reusing your components from the previous project. You'll have your own version of shadcn in no time :)

    0
  • Ayhem18•40
    @ayhem18Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I think the solution is good enough for a Newbie Challenge. I focused mainly on the site's structure and ensuring all components behave as expected.

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

    I would mainly like some feedback on my structure:

    1. setting a container for the 3 components: (the image and the 2 paragraphs) such that:
    • position: 'fixed'
    • 40% to the left and 40% to the right of the viewport
    • width=20% and the element is centered nicely
    1. each sub-component will be of width: 90% and of margin: 5% so each sub-component will be centered nicely within the container

    What are other better alternatives, for example? What are the potential issues with my approach?

    Simple Solution using CSS and HTML

    2
    JdccDev•60
    @jdcc1024Posted 3 months ago

    Hey Ayhem! Congrats on getting your challenge up and running! I saw your feedback questions while scrolling through my feed.

    An alternative to the solution you used (absolute positioning, viewport percentages, etc) is to use the flexbox concept. In my experience, flexbox is a lot closer to what you will encounter from UX developer designs and responsive layouts in the future.

    For the QR code challenge, take a look at flexbox, flex-direction, justify-content, and align-items. These 4 css settings will allow you to center your QR code card into the middle of the screen.

    { display: flex, flex-direction: column, justify-content: center, align-items: center }

    In your current solution, one drawback to using % is the look of the page. By using absolute and % based size calculations, your design may look very different to what your future customers see, depending on their window size. You can see it for yourself if you open your page and shrink the width of the window. The QR code will shrink, and you will end up with too much whitespace on a smaller-width screen.

    Make sure to build the habit of testing your UI at different window sizes :) Keep up the good work!

    1
  • JdccDev•60
    @jdcc1024Posted 3 months ago

    Love the use of css vars!

    You can consider moving some of the doc images into a docs folder instead of the assets folder.

    Great work!

    0