First programs aka writing recipes

Keywords

css, research

Related to Curriculum

understanding how software works and how to filter relevant information from a big amount

Prime Target Group

advanced elementary school students

Required Equipment and Material

text editor, browser

Short Description

In this exercise kids will learn how to find and reuse existing code and modify it to their own needs. They will see how it’s possible to be creative and produce art through programming.

---

Preparations

Open index.html in a browser and in a text editor. Look at the existing code in index.html and then try to modify it to complete the tasks below. You will need to modify the HTML and CSS. Please note that there are differences between styling an element identified by a class and one identified by an id.

Links that will help you complete the tasks are:

• https://css-tricks.com/pseudo-element-roundup/
• https://css-tricks.com/the-difference-between-id-and-class/
• https://developer.mozilla.org/en/docs/Web/CSS/animation
• http://stackoverflow.com/questions/14859322/css3-spin-animation

---

Tasks

1. Change the square into a five-pointed darkblue star using CSS.
2. Also add a 6 pointed purple star and a 12 point darkgray burst.
3. Position them absolutely so they’re equally distributed in the container.
4. Rotate the three elements around a center.

---

License

CC BY 4.0