MS Design Resources

Design & Coding Free Day Activities

All games work in your browser with no login needed!

🎮 Programming/Creative Coding

• Hour of Code - Variety of one-hour coding tutorials and games

• Code Combat - Compete with your class to learn code and complete challenges (Needs to be set up with your teacher first)

• p5.js Editor - Create interactive art and animations (click examples to remix!)

• JSFiddle - Live HTML, CSS, and JavaScript playground

• CodePen - Browse and remix thousands of creative coding projects

🔤 Graphic and Visual Design Games

• Kern Type - Adjust spacing between letters to make words look perfectly balanced - Can you get 100%???

• Shape Type - Drag anchor points to fix badly-shaped letters through 10 levels

• Type Connection - Match fonts together like a dating game to learn which fonts pair well

• Better Web Type Triangle - Adjust font size, line height, and width to create perfectly readable paragraphs

• Font Memory Game - Test your font recognition skills with this memory matching game

• Can't Unsee - Pick the better design between two nearly identical options to train your design eye

• The Bézier Game - Master the pen tool by tracing shapes with curves

• The Boolean Game - Combine shapes to match target designs using real design tools

• Pixactly - Draw boxes to exact pixel sizes without rulers

• It's Centred That - Test if you can spot perfectly centered 

• Color Method - Match hues, adjust saturation, and create complementary colors

• Hue Test - Arrange colors in order to test your color vision

• Blend - Color puzzle game arranging colors in gradients (mobile-friendly)

💻 CSS/Web Design Coding Games

• CSS Diner - Learn CSS selectors by selecting plates and food items

• Flexbox Froggy - Guide frogs to lily pads using CSS flexbox

• Flexbox Defense - Tower defense game using CSS flexbox positioning

• Grid Garden - Use CSS Grid to water your carrot garden

• CSS Battle - Recreate designs using the shortest CSS code possible

• Flexbox Zombies - Learn flexbox through a zombie survival game

• Grid Critters - Adventure game teaching CSS Grid (free demo levels)

🎯 Bonus: Quick Design Challenges

• Daily UI - Daily design prompts (no coding required, just ideas!)

• Sharpen Design - Random design challenge generator

• Brief - Generate practice design briefs

🏗️ 3D & Interactive

• Tinkercad - Simple 3D design in browser (free with account)

• A-Frame School - Learn to build VR experiences with web code

• When you are finished:

• Right or Control Click your file on the left.

• Select:  Save as a Mesh

• Make sure it is 3MF

• Write your first name on the file and then what it is: for example:  Zahra Bottle

• Put it in this Print Folder.