@KSnape34Submitted 13 days ago
Wendy
@wendyhamelAll comments
- @wendyhamelPosted 8 days ago
Very nice work!
Nice use of the semantic
<article>element. Did you know about the<details>element? This is a nice one to use for the FAQ for better semantic html.The image and the text of the tabs in the features section take different time to show. The images lag behind a bit.
The fonts of your headings are a bit bolder than the design, but I do like the overall site. Your responsive solutions look good on small and large screens!
Happy coding!
0 - @kaamiikSubmitted 20 days agoWhat are you most proud of, and what would you do differently next time?
The CSS structure, organized with SASS and the CUBE CSS methodology, worked very well and kept the code clean and modular. Using Astro components also improved the code structure, making it more readable. Next time, I might try a framework like Tailwind CSS to streamline styling even further and to make styling faster and more consistent.
What challenges did you encounter, and how did you overcome them?One main challenge was setting up the CSS Grid layout, especially achieving an overlapping effect between the header and main sections. This required a careful setup of grid rows and columns, particularly in the desktop view. Experimenting with different grid configurations helped achieve a result close to the design. For animations, I kept them straightforward—one for site load and another for the image slider transition. Keeping these animations simple made them manageable to implement effectively.
What specific areas of your project would you like help with?Feedback on CSS structure and animations would be very helpful. Suggestions on improving the CSS organization or refining the animations would be useful, especially if there are ways to make them more effective without extra complexity. Also, any recommendations for improving HTML, JavaScript, or accessibility would be appreciated, as these adjustments could enhance the code’s overall quality and accessibility.
@wendyhamelPosted 8 days agoNice job here!
Nice solution for the layout with the grid. You could figure out some stages in between the mobile layout and the desktop layout. The sections and images are a bit largeon the higher end before your breakpoint, this pushes the content out of view.
There is some room for more semantic use of html elements instead of the div's. Article is a nice option for the sections with information. This also improves accessibility.
The animations are a bit jarring for my taste. The images are large and they have to move over a large empty space but is's mostly because the previous content does not animate out.
I use Alpine.js in my projects, combined with Tailwind.css. It helps with these transitions. It makes coding them a lot easier.
Happy Coding!
Marked as helpful0 - @whalaySubmitted about 2 years ago
i find the process of designing the site so fun and interesting
@wendyhamelPosted 10 days agoHi, nice to see you try this challenge.
I noticed a few points you could improve.
Match to the design
- In the design the hero image has a subtile darker overlay
- The fonts in your project are not a match to the design in some places: header menu and the body text)
- The colors in your project are not a match to the design in some places: (active indicator line under the header navigation, body text)
- The padding and margin is different from the design: (mostly padding and margin around the sections)
Semantic HTML
- I do not see a
<main>tag - I noticed a lot of
<div>'s. There are many more semantic html elements you can use. Try the use of<section>or<article>elements. You can read about it on MDN for example.
Responsive You did a good job here for the mobile layout. But you might want to tweek some in-between states and the larger screens. There is some content overlapping (body text overlaps the button) or cramped together (header logo and menu) on some in-between sizes. If you look at your project on a larger screen, the site kind of falls apart because there is a lot of space between. (the body text stretches out a lot, the button gets very far away to the right from the grid that stays on the left) You could contain the width the content is allowed to take and center it, to make it all look good on a greater veriety of screen sizes.
I hope this will help you.
Happy coding!
0 - @kaamiikSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud of my efforts to ensure accessibility in my project, particularly in creating a responsive navbar and using dialog elements effectively. Next time, I would definitely use a framework to streamline the development process.
What challenges did you encounter, and how did you overcome them?One of the main challenges was ensuring that the lightbox and cart dialogs were both functional and accessible. I had to pay close attention to various aspects in JavaScript to ensure necessary updates. I overcame these challenges by meticulously adhering to accessibility guidelines and thoroughly testing my code.
What specific areas of your project would you like help with?I would like help with ensuring that my implementation of the lightbox and cart dialogs is as efficient and accessible as possible. Additionally, any feedback on improving the overall accessibility and responsiveness of the navbar would be greatly appreciated.
@wendyhamelPosted 25 days agoHi there!
Nice solution with just some minor layout issues I'd like to point out.
Your menu items are not visible on desktop. Looks like
.nav__content: opacity: 0is the problem.The thumbnails are not square in your carousel.
Your Javascript looks structured and the page is responsive and acceptably accessible.
Happy coding!
Marked as helpful0 - @wendyhamelSubmitted 9 months ago
- @wendyhamelSubmitted 6 months ago@wendyhamelPosted 25 days ago
Thank you!
I did not test the success message for that. I'll look into it if I have the time!
0 - @wendyhamelSubmitted 11 months ago
- @wendyhamelSubmitted about 1 year ago
- @wendyhamelSubmitted almost 2 years ago
- @marcfrancissSubmitted 2 months ago@wendyhamelPosted about 1 month ago
Great solution to this challenge!
Your solution is extremely close to the screenshot and resizes nice on smaller screens. It does have a scrollbar on larger screens, when all the content is visible, so you might want to adjust the
.margin-block: 90pxon<main>to just margin top for example.You might want to look into more use of semantic HTML to reduce the meaningless div's for better accessibility. The
.news-containerand.populair-containercould be<article>'s instead of a<div>'s.Last, a very small design difference: in the screenshot the text of the
read morebutton is black, but in the design it is white.Happy coding!
1 - @roidzuhSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
React, Tailwind CSS, mobile-first approach
What challenges did you encounter, and how did you overcome them?none.
What specific areas of your project would you like help with?Any feedback is welcome!
@wendyhamelPosted about 1 month agoHi there,
Nice work on this solution!
I noticed a horizontal scroll bar on sizes < 185px wide screens. The margin on your
<section>with the form (first one in the #root, not the second containing the success message) is the cause. One way to solve this is removing the margin from the<section>and use a padding on the containing<div id="root">instead.But that's it! The rest of your code looks good.
Happy coding!
Marked as helpful1 - @Papi84Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I’m most proud of how I effectively utilized HTML and CSS to create a visually appealing and responsive design. The project demonstrated my ability to implement modern web design principles and achieve a clean, user-friendly interface.
Next time, I would focus on enhancing cross-browser compatibility and optimizing performance. Additionally, I’d explore incorporating more advanced CSS features and JavaScript to add interactive elements, which could further improve the user experience.
What challenges did you encounter, and how did you overcome them?One of the main challenges was achieving consistent styling across different browsers and devices. I tackled this by using CSS resets to standardize default styles and thoroughly testing the design on various platforms to ensure compatibility. Additionally, I faced difficulties with responsive design, particularly with complex layouts. To address this, I utilized media queries and flexible grid systems to adapt the layout effectively. These steps ensured a cohesive and accessible user experience across different environments.
What specific areas of your project would you like help with?I would appreciate feedback on optimizing my CSS for better performance and scalability, particularly in handling complex layouts. Additionally, guidance on improving cross-browser compatibility and suggestions for integrating more advanced interactive features with JavaScript would be valuable. Any advice on refining my design for enhanced user experience and accessibility would also be greatly appreciated.
@wendyhamelPosted about 1 month agoHi there!
This is a very nice solution to this challenge.
Normalising your css is a very good idea. It lets you focus on the design, without the hastle of working out bugs in the different browsers.
Your css code looks neat and your class names are discriptive. This makes your code easy to maintain. I would change a few names to make it more accurate: for example
- the card-overlay name => it's not really an overlay of the card
- and the double class name for card-day (with the addition :first-child) => this first one is not really the day
But this is me looking really hard to find things to improve for you.
You could work on the semantic HTML by using more discriptive HTML tags like <section> or <article> for the card.
You asked for help with optimizing the CSS and cross-browser compatibility, or more interactive features with JavaScript. In the case of this challenge I would discurrage that. It is a simple card, and adding to much transitions and animations can distract or even irritate users. But in other projects it may be usefull. If I have the time to look for improvements on some of your other solutions, I will keep this in mind.
Over all, a neat solution for this challenge. I like the responsiveness without the need for or use of media queries. This card does not need them and you used nice other solutions.
Happy coding!
0
