CSS Practice Game — CSS Diner

Practice using CSS selectors by playing a game. No login required. Work at your own pace and learn by experimenting.

Instructions

  • Open the CSS Diner game.
    Go to: https://flukeout.github.io/
    • This is a game. You do NOT need to make an account or sign in.
  • Your goal:
    Use CSS selectors to select the correct items on the table.
  • How to play:
    • Look at the HTML Viewer on the right.
    • Notice the tag names like plate, apple, or bento.
    • Type a selector in the box on the left.
    • Press Enter to check your answer.
    • Hint: For early levels, try typing the tag name you see in the HTML.
  • What to complete:
    • Finish Levels 1–32.
    • If you finish early, you may continue.