This document provides an outline for a web development course, covering HTML/CSS concepts, DOM manipulation with JavaScript, and filtering and visualizing data. It introduces key topics like Flexbox for layout, Bootstrap for design, variables, data types, functions, arrays, objects, and JSON. The course will have students practice these concepts by designing a page using Bootstrap and manipulating the DOM with JavaScript methods.

1. Web Development

2. Outline
• Review HTML/CSS concepts
• Flexbox/Using a Bootstrap installation
• DOM Manipulation with JavaScript
• Quiz Exercise
• Filtering and Visualizing Data

3. HTML
Layout elements
<div>
<span>
Forms
<form id="myform">
<input type="text" id="firstname" />
<select id="car">
<option value="ford">Ford</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</form>

4. HTML
• Attributes
Provide options within elements (href, src, bgcolor, text…)
<a href= "http://google.com" target="_blank">Google</a>
<img src= "img/cindy.jpg" />
• IDs and Classes
• Generic attributes used for styling and to define elements to be manipulated by script
• IDs used once on page; Classes can be used multiple times
• <div id="header”>
• <p class="red">
• Comments
Comments are used to remove text from code, does not render – site instructions or to void
something for testing
<!-- this is a comment -->

5. CSS
• Cascading Stylesheets provide a way to style elements across a site
• It is used for establishing layout, color, font-sizes and more
• Can be used in an external stylesheet, linked in each html page
<link rel="stylesheet" href="css/style.css" type=”text/css" >
• in the head of a document
<style>
p {
font-family: Helvetica;
font-size: 14px;
}
</style>
• Inline
<p style= ”font-famly: Helvetica”>

6. CSS
Flexbox
• CSS has been updated to include some new layout features. These features provide
simpler, more flexible ways to achieve desired layout and design, without having to
use the confusing float property. Bootstrap 4 is based on Flexbox, and most modern
browsers now support Flexbox.
• Flexbox provides new css properties that help with aligning sections of your page
within rows.
• Flexbox is predicated on the concept that you will align objects based on an axis or
row. The parent item is a flex container and the direct child elements are considered
flex items.
• Use display: flex on the parent element and style the child elements with % widths.

7. Bootstrap
• Bootstrap is a front-end web development system that simplifies design and layout
techniques.
• You connect to it via the getbootstrap.com website and include the CSS and script
files that run the system.
• It is a series of HTML elements and CSS classes:
• Grid – container, row, col
• Jumbotron
• Navigation
• Other design features, like photo carousels, parallax backgrounds, smooth scrollling

8. Programming Concepts
• Variables – store data to be used elsewhere in the program
name="cindy"
• Data Types – string, number, boolean
• Concatenation – combining variables, string and numbers
name= firstname + " " + lastname
Concatenates the value in firstname, a space and value in lastname
• Methods
num = password.length
password = name.substring(0,8)

9. Programming Concepts
• if statements
if(pw.length > 8) {
message = "password accepted";}
else {
message = "password rejected";
}
• loops
for(i=0; i< 10; i++) {
message = "repeating this 10 times";
}

10. Programming Concepts
• functions – a function is a way to store a series of instructions to be
referenced later in the program
• Definition and execution
function hello(a) {
message = "Hello " + a;
}
hello("Cindy");

11. Programming Concepts
• Arrays and Objects – ways to store data in a program
Array
bands = ["Coldplay", "U2", "Foo Fighters"];
access with index number, in square brackets, starting with 0
firstband = bands[0];
Object
bands = [{name: "Coldplay", country: "England"},
{name: "U2", country: "Ireland"},
{name: "Foo Fighters", country: "United States"};]
access with index number and property
firstbandname = bands[0].name

12. JavaScript Methods
Use JavaScript methods to manipulate the Document Object Model
(DOM)
document.getElementById("msg").innerHTML = "Hello World";
Grab value from a form element
first = document.getElementById("firstname").value;
These procedures are very powerful in making interactive
presentations

14. JSON
• JavaScript Object Notation – a way to store and organize data in a text format
• Use a loop to access it and return to the DOM; use a condition to filter it
data = [ { "incnum": 16002735, "month": "Jan", "day": 10, "battalion": "B5",
"status": "Code 3", "priority": "3F", "unit": "ENG01", "district": 9, "lat":
30.228627, "long": -97.746432 },
{ "incnum": 16002786, "month": "Jan", "day": 10, "battalion": "B3", "status":
"Code 3", "priority": "3F", "unit": "ENG14", "district": 1, "lat": 30.300323, "long":
-97.640077 },
{ "incnum": 16002786, "month": "Jan", "day": 10, "battalion": "B3", "status":
"Left Blank", "priority": "3F", "unit": "QNT18", "district": 1, "lat": 30.300323,
"long": -97.640077 } ];

15. Exercise
• We'll be using a basic Bootstrap installation to design this page.
Bootstrap is a frontend framework that assists with layout and design
features. https://getbootstrap.com
• Find the Glitch project linked in the exercise and remix it to your own
account.
• Open the project and start with the index.html page.
• Follow along with the exercise