@whosadikSubmitted about 1 month ago
Latest comments
- @darlene9497Posted about 1 month ago
The favicon and Google Fonts are defined twice in the <head> section. It’s unnecessary, clean up to avoid redundancy. The alt attribute in the button with the share icon is empty. It’s a good practice to provide a meaningful alt description for accessibility. The id="toggleButton" is used multiple times in your code, which is not valid HTML as id attributes must be unique within a document. This could cause issues with JavaScript and styling. Use classes for multiple buttons instead of repeating id The UI works well on smaller screens and looks great at first glance on large screens. However, I've noticed an issue with larger screens, especially when clicking on the share button. It seems like the layout doesn't behave as expected, and elements like the share section may overlap or break out of place. Overall, your code is well-structured, and everything looks solid. The share button functionality is clear, and the UI is consistent. Once you adjust for larger screens, I think it'll be in great shape. Keep up the great work
Marked as helpful0 - @TheIvoryMaskSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud of how similar it turned out to the provided image, though obviously padding/margin sized weren't quite right. Got stuck in a few places early on, but figured out solutions pretty quickly. Adjusting things for mobile didn't work on my first try, but a simple change fixed it all.
What challenges did you encounter, and how did you overcome them?The most frustrating thing was inline styling. In retrospect, I could've done without it, but I didn't like the idea of adding too many classes. But I don't really know what best practice is with this stuff, so I'm just happy it looks okay.
What specific areas of your project would you like help with?Just advice about inline styles, whether that was done right, or if I would have been better off just adding a million classes for everything. Also, I'm aware the coding is a bit clunky in places and not formatted right. Need to work on that, too.
@darlene9497Posted about 2 months agoThere is a good visual hierarchy and consistency with the UI. However, the h3s of the first and second cards should be as bold as those of the other cards.
The task requires a grid layout. Therefore, use a CSS grid for the .container, define the grid template, and then assign grid areas for different testimonial boxes.
On mobile screens, the footer is positioned at the center, overlapping one of the testimonial cards. Consider repositioning it below the grid layout so it doesn't interfere with the content. Alternatively, you could remove it entirely if it's not essential.
Great job on structuring the testimonials. Implementing CSS Grid will align better with the challenge requirements and enhance responsiveness. 🚀 Keep up the great work.
Marked as helpful1 - P@nurshSubmitted about 2 months agoWhat challenges did you encounter, and how did you overcome them?
There was not enough detail on the figma design file. So I had to dig into the design document. It would be nice to have a more detailed design system for the handoff.
@darlene9497Posted about 2 months agoUsing CSS variables (--clr-* and --text-*) improves maintainability which is well-organized. Good use of the grid layout. The grid-template-rows in .articles seem a bit rigid with specific row heights consider using auto or minmax() for adaptability. From my screen's point of view, the generated screenshot differs from the layout on the preview site which emulates that of a phone screen. This is what it looks like for reference(copy and paste link to view, I do not know how to upload a screenshot): https://i.postimg.cc/DwzBhmkM/Screenshot-from-2025-01-22-13-02-10.png Overall, your project is well-coded and clean, well done.
Marked as helpful0 - @FernandoFolettoSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I really like to make the website responsive
What challenges did you encounter, and how did you overcome them?Responsive image
What specific areas of your project would you like help with?@media
@darlene9497Posted about 2 months agoYou have two <link> tags loading the same fonts from Google Fonts. You only need one of them. You can remove the second one and combine them to one as such
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Young+Serif&display=swap" rel="stylesheet">.For better accessibility and SEO, provide a meaningful description for the image in the alt attribute. Don't leave it empty.
Update the placeholder name in the footer with your name.
Other than these minor adjustments, your code is solid. Well done
0 - @darlene9497Submitted about 2 months ago@darlene9497Posted about 2 months ago
Can I please get feedback that is not AI-generated? These are add-ons to the design and therefore not helpful feedback.
0 - @TIKOsupSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Styling <ul> and <ol>'s pseudo-element ::marker
What challenges did you encounter, and how did you overcome them?The difficulty was centering the ::marker when there were 2 or more lines in the <li>.
I solved it by putting the contents of the <li> in a <p> and setting to <p>:
- display: inline-block;
- vertical-align: middle;
@darlene9497Posted about 2 months agoGood consistent use of CSS variables.
Well done on maintaining the design even on responsiveness.
Using flex-direction: column for the table can cause alignment issues. It's better to stick with the default table layout (display: table) unless you have a specific design in mind.
Overall the code looks solid and follows good practices. Well done!!
0
