@ana-cassia-invernizzi
Submitted
lirone
@LironeFitoussi
All comments
- lirone• 320
@LironeFitoussi
Posted
Hey Ana, Great Job You've done There! Your code looks good overall. Here are a few areas for improvement:
Ensure that the image paths in the background-image properties are correct and that the images are in the specified locations.
Consider adding more comments in your HTML code to describe the purpose of each element, especially if the page becomes more complex in the future.
While the code is well-organized, keeping your CSS rules organized specificity and purpose is a good practice based on there to improve maintainability as the codebase grows.
You might want to include a font-weight property for your h2 elements within the .card_info container, as it currently inherits the font-weight from the global h2 styling. For example, you can add font-weight: 700; to .card_info h2.
Verify the paths for your favicon (href="./images/favicon-32x32.png") and ensure that the favicon file is present in the specified location.
add letter-spacing on perfume
Keep up the good work, and best of luck with your coding endeavors!
Marked as helpful
2 - Serdar Çelik• 130
@SerdarSteel
Submitted
Thanks a lot for everything
lirone• 320@LironeFitoussi
Posted
Hey Serdar Çelik,
I wanted to commend you on your recent HTML and CSS work on Frontend Mentor. Your coding skills are evident, and your project layout and design are impressive.
I do have a couple of suggestions to enhance your project:
-
Typography Enhancement: Consider applying uppercase styling to the text in the "Achievements" section. This could significantly enhance the visual impact of these accomplishments.
-
Image Integration and Filters: In the section on the right, it seems there might be an issue with image placement and filter application. To address this:
- Utilize a
<div>element as a container. - Define a background image within this
<div>. - Insert another nested
<div>, apply a specific class, and set the desired background color in your CSS.
- Utilize a
Your dedication to detail is evident, and your consistent efforts to improve your skills are admirable.
Feel free to reach out if you need any clarification on my suggestions.
Keep up the fantastic work!
Warm regards, Lirone Fitoussi
1 -
- Aureline• 150
@aureline12
Submitted
lirone• 320@LironeFitoussi
Posted
Hello,
You've taken a promising step forward in implementing the Results Summary Components. I'm here to help you refine your code and build on your skills. Your dedication is evident, and with a few adjustments, your code will shine even brighter. Let's dive into some suggestions:
Structured Semantics: Your HTML structure is on the right track. Consider embracing semantic HTML elements like <header>, <section>, <article>, and <footer> for clearer organization and meaning.
CSS Harmony: You've established a foundation with CSS classes. To level up, group similar styles under comprehensive classes. For instance, condense repetitive classes for reaction, memory, verbal, and visual cards. This enhances efficiency while maintaining clarity.
Responsive Brilliance: Your media queries are commendable for responsiveness. Continue refining the layout for various screen sizes to ensure content remains legible and well-arranged.
Styling Confidence: Your button styling is well executed. As a suggestion, you could use a consistent naming pattern like .continue-btn for greater clarity.
Colors Made Easy: You've embraced color variables, a mark of thoughtful coding. Extending this practice throughout your CSS will contribute to easier maintenance down the road.
Comments for Communication: Introducing comments can provide context to both yourself and other developers. Adding comments to clarify specific sections or classes can make your code more approachable.
You're on a promising path, Lirone! Coding is an evolving journey, and your willingness to learn and adapt is truly inspiring. Embrace these suggestions as opportunities for growth, and remember that each step you take contributes to your development as a skilled developer. Keep coding, keep exploring, and keep soaring!
Warm regards, Lirone Fitoussi
Marked as helpful
0 - Jessica Rosier• 150
@jessicarosier
Submitted
I'm not sure how to get the greyscale image to match the model page. I played with the filter property to try and get close but I feel like there has to be a better way to accomplish this. Any feedback/suggestions on what to research to accomplish this are welcomed.
lirone• 320@LironeFitoussi
Posted
Hey there,
You've done a commendable job, covering a wide range of necessary aspects. Keep up the great work! However, I have a few suggestions that could further enhance your work.
It appears that the left side padding hasn't been proportioned correctly. I suggest revisiting this issue to align it more closely with the original design. Additionally, the header doesn't seem to be utilizing the proper font weight and font family as specified in the style guide. Take a moment to review the style guide once again to identify any missed details.
Moving on to the code itself: it seems you've applied an excessive number of classes to a single element. To improve this, consider consolidating your CSS properties within the code. For instance, rather than creating a separate "justify-content-center" class, you could directly apply this property to the container element.
Moreover, it's worth noting that there's an individual divider named "main" available. Utilize this instead of creating a new section and naming it "main."
Regarding "@import 'resets.css';," it might not be necessary. You can simply link this file in the HTML as the first linked file to avoid redundant reassignment (remember the principle of DRY - Don't Repeat Yourself).
As previously mentioned, properties like "justify-content," etc., don't require individual classes. These are CSS properties that can be directly added to a div.
In some instances, you've created multiple individual classes targeting similar properties. For example, the padding and margin utility classes such as
.p-5,.p-10,.m-5,.m-10, and others, could be merged into broader classes to streamline the code and reduce repetition.By grouping related properties under fewer classes, you can adhere more closely to the "Don't Repeat Yourself" (DRY) principle. This approach simplifies your code and makes future updates more efficient.
Consider designing classes that encompass a range of values for specific properties, like
.padding-small,.padding-medium, etc., instead of creating separate classes for each value. Similarly, defining a few classes that combine multiple properties, like.flex-centerforalign-items: centerandjustify-content: center, could improve readability and consistency throughout the project.In addition to these suggestions, your dedication is evident, and with these improvements in mind, your work is sure to continue progressing. Your dedication is evident, and with these suggestions in mind, you're sure to continue progressing.Keep up the good work!
Best regards, Lirone Fitoussi.
Marked as helpful
0 - poojalakuri• 30
@poojalakuri
Submitted
lirone• 320@LironeFitoussi
Posted
dont forget the <body> background color background-color: hsl(30, 38%, 92%);
p.s. all fonts and size you can find on the docs youvgot
Marked as helpful
0
