beowulf1958

Latest comments

• 

  Karen•20

  @karenhim

  Submitted 2 days ago

  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

  30
  

  beowulf1958•1,810

  @beowulf1958

  Posted 2 days ago

  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!

  1

  Marked as helpful
• 

  P

  WeatherheadOnline•120

  @WeatherheadOnline

  Submitted 8 days ago

  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

  41
  

  beowulf1958•1,810

  @beowulf1958

  Posted 8 days ago

  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!

  1

  Marked as helpful
• 

  PolariSystem•10

  @PolariSystem

  Submitted 9 days ago

  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

  10
  

  beowulf1958•1,810

  @beowulf1958

  Posted 9 days ago

  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.

  0
• 

  asmaa505•10

  @asmaa505

  Submitted 10 days ago

  

  picture tag

  2

  40
  

  beowulf1958•1,810

  @beowulf1958

  Posted 10 days ago

  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!

  0
• 

  emwangi-dev-98•30

  @emwangi-dev-98

  Submitted 12 days ago

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

  I'm most proud of how the blog preview post card project came together visually and functionally.I was able to take a UI concept and bring it to life using html and css only.

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

  One of the main challenge i faced was getting the layout to be responsive across different screens. To overcome this i revisited the CSS course and implemented flexbox

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

  Responsiveness using media Queries and grid layout

  

  Blog-preview-card

  #pure-css

  1

  00
  

  beowulf1958•1,810

  @beowulf1958

  Posted 12 days ago

  Congratulations on completing this challenge. It looks good so far.

  I do have a suggestion. The image is bleeding out of the card and looks a little awkward. To fix that add some style to the <img>

  img {
      display: block;
      width: 100%;
      border-radius: 10px;
  }
  

  Also you could give a hover state to the <h2> and change its color to yellow.

  h2:hover { color: hsl(47, 88%, 63%); }

  Hope this helps.

  0

  Marked as helpful
• 

  NightFury-dev7•30

  @NightFury-dev7

  Submitted 13 days ago

  

  Order Summary card using HTML & CSS

  1

  00
  

  beowulf1958•1,810

  @beowulf1958

  Posted 13 days ago

  Congratulations on completing this challenge. It looks good so far.

  I have a few suggestions to improve. First, the file path to the images is wrong and the images are not showing up. The correct path is <img src="illustration-hero.svg" alt="illustration-hero"> and <img src="icon-music.svg" alt="icon-music">.

  I think there is some confusion on the background image. You have in inside the .card <div> right on top of the hero image. It is meant to go behind the card. This article explains all about background images. So to fix this, remove the pattern-background-desktop.svg from the html and modify the stylesheet as follows:

  body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #e0e8ff;
      background-image: url(pattern-background-desktop.svg); /*adds the image behind the card*/
      background-repeat: no-repeat; /*use image only once*/
      background-size: 100% 50%; /*stretches the image 100% wide and 50% height*/ 
  }
  

  Hope this helps. Keep on coding!

  1

  Marked as helpful