Skip to content
OverviewSolutions
9
Comments
8
Zakir Mustafa
@kmrzakir

All comments

  • Zakir Mustafa•160
    @kmrzakir

    good

  • Zakir Mustafa•160
    @kmrzakir

    good

  • P
    Taiwo Bandipo•120
    @Tainicknackz
    What are you most proud of, and what would you do differently next time?

    I'm glad I was able to get past the problems I ran into when I tried to use CSS Flexbox to make something adaptable. Next time, I will try very hard not to spend as much time on the project as I did, because most of that time was just me planning things that weren't needed.

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

    Trying to make the project fit well on the needed screen sizes was one of the many problems I ran into. Eventually I was able to think things through and figure out how to do the project correctly.

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

    Media queries and how flexible websites are are two things I really need help with.

    Product preview card component

    #pure-css#accessibility
    1
    Zakir Mustafa•160
    @kmrzakir

    good

    Marked as helpful
  • EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    What are you most proud of, and what would you do differently next time?

    I am proud to have reached this point, I would investigate more about media queries

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

    use the div, the flex, @media queries, the measurements like vh vw, 100% rem

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

    use the div, the flex, @media queries, the measurements like vh vw, 100% rem

    recipe page

    #accessibility#airtable#angular#angular-material#anime-js
    2
    Zakir Mustafa•160
    @kmrzakir

    good

  • DelbertGrady•50
    @DelbertGrady
    What are you most proud of, and what would you do differently next time?

    I tried to use semantic HTML as much as possible. Also, I attempted to make the solution accessible. I used custom properties instead of hard-coding the colors, margins, etc.

    Social links solution, accessible and with custom properties

    #accessibility
    1
    Zakir Mustafa•160
    @kmrzakir

    good

  • Sean•50
    @seanmi
    What challenges did you encounter, and how did you overcome them?

    It was challenging make it responsive

    Social links Component

    1
    Zakir Mustafa•160
    @kmrzakir

    Hey! Your project looks awesome, great job on the layout! I just wanted to suggest a small improvement that could help simplify your CSS.

    1.you could use the universal selector * at the top of your CSS to apply padding: 0, margin: 0, and box-sizing: border-box globally.

    /* Reset margin and padding for all elements */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  /* Ensures padding and border are included in the element's total width and height */
}
    1. You don't need to put lot of css in your body, simply write this.
    body{
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: bg-color;
   }
    1. Also i noticed when the screen width gets shrink the text ("Front-end developer and avid reader.", Jessica Randall London, United Kingdom) splits and comes in new line. You can prevent this as.
    h1, p
{
white-space: nowrap;
}

    Hope this will help you ❤️

    Marked as helpful
  • SHAKIR•90
    @shakirbakare
    What are you most proud of, and what would you do differently next time?

    I'm proud of the fact that I coded the solution to match the design without looking at the Figma file provided.

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

    None. The design is a simple one.

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

    I'd love to get feedback on my code structure, organization, and how I used the semantic HTML5 tags.

    Blog Preview Card using semantic HTML, CSS custom properties, and Sass

    #bem#pure-css#sass/scss#accessibility
    1
    Zakir Mustafa•160
    @kmrzakir

    good

  • Aliza Ikram•100
    @AlizaIkram
    What are you most proud of, and what would you do differently next time?

    I'm proud of that my CSS approach of building individual divs, classes etc has improved. I will try to make the code cleaner next time.

    What challenges did you encounter, and how did you overcome them?
    • Responsiveness
    • Centring div

    With the help of some resources, I learned how to make it responsive using min-height, max-width. Also, by using flex properties I learned to properly centre div.

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

    • I want to know, some people don't make divs for everything, and some make divs for everything even for <p> etc. Which is better? If the last one is better then please guide me when I should make a div?

    • What should I use em, rem, px?

    Responsive QR-code Component

    #accessibility
    1
    Zakir Mustafa•160
    @kmrzakir

    This is my first time on frontend mentor and i feel it is really good for biggners to start there journey and improve there skills by practice rather than spending time on vedio lectures and watching other how they code🤦‍♂️🤦‍♂️🤦‍♂️