Skip to content
OverviewSolutions
6
Comments
2
P
Leon_J
@reaperxyndrome

All comments

  • Justin Connell•720
    @justinconnellSubmitted 11 months ago

    I took a mobile first approach and decided to use CSS Grid for the layout - one ting that tripped me up was implementing the desktop version and trying to get the grid centered on the screen - to solve this I set the <main> to 100vh and 100vw, which allowed me to set the margin on the grid to 'auto'. I also tried using BEM - I'm still new to this so any feedback that will help me write cleaner code will be much appreciated.

    Responsive card layout using CSS Grid and Flexbox

    2
    Leon_J•140
    @reaperxyndromePosted 11 months ago

    Hello, I really like your solution and the simplicity of it all . It looks good and looks similar to the design although there are some positional differences, is that intentional? Also, I have looked at the GitHub repository and I see that you have added a README.md file which includes your process. This is really good, I advice you to keep up the good work. I would also would like to provide some advice regarding what next steps you can take: learn tailwind CSS. Why? Because tailwind CSS will make writing CSS much faster, especially when you pair it with frontend frameworks that allow you to decompose your HTML (JSX) into multiple components. Tailwind CSS is an atomic CSS utility classes framework. There are some things you need to configure first though, which you can look into the Tailwind documentation. https://tailwindcss.com/docs/installation

    That is all from me. Keep up what you are doing 👍. Once again, congratulations and cheers! 🎉🎉🎉🥳🥳🥳

    Marked as helpful
    0
  • David Tejada•380
    @david-tejadaSubmitted 12 months ago

    I just completed my first Advanced challenge 🎉

    Any feedback is appreciated.

    This was my first time using NextJS and my experience has been positive.

    It was the second project where I used Tailwind. I have to say I didn't think I would like it much before I started to use it. With all the long ugly class names, no separation of concerns, ... But I have to say that I have come around. Here is what I like the most about it:

    • No indirection or context switching. I can see what elements have which styles and I don't need to switch between html and css files, scrolling up and down to see where the styles for certain element are declared.
    • Not having to come up with names for each element you want to style.
    • Using the prettier plugin classes are neatly arranged and easier to visually parse.

    Overall I think using Tailwind I can develop much faster.

    myteam multipage website with NextJS and Tailwind

    1
    Leon_J•140
    @reaperxyndromePosted 11 months ago

    Try using clamp for fluid design. When you use clamp, you are able to control flexible sizes for different screens based on vw. Clamp is to make sure the values stay between a range of minimum and maximum, while giving a middle function to calculate the value. How to use clamp? https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

    Another thing that might be useful is to add animations, either to import it or create one yourself. I saw another solution that used animations and it looks so good.

    Marked as helpful
    0