Download - Railsbridge intro
![Page 1: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/1.jpg)
Welcome to Railsbridge...
![Page 2: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/2.jpg)
Victoria!
![Page 3: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/3.jpg)
Thanks to
![Page 4: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/4.jpg)
In Particular...
Tobias
And
Jianping
![Page 5: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/5.jpg)
Thanks To
![Page 6: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/6.jpg)
In particular....
StewartAnd
GeoffAnd
DJ
![Page 7: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/7.jpg)
Thanks to our volunteers
AaronAnd
Sophia
![Page 8: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/8.jpg)
Thanks to
![Page 9: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/9.jpg)
Why Railsbridge?
Let's change the ratio
![Page 10: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/10.jpg)
Sarah Sheehan's CupcakesPhoto credit: @sarahesheehan
![Page 11: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/11.jpg)
Air, Food, Water
● The front doors and Elevator should be unlocked all day
● There are bathrooms in the hallway. The ladies' room is unlocked :) The men's room requires a key. Rebeca has the key.
● We can work anywhere in the office that is comfortable. Please leave any personal items in place.
![Page 12: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/12.jpg)
Air, Food, Water
● Rebeca's mobile number is 250-415-1927.
● The WiFi is called xMguest. The password is
xmattersnow
![Page 13: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/13.jpg)
Thanks to
YOU.
Let's Learn some front-end stuff.
![Page 14: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/14.jpg)
HTML
It is what every web page is made from.
To see what a page is made of, use “View Source”.
For example...
![Page 15: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/15.jpg)
![Page 16: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/16.jpg)
Basic Tags<!DOCTYPE html>
(see diveintohtml5.info/semantics.html for explanation)
<HTML><HEAD>
---stuff like the title of the page and meta tags---
</HEAD><BODY>
---the contents of the page---<BODY></HTML>
![Page 17: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/17.jpg)
<p>This is a paragraph</p><h2>This is a heading</h2>
<a href=”facebook.com”>This is a link to facebook</a>
<img src=”facebook.com/logo.gif”/> <-- That displays an image that is
stored on facebook.com<em>This is a bit of text that is
emphasized</em><i>This is a bit of text that will
be italicized...</i>But we might not want to do that...
![Page 18: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/18.jpg)
How HTML, CSS and JavaScript work together
HTMLmarks the content up into different structural types, like paragraphs, blocks, lists, images, tables, forms, comments etc.CSStells the browser how each type of element should be displayed, which may vary for different media (like screen, print or handheld device)JavaScripttells the browser how to change the web page in response to events that happen (like clicking on something, or changing the value in a form input)
From webdesignfromscratch.com
![Page 19: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/19.jpg)
Semantic markup
Using HTML to enforce the meaning of the content of the page and not
the details of the visual display
<em> versus <i>
![Page 20: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/20.jpg)
Browser compatibility
Cross-browser compatibility is the bane of a web developer's existence.
![Page 21: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/21.jpg)
Developer tools/inspector
![Page 22: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/22.jpg)
HTML 5
From wsj.com
![Page 23: Railsbridge intro](https://reader031.vdocuments.mx/reader031/viewer/2022032714/55aaf8281a28abb5148b4660/html5/thumbnails/23.jpg)
You should read