anindyaprayoga• 40
@anindyaprayoga
Submitted
AliAsghar Zare
@iliAsghar
All comments
- AliAsghar Zare• 70
@iliAsghar
Posted
Goodjob! 🙂✅
a quick note : while using
<ul>for your buttons is valid, i dont think the<ul>was necessary , and for Buttons , other than Form Buttons , it's usually recommended to use<a></a>simply because with<a>s you can link the button to somewhere else . (<button>s are used to Submit and to my knowledge can't be linked to somewhere else.)0 - Lalit Kumar• 40
@kumarlalit53455
Submitted
What are you most proud of, and what would you do differently next time?
it was my first challenge in web development.
i will try to do harder than this challenge next time.
What challenges did you encounter, and how did you overcome them?
i faced problems in table. I overcome this by studing in online sites like w3schools.
AliAsghar Zare• 70@iliAsghar
Posted
Good job! ✅🙂
- tip : you could use pseudo classes like
:not(:last-child())to select all the childs but the last one . this could help with designing the table (the last row shouldn't have aborder-bottom
Marked as helpful
0 - tip : you could use pseudo classes like
- Anifowose Temitayo• 250
@TheLius1
Submitted
What are you most proud of, and what would you do differently next time?
I am so happy to know about Frontend Mentor and it's a great achievement to build this project in just a day and by this, its improve my HTML and CSS skills and i hope to do better next time
What challenges did you encounter, and how did you overcome them?
i literally forgot some positioning in CSS so I had to use chatGPT as an assistance guild which helped me and I now understood positioning in CSS better
What specific areas of your project would you like help with?
My grocery landing page
AliAsghar Zare• 70@iliAsghar
Posted
GoodJob! ✅
👀 i like your choice of tweaking the design files to match your profile! :D
some small notes on your code :
-
i noticed you didn't declare any
font-faces in your CSS . Declaring font-faces ensures that even if the user doesn't have the desired font family , it loads it for them. (for me your buttons don't have a font family ; and i noticed you didn't actually declare any font family for them in your CSS. it might have been because of a default font on your browser that confused you) . . you can read aboutfont-faces Here . -
Defining specific Class names for your elements helps you to get a better understanding of the layout and prevents any specificity problems in the future . i recommend sticking with a set Naming Convention like BEM . (p.s: I just noticed you did use BEM naming to name most of your classes, but i think the whole point of BEM is to not have any floating classes that don't fit into BEM)
That's all! . i hope you're having a great time, and
Happy coding! 🤗🙂
0 -
- Pipendog• 40
@Pipendog
Submitted
What are you most proud of, and what would you do differently next time?
Proud that I finally found out how to center boxes on a page.
What challenges did you encounter, and how did you overcome them?
Dynamic layout is struggle for me. Still learning how to make my page looks good in any device.
What specific areas of your project would you like help with?
Need help with sizing and dynamic layout. To make my page looks good in any device
AliAsghar Zare• 70@iliAsghar
Posted
Good Job! ✅ you did great.
for a better understanding of Responsive Layouts, i know a free course from kevin powell that you could maybe have a go for. I'm not sure if this is allowed here, and I'm not trying to advertise anything. this is just something that helped me get a better knowledge of Responsive layout.
Conquering Responsive Layouts - Kevin Powell
it's a 21day course and it's formatted in a way that opens the tutorials day by day. have fun Coding! 🤗
Marked as helpful
1 @Phelipe97
Submitted
What specific areas of your project would you like help with?
If you guys help me with the table lines in the end of this site i will apreciate . thank you very much! !
AliAsghar Zare• 70@iliAsghar
Posted
you could use the :not() and :last-child() pseudo class and come up with something like this:
.table-row:not(:last-child()) {...}and now you can give a style to all the rows, except the last one
happy coding!
1- Alisabah Separ• 100
@AliSepar
Submitted
AliAsghar Zare• 70@iliAsghar
Posted
i don't know if it's from my side, but your repository link doesn't work
0 - Adrian Reina Lobaina• 200
@adrian-reina-391
Submitted
What are you most proud of, and what would you do differently next time?
I'm only proud of Not Having Given Up
What challenges did you encounter, and how did you overcome them?
Honestly, this was more difficult than other more complex challenges I've done. The worst part was getting a certain amount of space between the bullets and the text of the lists. It took me a long time to find a solution that worked even after having everything else ready. I think it's almost perfect, it looks good on mobile-first and desktop too.
What specific areas of your project would you like help with?
...
AliAsghar Zare• 70@iliAsghar
Posted
nice! ✅ I'm already knee-deep in the midst of this challenge. :D making the layout responsive is killing me :)
some quick notes on your solution :
- i think you used the wrong color hex for the text elements (not blaming you though , the colors made me insane too 😵💫)
- in your Nutrition List, to add the
border-bottoms , you could use:not(:last-child())to avoid the last row to have aborder-bottom - for big , heavy projects , developers have a specific Naming convention that they use throughout the designing process . i'm not saying it was necessary for this challange , i'm just saying by using it and sticking to one, you'll learn the Ups and Downs of it and learn to quickly name the elements based on the context. one of my favorite Naming conventions is BEM Naming . you can check that out Here
1 - Skalex Stuch• 210
@mussino
Submitted
What are you most proud of, and what would you do differently next time?
It was easy, I will spend more time fixing the screen size maybe.
What challenges did you encounter, and how did you overcome them?
Not too much
What specific areas of your project would you like help with?
Any feed back always welcome!
AliAsghar Zare• 70@iliAsghar
Posted
great job! 💪 you did well in layout and Positioning the elements. some things that I think needs a bit of a tweak:
- i noticed you used <section> for designing the buttons . it's usually recommended to use
<a></a>for buttons (other than form buttons . those should be<button>, because it can submit a form entry) . it's because the<button>tag or any other tag can't link to another website . according to MDN - <Section>, <section> is a generic sectioning element, and should only be used if there isn't a more specific element to represent it. - as it was intended ( i think it was, maybe i'm mistaken 😶) , it's better to have a
:focusstate for the buttons . simply an outline around them to help the keyboard users. - even if a project is small and can be done without them , Defining a class for each element will get you used to naming and nesting the elements better . one simple naming convention is the BEM naming . you can check it out HERE.
i hope you have fun continuing your Web Development journey , Keep up the good work! ✅🤗🙂
0 - i noticed you used <section> for designing the buttons . it's usually recommended to use
