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


  • 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! :) 

Putting it all together

By Yvonne

Putting it all together

DOMs and all!

  • 944