1.06 Skill-builder: Construct a picture

Resources

//CSS: Applying styles using IDs
//CSS: Positioning

Hidden Agenda

Saving your work

Use Save as... to save this empty template as "1.06S-ConstructAPicture-LastName.html" in your Computer Programming 12 directory.

The assignment

Create a scene by positioning the following Khan Academy images in an HTML page using CSS. Use IDs and CSS Positioning to arrange things in an interesting way.

All images begin with: https://www.kasandbox.org/programming-images/cute/

For example: <img src="https://www.kasandbox.org/programming-images/cute/BrownBlock.png">

BrownBlock.png
ChestClosed.png
ChestLid.png
ChestOpen.png
DirtBlock.png
DoorTallClosed.png
DoorTallOpen.png
GrassBlock.png
PlainBlock.png
RampEast.png
RampNorth.png
RampSouth.png
RampWest.png
Rock.png
RoofEast.png
RoofNorth.png
RoofNorthEast.png
RoofNorthWest.png
RoofSouth.png
RoofSouthEast.png
RoofSouthWest.png
RoofWest.png
Star.png
StoneBlock.png
StoneBlockTall.png
TreeShort.png
TreeTall.png
TreeUgly.png
WallBlock.png
WallBlockTall.png
WaterBlock.png
WindowTall.png
WoodBlock.png

Extend and expand

There are plenty of other images out there on the internet.

Link to them and add them to your palette of building blocks!

You can find other linkable images here