All comments

• 

  AHAMED NAJAH• 220

  @najahaja

  Submitted 28 days ago

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

  I am very interested in creating two different screen layouts within the same CSS file. I will use media queries to apply different hover styles and plan to experiment with new techniques shortly.

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

  I am facing challenges with implementing different hover effects for various options, and it has taken a lot of time. I have used Google to find solutions.

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

  I'm having trouble with hover effects not applying correctly on my buttons and layout shifting on larger screens. I’ve included the relevant CSS and HTML. Can you help identify and fix these issues?

  

  Elegant User Profile Display with Hover Animations

  1

  21

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted 6 days ago

  Hi there, I found the layout shifting to be the most difficult part of this challenge. I found that the best solution was to have the popup component set to absolute so that it would have relative positioning to the parent, and not take up any real estate on the screen (ie. no layout shifting). Here is an article about this: https://www.geeksforgeeks.org/how-to-set-position-absolute-but-relative-to-parent-in-css/

  I ended up creating a component and changing its document location and class names to take advantage of the appropriate parent. I based the mobile solution within the card component and the desktop solution within the button component. You can take a look at my solution here: https://github.com/chelsea-here/article-preview-component. hope this helps!

  0
• 

  Pattaraporn Tulathum• 200

  @rainof

  Submitted about 2 months ago

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

  I’m really proud of finishing the project despite the challenges. Even though the result isn't exactly as I envisioned, it was a significant leap in complexity compared to previous tasks, and I’m pleased with how I handled the issues. Next time, I’ll focus more on planning and organizing the HTML layout from the start. This should help me avoid making so many changes later and keep the code more organized and manageable.

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

  I ran into challenges mainly with the mobile-first approach and HTML structure. I didn’t plan the HTML layout as thoroughly as I should have, which led to frequent adjustments and made the code a bit messy during work for tablet and desktop design. To address these issues, I kept making tweaks and learned from each problem as it came up. Next time, I’ll focus more on careful planning and structuring from the start to make things run more smoothly and keep the code cleaner.

  

  Meet landing page using React, Flexbox, and CSS grid

  1

  10

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted 17 days ago

  Hi there, I agree with your assessment. I think separating out certain items as component files would simplify the html drastically and let you focus on the complex css requirements. I appreciate your creating variables for the inputs, but for a project like this, it might be an over-optimization and taken time away from your focus on the various responsive design aspects. There are a few alignment and padding differences, but as a whole the site looks good and is responsive to screen changes. Don't forget to update styling for focus states. That said, all in all good job!

  0
• 

  Vladimir Gatara• 250

  @vgarmy

  Submitted 4 months ago

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

  That i made the gridd cc work out fine. Fisrt time i use the css grid system,

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

  Getting it all in place. Reading and learning...

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

  Noe at this point.

  

  Testimonials grid section in react

  1

  10

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted 30 days ago

  Hi there, the code looks really clean. I'm just getting comfortable with grid css myself and its interesting to see how we did things a bit differently, but both methods work. I love how you used the following lines in particular: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); I was having a hard time trying to figure out how to keep the system flexible.

  Cheers, keep up the good work!

  0
• 

  Richard Kpehor• 100

  @Richardedem6

  Submitted about 2 months ago

  

  Four card section master challenge (Sass)

  1

  00

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted about 1 month ago

  Hi there, it looks like you are having issues with sizing. Try to limit your use of sizing based on pixels and instead consider using rem or em, which are related to size of text. In addition, the clamp function allows you to specify max, min and preferred sizes for all kinds of styling such as padding and font size. Using these methods will allow you to create a more fluid and responsive design.

  Marked as helpful

  0
• 

  Pattaraporn Tulathum• 200

  @rainof

  Submitted about 2 months ago

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

  I’m proud of handling more complex elements and improving daily. I’ve learned to use a mobile-first approach and SCSS for responsive design. Next time, I’d focus on optimizing performance and exploring advanced techniques.

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

  I struggled with responsive design but overcame it by learning a mobile-first approach and using SCSS to adapt images to different screen sizes.

  

  Product preview card using React, SASS, Media Queries, and Flex

  1

  30

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted about 1 month ago

  I love how clean your code is! It gave me a few ideas. It looks like the design didn't quite translate between mobile and desktop - this is apparent in the snapshot as I'm sure you noticed. If you look at the figma file, you'll find the container size and gap differences for the card laid out. The container is quite a bit larger than what you have shown and spacing should adjust accordingly. Cheers!

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Michel Ribbens• 120

  @AmanoLX

  Submitted 4 months ago

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

  First Frontend Mentor project done. Build with React. Not sure if I can edit this later, just want to test out if all works.

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

  Deploying this lol. And not sure how to add a screenshot in the README file.

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

  Semantic HTML, good structure overall.

  

  Recipe Page build with React

  1

  20

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted about 2 months ago

  Hi there, here's my feedback.

  • First, I love how simple your code is to read. I'm learning from you here!
  • consider using <ol> for lists that need to have a specific order. I would assume you would want the cooking times to be ordered for consistency.
  • instead of using <article>, consider using section. You can find more information on HTML elements here https://developer.mozilla.org/en-US/docs/Web/HTML/Element

  -there are a couple of styling issues that did not match the design (title font weight and bold red numbering for the instructions list.). you can use marker to define styling for the latter.

  Cheers!

  0
• 

  P

  Hadeed Ahmad• 150

  @hadeedji

  Submitted 3 months ago

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

  I would love comments on html semantics.

  

  Social Links Profile

  1

  50

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted 3 months ago

  Hi there, it looks like you are missing focus states. You can add it in a very similar manner to how you added hover states in tailwind.

  < a className="focus:bg-green focus:text-gray">text here</a>
  

  Regarding your html the only thing I'm not clear on is why you would add an div below your body and above your main element. Otherwise, looks good to me. Cheers!

  1

  This comment has received 1 replyShow
• 

  Rishi Raijung• 310

  @riishi101

  Submitted 8 months ago

  

  Responsive blog preview card with flexbox

  1

  50

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted 3 months ago

  Hi there, here are a few things i noticed.

  • please review colors and font in the style guide they do not match your solution.
  • the card should be centered vertically. Consider using align items with flex.
  • it looks like your hover effect is on the wrong component
  • you are missing the 24px left and right margins for mobile screen.
  • padding is inconsistent around image.
  • readme file is blank so not sure how to help you.

  Best of luck!

  0
• 

  P

  MJDFreelance• 10

  @MJDFreelance

  Submitted 3 months ago

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

  This was quite a basic challenge for me so was not much of a problem in terms of HTML/css. I didn't do anything on the accessibility side, I want to start focussing on this.

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

  From a HTML/css side, there were no challenges. Deploying Next and Storybook both to Vercel from the same repo was a bit of a nightmare since I'm new to Vercel. In the end (and after some time spent searching docs and consulting with Stack Overflow and ChatGPT) I ended up ditching the IaC approach and setup separate projects, configured via the Vercel console to serve different build types.

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

  Any and all comments would be welcome. Any advice or recommendations on improving the accessibility of the component would be especially good.

  

  QR Code Next Tailwind Storybook

  1

  50

  

  P

  chelsea-here• 140

  @chelsea-here

  Posted 3 months ago

  Hi there, I enjoyed comparing our solutions to this problem. I've learned from your styling solutions, like using gap. I also appreciate your separation of the code for the QR card into its own component. My only suggestion would be to try incorporating Next.js Image Component.

  Here is what that code looked like for me:

            <Image
              className="rounded-lg"
              src="/image-qr-code.png"
              alt="qr code"
              width={288}
              height={288}
              priority
            />
  

  Cheers!

  Chelsea

  0