project: Resturaunt menu

Tags html css

Hey web developer, let’s see your HTML and CSS skills.

Here is the scenario. You own a restaurant. It’s pretty popular so even with the pandemic going on you have customers showing up all the time. You need to keep your staff and customers safe and so you decide to throw away all your physical menus. If your customers want to see a menu, they just need to visit your website using their phones.

So you need to make a website that diplays the menu.

Success criteria

We aren’t expecting you to win any design awards here. We just need to see that you have some basics down.

You can just make one page with all the menu items on it. You don’t need to implement any navigation or interaction at this point. We just want to see a neat and tidy picture.

  • Please save your menu html in a file named index.html in the root directory of your repo
  • use normal css, no preprocessors please. The modern web doesn’t need css preprocessors. Follow good practices here
  • your html and css should be tidy and readable to humans
  • there is no requirement for you to use js at all. If you choose to include js in your stuff then please make sure you are following recognized best practices
  • The site needs to be responsive: people are going to be accessing this on their phones and other devices
  • Use either bootstrap or tailwind to style your site
  • there need to be at least 2 sections on your menu. For example you might have breakfast, mains, drinks, deserts, etc
  • every dish you sell needs a name, a description and a price

Note on git usage

Please commit your code often and push your changes often. Because that is what professionals do. If you make progress you need back your progress up.

If you drag-and-drop upload your stuff to github we wont be marked as competent.

RAW CONTENT URL