Muscatine Middle School Coding
Where MUSKIE CODERS learn HTML, CSS & JavaScript

Central and West Middle Schools

Each semester approximately 200 students take Coding as an exploratory at Muscatine Middle Schools.

After becoming familiar with scratchpad.io, codeanywhere.com, web server basics and basic computer skills, they sequentially learn HTML, CSS and JavaScript through a series of exercises and small practice projects for the first 12-13 weeks. The remaining 5-6 weeks, students choose to work on projects based on what they want to learn more of or feel comfortable doing.


The syntax and function of each language is explored with real-world and relevant purpose to create electronic-based communications and programs.

Students also learn how computing impacts their role as a user and creator of technology, and are evaluated by project submissions, employability skills and portfolios.


Students primarily use codeanywhere.com with parceled server space from muskiecoding.com, and secondarily use scratchpad.io and/or the Caret Chrome App. All students code on their Chromebooks.


HTML
Students learn to properly identify, code specific elements and attach attributes to produce a web page with:
Tags*Elements*Attributes*ol-ul*Lists*Links*Tables*DIV

CSS
Students learn the basic set of properties and values, the basic understanding of how CSS styles modify HTML elements and coding syntax of:
Selectors*Properties*Values*Buttons*Transitions*Transforms*Animations

JavaScript
Students learn the following programming concepts:
Variables*Strings*Integers*Boolean*Operators*Conditions*Functions*Loops*Event Handlers*Arrays


Essential computer skills
Students learn keyboard shortcuts, find and replace, folder navigation, understand file extensions, upload/download, cloud IDE, FTP, interfaces, best practices of technology and internet responsibility.

Examples of student assignments

HTML
Tags
Attributes
List
Links
Tables
CSS
Borders and backgrounds
CSS properties practice
CSS properties practice
CSS properties practice
CSS Hover
Keyframes Animation
CSS rotate and position
Keyframes Animation
Keyframes Animation
JavaScript
Poor man's calculator
Random number and if-else
Making dice
Dice with animation!
Score keeping
Countdown Timer-funny example
Rotate X Y Z

Examples of student projects

6th Grade
CSS Shapes and Animation
CSS Shapes
CSS Shapes and GIF animation
School Days Countdown
Rock, Paper, Scissors
Javascript Changing CSS
Javascript Character Builder
Pre and CSS
Quiz
7th Grade
Javascript Fish Builder
CSS Shapes
CSS Shapes
3D with CSS
CSS Recipe
HTML table
Haiku
Javascript FACE Builder
Fictional Products Website
8th Grade
CSS Shapes and Animation
CSS Shapes
CSS Shapes
CSS Animation
CSS and HTML
Pre and Animation
CSS Flashcards
CSS Flashcards
NetFlix Promo Sample
Javascript random numbers and Changing HTML
Magic 8-Ball
Quiz
CSS Recipe
Pre, Marquee and CSS