@ephraimdjeket
Latest solutions
Testimonial Grid Project
Submitted 5 months agoAdvanced Grid Techniques: I'd love to explore more advanced grid concepts, like creating more complex layouts and using grid areas for more intricate designs.
Accessibility: Mentorship on how to improve accessibility further, ensuring that this project can be fully usable for all users, especially those with disabilities.
Latest comments
- @Gentlestan
Great job on your project! Everything looks fantastic, and the design works really well. The use of semantic HTML is spot-on, and the accessibility is solid. Kudos for that!
However, there’s one area I think you could adjust:
Responsive Design (Breakpoints): In your current version, the mobile and tablet designs are quite similar, but in the actual design, the tablet and desktop layouts should be nearly identical with only slight differences, while the mobile layout is different. It looks like the tablet and desktop layouts in your solution are more similar to each other, but there should be a noticeable difference between the mobile layout and the tablet/desktop designs. You might want to recheck your breakpoints and ensure that the tablet and desktop views are closer to each other, while the mobile version remains distinct.
- P@inappdesignWhat are you most proud of, and what would you do differently next time?
It has been a while since I submitted anything here, so this challenge has been a refresher on CSS Grid, and it was a lot of fun despite the end result not being as good as I want it to be.
CSS can become a bit of a nightmare after a few hundred lines. I must have refactored my CSS about five times (my solution was pure flexbox at one point) and it still isn't as perfect as I want. There is probably some redundant CSS left over from my refactors, so I may return to this later and clean it up a bit.
What challenges did you encounter, and how did you overcome them?I'm looking into a BEM and Cube CSS, see if they can help or if should continue finding my own way. I want to get CSS right very early on in my future challenges.
@GentlestanI wish I could upload a screenshot to show you, but I viewed your project on Chrome, and I noticed a couple of things, that I initially commented On desktop, only one centered hero image is being used, and in the footer section, the elements are stacked vertically instead of horizontally as per the design. Also, I spotted that the word "together" in "Experience More Together" has a different color that is not in the original design.
I also checked it on a different browser, Edge, using this website: https://websiteresponsivetest.com/, and the same issue appeared. Please take a moment to check it out, make a few tweaks, and it should be all good. Happy coding!
Marked as helpful - P@inappdesignWhat are you most proud of, and what would you do differently next time?
It has been a while since I submitted anything here, so this challenge has been a refresher on CSS Grid, and it was a lot of fun despite the end result not being as good as I want it to be.
CSS can become a bit of a nightmare after a few hundred lines. I must have refactored my CSS about five times (my solution was pure flexbox at one point) and it still isn't as perfect as I want. There is probably some redundant CSS left over from my refactors, so I may return to this later and clean it up a bit.
What challenges did you encounter, and how did you overcome them?I'm looking into a BEM and Cube CSS, see if they can help or if should continue finding my own way. I want to get CSS right very early on in my future challenges.
@GentlestanFirst off, I want to commend you on the effort you've put into creating this landing page. The structure is clean, and the design looks polished, especially with the use of well-chosen fonts and imagery. It's clear that you're familiar with flexbox for layout management, and the use of reusable classes shows a good understanding of DRY (Don't Repeat Yourself) principles. Nice job on that!
Suggestions for Improvement:
While the landing page is off to a strong start, there are a few things I'd like to point out for improvement based on my observations:
Hero Section on Desktop:
Issue: The desktop version of the hero section does not display the images on the left and right sides of the hero text as per the design. Instead, the images appear centered. Suggested Fix: Consider using two separate image elements that are displayed side by side, with text in the center, similar to a split layout. You can leverage flexbox or grid to position the images accordingly on larger screens. This will align better with the visual design where the images should be positioned on either side of the hero text.
for example .desktop__hero__section { display: flex; justify-content: space-between; align-items: center; } .desktop__hero__left, .desktop__hero__right { display: block; }
This will allow the images to be displayed on the left and right while keeping the hero text in the center.
Footer Section Layout:
Issue: The footer content (including the "Experience more together" heading, text, and button) is stacked vertically, but the design clearly calls for them to be laid out horizontally (desktop) with justify-content: space-between so that the elements are aligned on the left and right of the section. Suggested Fix: To match the design, you can adjust the flex-direction in the footer’s container. Using flex-direction: row; and justify-content: space-between; will position the elements horizontally, which is what the design intends. This change will ensure that the text and button are properly aligned on opposite ends of the footer.
- @AAB007209What are you most proud of, and what would you do differently next time?
I am proud about the Grid layout I learnt about while doing this challenge. Grid layouts are always kind of easy when thought about the design but when it comes to code they become messy during responsiveness.
What challenges did you encounter, and how did you overcome them?Grid Layout Responsiveness was little bit tough to come up at first. But later got some help from Kevin Powel the CSS master and was able to do it and understand properly.
@GentlestanThank you for the feedback! Here's a refined version of your review based on your comments:
Review of the Testimonials Grid Section:
Great job! The HTML structure is clean and well-organized, making it easy to understand the hierarchy and relationship between elements. It’s clear that the layout was thoughtfully crafted.
The use of the grid structure demonstrates a solid understanding of how the grid system works and how to effectively order a grid. This is especially evident in the testimonial section, where the design remains responsive and adapts well to different screen sizes.
The choice to use CSS Grid for this section is excellent, as it ensures a flexible and responsive design. The overall layout works beautifully across devices. Kudos on the implementation!
Marked as helpful - @GentlestanWhat are you most proud of, and what would you do differently next time?
I am most proud of how I was able to leverage the grid system to create a responsive layout for the testimonials. Through this project, I deepened my understanding of key grid properties like grid-template-columns, grid-column, grid-span, and how to rearrange or order grid items effectively. Additionally, I gained valuable insights into semantic HTML and using meaningful CSS class names, making the code both cleaner and more readable.
What challenges did you encounter, and how did you overcome them?One challenge I encountered was determining the best way to organize the grid layout to ensure responsiveness. The initial arrangement didn’t look good on smaller screens, and it took some time to refine the layout so it displayed correctly across devices. I solved this by using media queries and experimenting with different grid settings to ensure that the layout adjusted as expected on larger screens. I also encountered some issues with aligning text and images, which I resolved by adjusting padding and margins.
Another challenge was ensuring that the project was properly structured in terms of semantic HTML. This was a learning curve, but I solved it by reviewing best practices for semantic elements and ensuring I used appropriate tags such as <header>, <section>, and <footer>.
What specific areas of your project would you like help with?Advanced Grid Techniques: I'd love to explore more advanced grid concepts, like creating more complex layouts and using grid areas for more intricate designs.
Accessibility: Mentorship on how to improve accessibility further, ensuring that this project can be fully usable for all users, especially those with disabilities.
@GentlestanThank you @sdkdeepa for your feedback! After reviewing your comment, I took the time to go through my project and noticed that I had unintentionally missed a few design elements. While I originally would have loved to build everything from scratch, I had to find a way to incorporate those missing parts, including the background image, background color, and removing the footer. Your input has been incredibly valuable, and I truly appreciate your help in improving the design. Thanks again!
- P@sdkdeepa@Gentlestan
Great job on your project! I always appreciate seeing well-implemented semantic HTML, especially with elements like <section>, <article>, <main>, and <footer>. These elements not only help organize the content but also make the HTML more readable and accessible. Additionally, the use of the alt attribute for images is a great practice, contributing significantly to accessibility for users with visual impairments.
Looking at your project, one minor issue I noticed is its responsiveness on very small screen sizes, particularly those around 260px in width. While such small screen sizes are rare, they do still exist, and it might be worth reviewing the grid settings in your media queries for smaller devices. It’s possible that there may be some conflicting CSS rules or grid-related settings that are causing the layout not to adjust as expected on these smaller screens.
Overall, you've done a fantastic job with this project! Keep up the great work, and I’m sure you’ll continue to improve and create even more impressive projects!
