@emmalanza
Latest solutions
WEBSITE - Room Homepage
#tailwind-css#viteSubmitted 6 days agofeel free to comment and bookmark the solution
WEB APP - Age calculator
#tailwind-css#typescript#vite#accessibilitySubmitted 13 days agofeel free to comment
Latest comments
- @juliengDev
Hi Emma :)
First off, I want to say you've done an excellent job implementing this responsive homepage! Your mobile-first approach is clear, and the slider functionality works beautifully.
Helpful Suggestions for Growth
Image Handling (Great Opportunity to Level Up!) You're already doing well with the image imports, but since you're using Astro, there's a really powerful feature you might love! Astro has an amazing Image API that can automatically optimize your images for better performance.
Instead of:
import hero1M from "../assets/images/mobile-image-hero-1.jpg";
You could use
import { Image } from 'astro:assets'; import hero1M from "../assets/images/mobile-image-hero-1.jpg";
<Image src={hero1M} alt="Hero image" widths={[400, 800, 1200]} formats={['avif', 'webp', 'jpeg']} />
This would:
Automatically generate optimized versions
Serve modern formats like WebP
Create responsive sizes
All while keeping your code just as clean!
For projects with many images, this can make a huge performance difference. The Astro docs have great examples to help you get started with this.
Tailwind CSS I noticed you've got some duplicate styles between the mobile and desktop navigation links. This is completely understandable - we all do this when we're focusing on getting the layout right first!
Here's a suggestion that might save you some time:
// Define common link styles once const linkStyles = "font-semibold hover:underline underline-offset-6";
// Then use them consistently <a href="#home" class={
text-white ${linkStyles}}>home</a> <a href="#home" class={text-black ${linkStyles}}>home</a>Or even better in Astro, you could create a reusable NavLink component that handles all the common styles. This would make your code:
Easier to maintain
More consistent
Simpler to update globally
You're already doing great with Tailwind - this would just take your skills to the next level!
I hope you found these suggestions useful for improving your project and future Frontend Mentor challenges. Keep Up the Excellent Work!
- @LanceLiang2011@juliengDev
Nice job with the animations — they add a really smooth touch! Just a few things to watch out for on mobile:
- The menu is not taking up the entire viewport height, which doesn’t match the original design.
- On smaller screens, the “See All” link stretches across the full width, rather than staying compact as intended.
- For the navigation links, the hover underline effect is working, but it shifts slightly upward — it creates a small misalignment.
Other than that, congrats on the project — great work overall!
- @AqsaRani22What are you most proud of, and what would you do differently next time?
good
What challenges did you encounter, and how did you overcome them?all feedback is good
What specific areas of your project would you like help with?all feedback is good
@juliengDevHi @AqsaRani22 :)
It looks like you updated the wrong project here, I can't see the NFT preview card.
You might check again and edit the project I think.
Have a good day
- P@tonyiboy@juliengDev
Hi @tonyiboy,
Great job overall on the project — I can see the effort you put into handling the responsive layout, especially with the different background images, which isn’t always easy to manage. Well done!
Just a couple of points I noticed during testing: • On the mobile version, the error visual feedback on the email input is broken: the red border seems to wrap both the input and the submit button, instead of just the input field. • Still on mobile, while the background image scales responsively as expected, the white background on the body makes the overall visual feel a bit off in terms of UI — maybe a slight color adjustment or blend could help unify the design.
Again, congrats — the responsive handling and structure are solid. Keep up the great work!
Best, Julien
- @mlopezlWhat are you most proud of, and what would you do differently next time?
I’m proud of completing the challenge and making it look close to the original design.
What challenges did you encounter, and how did you overcome them?No big challenges this time. Feeling more confident with JavaScript, but always open to tips on how to get better!
What specific areas of your project would you like help with?Always open to feedback and suggestions!
@juliengDevHi @mlopezl :),
Here are a few suggestions to improve your code and make it more robust and secure:
⸻
✅ 1. Use Regex for Input Validation
Currently, the code only checks if the field is empty. For stronger control and front-end protection, it’s better to validate the format of the email using a regular expression, like this:
const emailRegex = /^[^\s@]+@[^\s@]+.[^\s@]+$/; if (!emailRegex.test(emailInput.value.trim())) { // Show error }
This ensures users don’t submit malformed or invalid email addresses.
⸻
✅ 2. Avoid Inline Styling in JavaScript
Instead of doing this:
emailInput.style.margin = '0px';
Prefer toggling a class, like:
emailInput.classList.add('no-margin');
This separates concerns between logic and presentation and makes your code easier to maintain.
⸻
✅ 3. Improve Error Handling Structure
Instead of toggling hard-coded classes like hide, consider using a consistent naming convention like:
.is-invalid { border-color: red; }
.error-text { display: none; }
.error-text.active { display: block; }
Then in your JS, toggle .active based on validation.
⸻
✅ 4. Avoid Manual form.submit() After preventDefault()
If you’re using event.preventDefault(), it’s better to handle submission with JS entirely (e.g., with fetch() or showing a confirmation message). Manually calling form.submit() can lead to unintended behavior.
⸻
🙌 Keep It Up!
You’re on the right path! Front-end validation is an essential part of user experience and security. Keep exploring best practices and refining your code — every improvement matters and builds your confidence as a developer.
You’re doing great — keep pushing forward! 🚀
Marked as helpful - @CodingWithJiroWhat are you most proud of, and what would you do differently next time?
I'm proud that I can create, document, and deploy simple projects faster now.
What challenges did you encounter, and how did you overcome them?Of course, coding from only a JPG design image is always a challenge but I'm getting the hang of it now and learned some tricks with PerfectPixel.
One challenge I did not expect was with the shadow of the card. I was not sure if I was to use multiple
What specific areas of your project would you like help with?box-shadowor useoutlinewithoutline-offsetbut I think I managed to pull it off with just shadows (I think).Up until this point I've been using BEM as my style of coding for CSS. What I'm not sure is if my code is really classified as pure BEM.
I read a week ago that some developers use BEM but is not fully loyal to it. They adapted the style but not applied in some elements.
I want to know if mine is good enough or close to being called BEM-ish. If it is not, I want to know how I can upgrade my coding style even more.
Best practices is always welcome!
@juliengDevGreat job on your project! The semantics are really well respected and you’ve done a good job considering accessibility. However, I noticed an issue with the behavior of the active state. If you take a closer look at the prototype in the mockup, the title and the creator’s name are supposed to change style on mouse enter over the card image. This behavior doesn’t seem to be implemented correctly in your solution. Aside from that, everything else is very solid—congratulations!
