Skip to content
OverviewSolutions
5
Comments
14
mbalali63
@mbalali63

All comments

  • mbalali63•150
    @mbalali63Posted 7 months ago

    Hi @InfanteAngel Thank you for the good work. Although the design is really similar to the target design, but please let me review few points that could improve it.

    • the top margin could be increased
    • the preparation time section may have a different background color
    • there are separating lines between each section in the target design. I think it may look much more better if you add it.

    I hope my suggestions be useful. Good Luck

    0
  • mbalali63•150
    @mbalali63Posted 8 months ago

    Hi @halliann Thank you for the great job. your work is really good. But please let me suggest two points, you can add hover effect for the links, as the target design have. and also the font seems to be different than Inter. Good Luck

    Marked as helpful
    0
  • mbalali63•150
    @mbalali63Posted 8 months ago

    Hi @LOKESHIYYAPPAN Thank you for the nice design. your art, really looks similar to the target design. Although the nice look of the work, let me suggest to change the font or font size to become more similar. Good luck

    0
  • mbalali63•150
    @mbalali63Posted 8 months ago

    Hi @Aditya-en your work is great. it is really similar to the target design. I can't suggest anything more than you did, except that adding hover for links may make it look better. Good luck

    Marked as helpful
    0
  • mbalali63•150
    @mbalali63Posted 8 months ago

    Hi @EdwinDev6 You have well used tailwind-css and generated a very good design. However, let me consider few points about the work. The minor differences between your work and the target design, seems to be because you have used tailwind-css values for sizes and colors and so on, and that is completely OK but if you want to use exactly the same colors or font sizes or dimensions, you can use your values in tailwind-css, too. for example to use a custom dimension for width, you can use w-[13px]. and so forth for other selectors. Hope to be helpful for your project.

    1
  • Jeff Gicharu•80
    @jeffgicharuSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm mainly proud of the fact that I was able to finish this challenge despite being very confused when I started.

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

    As I was adding styles in the CSS, there was a element which was not behaving as expected when I tried to style it. I overcame the challenge by trying different possible solutions until I found one that worked.

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

    I would like help in knowing when to add classes to HTML elements and also in the organization of my CSS.

    QR code component

    3
    mbalali63•150
    @mbalali63Posted 8 months ago

    Hi @jeffgicharu Thank you for the great work. The html and css file are well structured and excellent. I just think that your font sizes are too small. it may be good enough if it will be increased from 15px to 19px for the header text and the other 17px. And also please consider the background color which is different from the design. Hope this is helpful for your great work.

    0
  • roopxx•120
    @roopxxSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    This was a great challenge. I used CSS flex box to centre the component however this can also be done with CSS Grid. Next time, I would try to use Grid.

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

    This challenge was quite easy though I found it hard to make the `` position correctly in the QR component. And also getting the correct box shadow was quite a challenge for me.

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

    Having said that I used flex, though I wasn't able to align the text with the exact spacing as provided in design files. I used margins and padding in the `

    First Front-end Mentor Challenge - QR code component

    1
    mbalali63•150
    @mbalali63Posted 8 months ago

    Hi Rupesh Your work is great. Unfortunately your code is not accessible. But the considering the design comparison above, reveals that the font sizes shall be decreased. if the main container (the white box) height be set to 100%, with extra padding, then the overflow of text below the box will be removed. Good luck

    1
  • mbalali63•150
    @mbalali63Posted 8 months ago

    I just wrote the case to the site admin. I am not sure if they will answer or check it, but I hope to.

    Marked as helpful
    1
  • Roraima Lugo González•510
    @roraima1986Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the progress I have made in HTML and CSS.

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

    This challenge at first glance seems simple, but I found myself faced with the challenge of giving styles to the lists, specifically giving color only to the bullets and the numbered list. Investigating the CSS for the lists I only have the following properties:

    • list-style
    • list-style-image
    • list-style-position -list-style-type

    None of these properties serve to give it color.

    To solve the challenge use the ::before pseudo-element. Here is an example:

    .section__options {    
    position: relative;
    list-style: none;
    padding-left: 3rem;
    line-height: 2;
}

.item::before {    
    content:"" ;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--color-preparation);
    position: absolute;
    left: 0;    
    transform: translateY(15px)
}
    What specific areas of your project would you like help with?

    I think that by using the ::before pseudo-element I found the solution to the challenge with lists. I would like to know if there is another way to solve it.

    Recipe Page using HTML and CSS

    1
    mbalali63•150
    @mbalali63Posted 8 months ago

    Hi Roraima Your work is very good. it looks very similar to the target design. And about styling list bullets, I think it may simplify if you use marker. here you can find details.

    Marked as helpful
    0
  • mbalali63•150
    @mbalali63Posted 8 months ago

    Hi ivara

    Your design looks perfect. but as I checked your code, it seems that the mobile and desktop dims are the same. but in the design the desktop is a bit larger. Also the dimensions of your design are much smaller than the target. You know these are really unimportant considerations and the most important fact is that your design looks great. thank you.

    Marked as helpful
    0
  • mbalali63•150
    @mbalali63Posted 8 months ago

    Hi my friend

    Good job. your design seems pretty nice, but I feel I had to inform you about few considerations to improve it:

    1. In your design "HTML & CSS foundations" is a hyperlink and it is OK. but I suggest to set its text-decoration to none and color to #000, then it will look better.

    2. The gap between elements in content section could be increased.

    3. and the button background color would be better if set to the defined --yellow color in the root.

    4. It seems that 16px for box-shaddow extend is too much, I guess it must be around 10.

    and again thank you for the nice design. I hope my suggestion be useful for you. Regards

    0
  • Ruby Mary•110
    @RubyMary18Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Responsive Design

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

    --

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

    --

    Responsive Blog Preview Card

    1
    mbalali63•150
    @mbalali63Posted 8 months ago

    Hi Ruby Mary Your implementation is great. It is really similar to the target design.

    0