Skip to content
OverviewSolutions
18
Comments
15

Naveen CB

@Naveen-CB420 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

View more solutions

Latest comments

  • Naveen CB•420
    @Naveen-CBPosted about 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❤️

    0
  • Naveen CB•420
    @Naveen-CBPosted about 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
    1
  • Naveen CB•420
    @Naveen-CBPosted about 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.❤️

    Marked as helpful
    0
  • Naveen CB•420
    @Naveen-CBPosted about 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.

    0
  • ha308ing•240
    @ha308ingSubmitted about 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•420
    @Naveen-CBPosted about 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
    1
  • Naveen CB•420
    @Naveen-CBPosted about 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

    0
View more comments