LA-HITECH WORK BOOK

Munir Samplewala and Manish Patel

Table of Contents
HTML_CSS ............................................................................................................................................. 6
L1 Introductory exercise ...................................................................................................................... 6
L2 Introduction to CSS ........................................................................................................................ 6
L3 CSS Selectors ................................................................................................................................. 6
L4 Navigation bar and RWD ................................................................................................................ 7
L5 Use Twitter Bootstrap .................................................................................................................... 7
L6 Create Personal Website ................................................................................................................ 7
JavaScript ............................................................................................................................................... 8
L1 Introductory exercise ...................................................................................................................... 8
L2 Simple html page with JavaScript................................................................................................... 8
L3 Simple calculations in JavaScript .................................................................................................... 9
L4 Use if statement in JavaScript ........................................................................................................ 9
L5 Use loops ........................................................................................................................................ 9
L6 Create a guessing game ................................................................................................................. 9
L7 More Practice on the programming structures ............................................................................... 9
L8 Create sub-programs.................................................................................................................... 10
L9 Use Arrays .................................................................................................................................... 10
L10 Create functions that use arrays ................................................................................................. 10
L11 Array of Objects .......................................................................................................................... 10
L12 Select element from HTML page to access in JavaScript ............................................................ 10
L13 Use Event Listeners .................................................................................................................... 10
L14 Create ‘Rock, Scissor, Paper’ game, case manipulation is strings etc. ......................................... 10
L15 RGB and colors ........................................................................................................................... 11
L16 Code Breaker .............................................................................................................................. 11
jQuery ................................................................................................................................................... 12
L1 Retrieve Repository names from GitHub for a user ....................................................................... 12
L2 Explore different effects such as fadeIn, fadeout etc. ................................................................... 12
L3 Handle Events such as click, keypress etc. .................................................................................... 12
L4 Create a FAQ accordion using jQuery. .......................................................................................... 12
L5 Learn about jQuery methods such as addClass, dropClass etc. ..................................................... 12
L6 Use Event firing to create/maintain a ToDo task list ..................................................................... 12
L7 Manipulate JSON data in an array................................................................................................. 13
L8 Get information in JSON format from web. .................................................................................. 13
LA-HiTech Boot Camp Training
Work Book
This is part of the LA-HiTech boot camp training workbook. The training will
focus on producing students trained in the development and maintenance of web
sites. As such, it will concentrate on those aspects as listed in (a) to (f) and (g) to
showcase their achievements. Parts (i) to (j) are for students and Instructors
interested to cover those topics. The pace can be suited to the background and
perspicacity of the students. Perhaps a first pass can be completed in first 8 weeks
to enable the students to start their internship. Then new material or more drill
down can be done to advance material can be pursued.
These technologies are frontend part of web development :

(a) HTML5 and CSS3

(b) JavaScript – ECMA 5 and ECMA5

(c) jQuey and Ajax calls

(d) JSON

(e) Integration with social media, introduction to WordPress and SEO (Search
Engine Optimization).

(f) Advanced JavaScript

(g) GitHub account, Linked in Profile, host a personal webpage

These products (MEAN) are the backend part of web development:

(h) Introduction to Mongo DB (M)

(i) Introduction to Node.js (N)

 (j) Introduction to Angular (A) and Express (E)

(k) Multiple tasks to illustrate the features of the above products can be used as
exercises.

(l) A comprehensive project that ties in as many aspects can be used for
Hackathon entry or posted on individual GitHub accounts.

A zipped folder Course_WorkBook will be provided. There will be individual

folders (HTML_CSS, JavaScript, jQuery) within it.
HTML_CSS
Students should be familiar with
 History of HTML5 & CSS3
 Key features in HTML5 – semantic elements (<header>, <footer>,
<article>, and <section>), attributes of form elements (number, date, time,
calendar, and range), graphic elements (<svg> and <canvas>), multimedia
elements (audio/video)
 Rounded corners, shadows, gradients, transitions or animations, as well
as new layouts like multi-columns, flexible box or grid layouts.

The exercises are arranged in the following manner.

L1 Introductory exercise
01-List.pdf – contains the template given in this file to be coded in html.
A 01-list-starter.html is provided as a starting point. Covers very elementary
HTML tags.

02-Form.pdf - contains the template given in this file to be coded in html.

A 01-form-starter.html is provided as a starting point. Covers elementary
concepts of form element.

L2 Introduction to CSS
Lab3.pdf – This gives practice in applying CSS. Follow the instructions in the pdf.
A apply04.html is provided as a starting point.
An image wirwrap01.jpg is also provided.

L3 CSS Selectors
This gives practice in separating CSS commands from html file. Follow the
directions given in the selectors.css file to be applied to selectorsExercise.html.
L4 Navigation bar and RWD
This gives practice in a simple navigation menu and using media queries for
mobile platform. Test the mobile feature using the browser inspect feature.
“Lab4 Natoma Web Site Lab.pdf “ describes the layout of the home page
(index.html).
Supporting files and images are also located in the same folder.
L5 Use Twitter Bootstrap
This explores the Twitter bootstrap functionality to create a responsive web site.

L6 Create Personal Website

Create your personal web site. See
https://www.freecodecamp.org/challenges/build-a-personal-portfolio-webpage for
an example.
JavaScript

 Be aware of the history of JavaScript

 Current version ES5 v/s ES6
 Loosely or dynamic language
 Six primitive Data types plus Object
 Sequential, decision making and repetition structures
 Sub programs
 Data structures – arrays, lists. Others can be found at
https://github.com/nzakas/computer-science-in-javascript/
 Incorporate in html files and interpreted by browser. Learn to use the
‘inspect’ and ‘console’ features in browsers. Use the REPL feature to test
JavaScript code (without needing it be incorporated in an html file).
 How to use the debugger
 Interact with the html in terms of detecting events and responding to them
Interview questions - https://www.toptal.com/javascript/interview-questions
Tips on performance, bad practices etc. - https://bonsaiden.github.io/JavaScript-
Garden/

The exercises are arranged in the following manner.

L1 Introductory exercise
Shows how to associate a JavaScript file with an html document.
The Sample_IO.txt should be used to create an index.html and app.js file. Then run
the html file in a browser. The prompt command facilitates doing input from use.
Need to inspect and see the output in console tab, this facilitates output. Another
way to do output is to modify the html document on the fly.

L2 Simple html page with JavaScript

There is one file apps.js Comments indicate what needs to be done.

L3 Simple calculations in JavaScript

There is one file calc.js Comments indicate what needs to be done.

L4 Use if statement in JavaScript

There is one file script.js Comments indicate what needs to be done. Have a
prompt command to get the user’s age.

L5 Use loops

Teach about loops. Follow the instructions in annoy.js.

L6 Create a guessing game

Create a guessing game.

Follow the instructions in game.js. Use a random number between 1 and 100 as the
secret number. What is the minimum number of tries needed to guess the secret
number? What is the maximum number of tries needed to guess the secret number?
What is the optimum number of tries needed to guess the secret number?

L7 More Practice on the programming structures

More about loops. Use for and while loops for variety. Follow the instructions in
forLoops.js.
L8 Create sub-programs

Create functions. Follow the instructions in for functions.js. Use the REPL feature
to test the functions.

L9 Use Arrays

Use Arrays to create a To-do list. Follow the instructions in todo.js file. Test the
functionality with list.html

L10 Create functions that use arrays

More array examples. Provide the code for the 4 functions app.js. Test the
functionality with index.html

L11 Array of Objects

Create an array of objects and iterate thru’ it. Follow the instructions in app.js file.

L12 Select element from HTML page to access in JavaScript

Access elements in the html page. Follow the instructions in index-starter.html file.

L13 Use Event Listeners

Access elements in the html page. Follow the instructions in scorekeeper.js

L14 Create ‘Rock, Scissor, Paper’ game, case manipulation is strings etc.

More practice on the basic programing elements of JavaScript language.

L15 RGB and colors

Fun color guessing game. A RGB value is given and pick the color that matches it.

L16 Code Breaker

Create a game that allows you to identify the digits 0 to 9 are placed in what
sequence. The game gives cues to assist you. Follow the instructions in
‘CodeBreaker.docx’
jQuery

L1 Retrieve Repository names from GitHub for a user

Work with JSON data received from the internet. Query GitHub repositories
owned by a user. Follow the instructions in GithubAPI.docx
Work with events and arrays using jQuery. Follow the instructions in
GithubAPI.docx

L2 Explore different effects such as fadeIn, fadeout etc.

Use jQuery effects. Follow the instructions in jQuery EffectsInstructions.docx

L3 Handle Events such as click, keypress etc.

Learn about event handling in jQuery. Follow the instructions in jQuery

EventsInstructions.docx

L4 Create a FAQ accordion using jQuery.

Create an Accordion. Follow the instructions in “jQuery FAQ Accordion.docx”

L5 Learn about jQuery methods such as addClass, dropClass etc.

Use methods api. Follow the instructions in “jQueryMethodsInstructions.docx”

L6 Use Event firing to create/maintain a ToDo task list

Create a ToDo List. Follow the instructions in “jQuery To-Do-Instructions.docx”

L7 Manipulate JSON data in an array

Manipulate a form using jQuery commands. Follow the instructions in app.js

L8 Get information in JSON format from web.

Similar to L 1. Query moviedb and retrieve JSON objects. Follow the instructions
in “Movie API Instructions.docx”