Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Ryan O'Hanlon• 140

    @Ryan-OHanlon

    Submitted

    What are you most proud of, and what would you do differently next time?

    What I'm most proud of is that I'm starting to develop a better understanding of CSS Grid and that grids involve using a parent child relationship so you need to use two HTML container elements for CSS Grid to work.

    If I could do something different this time, it would be to spend more time planning what the framework of the HTML elements to create CSS classes that would categorize the elements to make the stylesheet and html document readable on the backend.

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

    The main challenges I encountered was how to use CSS Grid and CSS Flexbox together to handle margin and padding between the HTML elements.

    When it came to grouping the portrait, the name and sub-title and having them organized I had to use a mix between CSS Grid and Flexbox to align the elements together. While this did place the elements together, I'm certain there is a better solution as dealing with the built-in margins and padding of paragraph elements to come closer together and being able to place them in a very specific spot makes designing the CSS rules very difficult.

    .person {
        display: flex;
        align-items: center;
    }
    
    .personname p {
        margin: 0 0 5px 1rem;
    }
    

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

    If there is one area I still would like help with each project is to know, when should I start limiting the size of objects for each project.

    While I strive to match the mobile and desktop design pictures, I still struggle dealing with padding, margins and how to group HTML elements together and not take up the entire block. Sizing container elements so that it matches the challenge still elude me as I try to be a perfectionist.

    @xaintobas

    Posted

    Hi @Ryan-OHanlon, nice work on your design!

    0
  • Juan• 480

    @JEWebDev

    Submitted

    What are you most proud of, and what would you do differently next time?

    Being able to complete the challenge in less than an hour. I am learning accesibility best practices to implement in my next projects.

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

    making the columns the same size. i achieved this with flex-basis: 100%

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

    Any feedback is welcomed!

  • Victor Giraldo• 70

    @Victor-M-Giraldo

    Submitted

    What are you most proud of, and what would you do differently next time?

    I used grid for this one. I'm much more comfortable with flexbox but wanted some practice.

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

    I originally was using flex for the design, but had trouble getting it to work with the desktop layout and making sure I had two equal width columns. Not sure how to get that to work. I figure it's setting the flex-basis to the same amount, and then flex-grow to 1.

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

    The text sizes aren't exactly responsive. I tried setting something like this but it gave me issues with the desktop layout because the right side of the card was taking up too much space. Advice would be appreciated here.

    html {
      font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
    }
    
    

    I also don't really know how to make this responsive for super big screens. Like I guess I could pop a width: 80% on there and a max-width at the same time but I don't know how else.

  • P
    Stephen Ostler• 210

    @steveostler

    Submitted

    What are you most proud of, and what would you do differently next time?

    |I attempted this myself without searching for any help.

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

    I struggled with the Nutritional information at the bottom of the card and could not get it to align correctly and i am searching for a solution

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

    I had an issue with the styling of the border radius on the image a the top of the page. When I added padding the border radius disappeared. I managed to fix it with the follwing code but I do not understand how this works,

     .recipe .recipe-img{
            padding: 40px 40px 0 40px;
            border-radius: 1rem;
            overflow: hidden;
        }
    
        .recipe .recipe-img img{
        border-radius: 1rem;
        }
    

    @xaintobas

    Posted

    Hi @steveostler,

    Nice work on your design!

    I reviewed the original code and your implementation for aligning the nutritional information. I noticed that you struggled with getting the information to align correctly. Your current approach using an unordered list with spans is functional, but aligning elements within a list can sometimes be challenging. I have a few suggestions that might help:

    I recommend using a table for this type of information. Tables are inherently better for displaying data that needs to be aligned in rows and columns.

    <table>
      <tr class="td__row">
        <td class="td__name">Calories</td>
        <td class="td__value">277kcal</td>
      </tr>
      <tr class="td__row">
        <td class="td__name">Carbs</td>
        <td class="td__value">0g</td>
      </tr>
      <tr class="td__row">
        <td class="td__name">Protein</td>
        <td class="td__value">20g</td>
      </tr>
      <tr class="td__row">
        <td class="td__name">Fat</td>
        <td class="td__value">22g</td>
      </tr>
    </table>
    
    table {
      width: 100%;
    }
    td {
      padding: 1rem 1rem 1rem 2.5rem;
      border-bottom: 1px solid grey; /* You can change the color */
    }
    .td__value {
      font-weight: 700;
      color: grey; /* You can change the color */
    }
    

    Benefits of Using a Table: -Tables provide a straightforward way to align data in rows and columns. -Tables can be more accessible to screen readers and other assistive technologies when used correctly. -It's easier to style rows and columns using CSS with tables.

    I hope you find my feedback valuable and helpful.

    If yes, I would appreciate it greatly if you could mark my comment as helpful!

    Happy coding 😊

    Marked as helpful

    0
  • @xaintobas

    Posted

    Hi @Cookielovekevin,

    Nice work on your design!

    0
  • @xaintobas

    Posted

    Hi @swanze,

    Nice work on your design!

    0
  • MaryAMsendoo• 10

    @MaryAMsendoo

    Submitted

    What are you most proud of, and what would you do differently next time?

    My most proud of is working with image, borders, width and colors. By next time I will be working with Layout and positioning.

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

    The most challenge I encounter was giving out the correct colors and width but I overcome by going through the Readme.md file.

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

    I may like to get help from the following areas: layout, colors, working with perfect width.

    @xaintobas

    Posted

    Hi @MaryAMsendoo,

    Nice work on your design! Here are a few opportunities to enhance it:

    -HTML Structure and Semantics:

    Your code uses nested <div> elements which can make the structure harder to follow.

    I will suggest you use <main> and <section> elements. It is a great improvement in terms of semantic HTML. This makes the content more meaningful and accessible.

    <main>
     <section class="card">
        <img src="https://maryamsendoo.github.io/firstchallenge/img1.png" alt="">
        <h1>Improve your front-end skills by building projects</h1>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
       </section>
    </main>
    

    -Flexbox for Centering:

    Your code uses margin for centering elements, which is not as flexible. I will suggest you use Flexbox in the main element to center the content. This makes the layout more responsive and easier to manage.

    main {
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      width:100vw;
      height:100vh;
      background-color: hsl(212, 45%, 89%);
    }
    

    -Styling Improvements:

    Your CSS has some issues, such as width: 50%px for the .container div which I believe is a typo. You should consider fixing this. But here are some improvements you should also consider:

    Using max-width: 320px to ensure the card does not become too wide on larger screens.

    .card {
      background-color:white;
      max-width:320px;
      text-align:center;
      border: 15px solid white;
      border-radius: 14px;
    }
    

    Consider adding an h1 element and also styling your image for responsiveness

    h1{
      font-size:1.6rem;
    }
    
    img{
      width:100%;
    }
    

    I hope you find my feedback valuable and helpful.

    If yes, I would appreciate it greatly if you could mark my comment as helpful!

    Keep coding

    0
  • @xaintobas

    Posted

    @Umar094 here’s how you can incorporate rem units into your CSS:

    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0 0 20px -10px;
        border-radius: .6rem;
        max-width: 45rem;
    } 
    

    You can as well adjust the values.

    Feel free to let me know if you have any questions or need further assistance!

    Hope to be helpful.

    Marked as helpful

    0
  • @xaintobas

    Posted

    @Umar094 yeah, using rem units is better for ensuring scalability, as it allows the design to adapt to the user's browser settings and font size preferences.

    0
  • @xaintobas

    Posted

    Hi @cmadoka2003,

    Nice work on your design! Here are a few opportunities to enhance it:

    Spacing below the "content" div: I noticed there is a lot of space below your "content" div. To fix this, consider updating your grid container styling from:

    .content {
        width: 1030px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
    }
    

    to:

    .content {
        width: 1030px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
    }
    

    Using auto in grid-template-rows: repeat(2, auto); will help adjust the row height dynamically based on the content.

    Mobile screen adjustments: For better responsiveness on mobile screens, consider removing the height: 100vh; from your body element. This can help avoid unnecessary scroll issues.

    These adjustments should help improve your design. Let me know if you have any questions or need further assistance!

    Hope to be helpful.

    Marked as helpful

    1
  • @xaintobas

    Posted

    Hi @Umar094,

    Nice work on your design! I noticed a couple of opportunities to enhance it:

    Spacing Below the Container: There is a lot of space below your container div. Instead of using:

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0 0 20px -10px;
        border-radius: 10px;
        width: 45%;
        height: 60%;
    }
    

    Consider using:

    .container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
        background-color: hsl(0, 0%, 100%);
        box-shadow: 0 0 20px -10px;
        border-radius: 10px;
        max-width: 650px;
    }
    

    The auto in grid-template-rows: repeat(2, auto); allows rows to adjust based on content, and max-width: 650px; provides a more responsive design. The width and height you specified are not necessary.

    Formatting "Why Us" Content: For better readability, you can break your "Why Us" content into separate lines using the <br> tag.

    Instead of:

    <div class="box box-3">
        <h2>Why Us</h2>
        <p>
            Tutorials by industry experts
            Peer & expert code review
            Coding exercises
            Access to our GitHub repos
            Community forum
            Flashcard decks
            New videos every week
        </p>
    </div>
    

    Consider using

    <div class="box box-3">
        <h2>Why Us</h2>
        <p>
            Tutorials by industry experts<br>
            Peer & expert code review<br>
            Coding exercises<br>
            Access to our GitHub repos<br>
            Community forum<br>
            Flashcard decks<br>
            New videos every week
        </p>
    </div>
    

    These adjustments will improve your design. Let me know if you have any questions or need further assistance!

    Hope to be helpful.

    Marked as helpful

    1
  • @xaintobas

    Posted

    Hi @straboush,

    Nice work. However, here are a few opportunities to enhance your design:

    I noticed there is a lot of space below your .community div. To fix this, consider adjusting your grid container styling.

    Instead of using this:

    .price_grid_comp {
        display: grid;
        /* grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 2fr 1fr; */
        grid-column-gap: 0px;
        grid-row-gap: 4rem;
        /* height: 25rem;
        width: 58%; */
    }
    

    Try updating your code to:

    .price_grid_comp {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
    }
    

    Using auto in grid-template-rows: repeat(2, auto); will allow the row height to adjust dynamically, removing the unnecessary space below your "community" div.

    These adjustments will help improve your design. Let me know if you have any questions or need further assistance!

    Hope to be helpful.

    Marked as helpful

    0