Top Menu

My first web page

sample screenshot my first webpage

Sample screenshot of My first webpage

If you are a parent with no coding experienc trying to support your kids interest in coding, the idea of writing code can be intimidating at first. I’m here to tell you it can be as simple as typing your name. Don’t believe me? Give this quick exercise a try. You & your little coder will be editing your very own web page in no time.

Check out this sample to see the page you’ll be working with.

Now of course you will want to customize it right? Because you’re name’s not Karen (0r maybe it is!) and you probably have something else besides unicorns that you like. Also that text color might not fit your personality. Well, here’s how to make those changes:

 

GETTING STARTED

1. Download the zip of the files that make up our web page:

Download files

2. Extract the files – you will have 2 files

a. open-me.html: This is the HTML file that has the content like the words and image

b. style.css: this is the file that has, yes you guessed it, the style like the color

3. Open open-me.html in your favorite web browser to take a look

 

MAKING YOUR EDITS

1. To edit the text:

a. Open the open-me.html file in a plain text editor like Notepad (NOTE word processor like Word)

b. Find the text “My name is..” or “I like..” and edit that text. Stay away from special characters for now, as the browser may think you are trying to write some special code.

c. SAVE THE FILE & REFRESH YOUR BROWSER to see that change

2. To change the image:

a. Find an image online that you like using your favorite search engine

b. Open just that image in the web browser (right click the image and select open image in new tab)

c. Copy the web address (URL of the image)

d. Paste it over the web address of the current image. Make sure you put it in between the ” ” like this: src=”http://bingebehavior.com/wp-content/uploads/2013/07/Unicorn.jpg”

e. SAVE THE FILE & REFRESH YOUR BROWSER to see that change

3. To change the text color:

a. Open the style.css file

b. Find the line of code that starts with color:

c. Write in the new color (here’s a guide for color names that work http://www.w3schools.com/cssref/css_colornames.asp)

d. SAVE THE FILE & REFRESH YOUR BROWSER to see that change

We hope you enjoyed this quick coding exercise.

We would love to see your coding creations. Please send us your updated files and we will post them in our gallery.

Send zip files to info@codingfortreasure.com

Feel free to contact us with questions and comments.

 

No comments yet.

Leave a Reply