An Unordered HTML List

Coffee
Tea
Milk

An Ordered HTML List

1. A piece of coffee
2. A piece of lard
3. A piece of celery
1. A piece of coffee
2. A piece of lard
3. A piece of celery
4. Milk
The href Attribute

HTML links are defined with the a tag. The link address is specified in the href attribute:
<a href="https://www.w3schools.com">This is a link</a> This is a link
Size Attributes

Images in HTML have a set of size attributes, which specifies the width and height of the image:
<img src="img_girl.jpg" width="500" height="600" alt ="Not Available">

Css example
h1 { color: white; text-align: center; }
Css External link
<link rel="stylesheet" type="text/css" href="mystyle.css">
Css ID example
#center { text-align: center; color: red; }
Css Class example
.center { text-align: center; color: red; }
Group Selectors
h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; }
This is the same as
h1, h2, p { text-align: center; color: red; }
Font, Background and Border colors
Hello World Hello World Hello World
Hello World

Hello World

Hello World

Background properties
background-color background-image background-repeat background-attachment background-position
Border properties
<head> <style> p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;} </style> </head> <body>  <h2>The border-style Property</h2> This property specifies what kind of border to display: A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. An outset border. No border. A hidden border. A mixed border. </body>
A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A hidden border.

A mixed border.

Code Academy Lesson 1
console.log('JavaScript') console.log (33.7) console.log(true) console.log(null) console.log(3.5+40); console.log(2018-1969); console.log(65/240) console.log(0.2708*100) console.log('Teaching the world how to code'.length) console.log(' Remove whitespace '.trim()); console.log('Codecademy'.toUpperCase()); console.log(Math.random()*100) console.log(Math.floor(Math.random()*100)) console.log(Math.ceil(43.8)) console.log(Number.isInteger(2017)) console.log('It was love at first sight.'); // Opening Line // console.log('It was love at first sight.'); /* console.log('The first time Yossarian saw the chaplain he fell madly in love with him.'); console.log('Yossarian was in the hospital with a pain in his liver that fell just short of being jaundice.'); console.log('The doctors were puzzled by the fact that it wasn\'t quite jaundice.'); console.log('If it became jaundice they could treat it.'); console.log('If it didn\'t become jaundice and went away they could discharge him.'); console.log('But this just being short of jaundice all the time confused them.');*/
Code Academy Lesson 1 (Variables, constants, and string interpolation)
const entree = "Enchiladas"; const price = 12; console.log(entree) console.log(price) entree = 'Tacos'; const entree = "Enchiladas"; const price = 12; console.log(entree) console.log(price) entree = 'Tacos'; let changeMe = true; changeMe = false; let notDefined; let valueless; let molecule = 16; let particle = 18; let assay = 3; // Add and assign to molecule below molecule += 16 // Multiply and assign to particle below particle *= 6.02 // Increment assay by 1 assay ++ let favoriteAnimal = "TamedJustin"; console.log('My favorite animal: ' + favoriteAnimal) let myName = "Azam" let myCity = "Undecided" console.log(`My name is ${myName}. My favorite city is ${myCity}.`)
Lesson 2 Flow control
All variables that have been declared and assigned are truthy unless they contain one of the six values listed below: • false • 0 and -0 • "" and '' (empty strings) • null • undefined • NaN (Not a Number) let isSoccerFan = false if (isSoccerFan === true) { console.log("Goal!"); } else { console.log("No goal!"); } let wordCount = 1; if (wordCount) { console.log("Great! You've started your work!"); } else { console.log('Better get to work!'); } let favoritePhrase = 'NotEmpty'; if (!favoritePhrase) { console.log("This string doesn't seem to be empty."); } else { console.log('This string is definitely empty.'); } let wordCount = 1; if (wordCount) { console.log("Great! You've started your work!"); } else { console.log('Better get to work!'); } let favoritePhrase = 'NotEmpty'; if (!favoritePhrase) { console.log("This string doesn't seem to be empty."); } else { console.log('This string is definitely empty.'); } let hungerLevel = 10 if (hungerLevel > 7){ console.log("Time to eat!") } else { console.log("We can eat later!") } let moonPhase = "full" let isFoggyNight = false /* if (moonPhase === "full" || isFoggyNight) { console.log("Howl!") } else if (moonPhase === "mostly full") { console.log("Arms and legs are getting hairier") } else if (moonPhase === "mostly new") { console.log("Back on two feet") } else { console.log("Invalid moon phase") }*/ switch (moonPhase) { case "full": console.log("Howl!"); break; case "mostly full": console.log("Arms and legs are getting hairier"); break; case "mostly new": console.log("Back on two feet"); break; default: console.log("Invalid moon phase"); break; } let isLocked = false; isLocked ? console.log('You will need a key to open the door.'): console.log('You will not need a key to open the door.'); let isCorrect = true; isCorrect ? console.log('Correct!'): console.log('Incorrect!'); let favoritePhrase = 'Love That!'; favoritePhrase === 'Love That!' ? console.log('I love that!'): console.log("I don't love that!");
Lesson 3 Functions
let calculatorIsOn = false; const pressPowerButton = () => { if (calculatorIsOn) { console.log('Calculator turning off.'); calculatorIsOn = false; } else { console.log('Calculator turning on.'); calculatorIsOn = true; } }; pressPowerButton(); // Output: Calculator turning on. pressPowerButton(); // Output: Calculator turning off. const takeOrder = (topping) => { console.log('Order: pizza topped with ' + topping); }; takeOrder('mushrooms'); const takeOrder = (topping, crustType) => { console.log(`Order: ${crustType} pizza topped with ${topping}`); }; takeOrder('bacon', "thin crust"); takeOrder('flesh', "thick crust"); takeOrder('pleasure', "thick like Justin's mom"); let orderCount = 0; const takeOrder = (topping, crustType) => { console.log('Order: ' + crustType + ' pizza topped with ' + topping); orderCount += 1 }; const getSubTotal = (itemCount) => { return itemCount * 7.5 } takeOrder('mushroom', 'thin crust'); takeOrder('spinach', 'whole wheat'); takeOrder('pepperoni', 'brooklyn style'); console.log(getSubTotal(orderCount)) let orderCount = 0; const takeOrder = (topping, crustType) => { orderCount++; console.log('Order: ' + crustType + ' pizza topped with ' + topping); }; takeOrder('mushroom', 'thin crust'); takeOrder('spinach', 'whole wheat'); takeOrder('pepperoni', 'brooklyn style'); const getSubTotal = (itemCount) => { return itemCount * 7.5; }; const getTax = (itemCount) => { return getSubTotal(itemCount) * 0.06; }; const getTotal = (itemCount) => { return getSubTotal(itemCount) + getTax(itemCount); }; console.log(getTotal(orderCount)); function isGreaterThan (numberOne, numberTwo) { if (numberOne > numberTwo) { return true } else { return false } } isGreaterThan(3, 1) const isGreaterThan = (numberOne, numberTwo) =>{ if(numberOne > numberTwo){ return true; } else { return false; } } isGreaterThan(4, 8) const volumeOfSphere = diameter => (1/6) * Math.PI * diameter * diameter * diameter; console.log('The volume of a sphere is ' + volumeOfSphere(10) + ' cubic centimeters');
Java Script Reference

An Unordered HTML List

An Ordered HTML List

The href Attribute

Size Attributes

Css example

Css External link

Css ID example

Css Class example

Group Selectors

Font, Background and Border colors

Background properties

Border properties

Code Academy Lesson 1

Code Academy Lesson 1 (Variables, constants, and string interpolation)

Lesson 2 Flow control

Lesson 3 Functions