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

One nne

@Onenne1Lagos, Nigeria50 points

👋 Hi, I’m a passionate front-end developer turning designs into clean, responsive, and interactive websites. Always learning and improving. I’m exploring HTML and CSS ( and more to come) to level up my skills. Let’s connect, collaborate, and build something awesome together! 🚀

I’m currently learning...

HTML, CSS

Latest solutions

  • Frontend Mentor | Product Preview Card/


    One nne•50
    Submitted 3 months ago

    I would like help with making more responsive designs


    1 comment
  • Frontend Mentor | Recipe page


    One nne•50
    Submitted 3 months ago

    Trying to vertically align the maker on the <ul> to always be at the middle of the text


    2 comments
  • Frontend Mentor | Social Link Profile


    One nne•50
    Submitted 4 months ago

    I would like to learn CSS animations


    1 comment
  • Frontend Mentor | Blog preview card


    One nne•50
    Submitted 4 months ago

    Media Queries and measurements


    1 comment
  • Frontend Mentor | QR Code Components


    One nne•50
    Submitted 4 months ago

    1 comment

Latest comments

  • Devesh Soni•100
    @DeveshSoni973
    Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Proud of doing the thing myself and not giving up, and glad I am better at the block and flex setups

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

    rem was the worst , had to get help from friends

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

    nothin. Thanks for visiting

    card preview with html css and js

    1
    One nne•50
    @Onenne1
    Posted 3 months ago

    nice

  • Susiest•10
    @Susiest
    Submitted 4 months ago

    Responsive Landing Page using HTML

    1
    One nne•50
    @Onenne1
    Posted 3 months ago

    nice work, but your spacing is too much

    and for your table instead of doing this

    <div class="recipe__nutrition--table" role="table">
      <div class="row" role="row">
          <div class="column" role="columnheader">Calories</div>
          <div class="column" role="cell">277kcal</div>
      </div>
      <div class="row" role="row">
          <div class="column" role="columnheader">Carbs</div>
          <div class="column" role="cell">0g</div>
      </div>
      <div class="row" role="row">
          <div class="column" role="columnheader">Protein</div>
          <div class="column" role="cell">20g</div>
      </div>
      <div class="row" role="row">
          <div class="column" role="columnheader">Fat</div>
          <div class="column" role="cell">22g</div>
      </div>
    
    .recipe__nutrition--table .row:first-child {
      padding-top: 0;
    }
    
    .recipe__nutrition--table .row:last-child {
      padding-bottom: 0;
    }
    
    .recipe__nutrition--table .row:last-child {
      border-bottom: none; /* Remove the border on the last item */
    }
    
    .recipe__nutrition--table .row .column {
      font-family: "Outfit", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
      font-size: 16px;
      color: var(--clr-stone-600);
    }
    
    .recipe__nutrition--table .row .column:nth-child(1) {
      padding-left: 40px;
    }
    
    .recipe__nutrition--table .row .column:nth-child(2) {
      font-weight: 900;
      color: var(--clr-brown-800);
    }
    

    Try using this

    
    <table class="recipe__nutrition--table" role="table">
    
      <tr class="row" role="row">
        <td class="column" role="columnheader">Calories</td>
        <td class="column" role="cell">277kcal</td>
      </tr>
    
      <tr class="row" role="row">
        <td class="column" role="columnheader">Carbs</td>
        <td class="column" role="cell">0g</td>
      </tr>
    
      <tr class="row" role="row">
        <td class="column" role="columnheader">Protein</td>
        <td class="column" role="cell">20g</td>
      </tr>
    
      <tr class="row" role="row">
        <td class="column" role="columnheader">Fat</td>
        <td class="column" role="cell">22g</td>
      </tr>
    
    </table>
    
    <!-- SEMANTIC HTML IS VERY IMPORTANT TRY USING IT -->
    
      .recipe__nutrition--table {
        width: 100%;
        font-family: "Outfit", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: 16px;
      }
    
      .row {
        border-bottom: 1px solid #e4ded8;
        font-size: 1.1rem;
        padding: 0.5rem 2rem;
        display: grid;
        gap: 2rem;
        grid-template-columns: repeat(2, 1fr);
        /* MAKE IT TWO COLUMNS WITH EACH HAVING AN EQUAL AMOUNT OF SPACE */
      }
    
      .column:nth-child(even) {
        color: #854632;
        font-weight: 800;
      }
    

    Less code and more effective

  • P
    Tibor•120
    @totibor
    Submitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    Styling list style for ordered and unordered lists was harder than expected. The key step in my solution is to remove the default ::marker then add a ::before which I can now style and position the way I want.

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

    Semantic HTML structure: Can I put another tag before <header> in an <article>?

    Recipe Page (HTML & CSS)

    1
    One nne•50
    @Onenne1
    Posted 3 months ago

    Nice job, Please Check out mine

  • Calvin•250
    @a-2280
    Submitted 4 months ago

    Social Links

    1
    One nne•50
    @Onenne1
    Posted 4 months ago

    In your reset.css file could have been done by typing

    * {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
    }
    

    You also add

    * {
      box-sizing: border-box;
    }
    

    It defines how the total width and height of an element are calculated, including padding and borders. For border-box the Width and height include content, padding, and border (reduces layout issues)

  • SAKIB9922•10
    @Sakib9922
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Successfully implementing Flexbox and Media Queries for responsiveness.Using CSS Variables to maintain a scalable and maintainable color scheme.Adding CSS presets to ensure a smoother design across different screen sizes.Completing a Frontend Mentor challenge, which helps build real-world skills.

    I will Try CSS Grid for layout flexibility and see how it compares to Flexbox Ensure proper contrast, focus states, and semantic HTML for better usability Use modern CSS techniques like clamp() for better scalability.

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

    Handling different screen sizes with media queries especially ensuring everything looks good on both small and large screens.

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

    Code Optimization. just dont want to add unnecessary code.

    Responsive Blog Card | Flexbox, Media Queries & CSS Variables

    1
    One nne•50
    @Onenne1
    Posted 4 months ago

    nice

  • Ayoub Nadifi•30
    @nadifi9
    Submitted 4 months ago

    Flex / padding / margin / box-sizing

    1
    One nne•50
    @Onenne1
    Posted 4 months ago

    could be better

Frontend Mentor logo

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