Skip to content
Submitted over 1 year ago

Tailwind styled responsive page with carousel and email validation

Basant Soni•450
@SoniBasant
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Manage landing page
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi guys,

This project is tough one for me. This is my first time I am using Tailwind CSS. So need to work on it from the scratch. From installation, set-up and knowing all different types of files. (Before that it were only three - .html, .css and .js)

Then this project have SVGs as background, carousel for testimonials, email validation and responsiveness. I also worked first time on hover of SVG images.

It was hard to get it, online solution were not working. Then finally I asked for help on discord account of Frontend Mentor. There, Alex Marshall helped me. You can check his GitHub account.

I also want to acknowledge Ecem Gokdogan for many different things I am learning from her; different tags, visitor counter on GitHub, vercel app and more. Her profile-

Last but not the least, I want to acknowledge Brad Traversy for his youtube video on Tailwind. Interestingly it was on the same project so it also helped me whenever I got stuck. Check out his GitHub account

Note : I tried to made it as same as possible. Your appreciation is welcome. Suggest me how to made it more interactive and creative without deviating too much.

Community feedback

  • Reno08-code•300
    @Reno08-codePosted over 1 year ago

    wow, I wish I could as good as you are:) how long have you been learning front end dev ?

    1
    Basant Soni•450
    @SoniBasantPosted over 1 year ago

    @Reno08-code Thank you so much. It was one of the best for me until I upload it. After seeing it in comparison box, it is not that good. Still, this is my first time with Tailwind. Also my first intermediate level challenge after only 2 newbie challenges, so I am happy : )

    Wish there is any app / website where I can see placement of elements, paddings, margins etc. so I can make it as same as possible. How do you work on that? Is it guess work or something else?

    0
    Reno08-code•300
    @Reno08-codePosted over 1 year ago

    @SoniBasant I just completed the beginner challenge and just entered the junior level. I'm currently stuck on JavaScript, so when I saw your solution, I thought you were really talented. Did you teach yourself? How did you learn JavaScript?

    0
    Basant Soni•450
    @SoniBasantPosted over 1 year ago

    @Reno08-code I learn JavaScript from different resources.

    I practiced on freecodecamp. Always refer w3school for theory and to see how something work.

    Just a search in google can show many types of projects with different difficulty level. So I am making projects like that also. Just start and search when stuck. This is how I am learning.

    I am not talented but learning things. : )

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord