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

Naveen CB

@Naveen-CB400 points

Learning frontend by completing as many project I can and aimed to let's complete all the dishes(aka project) that are offered by frontend mentor.

Latest solutions

  • Interactive-rating-component using HTML, CSS and Vanilla JS


    Naveen CB•400
    Submitted over 1 year ago

    0 comments
  • chat-app-illustration-master using HMTL and CSS

    #accessibility

    Naveen CB•400
    Submitted over 1 year ago

    0 comments
  • Huddle-landing-page-with-curved-sections-master

    #accessibility

    Naveen CB•400
    Submitted over 1 year ago

    0 comments
  • social-proof-section-master using HTML and CSS

    #accessibility

    Naveen CB•400
    Submitted over 1 year ago

    0 comments
  • four-card-feature-section-master using HTML and CSS

    #accessibility

    Naveen CB•400
    Submitted over 1 year ago

    0 comments
  • Recipe-page-main Using HTML and CSS

    #accessibility

    Naveen CB•400
    Submitted over 1 year ago

    1 comment
View more solutions

Latest comments

  • PROMISE UZOR OKWUDIRI•660
    @upovibe
    Submitted over 1 year ago

    Testimonials grid section solution

    2
    Naveen CB•400
    @Naveen-CB
    Posted over 1 year ago

    Hello @iamupo, your solution looks good but I have notice one issue with you code.

    In your card-5 section you did some mistake that make it to overflow at some viewport width:

    @media (min-width: 1200px) {
      .card5 {
        grid-column: 4;
        grid-row: 1/4;
      }
    }
    

    Instead try this :

    @media (min-width: 1200px) {
      .card5 {
        grid-column: 4;
        grid-row: 1/3;
      }
    }
    

    Other than this your solution looks good and I especially like that 2 column for tablet size.

    I hope this might be helpful to you❤️

  • Yorhs-Malasquez•110
    @Yorhs-Malasquez
    Submitted over 1 year ago

    Example Grid

    #bem#stylus
    1
    Naveen CB•400
    @Naveen-CB
    Posted over 1 year ago

    Hello @Yorhs-Malasquez your solution looks good and I have some suggestion to improve your code that will make your upcoming project more easy.

    .bg-pattern-quotation
    {
      position: absolute;
      top: 2px;
      right: 48px;
      z-index: 0;
      height: 140px;
    }
    

    Instead of using position: absolute, try using this:

    .bg-pattern-quotation
    {
      background-img: url('images/bg-pattern-quotation.svg');
      background-position: top right 20%;
      background-repeat: no-repeat; 
    }
    

    Actually I too used position absolute, and then find out this would be more effective solution.

    I hope this might be helpful to you, Happy learning. ❤️

    Marked as helpful
  • Rahmatul Ulya•30
    @SimatG
    Submitted over 1 year ago

    Preview-card using HTML & CSS Flexbox

    1
    Naveen CB•400
    @Naveen-CB
    Posted over 1 year ago

    Hello @SimatG, your solution looks Good and also simple

    But I have some tips to improve your coding skills

    In HTML📌

    1. Try to link your fonts in HTML, it always a best practice to improve loading time of the page on subsequent visit if the font is provided by the third party website.
    • If you want more control on your fonts then download the font file.

    In CSS📌

    1. It is always best practice to use rem or em, px is only recommended when the size is less than 10px.
    2. There is always only one <h1></h1> tag and it is directly impact web accessibility and SEO.

    I hope this might helpful to you, Happy coding.❤️

  • aadithya1551•140
    @aadithya1551
    Submitted over 1 year ago

    Stats Card Preview Components

    1
    Naveen CB•400
    @Naveen-CB
    Posted over 1 year ago

    Hello @aadithya1551 you actually did a great job.

    But here is the one issue you need to fix it

    in your .container add this to center your container.

    .container{
        display: flex;
        min-height: 100vh;
        align-item: center;
        justify-content: center;
    }
    

    and as always try to add <main></main> tag this definitly improve your web accessibility and SEO.

    Try this out to make your solution to looks perfect.

    I hope this might be helpful to you❤️, Keep it up this sprit.

  • ha308ing•240
    @ha308ing
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of implementing a valuable advice to use kind of subcomponents, that are specific to the component. Next time I'd wrote more useful readme.md

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

    I submitted this challenge a while ago.

    And it took me some time to recover pre-commit linting with lefthook, so I had to switch from yarn to npm.

    Because yarn created .pnp. files (also typescript vscode integration), while I do not agree to tolerate anything more than package.lock

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

    How to achieve pixel-perfect layout from .jpg design file?

    When I use 1px x 1px grid with max zoom in the browser .jpg edges kinda blurry and I each position I try is wrong ='(

    Blog Post Preview Card with React and Styled-Components

    #react#styled-components#typescript#vite
    3
    Naveen CB•400
    @Naveen-CB
    Posted over 1 year ago

    Hello @ha308ing, mostly this types of card layout are just used as news, article, aside or blog in a website so nothing wrong to creating a appropriate tag for each data but it is some level of overcomplication for small part in a web(actually not needed that much) .

    I hope it helpful for you❤️.

    Happy learning🚀.

    Marked as helpful
  • Jomar Perez•30
    @JPerez03
    Submitted over 1 year ago

    Product preview-card component

    #accessibility
    1
    Naveen CB•400
    @Naveen-CB
    Posted over 1 year ago

    Hello @JPerez03, Your solution looks good and also code is perfect.

    But I see some issue with centering your main element

    📌Here what you can do to fix it

    • Always add min-height: 100vh to center your main so, that it centers perfectly.

    • And I also see that you are using vh unit for all sizing and also for font-size. This might be looking good for this solution but definitely make not responsive in the sense of big screen.

    -So it is best practice to use rem or em for units you can refer units here

View more comments

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