Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
6
Comments
6

ImagineBillie

@ImagineBillie120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Four card feature section solution


    ImagineBillie•120
    Submitted 4 months ago

    1 comment
  • Product-preview-card


    ImagineBillie•120
    Submitted 4 months ago

    1 comment
  • Recipe-page


    ImagineBillie•120
    Submitted 4 months ago

    1 comment
  • Blog Preview Card Solution


    ImagineBillie•120
    Submitted 4 months ago

    1 comment
  • Blog preview card solution


    ImagineBillie•120
    Submitted 4 months ago

    2 comments
  • QR code component challenge using flexbox


    ImagineBillie•120
    Submitted 4 months ago

    1 comment

Latest comments

  • P
    Rodrigo•250
    @RiickyRiick
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Coming into this project, I already had some knowledge of CSS Grid and Flexbox. I'm taking a course on Udemy and have been using Mimo for the past 2 months.

    (Check out the resource section to see all the website's helpful things that assisted me throughout the project) I started the 'Mobile-First workflow' but didn't prefer it. Ultimately, I restarted the project and wrote my code starting from the 'Desktop-First workflow.

    For the next project, I will try again with the ' Mobile-First' workflow. The second time around would maybe be better.

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

    The challenges that I encounter were :

    --aligning the header text towards the center -Corrected by adding a width and then a margin: 0 auto; to center it

    --the positioning of the grid-items -Corrected it by utilizing the align-self flexbox property. I go into detail regarding this with screenshots. I recommend you check it out. It's a pretty cool rule.

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

    Nothing in particular so far, however, if there are any tips or advice, please share them with me as I'm always curious about any tips or tricks that could improve my code. Happy coding & blessings!

    Four Card Feature Section

    1
    ImagineBillie•120
    @ImagineBillie
    Posted 4 months ago

    nice

  • Meysam•60
    @Meysource
    Submitted 4 months ago

    product-preview-card-component-main

    1
    ImagineBillie•120
    @ImagineBillie
    Posted 4 months ago

    Nice! just change the font-family to make it the same as the design

  • karanpr01•50
    @karanpr01
    Submitted 5 months ago

    Recipe page

    1
    ImagineBillie•120
    @ImagineBillie
    Posted 4 months ago

    Try to replicate the design down to the details like fonts, font-weight, font-color, and etc. Attention to details is important for the Frontend developers.

    Try to use the font files given. For example:

    @font-face {
        font-family: 'Outfit';
        src: url('./assets/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
        font-weight: 400 700;
        font-style: normal;
        font-display: swap;
      }
    
    @font-face {
      font-family: 'Young Serif';
      src: url('./assets/fonts/young-serif/YoungSerif-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    

    Good luck!

    Marked as helpful
  • RickyPWebDev•200
    @RickyPWebDev
    Submitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    I had a challenge around aligning vertically in the centre. I learnt that I had to set the height of the document and that of the card container.

    Social media card

    1
    ImagineBillie•120
    @ImagineBillie
    Posted 4 months ago

    Critical CSS Improvements

    /* Image sizing */
    .details img {
      width: 88px;  /* Fixed > % */
      height: 88px;
    }
    
    /* Accessible focus */
    .btn:focus {
      outline: 2px solid var(--Green);
      outline-offset: 2px;
    }
    
    /* Better grid */
    .links {
      grid-template-rows: repeat(5, minmax(44px, auto));
    }
    

    Key Takeaways

    1. Use semantic tags (<article>)
    2. Never nest buttons inside links
    3. Fixed sizes for critical elements
    4. Take your time to replicate the design
    Marked as helpful
  • usman frontend 360•160
    @Tech-Badhead
    Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    First off i am proud of how i tackle the project heads on. Secondly, through this project i was able to learn a new css property which is the "clamp" property. what i would do differently next time would probably to be in the right frame of mind before taking the next challenge.

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

    I had challenges structuring the web content. I was able to overcome it through persistence and many try by error.

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

    I tried to reduce the avatar image size but to no avail. my subconcious mind kept telling maybe it was because it's in SVG format. i am open to correction tho!

    Responsive Blog Preview using HTML and CSS

    1
    ImagineBillie•120
    @ImagineBillie
    Posted 4 months ago

    Quick Code Review

    • Fonts & Design

      • Import the exact variable font that given in the folder
      • Figma files give you more details. worth check it out the spec and match its sizes/weights.
    • Avatar Fix
      You have typo id="autor-image" and CSS targets #author-image. Either rename the ID or switch to:

      .author-profile img {
        width: 32px;
        margin-right: 12px;
      }
      

    Responsive Layout

    .container {
      min-height: 100vh;
      padding: 3rem 1rem;
    }
    .card {
      width: 90vw;
      max-width: 340px;
    }
    

    CSS Cleanup & Best Practices

    • Consolidate your reset into one * { box-sizing: border-box; margin: 0; padding: 0; }.
    • Prefer classes for styling over IDs.
    • Use rem or % units for font‑sizes, margins, and paddings to keep everything scalable.
    • Leverage your clamp() on html { font-size: clamp(14px, 1vw, 24px); } and build all text using rem so the whole UI scales smoothly.
    Marked as helpful
  • Gianni•50
    @giannindm
    Submitted 4 months ago

    QR code using CSS and Flexbox

    1
    ImagineBillie•120
    @ImagineBillie
    Posted 4 months ago
    • Semantic HTML

      • Replace <div class="main"> with a <main> element.
      • Use <figure> (with an optional <figcaption>) instead of <picture> since you have only one image source.
    • Accessibility

      • Change the alt text to something like alt="QR code linking to Frontend Mentor website".
      • Wrap your attribution in a <footer> landmark.
    • Responsiveness

      • Avoid fixed width: 320px;. Instead use:
        .card {
          width: 90vw;
          max-width: 320px;
        }
        

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub