I'd appreciate any feedback. If there are any best practices I may have overlooked, I’d love to hear suggestions for improvement.
Any feedback is welcome.
I completed this challenge using AI. I used Cursor AI in Agent mode. The AI helped me with the basic, boring parts of the challenge. This allowed me to concentrate on the JavaScript.
What specific areas of your project would you like help with?Any suggestions are welcome! 😊
Good job at using Cursor AI
Hey
What challenges did you encounter, and how did you overcome them?With learning exercises, I often find it's easy to get tempted to add quick features, or test out new animations/syntax without putting in the proper planning or taking a step back and looking at the bigger picture. I found myself doing this with the project and adding/overwriting code and losing track of the scope of the project.
I found that implementing animations without proper planning makes it very difficult to track the state of items, repeated styles, and makes keeping a clean codebase much more difficult.
In the future, if I am doing any animation beyond a simple transition, I will create a diagram or storyboard it before.
What specific areas of your project would you like help with?I was mostly focused on the HTML/CSS but I feel like the logic in the newsletter form class could be split up and abstracted in a better way, such as creating new functions, sub-classes, etc. At present, there is a lot going on here, and it feels like I am putting everything in main.
Still matching the design and implementing some localState, if anyone spots any differences would appreciate the feedback/advice.
All feedback welcome.
Next time I won't leave the most difficult component to figure out at the end and I'll do a paper prototype first. I definitely underestimated things.
What challenges did you encounter, and how did you overcome them?Positioning the popup was a small nightmare. Positioning the footer for the mobile view was also a nightmare. I had to take a step back and start fresh in a new file with a stripped down structure to figure out the basics of what I needed to do.
Superb work
The solution looks great overall. It follows best practices for semantic HTML, accessibility and responsiveness. The layout appears well-designed across different screen sizes. However, please update the link as needed.
Feedback on Your Solution: Your implementation is well-structured and follows a mobile-first approach, which is a great practice.
(min-width: 1440px) might not be displaying as expected on laptops and tablets, as the media query only applies to very large screens. Try (min-width: 768px).<img src="./images/icon-supervisor.svg" alt="Supervisor icon">Fantastic work on this project! You’ve done an outstanding job ensuring that your solution is both visually appealing. Your implementation perfectly aligns with the original design while maintaining best practices.
