Using CSS To Realize The Mock Up: Lesson #7

Magic Eight Ball Sign In
Magic Eight Ball Sign In Screen - Cate's Mock Up

Based on C.’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

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.

speech bubble
happy face
ask question

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.


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 which will allow us to type in any word and generate an image of a speech bubble with the text

C. 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.  C. remebers how to do width and height and chose to use 125.

Finally we talked about the text input field

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}


<!--- TODO: figure how to center in CSS */ --> <center> <p/>

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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s