Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions18Comments15

All comments

  • P
    Remus D. Buhaianu• 3,145

    @Miculino

    Submitted

    Hey guys!

    I decided I should work on my CSS Grid skills a bit more and this challenge was the perfect use-case for it.

    This project has a lot of technologies in it:

    • Svelte
    • Typescript
    • AJV
    • GSAP
    • VanillaTilt.js
    • SCSS

    The AJV and Typescript weren't required for such a project, but I decided I should finally work with Typescript and learn how to implement it in an actual project. I only started learning it two days ago, so I'm definitely eager to hear more about the best practices for this.

    Also, there's an issue caused probably by the clip-path property that I'm using with GSAP. The two box shadows I used on the third and last card don't show anymore. If you know a fix to this issue, please let me know.

    Hope to hear your feedback soon - thanks a lot! ;)

    Responsive Testimonial Grid || Svelte + Typescript - SCSS - GSAP

    #gsap#svelte#typescript#sass/scss

    2

    Rohit• 330

    @Rohitgour03

    Posted

    OHH man, 🤯 It looks really cool. Just amazing.😍🔥 I also wanna learn this type of animation and effects. How you learned these things?

    1
  • Alex• 710

    @alexcarmonadev

    Submitted

    Do you think the code needs any changes? Please let me know so I can keep improving. And if you liked it, you know, give me a lot of love by pressing the like button.

    mobile first

    #bem

    1

    Rohit• 330

    @Rohitgour03

    Posted

    Wow, Just Pixel-perfect 😍😍🔥 Well done, man.👍 How do you just do that??

    0
  • Rohit• 330

    @Rohitgour03

    Posted

    Great job, Aniket 🔥👍 It is almost there, the only thing you can fix is that the rating containers are not well aligned. Everything other than that is just fine. and Keep Practicing 💪

    0
  • Alex• 710

    @alexcarmonadev

    Submitted

    Do you think the code needs any changes? Please let me know so I can keep improving. And if you liked it, you know, give me a lot of love by pressing the like button.

    mobile first

    #bem#gulp#sass/scss

    2

    Rohit• 330

    @Rohitgour03

    Posted

    Amazingly Done, Man 🔥😍 Pixel-Perfect. Keep it up.

    0
  • Nazeer Haidari• 895

    @Nazeer2020

    Submitted

    Hey, please check my solution and give feedback that how can I improve it!

    CSS grid

    2

    Rohit• 330

    @Rohitgour03

    Posted

    Hey, @Nazeer2020 It is looking nice, great job man. 😍👍

    Some things I noticed are :

    1. Some testimonial cards have a different color than the color used in the actual design, just try to fix that.
    2. Headings are a little small, make them a little bit bigger and bolder.
    3. Each card has less amount of a top margin, give the cards some space there.
    4. The page needs the level 1 heading as you can see in your report.

    Everything other than that is just fine. 🔥 And keep trying, keep Hustling 🔥🚀

    1
  • Rohit• 330

    @Rohitgour03

    Posted

    You have done a great Job, 👍 It is looking great 😍 The only thing is that section needs a heading, as you can see in the report. Other than that, everything is just fine.

    Keep practicing 👍😀

    1
  • Rohit• 330

    @Rohitgour03

    Posted

    Well done, 👍😍 @Markizzo You have done a nice job, the design is looking good.

    Just try to improve on these things

    1. As I can see in your solution the headings can be improved by making them bold.

    2. The navigation links are too bold, try to reduce the font-weight in navigations links.

    3. The Call to actions button text is not that visible because of less font-weight, increase it too. 4. The bottom CTA button is somewhat big, make it a little bit small and add some dark color in box-shadow as the light color shadow is looking not that good.

    4. The section above the footer should need some space at the top, there is so much at the bottom. Just reduce that.

    5. your Navbar also needs some space at its top.

    6. Footer links are a little bit small and light-weighted, try to make them a little bigger and bolder.

    7. Your HTML lacks the main tag, try to put all the sections in the main tag.

    8. Use the headings in the order, you can't just put h1, and just after that you instead of putting h2 you put h3 or h4. This is because the page should follow some better structure so that can be accessible to all.

    All things other than that are just fine, Hope that helps you. 👍 Keep trying, keep hustling, stay healthy. 😀💪

    Marked as helpful

    1
  • Rohit• 330

    @Rohitgour03

    Posted

    @BuNNY8646, Hey Bunny, Nicely Done. 👍🔥 You are almost there. Some things I noted in your solution is that ----

    1. Text inside the button is not clearly visible, Try to make it bold and bigger.
    2. You have used semantic tags in HTML, That's good but you may forget to add Header and Main and try to add header and wrap all the middle sections in the main tag because they are part of the main content.
    3. You have used the H1 element multiple times, there should be only one H1 element on the whole page. For other headings, use H2.
    4. The images should have an alternate text, except the image used for decorative purposes, in that case, use an empty alt tag.

    Hope that helps 👍. Keep trying, keep hustling.

    0
  • P
    AK• 6,700

    @skyv26

    Submitted

    I tried my best to complete this project, I made it along with my other work and for the first time I made PWA, a first mile-stone towards learning Progressive Web App. Any suggestion, comment will be appreciated. Please check my PWA by installing it on your devices, doesn't matter what you are using (except smart watches, LOL!). I am happy to share that I have completed my all newbie challenges . Please share your experience.

    Ping Coming Soon Responsive + Mobile First + PWA Supported,Vanilla JS

    #accessibility#vanilla-extract#lighthouse

    5

    Rohit• 330

    @Rohitgour03

    Posted

    Wow, Looks great. Pixel-perfect. 😍👍

    Marked as helpful

    1
  • Rohit• 330

    @Rohitgour03

    Posted

    Looking Nice, Good Job.👍 @rabileon But there are many things you should improve upon,

    1. Try to put all the sections in the main tag. Because it is the main content and to structure better wrap all the sections in a main.
    2. In the social links you have used buttons and you can also use the anchor tags for them because they are not exactly buttons, they are just links.
    3. There should be an alternate text for all the images.
    4. You can add padding in the input of the form. and many things you can learn from the report, try to find the errors and fix them.

    Marked as helpful

    0
  • Rohit• 330

    @Rohitgour03

    Posted

    Amazingly done, Great. 👍😍 I always wonder How you make it so pixel-perfect? 😱🤔 In my case, I always try to do that, but every time I failed to do so? 😭

    1
  • Rohit• 330

    @Rohitgour03

    Posted

    Great Job, @akshaywebster 👍😍 It is almost there. But one thing I can see in your solution is that image is not just exactly as in the design, everything other than that is Nice. I liked the animation part.

    I have a doubt if you could clear it. There are two main ways we can work with the images in CSS, One is adding the image using img tag in the HTML and Another is we can add the image as a background image to some containers. Which is the best way first or second??? and Why??

    0
  • Rohit• 330

    @Rohitgour03

    Posted

    It's almost there. Nicely done 👍 One thing, maybe you forget to add box-shadows on the main. Other than that it is perfect. 🔥🚀

    Marked as helpful

    0
  • Rohit• 330

    @Rohitgour03

    Posted

    You have done a nice job there 👍, I really liked it 😍, but one thing that I noticed was that at some point when it crossed the media query, you have set a certain width to the mockup image which is causing the image to squeeze, and maybe you don't want that your image to get distorted. One thing you can do is to put that image in a container. Everything is just fine and cool. Hope you will find it useful. 👍

    Marked as helpful

    1
  • Rohit• 330

    @Rohitgour03

    Posted

    Thanks, TEE, for taking your time to review my solution. I will work on the suggested things by you. Thanks a lot.🙏

    0