Skip to content
OverviewSolutions
21
Comments
12
Biruk Moges
@lost50U1

All comments

  • Lucie•90
    @lucieheliasSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I understand way better how to structure a HTML or CSS like padding and margin even though I had difficulties in the past. Next time, I will try to do it better and see how to organize my time to be more efficient.

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

    I had issues with the display flex. I need to practice more to understand it better.

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

    Everything that can be improve and to help me to be more efficient in coding.

    Responsive Results summary component

    1
    Biruk Moges•280
    @lost50U1Posted 4 months ago

    looks good

    0
  • Anwar Mestycer•420
    @AnwarMestycerSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    ...

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

    ...

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

    I can't find an approach for the desktop design, Any help will be appreciated

    article preview with TailwindCSS mobile-first workflow

    1
    Biruk Moges•280
    @lost50U1Posted 5 months ago

    you can set add this to your css if you want to make it centered both horizontally and vertically display:flex justify-content: center; align-items: center; min-height: 100vh;

    0
  • Adanna-Nnajiofor•70
    @Adanna-NnajioforSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    i am proud of my growth so far in programming. the challenges are making me stronger and resilient.

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

    it took me a lot of time and brain storming to overcome the challenges. i encountered problems in using grid to achieve the desktop view. i used chatGTP and w3schools to overcome the challenges.

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

    in using grids to achieve a result

    Responsive landing page using grid

    1
    Biruk Moges•280
    @lost50U1Posted 5 months ago

    you can make add this css code to your main container to make your content centered both vertically and horizontally display:grid; place-content: center;

    0
  • joanna broad•100
    @JoannaBroadSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    this was my first frontend mentor challenge using either Astro or Tailwind though I have done a personal project learning the basics. But i am really proud that I was able to do this in just over 2 hours and didn't have to refer to the docs as much as i thought i would

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

    for some reason, I struggled to get the shadow to look right (turns out it was the light on my screen) but I looked through the docs to see how to make them stronger note to self move desk so its not right in the window :)

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

    how is the tailWind and how do people recommend using Astro? could it be worth creating one page to hold the challenges ?

    four card feature

    1
    Biruk Moges•280
    @lost50U1Posted 5 months ago

    nice attribution design

    0
  • Biruk Moges•280
    @lost50U1Posted 5 months ago

    you can turn off the padding on the image and use overflow:hidden css to make the border-radius work if you want.

    1
  • Adhitya Aditama Nugraha•180
    @aaditamanugrahaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Hi guys!

    I am so proud to finish this project. The "Recipe page" challenge is just a simple html content with basic CSS, but I use Tailwind CSS for styling this project. I am new to Tailwind CSS and still learning to use it for faster styling my project. After this project I am already feel confident using it.

    Actually there are few bugs inside my code. As you can see that I make decimal list not using .... html tag but instead I use div in it because I found some problem using ol tag for styling. I will fix it later.

    That's all from me, happy coding!

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

    I make decimal list not using .... html tag but instead I use div in it because I found some problem using ol tag for styling. I will fix it later.

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

    Please help me to find a way to use ol tag for decimal list using Tailwind CSS.

    Recipe page using Tailwind CSS

    1
    Biruk Moges•280
    @lost50U1Posted 5 months ago

    overall the design is good but you can experiment with the container width to make it looks more like the design.

    0
  • Mirko Bozzetto•180
    @mirkobozzettoSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I don't know what I'm proud of, to be honest, but I like the fact that I'm going into every detail while exploring the tailwind doc, it's quite inspiring.

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

    I had never used apply in a with tailwind classes in a css class, it allowed me to have a little cleaner code this way I think.

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

    would there have been even more effective ways of achieving the challenge with the same technology (tailwind?)?

    and if not, I'm still curious about what other people have done using other means.

    social-links-profile

    1
    Biruk Moges•280
    @lost50U1Posted 6 months ago

    i used the tailwind for this challenge and it looks good and if you have the time check mine and give me a suggestion or feedback specially on the design. I am sure it will be good experience sharing for both of us

    0
  • ARUNKUMAR2906•80
    @ARUNKUMAR2906Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of the collaboration and teamwork that went into creating this project. Working together, we were able to overcome challenges, share ideas, and produce a high-quality result that we can all be proud of.

    Looking back, one thing I would do differently next time is to allocate more time for thorough testing and refinement. While we were able to deliver a great product, I believe that dedicating additional time to testing and iteration could have further improved the overall quality and user experience. This experience has taught me the importance of allocating sufficient time for testing and refining a project before finalizing it.

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

    NaN

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

    I'd greatly appreciate assistance in enhancing user engagement features, refining the user interface for optimal usability, and optimizing performance for seamless user experience across devices.

    Responsive blog card using css flex

    1
    Biruk Moges•280
    @lost50U1Posted 6 months ago

    if you want to improve your layout you can check the figma file that comes with it and check it's exact size e.g your border size is small compared to the design you can check the size in the figma file.

    0
  • Barış Kaya•20
    @ClatronSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to be able to create the replica of the design. Maybe I could try doing this with Angular since I want to learn it.

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

    I didn't encounter a challenge so that's good.

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

    I would like to see someone add a little creativity to this site :)

    Simple QR Code Component made with HTML and CSS

    2
    Biruk Moges•280
    @lost50U1Posted 8 months ago

    you can use an extension called luna paint on vscode to determine the sizes of the padding and margin if you want to make it pixel perfect.

    1
  • Biruk Moges•280
    @lost50U1Posted over 1 year ago

    hi @kidkenme i have suggestion on the layout you can make the card centered by using grid try inserting this css to your body element

    display: grid; place-content: center;

    Marked as helpful
    1
  • balavignesh111•70
    @balavignesh111Submitted over 1 year ago

    I dont know like i think i have a problem with importing my font style. can anyone help or address whether I have imported correct style or not?

    Qr code component

    2
    Biruk Moges•280
    @lost50U1Posted over 1 year ago

    hi BALAVIGNESH you selected only 700 weight to be when importing the font you can replace yours with this

    <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    other than this didn't find any problems with your font and for centering the card you can use grid in your body element by adding this code

    display: grid; place-content: center;

    Marked as helpful
    0
  • Biruk Moges•280
    @lost50U1Posted over 1 year ago

    good job on the design and for your hover state add the code below in your css for the hover state it works well.

    button:hover, button:active, button:focus { background: linear-gradient(hsl(241, 81%, 54%) 25%, hsl(234, 85%, 45%) 60%); }

    0