P
@olaide-hok
nodegreecode
@nodegreecodeAll comments
- @nodegreecode
Hi @olaide-hok, your design execution is clean and well-structured. The next step could be rebuilding this using a JavaScript framework (like Vue, React, or Svelte) to enhance interactivity and maintainability. This would also make it easier to scale and add dynamic features in the future.
Keep up the great work!
- @FengDennyWhat are you most proud of, and what would you do differently next time?
I'm proud of the progress I've made in developing reusable components for this project. Learning to create modular, reusable components has not only enhanced the efficiency of my workflow but also improved the overall maintainability of the codebase.
Additionally, I take pride in successfully implementing both the cart system and different image galleries for various viewports. These components required careful planning and attention to detail to ensure seamless functionality across different devices and screen sizes.
Looking back, one thing I would do differently next time is to approach this project as a full-stack e-commerce web application instead of limiting it to frontend development with JSON file data.
Building a full-stack application would provide valuable experience in integrating backend functionality, such as database management and user authentication, which are essential components of real-world e-commerce platforms.
This approach would offer a more comprehensive learning experience and enable me to develop a deeper understanding of the entire web development process from end to end.
What challenges did you encounter, and how did you overcome them?This project presented several challenges, particularly in implementing the lightbox gallery functionality and managing data manipulation for the image gallery and cart system.
One significant challenge arose while developing the lightbox gallery for desktop. Initially, the small thumbnail images were not transitioning to the large product image upon clicking, and the previous and next buttons were not functioning as expected. These issues stemmed from using the same component for mobile, tablet, and desktop views.
To address these challenges, I made adjustments to the dataset attributes for the lightbox gallery. By ensuring that each image had unique and standalone dataset attributes, I could easily target them in the DOM traversal process.
Additionally, I implemented event delegation, specifically bubbling up to the parent element, to handle click events more efficiently. This approach allowed me to capture clicks on any image within the gallery and determine the appropriate action based on the clicked element's dataset attributes.
Once I successfully bubbled up to the parent element, I parsed the dataset attributes to identify the relevant information for each image. This included determining the current index of the clicked image within the gallery, enabling smooth transitions between images when navigating using the previous and next buttons.
By addressing these challenges and implementing solutions such as dataset attribute management, event delegation, and DOM traversal techniques, I was able to overcome obstacles and enhance the functionality of the lightbox gallery component.
What specific areas of your project would you like help with?At the moment, none.
@nodegreecodeHi @FengDenny, good work—it’s very close to the design, and the animation is smooth. However, the logic should be reviewed, and some inconsistencies in the component behavior need to be fixed. For example, the shopping cart opens when the quantity of a product is changed, which shouldn’t happen. Overall, the performance is great—keep going and keep coding!
- @BolazcodingWhat are you most proud of, and what would you do differently next time?
Just happy, i completed it
What challenges did you encounter, and how did you overcome them?no issues
What specific areas of your project would you like help with?JavaScript
@nodegreecodeHi @Bolazcoding,
I'm really enjoying reviewing your work—great job! The homepage is almost perfectly aligned with the design, well-structured, and conforms to accessibility (WCAG) standards.
Just a small note: consider using more media queries to make the layout even more responsive. Also, if you're using the <aside> element for mobile navigation, it's a good practice to explicitly define its role and add an aria-label for better accessibility.
Keep up the great work, and most importantly—have fun coding.
- @AnthoniaEfe@nodegreecode
Hi @AnthoniaEfe, this is an excellent solution—both in terms of accessibility and alignment with the design. Perhaps just a small adjustment to the layout could help ensure the components remain well-structured across different screen sizes.
Overall, though, truly impressive work. I especially appreciate how the input fields are initially high-contrast and then styled with color after being filled out. This approach is perfect for users with visual impairments.
Keep up the great work!
Marked as helpful - @AnthoniaEfe@nodegreecode
Hi @AnthoniaEfe,
I'm excited to review your solution! I'm currently practicing building projects using only vanilla JavaScript, but I can't wait to explore React or Vue for this purpose later on.
You’re probably already aware of some design differences in your solution. I just want to summarize the overall result and highlight a few areas for improvement.
The component closely matches the design, but in terms of accessibility, the color contrast should be adjusted slightly. Regarding the logic, form validation is needed to ensure that users cannot submit the rating form without selecting a rating. Additionally, there’s an extra $ sign in one of the template literals.
That being said, the component looks great overall! Keep enjoying your coding journey and keep pushing forward.
- P@Coder-LizWhat are you most proud of, and what would you do differently next time?
I am proud to have completed this project, even though I still need to make some adjustments to my code, like updating certain HTML elements, so I can use pure functions in the script.
@nodegreecodeHi @Coder-Liz, I’m really impressed with how well you matched the size of this component—it aligns perfectly with the actual design!
Regarding functionality, there’s still room for improvement. Instead of adding a border to the Custom Tips field, consider styling its outline to prevent the jumping and resizing of other components. Also, try rethinking the logic behind the event listeners. Right now, the calculation starts immediately after the first input. Instead, you could implement a central function that orchestrates the other functions in a more structured and appropriate manner.
You're doing a fantastic job—keep it up! 🚀
- @shadowbanksWhat challenges did you encounter, and how did you overcome them?
I spent more time than I should deciding how much of the page should be dynamic and how best to go about it 😅, ultimately I decided to create the boilerplate for each card and then fill them dynamically.
What specific areas of your project would you like help with?For the card's active state, on hover the color becomes lighter also on the ellipse hover the card retains its original color (basically the card isn't in a hover state) and only the ellipse is in a hover state, I ended up using javascript to toggle a class on the card to handle this, I'm wondering if there's a better approach.
Also, I'm open to any other suggestions.
Thank you for your time :)))
@nodegreecodeHi there! Your solution looks fantastic. The layout adapts well across different screen sizes and stays true to the design. One suggestion would be to explore using JavaScript to handle the hover states of the activity boxes for more dynamic interactions. Keep coding, stay curious, and keep pushing your skills forward!
- P@awaritefeWhat are you most proud of, and what would you do differently next time?
Was nice to figure out how the parts connect and deciding how to approach this. I would probably try using a framework like Vue.Js next time.
What challenges did you encounter, and how did you overcome them?The freecodecamp documentation on this is not great. Its missing key stages you need to make it work. Next time i would find a different solution online somewhere else.
What specific areas of your project would you like help with?Is there a cleaner way to do it?
@nodegreecodeHi, this is a great solution, especially in how you handle the success message appearance. I really like your idea of using the dialog element to display the message. The overall implementation closely resembles the design and functions as intended. Perhaps some minor adjustments between breakpoints could further enhance the layout's responsiveness. Keep up the excellent work!
Marked as helpful - @artemkotko14@nodegreecode
Hi! I’m excited to review your solution—it’s a very interesting and creative approach to tackling this challenge. I mean mixing of gird and flex containers.
The article preview card looks impressively close to the design. One suggestion would be to position the share popup outside the card. This way, you could use overflow: hidden on the entire card to ensure all the corners remain perfectly rounded.
Keep up the great work, and stay motivated!
Marked as helpful - P@ChefJTaylorWhat are you most proud of, and what would you do differently next time?
This one took me a while longer but I finished it and was able to get pretty close to the design. Re-learning and applying these concepts have been fun.
What challenges did you encounter, and how did you overcome them?This one was tough. From choosing the correct displays, positioning, text placement, it was all a challenge. The 21 day course that was suggested before this learning path has helped alot.
What specific areas of your project would you like help with?Specially on the media query I could not get any space on the bottom of the page without messing up the entire layout. If someone could help me with that, I would appreciate it.
@nodegreecodeHi, great solution overall! I particularly appreciated the clever trick of using an image for the double quotation mark instead of relying solely on font families and pseudo-elements. That approach could save a lot of time—something I personally spent quite a bit of effort on.
Your HTML is well-structured, and the styling is clean and effective. However, I’d suggest enhancing the layout a bit further by adding some spacing on the sides to improve the overall balance. Additionally, consider introducing a breakpoint in the middle of the responsive design. For example, you could switch to a two-column grid at that point, rather than jumping straight to a single-column layout.
Keep up the great work—your code is a pleasure to review.
Marked as helpful - @HosseinHeydarpour@nodegreecode
Hi! I’m really impressed with your implementation, especially the grid/column system. That’s something I’ve been trying to achieve myself but haven’t quite nailed yet—great job!
If I may, I’d suggest adding an intermediate breakpoint in your media queries where the grid transitions first to two columns before switching to a single-column layout. It could enhance responsiveness and make the design even more polished.
Keep up the fantastic work, and have fun tackling your next challenges!
- @kevin344k@nodegreecode
Hi, great work! Your preview card is very close to the design. To improve further, consider refining your media queries and incorporating additional breakpoints for better responsiveness and adaptability across a wider range of devices. Adjusting these will ensure the layout transitions smoothly and aligns more closely with the design’s intent. Keep up the excellent work!
- @Conte-Mouctar@nodegreecode
Hi, @Conte-Mouctar,
well structured html.
There are some tipps, which could be helpfull:
- add some more padding to the container;
- change image corner applying border-radius on it;
- apply @media-queries to make you page looks similiar to the mobile-design.
Keep coding and stay persistent.
- @devhenriquemares@nodegreecode
Hi @devhenriquemares,
really nice look and good customization.
But one thing I'd like to mention is about building links and making them look like buttons. When you have something like a navigation, which consists of a couple links and they logically bind, you should use the ul element and put a elements inside of the li elements of that unordered list.
I hope this will help you a little bit.
Marked as helpful - @forneiro@nodegreecode
Basically, the component is fluid and very close to the design. And you didn't forget to set a border around the entire card, as I did. But regarding semantics and CSS styling, there are some things that you could improve. So the blog card consists of <header> with image, title and link inside of this, <p> with short description and the <footer>. Instead of adding :hover pseudo class on top of the <h1> better wrap an <a> tag with <h1>. The boxing-size property should be set inside the universal selector * only, as you do not use pseudo-elements ::after and ::before. They could be removed. If you set font-size entirely to 62.5% = 10px, then stick to rem's do not use px's, however for border-radius, px's are recommended, because corners remain the same after the user changes the font size in his browser. Using width and max-width in the .card class is redundant. You can leave max-width or use flex-basis instead. I hope my comment will be helpful. Stay motivated and keep coding...
Marked as helpful - @zekeer21@nodegreecode
HTML is valid and built semantically correct. The description of the image could be a bit longer and preciser. Something like "illustration of white qr code on the blue background". The layout looks good while changing screen size, but however the content inside is not fluid. You could try using "max-width" instead of "width" when defining the size of the container. Not so much reason to select paragraphs like this ".text > .text-second" if they have their own unique classes. There are some improvements regarding the class names, so basically, to make it reusable and meaningful, you should better use some general names, which describe the element hierarchically or in the case of some heading/title according to their function. A heading or title can be reused over the entire project. Instead of "text-first" you can write "card-title" or "qr-code-title". The solution generally looks very close to the design. Great job!
Marked as helpful
