Skip to content
OverviewSolutions
32
Comments
147
beowulf1958
@beowulf1958

All comments

  • rouhollah-sari•60
    @rouhollah-sari
    What are you most proud of, and what would you do differently next time?

    In this practice I tried to write a clean and easy to edit code. I think I learned bootstrap grid a lot in this practice.

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

    The most difficult challenge I faced in this practice was the column width in bootstrap. The problem was how to set the column size to avoid extra space and benefit from aligning the lines at the same time.

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

    I am a little wonder about the font size and font type in this practice.

    Responsive page using bootstrap

    #bootstrap
    1
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing the project. It looks good. Your code is well organized, with the different sections in the html matching up to the section in CSS. The comments in CSS are super important. You made good use of CSS variables and the page is responsive.

    Great job using Bootstrap! I am also learning Bootstrap. It is easy to see you put in a lot of work. Maybe too much work? Bootstrap allows you style the font-size, font-weight, padding, and margins as you are marking up the html, saving a lot of time on the backend when applying your custom styles. Also, it is best practice to give each class a meaningful name: class="ingredients" instead of class="part_4" and then each element would be class="ingredients-title" and class="ingredients-text"

    The next step would be to make your html more semantic. Every page needs an <h1>. So in this case you would have a structure something like:

    <div class="main">
  <section class="heading"></section>
  <section class="preparation"></section>
  <section class="ingredients">
   <section class="ingredients">
     <h2 class="pt-4 mb-3 fw-semibold">Ingredients</h2>
       <ul>
          <li>2-3 large eggs</li>
          <li>Salt, to taste</li>
          <li>Pepper, to taste</li>
          <li>1 tablespoon of butter or oil</li>
          <li>Optional fillings: cheese, diced vegetables, cooked meats, herbs.</li>
        </ul>
    </section></section>
  <section class="instructions"></section>
  <section class="nutrition"></section>
</div>

    which simplifies the CSS somewhat

    /* Style for the ingredients*/
.ingredients{
  border-bottom: solid 2px rgba(00, 00, 00,0.1);
  background-color: var(--White);
 }

 .ingredients-title{
  font-family:'Young Serif'
  color: var(--Brown-800);
  font-size: 175%;
 }

 .ingredients-text{
   font-size: 125%;
 }

    Again, great job and keep up with Bootstrap. Once you are familiar with it, it will save you a lot of time.

  • beowulf1958•1,890
    @beowulf1958

    Congratulations for completing this project. It looks great. You were very brave to jump into Bootstrap! I do have a few suggestions.

    First, you declared CSS variables in the :root, but then you didn't use them. The reason we use CSS variables is so we can maintain our web site without having to comb through the html to find every instance of a color (or other style). We can update the variable in the :root, and every instance changes automatically.

    Second, you used some Bootstrap, but there was so much more you could have done, which would minimize the amount of custom CSS need in index.css

    For example you could have styled .ntable using the Bootstrap class="table" and saved yourself 12 lines of code in the css. Your page looks great, but you did extra work.

    That said, there is a detail you missed: the dots on the ul and numbers on the ol are the same color as their respective heading. This is accomplished using the ::marker pseudo-element. This article explains it all. So, for example,

     .preparation ul li::marker { color: var(--Rose-800) }
 #ingredients ul li::marker, .instuctions ol li::marker {
   color:hsl(14, 45%, 36%); 
   font-weight: bold
 }

    Also, "calories", "carbs", "protein" and "fats" are not brown in the design. To fix this wrap the numbers in the table in <strong></strong> then target that span in the css: table strong { color: var(--Brown-800) }

    Hope this helps. And keep up the Bootstrap; it will save you a ton of work once you get used to it.

    Marked as helpful
  • meekmaurer•10
    @meekmaurer
    What are you most proud of, and what would you do differently next time?

    I am proud of the whole project. I am just beginning my boot camp for software engineering. And this is the first project I have completed on my own.

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

    I was very challenged with trying to style the numbers in my ordered list. Unfortunately I was unable to figure it out. As well as adding the line to the Nutrition table.

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

    I would like some assistance with the above areas.

    html,css,flexbox

    1
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. It looks great. I love that you have split the styles in modules for easier maintenance and scalability.

    As to the numbers on the instruction list, what you are looking for is the ::marker pseudo-element. This article explains it all. In the case of this project, you would merely add

     .Instruction__card__list-item::marker {
  color: hsl(14, 45%, 36%);
  font-weight: bold;
}

    to the instructions module.

    The lines in the table is a bit more complicated. The issue is that the table is inside a grid element. This article discusses the best way to handle this. A quick and dirty solution would be to add to the nutrition module

    /* to leave a bit of overhang so the
   item does not begin flush with the edge
 */
.nutrition__input-calories td,
.nutrition__input-carbs td,
.nutrition__input-protein td, 
.nutrition__table-item-fat 
{ padding-left: 25px;}

/* add border bottom to td, th excluding the last */
.nutrition__input-calories td, .nutrition__input-calories th,
.nutrition__input-carbs td, .nutrition__input-carbs th,
.nutrition__input-protein td, .nutrition__input-protein th
{  border-bottom: 2px solid var(--c-Stone-150); }

    you would need to adjust padding and margins on the .nutrition__table to make it look right, but you get the general idea.

    Hope this helps.

  • beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. It looks great. However, I noticed that the hover state on the image is missing the view icon. This is easily fixed.

    First, in the root, define a new variable --cyan20: hsla (178, 100%, 50%, 0.2) This is your cyan color at 20% transparency. Then replace the background-color with background: var(--cyan20) url("./images/icon-view.svg") no-repeat center; This places the icon on top of the color in the center of the div. This article explains everything. Try it out!

    Hope this helps.

    Marked as helpful
  • P
    Jozef Kudrna•430
    @Jojo25011990
    What are you most proud of, and what would you do differently next time?

    This project was originally built using vanilla system (js, scss - bem, html). Later, I rewrote the whole project into React and I won't lie — it was a pain 😂. The Hero section ( Digital ) is a little tricky but a very good design, I liked it.

    I encountered a Google Safe Browsing warning first time. I didn't change my code, but to fix this -> I verified site ownership in Google Search Console and requested a review. The site is safe, I'm waiting for Google answer and to lift the warning..

    React + Vite, Scss - Bem, Full Responsive, Flexbox,Grid, Animations

    #react#sass/scss#vite#bem
    1
    beowulf1958•1,890
    @beowulf1958

    Awesome job with this challenge. Your site looks great.

    I also got the Google unsafe warning and had to "proceed to unsafe site" to view it. I have seem this many times from developers here on Frontend Mentor. This seems to be the pattern whenever someone uploads their project to github pages. You might want to use Netlify or Vercel for your hosting. I have never seem a problem with these two. I know how frustrating it is to have to jump through all these hoops to show your page.

    Again, you did a brilliant job and hope this resolves soon. Keep on coding!

  • Adedotun Awolaja•30
    @AAdedotun
    What challenges did you encounter, and how did you overcome them?

    I only have a slight problem, I don't know why the width of the card is so small on small screens. I set the width to "w-1/2" and added px, but nothing worked. I've tried all things in tailwindcss classes but it's not working, I really need anyone who understands taiwindcss usage to help on this part. I'll drop a link to my github repo "https://github.com/AAdedotun/blog-preview-card.git"

    Blog Preview Card

    #tailwind-css
    1
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this project. I like that you are using tailwindcss; I, too, am learning this framework. After taking a look at your project I can see that it looks too narrow on the mobile view. I tried various things but they didn't work, like using arbitrary values. However I was able to get it to work by altering the tailwind.config file. Did you know that, inaddition to colors, you could also extend the widths? This article explains the process. once you have altered the tailwind.config.js you must run: npx tailwindcss -i input.css -o output.css --watch this will update the stylesheets. I used 350px and it looked fine.

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html'
  ],
  theme: {
    extend: {
      colors: {
        'brand-yellow': 'hsl(47, 88%, 63%)',
      },
      width: { 
        '350': '350px',
      }
    },
  },
  plugins: [],
}

    You might have to adjust the padding. Try it out. Hope this helps

  • beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. It looks good so far. Your html is well structured -- I love that you comment the different sections making it easier to look up styles. Your CSS is well organized and easy to follow and understand.

    Using filter to get the effect on the image can be tricky; it can be done, but it is hard to get it just right. It is better to use an overlay that is semi-transparent on top of the img. This can be done with a pseudo-element. This article explains it all. In this project you would add position: relative to the image-content class and add a position: absolute the pseudo-element. Try this:

    .image-content {
  flex: 1;
  position: relative;
}

.image-content::before {
   content: " ";
   width: 100%;
   height: 100%;
   opacity: 20%;
   background-color: #f019f4; 
   position: absolute;
   top: 0;
   left: 0;
   z-index: 10;
}

    Hope this helps.

  • Edwin Hudson•230
    @edwin-hudson
    What challenges did you encounter, and how did you overcome them?

    No specific challenge was encoutered.

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

    All comments, improvements and recommendations are welcome.

    NFT preview card component

    1
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. The page looks brilliant. Well done. Your html is well structured, semantic, and easy to read. Your css is well organized and clear. I love that you used pseudo-elements to do the overlay / hover state. It makes for a less cluttered approached compared to how I did it.

    Speaking of the hover state: you could greatly simplify your css by modifying a single line! In the image::after style, replace background: var(--Cyan-200); with

    background: var(--Cyan-200) no-repeat center url('icon-view.svg');

    Now you can remove your image::before styles as well as the reference to the image:hover::before styles! Try it out.

    Again I love what you have done and how neat and tidy your html and css is with the indents. You wouldn't believe how many projects have sloppy code. Anyway, hope this helps and keep on coding!

  • beowulf1958•1,890
    @beowulf1958

    Great job so far. Your html is clean and simple, and your css is well-organized and clear. You were able to center the card on the page and connect to Google fonts. The next step is to work on the responsiveness.

    At desktop (1440px) the container stretches down too far. This is because you have a height of 75vh no matter what the device screen size is. In this case it would be better to set the container height to "auto". Then it will adjust properly to different screen sizes.

    When I try to view the page on my iPhone it is too narrow to read. This is where responsiveness comes in. Add a media query to the css to fix this. This article explains all about it. In this case it would look something like:

    @media (max-width: 400px) {
  .card {
     width: 82vw;
  }
}

    CSS will apply this style only if your device's viewport width is equal to or narrower than 400px; after that it reverts back to 22vw.

    Hope this helps.

    Marked as helpful
  • Jennifer Phan•50
    @jenphan
    What are you most proud of, and what would you do differently next time?

    I am proud of how clean my code turned out.

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

    My biggest challenge was getting the custom bullet points aligned properly. I experimented using flex, ::before pseudo-elements, and counter-increment to achieve consistent line alignment and spacing.

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

    Is there a more accessible way to implement custom list markers? Are there better practices for handling spacing and padding differences?

    Responsive Recipe Page using BEM, Flexbox, and Custom List Styling

    #bem
    1
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. It looks awesome. The page is responsive, the BEM naming is brilliant, and the html is clean and (for the most part) simple. Your styles are well-organized and clear, easy to read, understand and maintain.

    One tiny suggestion: the last row in the table doesn't have a border-bottom in the design. Best way to handle that is to put the border-bottom on the <tr> instead of the <td> and then you can target the last row with tr:last-of-type{ border-bottom: none }

    To answer your question: yes there is a better way to change the list markers in a list. Instead of creating classes for the <li> and the <p> you could use the ::marker pseudo-element. It would look something like this:

    recipe_instructions li::marker { color: var(--clr-headings)}

    This article explains it all. Now you can eliminate the class="recipe__instructions-item" and class="recipe__instruction-text" classes giving the html a simpler look.

    Hope this helps.

  • Jethro08-ma•10
    @Jethro08-ma
    What are you most proud of, and what would you do differently next time?

    Am proud that I was able to complete this challenge even though it was kind of difficult and next time i will read the readme files before starting

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

    I faced a lot of challenges me page wasnt responding and other minor problems and i could solve them by validating and inspecting my code

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

    The project helped me in learning the table tag well and also how to use my div and section tag well

    responsive landing page

    #accessibility#angular-material#axios#ember#backbone
    2
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. It was very brave to pick this as a first challenge; most people start with QR code, which is easier.

    However, the page is not rendering correctly because the styles are not showing up. This is because the path to the stylesheet is incorrect. As @MarziaJalili pointed out, the correct path to the image is in the root folder, and so is the stylesheet

    <link rel="stylesheet" href="./b.css">

    Also, you should always include a more descriptive title in the <head> section; it helps search engines to find your page. Something like "Frontend Mentor | Recipe Page". And make sure to spell correctly, especially in the heading! It's "recipe" -- and in the instructions step one "eggs" not "egs". Details matter. There is a missing space between the colon (:) and In, as well as between "a" and "pinch". There is an unmatched closing div </div> in the preparation section just before the closing ul </ul> that can be removed.

    In the style sheet, there is a lot of redundant code. Once you have declared the font-family and font-weight in the body tag, the cascade will take care of the rest. You do not have to restate these in every section of code. Removing the extra code will significantly reduce the file size and make for a cleaner look that is easier to maintain.

    Hope this helps.

  • beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. Are you aware that your webpage is missing a <title> in the <head> section? Titles are important for search engines to find your page.

    Many on this website struggle with the overlay. I love that you used pseudo-elements to do the overlay. However, there is an easier way.

    .nft-card .image:hover:before {
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    /* background-color: hsla(178, 100%, 50%, 0.519); */
    background: no-repeat hsla(178, 100%, 50%, 0.519) url(./images/icon-view.svg) center;
    cursor: pointer;
    z-index: 9999;
    border-radius: 10px;
}

    Now you can delete all the styles .nft-card .image:hover:after {}

    Did you know the background attributes can be combined in a short-cut background rule. This article explains everything.

    Everything looks great on the page and it is fully responsive. Love the box shadow.

    Hope this helps. Keep on coding!

  • beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. Your html is clean and clear and the styles are easy to understand. The box-shadow is awesome: subtle but effective. You have picked up on the color change on the list bullets and correctly used ::marker. (however you missed that the numbers on the ol are also orange) <ol class="orange-bullets"> Also I like how you used table th:nth-child(2) to target the numbers. I do have a few suggestions.

    First, the image is not showing up due to an incorrect file path. The jpg is in the root folder and you are directing the browser to look in a subfolder called assets. The correct path is <img src="image-omelette.jpeg" alt="Omelette" class="recipe-image"> Second the Nutrition heading is not showing up because the h2 opening tag is missing a bracket. You have <h2 style="color:hsl(14, 45%, 36%) ;" Nutrition></h2> which should be <h2 style="color:hsl(14, 45%, 36%) ;"> Nutrition</h2>

    Next the table does not have a border-bottom in the design. To fix this add a style to the las two th

    <th style="border-bottom:none">Fat</th>
<th style="border-bottom:none">22g</th>

    I also think you should consider giving the body element a background-color to better distinguish the card from the page (maybe Rose 50: hsl(330, 100%, 98%) ?)

    Again, great job and keep on coding!

  • davienjo•70
    @davienjo
    What are you most proud of, and what would you do differently next time?

    at least I still remember how to use tables

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

    I faced challenges with typos, but was able to correct them after doing through my code... I first used dd, dt and dl for the instruction section, but later changed it to ol and li, and it became easier to style. however, I encountered challenges while trying to color my ordered list.

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

    I would like to understand how to color ordered and unordered lists, especially when the list style type color is not the same as text.

    i used tables, div elements, the horizontal rule, tables, and classes

    #cube-css
    2
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. It looks great. I love that you organized your styles and added comments to make it super easy to understand.

    I do have a few suggestions. As @LeyaDiaz mentioned, the solution you are looking for is the ::marker pseudo-element. This article explains it all. Note that the bullet points on the unordered lists match the color of their heading, so you would need to make the style specific.

    .preparation ul li::marker { color: var(--Rose-800); font-weight: bold; }
.Ingredients ul li::marker, ol li::marker  {color: var(--Brown-800); font-weight: bold; }

    You might also notice that the last table row does not have a border-bottom. You can fix that by putting the border-bottom on the table row, not the table data. Then you can subtract the last row only.

    .table tr { border-bottom: 1px solid var(--Stone-150); }
.table tr:last-of-type { border-bottom: none; }

.table td {
  padding: 8px 0;
}

    Hope this helps!

    Marked as helpful
  • Karen•20
    @karenhim
    What are you most proud of, and what would you do differently next time?

    Pixel perfect solution to the task in Figma.

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

    I had to tinker around with flexbox to center the card.

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

    (P.S. Solved and code updated! Thanks @alaa-mekibes and @beowulf1958)

    The barcode PNG from my project URL on GitHub pages appears to be broken, despite the complete files being uploaded. (It ran smoothly locally).

    [26.05.2025]

    QR code solution in CSS using Flexbox (Pixel perfect)

    3
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. It looks great; like you said, pixel perfect.

    The problem with the QR code is the file path: you need a period in front of the first slash. <img src="./images/image-qr-code.png" alt="Frontend-mentor" />

    When I added the leading period it displayed perfectly. Again, it looks great: clean, well organized code with clear and simple styling. Awesome job!

    Marked as helpful
  • P
    Eddie•140
    @WeatherheadOnline
    What are you most proud of, and what would you do differently next time?

    I'm proud of contributing to accessibility by putting the <h1> element (the product's name) first in the HTML file, followed by the category ("perfume"). The two elements appear in the reverse order when rendered on the page, to match the design file; this was achieved by wrapping the two elements in a container div, and setting the container div to display:flex; flex-direction:column-reverse.

    I'm also proud of being detail-oriented and noticing that the provided shopping-cart image was different than the one shown in the design file. I exported a replacement image from the design file, as an .svg file.

    In this challenge, I used flexbox to vertically center-align the two price tags; next time I see a problem like this I'd like to do more research to try to find a different approach, because I rely on flexbox so much already.

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

    The main challenge I came across was getting border-radius to work with background-image.

    I had chosen to use background-image to insert the product image, so that I could use a media query to serve either the desktop or mobile version of the image. (Another option could have been to add an <img> element, and use a script to listen for device type and swap out the src attribute of the <img> as needed. However, I didn't want to risk content-jumping side effects.)

    The problem I found was that when I added border-radius to the product card, it worked fine on the corners adjacent to text, but the corners of the image were not getting rounded.

    I asked a search engine, and found this page: https://floriankempenich.com/background-image-with-rounded-corners. It recommended applying container {overflow:hidden}. I tried this and it solved the problem for me.

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

    I'd love to hear any feedback. In particular, I'm interested in: (1) how to vertically center text without using flexbox; (2) recommendations for how to include the image without using background-image, but while still being able to serve either the desktop or the mobile version of the image, as appropriate.

    Mobile-first product preview card

    1
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. Your page looks awesome and is responsive.

    I love that you included project notes! Gives an insight into your thinking. Very brave. Your markup is clean and clear and well-organized. I love how you took the text-presets from the figma files to do your styling! That makes it clear which elements are similar, and which have differences. Now my comments:

    1. What is wrong with flexbox? Flexbox is brilliant, and a great way to center text and get the spacing correct using gap.

    2. I think the code you are looking for is the <picture> tag with the <source> attribute. It looks like this:

      <div class="product-image" >
    <picture >
      <source media="(max-width: 400px)" srcset="images/image-product-mobile.jpg">
      <img src="images/image-product-desktop.jpg" alt="A bottle of Gabrielle Essence perfume">
    </picture>
  </div>

    This tells the browser to use the mobile image until 400px, then use the desktop image thereafter. No JS needed! This article explains it all.

    Hope this helps. Keep on coding!

    Marked as helpful
  • PolariSystem•10
    @PolariSystem
    What are you most proud of, and what would you do differently next time?

    I started from scratch, barely remembering how to code, and felt completely lost. However, little by little—and being completely honest—with the help of GitHub Copilot, I managed to refresh my memory to the point of understanding how to organize everything and correct issues based on Copilot's feedback.

    I’m proud of how far I’ve come, but I recognize that my code may not be as structured as a professional’s. This is something I’ll improve with experience. Next time, I’d like to rely less on Copilot and strengthen my own skills. For example, the AI helped me get back on my feet when I was completely lost, but now that I’m standing, I want to start walking on my own again and with the comunity support.

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

    The biggest challenges were:

    • Starting from zero: I had almost no coding knowledge and felt overwhelmed.
    • Unstructured approach: My initial code lacked organization.

    How I overcame them:

    • Used GitHub Copilot as a learning tool to refamiliarize myself with syntax and logic.
    • Broke problems into smaller steps and iteratively tested solutions.
    • Embraced trial and error, to identify gaps in my understanding.
    What specific areas of your project would you like help with?

    I’d appreciate guidance on:

    • Writing cleaner, more professional code.
    • Tips to make work more efficient and clean
    • Best practices for project structure and documentation.

    Responsive qr-code-challenge

    2
    beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. It looks amazing. I think it is impressive that you started this project from scratch and you have come so far. I particularly like the way you styled the attribute section. I have a few comments.

    First, the markup is well-ordered. However, best practices requires an H1 tag (to help search engines and screen readers.) Your <b> tag should be an <H1> since this is the title of the component. Next, the text would be better in a <p> tag, as it is a paragraph. These changes will also simplify your styling:

      .text {
  	align-self: stretch;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: flex-start;
  	padding: 0px 16px;
  	gap: 16px;
  }
  .text h1 {
  	line-height: 120%;
  }
  .text p {
  	font-size: 15px;
  	letter-spacing: 0.2px;
  	line-height: 140%;
  	color: #68778d;
  }

    Not everything needs a class name, and .improve-your-front-e and .scan-the-qr are pretty awkward. I noticed a bit of duplication in the styling as well. Trust in the cascade.

    Again, you did an awesome job and will do better with each challenge. You are off to a brilliant start; great use of css variables and media queries. Looking forward to see what you do next.

  • beowulf1958•1,890
    @beowulf1958

    Congratulations on completing this challenge. As @thisisharsh7 said, the markup is clean and semantic, and I like the use of the picture tag.

    In addition to his suggestions you might try:

    .main{  
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 20vh;
    /* center the card on the screen*/
    max-width: 40rem;
    margin: 0 auto;
}

.img{
    /* width: 50vh;
    height: 60vh; */
    max-width: 100%;
    height: auto;
}

.product-content{
    /* margin-left: 30px; */
    height: 500px;
    padding: 20px;
    background-color: white;
}

    this centers the card, gives the content a white background, and makes the two sides equal. To separate the two sides, use padding instead of a margin.

    You might also want to add a hover state to the button and change its color:

    .cart:hover {
    background-color: hsl(158, 36%, 37%);
}

    Keep on coding!