@maria202costa
P
roswell
@welpmozAll comments
- P@welpmoz
Remember to adjust your styles for mobile screens. Personally, I find Sass incredibly useful for my projects, along with the BEM naming convention for organizing both styles and HTML markup.
You can take advantage of Sass's nesting features to write cleaner code. For example, if your parent selector is ".second-section" and your child element is ".second-section__light-img", you can write it more elegantly as:
.second-section { &__light-img { // Your styles here } }
This approach makes your code more maintainable and easier to read.
- @dirkvankriekenP@welpmoz
I suggest using semantic HTML tags; for example, you could replace some <div> tags with <section> tags and don't forget at least one <main> tag in your page. In this challenge, the icons are more decorative than meaningful images, so I think they shouldn't have alternative text. You did a great job with the responsive design! 👏
- P@webdevbynightWhat are you most proud of, and what would you do differently next time?
I used the Intersection Observer API to animate some elements when they appear within the viewport.
What challenges did you encounter, and how did you overcome them?For each card of the “Our Creations” section, I wanted to place the link text over the image without using absolute position. I overcame it using grid layout and placing the image and the link text in the same grid area.
What specific areas of your project would you like help with?Do not hesitate over giving feedback about how I implemented the way the menu appears on mobile view.
P@welpmozGreat work! The next step you can do is to add aria attributes to help screen readers understand while interactions occur.
- @FunsallyWhat are you most proud of, and what would you do differently next time?
I'm really proud that I managed to get the image with the eye icon overlay working! It was a bit tricky getting the icon to show up only on hover and positioning it correctly. I also learned how to use position: absolute and position: relative for this, which was something new for me. Getting the overlay to fade in smoothly was a cool feeling too.
If I were to do it again, I would definitely spend more time practicing CSS transitions. I got the hover effect working, but it's not as smooth as I'd like. I'd research different transition properties and timing functions to make the overlay appear more elegantly
What challenges did you encounter, and how did you overcome them?The biggest challenge I faced was making the image underneath the eye icon and its background overlay still visible. At first, the overlay was completely blocking the image, which wasn't the effect I was going for. I tried a few things, but nothing seemed to work. Then, I watched some YouTube tutorials where people were doing similar hover effects. That's when I realized that I needed to adjust the opacity of the overlay background. By reducing the opacity, I was able to make the overlay semi-transparent, so the image could show through. It was a bit of a "aha!" moment. I'm glad I persevered and found a solution, even though it took a bit of research.
What specific areas of your project would you like help with?While I'm happy with how the hover effect turned out, I did have a bit of trouble getting the border-radius to work correctly on my image. It wasn't applying as I expected, and I'm not entirely sure why. If anyone has any tips or insights on how to make border-radius work consistently with images, especially when they're inside containers with overlays, I'd really appreciate the help. I'd love to understand the underlying reasons and best practices so I don't run into this issue again in the future. Also, if there are any resources you'd recommend for learning more about image styling in CSS, I'd be very grateful.
P@welpmozYour HTML and CSS code look clean. However, all interactive elements must be accessible with the mouse and the keyboard, and don't let your website's layout break after zooming below 200% at least. I don't know what happens besides the problem you face rounding images, but let me tell you that I also face the same problem. Rounding the container doesn't apply to the img child.
- @somayakhaledP@welpmoz
Hi Somaya. Your solution looks good on desktop screens but not on small screens. To handle these issues, check out media queries. Also, seeing your code, I noticed some issues in your HMTL markup related to HTML semantics.
Marked as helpful - @snigdha-sukunP@welpmoz
I liked your markdown but not much the styles, it could improve. The interactivity perform pretty well. Keep going!
- @Ejiro-FrancesP@welpmoz
Great work! Your solution looks good in multiple screen sizes. You can improve your semantic HMTL markup using
detailsandsummarizetags. And remember that each interactive component must be functional with keyboard and mouse.Marked as helpful - @Erik5CAP@welpmoz
Your JavaScript code works, but I think it’s not very reusable. Keep in mind that using a radio input combined with the name attribute ensures that only one input can be selected at a time, avoiding the need to repeat the logic for styles.
- P@YuliaLantzbergWhat are you most proud of, and what would you do differently next time?
Somehow it was pretty tough for me to write it in vanilla js. I had to rewrite the js code thrice. The desire to leave it like this was strong but I kept it up. So not bad. Also this time work on Less and CSS and HTML went really smooth. And there is clear stable workflow for me now
What challenges did you encounter, and how did you overcome them?I got so weird bugs in the process that couldn't find even theoretical explanation for them. For example when code reads the same data from an array, read 4 entries, but then for some reason cut them to 2. Inspite that while looping they still were 4. But I think I took many outcomes from this challenge. First of all, how frameworks ease us lives :-D. Second, if you don't have tools like redux and context, build code in the way that you needn't to pass data through many functions. Otherwise you'll get a lot of unexpected bugs. Clean eventListeners, otherwise it is a real pain, multiple calling events when you don't need it, memory leaks and so on. Keep functions independent as much as possible and don't forget about closures. Otherwise, you get unexpected results again. I know all that are known mistakes and reasons for existing best practices but somehow flew through fingers when writing in vanilla js.
P@welpmozYour project looks great on both mobile and desktop devices, but it could use some improvement on tablets. The flow of the questionnaire is good; however, I noticed that when an option is incorrect, only the incorrect option is shown. It would be helpful to also display the correct answer in such cases as in the design. Additionally, be mindful of the border property. For example, if an element has a height of 10px and you increase the border to 2px (while hovering), it might cause unexpected behavior in the interface. Instead, you could set the height to 8px with a 2px border matching the background color, and on hover, simply change the border color.
- P@YuliaLantzbergWhat are you most proud of, and what would you do differently next time?
Less is love at first sight. I overall enjoyed this challenge.
What specific areas of your project would you like help with?Feedback is always welcome
P@welpmozPretty good solution! You are considering scenarios when the app can break down. For more appealing to the user you can add some CSS transitions.
Marked as helpful - @najahajaWhat are you most proud of, and what would you do differently next time?
I’m most proud of the interactive and responsive design of the tip calculator, which ensures a smooth user experience across devices. Next time, I’d integrate more advanced features like real-time data validation and persistent storage to enhance functionality and user convenience.
What challenges did you encounter, and how did you overcome them?I encountered challenges with accurately calculating and updating the tip amounts based on user input and ensuring the UI remained responsive. I overcame these by thoroughly testing and debugging the JavaScript calculations and using CSS media queries for responsive design. Adding validation checks improved overall reliability.
What specific areas of your project would you like help with?I’d like feedback on optimizing the JavaScript code for more efficient tip calculations and ensuring accurate data handling. Additionally, any suggestions on improving the CSS for better cross-device responsiveness and usability would be helpful. Guidance on integrating local storage for saving user inputs would also be valuable.
P@welpmozThe first
h2is not wrapped with semantic HTML, be careful. Using pure CSS for is not bad, but you can try to use some methodologies for organize not only your styles, also the HMTL markup. I suggets you try BEM methodology. The layout need to improve for desktop devices. Lastly, if you want that your code become more reusable try to refactor your code and use pure functions. - @SunilBaghel002P@welpmoz
It's very interesting your approach to change the frequency dashboard with animation. The design is very close similar. And HMTL markup is well structured!. I will recommend you add some padding to the bottom to improve your design and use tools for develop responsive apps like responsively app. Good work
Marked as helpful - @burningbeattleWhat are you most proud of, and what would you do differently next time?
i hope this one is as per the design as i try to remake it and took some inspiration from others and just want that it is as per design given and it matches the solution.
What challenges did you encounter, and how did you overcome them?error states design achieving was difficult task and hence the sumbit and showing thanks message and used resourses and ai option to resolve this issue i was facing and hope that its work as per given design objectives.
What specific areas of your project would you like help with?using of react and next js frame work and achieving this same result and all this is done with normal javascript only.
P@welpmozCheck with more care the design and use try to use the same colors and fonts specefied in the
style-guide.mdfile. I recommend you to add more breakspoints for the changing are to be more smooth and not agressive. For show error states, javascript offer more control over native HTML validation. Keep going!Marked as helpful - @RASHAFi00P@welpmoz
I liked your solution! The design looks great in many sizes. Your animations are also awesome. Perhaps the only suggestion is consider extreme cases (devices no longer than 330px wide)
Marked as helpful - P@gianmromeroWhat are you most proud of, and what would you do differently next time?
Figure out how make the header grid layout. I will take in consideration every design in responsive.
What challenges did you encounter, and how did you overcome them?How make the header grid layout. I isolated the problem for a better understanding then apply the solution to the repository.
What specific areas of your project would you like help with?I would like help about the position of my images.
P@welpmozI recommend you use the
responsively appfor you see clearly your code in three devices at the same time. Try to modularize your styles. Keep going! - @gustavo2023What are you most proud of, and what would you do differently next time?
I think for a project like this one I would like to try a desktop approach first to see if it's easier than mobile-first.
What challenges did you encounter, and how did you overcome them?I had trouble with positioning the quote image where I wanted it. It also took me a while to correctly define the number of columns I had to use in order to correctly implement the desktop grid layout.
What specific areas of your project would you like help with?- Are there any improvements I can make to the semantic structure of my HTML?
- Improvements in accessibility that I can make.
- Are there any redundant or repetitive styles that can be optimized?
- Is my use of CSS Grid and Flexbox efficient or what improvements could I make?
P@welpmozGreat work! The design is identical and the code is well structured and readable, further is well commented.
- @abedhousaryP@welpmoz
The initial design that I see is great but while playing increasing and decreasing the zoom, the page is not fully responsive.
- @LidusanP@welpmoz
Your solution breaks the limits screen in mobile view. Take care of overflow control in all screen sizes. The design is almost the similar, good job!
