2. T11 Sessions
● A series of workshops, talks and presentations
from various practical fields
● Once per month
● Future workshops: Introduction to 3D graphics,
Introduction to philosophy etc.
● Inspired by T11, opened for all
● Facebook | t11sessions@gmail.com
3. Discourse and /me
● Been into this thing for ~10 years, but more actively
involved last ~5 years
● Happily unemployed
● Don’t expect magic - I’m here to give you some basic
knowledge and understanding (nothing is a black box)
● Continuation?
● Ask / Write questions
4. Discourse and /me
● Been into this thing for ~10 years, but more actively
involved last ~5 years
● Happily unemployed
● Don’t expect magic - I’m here to give you some basic
knowledge and understanding (nothing is a black box)
● Continuation?
● Ask / Write questions
● Task at the end
5. Backend / Frontend web development - what’s up with
that?
● Backend development is related mostly to the data, data
processing and calculations that are not directly
interacting with the user
● Frontend development is related to the elements of a
website that are visible to the user and that user interacts
with (combination of programming skills and aesthetics)
9. HTML (Hyper Text Markup Language) &
CSS (Cascading Style Sheets)
● HTML - web programming language that tells web
browsers how to structure and present content on a web
page (a, p, h1, h2, lists, header, footer, etc)
● CSS - defines a web page’s layout and in order to beautify
the page with design elements like colors, rounded
corners, gradients, and animation (attached to classes, ids
and so on)
10. HTML & CSS
<html>
<head>
<title>Motherfucking Website</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>This is a motherfucking website.</h1>
<p class="alert-text">This is a part of '.alert-text' class and it's painted red (color: #FF0000;)</p>
<p class="alert-text bold-text">This one extends '.alert-text' but it also adds an additional style</p>
</body>
</html>
11. HTML & CSS
<p class="alert-text">This is a part of '.alert-
text' class and it's obviously painted red
(color: #FF0000;)</p>
.alert-text {
color: #FF0000;
}
This is a part of '.alert-text' class and it's
painted red (color: #FF0000;)
12. Hey browser, show me that website!
● Simple scenario:
Open your preferable (Chrome, for example) browser, go
to a specific website -> http://motherfuckingwebsite.com/
15. ● JavaScript is not Java!
● Dynamic programming language most commonly used as
part of web websites (interacts with the user, controls the
browser, used for games, form validations etc) - basically
every website today is using JavaScript
● Simple, easy to read and understand and there’s a lot of
resources, which is both good and bad
● No need to setup anything in order to use it
JavaScript introduction
16. JavaScript - what exactly is it used for?
● Random calculations (1)
● Animations (1, 2, 3)
● Dynamically change colors and other styles (1, 2)
● Form validations
● Some more heavy shit! (1, 2)
● Dynamically load data
17. Javascript / Browser console
● Chrome / Firefox - right mouse click, then select “Inspect”
(or: CTRL + SHIFT + i)
● Examples: Declare a variable, string length, alert(“Hello
World!”), select elements, simple calculations, inspect and
change element etc.
● copy(someArray.toString());
23. JavaScript events
● Completely related to web development, and user
behavior
● You can define what to do when user clicks on a specific
button, selects an a different value in dropdown, gets
focus into a specific element and so on
● You can register them either in HTML or in JS
24. JavaScript statements (if)
var yourName = prompt("Please enter your name", ""); // gets the entered name
// if you don't provide a name, you'll become "Anonymous"
if (yourName === '') {
yourName = 'Anonymous';
}
25. JavaScript statements (if else)
var yourName = prompt("Please enter your name", ""); // gets the entered name
// if you don't provide a name, you'll become "Anonymous"
if (yourName === '') {
yourName = 'Anonymous';
} else if (yourName === 'Barack Obama') {
yourName = 'Anonymous';
}
26. JavaScript statements (switch)
var yourName = prompt("Please enter your name", ""); // gets the entered name
switch (yourName) {
case '':
yourName = 'Anonymous';
break;
case 'Barack Obama':
yourName = 'Anonymous';
break;
default: // all other cases
// don’t do anything
}
27. JavaScript statements (for)
var dogs = ["Fluffy", "April", "Archibald"]; // array of dogs
// prints out all the dogs
for (var i = 0; i < dogs.length; i++) {
alert(dogs[i]);
}
0 1 2
28. JavaScript statements (while)
var dogs = ["Fluffy", "April", "Archibald"]; // array of dogs
// does the same as for loop
var i = 0;
while (i < dogs.length) {
alert(dogs[i]);
i++;
}
0 1 2
29. JavaScript functions
● Closely connected with mathematics
● Built in functions (String has length, substring, text can be
converted into Number etc)
● Custom functions (write whatever you want)
30. JavaScript functions (examples)
Math
x2
(x - input)
x+y (x, y - inputs)
x + y / z (x, y, z - inputs)
JavaScript
function square(x) {
return x*x;
}
function addition(x, y) {
return x + y;
}
function randomFormula(x, y, z) {
return (x + y) / z;
}
JavaScript call
square(2); // 4
addition(4,4); // 8
randomFormula(5,5,2); // 5
31. JavaScript functions (examples)
Math
F = 9/5 * C + 32 (C - input)
C = 5/9 * (F - 32) (F - input)
D = b2
- 4*a*c
JavaScript
function celsiusToFahrenheit(celsius) {
return ((9 / 5) * celsius) + 32;
}
function fahrenheitToCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
function discriminant(a, b, c) {
return Math.pow(b,2) - (4 * a * c);
}
JavaScript call
celsiusToFahrenheit(30); // 86
fahrenheitToCelsius(77); // 25
discriminant(2,2,2); // -12
32. JavaScript vs. jQuery
● jQuery is basically just a wrapper for JavaScript, that
simplifies and beautifies the code
● document.getElementById(“test”) -> $(“#test”)
● document.getElementsByClassName(“test”) -> $(“.test”)
● Can be useful, but don’t rush :)
33. Tools
● For writing code: Sublime Text or Atom or Notepad++
● Write code online: JSFiddle
● Web browser by choice (recommendation: Chrome) and
browser console
● Versioning: Git and Github
● Simple Python server (for later use)
34. Where and how to continue?
● Codecademy (1, 2, 3, 4, overview)
● Coursera (1, 2, 3, 4, 5)
● Quick tutorials and exercises (1, 2, 3)
● 20 things I’ve learned about browsers and web
● Random JavaScript examples (1, 2, 3)
● Start your own project!
● Real life courses (1)
● Google, a lot! Beware: you’ll find a lot of bad examples online
35. Tasks - how to deal with it?
● Download .zip file
○ index.html
○ style.css
○ main.js
○ images/image.jpg
○ images/image_1.jpg
36. Tasks - how to deal with it?
● Download .zip file
● Export files to /home/dev/t11sessions or similar directory
● Get Sublime Text or similar text/code editor
● Open index.html in Sublime Text and in preferable browser
(Open with…, then select preferable app)
● Observe index.html (both code and browser), try to
change/update things and go through TODO tasks
● Open main.js and style.css, read comments and TODO tasks
It’s simple, easy to read and understand (“old-school” syntax) and there’s a lot of resources, which is both good and bad - think of that as a shared house where ten individuals haven’t agreed upon any specific rules (chores, cleaning, noise etc.)