thamu-acn• 200
@thamu-acn
Submitted
Daniel Alejandro Cano Cardona
@Dacardonac
All comments
@Dacardonac
Posted
Hi! I hope you are very well, I was reviewing your solution and everything is super good, congratulations, I found some points to improve and I would like to share them with you.
-
Metadata: It's important to optimize your site's Metadata to improve SEO and help search engines index it better. This includes adjusting the title, description, keywords, and meta tags to define your content and make it easier to discover, in this article you will find more information on this topic: Metadata and SEO.
-
HTML Semantics: Using semantic tags like
<header>,<article>,<section>, etc., improves the structure and readability of your code. It also enhances accessibility for users with screen readers, making navigation clearer, in this link you can read more about that: HTML Semantics. -
Color Contrast: Ensuring proper contrast between text and background is crucial for accessibility, especially for users with vision impairments. Improving this makes your content more readable and accessible to everyone.
-
.webp Image Format: Using images in
.webpformat is a great way to improve site performance, as this format reduces file size without losing quality. This speeds up page load times, benefiting both user experience and SEO. -
Grid: In the grid you implemented, a better structure would be using
grid: 1 / span 2. This is a best practice because it clearly defines where the element should expand from and to, you can test it and practice with this page: Layoutit.com.
By implementing these changes, you'll optimize both the performance and a11y of your site, improving the overall user experience, I hope my comment is of great help. Keep up the good work!
Greetings!
0-
- Pwebdevbynight• 240
@webdevbynight
Submitted
@Dacardonac
Posted
Hi Webdevbynight,
I hope you're doing well. I reviewed the solution you sent, and overall, it looks great. However, I'd like to offer a few suggestions for improvement:
-
Version control: I recommend making more frequent commits. They act as checkpoints in your project, making it easier to track changes and recover if something goes wrong.
-
Metadata: Don’t forget to include metadata in your HTML. This helps improve your page's SEO and boosts your ranking in search engines, In this link you can read more about that: Metadata and SEO.
-
HTML semantics: Your HTML structure is good, but I suggest focusing more on semantics. This will enhance both the accessibility and readability of your code, you can read more about that in this link: HTML Semantic.
-
Accessibility: Review the color contrast in your project, as some combinations don’t contrast well. Improving this will boost accessibility and have a positive impact on future audits.
-
Performance: To enhance performance, I recommend using
.webpimages. They're lighter and load faster in browsers, improving user experience.
0 -
What specific areas of your project would you like help with?
I mainly need help with BEM and accessibility and HTML semantics
@Dacardonac
Posted
Hi Luka! I hope you're doing well. I was reviewing your project, and everything looks amazing. I want to congratulate you on the excellent solution. I didn’t find any major errors, just a few minor points that you could address to improve the SEO and Accessibility of your page. I ran an audit using Google’s Lighthouse tool, and it provided some recommendations for enhancing these aspects. Below, I’ve outlined how you can improve these values in your project:
-
The image or icon of the shopping cart in the button is missing the
altattribute, which reduces the Accessibility of your page. -
I noticed that your HTML is missing Metadata tags, which are very important for describing your project, improving your SEO, and positioning it better in browsers or search engines. Here’s a link where you can read more about this: Metadata and SEO.
-
Review your HTML structure; you could improve its semantics by using more specific tags such as
<main>,<header>,<article>,<section>, etc. Below is a link to learn more about HTML semantics: HTML Semantic. -
To improve the Performance of your page, you can change the format of your images to
.webp. -
As a final piece of advice, I recommend researching and using Conventional Commits, as they are very useful for understanding and maintaining clearer control over Commits. Here’s a link where you can read more about Conventional Commits: Conventional Commits.
As I mentioned, these are minor points; your project is well done overall. I hope this feedback is helpful and serves as a learning opportunity.
Keep developing, and I wish you the best of luck!
0-
- Eugen• 60
@Fender60
Submitted
What challenges did you encounter, and how did you overcome them?
I did the project without a design file for figma, I did everything by eye, there were problems with indents and dimensions.
What specific areas of your project would you like help with?
Any advice or comments would be appreciated.
@Dacardonac
Posted
Hello Fender60,
I hope you're doing well. I reviewed your solution and want to congratulate you on your great work. I also noticed a few areas for improvement, and I'd like to share some feedback with you:
SEO: Adding Metadata to your HTML can help improve your page's SEO and boost its visibility in search engines. Metadata and SEO
Performance: I recommend using
.webpformat for images, as it will enhance your project's Performance.HTML Semantics: Your HTML could benefit from better Semantic Structure. Here’s a link to help you improve this aspect: Semantic in HTML.
Version Control: It's a good idea to make Commits whenever a part of the project is complete. This acts as a Checkpoint, allowing you to avoid losing progress if something goes wrong.
Sass and Components: I noticed you're using Sass for styling, which is excellent. To keep your Styles organized, consider breaking them into Components to prevent files from getting too large. Here’s a link to read more about it: Sass Guide.
README: You've used the
README-template.mdfrom Frontend Mentor, which gives your project a professional touch in the README File.Keep up the good work and good luck!
0 - MrLanter• 140
@MrLanter
Submitted
What are you most proud of, and what would you do differently next time?
I am proud of myself for using the `` tags and understanding their functions more precisely.
What specific areas of your project would you like help with?
-
Is the code well organized ?
-
Is the accessibility used sufficient ?
-
What are the possible improvements ? (I will soon start using SCSS)
@Dacardonac
Posted
Hello MrLanter, I hope you are doing very well. I was reviewing your solution, and I want to congratulate you for the excellent work you sent. Everything is good. I only see one point to improve in your project, and I want to give you some feedback.
-
Check your HTML and its Semantics, you have a header tag inside a div tag that is inside the main tag, which is wrong semantically, here I let you a link where you can read about that: HTML Semantic Elements
-
Another point is that as a recommendation, you can save lines of code by using the modularized styles with Sass.
That's all, the project in general is super good, congratulations MrLanter!
0 -
- MrLanter• 140
@MrLanter
Submitted
What challenges did you encounter, and how did you overcome them?
I couldn't get the yellow rectangle containing 'Learning' to have the correct width. I had to use
max-width: max-content, a property I learned from Intellisense.What specific areas of your project would you like help with?
Is the semantics of my project correct ? Is the code well organized ? What improvements are possible ? I feel like the avatar hover animation is not very smooth, do you have any idea how to fix this ?
@Dacardonac
Posted
Hello MrLanter, I hope you are doing very well. I was reviewing your solution, and I want to congratulate you on the excellent work you sent. I also want to give you some feedback on certain points where you can improve your project.
-
The design is excellent and very similar but you could improve it using the correct values they give you in the Figma file.
-
Something that I saw missing in your HTML is the Metadata, which helps you improve the SEO and which positions you better in the search engines, in this link, you can read more about that: Metadata and SEO
-
The last point is like a recommendation: Investigate the Modularization of styles with Sass. This will help you maintain better order, make the code more readable, and save lines of code.
I hope that with my comment you can improve, I wish you good luck and that you are very well.
Marked as helpful
0 -
- strach22• 30
@strach22
Submitted
What are you most proud of, and what would you do differently next time?
I am practicing and learning, it took me like 2 hours
What challenges did you encounter, and how did you overcome them?
Remembering name tags
What specific areas of your project would you like help with?
Any comments can be useful
@Dacardonac
Posted
Hello Strach22, I hope you are doing very well, congratulations on your project and the solution you have delivered. In this comment, I want to give you feedback in the form of constructive criticism in which I will provide you with some recommendations and materials to improve your project in certain aspects.
- Try to keep your project with only language, in this environment, it is better and is a good practice to keep everything in English, in this case, you have multiple files CSS, and SCSS named in Spanish.
- Try to use the Metadata in HTML because this data improves your SEO and makes your project more accessible in the browser, in this link you can read about that. Metadata in HTML
- Another point is to try to use the Methodology BEM, this methodology helps you to improve the code structure and to relate the classes. Here I leave you a link to read about and improve this aspect of your project. Methodology BEM
- In this project I can see the file css.map, in projects try not to expose the source map of the security application.
- When you work with Sass try to have all styles modularized and in components so that way you will have more order in your project, in this link you can read about that. Sass documentation
0
