Skip to content
OverviewSolutions
29
Comments
108
P
beowulf1958
@beowulf1958

All comments

  • Aditya Yadav•10
    @Aditya-151947Submitted 16 days ago
    What are you most proud of, and what would you do differently next time?

    I have created the task almost similar to the assigned task. Its a great experienced of learning CSS concept and applying on it. It helps me allot to build the confidence. I will look further for similar project for the practice.

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

    I have face challenge for making the web page responsive. i dont thing that i got success. but i have try from my side to give my best within the limited time.

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

    it helps me in designing and clearing many CSS concept like flexbox and many more.

    Responsive Recipe Page

    1
    beowulf1958•1,450
    @beowulf1958Posted 16 days ago

    Congratulations on completing this challenge. It is not showing up correctly on the computer. This is because of two problems: the image is not there, and the parent has the wrong width.

    To fix the image use filepath images/image-omelette.jpeg There is no assets folder in the project.

    To fix the width, remove margin:20px 500px 20px 500px; This is not a good way to position the #parent, because it affects the width. Instead use

          width: 600px;
      margin: 0 auto;

    This is a good size for the recipe, and will center the container automatically.

    Hope this helps.

    0
  • Eniola•10
    @EnniolamiSubmitted 17 days ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the fact that i am able to do something and i will ensure to do better

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

    trying to style the page and i overcame it by searching online and asking for help

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

    the css styling area

    Responsive landing page using HTML and CSS

    1
    beowulf1958•1,450
    @beowulf1958Posted 17 days ago

    Congratulations on completing this challenge. The desktop version looks o.k.; however the container "breaks" on the phone size screen. To fix this in the styling do the following:

    1. Remove font-weight: 500px; and font-weight: 300px; Font-weight does not take a unit like pixel or rem.
    2. Remove font-optical-sizing: 50px This confuses the browser. font-optical-sizing takes either auto or none, not a number. This article will explain.
    3. Remove the height from the container. The height will adjust automatically. If you set a height, the contents of the container will "spill out" at different screen sizes.
    4. Change width: 50%; to width: 350px;

    Now the page looks better. Hope this helps.

    Marked as helpful
    0
  • beowulf1958•1,450
    @beowulf1958Posted 20 days ago

    Congratulations on completing this challenge. Your page looks great and is responsive. I love the way you have documented your code so well with comments. I am learning tailwindcss, so I was excited to see how you implemented it on this project.

    I do have two suggestions. First, the mobile version is a bit cramped and hard to read. Perhaps if you increased w-[80%] on the main it would be better.

    Second, the picture has a purple tint to it (the accent color in the style guide). This can be accomplished by adding a background color to the image div, reducing the opacity of the 2 img, and blending the img and background color with mix-blend. It would look like this:

          <div class="sm:float-right bg-[#aa5cdb] bg-blend-overlay">
        <img
          class="h-48 w-[100%] rounded-t-lg sm:hidden opacity-70"
          src="images/image-header-mobile.jpg"
          alt="image-header-mobile"
        />
        <img
          class="hidden sm:block sm:h-[411px] rounded-r-lg opacity-70"
          src="images/image-header-desktop.jpg"
          alt="image-header-desktop"
        />
      </div>
``
 Now it looks just like the design! Hope this helps.
    Marked as helpful
    0
  • beowulf1958•1,450
    @beowulf1958Posted 24 days ago

    Congratulations on completing this challenge. The page is looking good so far. I have a few suggestions.

    First, the component does not sit in the middle of the page. This is because the margin is not quite right. To correct this, remove max-width: 600px from the body tag. Next, remove the margin styles from the .contaner class and add margin: 30px auto Now the component sits in the middle of the page.

    A more serious issue is that the html is wrong. You cannot use <dt> inside a table. <table> contain <tr> which contain <th> and <td>; So tables contain rows which contain table headers and table data This article explains in more detail. For this project, you would need to structure your table this way:

          <table>
        <tr><th>Calories</th><td>277kcal</td></tr>
        <tr><th>Carbs</th><td>0g</td></tr>
        <tr><th>Protein</th><td>20g</td></tr>
        <tr><th>Fat</th><td>22g</td></tr>
      </table>

    To style the numbers in the table, target the <td>

    td {
    color: rgb(112, 131, 5); 
    font-weight: bold;
}

    Also, the closing body tag comes before the closing body tag.

    Hope this helps.

    0
  • ks9927•100
    @ks9927Submitted 27 days ago
    What specific areas of your project would you like help with?

    My main problem with this was the padding and margins of everything. There were times when things like a heading or a list wouldn't budge when I would add a number to the margin-bottom or padding-bottom property for example. Would like to know what that was all about.

    Recipie Page

    2
    beowulf1958•1,450
    @beowulf1958Posted 26 days ago

    Great job on completing this challenge. Everything looks great: typography, the colors, and the list markers. I like that you made the list markers bold; it makes them easier to see on the bulleted lists.

    Just to piggy back on what @erntTt94 mentioned: the design breaks around 480px and at 375px width (iphone size) the table falls completely out of the container. The simple fix is to remove the height from the .card styles. This allows the container to take the height of the content automatically. Generally, having a fixed px height on an element interferes with the responsiveness.

    Hope this helps. And keep on coding.

    Marked as helpful
    0
  • V.S Karthik Tirumalasetty•130
    @VSKarthikTSubmitted 29 days ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how I implemented the overall structure and styling of the recipe page. The layout looks clean, responsive, and the use of custom fonts gives the page a polished look and using media queries with mobile first approach

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

    One challenge was figuring out how to space the content properly, especially when working with flexbox and grid layouts. I wanted to ensure that the text was easy to read and that there was enough space between elements. I overcame this by using consistent padding and grid gaps to create clean spacing between sections. Understanding the behavior of border-collapse and how padding and borders interact was tricky too, but applying borders at the row level and adding padding directly to cells worked out well.

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

    Borders and gaps: I'm curious about how I handled the table borders and spacing between rows in the nutritional box. Is there a better way to manage borders when collapsing them and still maintaining some separation between rows? and also I wanted to know more about media queries

    Responsive layout using grid and flexbox

    2
    beowulf1958•1,450
    @beowulf1958Posted 28 days ago

    Great job on this challenge. Overall it looks great. It is responsive, and the borders and spacing make this page very readable.

    That said, you have some problems in the code. You have used the heading tags incorrectly. Heading tags, h1 - h6, are meant to structure the content, not style an element. So, main topic is h1, a sub-topic is h2, and a detail of a subtopic is h3. Anytime you use an h4 or h5, you have probably gone astray. This article can help. The heading tags go in order; an h5 should never immediately follow an h1 (the sentence under the h1 is a <p> not an <h5>). Note that <h4>Preparation time</h1> has different opening and closing tags!

    Also, avoid zombie styles: classes without styles in the css <span class = "High">Total:</span> or styles that have no effect .recipe-main-box{ padding: 0; } does nothing, because .recipe-main-box inherits padding: 0 from

      *{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }

    Lastly, as @espringer21 mentioned, the markers on the lists are colored. You can color the list markers with the ::marker pseudo-element.

    .prep-time-box ::marker { color: var(--rose-800)};
.ingredients-box ::marker, .instructions-box ::marker { color: var(--brown-800)};

    You can find more information about ::marker here. Also, the instructions should be bold

                 <li> 
                <b>Beat the eggs:</b> In a bowl, beat the eggs 
                with a pinch of salt and pepper until they 
                are well mixed. You can add a tablespoon 
                of water or milk for a fluffier texture.
              </li>

    Hope this helps. And keep on coding!

    Marked as helpful
    0
  • beowulf1958•1,450
    @beowulf1958Posted 29 days ago

    Great work on this challenge. For some reason the preview site is not working; however, your code is flawless and it looked brilliant when I downloaded it. You should check to see if there was a problem uploading it Frontend Mentor.

    0
  • beowulf1958•1,450
    @beowulf1958Posted about 1 month ago

    Congratulations on completing this challenge. Your webpage looks great on the desktop, your html is clean and uncluttered, and your css is well organized.

    However, when viewed on the mobile phone, the page breaks and the writing spills out of the container. Fixing this is a two step process. First, wrap the ingredients block in a div with the class name "ingredients" and wrap the instruction block in a div with class "instructions". Next, add a media query to the bottom of the css:

          @media screen and (max-width: 480px) {
        section,
        .instructions,
        .ingredients {
          width: 90%;
        }
      }

    Now it looks great on the mobile device.

    Another suggestion is to color the dots on the ul and numbers on the ol. The design calls for a rose color on the preparation list, and the ingredients and instructions are brown. To do this, you need to add some utility classes. <ul class="list rose"> for the preparation-container list and <ul class="list brown"> for the ingredients list and <ol class="list brown">for the instructions. Then, in the css add:

         .rose ::marker { color: hsl(332, 51%, 32%);   }

      td,
      .brown ::marker {
        color: hsl(14, 45%, 36%);
        font-weight: 800;
      }

    Now your page looks exactly like the design. Hope this helps.

    Marked as helpful
    0
  • Yusuf Jamal•240
    @Jamal-DigitalSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how i was able to overcome the challenge using HTML and CSS.

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

    I really face i serious challenge while styling the , and i was not able to style the number list separately , i'll be happy to get any feedback or quid.

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

    I'll like to get help on how to style number list.

    Recipe Page Main

    1
    beowulf1958•1,450
    @beowulf1958Posted about 1 month ago

    Congratulations on completing this challenge! Your webpage looks great both desktop and mobile. Your code is clean and uncluttered, and your styles are well organized.

    The style you are looking for is the ::marker pseudo-element. This pseudo-element allows us to style the bullets in ul and numbers in ol. This article explains in all in detail. Try this:

            .child-1 ::marker { color: var(--rose800); }
        .child-2 ::marker, ol ::marker { 
            color: var(--brown800); 
            font-weight: bold; 
        }

    Hope this helps.

    Marked as helpful
    0
  • beowulf1958•1,450
    @beowulf1958Posted about 1 month ago

    Congratulations on completing this challenge. Your desktop version looks great. However, the page is not responsive, and breaks at the mobile size of a smart phone. To fix this, you need to add a media query. Try this:

          /* mobile styles */
      @media screen and (max-width: 480px) {
        body {
          padding-top: 2rem;
        }
        .contenedor {
          width: 90%;
        }
        table {
          width: 275px;
        }
      }

    Another suggestion is to color the dots in front of the lists, and the numbers in front of the instructions. This is done using the pseudo-element ::marker

          .resumen ::marker {
        color: var(--Rose);
      }
      .ingredientes ul ::marker,
      ol ::marker {
        color: var(--Brown);
        font-weight: bold;
      }

    Lastly, only the numbers in the nutrition table are colored. For this you need :last-child

          td {
        text-align: center;
        border-bottom: 0.1rem solid var(--Stone150);
      }
      td:last-child {
        color: var(--Rose);
        font-weight: 600;
      }

    Hope this helps.

    0
  • beowulf1958•1,450
    @beowulf1958Posted about 1 month ago

    Congratulations on completing this challenge. Your website looks brilliant!

    I do have one suggestion: some of the elements need coloring: the markers for prep-time are a raspberry color (--Rose-800), the markers for ingredients and instructios are brown (--Brown-800), as is the values in the table data. Consider adding

    .prep-time ul ::marker {
  color: var(--Rose-800);
}
.instructios ol ::marker {
  font-family: outfit, sans-serif;
  font-weight: 700;
  padding-right: 10px;
  color: var(--Brown-800);
}
.ingredients ul ::marker {
  color: var(--Brown-800);
}
.nutrition tbody tr td:nth-last-child(1) {
  font-family: outfit;
  font-weight: 700;
  color: var(--Brown-800);
}

    Now your page looks exactly like the design! Hope this helps

    Marked as helpful
    0
  • Faith•10
    @Faith-AbiolaSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the way I took my time to create my first website page.

    I'd make to sacrifice more time to projects like this.

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

    Aligning the page card gave me a little challenge but I was able to overcome it by seeking help from those online.

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

    The last part, that is, the table part.

    All feedbacks are welcome.

    1st attempt recipe page

    1
    beowulf1958•1,450
    @beowulf1958Posted about 1 month ago

    Congratulations on completing your first webpage. You have made a very good start.

    However, your fonts are not loading. This is because the font style does not accept urls. This article will explain.

    To load local fonts, you will need to use @font-face. This article will show you how.

    The text Simple Omelet Recipe is a <h1> not a <p>. Also, <h3><b></b></h3> don't go together; the h3 is already bold, the <b> is redundant.

    In order to fix the last part (the table) you need to remove all the text5, text6, text7, text8 styles because the are not working. Add the following instead:

    table {
    width: 75%;
    margin: 0 auto;
}

    This will fix the table. Hope this helps.

    0