rjduran / cmf-digital-f21

cmf-digital-f21

week 2 examples

Topics: HTML, CSS

• basic - A basic HTML page with comments
• google-font - A basic page showing how to use a Google font
• space-cat - A page showing how to use external CSS and JS

week 4 examples

Topics: HTML, CSS, JS, p5.js

• p5-basic - A basic p5.js sketch
• p5-fullscreen - A basic p5.js sketch that is responsive to the browser canvas size
• p5-save-canvas - An example sketch that shows how to save a canvas to png
• p5-save-canvas-ig - An example sketch that shows how to save a canvas to 1080x1080 px png for instagram
• p5-save-canvas-random - An example sketch that shows how to save a canvas to png with random number file name. ie. sketch-123.png
• p5-save-fullscreen-canvas - An example sketch that shows how to save a full screen canvas

week 6 examples

Topics: HTML, CSS, JS, bootstrap, materialize, bulma

• student-list - A filterable list built using vanilla JS.
• student-list-basic - A filterable list built using vanilla JS and minimal styles.
• student-list-bootstrap - A filterable list built using vanilla JS and bootstrap as the front-end framework. Ref: Figma Design Prototype
• student-list-materialize - A filterable list built using vanilla JS and materialize as the front-end framework.
• student-list-bulma - A filterable list built using vanilla JS and bulma as the front-end framework. Includes images.
• student-list-load-from-data - A filterable list built using vanilla JS and minimal styles. The data is dynamically loaded into the DOM from load-names.js.

week 7 examples

Topics: APIs, web apps, JSON, node.js, express.js, socket.io

• hello-node - A basic node.js app that prints "hello world!" to the console.
• hello-node-server - A basic node.js web server app. Responds to request with "Hello World" in the browser at http://localhost:3000.
• hello-node-static-server - A basic node.js web server app. Responds to request with a static web page. Loads static assets - html, css, and js.
• chat-example - A node.js and websocket (socket.io) based chat app
• p5-websockets - A p5.js app running on node.js based web server. Uses websockets (socket.io) for realtime data streaming.
• getsandbox-api - This example consumes an API provided by getsandbox.com to display data in a Bootstrap table.
• student-directory-strapi - This example consumes an Strapi based API holding CMCI Studio student data. The web app and database is deployed on heroku.