Using CSS To Realize The Mock Up: Teaching Computer Programming To Kids Lesson #7

Based on Cate’s mock up, we built a real HTML page using CSS.

Step 1: Here is how we built the page

First I told her about the <div> tag which we can use to divide up different sections of the mock up.
So she did the following to divide up the screen into 4 sections.

<div>
Welcome!
</div>
<div>
speech bubble
</div>
<div>
happy face
</div>
<div>
ask question
</div>

Step 2: She picked the font Arial Rounded MT Bold using the Font Book application on the Mac

I told her the div tag needs a class name and she can choose whatever she wanted, so she chose asdf for simplicity of typing, I think she understands the concept that humans are in charge of ‘names’ and variable names.

<div>
 WELCOME!
</div>

Then I talked to her about the <style> tag to change the font face for the class asdf

• font-size : this is the number of ‘points’ or pixels of the height of the font she wanted to use, and we experimented with different numbers until she decided on 50
• font-family : this is cut/pasted from Font Book

*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";  text-align: center;}

For the speech bubble, we found a site http://wigflip.com/ds/ which will allow us to type in any word and generate an image of a speech bubble with the text


<div>
<img src="ask_name.gif">
</div>


Cate wanted to use the Yahoo! Messenger happy face as the magic eight ball. I showed her how to Show Package Content for the Yahoo! Messenger app on the Mac. the file is Applications/Yahoo! Messenger/Contents/Resources/cesario.icns

We opened the file using the Mac Preview app and saved it as a .gif file so that transparency is preserved.  Cate remebers how to do width and height and chose to use 125.


<div>
<img src=”Yahoo!.gif” width=”125″ height=”125″>
</div>

Finally we talked about the text input field

<div>
<form>
 <input/>
 </form>
</div>

To put the finishing touches, we played with more CSS to add a 60px whitespace

p {margin-top: 60px}

Here is the complete HTML code

<style type="text/css">
*.asdf {font-size: 50px; font-family: "Arial Rounded MT Bold";
 text-align: center;}

*.fd {align: center; }

p {margin-top: 60px}

</style>

<div>
 WELCOME!
</div>
<!--- TODO: figure how to center in CSS */ -->
<center>
<p/>
<div style="margin-left: 200">
 <img src="ask_name.gif">
 <!-- from http://wigflip.com/ds/ -->

</div>

<div>
<img src="Yahoo!.gif" width="125" height="125">
</div>
</center>

<div>
<form>
<center>
 <input/>
 </form>
</center>
</div>

—-
This is a series that documents my daughter’s curiosity to learn about computer programming
—-