Client Side Web Development - Beta

Activity 1.1: Email The Instructor

Send your instructor an email with the following

Name

Where are you from

Web Experience

Expectations / What do you expect to learn?

Special Interests

Send email to sager.joshua@pti.edu Make sure to set the SUBJECT LINE for ALL SUBMISSIONS to start with CLIENT SIDE: For example CLIENT SIDE: Email Activity

Activity 1.2 - Basic Layout

Student Examples

1. Download project files
   • Wrapper Example - Download Image File (png)
   • Body Copy - Download txt file (.rtf)
2. Must use code editor - Code by hand
3. CSS should be in a separate .css file
4. Please use proper folder structure
   • html
   • css
   • images
   • working
5. Must use 4 Div’s for layout (wrapper, header, content, footer )
   • see image below
6. Entire width of the content should be 400px, but the design can exceed that.
7. Use the body copy identified below.
8. Create a designed banner based off of the content and design the content using CSS
9. Upload all files in the proper folder structure to your student web space in a folder named activity01
10. Must have a title tag
11. All of your code (HTML and CSS) must validate
12. Send a link to index file to sager.joshua@pti.edu

Activity 2.1 - JavaScript Worksheet

Answer the following questions. Email the answers to your instructor

1. Name 3 Server Languages.
2. Name 3 Client Side Languages.
3. What is the code to use an external javascript file?
4. What is an IDE? Name 3 IDE’s.
5. Where does javascript typically go?

This Activity is worth 10 points.

Activity 2.2 - Hello World

Create 5 variables and output them to the screen. Use innerHTML and target a div container.

Use this image reference as a guide for the 5 variables. (img)

Control Flow (.png)

Rubric

This Activity is worth 20 points.

Activity 2.3: Browser Information

Write a javascript interaction that has the following..

4 areas that contain the following information

Browser name containes the Browser Name

Version containes s the Version

Platform containes the Platform

Application Code Name containes the Applicaiton Code Name

Make sure that all content is styled using CSS

Control Flow (.png)

Rubric

Example file (.img)

This Activity is worth 20 points.

Activity 2.4: Browser Redirect

Write a JavaScript function to redict the browser to another website using onload.

Control Flow (.png)

This Activity is worth 5 points.

Activity 3.1 - Basic Interaction

Reference this UI Wireframe to create an interface with 6 buttons.

Reference this Control Flow to create an interface with 6 buttons.

Rubric for basic interaction

Each button should affect the text area above the buttons. Use the labels of each button as a guide on how to affect the text area. For example Background Image should add a background image to the text area.

This Activity is worth 30 points. Please upload it to the student web server and email a link to the index file.

Activity 4.1 - Basic Interaction with Toggles

Build on the previous Activity where you built off of a UI Wireframe to create an interface with 6 buttons.

Reference this Control Flow to create an interface with 6 buttons.

Rubric for Basic Inteaction & Conditionals

Our previous goal to interact with each button with a one way change when the buttons were clicked. Using conditionals our goal is to now click on each button to change and then return to its previous state via multiple clicks.

This Activity is worth 30 points. Please upload it to the student web server and email a link to the index file.

Activity 5.1 - Basic Forms

This Activity is about pulling information from a form and displaying the results.

Development

• UI Wireframe (.png)
• Document should be titled
• You should have a H1
• Create 4 input fields (or click-able items)
• Create an output section
• Create an output button
• Wire application for displaying all of the content from the form fields.

Style

• Style the buttons
• Style the H1

The output should contain the following:

My name is _____________, I am from ____________. My favorite color is _____________. Someday I hope to travel to _____________.

Each of the ___________ will be replaced with the value from the form field. Upload the finished activity and email a link to your instructor.

This Activity is worth 30 points

Activity 6.1: Basic Validation Activity

Build a Twitter Clone - UI Wireframe (.png)

Create a text area

No more than 140 characters

Count down the number of characters

Notify Users for empty or too many characters

submit tweet and display on screen.

Upload activity to your web space and send a link to your instructor. This activity is worth 50 points.

7.1: Array Creation

Create and an application that outputs an array data via mouse click:

Create a basic array

Create an associative array

Create multi dimensional array

Create three buttons

Output each array via clicking the appropriate "button"

Only output ONE array at a time

Make sure to style the document

Make sure it follows web standards

Upload all files to your web server and email your instructor a link to the file. This Activity is worth 30 points

7.2: Loops

Create an array of your choice

The array must have at least 10 values

Output the contents of the array into a list

Style the output of the list as well as the content with CSS

Upload all files to your web server and email your instructor a link to the file. This Activity is worth 30 points

8.1: Array Functions

Create a script that

Create a basic array

Output the array

Create a form button labeled Add to Front

Create a form field text box

Create a function to add to the beginning of the array

Use the value from the form field

Wire function to onclick event

Create a form button labeled Add to End

Create a form field text box

Create a function to add to the end of the array

Use the value from the form field

Wire function to onclick event

Create a form button labeled Remove from Front

Create a function to remove from the beginning of the array

Wire function to onclick event

Create a form button labeled Remove from End

Create a function to remove from the end of the array

Wire function to onclick event

Create a form button labeled Remove from Anywhere

Create a form field text box

Create a function that removes a middle section defined by you

Use the value from the form field

BONUS: Create a form button labeled Add To Anywhere

Create TWO form field text boxes

Create a function that adds a list to a middle section defined by you

Use the values from both form fields

Upload all files to your web server and email your instructor a link to the file. This Activity is worth 50 points

9.1 - Document Specs

Create a spreadsheet and outline EVERY SINGLE feature of your final project.

• Create the follwing fields: Date Completed, Status, comments, responsibility, priority, comfortabilty
• Fill in each field for EVERY feature

Email the document specs to your instructor. This Activity is worth 25 points.

10.1 - Prototype

I expect to see the folowing

• Basic functionality
• Graphics & interface elements
• Updated status report of your document specs

Email the project link to your instructor. Also send your staus report of the document specs. This Activity is worth 50 points.

11.1 - Final Project

Email the project link to your instructor. Also send your staus report of the document specs. This Project is worth 100 points.