Skip to content
Submitted over 3 years ago

Dine Restaurant Website w/Sass and Vanilla JS

Trista Lanette Pollard•555
@tlanettepollard
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Dine restaurant website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I would appreciate any feedback about my website. Thanks! Trista 🙋🏾‍♀️

Community feedback

  • Chamu•13,130
    @ChamuMutezvaPosted over 3 years ago

    Greetings Lanette

    That's an awesome job. Here are a few things to look at

    • wrap all the content in the body with a div container, eg
    <body>
    <div class="container">
            <main element here>
            <footer here>
     <div>
<body>
    • set a max-width on the container element so that your content does not overstretch on large screens avoiding the content from being distorted. Use dev tools to check for screens that will be larger than 2000px (tv)
    • assistive technology users depend on the alt values to visualize the message that is being put across, hence i would suggest to have alt values that are descriptive not values that are centered on what the image is. For example <img class="logo" src="/images/logo.svg" alt="Dine logo" /> , the message here is not about the logo (eg i am visually impaired , telling me that there is a logo does not help me) , i would think of introducing dine to the user welcome to Dine restaurant (yes, i am on right track, i am hungry - i want to order food). Another option is to use it as an empty alt="" indicating that it is just a decorative element and screen readers will just skip it. <img class="features__content--pattern" src="/images/patterns/pattern-divide.svg" alt="divide pattern"/>. This is a good candidate of an alt=""
    • use the logo as an anchor to take you back to the main page , do not create another element to do that. So the image will have an a as a parent. That's what i see in most website - check Frontend Mentor site.

    Well done

    Marked as helpful
    2
    Trista Lanette Pollard•555
    @tlanettepollardPosted over 3 years ago

    @ChamuMutezva Thank you Chamu! Your suggestions were extremely helpful. I'm usually stuck on what to write for the alt tags and when to leave just empty quotes. This helped a lot. Thanks again! 🙋🏾‍♀️ Trista

    1
  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    and the date picker and time picker it would be nice of there was a drop-down that the user could pick the preformed option. Since there are 12 months in the year it would be nice if it had all of those options that day with days of the month, hours.

    1
    Trista Lanette Pollard•555
    @tlanettepollardPosted over 3 years ago

    @palgramming Hi. Thanks for that feedback. I was thinking about that after I saw an example of a dropdown for the date and time. I will add that to my update list. Thank you again. Trista

    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