Skip to content
OverviewSolutions
8
Comments
10
P

pawelni123

@pawelni123150 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Bojan Lukic•260
    @bojanognjen
    What are you most proud of, and what would you do differently next time?

    I'm proud because that is my first landing page I made without help. I promise, it is only beginning. I will make one more HTML/CSS project and others all will be web apps.

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

    I had to rememmber how does position absolute and relative works, but fortunately I knew where to find that.

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

    Maybe other things that are not in this project like animation, transformation etc. Feel free to leave comment and feedback!

    Meet landing page

    1
    P
    pawelni123•150
    @pawelni123

    The first thing I noticed is that the container is not set to 1440px (though maybe that's even better—in my case, for example, it's cropped to 1440px because that's the container size I set when displaying it on my screen). Overall, great job—only on the iPad Mini, the font sizes could be a bit closer to the original.

    In general, I'm impressed by the amount of CSS you used. For me, it took almost three times as many lines of CSS code (around 900), while you managed to fit it into just 300! Once again, really great work!

  • P
    Alokananda Y•120
    @alok-38
    What are you most proud of, and what would you do differently next time?

    I'm proud that I was able to follow Kevin Powell's tutorial on https://www.youtube.com/watch?v=JFbxl_VmIx0

    Responsive four card section

    1
    P
    pawelni123•150
    @pawelni123

    You posted wrong project! Check it once again! :)

    Marked as helpful
  • P
    pawelni123•150
    @pawelni123

    The mobile version looks fantastic – congratulations! As for the desktop version, I have a few remarks. First of all, the cards seem too stretched – try working on adjusting their width properly. As you can see in the original example, the words in the card descriptions are also positioned differently. I know these are small details, but I think setting fixed width and height values for the cards would help a lot. Overall, great job! Keep going!

    Marked as helpful
  • sudharson•20
    @sudharson3131
    What are you most proud of, and what would you do differently next time?

    💡 What I’m Most Proud Of: 🎯 The responsiveness is smooth and pixel-perfect on all screen sizes. 🎯 Learned to combine Grid & Flexbox effectively for layout structuring. 🎯 The image swap technique for mobile/desktop makes the UI more dynamic.

    🔄 What I’d Do Differently Next Time: 🛠️ Use CSS clamp() or fluid typography for better text scaling across devices. 🛠️ Implement animations/transitions to enhance user experience. 🛠️ Optimize the code further using SCSS for better maintainability.

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

    🔥 Challenges I Faced & How I Solved Them: 1️⃣ Image Not Changing for Mobile View 🔹 Initially, the picture tag didn't work as expected. Instead, I used content: url(...) in CSS for a smooth image switch in mobile view.

    2️⃣ Centering the Card on the Page 🔹 I struggled with positioning, but using display: flex on the body with align-items: center; justify-content: center; height: 100vh; solved the issue.

    3️⃣ Aligning the Button’s Text & Icon Properly 🔹 The icon and text were misaligned. Fixed it by using display: flex; align-items: center; gap: 10px; inside the button.

    Responsive - Product Card Component

    1
    P
    pawelni123•150
    @pawelni123

    Good job overall, but pay close attention to the details and compare them with the reference image. The font, colors, and sizes differ significantly from the original design — especially the prices! The button width could also be improved, along with the line height and spacing between sentences in the description. Solid work, but polish those details!

  • P
    pawelni123•150
    @pawelni123

    It looks really good, the only thing I noticed is the spacing between the lines in the paragraphs. Overall, great job! Congratulations!

  • CHOUIA Mohammed•170
    @chouiamohammed
    What are you most proud of, and what would you do differently next time?

    I'm proud of getting used to CSS properties—they don't look scary anymore! XD Next time, I would focus on writing cleaner, more structured CSS to make my code easier to manage.

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

    This time, I faced a challenge with centering an image, but after experimenting with different CSS techniques , I was able to solve it. It turned out to be easier than I initially thought. Moving forward.

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

    I want to get more comfortable with positioning elements efficiently. Specifically, I’d like to improve my understanding of different layout techniques like flexbox, grid, and positioning to handle alignment challenges more smoothly. Any tips or best practices for structuring CSS layouts would be really helpful!

    Resnposive Social links profile page

    1
    P
    pawelni123•150
    @pawelni123

    I wouldn't fuss too much about the card size since I've had the same issue and without a detailed design, it's hard to estimate the dimensions from a JPG. However, the buttons have too little spacing and are too long. Overall, I'd work on improving the spacing between elements. Also I noticed that color of fonts on buttons are different.

    o3-mini

View more comments