@Harri254Submitted 3 months ago
Mario Kreitz
@mariokreitzAll comments
- @mariokreitzPosted 18 days ago
What I noticed: The HTML structure is missing semantic tags. Try adding elements like <header>, <main>, <footer>, <article>, etc. These will make your code more readable and help with accessibility too! Plus, it’s a good habit to get into for SEO and screen readers. 👍
Right now, the structure is HTML-heavy, which can make things tricky to maintain. Since this challenge is focused on JavaScript, I’d suggest using JS templates or loading HTML directly via JavaScript. This will help modularize your code and make it more flexible if you need to update things later. It also brings in more JavaScript, which is the main goal here!
For the share menu, make sure it toggles open and close with the same button click—it’s a small thing but really smooths out the user experience.
Since this is a JS-focused challenge, go heavier on JavaScript by dynamically loading HTML templates. This will reduce hardcoded HTML and get you closer to that JS-centric approach.
0 - @Sunvic567Submitted 4 months ago@mariokreitzPosted 3 months ago
Hi Sunvic (@Sunvic567),
Thanks for your work on the project! The layout is heading in the right direction, but there are a few areas that need attention:
Colors: It looks like the color scheme doesn’t quite match the design. You might want to try using a tool like ImageColorPicker, which allows you to upload screenshots and pick out colors from them. This can help ensure your colors align with the project specifications.
Image Size: The image appears to be too large, which affects the balance of the layout. You might want to try setting a fixed width with an auto height for the image. Additionally, using CSS properties like object-fit can help maintain the image’s aspect ratio and fit properly within its container.
( ͡° ͜ʖ ͡°)⌐■-■
Overall, it seems like some of the basics are in place, but the project isn’t fully aligned with the design requirements yet. Keep practicing, and don’t hesitate to revisit the project brief to ensure everything matches up!
Marked as helpful1 - @LFMachucaSubmitted 3 months ago@mariokreitzPosted 3 months ago
Hi LFMachuca (@LFMachuca),
Wonderfully done on the "Blog Preview Card" project! You’ve nailed the design, and it looks great overall. I do have a few suggestions to make your code even better:
Flex on Body Tag: While using display: flex on the body tag can be effective, it’s generally best to avoid it. The body tag is a global container and applying flex here can sometimes lead to unexpected behavior, especially when scaling or adding more content later on. It's usually better to use a wrapper div inside the body for flex layouts.
Class with margin: auto: The margin: auto property is unnecessary here because the element is already centered using flexbox. Remember, margin: auto works best when the element’s container has a defined max-width and isn’t already using flexbox.
Margin on Card Class: The margin property in the card class is also unnecessary, as it has no parent element that it can interact with. Flexbox is already handling the alignment.
Despite these small points, your class naming is excellent, and your use of HTML tags is on point. You might want to consider replacing the h2 with an h1, especially since it’s the only heading in the card—it’s a good practice to start with h1!
(͡° ͜ʖ ͡°)
Overall, fantastic work. Keep up the great coding!
Marked as helpful0 - @MirkoRinkeSubmitted 3 months ago@mariokreitzPosted 3 months ago
Hi Mirko (@MirkoRinke),
(⊙_⊙)
Amazing work on the "Recipe page" project! Your accuracy to the design is nearly perfect, and it’s clear you put a lot of effort into this.
There’s just one tiny detail you might have missed—the font on the headline "Preparation time" is set to the default font instead of the specified one.
Other than that, you absolutely nailed it. Great job!
Marked as helpful1 - @MirkoRinkeSubmitted 3 months ago@mariokreitzPosted 3 months ago
(╯°□°）╯︵ ┻━┻
Hi Mirko (@MirkoRinke),
Wow, you absolutely nailed it with the "Blog Preview Card" project! You hit 99.99% accuracy with the design, and I’m genuinely impressed. Your code is clean, well-structured, and clearly reflects a strong attention to detail.
Honestly, there’s nothing more to add—fantastic work! You should be very proud of this project. Keep up the great coding!
Marked as helpful1 - @Francois085Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I did not use the Figma design file and estimated the different sizes working on the png files.
What challenges did you encounter, and how did you overcome them?I tried to use min-height and max-width but at the end I did not consider that it would bring more quality as the margin and font size are fixed. I might have missed the point of these CSS attributes and will search deeper on that.
What specific areas of your project would you like help with?For project with limited width like this, would you still consider that font size and margin shall still be defined as a proportion of the screen size or could have a fixed size ? Thanks for your input.
@mariokreitzPosted 3 months ago<(^__^)>
Hi Francois (@Francois085),
Great job on the "Social Links Profile" project! Your work is coming along nicely, and I have a few suggestions to make it even better:
Hover Effect Cursor: It looks like the cursor pointer is missing on hover. Adding this will make it clear to users that the elements are interactive.
Subheadline Color: The green color under the picture seems to have a yellowish tint. Adjusting it to a more accurate green will align better with the design.
Vertical Alignment: The content alignment appears slightly off. Ensuring everything is centered both horizontally and vertically will improve the overall balance of the profile card.
Scrollbar: There shouldn’t be any scrollbars visible in the design. You might want to double-check the overflow settings.
Tiny Tip: Consider using Flexbox for easier and more efficient layout management. It’s perfect for handling alignment and spacing.
These tweaks will help polish your project further. Keep up the great work, and happy coding!
Marked as helpful0 - @fefo1811Submitted 3 months ago@mariokreitzPosted 3 months ago
<(^__^)>
Hi again Felipe (@fefo1811),
Impressive work on the "QR Code Component"! I’m really pleased to see you’re using SCSS—it’s a great choice for maintaining cleaner and more organized styles.
I did notice a couple of small tweaks that could enhance the project further:
Box Shadow: It looks like the box shadow effect might have been omitted from the QR code card. Adding this detail can help give the component a bit more depth and make it stand out visually.
Text Positioning: The positioning of the second text in the card body seems to be slightly off. Adjusting this will help align it perfectly and improve the overall design.
Keep up the excellent work! These are minor adjustments that will make your already great project even better. Happy coding!
Marked as helpful1 - @fefo1811Submitted 3 months ago@mariokreitzPosted 3 months ago
Hi Felipe (@fefo1811),
Great job on the "Blog Preview Card" project! Your implementation is clean and shows a good understanding of the basics. However, I noticed a couple of details that could be refined:
Hover Effect on the Title (h1): The design specification calls for a hover effect on the h1 element within the card. Instead, you’ve applied a hover effect on the entire card that increases the box shadow. While this does add some visual interest, it would be great to also include the hover effect on the h1 to match the design.
Typography Settings: It seems like the line-height and letter-spacing might have been overlooked. Ensuring that these settings are accurate can really elevate the readability and overall aesthetics of the text.
Overall, you’re doing an excellent job, and with a few tweaks, your project could be spot-on with the design! Keep up the great work and happy coding!
Marked as helpful1 - @MirkoRinkeSubmitted 3 months ago@mariokreitzPosted 3 months ago
perfect :D only the text at the bottom is displacing the layout for perfection: just remove it
Marked as helpful1
