There's always a gap between theoretical knowledge and practice. Particularly, how to start you first web project when you are familiar with HTML, JS, and CSS. This presentation covers such aspects as project functionality, modeling, file organization, building initial layout with HTML, insights of CSS, and jQuery.

1. FROM THEORY
TO PRACTICE
unspoken truth of starting web project
brought to you
by Sergey Bolshchikov

2. WHAT'S YOUR NAME, U SAID?
Front end Developer @ New ProImage
Co-organizer @ Ember-IL Meetup
Graduate Student @ Technion, IM&E
Web: http://bolshchikov.net
Blog: http://blog.bolshchikov.net
Github: https://github.com/bolshchikov

3. OUTLINE
1. Understand the destiny
2. Organize your life
3. Choose your comrades
4. Lay out your way
5. Add the make up
6. Bring some action
7. Coding

4. UNDERSTANDING THE DESTINY

5. DESTINY

6. DESTINY :: GOAL
The goal should formulate the main purpose or idea of future
project. It can be describe by one sentence or two sentences,
e.g.
“Create user-friendly web store for
selling fruits and vegetables”

7. DESTINY :: FUNCTIONALITY
● Login
● Display a list of available items with prices
● Display detailed information per item
● Be able to add the item to the basket
● Calculate the overall sum
● Send the order

8. DESTINY :: STRUCTURE

9. ORGANIZE YOUR LIFE

10. ORGANIZATION
Division by type
Separation of concerns
Complex

11. HTML5BOILERPLATE
Project started by Paul Irish (Google) for keepin'
best techniques for web project
http://html5boilerplate.com/
● Code structure
● File template (html, css, js)
● Comes with libraries: jQuery, Modernizr
● and other

12. CHOOSE YOUR COMRADES

13. COMRADES
How? Checklist:
○ Amount of watchers in Github (big)
○ Amount of forks on Github (medium)
○ Amount of issues on Github (small)
○ Amount of results on Stackoverflow
○ Amount of votes on Stackoverflow

14. COMRADES :: DOM
Why? Cross browser API is not the same
What? Relieves you from pain developments
Who? jQuery, Zepto, MooTools
Save yourself some time
DO NOT WRITE YOUR OWN

15. COMRADES :: UI & WIDGETS
What?
● Splitter
● Tree
● Accordion
● Context menu
● Dropdown
● Charts
● Calendar
● Grids
● Dialogs
Who?
● Twitter Bootstrap
● jQueryUI
● KendoUI
● Wijmo Components
● jqWidgets
● Dojo

16. COMRADES :: JS FRAMEWORKS
Why? JS mess, spaghetti code
What? Clean separation of concerns
Who? EmberJS, Backbone, Angular, etc.
How? Write test programs in each of them
http://todomvc.com/

17. LAYOUT YOUR WAY

18. WRITING APPROACH

19. LAYOUT :: LAYOUT 1 :: HTML
<header></header>
<div id="main"></div>
<footer></footer>
http://jsbin.com/anafap/9/edit

20. LAYOUT :: LAYOUT 2 :: HTML
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
http://jsbin.com/asehas/7/edit

21. LAYOUT :: LAYOUT 3 :: HTML
<header></header>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<footer></footer>
http://jsbin.com/uvafam/6/edit

22. ADD THE MAKE UP

23. CSS
CSS is a super power

24. CSS :: SELECTORS
Selector Description Example
*
Matches any element.
E Matches any E element (i.e., an
element of type E).
a
E F Matches any F element that is a
descendant of an E element.
div a
E > F Matches any F element that is a
child of an element E.
div > a
E:first-child Matches element E when E is the
first child of its parent.
li:first-child
E:link
E:visited
Matches element E if E is the source
anchor of a hyperlink of which the
target is not yet visited (:link) or
already visited (:visited).
a:link
a:visited

25. CSS :: SELECTORS (cont.)
Selector Description Example
E:active
E:hover
E:focus
Matches E during certain user
actions.
a:active
a:hover
a:focus
E + F Matches any F element immediately
preceded by a sibling element E.
div + div
E[foo] Matches any E element with the
"foo" attribute set (whatever the
value).
div[data-id]
E[foo="warning"] Matches any E element whose "foo"
attribute value is exactly equal to
"warning".
input[type=”text”]
DIV.warning Language specific. (In HTML, the
same as DIV[class~="warning"].)
div.navigation
E#myid Matches any E element with ID equal
to "myid".
div#main

26. CSS :: BOX MODEL

27. CSS :: MORE
● display: [none, block, inline, table, inline-
block...],
● position: [absolute, fixed, relative],
● top: [number],
● left: [number],
● float: [left, right, none]

28. LAYOUT :: LAYOUT 1 :: HTML + CSS
HTML
<header></header>
<div id="main"></div>
<footer></footer>
CSS
header, footer {
border: 1px solid red;
height : 55px;
background-color: grey;
border-radius: 7px;
}
#main {
border-radius: 7px;
border: 1px solid red;
background-color: grey;
height: 90px;
margin: 10px 0 10px 0;
}
http://jsbin.com/anafap/7/edit

29. LAYOUT :: LAYOUT 2 :: HTML + CSS
HTML
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
CSS
div {
background-color: grey;
border-radius: 7px;
border: 1px solid red;
float: left;
margin: 0 5px 0 5px;
}
#left, #right {
width: 150px;
height: 250px;
}
#center {
width: 275px;
height: 750px; }http://jsbin.com/asehas/6/edit

30. LAYOUT :: LAYOUT 3 :: HTML + CSS
HTML
<header></header>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<footer></footer>
CSS
#left {
width: 28%;
background-color: grey;
border: 1px solid red;
border-radius: 7px;
margin-right: 2%;
float: left;
}
#right {
width: 70%;
background-color: grey;
border: 1px solid red;
border-radius: 7px;
margin-left: 30%
}
http://jsbin.com/uvafam/6/edit

31. TIME TO CODE

32. JAVASCRIPT
"JavaScript is the Assembly language of WEB"
- Erik Meijer, Dutch computer scientist

33. JQUERY :: SELECTORS
$(selector).method()
For example, $(‘#list’) will return the elements which has the attribute id=”list”.
For more, see http://api.jquery.com/category/selectors/.

34. JQUERY :: DOM MANIPULATIONS
● $(selector).html()
● $(selector).append(html)
● $(selector).remove()
● $(selector).attr('myAttr', 'value')
● $(selector).removeAttr('myAttr')
● $(selector).css('width', 40)
● $(selector).addClass('my-class')
● $(selector).removeClass('my-class')
● $(selector).text()
● $(selector).val()

35. JQUERY :: AJAX
$.ajax({
url: ‘/api/posts’
type: ‘POST’,
data: {},
success: function () {},
error: function () {}
});

36. JQUERY :: EVENTS
● $(selector).click(function () {})
● $(selector).dblclick(function () {})
● $(selector).mousedown(function () {})
● $(selector).mouseup(function () {})
● $(selector).mouseover(function () {})
● $(selector).mouseenter(function () {})
● $(selector).mouseleave(function () {})
● $(selector).on(eventName,
function () {})
● $(selector).off(eventName,
function () {})

37. JAVASCRIPT :: GUIDELINES
Do not populate global space
Use namespaces: create one global variable, e.g. name of your app, and store
everything there.
window.YUI = {};
YUI.version = ‘0.3’,
YUI.start = function () {};

38. JAVASCRIPT :: GUIDELINES
Write JavaScript only in js file
Do NOT write it in HTML:
<a class=”add” onclick=”function () {}”>Add</a>
Instead use jQuery and register the click handler:
$(‘.add’).on(‘click’, function () {});

39. JAVASCRIPT :: GUIDELINES
Write small functions

40. JAVASCRIPT :: GUIDELINES
Write comments

41. QUESTIONS?