Skip to content
OverviewSolutions
79
Comments
715
P
MikDra1
@MikDra1

All comments

  • P
    MikDra1•7,450
    @MikDra1

    Super animations! Congrats 🤩

  • P
    MikDra1•7,450
    @MikDra1

    You've done really great 😀

    I really like your solution because it includes many different quizzes not only the provided ones. One thing which I would like to encourage you to use is styled-components. They make styling for me a lot easier. If you have a couple of minutes you can have a look at them.

    Keep going and grinding 💗

    MikDra1

  • P
    MikDra1•7,450
    @MikDra1

    You've done really well 😀

    Your solution is super similar to the design. For now I can't see any downsides 😉

    Keep going and grinding 💗

    MikDra1

  • P
    MikDra1•7,450
    @MikDra1

    You've done really well 😀

    One thing which I want to point out is that writing CSS code in a separate file for some might be difficult or just annoying. If it is like this in your case I would strongly encourage you to take a look at styled-components for React.

    Keep going and grinding 💗

    MikDra1

  • Achi Gyuse Achi•490
    @Achigyus
    What are you most proud of, and what would you do differently next time?

    I used SASS for this project; it was my first time using it and I was able to use alot of the features it offers to build this challenge

    Time Tracking Dashboard Built With VanillaJS

    1
    P
    MikDra1•7,450
    @MikDra1

    You've done really well 😀

    Your solution is super similar to the design. For now I can't see any downsides 😉

    Keep going and grinding 💗

    MikDra1

  • P
    MikDra1•7,450
    @MikDra1

    You've done really well 😀

    One thing which I want to point out is that you should use 'rem' instead of 'px' in your CSS. Here is an video about that.

    Keep going and grinding 💗

    Mikdra1

    Marked as helpful
  • Tonmoy Sarker•120
    @tonmoysarker
    What challenges did you encounter, and how did you overcome them?

    This is my first project as someone who started to learn React very recently, so everything was quite new, except for most of the concepts because I had prior experience with Vue a bit.

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

    I am honestly currently not knowledgeable enough to even know this, I will keep learning the basics through projects for now.

    Responsive Article Preview Component

    #react
    2
    P
    MikDra1•7,450
    @MikDra1

    You've done really well 😀

    One thing which I want to point out is that writing CSS code in a separate file for some might be difficult or just annoying. If it is like this in your case I would strongly encourage you to take a look at styled-components for React.

    Keep going and grinding 💗

    MikDra1

    Marked as helpful
  • P
    MikDra1•7,450
    @MikDra1

    You've done really well 😀

    Your solution is almost identical to the design. One thing which I want to mention is that you can write your styled-components code in the same file as code unless you really don't like it 😉

    Keep going and grinding 💗

    MikDra1

  • P
    MikDra1•7,450
    @MikDra1

    Hi,

    You've done really well and everything is working fine and I found a small mistake. On dark theme mode 'Drag and drop to reorder list' text is still dark and I am unable to see it clearly.

    Excluding this minor bug, you've done really really well, congratulations 😁!

  • Mariam Svanidze•80
    @mariamsvanidze0
    What are you most proud of, and what would you do differently next time?

    I'm most proud of ensuring the design is responsive and works well across different screen sizes. Next time, I would focus on improving accessibility by adding more semantic elements and enhancing the contrast for better readability.

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

    The main challenge was ensuring the design was responsive across different screen sizes. I overcame this by using media queries to adjust the layout and tested on various devices to ensure consistency and usability.

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

    I would like help with optimizing the performance, especially improving load times and ensuring smooth deployment on GitHub Pages without caching issues.

    Social Links Profile

    3
    P
    MikDra1•7,450
    @MikDra1

    Use rems as your initial unit. Pixels can be used for small sizes around 1px - 3px. For rest you should use rems. In media queries use ems. 😉

    Marked as helpful
  • lordag•240
    @lordag
    What specific areas of your project would you like help with?

    I need to look more deeply into media queries, especially the management of various formats. In this project I only managed the layout with width from 320px to 420px.

    Html , Css

    2
    P
    MikDra1•7,450
    @MikDra1

    Use rems as your initial unit. Pixels can be used for small sizes around 1px - 3px. For rest you should use rems. In media queries use ems. 😉

  • Phan Thành Chung•110
    @phanthanhchungbyte
    What are you most proud of, and what would you do differently next time?

    I think I nailed the look of it. Especially the dimension of the card, it looks quite nice.

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

    The problem i think encountered was to measure the width of the card for the mobile version, then I used the paint.net app to measure it perfectly. I also created a media query to make the size adapt to look good.

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

    I'd like some help with my CSS, I need to know if my choice of measuring unit was good or not. And if the card was nice to look at. Thank you!

    Social Link Profile Card using Vanilla HTML, CSS

    2
    P
    MikDra1•7,450
    @MikDra1

    Your units are well-written. The only thing that you need to remember is to always stick to rems. Only if the value is so small that it doesn't matter, something from 1px - 3px. 😉

    Marked as helpful
  • Diovanni-ls•50
    @Diovanni-ls
    What are you most proud of, and what would you do differently next time?

    fiquei orgulhoso de ter conseguido construir toda a estrutura se problemas, sendo o meu primeiro projeto aqui. Gostei muito do processo de criação e consegui aprender coisas novas.

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

    tive dificuldades em fazer a responsividade para telas menores, o que me forçou a procurar novas saídas e aprende novos métodos.

    Meu primeiro teste do FrontendMentor, um card responsivo em HTML e CSS

    2
    P
    MikDra1•7,450
    @MikDra1

    Here is how you can make your card responsive easily

       .card {
       width: 95%;
       max-width: 42.5rem;
   }

    On smaller screens, the card will occupy 90% of its parent (such as the body), but once it reaches 42.5rem (680px), it will remain like that.

    I hope this tip was useful to you! 💗💗💗

    Great work, and keep it up! 😁😊😉

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

    I am proud of my journey when I tried to create my first live site project like this. I learned a lot during this process because I was not intended to rush finishing this project, instead, I have read some tutorials about flex and generating live site page, which might help me to do better and more quickly in future development. I believe that I will choose to assign items through "flex-direction:column" if I want to do that again. This can help me refine the automatic expansion of paragraphs and make the page more beautiful.

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

    I encountered only a few challenges, because this project is very basic, objectively speaking.

    QR Code Solution via Flex and Basic HTML,CSS

    2
    P
    MikDra1•7,450
    @MikDra1

    Here is how you can make your card responsive easily

       .card {
       width: 95%;
       max-width: 42.5rem;
   }

    On smaller screens, the card will occupy 90% of its parent (such as the body), but once it reaches 42.5rem (680px), it will remain like that.

    I hope this tip was useful to you! 💗💗💗

    Great work, and keep it up! 😁😊😉

    Marked as helpful
  • P
    MikDra1•7,450
    @MikDra1

    Here is how you can make your card responsive easily

       .card {
       width: 95%;
       max-width: 42.5rem;
   }

    On smaller screens, the card will occupy 90% of its parent (such as the body), but once it reaches 42.5rem (680px), it will remain like that.

    I hope this tip was useful to you! 💗💗💗

    Great work, and keep it up! 😁😊😉

    Marked as helpful
  • P
    Steven Stroud•11,890
    @Stroudy
    What are you most proud of, and what would you do differently next time?

    Hello, I'm Steven and this is my solution for this challenge using Native CSS, Variables, Responsive units and BEM!😊

    🛠️ Built with:

    • HTML 🧾
    • Native CSS 🎨
    • BEM Notation 🅱️
    • CSS Variables 💾

    Thank you to the Front-End Mentor team that creates these challenges that help us learning journey to front-end.💟

    I gained significant insights into layout design through this challenge, and it certainly tested my skills. Moving forward, I plan to streamline my process by leveraging the text presets provided in the Figma file. I’ll convert these presets into reusable classes and apply them directly to the relevant elements. This approach will help reduce complexity and optimize the CSS file size.

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

    I encountered some challenges incorporating the image in the footer, as it didn’t behave as expected, which is why it remains incomplete. Additionally, I found it difficult to fully translate the spacing variables provided in the Figma file into the design, particularly as some appeared to be missing for fonts and spacing. I recognize the need for a more efficient workflow. Moving forward, I plan to improve this by using meaningful images in HTML and reserving decorative images for CSS. In the past, I would typically place all images in the HTML, but I now understand the importance of this distinction.

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

    I faced challenges aligning the footer image with the Figma design, as it seemed like the photo might not be the correct size. In an effort to reduce the amount of CSS, I tried condensing styles by utilizing utility classes, grouping elements with similar properties (such as font sizes), and applying shorthand properties where possible. However, I recognize there's significant room for improvement. I would greatly appreciate extensive feedback on how to streamline my approach and achieve more efficient solutions. I understand there are much better methods to implement this design, and I am eager to learn and refine my workflow.

    Meet landing page with BEM, Variable, Hosting own fonts

    #bem#lighthouse#accessibility
    1
    P
    MikDra1•7,450
    @MikDra1

    Use overflow-x:hidden; so that you don't get a scroll bar on the x axis

    Hope it helps 💗💗💗

  • P
    MikDra1•7,450
    @MikDra1

    When I check the "Interest Only" options and add values to all other inputs I get an error that I should check one option even if I did it. Please check that 😊

  • Isaac Suckling•110
    @isaacsuckling
    What are you most proud of, and what would you do differently next time?

    I am proud of the overall accuracy as i think it looks almost identical to the reference. I also implemented some of the suggestions given on my last project.

    social-links-profile-main

    2
    P
    MikDra1•7,450
    @MikDra1

    For a quick and easy way to make your card responsive, use the following CSS:

    .card {
  width: 90%;
  max-width: 37.5rem;
}

    On smaller screens, the card will occupy 90% of its parent container, and once it reaches 37.5rem (600px), it will maintain that width.

    To center the card, try this:

    .container {
  display: grid;
  place-items: center;
}

    Hope this helps! 💗💗💗

    Keep up the great work! 😁😊😉