Skip to content

Updated UI version of this open source project using Pico.css

License

Notifications You must be signed in to change notification settings

JackGraymer/sqlteaching-redesigned

 
 

Repository files navigation

sqlteaching

SQL Teaching is an interactive tutorial for learning SQL. It is available on http://www.sqlteaching.com

SQL Teaching is MIT licensed - see the LICENSE file for more details.

It's easy to contribute levels to SQL Teaching.

The sqlteaching.js file contains a variable called levels.

This variable has the prompts and answers for each level.

It is an array of dictionaries (the order of the levels). In each dictionary, there are the following keys:

  • name: name shown on web page
  • short_name: identifier added to the URL
  • database_type: is passed into the load_database function, in order to determine the tables loaded
  • answer: the query that the user writes must return data that matches this value
  • prompt: what is shown to the user in that web page

And the following keys are optional:

  • required: Extra validation in the form of case-insensitive required strings
  • custom_error_message: If the validation fails, show this error message to the user

Re-design

Alvaro Cervan came across this site as part of an open source Full Stack Web Development course, The Odin Project.

He loved this SQL interactive tutorial; it is by far the best resource that he has found. It is totally interactive and provides query examples with live results.

However, the UI looked very dated. In fact, when checking the commits, some are from 9 years ago, which explains this issue.

He then started a project to update the UI, redesign its structure, and add support for smaller devices.

Updated design using Pico.css

Re-design done by Alvaro Cervan

Screenshots

Old version

Desktop

Image of Old Version

Phone

Image of Old Phone view

New Version

Desktop

Image of New Version

Phone

Image of New Phone view

About

Updated UI version of this open source project using Pico.css

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 60.4%
  • JavaScript 36.8%
  • HTML 2.8%