Skip to content

This CSS Grid Learning Environment provides lessons, an in-page code editor, & visual feedback. It was written from scratch as a proof-of-concept using pure JavaScript.

Notifications You must be signed in to change notification settings

james-priest/css-grid-code-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

97 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CSS Grid Practice Environment

This is a CSS Grid learning and practice environment. It provides a series of follow-along lessons and was inspired by Grid Critters learning game.

screenshot

This proof-of-concept was written from the ground up using vanilla JavaScript. It provides the following:

  • Dynamic in-page code editor
  • Syntax highlighting
  • CSS environment to learn CSS Grid Layout

You can test it at the following link.

See below for screenshots.

Installation

Clone the repository and change directories.

$ git https://github.com/james-priest/grid-critters-code.git
$ cd grid-critters-code

No build environment is necessary. This can be run from the file system but ideally it should be run from any local http server.

Here are a couple links showing how to do this.

Usage

The app has two main JavaScript pages.

  • mce_ta.js - This is responsible for the code editor and all event handling within the app. Any new functionality would be added here.
  • pages.js - This acts as the data source. Any new pages, lessons, or quizzes would be added here.
  • constants.js - provides a lists of html elements, css constants, and css functions used for syntax highlighting within the editor.

Screenshots

screenshot 1

screenshot 1

About

This CSS Grid Learning Environment provides lessons, an in-page code editor, & visual feedback. It was written from scratch as a proof-of-concept using pure JavaScript.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published