President of Golden Crescent Toastmasters
ACM Member
Published Author
World Speaker
HTML/CSS/JS?
Programming?
Tinkering?
might just catch on
Let's just accept that as fact, ok?
1950s
192.168.1.1 - Remember!?
Google is 216.58.194.142 - Don't Remember!!!
But there's nothing... yet.
Images, Colors, Styles!
CODE!
Structure - It's a Markup Language
How things look - It's a global set of rules
http://www.csszengarden.com/
JavaScript LIVES!
SERVER-RAMA!
JavaScript-RAMA!
Begins to evolve again 2015
Analogies and metaphors everywhere.
English is bad. Technical English is worse
HTML
FUNDAMENTALS
HTML is like the frame of a car.
<p>This is content.</p>
This is content.
<p>This is content.</p>
<h2>This is content.</h2>
This is content.
<p>This is content.</p>
<h2>This is content.</h2>
<p>This is <em>also</em> content.</p>
This is content.
This is also content.
<p>This is content.</p>
<h2>This is content.</h2>
<p>This is <em>also</em> content.</p>
<img src="smiley_face.jpg">
This is content.
This is also content.
<!DOCTYPE html>
<html>
<head>
<title>
Brocolli vs. Brussel Sprouts
</title>
</head>
<body>
Brussel Sprouts are clearly the better vegetable.
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>A tiny document</title>
</head>
<body>
<h1>Main heading in my document</h1>
<!-- Tell people what we're doing. -->
<p>
I am <em>writing</em>
<abbr title="Hyper Text Markup Language">HTML</abbr>.
</p>
</body>
</html>
I am writing HTML.
Order and Unordered
Cascading Style Sheets
Also a Markup Language
CSS describes the presentation of your HTML.
Selectors
The Box Model
Inheritence
INHERITANCE
Web pages can now be
The story of Outlook and Gmail
Demo
What is the UX Minimum?
What is the UI Minimum?
What are the different states of each?
What external resources are part of each?
HTML + CSS + RUBY
Bad JavaScript
https://imgur.com/gallery/OoTUe
"use strict";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var RaceCar = function (_Car) {
_inherits(RaceCar, _Car);
function RaceCar(make, topSpeed) {
_classCallCheck(this, RaceCar);
var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(RaceCar).call(this, make));
_this.topSpeed = topSpeed;
return _this;
}
_createClass(RaceCar, [{
key: "goFast",
value: function goFast() {
this.currentSpeed = this.topSpeed;
}
}]);
return RaceCar;
}(Car); class RaceCar extends Car {
constructor(make, topSpeed) {
super(make)
this.topSpeed = topSpeed
}
goFast() {
this.currentSpeed = this.topSpeed
}
}NOW with
lodash
http://bit.ly/29TbJfF
Project 1 - Personal Profile
Project 2 - Trivia App
Project 3 - Wireframes/Breakdown
Project 4 - Simplest App Ever
OOP and Functional
* GNO Code
* Hack Night
* Front End Party
* Women in Technology New Orleans
* Code for America
* Net2NO
By Gant Laborde
