Lesson 1: Course introduction

Table of content

  • Tools for front-end developers
  • Resources
  • A bit of history
  • Current situation
  • Browsers, engines and platform
  • Technical restrictions of web development
  • Home task
Atom
Sublime Text

Source code editors

Notepad++
WebStorm

Node and NPM
Node Package Manager
Node

JavaScript sandboxes

JS bin
JS fiddle
CodePen

Chrome extensions

Eye dropper

open source extension for Google Chrome which allows you to pick colors from various sources

Page ruler

lets your draw out a ruler to any page and displays the width, height and position of it

Other useful tools

Postman
ConEmu
Emmet

caniuse.com - browser support tables for modern web technologies

Git & GitHub

  • Home for you code
  • Allow you to explore other projects
  • GitHub Pages - hosted static websites directly from you repository
  • Git - most powerful and flexible source control system
  • Git how to link

Specifications

Books

"JavaScript: The Definitive Guide"
by David Flanagan
"You Don't Know JS" (book series)
by Kyle Simpson
"JavaScript: The Good Parts"
by Douglas Crockford
"CSS3: The Missing Manual"
by David Sawyer McFarland

Podcasts

Useful blogs

Evolution of the web

Everything is web based

  • Desktop
  • Mobile
  • TV
  • Glasses
  • Watches
  • Cars
  • Homes

Statistic

Statistic

Statistic

Technical restrictions of web development

Desktop

  • wide screen
  • mouse/tachpad
  • keyboard
  • “work” context
  • fast connection
  • multitasking

Tablet

  • smaller viewport
  • fingers as the primary
  • input device
  • optional keyboard
  • “relax” context
  • mixed connection
  • single task

Phone

  • tiny viewport
  • finger as the only
  • input device
  • 'hurry' context
  • slow connection
  • single task

Home task

  • Everyone will need to create account on github
  • Watch Allen’s presentation and choose what hat you want to wear more than others
  • Create repository for lecture 1 push there a text file with your answer
  • Try this git how to