Student Log
Coding in HTML5 and
CSS with Intel and
CoderDojo
Name ..............................................................................................
Class/tutor group ..............................................................................
This log is for you to record your work as you complete the Social Media Command Centre
project. There are pages inside this document that are related to the activities and tasks you
will complete along the way. Make sure you keep your log up to date – your teacher may
need it to assess your work.
A reminder – what’s the brief?
You are going to complete an app for a company who have so much work that they can’t
finish the project. They have achieved quite a bit in designing and building an app that
teaches the user to play the piano, but there’s still a lot to do. It’s your task to sort out the
design and functionality of the app to make it work properly, and then to try it out on your
friends. Along the way you will learn how to use HTML5 and CSS, as well as programming in
JavaScript.
Resources – what you can use to complete the project
You have a bank of resources to help you with this project. These are:
Video to introduce the project
A click-through project guide with video and audio
Briefing documents to help with you with HTML5 and CSS
Guides to downloading and using Notepad++
Video tutorials that show you how to use Notepad++ to program in HTML5 and CSS
The partially completed app to work on
Student Log to complete
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 1 of 30
Activity 1: Examples of using ‘if... then’ decisions
In Chapter 1 of the project, you have learned about ‘if...then’ statements and how they
are used to make a decision. You saw a couple of examples of how you may use ‘if...
then’ decisions if, for example, the ketchup runs out, or you find you don’t have a clean
shirt for school.
Your task is to come up with three more examples of ‘if...then’ decisions that you have
made over the last few days. These might be about what you have chosen to eat or
drink, or places you have chosen to go, or friends you have chosen to meet up with.
Write your three examples in the spaces below.
Example 1:
Example 2:
Example 3:
Activity 2: Turn a sequence of steps into an algorithm
Below is a simple sequence of steps to make a bowl of cereal for a friend. Take
these steps, add some ‘if...then’ statements, and identify the inputs. Enter your
answer in the box on the next page.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
Do you want a bowl of cereal? YES
Do you want frosted flakes or fruity wheat? FRUITY WHEAT
Take box of fruity wheat from cupboard
Take cereal bowl from cupboard
Tip portion of fruity wheat cereal into bowl
Do you want sugar with the cereal? YES
Take sugar from cupboard
Take spoon from drawer
Add spoonful of sugar to cereal bowl
Do you want skimmed or full-fat milk? FULL FAT
Take full fat milk from refrigerator
Add milk to cereal
Give cereal bowl and spoon to the receiver
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 2 of 30
Your cereal-making algorithm...
Activity 3: Turning a process into a flowchart
In the box below, you will see a simple numbered list that represents the process of getting
out of bed. It’s your job to turn this into a simple flowchart using MS Word and the flowchart
graphics in the Shapes menu (there are some hints about this in the ‘Flowchart shapes
and what they mean’ resource). You can insert the shapes into the next page in his log,
use some connectors, and create your flowchart. Remember, you can easily add text to each
shape by right clicking on it and choosing ‘Add Text’.
Getting out of bed
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
Wake up
Is it a school day?
If no, go back to sleep (hint: this would terminate the process!)
If yes, push back the duvet
Stretch
Sit up
Is the bed against the wall to your right?
If yes, swing legs to left
If no, swing legs to right
Do you wear slippers?
If no, stand up
If yes, put slippers on and then stand up
Put on dressing gown
End of process
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 3 of 30
Build your flow chart here (insert page break to generate a new
page if you need it)
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 4 of 30
Activity 4: Identifying the algorithm in HTML5 code
There is a piece of HTML5 code in the screenshot below. This has been created in
Notepad++. Just as the ‘Algorithms in HTML5’ briefing document explained, it’s your task to
work out the simple algorithm that this code represents.
To help you, we’ve created the right number of steps in the algorithm in the box below the
screenshot. All you need to do is fill in the blanks. If you’re unsure about any of them, check
back to the briefing document. You can also insert the tags that are used at the end of each
step, if you feel confident!
The algorithm is...
1. Tell the browser that .....................................starts here
2. Tell the browser that .......................................................starts here
3. Tell the browser that .......................................................starts here
4. Tell the browser that ........................................................ends here
5. Tell the browser that ......................................starts here
6. Tell the browser that ......................................ends here
7. Tell the browser that ...............................................starts here
8. Tell the browser that ...............................................ends here
9. Tell the browser that ...............................................starts here
10. Tell the browser that ...............................................starts here
11. Tell the browser that .................................................ends here
12. Tell the browser that .................................................ends here
13. Tell the browser that .......................................................ends here
14. Tell the browser that .............................................ends here
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 5 of 30
Activity 5: Knowing your tags
In Chapter 2 you are able to watch a set of video screen captures that explain and
demonstrate how to code in HTML5. As you work through the videos, you will learn about
the different tags that are used in the code to tell the browser how to present your text and
images. The table below will help you remember these tags. Complete it as you work
through the videos. We have entered some information to get you started, and your task is
to fill in the blank cells.
Start tag
End tag
<html>
</html>
What the tag does
Tells the browser that this is the body where text and images will
appear
<br>
No tag
needed
</i>
Tells the browser that the text between the tags should be bold
<p>
<h1>
Inserts an image into the body
src=”—“
No tag
needed
Specifies the width and height of an image
</a>
Inserts a table into a page
<tr>
<td>
Adds an ordered list to a page
</ul>
No tag
needed
Adds an input field to a page
<input
type=”button”>
Divides a document into sections
</audio>
<div class=”header”
<div id=”special”
Adds a head to a web page
</title>
<style>
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 6 of 30
Activity 5 cont’d: Creating your first pages in HTML5
To make it easier for your teacher to assess your progress, take a screen shot of your code
in HTML5 and insert it into the box below.
HTML5 code...
Take a screen shot of the published page from your HTML5 code and insert it in the box
below:
The published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 7 of 30
Activity 6: Inserting an image into a page
Take a screenshot of your code to insert an image in Notepad++ and insert it here.
HTML5 code...
Take a screen shot of the published page from your HTML5 code and insert it here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 8 of 30
Activity 7: Adding hyperlinks using the anchor tag
Take a screenshot of the anchor tags in your Notepad++ and insert it here.
HTML5 code...
Take a screen shot of the published page, showing the hyperlinks (one to a page you made
in the previous activity, and the other to an external website) and insert it here.
The published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 9 of 30
Activity 8: Adding a table to a page
Take a screenshot of the table, table row and table data tags in your Notepad++ and insert
it here.
HTML5 code...
Take a screenshot of the table on your published page and insert it in here.
The published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 10 of 30
Activity 9: Adding an ordered and unordered list to a page
Take a screenshot of the code for the ordered list from your Notepad++ and insert it here.
HTML5 code...
Take a screenshot of your published ordered list and insert it here.
Published ordered list...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 11 of 30
Take a screenshot of the code for the unordered list from your Notepad++ and insert it
here.
HTML5 code...
Take a screenshot of your published unordered list and insert it here.
Published ordered list...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 12 of 30
Activity 10: Inserting input fields and a button into a page
Take a screenshot of the code for inputting a name and address field and a button and insert
it here.
HTML5 code...
Take a screenshot of the published page, with input fields and button, and insert it here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 13 of 30
Activity 11: Dividing up your web page into sections
Take a screenshot of the code for dividing your web page into three sections and insert it
here.
HTML5 code...
Take a screenshot of the published page, with the three sections, and insert it here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 14 of 30
Activity 12: Adding audio to your web page
Take a screenshot of the code for adding an audio player with an MP3 track and insert it
here.
HTML5 code...
Take a screenshot of the published page with the audio player with controls and insert it
here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 15 of 30
Activity 13: The HTML5 code for the class and id attributes
Take a screenshot of the code for adding a class and an id within a page division and insert it
here.
HTML5 code...
Activity 14: Adding a head and title to your web page
Take a screenshot of the code for adding a head and title to your web page and insert it
here.
HTML5 code...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 16 of 30
Take a screenshot of the published page head and title and insert it here.
Published page...
Main task 1: Debugging the Piano app HTML5 code
Your main task for Chapter 2 is to fix the HTML5 code for the app so that the first problem is
resolved.
When you have changed the code, take a screenshot of the change you have made and
insert it below.
HTML5 code...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 17 of 30
Take a screenshot of the Piano app with the problem resolved and insert it below. This will
show your teacher that you have completed the first main task.
Piano app with problem resolved...
Activity 15: Starting to use CSS
Take a screenshot of your use of the <style> tag and insert it below.
HTML5 code...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 18 of 30
Take a screenshot of the published page with the styled text and insert it here.
Published page...
Activity 16: Using CSS with HTML5 attributes
Take a screenshot of your use of the class and id tags and insert it here.
HTML5 code...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 19 of 30
Take a screenshot of the published page with the styled text and insert it here.
Published page...
Activity 17: Changing the font style and text alignment using CSS
Take a screenshot of your use of the font style and alignment code and insert it here.
HTML5 code...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 20 of 30
Take a screenshot of the published page with the styled text and insert it here.
Published page...
Activity 18: Setting the size and position of an image with CSS
Take a screenshot of your use of the image size and position code and insert it here.
HTML5 code...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 21 of 30
Take a screenshot of the published page with the sized and positioned image and insert it
here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 22 of 30
Activity 19: Using the box model with margins, borders and padding
Take a screenshot of your use of the border using the border-style, border-color, borderwidth syntax and insert it here.
HTML5 code...
Take a screenshot of the published page with the image and its border and insert it here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 23 of 30
Take a screenshot of your use of the border using the border: syntax and insert it here.
HTML5 code...
Take a screenshot of the published page with the image and its border and insert it here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 24 of 30
Take a screenshot of your use of the margin and padding syntax and insert it here.
HTML5 code...
Take a screenshot of the published page with the image and its border, margin and padding
and insert it here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 25 of 30
Activity 20: Using the float attribute
Take a screenshot of your code that floats the image to the left and adds a margin, and
insert it here
HTML5 code...
Take a screenshot of the published page with the image and the text alongside it and insert
it here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 26 of 30
Activity 21: Revising the CSS syntax
Complete the table below to show you know the different CSS syntax that is used to style a
web page. We have completed the first two to help you.
CSS syntax
What the syntax does
<style> ... </style> (inserted in the
<head> section)
Tells the browser the style information for the web page
<style>
p{color:red;}
</style>
Tells the browser that all paragraph text in the website will
be red
<style>
.green{color:green;}
</style>
<style>
#blue{color:blue;}
</style>
<style>
.green{color:green;
font-family:verdana;}
</style>
<style>
.green{color:green;
font-family:verdana;
font-size:10px;}
</style>
<style>
.green{color:green;
font-family:verdana;
font-size:10px;
font-style:italic;
</style>
<style>
.green{color:green;
font-family:verdana;
font-size:10px;
font-style:italic;
text-align:center;}
</style>
<style>
#pic1{width:320px;
Height:240px;}
</style>
<style>
#pic1{width:320px;
height:240px;
position:absolute;
left:50px;
top:50px;}
</style>
<style>
#pic1{border-style:solid;
border-color:red;
border-width:2px;}
</style>
<style>
#pic1{border:2px solid red;}
</style>
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 27 of 30
CSS syntax
What the syntax does
<style>
#pic1{border-style:solid;
border-color:red;
border-width:2px;
margin:10px;}
</style>
<style>
#pic1{border-style:solid;
border-color:red;
border-width:2px;
margin:10px;
padding:10px;}
</style>
<style>
img{float:left;}
</style>
Complete the next tag for Activity 22
Tells the browser that the styling information for the page
can be found in a separate css file called ‘mystyle.css’.
Main task 2: Debugging the CSS in the Piano App
Take a screen shot of the debugged CSS code and insert it below.
CSS code...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 28 of 30
Take a screenshot of the published debugged Piano App and insert it here.
Published page...
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 29 of 30
Learning outcomes for the Intel and CoderDojo Coding in HTML5
and CSS project
At the end of the project, go through this list and tick the boxes you feel you have achieved.
If you think of any that we haven’t included here, add them at the end!
Learning outcomes
Tick
Understand what simple algorithms are
Understand how pseudo code can be used to create simple algorithms
Understand how an algorithm can be used to identify and respond to user input
(e.g. password strength testing)
Understand how flow charts and their symbols can be used to represent an
algorithm
Create pseudo code flow charts to represent simple process algorithms
Understand the use of if…then statements
Understand how algorithms are used in computer code
Use Notepad++ to create HTML 5 code
Use HTML5 tags to produce and format text in a web page
Use HTML5 tags to insert and size images into a web page
Use HTML5 tags to insert hyperlinks into a web page
Use HTML5 tags to add and format tables to a web page
Use HTML5 tags to add input fields and buttons to a web page
Use HTML5 tags to divide a web page into sections
Use HTML5 tags to add MP3 audio tracks to a web page
Use HTML5 tags to create attributes (class and id) for styling purposes
Use HTML5 tags to add a head and title section to a web page
Find errors in HTML5 code and correct them
Use Notepad++ to create CSS for a web page
Use HTML5 attributes (class and id) with CSS
Use CSS to style and position text in a web page
Use CSS to set the size of elements (e.g. images) in a web page
Use CSS to set the margins, borders and padding (e.g. the box model) of
elements in a web page
Use CSS and HTML5 to mix text and images effectively in a web page
Work with both HTML5 and CSS to code and style a web page from scratch
Apply CSS to a whole web page using a separate styling file
Find errors in CSS code and fix them
© Copyright e-skills UK Sector Skills Council Ltd 2000-2014
Page 30 of 30