@SachinPremkumar
Latest solutions
Responsive Article Preview Component using HTML, SCSS, and JavaScript
#sass/scssPSubmitted 10 days agoI’d appreciate guidance on handling component state and interactivity in vanilla JavaScript, particularly for adapting elements like the share button across different screen sizes in a scalable, accessible, and maintainable way, without duplicating code.
Responsive Landing Page with Sass
#sass/scssPSubmitted 2 months agoI'd like to know if I properly use SCSS on this project.
Testimonial Grid using CSS Grid & Flexbox
PSubmitted 3 months agoI’d appreciate feedback on responsive optimizations and accessibility improvements, especially regarding ARIA attributes and keyboard navigation.
Responsive Feature Card Component Using CSS Grid & Flexbox
PSubmitted 4 months agoFurther accessibility improvements – Are there any best practices I missed, such as ARIA roles or better text contrast? Performance optimizations – Are there any ways to improve efficiency in my CSS, particularly regarding grid and flexbox usage?
Responsive Product Card Using CSS Flexbox
PSubmitted 4 months agoI'd appreciate feedback on accessibility improvements and any suggestions for enhancing the overall design and responsiveness.
Latest comments
- P@chryspenalber
You might consider adding margin to the body and applying the fonts recommended in the challenge to better match the expected design.
- @elistoyanovaP@chryspenalber
I really liked your solution! I’d just encourage you to add a ReadMe to explain your project.
- P@Alexander3717What challenges did you encounter, and how did you overcome them?
There were many minor challenges but the toughest one was making the share button behave the way I intended. Here's the logic I wanted to achieve:
- On desktop, show the share options toast when hovering over share button and change the button color
- When no longer hovering over either, hide the toast and reset the button color
- After clicking the button, show the toast and "lock" so it stays open even when the mouse moves away
- Allow the user to close the toast either by clicking the button again or anywhere else on the page
- Use subtle fade transitions for all visual changes
I implemented this behavior by dynamically adding and removing classes like
.hiddenand.hoveringon the button and toast based on user interactions. I also used thearia-pressedattribute to track whether the button was currently active.For accessibility I also needed to give the toast
What specific areas of your project would you like help with?display: nonewhen it's hidden because with just zero opacity it is still clickable. But I couldn't fade the toast by giving itdisplay: nonedirectly because thedisplayproperty cannot be animated. I solved this by listening to thetransitionendevent to setdisplay: noneon the toast right after it finished fading out.If you know a better way to handle the share button logic or have tips to make my code cleaner and more professional please feel free to share them. This is my first solution using JavaScript and I'll appreciate any feedback that helps me learn.
Also, if you notice anything wrong with the page layout or responsiveness, please don't hesitate to comment.
P@chryspenalberYour solution is excellent. I’ll use it as a reference and source of inspiration to enhance my own work. Well done!
- P@imvan2P@chryspenalber
I really liked your solution. It is responsive and it looks very similar to the original version. Congratulations!
- @PresidentTree94What are you most proud of, and what would you do differently next time?
I simply followed the original project and coded the solution with HTML and CSS, but I also added a Dark Mode function in Javascript. Next time, I would like to try it in other frontend languages like ReactJS.
What challenges did you encounter, and how did you overcome them?Like the last project in the unit, I did not have the Figma to reference so it was a lot of guessing and checking to get it to match the challenge as close as possible. So far, this one was the most challenging to match.
What specific areas of your project would you like help with?I am still learning the other frontend languages, such as ReactJS, so any advice involving them would be helpful. A React extension may also be included on GitHub.
P@chryspenalberI really like your solution for smaller screens.
- @EkoNdongAyecabaP@chryspenalber
React has been tagged, however, it doesn't look like it has been used.
Responsive Design Considerations:
The use of grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); ensures a flexible layout that adapts well to different screen sizes. The @media screen and (min-width: 568px) breakpoint optimizes the layout for larger screens.
Consistent Naming Conventions:
The BEM (Block-Element-Modifier) methodology is used effectively (.container__cards, .card--supervisor), making it easy to understand and modify styles.
