Below is each lesson by day. You will have to keep track of which day and lesson are on for yourself. Each lesson can be completed in a single after school tutoring session.
Just scroll down to the day that is the same as the one where you are attending right now and do the lesson listed after it.
Step 1 in the Coding Club is that you will need to create and account using your school email with CodePen.io
Step 2 is to send me your username and password at: ggrass@hjshs.org
Step 3 is to copy the code below and paste it into a new “Pen“ on the CodePen site. To create a new Pen, click on Pen on the top left side. Reduce the two code fields labeled CSS and JS and paste all of the below code into the field labeled HTML. Once you have done this, you will start tweaking your code to customize your own page. For your first webpage there will be 7 things that you will need to change in the code you just copy and pasted. By the way type “ctrl+C“ to copy and “ctrl+V“ to paste. Hold down the ctrl button and the c or v button at the same time to execute these commands.
The changes:
In the “style“ section:
1) change the h1 color. This will change color of the name or title of your webpage. (for the names of possible colors bookmark this page: HTML Color Names
After you pick a color, replace Turquoise with the name of your color. Make sure and leave the colon and semi-color in places on either side of your new color choice.
2) Next change (optional) style of the text, which is called the “font“ or “font-family“. Have a look at what some of your options look like here: Font Styles
After you pick one, replace “arial“ with your new font. Make sure and leave the colon and semi-color in places on either side of your new font choice.
3) Next change the color of the background that will appear behind the title of your webpage. Follow the same steps here as in item #1 above.
4) Next change the “body background color“. This will be the main color of your webpage. Follow the same steps here as in item #1 above using the color names from the color names page.
The last 3 things you will change will be in the “body“ part of your code.
5) Where is says “Mr. Grass's Webpage“, between the “h1“ tags, change it to the name or title that you want to appear on the top of your webpage.
6) Where is says “My page is about Paris.“, between the “p“ tags, change it to what you want to say about the content you will be adding to your webpage. This is where you tell the viewer what your webpage is about. It can be just one sentence or as many paragraphs as you want.
7) Lastly, you will add a picture to your webpage. For this you will find a picture online and copy its web address. The web address will be in the address bar when your picture is on screen. Copy it and paste it next to the “img src“ tag. But make sure and paste it between the two double quotation marks “ “.
The final two steps are to SAVE your pen on the CodePen site then copy all the code and email it to me at my school address listed above.
Done.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: Turquoise;
font-family:arial;
background-color: red;}
body { background-color: Khaki;}
</style>
</head>
<body>
<center>
<h1> Mr. Grass's Webpage </h1>
<p> My page is about Paris. </p>
<img src=" " width="350px">
</center>
</body>
</html>
Day 2 in the Coding Club is that you will need to add at least two hyperlinks to your website.
A hyperlink sends you to a different website when you click on it.
The subjects of the two links you add should be the same as the topic of your website.
Step 1 is to search the web for two different websites about your topic.
Step 2 When you find it, copy the address bar address (ctrl+c) and paste it (ctrl+v) between the double quotes " " right after where is says "a href".
Step 3 Put each of the links under the main picture on your website, but above the tag that says <center>.
"target="_blank" means that link will open up it's own webpage in a new tab. And "target="_self" means the webpage will open up in the same tab that our current website is in. The <br> is like typing "return" or "enter" on your keyboard. It tells the computer to put the second link under the first link.
<a href="" target="_blank"> </a> <br>
<a href="" target="_self"> </a>
Day 3 in the Coding Club is that you will code different sized text or as we say in the world of coding, fonts.
I want you to type 4 separate sentences about the topic of your webpage.
Each sentence will have a different tag before and after it that will make it a particular size.
<h1>Type the first sentence here for h1 size.</h1><br>
<h2>Type the second sentence here for h2 size.</h2><br>
<h3>Type the third sentence here for h3 size.</h3><br>
<p>Type the fourth sentence here for "p" size, or paragraph size.</p><br>
Next, code an apostrope and put it wherever you need one.
<'>Lastly, code for bold text and italic or slanted text.
Day 4 in the Coding Club you will code two different ways to do links for different pages, how to change the color of a word or just a single letter from any sentence and how to leave notes or comments for yourself within your code you don't forget what all that code you typed means.
The first link you will make will be to your second webpage. Put this link under the two links for the other webpages you are linking to that are about your topic.
Copy the code below. Where it says "myName" type your first name with but make the first letter a capital. Then where it says "Link for my Page 2" just type whatever you want to appear on your webpage as the text you will click on that sends the browser to your second webpage.
<a href="CC_myNamePage2.html" target="_self">Link for my Page 2<a/>The next link will be a picture. You will combine a image with the link, so when you click on the image, it will open up the link to another webpage. Below, you will replace "OtherPage.html" with the web address of the page that you want to link to. Then you will replace "image.jpg" with and image that you send me or with the web address of the picture you want to appear on you page. This is the image that you will click on that will act as the link to the other page.
After you see you image on the page, you can adjust the size of it by changing the width and height numbers to make it the shape and size you want it.
<p>The image below is a link. Try to click on it.</p>
<a href="OtherPage.html"><img src="image.jpg" alt="my image"
style="width:150px; height:150px;"></a>
Next, you will write code using the "span" tag. The span tag is used to change the color of a letter, word or short line of text to a different color than the rest of the text that it is next to.
Below, where is says "color:blue", you can change blue to and color you want. You can also retype the sentence to talk about something else other than your teacher's eyes.
<p>My teacher has <span style="color:blue;">blue</span> eyes.</p>
The last thing for today, if you have time, is to add notes or comments to your code in the style section and in the body section.
These comments that you type will not appear on your webpage, they are your own private notes to yourself. You are telling yourself what the code that you typed does in case you forget later.
This is helpful as you look at a bunch of code later and you want to make some changes. These notes will help you quickly find the code you need to change, so you aren't sifting through a bunch of lines of code wondering code does what.
When typing comments within the "style" section you have to put your comments between a forward slash and a asterisk like this: /* type comment here */
When you are making comments down in the body part of your webpage, you need to type it differently. Put these comments between a bracket, an explanation point and two dashes. But close it with just the two dashes and the bracket. Like this: <!-- comment here -->