Submitted about 1 month ago

Base Apparel coming soon page - HTML, CSS and JavaScript

José Alfonzo•370

@JoseAlfonzo92

A solution to the Base Apparel coming soon page challenge

Preview Code

Solution retrospective

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

I'm proud of how it looks and even more so because it's my 25th project completed! I'm really happy to have made it this far. Next, I'd like to try something different from plain CSS, like SCSS, Bootstrap, or another framework to explore new ways of styling.

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

I did run into a small challenge, nothing too difficult, but I accidentally used the same image twice, which caused some layout misalignment. Once I spotted it, it was a quick fix, but it reminded me how small oversights can affect the whole design.

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

I’d like some guidance on whether I should stick strictly to the widths from the style guide (375px for mobile and 1440px for desktop), or if it’s better to adjust things slightly to improve responsiveness and overall visual balance across more screen sizes.

Code

Please log in to post a comment

Community feedback

haquanq•2,015
@haquanq
Posted about 1 month ago
I think responsiveness should be fluid if it can, meaning avoid writing hard-coded @media and leverage behaviors of flex, grid and `clamp(), calc(), min(), max(),...

To me personally i would not just stick to a certain breakpoints but i would predict the expected behavior of elements when user resize the viewport such that i can structure the HTML for easier responsiveness control.
Marked as helpful
Marzia Jalili•9,650
@MarziaJalili
Posted about 1 month ago
Flawlessly written! 🔥

🌟 A tiny lil suggesteenoo?

🤔 Wouldn't it be better to get rid of that error states as soon as the input value became valid?

✅ It's not rocket science to implement this feature, buddy. We could listen for every change in the input using the .input event and remove the states accordingly.

✅ The code below will serve us the mission perfectly:
```
emailInput('input', () => {
  if(emailRegex.test(email)) {
    emailInput.classList.remove('error');
    errorIcon.style.display = 'none';
  }
}) 
```
Give it a go — it will definitely click! 👊😎
Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord