Skip to content
OverviewSolutions
8
Comments
10
P
pawelni123
@pawelni123

All comments

  • P
    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

  • 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.

  • Yann•170
    @Yannsoler
    What specific areas of your project would you like help with?

    I'm having trouble with the illustration image because in the figma file the image has a higher height, but I didn't manage to do it. I'm happy to take any advice on my code.

    Components Blog Card

    1
    P
    pawelni123•150
    @pawelni123

    Almost perfect! I noticed that profile photo has different colors? I'm also not sure about sizing - compare it to the original version.

  • P
    pawelni123•150
    @pawelni123

    It's great that you added a small inscription underneath - I like it. I don't know what I think about the card's shadow box, in my opinion it's too strong, and the one in the example is just right. The card is also bigger than it should be. If that was your intention, then okay!

    Marked as helpful
  • P
    pawelni123•150
    @pawelni123
    What are you most proud of, and what would you do differently next time?

    In the beginning, I had to think for a while about how to approach the project (this is my first project done independently). I didn’t want to use ChatGPT or other AI tools—I wanted to do it on my own. I managed the HTML code by myself using the BEM methodology. Then, I spent quite a long time considering the CSS. My perfectionism was really getting in the way—I wanted it to be pixel perfect, so I decided to switch to Figma in the form of dev tools (I have Figma in the dev tool version), which made writing the CSS code much easier. I hope this isn’t considered cheating, although I feel like I copied most of the ready-made CSS solution from Figma’s dev tool, so I’m not sure how independent my work really is. On the other hand, it is a learning experience in working with Figma, which seems to be the standard nowadays—everyone works that way. If not, please correct me and let me know whether using Figma in dev tools, where CSS information is provided, is acceptable and standard compared to solving the design on your own.

    QR code component (figma, css flexbox) Challenge 1

    2
    P
    pawelni123•150
    @pawelni123

    Yes! I already changed it!