Web Dev by Colt

2019
The Web Developer Bootcamp Front-End Basics

HTML + + BOOTSTRAP 3 & 4 + JavaScript + DOM and
jQuery
Summary by Shomron David
Thank you Colt

For this awesome course
Shomron David
21/10/2019
Table of Contents
Section 1 & 2.....................................................................................................................................................................................7
Utilities & Links .............................................................................................................................................................................7
Section 3: HTML Basics .....................................................................................................................................................................8
Shortcuts Visual Studio Code........................................................................................................................................................9
Important Shortcuts .................................................................................................................................................................9
Divs and Spans ........................................................................................................................................................................12
Attributes................................................................................................................................................................................12
Image ......................................................................................................................................................................................13
Links ........................................................................................................................................................................................13
Section 4: Intermediate HTML........................................................................................................................................................14
Introduction to Forms – Getting User Input ...........................................................................................................................15
Example for inputs..................................................................................................................................................................17
The Form Tag ..........................................................................................................................................................................17
Example for a form .................................................................................................................................................................17
Example of such a request......................................................................................................................................................18
Labels ......................................................................................................................................................................................18
Example Syntax:......................................................................................................................................................................18
Form Validations.....................................................................................................................................................................20
Dropdowns and Radio Buttons...............................................................................................................................................21
Text Areas ...............................................................................................................................................................................21
Project Solution: .....................................................................................................................................................................21
Section 5: Introduction to CSS ........................................................................................................................................................27
Objectives ...............................................................................................................................................................................27
Best practice: Use the link tag ................................................................................................................................................29
Colors in CSS ...........................................................................................................................................................................30
The hexadecimal Number system in Colors ...........................................................................................................................30
RGB .........................................................................................................................................................................................31
RGBA .......................................................................................................................................................................................31
CSS Selectors ..........................................................................................................................................................................33
text-decoration.......................................................................................................................................................................34
Introduction to the Chrome Inspector ...................................................................................................................................36
More Advanced Selectors.......................................................................................................................................................37
Specificity and the Cascade ....................................................................................................................................................39
1|P age
The Web Developer Bootcamp by Colt Steele – Summary by Shomron David - Go to Contents
Project Solution ......................................................................................................................................................................40
Section 6: Intermediate CSS ...........................................................................................................................................................42
Fonts .......................................................................................................................................................................................42
Note about Google Fonts .......................................................................................................................................................44
Using Google Fonts .................................................................................................................................................................46
The Box Model........................................................................................................................................................................47
Creating Tic Tac Toe Board - Project.......................................................................................................................................49
Image Gallery Code Along ......................................................................................................................................................51
CSS Blog from Scratch.............................................................................................................................................................53
Section 7: Bootstrap .......................................................................................................................................................................56
Buttons .......................................................................................................................................................................................57
Jumbotron ..................................................................................................................................................................................57
Containers ..................................................................................................................................................................................57
Forms ..........................................................................................................................................................................................58
Navbars .......................................................................................................................................................................................58
Hamburger Menu + Collapse on Mobile ....................................................................................................................................59
The Grid System..........................................................................................................................................................................60
Grid Options ...........................................................................................................................................................................60
Nesting Grids ..........................................................................................................................................................................61
Bootstrap Image Gallery .............................................................................................................................................................63
Section 8: Bootstrap 4 ....................................................................................................................................................................65
Changes from Bootstrap 3 to 4...................................................................................................................................................65
Getting Started ...........................................................................................................................................................................65
Colors ..........................................................................................................................................................................................65
Bootstrap Typography ................................................................................................................................................................66
Utility Classes..............................................................................................................................................................................66
Borders ...................................................................................................................................................................................66
Subtractive..............................................................................................................................................................................66
Border-Radius .........................................................................................................................................................................67
Border Color ...........................................................................................................................................................................67
Spacing....................................................................................................................................................................................67
Responsive Breakpoints .............................................................................................................................................................70
Navbar ........................................................................................................................................................................................71
The New Display Utility ..............................................................................................................................................................71
Section 9: Bootstrap 4 – Flexbox and Layout .................................................................................................................................72
2|P age
Flex .............................................................................................................................................................................................72
Flexbox + Navbar ........................................................................................................................................................................76
The Bootstrap 4 Grid System......................................................................................................................................................79
Project Pattern ...........................................................................................................................................................................80
Grid + Flexbox .............................................................................................................................................................................83
MUSEUM OF CANDY...................................................................................................................................................................85
Changing Stacking Order ........................................................................................................................................................86
Extra Effects on the project ........................................................................................................................................................86
JavaScript ........................................................................................................................................................................................87
The JavaScript Developer Console – Chrome Browser...............................................................................................................87
JavaScript - Basics ...........................................................................................................................................................................88
Primitives ....................................................................................................................................................................................88
5 Primitive Datatypes .................................................................................................................................................................88
Numbers .................................................................................................................................................................................89
Strings .....................................................................................................................................................................................90
Null and Undefined.................................................................................................................................................................92
Variables .....................................................................................................................................................................................92
Useful built-in methods ..............................................................................................................................................................93
alert(); .....................................................................................................................................................................................93
console.log(); ..........................................................................................................................................................................93
prompt(); ................................................................................................................................................................................93
JavaScript Basics: Control Flow.......................................................................................................................................................94
Boolean Logic..............................................................................................................................................................................94
Comparison Operators ...............................................................................................................................................................94
Logical Operators........................................................................................................................................................................95
• And .................................................................................................................................................................................95
• Or ...................................................................................................................................................................................95
• Not .................................................................................................................................................................................95
Exercise 1: ...............................................................................................................................................................................96
Exercise 2: ...............................................................................................................................................................................96
Exercise 3 ................................................................................................................................................................................97
JS Conditionals ............................................................................................................................................................................98
IF .............................................................................................................................................................................................99
ELSE IF .....................................................................................................................................................................................99
ELSE.........................................................................................................................................................................................99
3|P age
Solution for exercise ...............................................................................................................................................................99
Solution for exercise Guessing Game Code Along............................................................................................................... 100
Loops ....................................................................................................................................................................................... 101
While Loops ......................................................................................................................................................................... 102
Evaluate the code in your head ........................................................................................................................................... 104
Examples of whileloop......................................................................................................................................................... 105
For Loops ............................................................................................................................................................................. 107
Exercises for Loops .............................................................................................................................................................. 108
Solutions for the Exercise .................................................................................................................................................... 109
JS Basics: Functions...................................................................................................................................................................... 111
Arguments ........................................................................................................................................................................... 113
The Return Keyword ............................................................................................................................................................ 114
Exercises .............................................................................................................................................................................. 116
Function Problem Ses .......................................................................................................................................................... 117
Intro to JS Scope ...................................................................................................................................................................... 119
Scope Quiz ............................................................................................................................................................................... 120
Higher-Order Functions ........................................................................................................................................................... 120
Explanation .......................................................................................................................................................................... 120
JS Basics: Arrays ........................................................................................................................................................................... 121
Array Methods......................................................................................................................................................................... 124
Push and Pop ....................................................................................................................................................................... 124
Shift & Unshift ..................................................................................................................................................................... 125
IndexOf ................................................................................................................................................................................ 125
Slice...................................................................................................................................................................................... 126
Array Exercise ...................................................................................................................................................................... 126
Code Along Todo Lists ......................................................................................................................................................... 127
Array Iteration ......................................................................................................................................................................... 128
For Loop ............................................................................................................................................................................... 128
forEach................................................................................................................................................................................. 128
for VS. forEach ..................................................................................................................................................................... 129
Exercise:............................................................................................................................................................................... 129
Todo List Code Along Part: 2 ............................................................................................................................................... 130
Arrays Problem Set .................................................................................................................................................................. 131
printReverse() ...................................................................................................................................................................... 131
isUniform() ........................................................................................................................................................................... 132
4|P age
sumArray() ........................................................................................................................................................................... 133
max() .................................................................................................................................................................................... 134
JavaScript Basics: Objects ............................................................................................................................................................ 135
Store Data ................................................................................................................................................................................ 135
Retrieving Data ........................................................................................................................................................................ 136
Updating Data.......................................................................................................................................................................... 137
Creating Objects ...................................................................................................................................................................... 137
Comparing Objects and Arrays ................................................................................................................................................ 138
Nested Objects and Arrays ...................................................................................................................................................... 139
Objects Quiz............................................................................................................................................................................. 140
Exercise 1 ............................................................................................................................................................................. 140
Excerise 2 ............................................................................................................................................................................. 140
MovieDB Excercise .................................................................................................................................................................. 141
JS Methods .............................................................................................................................................................................. 142
Intro to the DOM ......................................................................................................................................................................... 143
The DOM.................................................................................................................................................................................. 143
Select and Manipulate......................................................................................................................................................... 144
DOM Selectors ..................................................................................................................................................................... 146
Methods .............................................................................................................................................................................. 146
Selector Exercise.................................................................................................................................................................. 150
DOM Manipulation .............................................................................................................................................................. 151
DOM Events ............................................................................................................................................................................. 155
Exercise: Color Changer ....................................................................................................................................................... 157
Score Keeper........................................................................................................................................................................ 158
RGB Color Picker Game ........................................................................................................................................................... 163
JavaScript Structure ............................................................................................................................................................. 163
HTML Structure ................................................................................................................................................................... 165
CSS Structure ....................................................................................................................................................................... 166
jQuery .......................................................................................................................................................................................... 168
youmightnotneedjquery.com.................................................................................................................................................. 168
Adding jQuery .......................................................................................................................................................................... 169
Quick Preview .......................................................................................................................................................................... 169
Selecting with jQuery .............................................................................................................................................................. 170
Exercise................................................................................................................................................................................ 171
Common jQuery Methods ....................................................................................................................................................... 172
5|P age
jQuery Final Project ................................................................................................................................................................. 173
HTML ................................................................................................................................................................................... 173
CSS ....................................................................................................................................................................................... 173
JavaScript ............................................................................................................................................................................. 175
Extra Resources - The Web Developer Bootcamp Outline (Revised: May 29, 2018) By: Bronson Avila................................. 176
6|P age
Section 1 & 2
Utilities & Links
Utilities / Version Control Documentation / Extras Libraries / Resources

Visual Studio Code - Devdocs.io Bootstrap –
https://code.visualstudio.com/ https://devdocs.io/ https://getbootstrap.com/
GitHub – MDN – jQuery-
https://github.com/ https://developer.mozilla.org/en-US/ https://code.jquery.com/
JsFddle – W3SCHOOLS FontAwesome -
https://jsfiddle.net/ https://www.w3schools.com/ https://fontawesome.com/
Draw.io - Flowchart Maker – CSS-TRICKS Unsplash - Freely useable images

https://www.draw.io/ https://css-tricks.com/ https://unsplash.com/
7|P age
Section 3: HTML Basics
Objectives
• Wrote simple HTML Documents
• Understand the difference between closing and self-closing tags
• Write tags with attributes
• Use MDN as a reference
• Give an Image, Write the corresponding HTML
History of HTML
• Created in 1989/1990
• Allowed publishing and exchanging of scientific and technical documents
• Allowed electronic linking of documents via hyperlinks
The General Rule

<tagName> Some Content </tagName>
Concept and syntax

An HTML document is a plaintext document structured with elements. Elements
are surrounded by matching opening and closing tags. Each tag begins and ends
with angle brackets (<>). There are a few empty or void tags that cannot enclose
any text, for instance <img>.
You can extend HTML tags with attributes, which provide additional information
affecting how the browser interprets the element:
8|P age
An HTML file is normally saved with an .htm or .html extension, served by a web
server, and can be rendered by any Web browser.
Mozilla Developer Network - https://developer.mozilla.org/en-US/
Excellent reference for HTML, JavaScript and CSS.
Every HTML document we create will start with this boilerplate:

<!DOCTYPE html>
<html>
<head>
<--Our metadata goes here -->

<title></title>
</head>
<body>

</body>
</html>
Shortcuts Visual Studio Code

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
Important Shortcuts
COMMENT CONTENT CTRL + / This will comment the entire
selected
Select Multiple Rows ALT + L Click This will position the multiple
edit cursor where you select
9|P age
10 | P a g e
Example of Lists – Ordered List and Unordered Lists
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>This is my first tag!!</h1>
<h2>This is another heading</h2>
<h6>This is another heading</h6>
<p>
Lorem ipsum <strong>dolor sit amet</strong> consectetur adipisicing elit. Laborum,
odit numquam itaque, porro iure dolorum saepe culpa similique accusamus totam,
mollitia qui consequuntur neque nobis libero sequi quam reprehenderit tempora?
</p>
<h4>My Color List</h4>
<ol>
<li>Red</li>
<li>Yellow</li>
<ul>
<li>Sunflower</li>
<li>Bananas</li>
<ol>
<li>Frozen Banana</li>
<li>non forzen bananas</li>
</ol>
</ul>
</ol>
<ul>
<li>Orange</li>
<li>Yellow</li>
<li>Red</li>
</ul>
</body>
</html>
11 | P a g e
Divs and Spans
The HTML Content Division element (<div>) is the generic container for flow
content. It has no effect on the content or layout until styled using CSS.
The HTML <span> element is a generic inline container for phrasing content, which does not inherently
represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or
because they share attribute values, such as lang. It should be used only when no other semantic element is
appropriate. <span> is very much like a <div>element, but <div> is a block-level element whereas
a <span> is an inline element.
• divs are block level element and Spans are inline element
Attributes
• You can understand more on attributes on MDN
12 | P a g e
Image
The HTML <img> element embeds an image into the document. It is a replaced element.
<img src=”David.png”>
Links
The HTML <a> element (or anchor element), along with it's href attribute, creates a hyperlink to other web
pages, files, locations within the same page, email addresses, or any other URL.
<a href=”https://solidartisans.com” target=”_blank”>Solid Artisans</a>
13 | P a g e
Section 4: Intermediate HTML
The HTML <table> element represents tabular data — that is, information presented
in a two-dimensional table comprised of rows and columns of cells containing data.
<h2>OLD HTML5 Way</h2>
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Breed</th>
</tr>
<tr>
<td>Rusty</td>
<td>2</td>
<td>Mutt</td>
</tr>
<tr>
<td>Buzo</td>
<td>10</td>
<td>Golden</td>
</tr>
</table>
<h2>New HTML5 Way</h2>

<hr>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Breed</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lassy</td>
<td>5</td>
<td>Boxer / Pitbull</td>
</tr>
<tr>
<td>Buzo</td>
<td>10</td>
<td>Rottwiller / Germanshepard</td>
</tr>
</tbody>
</table>
14 | P a g e
Introduction to Forms – Getting User Input
15 | P a g e
To read more you can refer to MDN and understand the input types
16 | P a g e
Example for inputs
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<input type="submit">
• Placeholder attribute can assist in the UX for the user to understand what will be the input
The Form Tag

• Form tag by default has a get method
• Action will send data to the same page
• The name attribute will send distinguish data
Example for a form

<h1>Login</h1>
<form action="" method="GET">
<input name="username" type="text" placeholder="username">
<input name="password" type="password" placeholder="password">
17 | P a g e
</form>
• With GET requests you can send data to
other sites and the query strings will
appear
Example of such a request

<form action="https://wikipedia.org" method="GET">
<input name="username" type="text" placeholder="username">
<input name="password" type="password" placeholder="password">
</form>
• Read more on MDN
Labels
Example Syntax:
18 | P a g e
<label for="username">Username</label>
<input name="username" id="username" placeholder="Username" type="text">
<label for="password">Password</label>
<input name="password" id="password" placeholder="Password" type="password">
<button>Submit</button>
</form>
19 | P a g e
Form Validations

<input name="username" id="username" placeholder="Username" type="email" required>
<label for="password">Password</label>
<input name="password" id="password" placeholder="Password" type="password" required>
<button>Submit</button>
</form>
• By using the required attribute, you require the user to fill the form
• By changing the input type to email for example you require the user to input a email address
20 | P a g e
Dropdowns and Radio Buttons
<p>Do you prefer cats or dogs</p>

<form action="">
<label for="dogs">Dogs: </label>
<input name="petChoice" id="dogs" type="radio" value="dogs">
<label for="cats">Cats: </label>
<input name="petChoice" id="cats" type="radio" value="cats">
<p>Whats your favorite color?</p>

<select name="color">
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yello">Yellow</option>
</select>
<button>Go!</button>
</form>
• In radio buttons you have to make sure that the name is the same if you want it to be changeable
• Dropdowns best practice is to add the value even though by default the value is taken from the option tag
Text Areas
The HTML <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users
to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
<textarea name="paragraph" id="paragraph" cols="50" rows="10"></textarea>
• Best practices the textarea should have a name attribute and size can be defined with rows and cols
attribute.
Project Solution:
<h1>Register</h1>
<form action="" method="GET">
<div>
<label for="firstName">First Name:</label>
<input id="firstName" name="firstName" type="text" placeholder="Shomron" required>
<label for="lastName">Last Name:</label>
<input id="lastName" name="lastName" type="text" placeholder="David" required>
</div>
<div>
<label for="male">Male</label>
<input id="male" name="gender" type="radio" value="male">
21 | P a g e
<label for="female">Female</label>
<input id="female" name="gender" type="radio" value="female">
<label for="other">Other</label>
<input id="other" name="gender" type="radio" value="other">
</div>
<div>
<label for="email">Email:</label>
<input id="email" name="email" type="email" placeholder="shomron@email.com" required>
<label for="password">Password:</label>
<input id="password" name="password" type="password" placeholder="your password"
required pattern=".{5,10}" title="Minimum of 5-10 characters">
</div>
<div>
<fieldset>
<legend>Birthday:</legend>
<label for=""birthday-month">Month:</label>
<select name="birthday-month" id="birthday-month">
<option value="january">Jan</option>
<option value="february">Feb</option>
<option value="march">Mar</option>
<option value="april">Apr</option>
<option value="may">May</option>
<option value="june">Jun</option>
<option value="july">Jul</option>
<option value="august">Aug</option>
<option value="september">Sep</option>
<option value="october">Oct</option>
<option value="november">Nov</option>
<option value="december">Dec</option>
</select>
<label for=""birthday-day">Day:</label>
<select name="birthday-day" id="birthday-day">
<option value="0" selected disabled>Day</option>
<option value="1">1</option>
22 | P a g e
</select>
<label for=""birthday-year">Year:</label>
<select name="birthday-year" id="birthday-year">
<option value="0" selected disabled>Year</option>
23 | P a g e
24 | P a g e
<option value="1905">1905</optio>
</select>
</fieldset>
</div>
<div>
<label for="tos">I agree to the tearms and conditions</label>
25 | P a g e
<input type="checkbox" name="tos" id="tos" value="accept">
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
• After reading a little on the internet we find that the fieldset attribute is the best
option to go with than the one suggested by Colt
• For best practice to use labels for each day, month and year for better readability for usage of screen readers
26 | P a g e
Section 5: Introduction to CSS
Objectives
• Define CSS and the role that it plays in WebDev
• View websites before and after CSS has been added
• Understand the “general rule” for CSS syntax
To understand what CSS is you can go to CSS ZEN GARDEN http://www.csszengarden.com/
http://www.csszengarden.com/221/
http://www.csszengarden.com/219/
and others
27 | P a g e
28 | P a g e
Best practice: Use the link tag
29 | P a g e
Colors in CSS
The hexadecimal Number system in Colors

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F
• The first two digits are referring how much red in the color
• The Second two digits refer how much green
• The Third two digits refer how much Blue
So, if we wanted the font to be red for example we would type: #FF0000
• This are RGB color system not the system you know of mixing colors
• We don’t need to guess the colors we can use a color picker on the internet just google it
30 | P a g e
RGB
3 channels: red, green and blue. Each range form 0 – 255
RGBA
Just like RGB, but with an alpha(transparency) channel. Ranges from 0.0 – 1.0
31 | P a g e
32 | P a g e
CSS Selectors
The Basics: Element, ID, and Class
+
• ID can be use one id time at a page so you have to use different ids and it is defined by #
33 | P a g e
• You can use the same classes in multiple locations and is defined by .
text-decoration
https://developer.mozilla.org/en-
US/docs/Web/CSS/text-decoration
The text-
decoration shorthand CSS property
sets the appearance of decorative lines
on text. It is a shorthand for text-
decoration-line, text-decoration-
color, and text-decoration-style.
34 | P a g e
<!DOCTYPE html>
<html lang="en">
<head>
<title>To do List</title>
<link rel="stylesheet" type="text/css" href="todo.css">
</head>
<body>
<h1>Todo List</h1>
<ul>
<li class="completed">
<input type="checkbox" checked>
Walk Buzo
</li>
<li class="completed">
<input type="checkbox" checked>
Buy Cream
</li>
<li id="special">
<input type="checkbox">
Learn Fullstack
</li>
</ul>
</body>
</html>
Summery:
• We have the element selector li / div / h1 – h6 / p / ….

• We have the id selector and is used with a # which selects an element with a given ID
Only one per page!
• We have the class selector and it selects all elements with a given class (Multiple use)
35 | P a g e
Introduction to the Chrome Inspector
• Right click and inspect element and we will get the inspect element
• In the styles tab you can edit elements to test it is done live however changes are not saved
• In order to summarize you can inspect CSS and HTML of any site and learn more
• And you can replicate it
36 | P a g e
More Advanced Selectors
Some reference: https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
/*Element*/
li {
}
/*class*/
.hello {
}
/*id*/
#name {
/*Star*/
* {
border: 1px solid lightgrey;
}
/*Descendant Selector*/
li a {
color: red;
}
/*Adjacent Selector*/
h4 + ul {
border: 4px solid red;
}
/*Attribute Selector*/
a[href="http://www.google.com"] {
background: blue;
}
/*nth of type*/
li:nth-of-type(odd){
background: purple;
}
37 | P a g e
Star Selector
• Selects All type of elements
Descendant Selector
• This will be applied on the tags that are Descendant of the first element
Example:
li a {
color: red;
}
• The above example shows us that all the Descendants of the li tag will have the color read in simple words everything
inside a li tag will get the color red.
Adjacent Selector
• This will let us select element a sibling element which means whatever comes next
Example:
h4 + ul {
border: 4px solid red;
}
• What comes after the h4 element that is an ul tag will be styled
Attribute Selector
• This selector as it sounds will give the attribute that matches the selector the properties of styling.
Example:
a[href="http://www.google.com"] {
background: blue;
}
• All anchor tags that have the attribute of the link http://www.google.com will be
selected
NTH OF TYPE
• This selector is useful for selecting something down the page
Example
li:nth-of-type(odd){
background: purple;
}
• The above will do all odd number element with the background of purple
You can add a specific number also li:nth-of-type(3)
• In every group of li it will select the third element of li
38 | P a g e
Specificity and the Cascade
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element
and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts
of CSS selectors.
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Specificity Calculator
http://specificity.keegan.st/
/* Type selectors */
li {
li a {
li + a{
/* Class, Attribute, and Pseudo-class Selectors */
.hello {
/* ID selectors */
#home {
• The above list is from least specific to most specific
39 | P a g e
Project Solution
/* Style the HTML elements according to the following instructions.

DO NOT ALTER THE EXISTING HTML TO DO THIS. WRITE ONLY CSS!
/* Give the <body> element a background of #bdc3c7*/

body{
background: #bdc3c7;
}
/* Make the <h1> element #9b59b6*/

h1 {
color: #9b59b6;
}
/* Make all <h2> elements orange */
h2 {
color: #ff9f44;
}
/* Make all <li> elements blue(pick your own hexadecimal blue)*/

li{
color: #0000FF;
}
/*Change the background on every paragraph to be yellow*/

p{
background: #fff12b;
}
/*Make all inputs have a 3px red border*/

input{
border: 3px solid #FF0000;
}
/* Give everything with the class 'hello' a white background*/

.hello
{
background: #FFFFFF;
}
/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/
#special {
border: 2px solid rgb(00,00,255);
}
/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/
div p {
font-size: 25px;
}
/*Make only inputs with type 'text' have a gray background*/

input[type="text"]{
40 | P a g e
background: #bdc3c7;
}
/* Give both <p>'s inside the 3rd <div> a pink background*/

div:nth-of-type(3) p{
background: rgb(255, 0, 234);
}
/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/
div:nth-of-type(3) p:nth-of-type(2){
border: 5px solid #ffffff;
}
/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/
div:nth-of-type(3) em {
color: #ffffff;
font-size: 20px;
}
/*BONUS CHALLENGES*/
/*You may need to research some other selectors and properties*/
/*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/

input:checked
{
margin-left: 50px;
}
/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one
up*/
label
{
text-transform: uppercase;
}
/*Make the first letter of the element with id 'special' green and 100px font size(font-size:
100)*/
#special::first-letter
{
font-size: 100px;
color: rgb(0, 255, 0);
}
/*Make the <h1> element's color change to blue when hovered over */
h1:hover{
color: rgb(00,00,255);
}
/*Make the <a> element's that have been visited gray */

a:visited{
color: gray;
}
41 | P a g e
Section 6: Intermediate CSS
Fonts
font-size
Pixels
Setting the font size in pixel values (px) is a good choice when you need pixel accuracy. A px value is
static. This is an OS-independent and cross-browser way of literally telling the browsers to render the
letters at exactly the number of pixels in height that you specified. The results may vary slightly across
browsers, as they may use different algorithms to achieve a similar effect.
Font sizing settings can also be used in combination. For example, if a parent element is set
to 16px and its child element is set to larger, the child element displays larger than the parent element
in the page.
Note: Defining font sizes in px is not accessible, because the user cannot change
the font size from the browser. For example, users with limited vision may wish
to set the font size much larger than the size chosen by a web designer. Avoid
using them for font sizes if you wish to create an inclusive design.
Em
Another way of setting the font size is with em values. The size of an em value is dynamic. When defining the font-
size property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set
the font size anywhere on the page, then it is the browser default, which is often 16px. So, by default 1em = 16px, and 2em =
32px. If you set a font-size of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is
essentially a multiplier of the current em size.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
font-weight
The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-
family you are using.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
line-height
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of
text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline
elements, it specifies the height that is used to calculate line box height.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
text-align
The text-align CSS property sets the horizontal alignment of a block element or table-cell box. This means it works
like vertical-align but in the horizontal direction.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
42 | P a g e
text-decoration
The text-decoration shorthand CSS property sets the appearance of decorative lines on text. It is a shorthand
for text-decoration-line, text-decoration-color, and text-decoration-style.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
Video Examples
/* font-family */
p{
font-family: Arial;
}
h1{
font-family: Georgia;
}
/* font-size */
h1{
font-size: 42px;
}
p{
font-size: 40px;
}
span{
font-size: 2.0em;
/* em font size will inherent the font-size from the parent and we will get the product
*/
}
/* font-weight */
p{
font-weight: bold;
}
/* line-height */
p {
line-height: 1.5;
}
/* text--align */
h1{
text-align: right;
}
/* text-decoration */
p{
text-decoration: underline;
}
h1{
text-decoration: line-through;
}
43 | P a g e
Note about Google Fonts
Hi Everyone!
In the next lecture Colt covers how to use Google Fonts in your project. The interface for
Google Fonts has changed since he made this video so I'll be including updated
instructions on how to use the new version, below:
• Navigate to https://fonts.google.com/
• Use the search bar in the top right corner to find the font of your choosing (or simply browse the directory
for a font)
•
• Click the red circle with the plus sign to the right of the font name
•
• Now click the grey tab that appears in the lower right corner of the screen
•
• Click the "customize" tab and select any of the options you need
44 | P a g e
•
• Click the "embed" tab and copy the link beneath the "standard" option
•
• Paste this link tag into the <head> of your project, before the link to your custom CSS
-----------------------------------
You're all set! Feel free to post a question in the Q&A if you have any trouble getting this
working in your project :)
Thanks,
Ian
Course TA
45 | P a g e
Using Google Fonts
We have to keep in mind that the more custom fonts we use it will have a negative impact on our page load times
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap"
rel="stylesheet">
• You can read more on MDN regarding the custom fonts
46 | P a g e
The Box Model
Padding, Margin, Border, and more!
You can take look on the chrome inspector and get an idea
47 | P a g e
Percentage Units: when using percentage, you can understand that the percent
is off it is from the parent element
p{
/* Content - Width and Height*/
width: 50%;
height: 50%;
/* Border */
border: 2px solid rgb(0,0,255);
/* Padding */
padding: 10px;
/* Margin */
/* margin: 100px; */
/* margin-top: 20px; */
margin: 20px 40px 500px 100px; /* top right bottom left */
}
• In order to center element you can use the margin: auto;

• margin: 0 auto; /* Center element from the left and right*/
• margin: auto; /*will center it in the middle */
48 | P a g e
Creating Tic Tac Toe Board - Project
tic.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="tic.css" type="text/css">
</head>
<body>
<table>
<thead>
<h1>Tic Tac Toe</h1>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
49 | P a g e
tic.css
table {
margin: 20px auto;
h1 {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 36px;
}
tr, td {
width: 200px;
height: 200px;
}
td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
td:last-child {
border-right: none;
}
tr:nth-of-type(3) td {
border-bottom: none;
}
50 | P a g e
Image Gallery Code Along
<!DOCTYPE html>
<html lang="en">
<head>
<title>PhotoBlog</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap"
rel="stylesheet">
</head>
<body>
<p>Shomron/David</p>


<img src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg";>
<img src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg";>
<img src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg";>


<img src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg";>
<img src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg";>
<img src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg";>


<img src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg";>
<img src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg";>
<img src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg";>



</body>
</html>
51 | P a g e
img {
width: 30%; /* this will take 30% of the body */
float: left; /* float elements used to stick elements to another */
margin: 1.66%; /* We have 10% and need to divide by 6 left margin and right */
}
p{
font-family: 'Raleway', sans-serif;
margin-left: 1.66%;
font-size: 23px;
font-weight: 800;
border-bottom: 2px solid #f1f1f1f1;
width: 30%;
padding-bottom: 20px;
}
52 | P a g e
CSS Blog from Scratch
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blog</title>
<link rel="stylesheet" href="style.css" type"="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&display=swap"
rel="stylesheet">
</head>
<body>
<div class="post">
<div class="date">November 23 2019</div>
<h2>This is My First Article</h2>
<p class="quote">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quaerat cupiditate officia unde fugit iste, nihil nesciunt
eaque ad doloremque, itaque odio! Obcaecati optio ratione
repellendus voluptates sunt ex maiores consequuntur.
</p>
<p>
</p>
<p>
</p>
<hr class="style-seven">
</div>
<div class="post">
<div class="date">January 11 2019</div>
<h2>This is My Second Article</h2>
<p class="quote">
</p>
<p>
53 | P a g e
</p>
<p>
</p>
<p>
</p>
</div>
</body>
</html>
54 | P a g e
body {
border: 20px solid #bdc3c7;
padding: 20px;
max-width: 700px;
width: 80%;
margin: 20px auto;
font-family: Source Sans Pro, sans-serif;
}
.date {
color: #3498db;
font-size: 1.5em;
letter-spacing: 0.2rem;
}
.quote
{
border-left: 5px solid #bdc3c7;
padding-left: 5px;
}
h2 {
color: #2c3e50;
font-size: 2.0rem;
}
/* Flaired edges, by Tomas Theunissen */
hr.style-seven {
overflow: visible; /* For IE */
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr.style-seven:before { /* Not really supposed to work, but does */
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
.post {
margin-bottom:20px;
}
55 | P a g e
Section 7: Bootstrap
Note about Bootstrap versions
Hi Everyone!
In this section Colt will teach you Bootstrap 3.
Bootstrap now has a new version (4). Colt teaches version 3 in this section and version 4
in the next.
While working in this section, please use the original documentation for version 3 and
ensure that you're using version 3.3.7 in your code as you're following along with the
lectures.
Why teach both versions?

Many companies still use version 3, so if you know both versions then you can easily help
them migrate to version 4.
Also, the YelpCamp project in the back-end section of this course uses version 3, so if you
don't know the version 3 syntax it will be more difficult to follow along.
Once you've completed the YelpCamp project, then you can use this guide to upgrade
your code from Bootstrap 3 to version 4.
Thanks,
Ian
Course TA
https://getbootstrap.com/
https://expo.getbootstrap.com/ - here you can see some examples of bootstrap
• Some basics you need to use the documentation on the bootstrap website
• You can style the elements in a different CSS file.
56 | P a g e
Buttons
https://getbootstrap.com/docs/3.4/css/#buttons
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
Examples of buttons are above and to use you need to use a button with a class btn
and btn-XXXXX
Jumbotron
https://getbootstrap.com/docs/3.4/components/#jumbotron
<div class="jumbotron">
<h1>This is a jumbotron</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, quod. In
recusandae magnam culpa esse nemo iure nostrum laudantium nisi
adipisci doloribus voluptate eveniet voluptatem officia voluptatibus, consectetur
repudiandae molestiae.
</p>
<button class="btn btn-success btn-lg">Click Here</button>
</div>
Containers
https://getbootstrap.com/docs/3.4/css/#overview-container
Containers are the most basic layout element in Bootstrap and are required when using our default
grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each
breakpoint) or fluid-width (meaning it’s 100% wide all the time).
<div class="container">

</div>
57 | P a g e
Forms
https://getbootstrap.com/docs/3.4/components/forms/
form-group
Wrap labels and controls in .form-group for optimum spacing. Added to the div element
form-control
Applying the class attribute to an input element improves the style of the normal default appearance (adds rounded
corners, padding, spacing, focus effects, etc.), but also makes changes how the element behaves within the grid
system
help-block
this class is added to the <p> and modifies the text of a helpful hint to be more subtle and subdued in appearance.
Inline Form
A basic form will lay its contents by stacking them on top of each other, However, by applying the class=”form-inline” to your
form (which doesn’t necessarily have to be a <form> element) will place its contents in a little form left to right.
Navbars
https://getbootstrap.com/docs/3.4/components/#navbar
<nav class="navbar navbar-default">

<div class="navbar-header">
<a href="#" class="navbar-brand">Solid Artisans</a>
</div>
</nav>
• The Above is a basic navbar on the following we will explain regarding the components

</div>
<ul class="nav navbar-nav">

<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">

<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</nav>
• As you can see, we have a default navbar containing the header the left navbar and the navbar-right
58 | P a g e
Hamburger Menu + Collapse on Mobile
• Do make section in navigation bar collapse as we hit mobile size you can use the following class to accomplish this
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
• In order to acchive the hamburger menu we use the following

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-
target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
• We place the above code inside the navbar-header above the navbar-brand

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">

<li><a href="#">Sign Up</a></li>
<li><a href="#">Login</a></li>
</ul>
</div>
</div>
</nav>
• The data-target attribute is with an #bs-example-navbar-collapse-1 and the collapse id is the same but without the #
that targets that sections to collapse
59 | P a g e
The Grid System
https://getbootstrap.com/docs/3.4/css/#grid
Note about The Grid System

Hello Everyone!
In the next lecture you will learn about the Bootstrap grid system.
If your screen size is too small then the columns in the grid will stack vertically instead of sitting side-
by-side.
To correct this issue you can change the col-lg-6 classes to col-md-6 instead.
--------
Cheers,
Ian
Grid Options
col-lg – Large Desktop
col-md – Medium laptop
col-sm – Tablet Devices
col-xs – Mobile Devices
60 | P a g e
<div class="row">
<div class="col-md-3 col-sm-6 pink">Lorem, ipsum dolor sit amet consectetur
adipisicing elit. Quis nihil atque saepe in soluta eaque cumque? Eos inventore earum debitis
labore necessitatibus dolorum rem ipsum reprehenderit molestias accusantium, explicabo
dolorem.</div>
dolorem.</div>
dolorem.</div>
dolorem.</div>
</div>
</div>
Nesting Grids
• For nested grinds we add a row inside a column and use the grid for example
as below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grid System</title>
<link rel="stylesheet" type="text/css"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.pink {
background: pink;
border: 1px solid purple;
}
.orange
{
background: orange;
border: 1px dashed red;
height: 50px;
}
</style>
61 | P a g e
</head>
<body>
<div class="row">
<div class="col-md-3 col-sm-6 pink">
<div class="row">
<div class="col-lg-6 orange">
First Half
</div>
<div class="col-lg-6 orange">
Second Half
</div>
</div>
</div>
dolorem.</div>
dolorem.</div>
<div class="col-md-3 col-sm-6 pink">
<div class="row">
<div class="col-lg-2 orange"></div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
</script>
</body>
</html>
62 | P a g e
Bootstrap Image Gallery
Note about Bootstrap Image Gallery Pt. 1
Hi Everyone!
In the next lecture, titled "Bootstrap Image Gallery Pt. 1", Colt will show you how to get hi-resolution stock images from a website called
unsplash.
The method of getting the image url has changed since this video was created.
If you find an image you like then you'll need to click on the image to make it full screen at which point the url will change to give you the
photo's ID.
It's the alphanumeric combination that comes after ?photo= .
Once you copy the photo's ID then you can add it to the source.unsplash address like so:
<img src="https://source.unsplash.com/cPF2nlWcMY4">
Additionally, students have reported having trouble with the grid when using images of varying sizes. See below for a few solutions:
• If you don't mind the images being of varying heights, but want to get rid of the white space bug then see here
• If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such
as Masonry, Isotope, or Salvattore.
• If you want to crop all of the images to the same size then see an example of this here
Last, but not least, if you're having trouble with the glyphicons (they're not showing up, but showing a rectangle instead) then
see here for a solution.
Note about Font-awesome

Hi Everyone!
In the next video we will be using a font/icon library called Font Awesome. Font Awesome can now be found
at http://fontawesome.io/
It should also be noted that Font Awesome has released a newer version than the one being used in this course. The
syntax has changed ever so slightly. For example, to insert a retro camera icon you would use the following markup:
<i class="fas fa-camera-retro"></i>
You'll notice that instead of the class name "fa", which we'll be using in this course, we have "fas". The "s" at the end
stands for "solid". The changes are backwards compatible though, you can write it how Colt does in the video and
that should also work.
I recommend using the following CDN script for the latest version:
1. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N

7fWAU" crossorigin="anonymous">
See here for more information and examples about the above mentioned changes.
• When using the fixed navbar the top padding by default is 70px and needed to be added in the css
63 | P a g e
• Note about making bootstrap responsive on mobile
devices
• Hi Everyone!
If you want your bootstrap styled website to be responsive on mobile then be sure to add the following meta tag to
your <head> element, above the <title> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
• As a side note, if you can't get the <hr> element to appear correctly on mobile devices then see here for a fix.
64 | P a g e
Section 8: Bootstrap 4
1. Alpha Release – first release which means can be very buggy
2. Beta Release – Little bit more polished release
3. Stable – production release
Documentation: https://getbootstrap.com/docs/4.3/getting-started/introduction/
• Chainages have been made on the markup from bootstrap 3 to bootstrap 4
Changes from Bootstrap 3 to 4

You can see the modifications here https://getbootstrap.com/docs/4.3/migration/
• Global Size has changed to 16 px and will use the rem font size.
• Grid System have Changed and using Flexbox by Default
• Lot of utility classes have been added.
Getting Started
• Style to add in the latest bootstrap is as follows
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-

bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.8.2/css/all.min.css">
• There are latest JavaScript components that have been added to bootstrap 4
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-
bootstrap/4.3.1/js/bootstrap.min.js"></script>
Colors
There are new helper utilities that have been added more on the bootstrap documentation here is an example for the
changes made
<h1 class="text-primary">I am an h1</h1>

<h1 class="text-danger">I am an h1</h1>
<h1 class="text-info">I am an h1</h1>
<h1 class="text-success">I am an h1</h1>
<h1 class="text-warning">I am an h1</h1>
<h1 class="text-white bg-dark">I am an h1</h1>
<h1 class="text-success">I am an h1</h1>
<h1 class="bg-light">I am an h1</h1>
65 | P a g e
Bootstrap Typography
<h1>Regular H1</h1>
<h1 class="display-1 text-info">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source
Title">Source Title</cite></footer>
</blockquote>

<blockquote class="blockquote text-right">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source
Title">Source Title</cite></footer>
</blockquote>
</div>
• Chainages to note: display-1 … text-info blockquote text-right more on the documentations

• https://getbootstrap.com/docs/4.3/content/typography/
• https://getbootstrap.com/docs/4.3/content/typography/#blockquotes
• rem has to be used instead of pixel they refer to the default 16px root font size it is just a multiplier just as the em.
Utility Classes
Borders
https://getbootstrap.com/docs/4.3/utilities/borders/
<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>
Subtractive
<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>
66 | P a g e
Border-Radius
<img src="..." alt="..." class="rounded">

<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">
Border Color
<span class="border border-primary"></span>

<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>
Spacing
https://getbootstrap.com/docs/4.3/utilities/spacing/
Notation
Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them.
This is because those classes are applied from min-width: 0 and up, and thus are not bound by a
media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-
{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
• m - for classes that set margin

• p - for classes that set padding
Where sides is one of:
• t - for classes that set margin-top or padding-top

• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
67 | P a g e
• r - for classes that set margin-right or padding-right
• x - for classes that set both *-left and *-right
• y - for classes that set both *-top and *-bottom
• blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
• 0 - for classes that eliminate the margin or padding by setting it to 0

• 1 - (by default) for classes that set the margin or padding to $spacer * .25
• 2 - (by default) for classes that set the margin or padding to $spacer * .5
• 3 - (by default) for classes that set the margin or padding to $spacer
• 4 - (by default) for classes that set the margin or padding to $spacer * 1.5
• 5 - (by default) for classes that set the margin or padding to $spacer * 3
• auto - for classes that set the margin to auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)
<button class="btn btn-info p-0">P0</button>

• As we can see on the above example the padding 1-5 are different levels of padding that relate to the rem
68 | P a g e
<br>Padding Top<hr>
<button class="btn btn-info pt-5">P5</button>
<br>Padding Bottom<hr>
<button class="btn btn-info pb-5">P5</button>
<br>Padding left<hr>
<button class="btn btn-info pl-5">P5</button>
<br>Padding right<hr>
<button class="btn btn-info pr-5">P5</button>
<br>Padding left and right<hr>

<button class="btn btn-info px-5">P5</button>
<br>Padding top and bottom<hr>

<button class="btn btn-info py-5">P5</button>
69 | P a g e
Responsive Breakpoints
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible
breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport
widths and allow us to scale up elements as the viewport changes.
Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files
for our layout, grid system, and components.
// Extra small devices (portrait phones, less than 576px)

// No media query for `xs` since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)

@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)

// Large devices (desktops, 992px and up)

// Extra large devices (large desktops, 1200px and up)

{property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
<div class="container text-center">

<h1 class="display-3">Breakpoints</h1>
<button class="btn btn-warning p-sm-5 p-md-0 p-lg-5 p-xl-0">BUTTON</button>
<button class="btn btn-danger p-0 p-sm-2 p-md-3 p-lg-4 p-xl-5">BUTTON</button>
<button class="btn btn-success p-0 pl-sm-5 pt-md-5 pr-lg-5 pb-xl-5">BUTTON</button>
<h1>Margin Example</h1>
<button class="btn btn-primary p-4 mx-0 mx-sm-2 mx-md-3 mx-lg-4 mx-xl-5">Hi</button>
</div>
• Example The notation is p-sm-5 which means sm and above
70 | P a g e
Navbar
navbar navbar-expand-lg navbar-light bg-light
• The navbar-expand-lg you can change where you want the navbar to expand
More information regarding Navbars: https://getbootstrap.com/docs/4.3/components/navbar/
• Markup has changed and you have to specify where the navbar expands and the background color
The New Display Utility

• On old bootstrap they had display proprieties and they have gone and we have newer classes
https://getbootstrap.com/docs/4.3/utilities/display/
Notation
Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in
them. This is because those classes are applied from min-width: 0; and up, and thus are not bound
by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
As such, the classes are named using the format:
• .d-{value} for xs
• .d-{breakpoint}-{value} for sm, md, lg, and xl.
Where value is one of:
• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex
The display values can be altered by changing the $displays variable and recompiling the SCSS.
The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-
none sets display: none; on both lg and xl screens.
71 | P a g e
Section 9: Bootstrap 4 – Flexbox and Layout
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more
with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may
be necessary.
• You can make an element a flex element by using the class d-flex
• By default, the main axis is from left to right.
• The cross axis is from top to bottom
• We can change the direction
justify-content-start
• This is the default value all the content will be to the left
justify-content-end
• Moves everything to the right
72 | P a g e
justify-content-between
• This will take all the available space and put the content in between
justify-content-around
• This will take all the available space and put around them
align-items-XXXX
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
flex-row
<h1 class="text-center display-4">Flexbox</h1>
<div class="border border-dark d-flex flex-row justify-content-start align-items-end"
style="height: 200px">
<button class="btn btn-info btn-lg">LARGE</button>
<button class="btn btn-primary">SMALL</button>
<button class="btn btn-warning">SMALL</button>
</div>
73 | P a g e
flex-row-reverse
<div class="border border-dark d-flex flex-row-reverse justify-content-start align-items-end"
</div>
flex-column
<div class="border border-dark d-flex flex-column justify-content-start align-items-end"
</div>
flex-column-reverse
<div class="border border-dark d-flex flex-column-reverse justify-content-start align-items-
end" style="height: 200px">
</div>
74 | P a g e
• On the below code we are setting the flexbox to be a column and when it reaches the md size to change by to row
<h1 class="display-4 text-center">EXAMPLE TIME</h1>

<div class="d-flex flex-column flex-md-row justify-content-between">
<button class="btn btn-dark btn-lg">Link 1</button>
</div>
• Up to medium size the flex box is a row once its below it is a stacked and is in column
• https://getbootstrap.com/docs/4.0/utilities/flex/
75 | P a g e
Flexbox + Navbar
• By Default, flexbox is enabled in a navbar in bootstrap 4
• If you want a vertical nav you can use the flex-column class instead of flex-row
<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
<title>Navs</title>
</head>
<body>
<h1 class="text-center display-4">Navs+Flex</h1>
<ul class="nav border border-primary justify-content-around">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<a class="nav-link" href="#">Link</a>
76 | P a g e
</li>
</li>
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<ul class="nav nav-tabs mt-5">
</li>
</li>
</li>
</li>
</ul>
<nav class="nav flex-column flex-sm-row justify-content-center align-items-center">
</nav>
77 | P a g e
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-

q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
</body>
</html>
78 | P a g e
The Bootstrap 4 Grid System
While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and
container widths. This is because the viewport width is in pixels and does not change with the font
size.
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
https://getbootstrap.com/docs/4.0/layout/grid/
<h1 class="text-center display-4">The Grid System</h1>
<div class="row border border-danger">
<h3 class="col-sm-6 col-xl-3 bg-info m-0">Thing 1</h3>
<h3 class="col-sm-6 col-xl-9 bg-warning m-0">Thing 2</h3>
</div>
</div>
• All the breakpoints have been shifted in bootstrap 4

• At the same time we don’t reference xs anymore xs and above is the default
79 | P a g e
Project Pattern
<!doctype html>
<html lang="en">
<head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Pattern</title>
</head>
<body>
<nav class="navbar bg-dark navbar-dark">

<a href="#" class="navbar-brand">
<i class="fa fa-binoculars mr-2"></i>PATTERN
</a>
</div>
</nav>
<section id="header" class="jumbotron text-center">

<h1 class="display-3">PATTERN</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
blanditiis nulla officiis velit id quia quae corporis dolore odit. Pariatur ut laudantium
error veniam ex qui porro odit voluptatibus. Debitis?</p>
<a href="#" class="btn btn-primary">Do Something</a>
<a href="#" class="btn btn-success">Another Thing</a>
</section>
<section id="gallery">
<div class="row">
<div class="col-lg-4 mb-4">
<div class="card">
<img class="card-img-top" src="imgs/pattern1.jpeg"
alt="Pattern Awsome">
<div class="card-body">
80 | P a g e
<h5 class="card-title">First Thing</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
A itaque architecto laborum distinctio, ipsum, totam
laudantium ducimus optio
dicta assumenda quam incidunt animi corrupti nam quo
inventore. Repellendus, sunt natus.
</p>
<a href="#" class="btn btn-outline-success btn-
sm">Download</a>
<a href="#" class="btn btn-outline-danger btn-sm"><i
class="fa fa-heart"></i></a>
</div>
</div>
</div>

<div class="card">
<h5 class="card-title">Second Thing</h5>
elit.
</p>
sm">Download</a>
</div>
</div>
</div>

<div class="card">
<h5 class="card-title">Third Thing</h5>
elit.
81 | P a g e
</p>
sm">Download</a>
</div>
</div>
</div>
</div>
</div>
</section>

</body>
</html>
Final Product
82 | P a g e
Grid + Flexbox
<!doctype html>
<html lang="en">
<head>

<title>Grid + Flexbox</title>
</head>
<body>
<h1 class="text-center display-4">Grid + Flexbox</h1>
<div class="row border justify-content-around align-items-center">
<div class="col-sm-3 bg-warning">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem culpa et
tempora corporis? Tempora commodi perspiciatis omnis quos ex similique!
</div>
<div class="col-sm-3 bg-info">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis tempore
minus ad ab, explicabo voluptatem officia. Voluptas sed odio nemo, nostrum cumque dolorem
quam, repellat nam porro ex aperiam, ipsa eveniet numquam cupiditate sapiente esse fugiat? Et
tempora eveniet inventore voluptates magnam obcaecati quasi, at, consectetur adipisci natus
sunt blanditiis. </div>
<div class="col-sm-3 bg-warning">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem culpa et
tempora corporis? Tempora commodi perspiciatis omnis quos ex similique!
</div>
</div>
<div class="row border justify-content-center align-items-end">
<div class="col-2 bg-primary align-self-start">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minus, non.
</div>
<div class="col-2 bg-primary">
</div>
<div class="col-2 bg-success">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis perspiciatis
earum eius saepe sint, laudantium deleniti, accusantium fugiat aut illo ab consequatur quos
fuga aliquid facilis magni sed voluptates impedit!
83 | P a g e
</div>
<div class="col-2 bg-primary align-self-start">
</div>
<div class="col-2 bg-primary">
</div>
</div>
<div class="row text-center justify-content-between">

<div class="col-md-6 col-lg-5 bg-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic fugit quisquam
libero distinctio blanditiis, error quos architecto velit aut atque.
</div>
<div class="col-md-6 col-lg-5 bg-danger">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic fugit quisquam
libero distinctio blanditiis, error quos architecto velit aut atque.
</div>
</div>
</div>
</body>
</html>
• Using the flex utility, you can align content justify-content-, align-self-, align-items
• And etc. very powerful and responsive
84 | P a g e
MUSEUM OF CANDY
• img-fluid
- makes the image responsive
• d-none d-lg-block
- The above states display non on all sizes but show up on large and up as block
• container-fluid
- Same 12 size grid but not centered full scale
• container-fluid
- Same 12 size grid but not centered full scale
• Media Query
@media(max-width: 1200px) {
}
MARKUP OF NAVAGATION
<nav id="mainNavbar" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">

<a href="#" class="navbar-brand">CANDY</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<a href="#home" class="nav-link">HOME</a>
</li>
<a href="#about" class="nav-link">ABOUT</a>
</li>
<a href="#tickets" class="nav-link">TICKETS</a>
</li>
</ul>
</div>
</nav>
85 | P a g e
Changing Stacking Order
• In order to change the stacking order we will utilize a class for changing how it
stacks on smaller screen devices
<div class="col-md-6 order-2 order-md-1">.
<img src="imgs/milk.png" alt="Milk" class="img-fluid">
</div>
• For example, on the above we use the order class and the logic is as follows
order-2 order-md-1
• What that means is stay order-2 but once you get to medium size screen become order 1 which means it will come
first
Extra Effects on the project

• We are going to create a new class .navbar.scrolled
• And we will use jQuery to switch when we scroll
• We are going to add it above the closing tag of the body
<script>
$(function () {
$(document).scroll(function () {
var $nav = $("#mainNavbar");
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
});
});
</script>
</body>
• The explanation for the code is

• We are finding the #mainNavbar and any time the page scrolls we’re going to check
$(document).scroll(function ()
• If the top of the scroll is grater than the nav height
$nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());
And it will toggle the class

Once we scroll past the height of the navbar then it will show the background we set on
toggle
• This is just an introduction for the next Volume

To make it a smoother transition we will use the transition: background 500ms;
• It will do it in 500 milliseconds.
86 | P a g e
JavaScript
The JavaScript Developer Console – Chrome Browser
• The console is in the chrome browser you can right click and click on Inspect or Press F12 from the element inspector
• Please note that this console is not the editor. However, you can test out some bits of code you are working on and
see how it works on the browser side, handy tool
87 | P a g e
JavaScript - Basics
Primitives
5 Primitive Datatypes
1) Numbers
2) Strings
3) Booleans
4) Null and Undefined
88 | P a g e
Numbers
• In the chrome console we can type a number it will return the number you typed back (Very Basic Stuff)
• What we can do with numbers is simple mathematical operations
• We can use the Modulo -Remainder Operator
• A vital note JavaScript also follows the order of operations examples are included
89 | P a g e
Modulo
• We get the remainder, so if we do 10%9 the result we get is 1
Strings
• Make sure when you use quotes to make sure they match
• Concatenation we can combine strings so in the example above the output would be charliebrown
90 | P a g e
• To escape character, they all start with a backslash, and it’s a way to tell JavaScript that we want a double quite
character inside the string
• To add a backslash character, you have to type the character twice \\
• Regarding the length property, you get an output of the total character including spaces*
As we can see, the name is 12 characters in total however, space is counted as one as well.
• We can also access an individual character using [] and an index, you can see the example.
Answer without using the console
1) if you divide 3 in 100, you get 3 wholes and remain with 1/3, so the result is 1
2) the character at index 6 is the letter a (common mistake the index count starts from 0)
3) the result of 5%3 is 2
91 | P a g e
Null and Undefined
• null and undefined are the same; however, then the main difference is that undefined is something that is not
defined yet.
• Keep in mind that there is a difference.
Variables
• What are variables is a container that has a name on it and it stores data in it, and we can refer to later
• Also, the data in the container can be changed.
• The convention we use is camelCase
92 | P a g e
Useful built-in methods
• alert, prompt, console.log
• clear() – method to clear the console
• using comments in js //
alert();
alert(“Hello There”);
console.log();
• This prints out in the console it’s for our purpose only to get what is the output. Easy for development.
prompt();
• we can get input and store it to a variable
• we cannot use this in production websites
example: script.js
var userName = prompt("What is your name?");
alert("Nice to meet you, " + userName);

console.log("Also Nice to meet you, " + userName);
example: index.html
<!DOCTYPE html>
<html>
<head>
<title>Script Demo</title>
</head>
<body>
<h1>Including JS Files</h1>
<script src="script.js"></script>
</body>
</html>
93 | P a g e
JavaScript Basics: Control Flow
Boolean Logic
- True, False
• Everything starts with the idea that a statement is either true or false
• Then we can combine those initial statements to create more complex statements that also evaluate to true or false
Comparison Operators
Assuming x = 5
Operator Name Example Result

> Greater than X > 10 False
>= Greater than or equal to X >= 5 True
< Less than X < -50 False
<= Less than or equal to X <= 100 True
== Equal to X == “5” True
!= Not equal to X != “b” True
=== Equal value and type X === “5” False
!== Not equal value and type X !== “5” True
94 | P a g e
Note about logical operator’s lecture
Hi Everyone!
In the next lecture, Colt has a couple of examples that use an empty string, or two quotes with nothing between them: "".
However, the slides make it look like there might be a space between the quotes (which would not be an empty string). You'll
see why this distinction is crucial as you view the video, but for now just remember that if you see two quotes: "", that it is, in
fact, an empty string.
-------
Thanks,
Ian Learn more
Logical Operators
• At the end of the day, this turns out to be true or false

• And requires for both sides to be true, so the entire statement is false
• Or requires for one side to be true
• Not works a little bit different if something is true, it becomes false and vice versa.
95 | P a g e
Exercise 1:
An explanation for the examples
• This is an OR statement one side is true, so the whole expression to be true.
Exercise 2:
• The important thing to notice is that we have 2 sections
and, in every section, we have different logic if we can
see that the logic connecting both sides is an AND logic
that means both sides need to be true in order to be
true
• In the first section, we have an OR (Reading Left to
Right)
Which means one side needs to be true and we know x == 3 that’s true, so we get true however in front of the
brackets we have a NOT logic that means if the sections are true, it becomes false.
Now we can tell that the whole is false because in an AND logic we need both sides to be true we get false on the first
section, and we can tell that the whole expression to be false.
96 | P a g e
Exercise 3
• As we can see the str is false and msg is true we have an OR Logic, we get true
• IsFunny is a string false not the value that means it’s true
• We have AND LOGIC true && true = true
• However, we have a NOT logic at the start of the brackets that negates the statement and makes it FALSE
97 | P a g e
JS Conditionals
Making decisions with code
If, else if, else
Verbal Example
98 | P a g e
IF
• The if keyword takes a single expression and it evaluates to be true or false

If it evaluates to be true whatever code, we provide it with gets executed inside the curly braces.
• In the example above a console.log is executed.
ELSE IF
• An else if follows an if statement, it is a secondary condition
ELSE
• Else is the last effort – you can say if anything else doesn’t satisfy conditions, this is the last option
Solution for exercise

1. // Get age and convert it to a Number (prompt always returns a String)
2. var age = Number(prompt("What is your age?"));
3.
4. // If age is negative
5. if(age < 0) {
6. console.log("Come back once you're out of the womb");
7. }
8.
9. // If age is 21
10. if(age === 21) {
11. console.log("Happy 21st Birthday!");
12. }
13.
14. // If age is odd
15. //(not evenly divisible by two)
16. if(age % 2 !== 0) {
17. console.log("Your age is odd!");
18. }
19.
20. // If age is a perfect square
21. if(age % Math.sqrt(age) === 0) {
22. console.log("Your age is a perfect square!");
23. }
99 | P a g e
Solution for exercise Guessing Game Code Along
// create secrect number
var secrectNumber = 4;
// ask user for guess
var stringGuess = prompt("Guess a number");
var guess = Number(stringGuess);
if(guess === secrectNumber)

{
// check guess if guess is right
alert("You got it right");
}
else if (guess > secrectNumber)
{
// check if higher
alert("Too high Guess Again");
}
else {
// check if lower
alert("Too low Guess Again");
}
• Explaining the logic, we are defining a variable as secrectNumber with a value of 4

• Then we are asking a user with a prompt to input a number since prompts are of the type strings
We then explicitly define it as Number with the Number() function
• Since we are using operators that check type and value, we need to do this for best practices
Note about Introduction to Loops lecture

Hi Everyone!
In the next lecture, there is a typo in the slides at 8 minutes and 9 seconds; the slides should say that an infinite loop occurs
when the terminating condition never returns false.
Meanwhile, be warned that if you write an infinite loop and run it, it could crash your browser and possibly even your
computer. Please watch the videos all the way through and don't execute or run any code prior to watching Colt do it. If you
do happen to run an infinite loop, then you'll need to force quit the browser application as quickly as possible.
Thanks,
Ian
Course TA
100 | P a g e
Loops
Objectives:
• Understand the purpose of loops

• Define “DRY” code
• Write simple while loops
101 | P a g e
While Loops
102 | P a g e
• In the example above we initialize our count with the value of 1
• And use a condition inside the while() count isless than 6
• And then we will add with an increment of the count
• Until count is 6 and the condition fails the logic and exits the loop
• What we can see that the loop can save us a lot of time
• The index starts at 0
• If we are not careful, the condition is always true and can go on forever
• This is problematic it can take up all the memory and crash the browser
103 | P a g e
Evaluate the code in your head
Iteration Result
1 3
2 5
3 7
4 9
5 11 *
• The result is Num is = 11

• The result is evaluated in the end
Iteration Result
4 4
8 8
12 12
16 16
20 20
• This will print all the

multiples of 4 up until 20
104 | P a g e
Examples of whileloop
console.log("PRINTING ALL NUMBERS BETWEEN -10 AND 19");
var counter = -10;
while(counter < 20){

console.log(counter);
counter++;
}
console.log("PRINTING ALL EVEN BETWEEN 10 AND 40");

var counter = 10;
while(counter <= 40){

counter+=2;
}
// while(counter <= 40){
// if(counter % 2 === 0){
// console.log(counter);
// }
// counter+=1;
// }
console.log("PRINTING ALL ODD NUMBERS BETWEEN 300 AND 333");

var counter = 300;

if(counter % 2 !== 0){
}
counter+=1;
}
console.log("PRINTING ALL NUMBERS DIVISIBLE BY 5 AND 3 BETWEEN 5 AND 50");

var counter = 5;

if(counter % 5 === 0 && counter % 3 === 0){
}
counter+=1;
}
• The commented version is a longer version and will require more resources
105 | P a g e
// var answer = prompt("are we there yet?");
// while(answer !== "yes" && answer !== "yeah") {

// var answer = prompt("are we there yet?");
// }
// alert("YAY, WE MADE IT!!!");
// if(answer === "yes") {

// alert("YAY, We made it!")
// } else {
// }
// VERSION 2
var answer = prompt("are we there yet?");
while(answer.indexOf("yes") === -1) {

var answer = prompt("are we there yet?");
}
alert("YAY, WE MADE IT!!!");
• We can see that the last version looks for yes in the string with the function indexOf(“YES”) === -1
• THE -1 MEANS THAT IT DOSNT EXIST
Note about Intro to For Loops lecture

Hi Everyone!
In the following lecture "Intro to For Loops" there is a typo in the slides around the 56-second mark. It should say count =
1instead of count = 0 since the loop is supposed to go from 1 - 5, not 0 - 5.
Thanks!
Ian
Course TA
106 | P a g e
For Loops
• Another type of loop
Objectives
• Understand the
purpose of for loops
• Write valid for loops
• Compare and
contrast while loops
and for loops
• What we understand from the code is as follows

• The var count is being initiated in the first section
▪ Then we have a condition for the loop to continue
if true then we have count ++ an increment to
increase the counter
▪ Btw the var count = 0; is a typo in the slides its =1
107 | P a g e
• With this loop we can print the letters it will go on with the str.length
Exercises for Loops
• The evaluation is 0 , 8
108 | P a g e
The Evaluation is h e l l o
• Note the index is 1, that means it starts from the second character.
• And ever iteration we add 2
Solutions for the Exercise
console.log("PRINTING ALL NUMBERS BETWEEN -10 AND 19");
for(var i = -10; i < 20; i++){

console.log(i)
}
console.log("PRINTING ALL EVEN BETWEEN 10 AND 40");
// for(var i = 11; i <= 40; i += 2){

// console.log(i);
// }
for(var i = 10; i <= 40; i += 1){

if(i % 2 === 0) {
console.log(i);
}
}
109 | P a g e
console.log("PRINTING ALL ODD NUMBERS BETWEEN 300 AND 333");
for(var i = 300; i <= 333; i++) {

if(i % 2 !== 0) {
console.log(i);
}
}
console.log("PRINTING ALL NUMBERS DIVISIBLE BY 5 AND 3 BETWEEN 5 AND 50");
for(var i = 5; i <= 50; i++){

if(i % 5 === 0 && i % 3 === 0) {
console.log(i);
}
}
110 | P a g e
JS Basics: Functions
• A Fundamental Building Block
Objectives
• Understand why we use functions

• Define a function without arguments
• Define a function with arguments
• Return a value from a function
• Functions are just re-usable bits of code

• Functions are a two-step process we need to define them first and then declare them for functions to work
111 | P a g e
• Difference between referring a function and executing the function
• In order to execute a function you use the functionName();
• To refer a function, you use the name only
112 | P a g e
Arguments
113 | P a g e
• Arguments orders dictate who is person1, person2, person 3
• If you miss an argument, it doesn't break your code. However, it outputs is as undefined.
• The ability of functions to take arguments is one of the not the most crucial feature in writing code.
The Return Keyword

• Often we want a function to send back an output value
114 | P a g e
115 | P a g e
Exercises
• The result is 30
116 | P a g e
• in the above example, the function exits on the first return, and the result is 80.
• Other two lines get skipped as we return it on the first time.
Function Problem Ses
//isEven
function isEven(num) {
if(num % 2 === 0) {
return true;
}
else {
return false;
}
}
//isEven shorter version

function isEvenS(num) {
return num %2 === 0;
}
• In the shorter version we know that it’s a boolien statement so it returns true or
false
117 | P a g e
// Factorial
function factorial(num) {
//define a result variable
var result = 1;
// calculate factorial and store value in result

for(var i = 2; i<= num; i++){
// longer version result = result * i;
result *= i;
}
// return the result variable
return result;
}
// kebabToSnake
function kebabToSnake(str){
//replace all '-' with "_"'s
var newStr = str.replace(/-/g, "_");
//return str
return newStr;
}
118 | P a g e
Intro to JS Scope
Explaination:
• The above we are trying to access x however we cannot access in that scope.
• If we define a variable outside a function, we can use it inside a function; however, the opposite is not true.
var y = 100;
function doMath (num) {

var y = 99;
console.log(y);
}
• In the example above inside y value is 99 however, outside the function y value is 100
We can see another example.

119 | P a g e
Scope Quiz
Explanation:
1) We are declaring 8
2) Then we have a function inside we have some logic. However, that
is not declared what happens it goes to the next section where we
increment num by 1, and then we declare the function, value of num is
now 9 after we declare the function we have another increment of num,
now the value of num is 10.
3) With the conditionals, we are checking if num is divisible with 5
and return true if condition matches
• The final result is true
Explanation:
* in this example functions hi and bye
• In the hi function, we have name declared
• In the bye, the section name is not declared
• When we execute the function hi, the output is Rusty, however,
after we execute the function we execute bye we get undefined
• We get undefined this is because the name is inaccessible for the
bye function because the name is inside the hi function the scope is
different
Higher-Order Functions
We can pass a function to other functions ??!
Explanation:
• We are defining a function sing and in a built-in function of
javascript we are passing the sing function
• Later on, we will learn more
120 | P a g e
JS Basics: Arrays
• Our first Data Structure
Objectives
• Understand arrays conceptually

• Write code using Js arrays
121 | P a g e
122 | P a g e
• A note regarding arrays if you insert for example an item to an array if you have 4 items in an array and you insert an
item at the index number 10
• You have added x6 undefined items inside the array.
123 | P a g e
Array Methods
Getting more out of arrays
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
Objective
Array comes with a few built-in methods that make our life easier. Were going to cover:
1) push/pop
2) shift/unshift
3) indexOf
4) slice
Push and Pop

Add and Remove to the end of an Array
124 | P a g e
Shift & Unshift
IndexOf
• if you and to know for example where David is located in the array it will return 2
• on Liz it will return the first instance of liz
• when the function returns -1 that means it is not located in the array.
125 | P a g e
Slice
Array Exercise
• The result is undefined because of the index 5 does not exist

• The numbers.length we are getting 5 items however indices start at n-1 (from 0)
126 | P a g e
• Nested array the result is row 2 col 0 which is Mooney (again count starts from index 0)
Code Along Todo Lists

var todos = [];
var input = prompt("what would you like to do");
while(input !== "quit") {

if(input === "list") {
console.log(todos);
} else if(input === "new"){
// Ask for new todo
var newTodo = prompt("Enter new Todo");
// add tp tpdps array
todos.push(newTodo);
}
// Ask for new input
var input = prompt("what would you like to do");
}
console.log("OK, You asked me to Quit the APP");
127 | P a g e
Array Iteration
Objectives:
• Use a for loop to iterate over an array
• Use forEach to iterate over an array
• Compare and contrast for loops and forEach
For Loop
forEach
128 | P a g e
for VS. forEach
Exercise:
The result is: 3, 6, 9
• This is exercise is to only confuse you the colors are not important.
• Notice the syntax of the forEach you can see the ); after the curly braces
• arrayName.forEach(function(someNameYouAssign){ code goes here });
129 | P a g e
Todo List Code Along Part: 2
// Assign array
var todos = [];
// ask for input
var input = prompt("What would you like to do?");
//while input is not equal to quit
while(input !== "quit")
{
//handle input
if(input === "list"){
listTodos();
} else if(input === "new"){
newTodos();
} else if(input === "delete"){
deleteTodos();
}
//ask again for new input

var input = prompt("What would you like to do?");
}
console.log("OK, YOU QUIT THE APP");
//define the functions for the actions for the todo app
function listTodos() {
console.log("************");
todos.forEach(function(todos, i){
console.log(i + ":" + todos);
});
console.log("************");
}
function newTodos() {
//ask for a new todo
var newTodo = prompt("Enter a new todo");
//add to todos array
todos.push(newTodo);
}
function deleteTodos() {
//ask for index of todo to be deleted
var index = prompt("Enter index of todo to delete");
//delete that to do
todos.splice(index, 1);
}
• Splice reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

• forEach reference : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
• push reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
130 | P a g e
Arrays Problem Set
printReverse()
/*
define a function
printReverse()
use a for loop to output the reverse order of the array

set i @ length - 1 for index then i less than or equal to 0 decrement i
then output the array with an index of i
*/
function printReverse(numbers) {
for(var i = numbers.length - 1; i >= 0; i--) {
console.log(numbers[i]);
}
}
131 | P a g e
isUniform()
/*
define a function
isUniform()
this for loop checks the first array item and loops
throughout the array and returns false if any item
dosn't meet the requirements
if all goes weell outside the loop there is an return true statement
if its not false it has to be true
forEach is not a good way to to do this what will happen is that it will
get to the first item it will exit the function and then run the next line that is
return true;
we dont want that
*/
function isUniform(numbers) {
var firstIndex = numbers[0];

for(var i = 1; i < numbers.length; i++){
if(numbers[i] !== firstIndex){
return false;
}
}
return true;
}
132 | P a g e
sumArray()
/*
define a function
sumArray()
set total as holding var for the sum that starts at 0
the array will go through the forEach Loop and add the numnbers (elements)
*/
function sumArray(arr) {
var total = 0;
arr.forEach(function(element){
total += element;
});
return total;
}
133 | P a g e
max()
/*
define a function max()
it returns the max number form an array
we will use a for loop we colud use also forEach
this function will loop throug and compare the first element and assign it to max
if the condition meets that an element in the arry is greater then the first element
it will assign a new max for the varable max
*/
function max(arr){
var max = arr[0];
for(var i = 1; i< arr.length; i++){
if(arr[i] > max){
max = arr[i];
}
}
return max;
}
134 | P a g e
JavaScript Basics: Objects
Another Data Structure
Objective
• Understand objects conceptually

• Write code using JS objects
Store Data
135 | P a g e
Retrieving Data
You have two choices: bracket and dot notation
var person = {
name: "Shomron",
age: 28,
city: "Kiryat Ekron"
};
//bracket noation, similar to arrays:

console.log(person["name"]);
//dot notation
console.log(person.name);
136 | P a g e
Updating Data
Creating Objects
137 | P a g e
Comparing Objects and Arrays
• Both arrays and objects use key-value pairs, but arrays are special subsets of key-value pairs
Where the keys are always numbers and are always in order, wherein objects the key can be anything.
138 | P a g e
Nested Objects and Arrays
var posts = [
{
title: "Learning JS",
author: "Shomron",
comments: ["This is great","very bad "]
},
{
title: "Algo Trade",
author: "David",
comments: ["well robots","good post"]
}
];
• In the console, when we use nested items, we have returned with an index of the post, and for comments, we have
an index too for the above example we used the first index 0.
139 | P a g e
Objects Quiz
Exercise 1
• The last someObject.123 is not valid because we cannot use dot notation if a property starts with a number.
• Using an underscore _ is not a good idea, but it’s still valid.
Excerise 2
Answer: someObject.friends[0].name;
140 | P a g e
MovieDB Excercise
• forEach Method you can do a for loop also
var movies = [{
title: "Avengers",
hasWatched: true,
rating: 4.5
},
{
title: "End Game",
hasWatched: false,
rating: 5
}
];
movies.forEach(function (movie) {
var result = "You have ";
if (movie.hasWatched) {
result += "watched ";
} else {
result += "not seen "
}
result += "\"" + movie.title + "\" - ";
result += movie.rating + " stars";
console.log(result);
});
141 | P a g e
JS Methods
142 | P a g e
Intro to the DOM
• Finally, JS meets HTML + CSS
Objectives
• Define what the DOM is

• Understand why DOM Manipulation is awesome
• List a few examples of sites that use JS to manipulate the DOM
• Understand the SELECT, then MANIPULATE workflow
Why Should You Care?
A few examples
• Games
• Scrolling Effects
• Dropdown Menus
• Form Validation
• Interactivity
• Animations
• Every Awesome site ever
The DOM
Document Object Model
• The Document Object Model is the interface between your JavaScript and HTML+CSS
console.dir(document);
• this will print out the entire document object in an object syntax.
143 | P a g e
Select and Manipulate
144 | P a g e
145 | P a g e
DOM Selectors
Methods
The document comes with a bunch of methods for selecting elements. We're going to learn about the following 5:
• document.getElementById()
• document.getElementsByClassName()
• document.getElementsByTagName()
• document.querySelector()
• document.querySelectorAll()
146 | P a g e
147 | P a g e
148 | P a g e
• querySelector selects the very first match
• we get objects that are constructed with from the html
149 | P a g e
Selector Exercise
150 | P a g e
DOM Manipulation
151 | P a g e
152 | P a g e
• With the above example we can turn on and off CSS
• textContent is a bit dangerous because it will erase the HTML – it treats it as a string
153 | P a g e
• this function will maintain the html
154 | P a g e
DOM Events
• Making things Interactive
155 | P a g e
156 | P a g e
Exercise: Color Changer
• Please note that there are changes made in the new browser there will be page at the bottom with a solution for
latest code:
• The old code is commented out – latest html and JS files
Solution:
<!DOCTYPE html>
<html>
<head>
<title>Color Toggle</title>
<style type="text/css">
.purple {
background: purple;
}
</style>
</head>
<body>
<button>CLICK ME</button>
<script type="text/javascript" src="toggle.js"></script>

</body>
</html>
157 | P a g e
var button = document.querySelector("button");
// var isPurple = false;
// button.addEventListener("click", function(){
// if(isPurple){
// document.body.style.background = "white";
// } else {
// document.body.style.background = "purple";
// }
// isPurple = !isPurple;
// });
button.addEventListener("click", function(){
document.body.classList.toggle("purple");
});
• Please note the following section is a wrap-up using a project for DOM Events, in the videos what colt shows us is
working however, some changes have been done in the chrome browser you can refer them in the lecture notes on
the Udemy, or look up the internet as we know from the starting of the videos when we first started with this course
that we need to look up things, that have been changed and not learn in a linear way.
• We will start with the scorekeeper and I will try to explain the code in sections, make sure you watch the video that
colt shows regarding this solution he emphasizes regarding certain things we learned like using the keyword: this.
Score Keeper
HTML
<!DOCTYPE html>
<html>
<head>
<title>Score Keeper</title>
<link rel="stylesheet" type="text/css" href="scorekeeper.css">
</head>
<body>
<h1><span id="p1Display">0</span> to <span id="p2Display">0</span></h1>
<p>Playing to: <span>5</span></p>
<input type="number">
<button id="p1">Player One</button>
<button id="p2">Player Two</button>
<button id="reset">Reset</button>
<script type="text/javascript" src="scorekeeper.js"></script>

</body>
</html>
158 | P a g e
scorekeeper.css
.winner {
color: green;
}
scorekeeper.js
var p1Button = document.querySelector("#p1");

var resetButton = document.querySelector("#reset");
var p1Display = document.querySelector("#p1Display");
var numInput = document.querySelector("input");
var winningScoreDisplay = document.querySelector("p span");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = 5;
p1Button.addEventListener("click", function () {
if (!gameOver) {
p1Score++;
if (p1Score === winningScore) {
p1Display.classList.add("winner");
gameOver = true;
}
p1Display.textContent = p1Score;
}
});
if (!gameOver) {
p2Score++;
gameOver = true;
}
}
});
resetButton.addEventListener("click", function () {
reset();
});
numInput.addEventListener("change", function(){
winningScoreDisplay.textContent = this.value;
winningScore = Number(this.value);
159 | P a g e
reset();
});
function reset(){
p1Score = 0;
p2Score = 0;
gameOver = false;
p1Display.textContent = 0;
p1Display.classList.remove("winner");
}
Regarding the following the querySelector are self-explanatory

var numInput = document.querySelector("input");
• what we are doing is selecting them in our document of html mostly by using the # to select the IDS
• the numInput we have not specified regarding which input we are targeting since we have only one input inside the
html document
var winningScoreDisplay = document.querySelector("p span");
var p1Score = 0;
var p2Score = 0;
var gameOver = false;
var winningScore = 5;
• the winningScoreDisplay is targeting the p tag and the span inside the p tag to be specific where we want to change
the value that’s why we write it with an p (space) span that will select the span inside the p tag
• the p1Score & p2Score are placeholders for the score and are initialized at 0
• the gameOver var is false because as we load the page the game is not over hence the false
• winningScore on default will be 5 but in the logic, we have added it can be edited form the numInput section.
in the p1Button and p2Button we are using simple logic and handling the logic with nested if statements
in simple words if game is not over increment the player score that is pressed inside that if the score is winningScore we will
set gameOver to true and add a class to the span with the relevant id that was defined in the html with a class of winner that
we set inside the css with the color property of green

160 | P a g e
if the nested if is not in the programming flow then we will update the textContent of the relevant p1Display or p2Display
which ever event listener is been targeted with the relative button this will update the score. If the winning score is reached it
will stop incrementing.
if (!gameOver) {
p1Score++;
gameOver = true;
}
}
});
if (!gameOver) {
p2Score++;
gameOver = true;
}
}
});
For the rest we have refactored the code that when the addEventListner for the button reset is clicked it will run the function
of reset that we have defined
function reset(){
p1Score = 0;
p2Score = 0;
gameOver = false;
}
reset();
});
Because we want to trigger the rest when we change the winningScore there is a different event we are listening to that is
as it is if we change the value it will trigger the change of the Score
161 | P a g e
winningScoreDisplay.textContent = this.value;
winningScore = Number(this.value);
reset();
});
Since numInput.Value that is noted with the this.value is retrieved as an string we will use the Number() function to convert it
for the if logic to work because we are using triple = signs to check the condition we are looking for the value and type hence
the function is an integral part for the logic to work.
After we set the score display value and once this is changed the reset function is triggered
162 | P a g e
RGB Color Picker Game
This Project we have refactored the code after working and used better coding structure.
• We have most of our logic segmented in functions and used an initialize function to load the game
• Used html and css to have a better interface with buttons and used cross browser functionality using prefixes as
follows –webkit & -moz
JavaScript Structure
var numSquares = 9;
var colors = [];
var pickedColor;
var squares = document.querySelectorAll(".square");

var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.querySelector("h1");
var modeButtons = document.querySelectorAll(".mode");
init();
function init() {
setUpModeListners();
setupSquares();
reset();
function setUpModeListners() {
for (var i = 0; i < modeButtons.length; i++) {
//mode buttons event listners
modeButtons[i].addEventListener("click", function () {
modeButtons[0].classList.remove("selected");
modeButtons[1].classList.remove("selected");
this.classList.add("selected");
this.textContent === "Easy" ? numSquares = 6 : numSquares = 9;
reset();
})
}
}
function setupSquares() {
for (var i = 0; i < squares.length; i++) {
163 | P a g e
// add click listeners
squares[i].addEventListener("click", function () {
// grab color of clicked square
var clickedColor = this.style.backgroundColor;
// compare color to pickedColor
if (clickedColor === pickedColor) {
messageDisplay.textContent = "Correct!";
resetButton.textContent = "Play Again?";
changeColors(clickedColor);
h1.style.backgroundColor = clickedColor;
} else {
this.style.backgroundColor = "#232323";
messageDisplay.textContent = "Try Again";
}
});
}
}
function reset() {
// generate all new colors

colors = generateRandomColors(numSquares);
// pick a new random color form array

pickedColor = pickColor();
// change color display to match picked color
colorDisplay.textContent = pickedColor;
resetButton.textContent = "New Colors";
messageDisplay.textContent = "";
// change colors of squares
for (var i = 0; i < squares.length; i++) {
if (colors[i]) {
squares[i].style.display = "block";
squares[i].style.backgroundColor = colors[i];
} else {
squares[i].style.display = "none";
}
}
h1.style.backgroundColor = "steelblue";
reset();
})
function changeColors(color) {
164 | P a g e
// loop through all squares to match given color
for (var i = 0; i < colors.length; i++) {

//change each color
squares[i].style.backgroundColor = color;
}
}
function pickColor() {
var random = Math.floor(Math.random() * colors.length);
return colors[random];
}
function generateRandomColors(num) {
// make an array
var arr = [];
// repeat num times
for (var i = 0; i < num; i++) {
// get random color puch into array
arr.push(randomColor());
}
// return the array
return arr;
}
function randomColor() {
// pick a red for 0- 255
var r = Math.floor(Math.random() * 256);
// pick green from 0 - 255
var g = Math.floor(Math.random() * 256);
// pick blue from 0- 255
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
HTML Structure
<!DOCTYPE html>
<head>
<title>Color Game</title>
<link rel="stylesheet" href="colorGame.css">
</head>
<body>
<h1>The Great
<br>
<span id="colorDisplay">RGB</span>
<br>
Color Game</h1>
165 | P a g e
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
<button class="mode">Easy</button>
<button class="mode selected">Hard</button>
</div>
<div id="container">
<div class="square"></div>
</div>
<script type="text/javascript" src="colorGame.js"></script>

</body>
</html>
CSS Structure
body {
background-color: #232323;
margin: 0;
font-family: "Montserrat", "Avenir";
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
border-radius: 14.1%;
transition: background 0.6s;
--webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
}
#container {
max-width: 600PX;
margin: 20px auto;
}
h1 {
color: #ffffff;
text-align: center;
background: steelblue;
margin: 0;
166 | P a g e
font-weight: normal;
line-height: 1.1;
padding: 20px 0;
}
#colorDisplay{
font-size: 200%;
}
#message
{
display: inline-block;
width: 20%;
}
#stripe {
color: #000000;
background: #ffffff;
height: 30px;
text-align: center;
}
.selected {
color: #ffffff;
}
button {
border: none;
background: none;
height: 100%;
font-weight: 700;
color: steelblue;
letter-spacing: 1px;
font-size: inherit;
transition: all 0.3s;
--webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
outline: none;
}
button:hover {
color: #ffffff;
}
167 | P a g e
jQuery
jQuery is a JavaScript Library that helps us do things faster (jQuery is a single file that someone else wrote that we can use)
youmightnotneedjquery.com
• jQuery and its cousins are great, and by all means, use them if it makes it easier to develop your application.
• If you're developing a library, on the other hand, please take a moment to consider if you actually need jQuery as a
dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting
more modern browsers, you might not need anything more than what the browser ships with.
• At the very least, make sure you know what jQuery is doing for you, and what it's not. Some developers believe that
jQuery is protecting us from a great demon of browser incompatibility when, in truth, post-IE8, browsers are pretty
easy to deal with on their own.
168 | P a g e
Adding jQuery
Quick Preview
169 | P a g e
Note about jQuery
Hi Everyone!
In the next few lectures, as you're learning about jQuery, Colt's output in the console will
look a little bit different than yours.
Your output will look different because chrome is showing you a jQuery object, not the
HTML element that you selected.
In order to view the element you must access it via $('h1')[0];
But, everything else Colt demonstrates will remain the same, e.g., $('h1').css('color',
'yellow')
You can read more about this here, including how to iterate over a collection of elements
and log them to the console.
Additionally, please be sure to use the .min version of jQuery in your projects, not the
.slim version as it doesn't include all of jQuery's features which are necessary for
upcoming exercises/lectures.
Thanks,
Ian
Selecting with jQuery
170 | P a g e
• In jQuery you can pass multiple in key-value pairs, and they will apply.
• In JavaScript to write CSS properties we use camel case instead of the hyphen for example
Background-color: pink; we will write backgroundColor : “pink”
Exercise
Use the following starter HTML
171 | P a g e
Answers:
1) We will use the CDN version and include it in the head tags
2) // select all the divs and change background to purple
3) $("div").css("background", "purple");
4) // select divs with the highlight class and make them 200px width
5) $("div.highlight").css("width", "200px");
6) // select div with the id of third and give it an orange border
7) $("div#third").css("border", "2px solid orange");
8) // select the first div and change text color to pink
9) $("div:first-of-type").css("color", "pink");
Common jQuery Methods

Documentation: https://api.jquery.com/
• Most of the example you can view in the jQuery API Documentation
• The above a mostly what we have learned in the DOM manipulation how ever that is Vanilla JavaScript (Plain
JavaScript)
172 | P a g e
jQuery Final Project
HTML
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
<link rel="stylesheet" type="text/css" href="assets/css/todos.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet'
type='text/css'>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script type="text/javascript" src="assets/js/lib/jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="container">
<h1>To-Do List <span id="toggle-form"><i class="fa fa-plus"></i></span></h1>
<input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go To Potions Class</li>
<li><span><i class="fa fa-trash"></i></span> Buy New Robes</li>
<li><span><i class="fa fa-trash"></i></span> Visit Hagrid</li>
</ul>
</div>
<script type="text/javascript" src="assets/js/todos.js"></script>

</body>
</html>
CSS
body {
font-family: Roboto;
background: -webkit-linear-
gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* IE10 */
background: -o-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%); /* W3C */
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1 {
173 | P a g e
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
font-size: 24px;
font-weight: normal;
}
.fa-plus {
float: right;
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #666;
}
li:nth-child(2n){
background: #f7f7f7;
}
li span {
background: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0;
}
li:hover span {
width: 40px;
opacity: 1.0;
}
input {
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
174 | P a g e
border: 3px solid rgba(0,0,0,0);
}
input:focus{
background: #fff;
border: 3px solid #2980b9;
outline: none;
}
#container {
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0,0,0, 0.1);
}
.completed {
color: gray;
}
JavaScript
// Check Off Specific Todos By Clicking
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
//Click on X to delete Todo

$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13){
//grabbing new todo text from input
var todoText = $(this).val();
$(this).val("");
//create a new li and add to ul
$("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>")
}
});
$("#toggle-form").click(function(){
$("input[type='text']").fadeToggle();
});
175 | P a g e
Extra Resources - The Web Developer Bootcamp Outline
(Revised: May 29, 2018) By: Bronson Avila
FRONTEND
• HTML
o Document (individual elements combined to form an entire HTML page)
▪ Doctype: <!DOCTYPE html>
• Required as the first line of an HTML document (historical artifact).
▪ Root Element: <html>
• Follows the "doctype" and wraps around all content on the entire page.
▪ Head Element: <head>
• Container for things that do not appear as viewable content (e.g., keywords and descriptions
that will appear in search results, CSS, character set declarations, etc.).
▪ Character Set: <meta charset="UTF-8">
• Allows document to use "utf-8" character set, which includes most characters from all
known human languages (nests within head element).
▪ Title: <title>
• Sets the title that appears in browser tab (nests within head element).
• Also appears as the search result in Google.
▪ Body: <body>
• Contains all of the content that will be shown to the viewer.
o Elements (content + opening/closing tags)
▪ Block Elements form a visible block on a page (e.g., paragraphs, lists, navigation menus, footers,
etc.):
• Paragraph: <p>
• Divider: <hr>
• Headings: <h1> through <h6>
o NOTE: As a general rule, try to have only one <h1> tag in your HTML document, and
it should be the biggest text element on the page.
• Generic Container: <div>
• Lists (each item within a type of list needs to be identified by the "<li>" tag):
o Ordered Lists (lists that are numbered): <ol>
o Unordered Lists (lists composed of bullet points: <ul>
• Tables: <table>
o Table Row: <tr>
o Table Header (consists of one cell within a row): <th>
▪ Should be nested within <thead> under main table (semantics).
o Table Data (consists of one cell within a row): <td>
▪ Should be nested within <tbody> under main table (semantics).
o Borders can be added by entering <table border="1">, although this is discouraged,
as CSS should be used for styling.
• Forms (interactive controls to submit information to a web server): <form>
o Typically contain the "action" (the URL to send form data to) and "method" (the
type of HTTP request, such as "GET" to receive information from the server and
"POST" to add information to the serve) attributes, e.g.:
<form action="/my-form-submitting-page" method="POST">
o Input (used to accept data from the user): <input>
176 | P a g e
▪ The operation of <input> depends upon its type attribute. For a complete
list of attributes, view Form Input Types. Examples:
• Text (can be used for user names): type="text"
• Password: type="password"
• Placeholder (temporary text in input fields; used with "text" and
"password" attributes): placeholder="insert-text-here"
• Button: type="button" value="insert-text-here"
o Simple Submit button: type="submit"
▪ Alternatively, if placed at the end of a form, use
the following to create an even simpler submit
button:
<button>insert-text-here</button>
• Checkbox (square box for multiple choices): type="checkbox"
o To have the checkbox already marked upon loading, add
the attribute "checked" to the input.
• Radio Button (circular icon for one choice): type="radio"
o In order to make the user only able to select one choice,
you must add the "name" attribute, which must be
common among all choices.
o The "value" attribute is necessary for the query string to
understand the meaning behind each choice; otherwise, it
will simply state "name=on".
o Example:
<label for="cats">Cats:</label>
<input name="pet-choice" id="cats" type="radio"
value="CATS">
<label for="dogs">Dogs:</label>
<input name="pet-choice" id="dogs" type="radio"
value="DOGS">
o Dropdown Menus: <select>
▪ For every possible option to select, use an <option> tag.
▪ In order for the query string to understand that an option has been
selected from the dropdown menu, the "name" attribute must be included
in the <select> tag, e.g.:
<select name="color">
<option>White</option>
<option>Black</option>
</select>
▪ If you want the query string to contain text other than "White" or "Black" in
the example above, use the "value" attribute in the <option> tag, e.g.:
<option value="happy">☺</option>
o Text Areas (multi-line plain-text editing control): <textarea>
▪ You can specify how large the text area is by using the "rows" and "cols"
attributes.
▪ In order for the query string to process the data in the text area, you must
use the "name" attribute.
▪ Example:
<textarea name="paragraph" rows="10" cols="50"></textarea>
o Labels (add captions for individual items in a form): <label>
▪ A label can be used by placing the control element inside the <label>
element, or by using the "for" and "id" attributes:
• For example,
<label>Username<input type="text"></label>
177 | P a g e
…is identical to:
<input id="username" type="text">
o Validations ensure that users fill out forms in the correct format, e.g.:
▪ The Boolean attribute "required" makes a field mandatory:
<label>Username<input type="text" required></label>
• Only works if the browser (like Chrome) allows it.
▪ By changing type from "text" to "email", the browser will ensure that the
field contains an @ symbol.
▪ Inline Elements are contained within block level elements and do not cause new lines to appear:
• Italics: <em>
• Bold: <strong>
• Generic Container: <span>
▪ BUT NOTE: Empty Elements contain only a single tag:
• Image: <img src="https://www.google.com/logo.png">
o NOTE: Image width can be modified like so…
<img width="50" src="https://www.google.com/logo.png">
…but is discouraged, as styling should be done by CSS.
• Input: <input type="text">
▪ For a complete list of elements, view the MDN Element Reference.
▪ TIP: In Sublime, press "Ctrl+Shift+D" to replicate an entire line of an element.
o Attributes (extra info; does not appear in content; target of style info)
▪ Components:
• Space between it and the element name (or prior attribute),
• Attribute name followed by an equals sign, and
• Attribute value surrounded by quotation marks.
o Double or single quotes may be used, but must be done consistently. You can nest
a single quote within a double quote (and vice versa), but if you want to nest the
same type of quote, you must use HTML Entities (e.g., " or ').
▪ Examples:
• Class: <p class="editor-note">content</p>
• Can be paired with the "anchor" element: <a>
o Hyperlink with Title:
<a href="https://www.google.com/" title="Google">content</a>
▪ BUT NOTE: Boolean Attributes can be written without a value, but technically always have only one
value (generally the same as the attribute name:
• Disabled: <input type="text" disabled="disabled">
o Creates a text box in which typing is disabled.
o May also be written as:
<input type="text" disabled>
▪ For a complete list of attributes, view the MDN Attribute Reference.
o Entity References (make special HTML syntax characters appear as normal text):
▪ < = <
▪ > = >
▪ " = "
▪ ' = '
▪ & = &
o HTML Comments (write comments in the code that are invisible to the user by wrapping them in special
markers):
▪ 
▪ TIP: In Sublime, you can (1) select text, and (2) hold "Ctrl+/" to turn text into comment.
• CSS
178 | P a g e
o The General Rule
selector {
property: value;
anotherProperty: value;
▪ For example, make all <h1> tags purple with 56-pixel font:
h1 {
color: purple;
font-size: 56px;
}
▪ Three Basic Selectors
• Element selectors select all instances of a given element. For example, "div" is a CSS
element selector that will modify the properties of all <div> HTML tags.
• The ID selector selects a single element with an octothorp ("#") ID (only one per page). For
example, the following HTML/CSS combination will result in the word "hello" appearing in
yellow, while the word "goodbye" will remain as is:
<div>
<p id="special">hello</p>
</div>
<div>
<p>goodbye</p>
</div>
#special {
color: yellow;
}
• The Class selector selects all elements in a given class by functioning just like an ID selector;
however, a class is instead prefaced with a period ("."). For example, the following items
marked as "completed" on a "To Do List" will be crossed out with a line:
<div>
<p class="completed">TASK #1</p>
</div>
<div>
<p class="completed">TASK #2</p>
</div>
.completed {
}
o An element can be modified by multiple class or ID tags by simply adding a space
between the two tag names, e.g.:
<p class="completed uncompleted">Text</p>
▪ Five More Advanced Selectors
• The Star (*) selector applies to every element on the page.
• The Descendant selector applies to selectors that have been "nested" under another. For
example, if you want to modify the color of only those <a> tags that are nested within the
<li> tags of a <ul> list, use the following:
ul li a {
color: red;
}
o In addition to HTML tags, CSS selectors such as "ID" or "Class" may be used within a
Descendant selector.
179 | P a g e
o HOWEVER: If, for example, you have a second-tier <ul> nested within a first-tier
<ul> that is nested within <div id="box">, and you only want to select the first-tier
<ul> and not the second-tier, then you must use the ">" combinator to select only
the DIRECT first-tier "child" <ul> (rather than the second-tier "grandchild" <ul>) of
<div id="box">:
#box > ul {
color: red;
}
• The Adjacent (+) selector will select only the element that comes IMMEDIATELY after
another element (a "sibling" element, rather than a "nested" element). For example, to
modify the font size of all <ul> tags that follow an <h4> tag (which are typed on the same
"level" as the <ul> tags, and not nested under them), use the following:
h4 + ul {
font-size: 24px;
}
o If, in the above example, you want to select ALL <ul> tags after any <h4> tag, then
use the more generalized sibling combinator of "~" instead of "+".
• The Attribute selector will allow the selection of any element based off of any attribute. For
example, to change the font family of all <a> tags that link to Google, use the following:
a[href="https://www.google.com/"] {
font-family: cursive;
}
o This selector an also be used to select all images of a particular source, or all inputs
of a particular type, such as all checkboxes:
input[type="checkbox"] {
border: 2px solid green;
}
o TIP: See the complete list of Attribute Selectors.
• The Nth-of-Type selector takes a specific number and selects the "-nth" instance of an
element. For example, to change the background color of every second <li> tag in every list
(literally meaning the second tag, not every other tag), use the following:
li:nth-of-type(2) {
background-color: rgba(100, 175, 225, 0.5);
}
o NOTE: To select every other tag, use the phrases (even) or (odd) instead of a specific
number.
▪ For more advanced selectors, view The 30 CSS Selectors You Must Memorize.
o CSS Location
▪ CSS should generally be saved to its own file, but can also be included in the HTML head by using the
<style> tag:
<style type="text/css">
li {
color: red;
}
</style>
▪ The preferred method is to use a <link> tag in the HTML head to refer to the separate file containing
CSS:
<link rel="stylesheet" type="text/css" href="directory/filename.css">
o Specificity is the means by which browsers decide which CSS property values are the most relevant to an
element and, therefore, will be applied (e.g., if the body is styled to have red text, but a paragraph within the
body is styled to have green text, then the text will be green because the green text style is more relevant to
the specific paragraph than the general body).
▪ The following list of selector types increases by specificity (in magnitudes of 10):
180 | P a g e
1. Type selectors (e.g., li) and pseudo-element (e.g., :before)
2. Class selectors (e.g., .hello), attributes selectors (e.g., [type="text"]) and pseudo-classes
(e.g., :hover)
3. ID selectors (e.g., #hello)
▪ This Specificity Calculator may be used to test CSS specificity rules.
o The Box Model
▪ In a document, each element is represented as a rectangular box. In CSS, each of these boxes is
described using the standard "box model." Each box has four edges: (1) Content Edge, (2) Padding
Edge, (3) Border Edge, and (4) Margin Edge. Padding is the space between the border and the
element within the border, and the margin is the space between the border and everything outside
of the border.
• The content edge can be controlled by setting the "width" and "height" properties in "px" or
"%" (with percentage in relation to the parent element), which in turn pushes out the border
edge as well, as there is direct contact between the content and border (if no padding has
yet been set).
o NOTE: By using the "max-width" property in conjunction with "width", you can tell
the browser to make an element's width a certain percentage, but then also cap
that width to a maximum number of pixels, e.g.:
#container {
width: 66.66%;
max-width: 700px;
}
• Space can be added between the content edge and border edge (and between the border
edge and the next element's edge) by using the "padding" and "margin" properties
respectively (in "px" or "%").
o By default, padding and borders are set to go around all edges of an element, but
can be limited by using more specific properties for top, right, bottom, and left—
such as "padding-left" or "margin-top".
o Alternatively, rather than typing a line of CSS for all four sides, the following
shorthand can be used (with the first value setting the top property, and the
remainder moving in a clockwise fashion):
p{
margin: 20px 40px 60px 80px;
}
• NOTE: By setting the "margin" property to "auto" on the left and right, an element will
automatically be horizontally centered:
p{
margin: 0 auto 0 auto;
}
o The above syntax can also be shorted as (with the first value representing the
vertical axis, and the second value representing the horizontal axis):
p{
margin: 0 auto;
}
o Colors
▪ Colors can be created through the Hexadecimal system by combining the octothorp (#) with a string
of 6 hexadecimal "numbers" from 0-F, e.g.:
color: #FF1493;
• This system follows an RGB scheme in which the first two numbers modify the amount of
"red," the second two modify "green," and the last two modify "blue."
▪ Alternatively, colors can be created through the RGB system: 3 channels consisting of red, green, and
blue, with each ranging from 0-255, e.g.:
color: rgb(0, 255, 0);
181 | P a g e
▪ Colors can be made Transparent through the RGBA system. Just like RGB but with an alpha
(transparency) channel ranging from 0.0-1.0, e.g.:
color: rgba(11, 99, 150, .6);
o Backgrounds
▪ Follows the same format as colors, e.g., background: #FF6789;
▪ The background property can also set a background image, e.g.:
body {
background: url(http://www.website.com/image.png);
}
• To prevent the background from Repeating an image, add the following property:
background-repeat: no-repeat;
• To allow the background image to Stretch out across the entire body, use:
background-size: cover;
o Borders
▪ Borders have three key properties: "width" (typically in pixels), "color" (as noted above), and "style"
(generally solid, dotted, or dashed). All three properties must be present in order for a border to
take effect, e.g.:
h1 {
border-width: 5px;
border-color: purple;
}
▪ The alternative shorthand syntax may also be used (in the specified order):
border: 5px solid purple;
o Fonts
▪ Font-Family specifies the font for an element:
p{
font-family: Arial;
}
• While not always necessary, you may sometimes have to put quotation marks around the
font name—particularly when the font name begins with a number.
• CSS Font Stack shows what percentages of operating systems have a given system font
(useful for choosing a safe bet on system compatibility).
o However, rather than using those limited fonts, it is better to use Google Fonts,
choose a font, and embed the font's stylesheet link in your HTML <head> prior to
the CSS link, e.g.:
<link href="https://fonts.googleapis.com/css?family=Esteban" rel="stylesheet">
▪ Font-Size specifies how big the font appears (typically in pixels or "px"):
h1 {
font-size: 25px;
}
• Another size unit is "em", which dynamically sets font size in relation to a parent element.
For example, if you want to make a section of a paragraph's text in <span> tags be twice the
size of the rest of the text in the <p> tags, you would say:
span {
font-size: 2em;
}
o BUT NOTE: What constitutes the "standard" 1em (i.e., the default font size on a
page without CSS markup) varies from browser to browser, although the size is
typically around 16 PIXELS. To ensure uniformity among browsers, it is useful to set
the body's font size at the outset.
182 | P a g e
o ALSO: Similar to "em" is "rem", which—rather than setting font size in relation to
the parent element—sets the font size in relation to the "root" element on the page
(i.e., the default font size discussed above).
▪ Font-Weight specifies how thick or thin the font appears.
• Typically involves absolute values of "normal" or "bold", or relative (to parent) values of
"lighter" and "bolder", but can also be assigned a numeric value in increments of 100
generally from "100" to "800" depending on the font itself.
▪ Line-Height controls the height of a given line (similar to changing line spacing in Word to 1.5 or 2.0,
which means that a larger font will result in larger spacing).
▪ Text-Align controls where an element's text is aligned on the page (typically "left", "right", and
"center").
▪ Text-Decoration is used to give text effects such as "underline", "overline", or "line-through".
o Float
▪ Normally, block level elements (such as <div>) are stacked directly underneath the preceding
element on the page. To change this, use the "float" property and specify a value of the direction in
which the element should float ("left", "right", "none").
▪ When an element is floated, it is taken out of the normal flow of the document (though still
remaining part of it), and it is shifted to the left or right until it touches the edge of its containing
box, or another floated element.
▪ When <img> tags are laid out in a consecutive sequence, HTML automatically places some small
amount of white space between the images. If you want to remove the white space, you can use
"float" to remove that white space.
• Bootstrap (v.3)
o About
▪ Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first
projects.
▪ To incorporate Bootstrap's CSS into your project, you can do either one of the following:
(1) Download the bootstrap.css file, placing it into your project directory, and creating a <link>
to the bootstrap.css file; or
(2) Paste the following <link> to the bootstrap.css file, which is hosted online:
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
▪ NOTE: The semantics in Bootstrap have been criticized as being sometimes meaningless, and
another contender for performing these tasks is Semantic UI. However, Bootstrap is more popular
and widely accessible through tutorials.
o Important Pieces
▪ Buttons require that they be identified first by a "btn" class followed by a second specific class.
• There are seven specific classes:
o Default (standard white button): btn-default
o Primary (provides extra visual weight; set to be the primary action in a set of
buttons): btn-primary
o Success (indicates successful or positive action): btn-success
o Info (contextual button for informational alerts): btn-info
o Warning (indicates caution should be taken): btn-warning
o Danger (indicates a potentially dangerous action): btn-danger
o Link (deemphasizes the button to look like a link while behaving like a button): btn-
link
• Buttons classes can be added to the <a>, <button>, or <input> elements, e.g.:
<a class="btn btn-default" href="#" role="button">Link</a>
183 | P a g e
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
• Button sizes can be reduced or increased by adding a third size class.
o Large: btn-lg
o Small: btn-sm
o Extra Small: btn-xs
• To make a button appear "active," add the "active" class:
<button class="btn btn-success btn-xs active">Text</button>
• To disable a button, add a "disabled" attribute and set its value to "disabled":
<button class="btn btn-success btn-xs" disabled="disabled">Text</button>
▪ Jumbotron (class="jumbotron") extends the entire viewport to enlarge and showcase key content
within.
• By default, the Jumbotron will extend across the entire width of the screen. To prevent this
behavior, place the <div class="jumbotron"> within a <div class="container">, as the
"container" class in Bootstrap will add padding and margins to center the Jumbotron.
▪ Forms
• Basic Form
o Applying the class="form-group" attribute to all <div> elements in the form
optimizes the spacing between the elements (e.g., between the username and
password field).
o Applying the class="form-control" attribute to an <input> element improves the
style of the normal default appearance (adds rounded corners, padding, spacing,
focus effects, etc.), but also makes changes to how the element behaves within the
grid system.
o Applying the class="help-block" to a <p> element modifies the text of a helpful hint
to be more subtle and subdued in appearance.
• Inline Form
o A basic form will lay its contents by stacking them on top of each other. However,
by applying the class="form-inline" to your form (which doesn't necessarily have to
be a <form> element) will place its contents in a line from left to right.
▪ Navbar
• Navbars serve as navigation headers for an application or site. Navbars must be placed
within a <nav> element, and, like buttons, require a general "navbar" class followed by a
second specific class (typically "navbar-default", but may also be "navbar-inverse" for an
inverted color scheme).
• A navbar may contain a "Brand" image (e.g., company name or logo) as the first object in
the navbar. This is constructed by creating a "navbar-header" and placing an anchored
"navbar-brand" within the header (to add a link to the homepage, typically), and then an
<img> within the brand, if desired:
<a class="navbar-brand" href="#"><img src="#"></a>
</div>
</nav>
• The remaining content on the Left Side of the navbar should appear outside of the <div>
containing the "navbar-header", and it should be placed in <ul class="nav navbar-nav">.
Each item within the navbar should be marked with <li> tags (and those should contain an
<a> tag if a link is desired).
o NOTE: The <li> tags will function normally even if contained in a <div> rather than
<ul>; however, the <ul> should be used for semantics.
• To add additional content to the Right Side of the navbar, use <ul class="nav navbar-nav
navbar-right">.
184 | P a g e
o To ensure that the content on the right side does not press too squarely on the right
edge of the browser, everything within the <nav> should be placed within a <div
class="container"> (fixed width) or <div class="container-fluid"> (full width).
• To get the full benefit out of a navbar (such as dynamic dropdown menus), you must install
the Bootstrap JavaScript file in your HTML <body>. Like "bootstrap.css", you can either use
the "bootstrap.js" file downloaded from Bootstrap, or you can use the following link:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
o NOTE: Bootstrap's JavaScript requires jQuery to work, and its <script> must be
placed BEFORE Bootstrap's:
<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-
DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
• To have items Collapse when the browser hits mobile size, place everything that you want to
collapse inside <div class="collapse navbar-collapse">.
o To add the "hamburger" icon that provides a dropdown icon for the collapsed
items, (1) change the above <div> to read <div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">, and (2) place the following <button> within
the "navbar-header":
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
</button>
▪ The three "icon-bar" classes are responsible for making the three bars in
the icon.
▪ The "data-target" attribute is responsible for showing/hiding the content
when the icon is clicked. The value of this attribute should be set to
whatever <div> (by ID) you want to show/hide.
• To keep the navbar Fixed to Top, include the "navbar-fixed-top" class, and add a minimum
of 50px of padding to the top of the <body> (as the navbar itself is 50px high), although it
may better to add a little more for extra space.
▪ Glyphicons
• To place icons, use the link above to find the class of icon you wish to use (e.g., an envelope
icon), and insert it according to the following syntax:
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
o The icon <span> should contain no text or child elements.
o The aria-hidden="true" attribute is used to hide decorative icons on assistive
technologies (e.g., Screen Readers). If the icon is not decorative and is intended to
convey meaning, then that meaning can be added through by using <span class="sr-
only">, e.g.:
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-
hidden="true"></span>
<span class="sr-only">Error: Enter a valid email address</span>
</div>
o If you're creating controls with no text (such as a <button> that only contains an
icon), you can add an "aria-label" attribute to the control and make its value be a
description that will appear on screen readers.
185 | P a g e
• For additional icons, install Font Awesome by placing the entire directory into your project,
and then inserting the following into your <head>:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
o The Grid System
▪ Bootstrap includes a fluid grid system that appropriately scales up to 12 columns as the device or
viewport size increases. These 12 columns are contained within every instance of <div class="row">.
You can then place additional <div> elements within each row and divide them by the following
syntax: <div class="col-size-#">.
• The "#" option determines how many columns (out of 12) the <div> will occupy. In the
following example, the first row will have 3 evenly spaced <div> groups that are each 4
columns wide, and the second row will have 2 <div> groups, with the first being 9 columns in
width and the second being 3 columns:
<div class="container>
<div class="row">
<div class="col-md-4">First Symmetrical Group</div>
<div class="col-md-4">Second Symmetrical Group</div>
<div class="col-md-4">Third Symmetrical Group</div>
</div>
<div class="row">
<div class="col-md-9">First Asymmetrical Group</div>
<div class="col-md-3">Second Asymmetrical Group</div>
</div>
</div>
• The "Size" option determines the width of the <div>, which determines the "breaking point"
at which the <div> elements in a single row will take up a full 12 columns and stack on top of
each other, rather than appear side-by-side.
o Four sizes and breaking points:
▪ Extra Small ("col-xs-#") for mobile phones: Auto width.
▪ Small ("col-sm-#") for tablets: 750 pixels.
▪ Medium ("col-md-#") for smaller monitors: 970 pixels.
▪ Large ("col-lg-#") for larger monitors: 1170 pixels.
o Given the sizes above, if you were to have 4 <div class="col-md-3"> elements, the 4
elements would appear side-by-side until the screen width dropped below 970
pixels, at which point all 4 would stack on top of each other. If, however, you
wanted tablet users (below 970 pixels) to see the first two elements appear side-by-
side and the last two elements below, you would say: <div class="col-md-3 col-sm-
6">.
• This system also allows for Nesting additional "row" classes within other existing grid
elements, e.g.:
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="row">
<div class="col-sm-6">First half of Group "1"</div>
<div class="col-sm-6">Second half of Group "1"</div>
</div>
</div>
<div class="col-md-3 col-sm-6">Group "2"</div>
</div>
</div>
▪ Notes for Image Galleries:
186 | P a g e
• Visit Unsplash for free high-quality images.
• In order for images to be appropriately sized within its grid, a quick method is to nest the
image within the "thumbnail" class, e.g.:
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="thumbnail">
<img src="files/01.jpg">
</div>
</div>
• NOTE:
o If you're looking for Pinterest-like presentation of thumbnails of varying heights
and/or widths, you'll need to use a third-party plugin such as Masonry, Isotope,
or Salvattore.
o If you don't mind the images being of varying heights, but want to get rid of the
white space bug, then see here.
o If you want to crop all of the images to the same size, then see an example of this
here.
187 | P a g e

Web Dev by Colt

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Web Dev by Colt

Hochgeladen von

Copyright:

Verfügbare Formate

2019

The Web Developer Bootcamp Front-End Basics

Thank you Colt

Utilities / Version Control Documentation / Extras Libraries / Resources

Draw.io - Flowchart Maker – CSS-TRICKS Unsplash - Freely useable images

The General Rule

Concept and syntax

Mozilla Developer Network - https://developer.mozilla.org/en-US/

Excellent reference for HTML, JavaScript and CSS.

Every HTML document we create will start with this boilerplate:

<--Our metadata goes here -->

Shortcuts Visual Studio Code

• You can understand more on attributes on MDN

<a href=”https://solidartisans.com” target=”_blank”>Solid Artisans</a>

<h2>New HTML5 Way</h2>

The Form Tag

Example for a form

Example of such a request

• Read more on MDN

<form action="https://wikipedia.org" method="GET">

<p>Do you prefer cats or dogs</p>

<p>Whats your favorite color?</p>

<textarea name="paragraph" id="paragraph" cols="50" rows="10"></textarea>

To understand what CSS is you can go to CSS ZEN GARDEN http://www.csszengarden.com/

The hexadecimal Number system in Colors

• We have the element selector li / div / h1 – h6 / p / ….

/* Class, Attribute, and Pseudo-class Selectors */

• The above list is from least specific to most specific

/* Style the HTML elements according to the following instructions.

/* Give the <body> element a background of #bdc3c7*/

/* Make the <h1> element #9b59b6*/

/* Make all <h2> elements orange */

/* Make all <li> elements blue(pick your own hexadecimal blue)*/

/*Change the background on every paragraph to be yellow*/

/*Make all inputs have a 3px red border*/

/* Give everything with the class 'hello' a white background*/

/*Make only inputs with type 'text' have a gray background*/

/* Give both <p>'s inside the 3rd <div> a pink background*/

/*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/

/*Make the <a> element's that have been visited gray */

• You can read more on MDN regarding the custom fonts

• In order to center element you can use the margin: auto;

margin: 20px auto;

In this section Colt will teach you Bootstrap 3.

Why teach both versions?

https://expo.getbootstrap.com/ - here you can see some examples of bootstrap

• You can style the elements in a different CSS file.

<button type="button" class="btn btn-link">Link</button>

<nav class="navbar navbar-default">

<nav class="navbar navbar-default">

<ul class="nav navbar-nav">

<ul class="nav navbar-nav navbar-right">

• In order to acchive the hamburger menu we use the following

<nav class="navbar navbar-default">

<ul class="nav navbar-nav navbar-right">

Note about The Grid System

col-lg – Large Desktop

/Change the background on every paragraph to be yellow/

/Make all inputs have a 3px red border/

/Make only inputs with type 'text' have a gray background/

/Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)/

/Make the <a> element's that have been visited gray /