@ephraimdjeket
Ohazulike Stanley
@GentlestanAll 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!
- @latifsterWhat are you most proud of, and what would you do differently next time?
Getting it done.
What challenges did you encounter, and how did you overcome them?Still having some responsive issues with images.
What specific areas of your project would you like help with?Image responsiveness and a bit of resizing of certain things
@GentlestanKudos to you!
The use of meaningful tags like <main> and <footer> for structuring your content is truly commendable. These semantic elements not only improve readability but also enhance accessibility, making the project more user-friendly and professional.
I also appreciate your approach to defining reusable color variables (e.g., --Darkcyan, --Cream). This is a great practice that ensures consistency throughout the design and makes the code more maintainable, especially for larger projects.
The inclusion of a media query is another strong point—it makes the site adaptable and responsive, catering to different screen sizes seamlessly. Additionally, the choice of Google Fonts, Fraunces and Montserrat, aligns well with the design aesthetic and contributes to the overall visual appeal.
Suggestion for Improvement: For larger screens, you might want to consider increasing the width of the button. Currently, it appears a bit smaller than expected compared to the design. Adjusting the button's dimensions would enhance its prominence and maintain visual balance on wider screens.
Overall, excellent work! With a few tweaks, this project will stand out even more. Keep up the great effort!
Marked as helpful - @Yuvraj289@Gentlestan
You did a great job! Upon reviewing your code more closely, I think the use of alt text for images is a great improvement for accessibility. However, I believe the <div class="card"> could be replaced with a more semantic element like <article> or <main>, as this section represents the main content of the page. This would enhance the use of semantic HTML overall.
Additionally, using an <h1> tag instead of the <p id="main-heading"> tag would be a better choice, as it aligns with best practices for heading structure and improves the page’s semantic structure.
I also suggest considering the use of <h2> for section titles like "Ingredients," "Instructions," and "Nutrition." This would improve the readability and accessibility of the content, especially for screen readers. cheers and happy coding
- P@gkilasonia@Gentlestan
Your final work looks fantastic and is even better than mine! I took a close look at your code, and I appreciate the clear structure you've used. The use of semantic HTML elements like <main> and <footer> really helps with SEO, accessibility, and overall readability, making the content well-organized.
I also noticed that you’ve included an alt attribute for the <img> tag, which is excellent for accessibility.
One improvement I would suggest is regarding the responsiveness: the design includes two breakpoints—one for mobile and one for tablet. However, the tablet breakpoint seems to be missing. It would be great if you could implement that to ensure the design adapts well on tablet-sized screens.
Marked as helpful - @Huni111What are you most proud of, and what would you do differently next time?
I could nearly copy the aspect of the card and design
What challenges did you encounter, and how did you overcome them?I wasn't really sure how to position the components on the card so i had to use relative positioning one time which is kind of bad practice, and i also set an exact width and height that might be something unpro as well...
What specific areas of your project would you like help with?positioning and sizing the elements
@GentlestanNice job! what I like about your project includes 1.Semantic HTML: You've done a great job using descriptive class names and focusing on layout using flexbox in the main container. 2. Typography: utilizing the design typoghraphy 3.Responsive design, use of width 100% and height 100%
however, I think you can further improve google accessibility and SEO by utilizing semantic html tags, which includes main, header and footer.
the use of Alt will also improve image accessibility and lastly utilizing external css file will make it much better.
- @AndersonF-Dev@Gentlestan
After reviewing your solution, I have positive feedback to share. You've done a great job utilizing semantic HTML, which contributes to better accessibility and SEO. The final product is true to the design, maintaining its layout and functionality across a variety of screen sizes, from smaller to larger screens.
The code is well-structured, clean, and highly readable, making it easy to maintain and expand. You've also made it reusable, which is great for scalability. I particularly appreciate the use of external CSS, which keeps your code organized and enhances the separation of concerns.
To make it even better, you could consider adding ARIA attributes where necessary to improve accessibility further, especially for users relying on screen readers. Additionally, it might be helpful to include more comments in the code to explain the reasoning behind certain design decisions, which can improve collaboration and future maintenance.
Overall, excellent work! Keep it up!
Marked as helpful
