Clever AKANIMOH• 70
@cleverAkanimoh
Submitted
P
Serhii Orlenko
@grifano
All comments
- PSerhii Orlenko• 275
@grifano
Posted
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 helpful
1 - Sharif H. Adal• 30
@AdalOnShow
Submitted
PSerhii Orlenko• 275@grifano
Posted
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 helpful
1 - FPPalmero• 40
@FPPalmero
Submitted
What 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
PSerhii Orlenko• 275@grifano
Posted
Hi 👋 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 - kalyankashaboina• 10
@kalyankashaboina
Submitted
What 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
PSerhii Orlenko• 275@grifano
Posted
Hi 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 - Yazdun• 1,310
@Yazdun
Submitted
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.
PSerhii Orlenko• 275@grifano
Posted
Hi, 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 helpful
0 - Cole Kamgar• 10
@PeoShmeo
Submitted
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?
PSerhii Orlenko• 275@grifano
Posted
Hi, 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 - Troy• 170
@troy03
Submitted
How can I simultaneously hover the social links a border and a logo and there is a problem to my code what advice you will give?
PSerhii Orlenko• 275@grifano
Posted
Hi Troy 👋 You are doing a great job. Keep going 👍 About your issues with these icons. My suggestion is:
- make your <li> to display: flex with align-items and justify center.
- Also, Remove all paddings from <li>, and set fixed sizes for both width and high to 40px.
- flex-grow set to 1 for anchor element, as they had to fill all space.
- font-style: normal to <i> as they have italic style by default. And one more tip, try to play with these elements using the development tool in your browser. In this case, you get fast results and then get to write these changes to your code. Be careful, after you save your code, all the changes, that you’re playing in the browser, will be gone. Because after you save, the browser will reload your page. Keep going, good luck 👍
1
