@LupoNetnSubmitted about 1 month ago
P
Serhii Orlenko
@grifanoAll comments
- @grifanoPosted about 1 month ago
Hi! Congratulations on completing the challenge! 🎉 I hope this isn't your final solution, and that you'll continue working on improving it, especially the styles to match the design.
Here are a few tips to help you improve your code:
-
HTML: Try to give your classes more meaningful names. Avoid using numbers like "hidden-2" as it makes it harder to understand what the class is doing.
-
CSS: I noticed the styles were missing, but remember that user experience is a key part of web development. Adding styles will really make your project stand out.
-
JavaScript: To make your JS cleaner, you can break it down into smaller functions. Also, using
addEventListenerfor form handling is a good idea, like this:addEventListener('submit', function() {})
Feel free to check out my code if you want.
Overall, great work! You've shown a lot of progress and learned some valuable skills that will help you become an even better web developer. Keep it up!
0 -
- @KingoruovieSubmitted 2 months ago@grifanoPosted 2 months ago
Great job! The code is well-organized and easy to read. I just have a couple of suggestions to share:
Try using const for variables that don’t change, and only use let when you know the value will be reassigned. It's a good practice for cleaner code. For SVG icons, there’s an interesting approach I learned in my full-stack course: using an SVG sprite. You can check out this article for a quick intro: https://medium.com/@sorlenk/introduction-to-svg-sprite-004a99bcd2bd.
Keep up the great work, and remember—every small improvement you make brings you one step closer to mastering your craft!
0 - @DalaScriptSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
- I am proud that I successfully brought this project to the end. 🎉✅
- There were some challenges with the images, but nothing too difficult. 🖼️🔍
- Any advice would be appreciated. Thanks in advance! 🙏💡
@grifanoPosted 3 months agoHi, great job with the solution! Keep up the good work!
Here is a few improvements: The solution includes some semantic HTML, such as proper use of <section>, <header>, and <footer>. However, improvements can be made by ensuring each section has meaningful roles, such as using <main> for main content and limiting to one <h1> for SEO and accessibility.
Accessibility: Color contrast is generally good, but some improvements can be made by ensuring all images have descriptive alt texts. Add ARIA labels to interactive elements, like buttons, for better screen reader accessibility.
Layout on Different Screen Sizes: The layout is responsive and adjusts well across different screen sizes, from mobile to desktop. However, the text in some sections (like the subtitle under "Smarter meetings") could benefit from better spacing on smaller screens to avoid cramped appearance.
Code Structure: The code appears clean and well-organized, it can be improved for reusability by using more classes and CSS variables for commonly reused styles.
Design vs. Solution: The overall solution closely matches the design, though there are minor differences, such as I was mentioned before.
0 - @AKdeBergSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
I have implemented the desktop version using Grid and the mobile version using FlexBox. Using two types of layout methods boosts my confidence.
What challenges did you encounter, and how did you overcome them?In desktop version, an item wasn't stretching all the way through the whole cell. Later I found a property called align-items: stretch which solves the problem.
What specific areas of your project would you like help with?Box shadow is still challenging for me to apply. I can see the two white cards has some shadow, it's hard for me to apply. Anybody help me how to have that kind of shadow?
@grifanoPosted 3 months agoGreat job on structuring the testimonial section using the <article> tags—it really improves the semantic clarity! Just a couple of suggestions to make it even better:
- Accessibility: Consider adding <header> tags for the card titles and using role="list" and role="listitem" for improved accessibility.
- CSS Grid: Named grid areas could make your code more readable and maintainable, rather than relying solely on nth-child.
- SEO & Performance: Implementing structured data for the testimonials could boost SEO, and using lazy loading for images might improve page speed.
Overall, it’s looking solid! Just a few tweaks, and it’ll be even more robust. 😊
Marked as helpful1 - @mahbtSubmitted 3 months ago@grifanoPosted 3 months ago
Hi, great job on your work! Here are a few tips to help you improve:
- Try centering your content on the viewport and making it scrollable. Right now, it doesn't scroll properly on smaller window heights. You can check my solution here: https://grifano.github.io/fm-06-four-card/ for some guidance on how to achieve this.
- The design doesn't look quite right on smaller screens. I recommend learning about the mobile-first approach to ensure your designs are responsive.
Keep in mind that our main goal is to make sure users can comfortably consume content on any screen size.
Keep up the good work! 💪
0 - @P-MingiSubmitted 6 months agoWhat are you most proud of, and what would you do differently next time?
nthg
What challenges did you encounter, and how did you overcome them?I wanted to make it without using media query (only for the pic) and using flex wrap for exemple, but i didn't managed to do it, i think it's impossible, or i need function that i don't know yet.
What specific areas of your project would you like help with?How to make it with less @media query
@grifanoPosted 6 months agoHi, great job with the challenge!
Here are a few improvements you can add next time:
• To use different size images for various screens, use the <picture> tag. You can use the <source> tag to define which image should load on which screen size. • You can reduce the number of media queries by using relative sizes for font size, margin, padding, etc. However, media queries are a straightforward way to achieve responsiveness. • Check out the BEM class naming methodology. It will help you create clean, well-structured CSS classes.Keep going!
By the way, your current link to the GitHub repository is incorrect and leads to another project.
0 - @cleverAkanimohSubmitted 7 months ago@grifanoPosted 7 months ago
Hi 👋 Congrats about completing a Recipe Page Challenge! The page looks great, and responsive.
Here are a few suggestions on how you can improve your feature challenges.
- Try to use classes for styling your HTML elements instant ID, using ID is mostly good when you want to do something with JS, or you have a very specific element.
- Instead of using "figure" tag, it is better to use "picture", I recommend reading about their differences.
- To improve your semantic structure, replace <div classs="attribution"> withing <footer>
- For making part of the text bolder, use tags <strong>, or <b> you can read about it and how/when to use them.
Overall, there is always something that we can improve, so just keep going with challenges and try to use new knowledge.
Great job 💪 Keep going!
Marked as helpful1 - @AdalOnShowSubmitted 8 months ago@grifanoPosted 8 months ago
Hi Adal 👋 Congrats on completing this challenge, great job 👏
Here are a few suggestions that help you improve your solution;
- [HTML] You have a h1 tag which is great, however next you use h6 and this isn’t good practice as you jump through h2,h3,h4,h5;
- [HTML] Use the main tag for the main content. In this challenge we don’t have much content, overall I recommend reading more about semantics to you;
- [CSS] You use some useless properties like height for html and body;
- [CSS] Instant of using selector div h1 {...} I recommend setting classes for each element that you would like to style, this makes your code more readable.
- [CSS] Adding transitions for links makes hover look more attractive.
These is a few suggestions, and it is always can be something to improve. You can get back to this challenge when after a while and check your self 🙂
Great job, keep going, and remember that you are better of yourself each day 💪
Marked as helpful1 - @FPPalmeroSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud to have started from 0 a short time ago and realized that I'm improving every day.
What challenges did you encounter, and how did you overcome them?is always being a challenge to make a responsive layout
What specific areas of your project would you like help with?Needing to learn more about responsive using grid
@grifanoPosted 8 months agoHi 👋 congratulations on your great job 👏 The code is very pleasant to read, components look good for each screen size.
I have only suggested using jpg for exporting images like photos. You use SVG format for user avatars, and this format isn’t recommended for photos. It may not be obvious for this particular example, as you have a small image, however, if you export photos that will have a bigger size in SVG you get a huge image, which is not good for website performance.
More practice with responsive layout makes you stronger in this field. I see you use min-width, which is great for your understanding of the Mobile First approach and this is great.
You on the right path, this is a great job and keep going 💪
0 - @kalyankashaboinaSubmitted 8 months agoWhat are you most proud of, and what would you do differently next time?
i dont understand task
What challenges did you encounter, and how did you overcome them?im unable understand task
What specific areas of your project would you like help with?after knowing task i can do it
@grifanoPosted 8 months agoHi kalyankashaboina, I will try to answer your questions. 👉 "I don't understand the task"
- Try to follow Learning Path for Newbie it is a step-by-step guide that helps you understand how to use the FrontendMentor platform
This task is about writing a code and trying to make this card look exactly how it looks in design. You can use HTML and CSS.
0 - @YazdunSubmitted about 2 years ago
Hello everyone 👋 I picked up this challenge to play around with Tailwind and I actually fell in love with it !
I created a modal for form submit with some cool Lottie animation, so make sure to submit an email to see the modal 😁
I'm looking forward to hear some feedbacks on this, Thanks in advance.
@grifanoPosted about 2 years agoHi, man great work. I noticed some small issues on Safari. When the animation was complete, there is some extra space was appear, the whole container was stitched, and the content aligned slightly to the left. Maybe overflow hidden could help?
Marked as helpful0 - @PeoShmeoSubmitted over 2 years ago
How can I improve my code syntax?
How can I improve my HTML and CSS formatting?
Do I have any weird redundancies?
I didn't use 'flex box' because I had no idea what that was. Should I have learned and used it in this scenario?
@grifanoPosted over 2 years agoHi, Looks good. I see that you making accents on JS, and this is looking good. Unfortunately, I don’t have much experience in JS good practice. My suggestion is just to add some transition to make the hover looks more pleasant 😉 Also, there are some issues with Accessibility, you can check them. About Flexbox, yes it needs to know, as there are basics for making layout in our time. Also, I recommend learning Grid CSS too. Off-course if you didn’t plan to dive deeper into the frontend, and make focus on programming or even switch to the backend, in this case, you need to know the basics of making the layout. So you can build some fast front for your needs. Good luck 👍
0
