I improve my Regular expression
What challenges did you encounter, and how did you overcome them?To make different Image for mobile and desktop I use picture tag and srcset attribute
What specific areas of your project would you like help with?Nothing for moment
Hi there, I only noticed a couple of things. One is kind of big.. the solution does not appear to be responsive to screen size, specifically for smaller screens like mobile. The other smaller item was that the validation warning does not update once you've corrected your input. The validation warning was still apparent and I was able to submit and get the success modal. If you update your "keyup" listener to include validation and styling, rather than just your submit button it should resolve this. Example below:
email.addEventListener("keyup", function (e) {
if (validateEmailRegex(e.target.value))
) {
input.classList.add("valid")
} else {
input.classList.add("invalid")}
});
Other than that, looks good and your button transition is super fun. cheers!
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?
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!
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.
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!
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.
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!
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.
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.
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!
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.
Hi there, here's my feedback.
-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!
I would love comments on html semantics.
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!
Hi there, here are a few things i noticed.
Best of luck!
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.
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