Select Lesson
Photo Booth App - Lesson 1. Photobooth App
15 mins
HTML, CSS and JavaScript: The Bones of a Webpage
5 mins
Name your app—task 1
5 mins
Background colors—task 2
5 mins
Camera Button—task 3
5 mins
Adding a URL—task 4
5 mins
Filters—tasks 5 and 6
5 mins
Bugs—tasks 7 and 8
5 mins
Stickers—task 9
5 mins
Screenshots—task 10
5 mins
Customizable fun—Filters, Buttons, Stickers
5 mins
jQuery
5 mins
Indenting HTML
5 mins
PhotoBooth App
Photo Booth App - Lesson 1. Photobooth App
15 mins
HTML, CSS and JavaScript: The Bones of a Webpage
5 mins
Name your app—task 1
5 mins
Background colors—task 2
5 mins
Camera Button—task 3
5 mins
Adding a URL—task 4
5 mins
Filters—tasks 5 and 6
5 mins
Bugs—tasks 7 and 8
5 mins
Stickers—task 9
5 mins
Screenshots—task 10
5 mins
Customizable fun—Filters, Buttons, Stickers
5 mins
jQuery
5 mins
Indenting HTML
5 mins
60 mins
Create a Photobooth app
These lesson plans are supplementary to creating the Photo Editor app.
The HTML, CSS and JavaScript maybe confusing at first but they explain section by section what is happening with the code.
Web Development 1 Project
Photo Booth App - Lesson 1. Photobooth App
Lesson Outline
task 0: Photobooth App
task 1: Give your app a name
task 2: Choose some colors
task 3: Add a button to take photos
task 4: Test the buttons for adding photos
task 5: Add filter buttons
task 6: Add various filters
task 7: Practice fixing spelling mistakes
task 8: Practice fixing incorrect symbols
task 9: Add stickers
task 10: Make the app your own!
Here is the lesson in this app building project. As this is a quick introduction, we do a lot of the coding for you.
We have other courses to further your understanding and skill set in in HTML/CSS and JavaScript.
Concepts
HTML, CSS and JavaScript: The Bones of a Webpage
Apps and webpages are transformed from an endless paragraph of text to an interactive, well designed and structured webpages through using the three languages : '''HTML, CSS and JavaScript'''.
HTML - the markup language (Format the content)
Hypertext-markup language, or HTML, is a language used to add formatting to text.
See the example below of a poem written with and without html on this webpage.
CSS - the style sheet language (Make it pretty)
Cascade Style Sheets, or CSS, is a styling language that can be used control the layout and look of a webpage.
It can be taken from a linked page or added to the HTML page you are on at the top of the page inside <style></style>
tags.
See the small snippet below for an example.
JavaScript - the programming language (Make things clickable and interactive)
The interactive tables and buttons you see on a web page (plus a lot of things you probably don't notice) are controlled with JavaScript.
You can learn more about how JavaScript is used in either our Web Development courses or our JavaScript courses.
JavaScript can be written on a separate page or added to the bottom of your HTML webpage with <script></script>
.
Here is an example of JavaScript below, click the button to trigger the Javascript.
Concepts
Name your app—task 1
The first task in the our project is naming your app.
You should be able to think of a fun name yourself, but below we have gone into a little more depth about the code you see on the page.
There are some tags that we add to the '''HEAD or top part of our webpage. These are usually for linking to special files (not normal webpages!), or giving the computer information about your webpage. These bits of code do not appear on the app.
Example: Look at the output of this code- what actually shows up for viewers?
Only the h1
text is in the body section, the rest are in the HEAD of the webpage and are not seen by the webpage user.
html, head
and body
are always in an html web page. But because they are always there and the browsers know which elements are head elements and which are body elements you don't have to write those tags in your code.Doctype <!doctype>
<!doctype html>
, or <!DOCTYPE HTML>
, is an element that tells the browser what type of document this is exactly.
Line 1 should always have
<!doctype html>
to tell the browser that this document is written in html 5.
Title <title> </title>
Title
is a head section element, with a start and end tag.
The title
element is important, it defines the title of a document. Title elements are often used on search engine results pages (SERPs) to show a section of your webpage. Title elements are useful for SEO (Helping people to find your website) and social sharing (The info that can show up when you share a link with people). They also show up in your browser tab.
The title element of a web page should give a lot of information of a page's content clearly and in a couple of words. It is often the name of the webpage.
<head>
<title>Introduction to Coding Lesson Notes: Code Avengers</title>
</head>
The heading tags belong in the body section
of the code, underneath all of the things that are invisible on the webpage.
Heading tags <h1></h1>
Headings
are body section elements, with a start and end tag.
Required attributes: None
Heading tags make text bigger and add space above and below it.
There are 6 heading tags, h1,h2,h3,h4,h5,h6
, and they should be used in order, not on how they make your text look (You can change how they look with CSS)
By order we mean order of importance or detail, their hierarchy.
Concepts
Background colors—task 2
Most of the layout of the page is controlled by the jQuery and Code Avenger CSS that are in the link elements
<link href="/css/avengerbooth.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
Click to read the jQuery CSS and the CA CSS
More on jQuery below.
Link <link>
A head section element, with a self-closing tag. (No end tag)
Required attributes: rel="What is the relationship between these files?"
and href="What is the file path to the file?"
.
The link
tag links a CSS style sheet to our web page, it is used for other files as well but CSS is the most common file you link to. We will learn more about how to add CSS in our later lessons.
<head>
<link rel="stylesheet" type="text/css" href="profile1.css">
</head>
Style <style></style>
This head section element that contains CSS style rules on an HTML page.
CSS is a different kind of markup language from HTML but we can still add it to the HTML page as long as we write the CSS inside the <style></style>
tags.
You target the HTML by adding selectors (in red) to target parts of your webpage. The h1
selector will target all the <h1></h1>
elements on the page, and anything that is inside them.
In the second task you are simply changing the color of your title bar, background-color: white;
, and the text, color: black;
.
If you want to learn more about CSS you should complete our HTML and CSS level 1 course
Class
—<h1 class="name"></h1>
, and id
—<h1 id="name"></h1>
Because element selectors style all of that element on the page, h1{}
will style ALL <h1>
elements, we sometimes want to be more specific and style only some elements...
You could want to style the first and last heading on a page differently from the other headings. You can do this with
ids
and classes.
Our code will contain a lot of classes
and ids
, don't worry you won't have to write the CSS for them, they are already written in our CA CSS file .
Both of these attributes will target specific elements. Ids are used only once and classes can be used multiple times. You select ids in CSS with #name
and classes with .name
.
Concepts
Camera Button—task 3
The task asks you to add <span onclick="cameraButton()" class="button-center">
on to line 33.
<span onclick="cameraButton()" class="button-center">
It connects the center button (made by the
<i class="icon-ca-camera"></i>
</span>span
tag), to the JavaScript function that accesses your webcam and displays an image, "cameraButton()"
. It is triggered by clicking with the mouse, onclick=""
.
The rest of the code:
Div
and span
tags <div></div>
, <span></span>
div
and span
are body section elements, with a start and end tag.
Required attributes: None, but
classes
or ids
are often added.
Most things in HTML5 apply meaning, for example a <p></p>
should be used to break up ideas. A div
is like an empty box. It is most commonly used as a blank block for coders to apply CSS (and JavaScript) to bits of HTML. span
is the same but it could be thought of as a blank line instead of a blank box.
Notice that the divs
below do not have br
to put them in a new line but they start a new line anyway- like p
makes a newline. span
doesn't make a new-line appear.
Build the visual app
All the code inside the div classed as "image" is the code for the photo window and camera buttons.
<div class="image">
<div class="image_camera">
<div id="camera"></div>
<div class="overlay-left"></div>
<div class="overlay-right"></div>
</div>...
The first part builds up all the layers of the visual frame of the app (the colored rectangles and buttons you see), the classes link to JavaScript to draw the shape and to our linked CSS for style. (Look for the class names in the link.)
<div class="canvas-wrapper">
<canvas id="canvas" class="image_canvas"></canvas>
</div>
The actual shapes are drawn with JavaScript need a place to be generated and we do this with the canvas
tag and JavaScript. (See an explanation on "Drawing Objects" below)
Fun with symbols
This code here adds the buttons and connects the camera function to the screen.
<div class="image_buttons">
<span class="button-left">+</span>
<span onclick="cameraButton()" class="button-center">
<i class="icon-ca-camera"></i>
</span>
<span class="button-right">-</span>
</div>
</div>
You can actually also customise what goes into the circles in your code.
Do you see where the + and - are?
You can replace them with other characters by writing in their entity code, these are symbols that may not be on your keyboard but HTML recognises them.
In our lessons plans we often use
, .
Click here to view a great chart of entity codes from W3C
For example
<span class="button-left">@</span>
...
<span class="button-right">♦</span>
Concepts
Adding a URL—task 4
The code in the PhotoBooth app is looking quite complicated now.
This is the part that makes the left button add an image.
<div class="popup">
<h3 class="popup_header">Insert an image URL to upload it to the app.</h3>
<input class="popup_input" name="image" placeholder="Image URL">
<button class="popup_button">Add Image</button>
</div>
A URL is the full address of a file on the Internet.
Whats in a URL?
A URL (universal resource locator) is an address that identifies the location of a web page, image or other file on the Internet.
E.g. http://www.google.com is the URL for the Google search engine.
We can break a URL into 3 parts:
protocol://server/path
https://www.codeavengers.com/html-css/1#4.4
- How - http, Tell our ISP how we want our information brought to us.
- Where - codeavengers.com, where is the server?..ask a DNS to match up the computer address, IP with the human readable address domain name
- What - /codecamp what file are you getting and what folders are they inside?
Concepts
Filters—tasks 5 and 6
filters canvas
<div class="bar">
<span onclick="addFilter(1)" class="filter">
<canvas id="first-filter" class="canvas" data-filter="1"></canvas>
</span>
<span onclick="addFilter(2)" class="filter">
<canvas id="second-filter" class="canvas" data-filter="2"></canvas>
</span>
<span onclick="addFilter(3)" class="filter">
<canvas id="third-filter" class="canvas" data-filter="3"></canvas>
</span>
<span onclick="addFilter(4)" class="filter">
<canvas id="fourth-filter" class="canvas" data-filter="4"></canvas>
</span>
</div>
The CSS for this is on the bottom of our external CSS page
The bar div puts all the
filters
on a bar beneath the photo frame.
The filter class simply sets the height and width and display of each filter so they line up in the app.
The canvas class and tag add spaces for the filter and image.
Again the webpage is linked to the JavaScript with the onclick attribute and the addFilter() function.
In CSS square brackets lets you select an attribute to add CSS too.
The data-filter attribute links to the CSS that adds the visual changes to the image in the preview.
The filter property is a fairly new one and won't work on most browsers yet.
That is why we have -webkit-filter
with the same values, it will work on Chrome, Firefox, Opera and Safari...It will NOT work on Internet Explorer.
Customizable fun
You can add a few different values to filter. We have added 8 options that you could change to by changing the number,data-filter="1"
.
- grayscale
- sepia
- saturate
- invert
- hue-rotate
- brightness
- contrast
- blur
Concepts
Bugs—tasks 7 and 8
Bugs, mistakes in your code, are very common and need to be fixed to allow the program to run as intended.
It is important to check your code and look for mistakes.
Common mistakes are
- Using the wrong quote marks.
You have to open and close a string with the same type of marks"text" or 'text'
- Check that every open bracket has a closing bracket,
()
,{}
,<>
.
You also need to make sure you are using the right kind of bracket in the right place.
- Using the right tag. Dont confuse attributes like
src
orhref
.
You must use end tags for most elements- learn which are self closing and which have a start and an end tag.<img></img>
would be wrong.
- Spell keywords and names correctly.
heading1
origm
will not work. Remember to use American English spelling in the CSS,color:gray;
.
- Spell keywords and names correctly.
- Using the right tag. Dont confuse attributes like
- Check that every open bracket has a closing bracket,
Concepts
Stickers—task 9
In this task you have to add the images to add stickers to a panel on the right of the screen. This panel is visible when you click on the button on the right.
This is what the final section of code should look like.
<div class="stickers">
<div class="sticker">
<img src="/image/activities/stickers/hat.png">
</div>
<div class="sticker">
<img src="/image/activities/stickers/eye.png">
</div>
<div class="sticker">
<img src="/image/activities/stickers/mustache.png">
</div>
<div class="sticker">
<img src="/image/activities/stickers/bow.png">
</div>
</div>
The stickers
class places the images in a container and sets if you can see the panel or not.
The sticker
class makes the sticker image draggable around the main image. It connects to the "ui-draggable ui-draggable-handle" code in the jQuery JavaScript (More on jQuery below).
The image tag adds the graphic of the stickers.
Image tag—<img src="">
A body section element, with a self-closing tag.
Required attributes: src
and alt
The image tag adds an image to your webpage. It needs to have a source attribute which links to where the image file is stored (Either on your server or on another server).
When your image is broken or you are using a screen reader, then the text in the alt
attribute is used. Though it is not a required tag, you should use it for your users who have visual disabilities. When you use it, describe what the image is for rather than what it looks like, for example; "CA logo" is more useful than red letters."
Customizable fun with stickers
You can add your own images as stickers.
Smaller images without a lot of detail are best.
You can find a URL online or you can make your own and upload it to a website.
make8bitart.com is a great site created by jennmoneydollars. It is a place where you can make quick online art and save it online immediately on Imgur.
Getting a URL
- Go online and search for a photo or image.
- Right-click on that photo or image.
- Click Copy Image Address.
- Inside the
src=""
attribute delete the red file path. - Right-click inside the quote marks.
- Click Paste
Video for adding an image from make8bitart
Concepts
Screenshots—task 10
The best way to save you photo is to screenshot it.
You can hit PRINT SCREEN on your keyboard but that will copy your whole screen. There is better software to get screenshots on your computer.
It will depend on your operating system (OS).
If you have a WINDOWS OS
To take a screenshot of the image, first open the Snipping Tool program by clicking on start and typing in Snipping Tool.
Make sure you can see the window with your image in it, and then click New
in the Snipping Tool program.
Click and drag to draw a box around the area that you want to save.
When the image opens in a new window you can click the relevant button to save
, copy
or email
the image."
Screenshot with a MAC
"Make sure the window with your image is visible. Press Command + Shift + 4 together, and you will see the cursor turn into a crosshair.
Click and drag to select the area you want to keep and then when you let go the file will be saved to your desktop."
Ubuntu users
In Ubuntu you can open a program called 'Shutter'. This will let you take a screenshot of a selected part of the screen. If you don't have shutter installed you can find it in the Software Center.
Open shutter, and make sure the window with your image in it is visible. Then, click on 'Selection' and draw a box around the area of the screen you want to keep. It will then open in the Shutter window and you can save it to your computer."
Concepts
Customizable fun—Filters, Buttons, Stickers
Here are some things you can customise in your app- Filters, Buttons, Stickers. (Note: Copied from above so you can see it all in one place)
Buttons
This code here adds the buttons and connects the camera function to the screen.
<div class="image_buttons">
<span class="button-left">+</span>
<span onclick="cameraButton()" class="button-center">
<i class="icon-ca-camera"></i>
</span>
<span class="button-right">-</span>
</div>
</div>
You can actually also customise what goes into the circles in your code.
Do you see where the + and - are?
You can replace them with other characters by writing in their entity code, these are symbols that may not be on your keyboard but HTML recognises them.
In our lessons plans we often use
, .
Click here to view a great chart of entity codes from W3C
For example
<span class="button-left">@</span>
...
<span class="button-right">♦</span>
Filters
You can add a few different values to filter. We have added 8 options that you could change to by changing the number,data-filter="1"
.
- grayscale
- sepia
- saturate
- invert
- hue-rotate
- brightness
- contrast
- blur
Stickers
You can add your own images as stickers.
Smaller images without a lot of detail are best.
You can find a URL online or you can make your own and upload it to a website.
make8bitart.com is a great site created by jennmoneydollars. It is a place where you can make quick online art and save it online immediately on Imgur.
Getting a URL
- Go online and search for a photo or image.
- Right-click on that photo or image.
- Click Copy Image Address.
- Inside the
src=""
attribute delete the red file path. - Right-click inside the quote marks.
- Click Paste
Video for adding an image from make8bitart
Extension: Concepts
jQuery
jQuery is a library of JavaScript code.
Our developers can do a lot of cool things but it would be a waste of time for them to make code to access your webcam when someone has already written that code.
You will find a lot of your time is saved by using libraries and
modules
to help improve your own programs.
Now, you still need to know how to program to integrate and run the code but knowing how to find and use resources is a very important part of being a developer or programmer.
Here is the webcam file that helps make the PhotoBooth work js/webcam/jquery.webcam.js
Concepts
Indenting HTML
Formatting your HTML code makes it much easier to read.
If an element is inside another element it should be moved to the right a bit on a new line (this is called indenting).
This leaves white space on the left hand margin so that it is really easy to see what elements are inside others and it makes your code tidy.
How much do we indent by?
The internet rages with conversations about whether to use 2 spaces, 4 spaces, or 8 spaces when indenting. We are a 2 space company because we follow the Google Style Guide →.
So what should you use? Well, we recommend 2 spaces. However, it is ok to follow personal preference- if you wish to have 4 or 8 spaces then add those. Just make sure you use indentation to add space to the left margin.
You can use empty lines (hitting ENTER) for formatting as well, this has no effect on your webpage but it makes the HTML code easier to read.
2 space indentation:
<!DOCTYPE html>
<html>
--<head>
----<title>HTML TAGS</title>
--</head>
--<body>
----<h1>Hello Everyone</h1>
--</body>
</html>
4 space indentation:
<!DOCTYPE html>
<html>
----<head>
--------<title>HTML TAGS</title>
----</head>
----<body>
--------<h1>Hello Everyone</h1>
----</body>
</html>
You might also notice how the automatic color coding in your code editor helps a lot too. This is called "syntax highlighting".
Adding 2D graphics to a webpage
If you want to add your images to a normal web page outside of Code Avengers, it will require a little set up.
Code to add images
We have made a Path module'' that is based off the2D JavaScript graphics module'''.
The Code Avengers' code is easier to use because we do all of the set up for you but it only works on code saved on our website.
If you are ready to make graphics in your own website then read the content below.
You first need to learn about HTML <canvas>
and linking JS, HTML and the 2D context library.
Then you need to learn how the functions work for 2D, we have some notes and links below that can help you.
You can add this to your html page
The tags and JS covered here are <canvas></canvas>
and .getContext('2d')
You can draw images and shapes onto a webpage using code instead of uploading an image.
Canvas tag —<canvas></canvas>
HTML5 element <canvas>
gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, shapes, text or even do simple (and not so simple) animations.
To get canvas
to work is a little tricker than the other tags. The <canvas>
element places the drawing window on the page. We added a border in CS so you can see it. But the drawing is written in JavaScript.
Adding JavaScript
The 2d
interface is used for drawing circles, rectangles, text and more inside a canvas element. The library called '2d' has all the code context to draw the shapes (written in JavaScript) on the canvas.
So in the code above we have a canvas
in HTML but the important stuff is happening in the script
element.
Firstly we make a variable that links our canvas to the JavaScript, var drawing = document.getElementById('drawing');
.
Then we create a variable to link our JavaScript to the already existing code inside the file called 2d
, var codeForDrawing = drawing.getContext('2d');
.
Now with those 3 things linked you can draw a lot of different shapes.
2d
so you only have to ask for the browser to find it and pull the context out of it. Read a good explanation of context on StackOverFlow by Brian Kelly from 2011.Drawing shapes
You can draw many things, the basics are lines, rectangles, circles, triangles, half circles and stars. The drawing code is slightly different to what you have learned here at Code Avengers.
See a range of options at W3schools
Rectangle
Lines
Begin a path, move to position 0,0. Create a line to position 300,150:
Triangle
Circle
Use arc to make a full circle
(name.arc(x,y coordinates of center, radius, start angle(0 is on right side of screen), end angle, clockwise?)
The angles are not degrees but radians. 2PI is a whole circle so 1*Math.PI
will draw half a circle etc.
Semi circle
arcTo
here is more of a rounded corner function
Use
arc
instead and brush up on your
radians
and PI. You can use PI in your equation- you just have to call it from the Math library, Math.PI
.
name.arc(x-of center,y-of center,radius,sAngle,eAngle,counterclockwise (optional));
name.arc(40,40,20, 1*Math.PI,2*Math.PI,true);
The beginPath() method begins a path, or resets the current path.
Color
You can draw a wide range of shapes and change their colors. There are two parts of a shape that you can control the color of the fill and the stroke:
fill
'Color in', the color that fills up the inside area of a letter or shape
stroke
The lines that make up the outline of a letter or shape
There are a couple of ways you can change the color of your graphic.
You can use 'symbolic names' like 'red', 'chartreuse' 'OrangeRed', or, if you know about RGB or Hex colors, these work too.
rect.fillColor = '#5889D2'; //hex
rect.fillColor = 'rgb(88,137,210)';//RGB
rect.fillColor = 'stelBlue';//nameshape1.fillStyle = 'red';
shape1.strokeStyle= 'blue';
Resources
Guide
- download
- new file
- upload media
- rename
- delete
Run Ctrl+Enter
Check Ctrl+Shift+Enter
Reset Ctrl+Backspace
Redo Ctrl+Y
Cut Ctrl+X
Copy Ctrl+C
Paste Ctrl+V
Find Ctrl+F
Find & replace Ctrl+F+F