All comments

• 

  takinabradley• 100

  @takinabradley

  Submitted 4 months ago

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

  I liked my organization of colors with CSS variables, using names such as --primary --primary-accent, and --background-accent. Theoretically that should allow me to switch the color theme easily if needed.

  I focused mostly on the style on this one. If I were to do it more seriously, I'd probably make this component consume and render recipe data to me more reusable.

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

  I hadn't touched tables in a while, and I had to research how to write them again. I also encountered weird behavior with padding on table rows- and I found through research I had to apply padding to / elements instead.

  Styling the table was interesting too, and it was fun to use the :not() operator to exclude a bottom border from being applied to the last table.

  I also had to research how to add padding between text content in a `` element and it's bullet. Figured out I could just using padding for that.

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

  I researched how to center the bullet points vertically with long text, but couldn't exactly figure it out. Admittedly, my research was haphazard and I kind of just tried stuff.

  I could have made custom bullet points, but I wasn't exactly feeling that. If there's a way to do it without creating custom bullet points, a hint would be nice!

  

  Recipe page with React

  1

  40

  

  Florian Frosch• 60

  @ffrosch

  Posted 4 months ago

  Good job on this challenge!

  I think there is no way to center the bullet points, because this element only supports a very small subset of css properties.

  I like your use of the :not() operator. I had totally forgotten about this one.

  Styling tables can be tricky. One possibility to get a better alignment for the right column could be to remove the display: flex from tr and use this for th and td:

  th {
    text-align: left;
    padding-left: 2em;
  }
  td {
    text-align: left;
    padding-right: 2em;
  }
  

  0
• 

  Wilfreed Audouin• 40

  @WAudouin

  Submitted 4 months ago

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

  Proud of the short time it took me to complete this challenge

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

  Nothing really complicated

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

  N/A

  

  Social links profile (React / TS / SCSS)

  1

  30

  

  Florian Frosch• 60

  @ffrosch

  Posted 4 months ago

  Nice work!

  One thing you could consider for your next project is to use semantic html elements like 'main' and 'section' :-)

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Wilfreed Audouin• 40

  @WAudouin

  Submitted 4 months ago

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

  The component is responsive with the first conception/development.

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

  N/A

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

  Again, deployement. I don't know which solutions to use. I try something different every challenge

  

  Blog Card Preview (React TS + SCSS)

  1

  30

  

  Florian Frosch• 60

  @ffrosch

  Posted 4 months ago

  Hi Wilfreed,

  your solution looks really nice. I like the organic movement of both card and shadow when hovering!

  Unfortunately the link to your repo did not work, so I didn't get a close look at your code.

  For the challenges from frontendmentor I really like to use Github pages for deployment.

  • create a new repository for every challenge
  • push your code
  • set up Github Pages. It looks like you worked with Vite, in this case you have to set up a custom workflow (just copy & paste) as described here

  Enjoy the next steps of your journey!

  0

  This comment has received 2 repliesShow
• 

  David Ochoa• 290

  @davidochoadev

  Submitted 5 months ago

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

  my primary goal is to gain more experience with Next.js. So far, I'm proud to say that everything has been going smoothly without any major obstacles. I could definitely have paid more attention to best practices and syntax.

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

  I haven't encountered any technical difficulties.

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

  I would love some advice on structure, SEO, and especially accessibility. I know I rushed through the task. It's basically all new to me and I don't really know what the right thing to do is. I'm relying on you for any technical advice 🙏🏻

  

  QR Code Component - Next.js

  1

  50

  

  Florian Frosch• 60

  @ffrosch

  Posted 4 months ago

  Great job! Here are a few small things I noticed that might also be interesting for you.

  design:

  • layout breaks on viewports widths below 362px; although probalby nobody uses a screen this small, it might indicate some general problems with your layout settings and it could be a problem in cases where user with a small screen have a huge standard font size.
  • font used is "Inter" although "Outfit" is loaded in layout.tsx

  accessibility:

  • footer uses "div" instead of "footer"
  • footer should be the last element in your html structure, but it comes before the qr-code component -> bad for keyboard navigation, screenreaders, etc.

  0