@Geo-Bold
@ChristianKaycee
Submitted
What are you most proud of, and what would you do differently next time?
I learnt how to create a toggle switch here
What challenges did you encounter, and how did you overcome them?
I had issue with the price updating when I toggle yearly
What specific areas of your project would you like help with?
The final price has an issue whenever I toggle yearly
Hi David,
Congratulations for submitting this challenge!
After interacting with your UI, I discovered that the section steps container overflows after the form has been submitted and the user clicks on one of the previous steps. Some possible solutions include checking the container margin after submission or even prevent the user from accessing these steps after the form has been submitted.
Hope this helps,
-Geo
@GabrielRodrigo10
Submitted
What specific areas of your project would you like help with?
The images didn't load when I tried using vercel or github pages. I also had difficulties with the active stats when the user hover above the image, it worked in very specific resolutions, but is not responsive as it could be.
Hi Gabriel,
Congratulations for submiting a solution!
The reason your images aren't being loaded is because of invalid file paths. A file path tells the browser where to retreive the asset you wish to load and this can be done in one of two ways. If you want to load your images relative to the root of your project, you can use the following format:
/images/icon-view.svg
The first "/" represents your root directory which in your case is the "nft-preview-card-component-main" project directory. Another method is to create a file path that is relative to the file that is attempting to load the asset. In this case you can use "./" to reference the parent directory or use "../" to move up a directory. Using this format, you could use the following:
./images/icon-view.svg
This can be confusing when you first start using it, but some practice and LTW can help alleiviate these growing pains.
Hope this helps,
Geo
What are you most proud of, and what would you do differently next time?
I am most proud of my use of JavaScript form validation in this project. I had to review several things and learn even more.
What challenges did you encounter, and how did you overcome them?
The challenge that I encountered was learning and applying JS form validation. I consulted several online resources especially MDN Docs.
What specific areas of your project would you like help with?
Three Quick Areas:
Hi Todd,
Congratulations for completing this challenge!
To answer your first question, you should keep in mind that a "rem" is simply a root defined "em" unit and will not change unless the root font size is changed. Think of them as substituting any fixed unit of measurement inside a variable; their values only change if you redefine the root font size. Your use of "rem" is fine, but you should be aware that you can use pixels for precision, "em" units for component-based scaling, percentages for responsive layouts, and the "vw/vh" for viewport based design.
As for your second question, your use of the defualt browser form validation is sufficient for this project. That being said, it is only a basic level of validation and cannot be relied on to validate all possible valid email formats according to the full specification of email addresses. For example, the following email addresses are considered valid:
For more comprehensive client side authentication it may be useful to look at regex expressions, althought this is just a mere bandaid compared to proper server side authentication with email verification.
Well done and I hope this helps!
Geo
Marked as helpful
@Carson-Haskell
Submitted
What are you most proud of, and what would you do differently next time?
Implementing the Figma designs precisely, as I'm just learning how to use it.
What challenges did you encounter, and how did you overcome them?
HTML/CSS is still pretty straightforward for me; mainly it's just working with Figma and implementing the designs.
What specific areas of your project would you like help with?
I could not figure out how to dynamically change font-size without using media queries. I normally use TailwindCSS, which makes something like that a piece of cake. Couldn't figure out how (and I don't know why you would even do it without media queries) so I just ended up using media queries. Would be curious to hear the solution though!
Hi Carson,
First let me say well done with your implementation. The solutions looks very similar to the design file. To answer your question about variable fonts, you should look into using the clamp() function. This allows you to change a value from between a minimum and maximum value using a prefered value. For example:
font-size: clamp(16px, 2vw, 32px);
It is important to note that the middle preffered value must be responsive in order to have the font size change as the screen width changes. Hope this helps!
Good luck,
Geo
@elisabed-coder
Submitted
What are you most proud of, and what would you do differently next time?
I'm most proud of successfully implementing the multi-step form using Angular Material stepper. I started the project with a rough idea and found a design on Frontend Mentor that inspired me. Despite not having access to Figma Design, I managed to create a functional and visually appealing form.
However, I learned that planning is crucial. Instead of jumping straight into the functionality, I would take the time to plan out the entire project next time. This would include sketching the design, breaking down the functionality, and creating a roadmap. Planning would help streamline the development process and prevent potential issues.
In summary, I'm proud of the final product and the skills I developed, but I recognize the importance of proper planning and preparation for future projects.
What challenges did you encounter, and how did you overcome them?
Customizing the Angular Material stepper's styles was challenging. The default styles didn't match my design, and changing them was complex. I overcame this by thoroughly exploring Angular Material's documentation, experimenting with CSS classes, and using Angular's encapsulation features. Persistence and research helped me achieve the desired look and feel.
What specific areas of your project would you like help with?
Is the form intuitive and user-friendly? Are there any issues with validation or form submission? Does the stepper handle edge cases effectively? 2. Components:
Are the components well-structured and modular? Is the code clean and maintainable? Are there any best practices or improvements I could incorporate?
Hi!
I think your design is clean, responsive and close to the solution. Unfortunately there is an issue with the number formatter preventing the user from progressing through to the other pages in the form. I would revisit the logic so that more people can appreciate the effort you put in.
Hope this helps :)
-Geo
Marked as helpful
@jcad57
Submitted
What are you most proud of, and what would you do differently next time?
I think I could probably have used more "shared styles" between the two 'states' since it's really only the content inside the box changing.
Allow me to congratulate you for creating a solution that looks extremely close to the mockup. Additionally, your stylesheet is both clean and organized. Well done!
