Skip to content
OverviewSolutions
14
Comments
4
Jessica Arvizu
@jessicaArvizu

All comments

  • Chiwai•100
    @jchiwaiiSubmitted 9 months ago

    Anyone who can help me in designing the image, especially in other devices with smaller widths, like the mobile device. I have not figured out yet how I will do it without affecting the desktop version.

    Thank you

    Receipe page using HTML and CSS

    3
    Jessica Arvizu•180
    @jessicaArvizuPosted 9 months ago

    Hello there 👋 @jchiwaii.

    Good job on completing the challenge!

    Hey there! I've got a suggestion to make your code even cooler.

    Discover Media Queries: Media queries are like magic for responsive web design. They let you use different styles in your CSS based on things like how big the screen is or whether it's in portrait or landscape mode. Start by checking out some articles or tutorials to get the hang of how they work and how to use them like a pro.

    Practice, Practice, Practice: The more you play with media queries in your projects, the better you'll get at using them. Begin with simple layouts and then add more complexity as you feel more comfortable. Try out different breakpoints (points where your design changes) and CSS rules to see what happens on all kinds of devices.

    Go Mobile-First: Here's a cool trick for responsive design – go mobile-first! Design your layout for mobiles first, then add styles for bigger screens using media queries. This way, your website will look awesome on small screens and smoothly adjust to the bigger ones. Give it a shot, and your site will be top-notch! 🚀🌟

    I really hope you find this suggestion helpful for your upcoming projects!

    Keep rocking the fantastic work and don't shy away from tackling new projects. Your progress is truly remarkable, and every project is a positive step in your front-end development journey! 🚀🌟

    Apart from that, great job!

    Wishing you happy coding ahead!

    Marked as helpful
    0
  • Jessica Arvizu•180
    @jessicaArvizuPosted 9 months ago

    Hello there 👋 @felipe-accioly.

    Good job on completing the challenge, your project looks really good!

    I have a suggestion about your code that might interest you:

    Use a Mobile-First Approach: A fantastic strategy for responsive design is to start with the mobile-first approach. Begin by designing the layout for mobile devices and then add styles for larger screens using media queries. This method ensures your website looks great on small screens and seamlessly adapts to larger ones. I noticed that your site is not responsive, but if you keep practicing, it becomes easy to master :)

    Also, I wanted to share an incredibly useful browser extension called Perfect Pixel with you. It allows you to compare your design with the image and see the exact dimensions. I highly recommend giving it a try!

    I hope this suggestion proves handy for your future projects. Keep up the outstanding work and continue challenging yourself with new projects. Your progress in front-end development is truly impressive, and each project is a significant step forward in your journey! 🚀🌟

    Aside from that, great job! Happy coding!

    1
  • Jessica Arvizu•180
    @jessicaArvizuPosted 9 months ago

    Hey there! I wanted to share a fantastic browser extension with you called Perfect Pixel. It's super handy for comparing designs and seeing the exact dimensions. I highly recommend giving it a try! Someone here recommended it to me, and it changed my work style :)

    I hope this suggestion proves helpful for your future projects. Keep up the amazing work and keep challenging yourself with new projects. Your progress in front-end development is truly impressive, and each project is a step forward in your journey! 🚀🌟

    Apart from that, great job! Happy coding!

    Marked as helpful
    0
  • Jessica Arvizu•180
    @jessicaArvizuPosted 9 months ago

    Hello Front-End Mentor Community! I'm Jessica and this is my solution for this challenge! 😊

    Built with:

    • HTML 🧾
    • Tailwind CSS 🎨
    • Mobile first workflow approach 📲
    0