Skip to content
Submitted about 2 months ago

Room Homepage Master

khalagai•390
@khalagai
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Room homepage
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of setting the slider arrows in the different positions in mobile and desktop versions. I jumped straight into the challenge without planning my design. This set me back a day or two. Next time I will get the design mock-up first before starting.

What challenges did you encounter, and how did you overcome them?

Getting the slider buttons in place in the different screen versions. I used display: grid which allowed for flexibility.

What specific areas of your project would you like help with?
  • How can I get the font sizes right in the different screen sizes?
  • I would also appreciate advise on how I can improve the code.

Community feedback

  • Kamran Kiani•1,280
    @kaamiikPosted 20 days ago

    Hi. Congrats for doing this challenge. I noticed some points I wanna mention:

    • You can check most of the pages and see they have a structure like this insid the body:
    <body>
  <header>...<header>
  <main>...<main>
  <footer>...<footer>
</body>
    • Based on your design you may have header and footer or not. But You should have a main element inside your page. So after your body always wrap all of your code inside a main element.
    • Decorative images do not need an alt message and inside your img tag the alt attribute should be empty like alt="".
    • Instead of using two img inside your html, you can use picture element that is more robust and change your image based on screen size. It also reduces the load time. You can read more about picture here inside MDN
    • I think there is no need to use br tag here. In case the width of the text become large, try to use max-width instead. It's more robust.
    • Each Page should have One h1 heading.
    Marked as helpful
    0
    khalagai•390
    @khalagaiPosted 5 days ago

    @kaamiik Thank you so much. Let me rework with your suggestions.

    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