Scribd
Upload
35 views

Coding5k Day1

The document outlines a coding class curriculum that will have students: - Create a website using HTML and CSS to host their projects, learning tools like GitHub and Heroku. - On the first day, students will make a simple static website with basic HTML tags, then add CSS styling. They will introduce themselves and discuss what HTML and CSS are. - As their first project, students will create a personalized digital postcard using HTML tags like <img> that they customize with different images, colors, fonts and sizes. They will build on concepts from the simple website.

Uploaded by

api-477205223
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

Coding5k Day1

The document outlines a coding class curriculum that will have students: - Create a website using HTML and CSS to host their projects, learning tools like GitHub and Heroku. - On the first day, students will make a simple static website with basic HTML tags, then add CSS styling. They will introduce themselves and discuss what HTML and CSS are. - As their first project, students will create a personalized digital postcard using HTML tags like <img> that they customize with different images, colors, fonts and sizes. They will build on concepts from the simple website.

Uploaded by

api-477205223
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Class Outcomes:

Students will create:


● A website that will contain all of their different projects.
●
Students will learn how to use real world tools.

Github Setup:
● Students will need an email and a username to create a Github account.

Heroku Setup:
● Students will need to use their first and last name, and an email to create a heroku
account.
● Students will create a new project and connect it to their Github account.

Day 1:
Introduction:
Introduce my name. Have each student introduce their name, any programming experience and
their favorite video game. What is HTML and CSS? Students will take a look at the source code
for the coding5k website.

Simple Website:
Students create a simple webpage using the basic HTML tags: <html>, <body>, <p>, <h1>,
<br>. This will become the basis for their class webpage. The first iteration will include the
following elements:
● A title <h1>
● A webpage title <head> and <title>
● A description about their website <p>
● Will also use the following tags: <html>, <body>

1. Students will open their folder after renaming it. They will then fill the website with the
following code. Have students then open the file in their web browser. Explain the idea of
work:
<html>
<body>
<h1></h1>
<p></p>
</body>
<html>
Question: What patterns do you notice about the tags? How many
body tags are there? Which one comes first the one with the slash
or without.
2. Add a description of the website using the <p> key:
<html>
<body>
<h1>This is the name of my website</h1>
<p>This website will store my cool and amazing
projects</p>
<body>
<html>
3. Modify the description text by using the <b>, <i>, <u> tags:
<html>
<body>
<h1>This is the name of my website</h1>
<p><b><i><u>This website will store my cool and
amazing projects</u></i></b></p>
<body>
<html>
4. Show how to edit specific words instead of the entire description. This will demonstrate
how tags work. (What happens if the either beginning or end tag is dropped? What
happens if an extra beginning tag is added?):
<html>
<body>
<h1>This is the name of my website</h1>
<p>This <b>website</b> will store my
<i><u>cool</i></u> and <u><i>amazing</u></i> projects</p>
<body>
<html>
5. Introduce the students to CSS:
<head>
<link rel="stylesheet" href="style.css">
</head>
6. Tell students to add a file named style.css and save it.
7. Basic format of a CSS file:
Body{
Background-color: green;
Color: yellow;
}
8. Show students how to get custom colors and use a hexdecimal. Htmlcolorcodes.com:
9. Show students how you can reference different tags in the html.
Personalized Postcard:
Students will create a Postcard that has an opening animation. This will utilize some of the code
provided in the CodeClub module 1 project 1: Birthday Card. Students will utilize previously
learned tags and learn how to utilize the tags: <img>. They will practice the concepts that they
learned earlier.

1. Students will first open up their predownloaded files on their computers.


2. First demonstrate how to edit the text of the outside card.
3. The show how to change the name of the image to any of the preloaded destinations.
(Maybe show how to do custom images. Ask students if they have been to any vacations
recently)
4. Change the background color of the outside (#outside: background-color)
5. Change the size of the image (#outside-pic: height)
6. Change the font type (#outside-title: font-family) ei. Arial, impact, tahoma, etc.

You might also like