Skip to content
OverviewSolutions
5
Comments
7
Amin Alizadeh
@M-AminAlizadeh

All comments

  • Amin Alizadeh•200
    @M-AminAlizadehPosted 4 months ago

    Hey @yasminhasann

    Congrats on finishing your first challenge it's nice

    To make it more like a design as you see it's not centered vertically

    You can add this style to your body element to make the card completely centered

    body {
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
}

    Happy coding

    Marked as helpful
    0
  • Gabriel Nascimento•60
    @GabrielNP96Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I was proud to finish the project. If one day I redo the project I would make it more responsive.

    Social Links

    2
    Amin Alizadeh•200
    @M-AminAlizadehPosted 4 months ago

    Hey @GabrielNP96

    Nice job on completing this challenge

    I think if you add padding to the main-div container it will be perfect exactly like the design

    happy coding

    Marked as helpful
    0
  • Abdelrhman Yasser Ali•60
    @Eng-Abdelrhman100Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    make it responsive

    What challenges did you encounter, and how did you overcome them?

    make it responsive

    What specific areas of your project would you like help with?

    please rate and tell me tips to improve thank you very much

    Recipe Page

    1
    Amin Alizadeh•200
    @M-AminAlizadehPosted 4 months ago

    Hey @Eng-Abdelrhman100

    I hope you are well

    Nice job

    I suggest adding margin-top and margin-bottom to the main element to make it a distance from the top and bottom of the screen like the design

    Plus update your preview link I think you misspelled Mentor_6 with mentor_6

    Happy coding

    0
  • Michael King•90
    @mking0823Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that its finally starting to click. I'm also proud of the fact that I was able to use the feedback I got from my last project ( improving centering items with grid) right away. It took me a few times to get to this point but unless I did something wrong that I'm not aware of I wouldn't change it.

    What challenges did you encounter, and how did you overcome them?

    I'm still a little confused on when to push things to git hub and what I should put for my commit messages. I usually do the initial commit and then not push again until I'm done with the project.

    What specific areas of your project would you like help with?

    If possible some tips on git and git message like when to push updates and I think I'm still not centering my cards vertically correctly.

    Basic HTML and CSS learning box model and git.

    2
    Amin Alizadeh•200
    @M-AminAlizadehPosted 4 months ago

    Hey @mking0823

    I hope you are well

    About learning Git I suggest you to watch this video -- it's old but gold for beginners

    The core commands are:

    • git clone
    • git status
    • git add
    • git commit
    • git push

    I suggest you don't overcomplicate it to yourself

    Marked as helpful
    0
  • AKASH PARTE•20
    @Akash-750Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    write here feedback..

    profile

    1
    Amin Alizadeh•200
    @M-AminAlizadehPosted 4 months ago

    Hey @Akash-750

    I hope you are doing well

    Happy to see you create your first project 🎉

    These are some feedback about your project that can be improved:

    1. As you see in the preview link your profile card isn't responsive on the mobile phone with (375px) width try to make it responsive using Flex box and min-height: 100vh
    2. Try to give a dimension (height and width) to the profile picture it should be a circle, not an oval you can fix this by setting the same value for width and height
    3. According to the challenge, you have to give hover effect to the social links To do that check this link

    I hope these items will be beneficial to your project

    If you need more help or question reply to this comment

    Happy Coding 👨🏼‍💻

    0
  • Amin Alizadeh•200
    @M-AminAlizadehPosted over 1 year ago

    Hi @luka-tchanukvadze

    First I want to say I'm happy to see you finished the project

    These are my suggestions for this project to make it much better and similar to the design:

    • Please try to use semantic tags instead of div tags because it's much better for accessibility and SEO.

    • In the Bill, Select Tip, and Number of people sections for the input part you use type="text" I suggest using type="number" instead of that because these inputs values can't be alphabet it's only can be numeric and dot.

    • Please try to use the proper names for your classes I suggest you use BEM for more info about this method you can check out this link.

    • In the index.js file you get select tip numbers individually but you can do this by giving all of them the same class for example select-tip__btn and using querySelectorAll it will give you an array of them and you can loop inside them.

    • As you see in this link you repeat the same code 5 times and one of the principles of clean code is DRY (Don't repeat yourself) you should put this event listener inside a loop (forEach or for ) loop.

    • According to the design you should show the error when the user put 0 in the Number of people section by showing the error message on top of it and making the border of the input red but you use alert instead of that (alert is not good for the UX).

    • Your UI is acceptable but there is a way to be like the design (Please review the design and pay attention to the details like padding in inputs in select-tip buttons and other parts.

    I hope my suggestions beneficial to you

    Happy coding

    Cheers🎉

    Marked as helpful
    0
  • Amin Alizadeh•200
    @M-AminAlizadehPosted over 3 years ago

    Hi🙋🏻‍♂️ for changing the color of the image to your ideal color there are multiple ways but one of them I use a lot is the mix-blend-mode: multiply; property for more info go to this link :w3school

    and I sent you a pull request at GitHub to how to do it check that out too

    2