All comments

• 

  EmicJoykiller•120

  @EmicJoykillerSubmitted 24 days ago

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

  I'm most proud of how the component turned out visually and how smoothly it adapts to different screen sizes. Creating a visually engaging, responsive design with CSS variables and gradients was both rewarding and challenging, and I’m happy with how cohesive and intuitive the interface feels.

  If I were to do something differently next time, I would approach component styling with styled-components or another CSS-in-JS solution to keep styling fully modular and encapsulated within each component. I would also consider enhancing the accessibility of the project, focusing on keyboard navigation and ARIA roles to ensure a more inclusive user experience.

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

  A significant challenge was handling the file structure for SVG assets in the React environment, which required the assets folder to be placed directly inside the src directory to render correctly. Initially, this setup was causing errors, but restructuring the folder hierarchy resolved the issue.

  Another challenge was designing a layout that’s visually appealing while also easy to navigate on mobile devices. To tackle this, I spent time researching responsive design patterns and used media queries extensively to ensure the UI looked polished on different devices. This also helped reinforce my understanding of CSS Flexbox and grid layouts.

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

  Optimizing Performance for SVG Rendering: I’d love insights on how to best handle multiple SVG icons in React. Are there strategies to improve load times or alternatives to the approach I used?

  Suggestions for Accessibility Enhancements: Accessibility is an area I want to improve in my work. Any feedback on making this component more accessible, especially for screen readers, would be appreciated.

  Design and Usability Feedback: Lastly, I’d welcome suggestions on improving the UI design or usability features to make the component more intuitive and user-friendly for all users.

  

  Results summary component

  1

  10
  

  Leon Potgieter•290

  @leonp84Posted 24 days ago

  Hi, great design. An option for SVG or images with react is to place the files directly in the public folder (which is in the project root folder) during development. In your app.jsx - or wherever your main code is - you can then refrence them directly by URL path.

  So if image.jpg is in the public folder you can simply use:

  <img src="/image.jpg" alt="description" />

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  shalri•620

  @shalriSubmitted 30 days ago

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

  I used NextJS for this challenge. Since I plan to integrate Frontend Mentor into my study routine, I might as well play around with NextJS and React alongside the challenges.

  Implementing this challenge with NextJS made it more interesting. It gave me a broader scope for learning.

  I leaned heavily on Charts.js on this challenge. It has some nice built-in functionality and is quite easy to implement once you set it up. Another tool on the tool belt. I will be playing with it more often.

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

  This challenge also showed the importance of a .fig file. I spent most of the time pixel-pushing to set the dimensions, spacing, and layout right. I am proud of the results since I was only eyeballing it.

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

  I'm all good... Just plowing through the free challenges for practice. Thank you

  

  Expenses chart component - NextJS, TailwindCSS, ChartJS

  2

  10
  

  Leon Potgieter•290

  @leonp84Posted 24 days ago

  Very nice! Chart.js sounds interesting, I'll look into it.

  0

  This comment has received 1 replyShow
• 

  P

  PhilippeItsMe•110

  @PhilippeItsMeSubmitted 7 months ago

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

  My first challenge that is really completed.

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

  First time that i build a table.

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

  The order list... the number are not the wright font... : (

  

  Recipe Challenge

  1

  40
  

  Leon Potgieter•290

  @leonp84Posted 7 months ago

  Hi Philipp, your design looks great. The numbered lists just needs to be bolded, as far as I can see. When I did this challenge, I learned how to targer the list markers specifically. So if you add the below, it should work...

  li::marker { font-weight: bold; }

  0
• 

  Omowunmi Kamiludeen•120

  @OmowunmikamilSubmitted 7 months ago

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

  I'm most proud to have seamlessly completed the desktop and mobile view of the Recipe Page challenge. I'll use Semantic HTML5 instead of Div on my next web challenge!

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

  I faced a significant challenge while attempting to make my webpage responsive. Initially, I had wrapped the entire page in a column, which caused some issues. After some investigation, I realized that turning off the flex-direction on the page solved the problem, and everything worked out perfectly fine.

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

  For this challenge, I wrapped my entire page in a div container. If I were to use semantic HTML, how would I style it?

  

  Resposive mobile using CSS flex tools

  1

  50
  

  Leon Potgieter•290

  @leonp84Posted 7 months ago

  Hi, the design looks great. For semantic HTML I would use <main> as a tag for the page wrapper.

  So <main class="page"> instead of <div class="page">

  0

  This comment has received 1 replyShow
• 

  MrDull•20

  @MrDullSubmitted 7 months ago

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

  I'm just glad I could do it in the first place. Mostly. What I would do differently next time is to figure out the order of steps first. Write the most basic few codes, copy the text, separate the text, etc. Just slowly building it up as opposed to being all over the place a bit and jumping back and forth.

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

  It's a first time for me so pretty much everything was a challenge in one way or an other but determination and looking up stuff (and some tears) slowly helped me get through.

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

  One thing I sure missed is that the numbers in the numbered list have a different style compared to the rest of the text. I have found examples of how it could be done but they seemed way too complicated and I didn't really understand them. To me it seems like everything else is mostly fine but I'm curious if there are any solutions to this.

  

  Recipe page challenge, 1st try

  1

  40
  

  Leon Potgieter•290

  @leonp84Posted 7 months ago

  Looks very good. I also struggled quite a bit with this one. They seem easy at first glance, but a thousand little things pop up once you start the design :)

  To colour the number of the numbered lists:

  ol > li::marker { color: hsl(14, 45%, 36%); font-weight: bold; }

  And to create distance between the numbers and the text:

  ol > li { padding: 0 20px; }

  Marked as helpful

  1
• 

  KENDRA•50

  @KNWardSubmitted 7 months ago

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

  This is the quickest I was able to complete a project/challenge. It was very simple and straight to the point.

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

  I did not encounter any issues. However, when I got to my live site, the image does not show, just the alt text. It is upsetting because I know it works.

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

  None.

  

  Social Links Profile Card, using HTML, CSS and Flexbox

  2

  40
  

  Leon Potgieter•290

  @leonp84Posted 7 months ago

  Hi Kendra, looks very nice. Your profile photo is not displaying because the wrong file path is being called in index.html

  On line 13: <img src="/assets/images/avatar-jessica.jpeg" alt="Photo of Jessica Randall">

  I think adding a . before /assets should do the trick.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  letsGetToCode•80

  @letsGetToCodeSubmitted 7 months ago

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

  I would like some suggestions, please.

  • Is that a good way to solve the challenge? Is there a better way to code it?
  • I had some struggle to reproduce sizes of the original project. Any advice ?

  

  QR Code Component

  1

  20
  

  Leon Potgieter•290

  @leonp84Posted 7 months ago

  Hey, this looks great. You even added a box shadow, which looks nice. Code looks clean.

  I had some struggle to reproduce sizes of the original project. Any advice ?

  People here often mention the Pixel Perfect Chrome extension to help the front end builds look as close to the original as possible. Maybe that'll help, it has helped me quite a bit.

  1

  This comment has received 1 replyShow
• 

  Wanjiru-M•60

  @Wanjiru-MSubmitted 9 months ago

  Issue Description: I'm experiencing an issue with applying border radius to a div in my project. When I add the border radius, it affects all sections of the container, causing unexpected curves in the center. How can I apply border radius to only specific sections of the div while keeping other sections unaffected? CSS Code: Here's the CSS code I'm using to apply the border radius to my div container: .container { border-radius: 10px; } Desired Outcome: My goal is to have rounded corners on all four corners.

  

  Recipe Page Solution

  2

  50
  

  Leon Potgieter•290

  @leonp84Posted 9 months ago

  Hi Wanjiru, try nesting your .container divs within a larger outer div. Give the outer div rounded corners and leave the inner ones alone (except for maybe adjusting the size, making it slighly smaller than the outer div, so that the rounded corners will be visible).

  <div class="rounded-corner-container">

    <div class="container">
    </div>
    <div class="container">
    </div>
  

  </div>

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  johnny•40

  @johnny15qSubmitted 9 months ago

  Wasn't sure how to get the spacing between the list items bullet points and the actual text itself. As well as getting the list item text to wrap on the same line keeping everything uniform and inline.

  

  Recipe-page

  1

  20
  

  Leon Potgieter•290

  @leonp84Posted 9 months ago

  Hi Johnny, you can get spacing between the list marker (bullet) and the text by styling the list items itself:

  ul > li { padding-left: 20px; }

  As for keeping the text inline as it wraps, the styling below, from your CSS file, prevents that.

  ul, ol { list-style-position: inside; }

  Remove that, or change it to list-style-position: outside;. I think that should do the trick.

  1