🎉 Responsive Landing Page with HTML & Tailwind 🎉
Design comparison
Solution retrospective
Hey there! I'm excited to share that I recently delved into the world of Tailwind CSS for the first time, and let me tell you, it's a whole new ball game compared to Bootstrap! The experience was both thrilling and challenging, but hey, that's how we grow, right?
I decided to take this plunge because I wanted to amp up my skills and get hands-on practice with Tailwind CSS. It's fascinating how it approaches styling in a distinctive way, and the learning curve was totally worth it.
The journey wasn't without its moments of head-scratching, but hey, that's what makes it fun, isn't it? I'm always up for a good challenge. Now that I've had a taste of Tailwind CSS, I can't wait to incorporate it more into my projects and see what other cool things I can create.
Here's to embracing new technologies, learning, and growing as developers! Have you ever tried Tailwind CSS? Let's swap experiences!
Community feedback
- @Ezekiel225Posted 9 months ago
Hello there 👋 @jessicaArvizu.
Good job on completing the challenge !
Your project looks really good!
I have a suggestion about your code that might interest you.
Learn more about Media Queries: Media queries are an essential part of responsive web design. They allow you to apply different CSS styles based on the characteristics of the device, such as screen width, height, orientation, and resolution. You can start by reading articles or tutorials on media queries to understand how they work and how to use them effectively.
Practice: The best way to become familiar with media queries is to practice using them in your projects. Start with simple layouts and gradually increase complexity as you gain confidence. Experiment with different breakpoints and CSS rules to see how they affect the layout on various devices.
Use a Mobile-First Approach: One popular strategy for responsive design is the mobile-first approach. This means designing the layout for mobile devices first and then adding styles for larger screens using media queries. This approach helps ensure that your website looks good on small screens and then adapts to larger screens.
There is an very useful browser extension called Perfect Pixel that allow you compare with the design image and thus see the exact dimensions. I recommend it to you.
I hope this suggestion is useful for future projects.
Keep up the excellent work and continue to challenge yourself with new projects. Your progress is impressive, and each project is a step forward in your front-end development journey! 🚀🌟.
Other than that, great job!
Happy coding.
Marked as helpful1@jessicaArvizuPosted 9 months ago@Ezekiel225 Hey, that's very good advice! I will definitely take a look at it :)
0
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