1. A Rails Girls Introduction
to
HTML & CSS
Rails Girls Helsinki, Finland, Spring 2015
Timo Herttua & Vesa Vänskä
2. Agenda
1. Why HTML & CSS are crucial in life?
2. Why HTML & CSS are crucial in RG?
3. Bonus: Why to learn them already today and not
tomorrow
4. Division of Labor on the Internet
5. The Front-end Bentobox
6. Live demo: Codeacademy
7. Extra credit exercise
8. Appendix: instructions, HTML primer, Frontend
Bentobox
3. Why HTML & CSS
● Perhaps the single most important, and easiest to grasp entry point to
the world of web tech
○ WYSIVCTWYG or “What you see is very close to what you get”
● Many of today’s professional developers started with making websites
● The other entry point you typically hear is computer graphics (CG) and/or
games (i.e. the Finnish Demoscene*) – which are much more difficult to
make than websites
● The third, and perhaps hardest entry point, is tinkering with hardware (e.g.
Commodore, Amiga, Arduino, Raspberry Pi, drones, robots, etc.), because
of so many moving parts and “low level” programming languages
involved
*Wikipedia article about the Demoscene: http://en.wikipedia.org/wiki/Demoscene; A Finnish TV series about the Demoscene: http://areena.yle.
fi/tv/demoscene; Grand Cru’s account of the Demoscene: http://grandcrugames.com/2013/03/what-the-hll-is-in-the-water-of-finland/
4. HTML & CSS in the Internet
● Close to everything you see on the internet is a
combination of HTML, CSS & JavaScript
● Even some apps on iOS & Andoid are made with them
(e.g. Facebook’s first gen mobile)
● Web browser is the universal app that everyone has
● HTML, CSS & JS are the language of the web, and the
web browsers
● HTML, CSS & JS are open source standards, meaning
that no plugins are required to run them
5. Role of HTML & CSS in Rails Girls
● Rails Girls is an introduction to (web application)
technology
● Rails in Rails Girls refers to “Ruby on Rails”, a popular
web application programming framework (Rails) built
with the Ruby programming language
● Web applications are pieces of software that
dynamically generate HTML pages that make further
use of CSS and JavaScript to make them more visually
pleasing and interactive
6. Today: HTML; tomorrow: (among other
things) dynamic generation of HTML
● Web applications are used to transmit and transform
information by dynamically generating HTML based
on user inputs (e.g. Facebook’s chat)
● In order to understand web applications, you need to
understand HTML
● In order to make web applications pretty, you need
CSS
● In order to make web applications more interactive /
responsive, you need JavaScript
7. A bonus “why”
● By engaging with HTML & CSS today, you’ll
increase your chances of getting access to
a personal coach for a 3-6 month period to
help you enter the world of web tech in great
company!
● Details on how exactly, stay tuned for more
info later in the presentation
8. What is a website made of?
● An HTML page is
○ a structured text file with hyperlinks
■ to other HTML pages
■ to assets, such as
● embedded files, that the browser can display, such as
○ images
○ videos
○ audio
● CSS stylesheets
● script files (JavaScript)
● downloadable files such as PDF’s,
9. A website, “visually”
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="
/style/style.css">
</head>
<body>
<div id="logo" style="/images/logo.png"></div>
<input id="keywords">
<button id="search">Google Search</button>
<button id="lucky">I'm Feeling Lucky</button>
</body>
</html>
HTML: http://www.google.com/index.html
or just http://google.com
body {
background-color: white;
}
button {
background-color: light grey;
}
Stylesheet: style.css
Google logo: logo.png
10. Connected devices such as
smart TV’s
Clients and servers
Server (a.k.a backend a.k.a. the cloud)
Desktop web browser
Mobile device web browser &
embedded browsers in
“hybrid apps”
Client (a.k.a frontend) examples:
The cloud (=many
servers someone else
like Amazon or Google
owns, priced per usage
per month, not per
physical server)
Structured data
(HTML, JSON, XML, …)
11. HTTP request - response cycle
Browser Server
1. Request to http://google.com
2. Server decides what it
wants to respond
Web
page
3. The response tells the
browser what to show in the
browser
4. The browser renders the
page
12. Division of labor on the Internet
For browsers:
HTML
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<img src=”cat_picture.gif” />
<video><source src=" cat_video.mp4"
type="video/mp4"></video>
For JS / servers:
JSON / XML
{“presenters”: [{“id”:
1, “name”: “Vesa”},
{“id”: 2, “name”:
“Timo”}]}
Structured content
CSS
body {
background-color: red;
};
JavaScript
confirm(“Are you ready
for some cat vids?”);
// OK or Cancel
Adobe
Flash
Microsoft
Silverlight
...
The Browser (=frontend)
(e.g. Chrome, Firefox, Safari, ..)
Style & behavior
Rails, CakePHP, Django, Spring
Ruby, PHP, Python, Java
Frameworks
(=productivity tools by programmers for
programmers)
Languages
(=ways to instruct machines)
The Server
(=backend)
(proprietary)
Browser plugins
13. What was all that Confucianism?
The Rails Girls workshop
uses the Bentobox model
to make the world of tech
more approachable by
helping you attach
meaning to the many
acronyms of tech (HTML,
JS, CSS, etc.)
Read more:
http://blog.railsgirls.com/post/20405930015/bentobox-learn-the-language-of-technology
15. Frontend Bentobox
The Browser (=frontend)
The Frontend Bentobox
The Server (=backend)
(i.e. “not frontend” stuff)
Behavior
Style
Content for browsers Content for servers / backend
16. Frontend Bentobox
The Browser (=frontend)
The Frontend Bentobox: acronyms
The Server (=backend)
(i.e. “not frontend” stuff)
Behavior
Style
Content for browsers Content for servers / backend
HTML
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<img src=”cat_picture.gif” />
<video><source src=" cat_video.mp4"
type="video/mp4"></video>
CSS
body {
background-color: red;
};
JavaScript
confirm(“Are you ready
for some cat vids?”);
// OK or Cancel
JSON / XML
{“presenters”: [{“id”:
1, “name”: “Vesa”},
{“id”: 2, “name”:
“Timo”}]}
Ruby
Rails
MongoDB Hadoop
Backbone Bacon.js
17. Frontend Bentobox
The Browser (=frontend)
The Frontend Bentobox: tasks
The Server (=backend)
(i.e. “not frontend” stuff)
Behavior
Style
Content for browsers Content for servers / backend
Display a picture of a kitteh
Make the background red
Confirm that the
user actually
wants to delete a
file
Transfer World Bank
statistics needed to
determine relationship
of GDP and birth rate
Perform serious data crunching on which
kitteh should be shown to which user
18. Frontend Bentobox Exercise:
acronyms & tasks
Rules: Figure out the term and place it on the
bentobox in the right place. There might be
false friends and doubles. Googling allowed!
● HTML
● JavaScript
● PHP
● EcmaScript
● CSS
● Java
● jQuery
● Angular
● JSON
● Ember
● XML
● Rails
● Make the font size bigger
● Have a chat app show new
messages without having to refresh
the page
● Show an ordered list of items
(e.g. todo list)
Acronyms Tasks
19. Live demo:
HTML & CSS on Codecademy.com
Let’s look at the first exercise, “HTML Basics”:
http://www.codecademy.com/en/tracks/web
20. Extra credit exercise: earn a badge!
● Option 1: CodeSchool.com video course https://www.
codeschool.com/courses/front-end-foundations
(requires a free signup, the part about HTML is free)
● Option 2: Codecademy.com text-based course http:
//www.codecademy.com/en/tracks/web
(requires a free signup, the whole course is free)
● For extra credit:
○ Post a link to your badge(s) here (see appendix for instructions):
https://docs.google.com/a/efekta.fi/forms/d/1DlXmnyicUvmvprjipXTyBdALoymksF1b9irtv5TDLPc/viewform
22. Extra Credit Instructions: How to find the
URLs to badges
http://www.codecademy.com/users/username/achievements
CodeCademy.comCodeSchool.com
https://www.codeschool.com/users/12345
23. HTML primer: principles
● HTML documents are a set of nested “tags” which
declare the structure of a document
○ e.g. <p>This is a paragraph of text</p>
● Most tags have a starting tag (<[tag]>) and an
ending tag (</[tag]>)
● Tags can be nested inside each other, e.g.
24. HTML “hello world”, or a very simple
example – open up a text editor*, save to
index.html and open with a web browser
<body>
<h1>Hello Rails Girls!</h1>
<h2>Menu</h2>
<ul>
<li><a href=”about.html”>About</a></li>
</ul>
<p>If you paste this into a text file and save it as index.
html, it should work if you open it in your browser.</p>
</body>
* text editor is a (desktop) application that edits plain text files, for example HTML, CSS, JavaScript
and Ruby. Examples of free text editors are: https://atom.io/ http://www.sublimetext.com/ or http:
//brackets.io/
25. HTML primer: basic tags
<html> </html> HTML tags declare the file is an HTML document. Everything else is nested inside
these tags.
<h1> </h1>
<h2> </h2>
Heading tags (H1, H2, H3, H4, ..) are meant for declaring different levels (H1 is more
important than H2) of headings
<ul> <li></li> </ul>
<ol> <li></li> </ol>
UL (unordered list) and OL (ordered list) declare lists of list items, LI, which are
essentially bullet points and numbered lists
<p> </p> Paragraph of text. Each new paragraph automatically leaves a little space between the
previous.
<a href=”http://google.com”>Google</a> Anchor tags can be used to make links to other pages, files, images, etc. Note that the
A tag has a “href” attribute, which is used to tell that the anchor tag points to some
other file than itself.
<img src=”logo.png”>
<img src=”http://example.com/logo.png”>
The IMG tag is used for embedding image files into the page, and the “src” attribute is
used to tell which file should be embedded. The example uses a “relative file path” on
the local server, which means that the file should be found in the same folder as the
HTML file with the filename of logo.png. You can also link to pictures on other sites
using a path starting with “http://”, which is known as “hotlinking” and considered bad
practice. Note that the IMG tag does not have a separate end tag.
26. HTML primer: index.html
<html>
<head>
<title>Google</title>
<link rel="stylesheet" type="text/css" href="/style/style.css">
</head>
<body>
<h1>Main heading</h1>
<ul>
<li>Home</li>
<li>About</li>
</ul>
<p>Paragraph text</p>
</body>
</html>
Declares the document as HTML
Header: helps the browser prime the page before showing any content
Link to CSS file in the header
Closing tag for header and start tag for page
body, which is shown to user
H1 heading tag for the main heading
UL tag for an unordered list and LI tags for
individual list items
P tag for paragraph text
Closing tags for body (visible part of the page) and html tag (which explicitly
tells the browser where the document ends)
27. Frontend Bentobox
The Browser (=frontend)
The Frontend Bentobox
The Server (=backend)
(i.e. “not frontend” stuff)
Behavior
Style
Content for browsers Content for servers / backend
