Loading

Putting it all together

Yvonne

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

PUTTING IT ALL TOGETHER!

News!

React.js workshop(?)

30 Days of code!

Present your Front Ends!!! :)

March 9 Special Guests!!!!

Bluemix DAY LONG event

March 10, 8:30-4:00

HackVictoria Weekend, Prizes

March 12/13

Tonight!

PERMISSIONS!!!!
- waiver paperwork!
BASIC Building Blocks
Front end examples
- local quotes
- leaflet
Back end examples (for later!)
- Nitrous and Bluemix
BUT FIRST... OPEN MIC NIGHT!!!!! :)
- share where you are at!

Building Blocks

Hyper Text Markup Language, W3Schools HTML
< tag! or element >
- tags for structural elements, links, headings, paragraphs, lists, etc.
<title>This shows up where?!</title>
<head>, <body>, example
<h1>, ... <h6>, example
<p>, example
<div>, example

Building Blocks

The DOM
- Document Object Model
- the tags create a TREE!!!

Javascript can MANIPULATE the DOM example
CSS also refers to the DOM example

Where does it lead to?

Store this file to your laptop (as .html)
- link (click that to get the file from our repo!)
and look at it in:
- your editor (visual code studio?!)
- your browser...

HOW DOES THAT WORK!??!

you can peak at the array of objects on the server here:

http://ourquotes.mybluemix.net/

Where does it lead to?

NOW, try storing this file and loading it into your browser...

https://github.com/ycoady/FortUVic2016/blob/master/quotesLocal.html

HOW DOES THAT WORK!??!

Where does it lead to?

NOW, try storing this file and loading it into your browser...

https://github.com/ycoady/FortUVic2016/blob/master/Leaflet_example.html

HOW DOES THAT WORK!??!

Where does it lead to?

NOW, try looking at this in your browser...

http://leafygreen.mybluemix.net/

HOW DOES THAT WORK!??!

IBM BLUEMIX DASHBOARD

more on this in a bit...
do not need this to do a front end demo (for special guests! next week!)
I HOPE YOU ARE GOING TO LIKE IT! :)

Made with Slides.com