Skip to content
OverviewSolutions
4
Comments
4
P

Krzysztof Krawczyński

@cravskyPoland, Wroclaw80 points

I am evolving Front-end Developer. My skills include: JavaScript (ES5/ ES6), HTML, CSS, jQuery, Bootstrap 4, GIT- Version Control, Responsive Web Design.

Latest solutions

Latest comments

  • P
    Krzysztof Krawczyński•80
    @cravskyPosted 6 months ago

    Hi! Congratulations on completing this project!

    I have a few comments to help improve it:

    The project preview isn't working as expected. It's displaying the README.md file instead of the live version of your project. Please review your deployment process. You can refer to this helpful video: video Also, make sure to rename firstproject.html to index.html to ensure proper loading of the homepage.

    To enhance code maintainability, consider using CSS variables. Here's a guide that might be useful: CSS Variables.

    It looks like the fonts aren't applied properly. You can fix this by importing them using the @font-face rule in your CSS.

    The color of the "Preparation time" text seems off and might need adjustment for better readability.

    The colors in the nutrition table also seem inconsistent. You might want to review and adjust them for better visual appeal.

    I hope these suggestions help. Happy coding!

    Marked as helpful
    0
  • P
    Krzysztof Krawczyński•80
    @cravskyPosted 6 months ago

    Hi there, congratulations on finishing the challenge!

    However, I noticed that the link to the code repository is not working:
    Your link.
    Additionally, I couldn't find that project on your GitHub profile. Please make sure that the repository is set to public.

    After reviewing your project, I found a few areas for improvement:

    1. The picture in your solution is smaller than in the design.
    2. Since you're using your name, consider adding your profile picture.
    3. The spacing between the buttons in your project is smaller than in the design.

    Congratulations on publishing it on Vercel!

    Keep up the good work!

    0
  • P
    Krzysztof Krawczyński•80
    @cravskyPosted 6 months ago

    Hi, congratulations on finishing this challenge!

    There are some areas that could be improved.

    1. You can use css variables to define colors and reuse them across your project. That way it is easy to replace color in all places at once. LINK
    // example
:root {
    --yellow: hsl(47, 88%, 63%);
    --white: hsl(0, 0%, 100%);
    --gray-500: hsl(0, 0%, 42%);
    --gray-950: hsl(0, 0%, 7%);
}
p {
    color: var(--gray-500);
}
    1. Border on your card seems a little thick, you may try border: 1px solid black;
    2. You may want to adjust image border-radius
    3. There is a way to auto-format your html with keystroke Shift+Alt+F (on window)

    I hope that helps, happy coding!

    Marked as helpful
    0
  • tailor-made-god•120
    @tailor-made-godSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    It is my First build. So I am proud of the project itself.

    Next time I will try to do it in all grid.

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

    The challenge I encountered was center the div in the body itself.

    I over come this by Using Grid. Before I tried do with flex and position, somehow it didn't work for me.

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

    I want help in reducing code and finding what is most effective way to do this in real work environment. That's it.

    QR Code Component using flex and centered by grid.

    2
    P
    Krzysztof Krawczyński•80
    @cravskyPosted 6 months ago

    Well done! Congratulations on finishing this challenge!

    Here are some of the great aspects of your project:

    • You took the time to provide a comprehensive README file and clear commit messages.
    • The design meets expectations.
    • You correctly embedded custom fonts.
    • You utilized CSS variables for colors, which improves maintainability.

    Regarding the centering of the div, it seems there was some difficulty, but I’m not entirely sure what specific issues you encountered. I suggest trying a simpler approach by avoiding the grid and using flexbox instead, which may be easier to work with. Here's a revised version of your code:

    main {
  /* display: grid; */
  /* place-items: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

    Keep up the great work!

    0