Welcome to CSS Diner

It's a fun game to learn and practice CSS selectors.

To play, visit flukeout.github.io or cssdiner.com

Change Log

Aug 25,2016

• Added Twitter, Facebook and Email share actions
  • Tracking clicks with GA Events
• Made the level menu and editor area scroll independently
  • Using custom jQuery scroll library

Aug 18,2016

• Started using cssdiner.com to redirect to flukeout.github.io

Aug 12,2016

• Added checkmarks to completed levels in level menu and header

Aug 4,2016

• Began tracking progress and correct guesses with GA Events

Filing issues and PRs

Please file issues and PRs in the css-diner repo.

Repo structure

Here's the repo structure, it's a bit confusing...

• Currently, all of the working code (including issues, PRs and in-progress branches) is hosted in the css-diner repo
  • The lastest version of the code is on the develop branch
• The live version is published from the flukeout.github.io repo
  • Live version lives on the master branch

Deploying

This is more of a note to myself in case I forget, to deploy the latest version, I'll have to push to the master branch on the flukeout.github.io repo from the latest develop branch.

Roadmap and Status

Potential Features & Improvements

• Lots of people have trouble with level 19, how should I address this?
• Create levels for attribute selectors
  • Will probably add attributes like customer='bob' and place a little nametag by those dishes
  • Also some great ideas in this issue
• Figure out how to tackle the .table element
  • Including it in the selector string makes the selectors invalid, but it shouldn't
• Investigate the order of stacked oranges in the markup, some users think it's counter intuitive
• Block attempts to use comma between selectors
• Only pass each level if that level's selector is used
• Make it easier to navigate between levels
• Number all of the levels in the menu
• Add UI to Tweet about finishing all of the levels
• Add additional challenges per Selector
  • Some repetition per level would be good

Special Thanks

• @k88hudson
• @antlam
• @smashman2004