“A modern webmaker.”

After 4 years of NTF!


Hi! My name is Robert Sedovšek,

I build things at Celtra


This talk is about



HyperText Markup Language is the main markup language for displaying web pages and other information that can be displayed in a web browser.


<!doctype html>
	<title>A modern webmaker</title>
	<h1>This is the heading</h1>
	<p>And this is the first paragraph.</p>


Document structure in HTML.


CSS encodes the style of how the formatted content should be graphically displayed.

You are the CSS to my HTML.


I'm the title, feel free to STYLE me!

The relaunch of Smashing Magazine has sparked quite a discussion in the community. Some of you feel that the design is "too responsive", others feel that the ads are too prominent, but most of you liked the lean, clean new layout. We hope that the new design makes reading more enjoyable — which is what any online magazine should aspire to, right? We are still working on fixing minor bugs, and we’re continually testing minor layout changes. We encourage you to send us feedback or comments — we'd sincerely appreciate that!


JavaScript examples

/* Dates */
var date = new Date(); // Sun Dec 09 2012 22:17:09 GMT+0100 (CET)
var minute = date.getMinutes(); // 17

/* Event handling */
document.addEventListener("keyup", keyUpHandler);
function keyUpHandler(ev) {
	if (ev.keyCode == 13) {
		alert('You pressed enter');


(Learning) Resources



Browser release cycle has decreased down to ~2 months (Chrome).

Text editor

Source: Addy Osmani: The New & Improved Developer Toolbelt

Text editor

Command line

Learn to love the command line. It isn't scary. You know how to use PhotoShop which has 300 buttons. That's scary.
— Stephen Hay
Shallow learning curve

Source: Gašper Kozak: The steep learning curve misunderstanding

Command line

Source: Rebecca Murphey: A Baseline for Front-End Developers

Command line


Git (/ɡɪt/) is a distributed revision control and source code management (SCM) system with an emphasis on speed
— Wikipedia

Git and GitHub

Your potential employer will check your GitHub account.

It is the prefered only way to participate in the rich open-source community.

Learning resources

JavaScript libraries

Do not reinvent the wheel!

Caution: handle with care!
If you don't know why you are using it, you probably don't need it.

JavaScript frameworks

JavaScript frameworks

Those that rely on model–view–controller (MVC) application design paradigm.
Suitable for single-page web applications.

Choosing your framework

TodoMVC - a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

Other tools

Setting up your Workspace

Server, the machine

Server, configuration

Image tag cloud of all the possible technologies

Work process

Startup inspirational poster - Get Shit Done

Startup Vitamins: Aaron Levie - Co-founder & Chief Executive Officer of Box

Startup inspirational poster

Startup Vitamins: If a user is having a problem, it's our problem - Co-founder of Apple Inc.

Work process

This is a team work. A grumpy guy coding in his/her basement and making shit load of money is a myth!

“Get out of the building” and talk to the only folks who matter—your customers.
- Steve Blank, The Startup Owner Manual

Work process, product design team

think think harder sketch do wireframes ask people create mockups think outside of the box get out of the building plan design project test test on yourself test on your potential users illustrate design polish pixel-perfection UX help support

Work process, server-side engineers

configure server(s) setup databases scale maintaine scalability php scala python java mysql Node.Js OLAP cubes analyzer tracker API json zip gzip exports git http rest hadoop oop deployment test merge master push to production pray wake up at the middle of the night

Work process, front-end development

solving problems most haven't even heard of html5 css css3 compresses images sass less compas Coffeescript JSHint JSLint AMD & ES6 Modules unit tests PhantomJS handlebars jQuery jQuery Mobile Robust build script: filename revisions image optimization webkit render engine minification concat tooling

Is hiring!



Go check our website for details - celtra.com/about/careers


You're gonna spend ~1/3 of your life working.
You better find something you realy love doing!


Don't worry much about the money!
If you're good at what you do, the money will follow.


Make yourself useful.