@musiolmarcoSubmitted 2 months ago
Full-stack developer delivering robust, scalable, and visually stunning web applications. Specialize in MERN, Tailwind CSS, and responsive design. Proficient in Laravel, Django, CMS, and Bootstrap/Vanilla CSS/SCSS.
I’m currently learning...Typescript and SCSS
Latest solutions
Latest comments
- @TedJenklerPosted 2 months ago
Hi @musiolmarco,
I have some suggestions to help improve your project:
Semantic Elements: I noticed you're using <div> elements. Consider replacing these with <footer> and <main> to align with HTML5 best practices. The <header> can be removed as it's semantically incorrect for this project. Typically, <header> should be used for elements like <nav> or a logo, at the top of a page.
Animations: To make your project stand out more, consider adding animations. I recommend watching a YouTube tutorial on "accordion with animation" and then refactoring your code without external help. This will enhance the user experience and give your project a polished look.
SEO Enhancements: Add SEO title and description tags to all your projects. Try sharing your project on Discord before and after implementing these changes to observe the differences in visibility and engagement. This practice will significantly improve SEO and click-through rates on real projects.
Keep up the great work!
0 - P@nishanth1596Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
This is the first challenge I’ve completed using React.js. I’m proud to have finished it in a short amount of time, as I’m becoming more comfortable with coding. I’m excited to continue improving every day!
What specific areas of your project would you like help with?I'm having trouble adding a cyan background color on hover for an image. Despite my efforts, I haven't been able to achieve the desired effect. I would greatly appreciate any help or suggestions on how to fix this small issue.
Thank you in advance!
@TedJenklerPosted 2 months agoHi @nishanth1596,
I have some additional feedback to help improve your project:
Content for ::before and ::after: I noticed that the first feedback missed mentioning content: "". This is essential for ::before and ::after pseudo-elements. Using this overlay method, as @MarziaJalili mentioned, is recommended because it allows you to add hover effects and animations to the other layer while achieving the desired overlay effect.
<main> Element Usage: It seems you're using the <main> element incorrectly. In your index.html, you can replace the #root div with a <main> element, provided you're not including a <footer> or <header>. This aligns with best practices for semantic HTML.Reducing Divs and Containers: You're using too many <div> and container elements. Aim to minimize these where possible. I recommend learning more about Flexbox to reduce the complexity associated with extra padding and margins in your card layout. Simplifying your structure will result in cleaner, more maintainable code, which is especially helpful in larger projects. (In React, you can use <></> for cleaner code when working with components.)
List Element Usage: Be cautious with how you use lists (<ol> or <ul>). These should only be used for ordered or unordered lists. Misusing them can confuse the structure and semantics of your content.
SEO Practice: I recommend practicing the use of SEO titles and descriptions in all your projects. Try adding these to your index.html, then share your project on Discord or social media before and after implementing these changes to observe the differences in visibility and engagement.
Keep up the good work!
Marked as helpful0 - P@RogeanCostaSubmitted 2 months agoWhat challenges did you encounter, and how did you overcome them?
Hello! I'm very excited to share my solution to this challenge with you! 😊
In this challenge, I learned something new: How to work with @font-face to use fonts whose installation files are present in the project directories. 😲
This is the first time I've done this and it was really exciting and challenging to learn how to do it. I was only used to using fonts through a connection with Google Fonts, not downloaded this way.😁
These two resources helped me a lot in this challenge ✔:
Youtube Video Stackoverflow Discussion
What specific areas of your project would you like help with?I have some questions about my solution e about this challenge 🤔...
-
Is the way I used @font-face correct? Most of the examples I saw did not include more than a single file, as is the case in this example. 😕
-
Is there any way to optimize my CSS code? I think it is too long, but I have the impression that it would be possible to be more precise and reduce the number of lines. 😅
-
This was the first project in which I decided to work with
box-sizing:border-boxand I had some difficulties. One difficulty was that I could not get the border to be exactly 1px, as the design showed. When adding the 1px border, the content area became a decimal and the border as well (0.800). How could I solve this problem? 😭 -
Another difficulty I had, and I think it may have been because of the border-box as well, was that I could not increase the height of the image to 501px in the mobile design, it was 484px, if I am not mistaken. Is there any way to achieve this? 😣
-
At the end of the challenge page there was a text like this in the ideas section: "The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries.". I can't think of a way to do this. I even looked it up, but it seemed complex to me, using a calc function with calculations involving different units. Is there another, simpler way to get the result of this idea? 🤯
@TedJenklerPosted 2 months agoHi @RogeanCosta,
Here are a couple of suggestions to enhance your code:
Responsive Fonts: For responsive typography, consider using the clamp() function. It allows you to set a minimum size, preferred size, and maximum size for text, making it responsive without needing media queries. This is a best practice for modern, adaptable designs.
Simplify Structure: When building your project, aim to use as few <div> elements or containers as possible. Currently, the card is overcomplicated with too many divs and margins. You only need a single card container and a container for the card footer. Refactor the project using Flexbox, and use divs and containers sparingly. This approach will result in cleaner, more maintainable code, especially beneficial in larger projects.
Keep up the excellent work!
1 -
- @KamalepSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Thank you
What challenges did you encounter, and how did you overcome them?Thank you
What specific areas of your project would you like help with?Thank you
@TedJenklerPosted 2 months agoHi @Kamalep,
Here are a few suggestions to further improve your work:
Semantic Elements: Try to use semantic elements like <main> and <footer> in all projects, especially when including a Frontend Mentor footer link and a main content area. This practice enhances SEO and accessibility, making your site more user-friendly and search-engine optimized.
Flexbox for Layout: Instead of relying heavily on margins and padding, it's best practice to use Flexbox and gap for layout management. This simplifies the structure and reduces complexity, particularly in larger projects. Add margins and padding only when necessary to keep the design clean and maintainable.
SEO Practice: This project is an excellent opportunity to practice SEO by adding a descriptive title and meta description. After implementing these, share your project on Discord or social media to observe the differences in visibility and engagement.
Keep up the great work!
Marked as helpful1 - P@przwroSubmitted 2 months ago@TedJenklerPosted 2 months ago
Hi @przwro,
Nice job on making the project responsive! While testing it in Chrome DevTools, I noticed that when you open it on mobile, the whole body element shifts when toggling. I recommend looking up a YouTube tutorial on "accordion with animation" and refactoring your code accordingly. This can help make the transitions smoother and avoid the body movement issue.
Regarding semantic elements, while it’s great to use <header> and <main>, it’s important to use them meaningfully. Think of HTML like building blocks your section of the site shouldn’t have its own independent header and main unless it makes sense within the larger context. Misusing semantic elements can be worse than omitting them. For instance, .layout-container could be a simple <div> or <main>, Header is not needed.
Keep up the great work, and happy coding!
Marked as helpful0 - @CalebM7Submitted 2 months agoWhat are you most proud of, and what would you do differently next time?
I am proud of attempting and completing the challenge. Maybe next time I should experiment using grid when working on a similar project or use both flexbox and grid. I only used flexbox for the card.
@TedJenklerPosted 2 months agoHi @CalebM7,
I read the previous feedback and wanted to add a few more points:
Width Management: It’s more efficient to define the width in one place and make other items either 100% width or leave them natural. The less CSS you write, the better. While using variables is beneficial, over-engineering with too many variables isn’t necessary. Reserve variables for animations, colors, and, in some cases, consistent padding or margins if you're following a style guide.
Min-Height vs. Height: Using min-height is generally advantageous, as long as you account for the smallest breakpoint (typically 320px). Avoid using height whenever possible; instead, use min-height to ensure elements have a minimum height when needed without being too rigid.
Div Usage: It looks like you’re overusing <div> elements. This solution can be streamlined with Flexbox, using gap, margin, and fewer containers. My tip is to always aim for minimal <div> usage. In larger projects, excessive nesting can quickly make your code unmanageable. If you’d like an example, I can provide one, but I highly recommend watching a Flexbox tutorial or reading the documentation. Then, try redoing this project to solidify your understanding through trial and error.
Happy New Year and good luck with your continued learning!
0
