Hello, and welcome to the Jumping Bean Tutorial!
Following this document, you will learn how to make a website that enables the user to make a bean figure jump!
To participate in this activity, you need to have a computer with you that has a screen, keyboard, and mouse.
On your computer, minimize all of your windows so that you can see the desktop background.
Move your mouse to an empty space of the desktop and right-click the mouse.
Move your mouse to the option that lets you create a new folder on your desktop.
Give your folder a name for the project, like jumping_bean_project!
Double-click with your mouse to open the jumping_bean_project folder from your desktop.
In the file explorer window that opens for the jumping_bean_project folder, right click in the empty space and use your mouse to create a new document.
Name this document index.html and then save it.
To make changes to our index.html file, let's open the file with a text editor application.
In a file explorer with the jumping_bean_project folder open, right-click on the index.html file and hover the mouse over the Open with... option.
Choose a Text Editor application to open this file because we need to edit the contents of this file in plain alphanumerical text.
The following are some text editors that come by default based on your operating system:
With the index.html file now open, we are ready to add some content to our website.
First, we need to add some housekeeping content to our index.html file.
For web browser applications to properly display our index.html file, the browser needs to know what type of html the file is written in.
For general purposes, the standard html document type is specified.
To do this, type the following content into the first line of the index.html file:
<!DOCTYPE html>
<!DOCTYPE html>For more information on the significance of the <!DOCTYPE ...> tag, visit the following website:
https://www.w3.org/wiki/Doctypes_and_markup_styles
The next necessary element to our website is the root html element.
This element is responsible for holding (or encapsulating) all of the customized webpage content.
My fundamental understanding of html elements is that there is an opening tag, and a closing tag.
So, a complete html tag would look like <html></html>.
Now, with your cursor at the end of the first line press the enter key on your keyboard one or two times.
Separating written content onto multiple lines helps to improve the readability of the editable content.
Type the following content into the second or third line of the index.html file:
<html></html>
<html></html>The complete index.html file should look like the following:
<!DOCTYPE html> <html></html>
<!DOCTYPE html>
<html></html>The next element we need to include is a tag that holds the content within the browser window.
This is referred to as the body element, which looks like <body></body>.
With your cursor in between the opening and closing tags of the <html></html> element, press the enter key twice so there is a gap in between the opening and closing tags.
Your index.html file should now look like this:
<!DOCTYPE html> <html> </html>
<!DOCTYPE html>
<html>
</html>Now, use your mouse to put your cursor on line 4 of the index.html file and press the tab key on your keyboard to indent your cursor.
Where the cursor currently is, add an opening and closing body tag looking like <body></body>.
Now, your index.html so far should look like this:
<!DOCTYPE html>
<html>
<body></body>
</html><!DOCTYPE html>
<html>
<body></body>
</html>Now, use the mouse to place your cursor on line 4 of the index.html file right in between the opening and closing tags of the body element.
Press the enter key twice to make a blank line appear between the opening and closing body tags.
Press the tab key once to align the closing body tag with the opening body tag.
Your index.html file should now look like the following:
<!DOCTYPE html>
<html>
<body>
</body>
</html><!DOCTYPE html>
<html>
<body>
</body>
</html>Now, we are ready to add a header title to our web page.
To do this, we will use the header one element in html, which looks like <h1></h1>.
Use your mouse to place your cursor on line 5 of your index.html file.
Press the tab key twice on your keyboard to indent the cursor twice.
Where the cursor currently is, type an opening and closing header one tag like <h1></h1>.
Your index.html file should now look like the following:
<!DOCTYPE html>
<html>
<body>
<h1></h1>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1></h1>
</body>
</html>Now, move your text editor cursor to line 5 of your index.html file.
Next, move your cursor in between the opening and closing tags of the header one element <h1></h1> on that same line.
Now, type in some text to include in your header element like <h1>The Jumping Bean!</h1>
Your index.html file should now look like the following:
<!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
</body>
</html>Next, move your text editor cursor to line 5 at the very end of the line.
Press the enter key on the keyboard twice to add two blank lines.
Press the tab key twice to put the cursor in line with the header one tag.
Next, add an svg element where the cursor is.
An SVG Element looks like this <svg></svg>.
Now, your index.html file should look like the following:
<!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg></svg>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg></svg>
</body>
</html>It is my understanding that whatever elements that are within the SVG element are interpreted as SVG, not as HTML.
Also, for those wondering, SVG stands for Scalable Vector Graphics.
This technology is truly remarkable, because it is very space efficient in terms of image storage.
Especially, compared to its bitmapped image counterparts.
The browser takes the SVG text and draws an image based on it and the parameters that are passed to it.
Move the cursor to line 7 just before the closing carat of the opening tag.
Press the space key and add this property to the svg tag viewBox="0 0 100 100".
Now, your index.html file should look like the following:
<!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100"></svg>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100"></svg>
</body>
</html>The viewbox attribute sets four key coordinate points of the SVG number space.
The first number represents the minimum x coordinate in the space.
The second number represents the minimum y coordinate in the space.
The third number represents the maximum x coordinate in the space.
The fourth number represents the maximum y coordinate in the space.
Move the cursor to line 7 just after the closing double-quotation of the view box attribute of the svg element.
Press the space key and add an XML Namespace attribute to the svg element like this xmlns="http://www.w3.org/2000/svg".
Your index.html file should now look like the following:
<!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"></svg>
</body>
</html>This namespace attribute tells the web browser that a particular version of the SVG language is being used.
It is important to specify this if any breaking changes are introduced in newer versions of the SVG language.
Now, move your cursor to line 7 of the index.html file and place it between the opening and closing tags of the svg element.
Press the enter key twice to put the closing tag of the svg element two lines below the opening tag.
Press the tab key twice to put the closing tag of the svg element inline with the opening tag.
Move the cursor back to line 6 of the index.html file.
Press the tab key three times.
Where the cursor is, add a single tag for a circle svg element like <circle />.
Now, your index.html file should look like the following:
<!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle />
</svg>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle />
</svg>
</body>
</html>Move your cursor to line 8 of your index.html file just before the forward-slash character.
Add the x coordinate origin attribute to the circle element like this cx="75".
Add the y coordinate origin attributre to the circle element like this cy="75".
Essentially, we are making the "Jumping Bean" a circle haha.
We want the bean to start on the ground.
Our maximum height is 100 going from the top to the bottom of the screen.
So, if we set our origin y coordinate to 75, the circle will be closer to the bottom of the screen than the top to start.
Now, your index.html file should look like the following:
<!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" />
</svg>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" />
</svg>
</body>
</html>Move your cursor to line 8 of your index.html file just before the forward-slash character.
Add the radius attribute to the circle element like this r="25".
With the center origin y coordinate at position 75 and the radius being 25, the bottom of the bean will be touching the bottom of the SVG boundary.
Perfect! So the bean will always start at the "ground level".
Now, your index.html file should look like the following:
<!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" r="25" />
</svg>
</body>
</html><!DOCTYPE html>
<html>
<body>
<h1>The Jumping Bean!</h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="75" cy="75" r="25" />
</svg>
</body>
</html>IN PROGRESS