Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
4
Comments
4
incmoga
@incmoga

All comments

  • Jaime Suarez Huerta•10
    @JaimeSuarez14
    Submitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    considero que esta bien elaborado mi proyecto, mejoraria el tiempo que me llevo elabararlo.

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

    el principal desafio fue la imagen , los espacios entre contenedores y el espacion entre la viñeta y el contenido.

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

    quisiera mejorar mas en CSS avanzado.

    Paginas recetas sencillo usando html y css

    #accessibility
    1
    incmoga•60
    @incmoga
    Posted 29 days ago

    GOOD Job! Your project works perfectly, but here are professional enhancements to take it to the next level:

    1. Semantic HTML. Replace generic div elements with semantic tags to improve accessibility.

    2. BEM Methodology. Restructure class names using BEM (Block-Element-Modifier) for clarity and scalability.

    3. English. Use english language for naming to improve accessibility.

    4. Modern Layout Techniques. Replace manual positioning with Flexbox/Grid for better alignment and responsiveness.

    With these improvements, the code will be more robust and professional.

    THE MAIN THING TO REMEMBER IS THAT YOU ARE AMAZING!

  • Baburam Parajuli•60
    @baburam454
    Submitted about 1 year ago

    desktop-design page

    #accessibility
    1
    incmoga•60
    @incmoga
    Posted about 1 month ago

    GOOD Job! Your project works perfectly, but here are professional enhancements to take it to the next level:

    1. Semantic HTML Replace generic div elements with semantic tags to improve accessibility.
    Before
    <div class="container">...</div>
    <div class="profile">...</div>
    
    After
    <main class="container">  <!-- Main content wrapper -->
      <article class="profile">  <!-- Independent content block -->
        ...
      </article>
    </main>
    
    1. BEM Methodology Restructure class names using BEM (Block-Element-Modifier) for clarity and scalability.
    Before
    <h4>Kathmandu, Nepal</h4>
    After
    <p class="profile__location">Kathmandu, Nepal</p>
    

    CSS Implementation:

    /*Before*/
    h1 { font-size: 24px; }
    h4 { color: yellowgreen; }
    
    /*After*/
    .profile__name { 
      font-size: 1.5rem; 
    }
    .profile__location {
      font-size: 1.125rem;
      color: hsl(75, 94%, 57%);
    }
    
    1. Mobile Responsiveness Add media queries for mobile devices (max-width: 375px).
    @media (max-width: 375px) {
      .container {
        width: 90%;
        margin: 1.25rem auto;
        padding: 1.5rem;
      }
      
      .profile-image {
        width: 100px;
        height: 100px;
      }
      
      .social-media a {
        padding: 0.75rem;
      }
    }
    
    1. Modern Layout Techniques Replace manual positioning with Flexbox/Grid for better alignment and responsiveness.
    /* Centering container */
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh; /* Replace margin-based centering */
    }
    
    /* Profile section */
    .profile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem; /* Simplify spacing */
    }
    
    /* Before */
    h1 { font-size: 24px; }
    .social-media li { margin: 10px 0; }
    
    /* After */
    .profile__name {
      font-size: 1.5rem; /* 24px = 1.5rem */
      margin-bottom: 0.625rem; /* 10px */
    }
    
    .social-media__item { 
      margin: 0.625rem 0; /* BEM + rem */
    }
    
    1. Focus States Add :focus styles alongside :hover for keyboard navigation accessibility.
    .social-media a:hover,
    .social-media a:focus { /* Combined states */
      background-color: #4e4e4e;
      outline: 2px solid hsl(75, 94%, 57%);
    }
    
    1. CSS Variables Define colors as variables for centralized theme management.
    :root {
      --primary-bg: #141414;
      --accent: hsl(75, 94%, 57%);
      --social-bg: #2d2d2d;
    }
    
    1. CSS Reset Add a minimal reset to eliminate browser inconsistencies.
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    1. Local Font Loading Host fonts locally via @font-face for better performance.
    /* Replace Google Fonts import */
    @font-face {
        font-family: 'Inter';
        src: url(assets/fonts/Inter-VariableFont_slnt\,wght.ttf) format('truetype');
        font-weight: 300 900;
        font-style: normal;
        font-display: swap;
    }
    
    With these improvements, the code will be more robust and professional.
    
    *THE MAIN THING TO REMEMBER IS THAT YOU ARE AMAZING!*
    
  • Madan003•40
    @Madan003
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm feeling better now as compared to my first challenge.

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

    Challenges i faced in knowing about the font size, border-radius, width, height at finally knew it from figma design.

    Blog preview card

    1
    incmoga•60
    @incmoga
    Posted 2 months ago

    GOOD Job! your code is functional and clean but here are a few recommendations to make it more professional and maintainable:

    1. Use Semantic Tags: Replace generic div elements with semantic tags where appropriate. For example use <time> for the publication date.

    <time class="card__date">Published 21 Dec 2023</time>
    

    2.BEM Naming: use BEM (Block-Element-Modifier) methodology for class naming to improve purity and understandable code, example:

    <article class="card">
      <img class="card__image" src="..." alt="...">
      <div class="card__tag">Learning</div>
      <time class="card__date" datetime="2023-12-21">Published 21 Dec 2023</time>
      <h2 class="card__title">HTML & CSS foundations</h2>
      <p class="card__description">...</p>
      <div class="card__author">
        <img class="card__avatar" src="..." alt="...">
        <span class="card__author-name">Greg Hooper</span>
      </div>
    </article>
    

    3. Mobile Responsiveness: Add media queries for mobile devices (max-width: 375px).

    @media (max-width: 375px) {
      .container {
        width: 327px;
        height: auto;
        padding: 20px;
      }
      .card__tag, .card__date { font-size: 12px; }
      .card__title { font-size: 20px; }
      .card__description { font-size: 14px; }
    }
    

    4. In Author Section, use flexbox instead of float: Use Modern CSS layout standards: Flexbox/Grid.

    .card__author {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 24px;
    

    With these improvements, the code will be more robust and professional.

    The main thing to remember is that you are amazing!

    Marked as helpful
  • P
    Heran-Girma•20
    @Heran-Girma
    Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    nj,n

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

    ,jnk,n

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

    jb,jb

    css

    3
    incmoga•60
    @incmoga
    Posted 2 months ago

    Great job! but everything needs to be changed from html to css, good luck!

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