Skip to content
OverviewSolutions
15
Comments
12

Nikhil Tanwar

@NikNTToronto, Canada260 points

I'm Nikhil, a skilled Front End Developer with a passion for creating exceptional web experiences. I have a B.Tech. in Computer Science and Engineering and a Post Graduate Diploma in Cloud Computing for Big Data. Currently enrolled in the Meta Front End Professional Certificate program.

I’m currently learning...

ReactJS NextJS MERN and everything in between!

Latest solutions

View more solutions

Latest comments

  • Jessica•70
    @JesNetWD
    What are you most proud of, and what would you do differently next time?

    I made my layout responsive across various screen sizes.

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

    At first even though I made all my columns side by side, they were of unequal length. Using CSS grid instead of float helped with that. I also edited my solution to make it more responsive across various screen sizes.

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

    No major problems but please let me know if the different layouts are visually appealing.

    Responsive 3-column preview card component using CSS grid and flexbox

    2
    Nikhil Tanwar•260
    @NikNT

    Great solution Jessica! Looks good.

    One thing I noticed, when I hover over the buttons the overall component stretches up a few pixels. If you touch up that, your solution would be perfect.

    Keep up the great work! :)

  • Nikhil Tanwar•260
    @NikNT

    Hi @IngridaVob,

    If you are facing problem in centralizing the content, try using Flexbox. It is the most elegant and simple way to centre the content in such simple layouts.

    All you have to do is create an outer div and an inner div. By setting flex properties on the outer div, you will be able to simply centre all the elements.

    You can try reading the below given article from CSS Tricks to learn more about flexbox and implement it.

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Or you can try going through the video, get a grasp of the concept and then implement.

    https://youtu.be/phWxA89Dy94?si=tpA_X7Cyyq49txcR

    I truly believe having flexbox in your skillset would definitely allow you to create layouts in a more efficient manner.

    Let me know if you need any kind of help on this.

    Thanks,

    NT

    Marked as helpful
  • Nikhil Tanwar•260
    @NikNT

    Developers tools are essential. Make the best use of them.

    What I also like to do is spin up a local server, that way you can open you website on different devices. This gives the flexibility to check the live view on different screens.

    Try it out once, maybe you'll be able to build better responsiveness!

  • Nikhil Tanwar•260
    @NikNT

    Hi Asish,

    You have done a great work with the challenge. I reviewed the index.css file on GitHub and I must say that you have written the code in a structured format.

    For the preview, I must recommend you to make the container for the star icon a bit more round. At present, it seems that it is stretched a on the bottom which is giving it a spherical shape.

    Secondly, I observed that there is an outline is currently visible on the button. You can simply remove it to make the button look more elegant. The text on the button also needs to be centred and it would be great if you can limit the font-weight while providing a bit of spacing between the alphabets.

    I am sure you would be able to make the tweaks with efficacy.

    Overall, your design and approach to the challenge is good!

    Keep Coding 🔥

    Marked as helpful
  • Nikhil Tanwar•260
    @NikNT

    Nice work, Rebecca! Your solution looks unique!

  • Nikhil Tanwar•260
    @NikNT

    Hello @omarloz10

    You have done a good job. For the measurements of elements, one thing can be done. You can look for people who have already completed this challenge. Preview their live site, inspect different elements, and you'll be able to understand the different dimensions that they have leveraged.

    This way you would be able to make estimated guesses and ensure consistency with the design. This is not the only way but one of the ways in which you can make your output more similar to the primary design.

    NT

View more comments