Web technologies: session 1

Intro to static web sites development

Sergey Smyshlyaev / @sesm

About me

Employed as a Software Developer since 2008

Doing web dev since 2012

About this course

The only way to learn web dev is practice

Check out 180 sites in 180 days

There are fundamental knowledge, but practice should come first

Marks are mostly for your self-assesment

We are going to avoid frameworks/libs

Essential skills

English

Googling

Asking for help

Not giving up

Show of hands

Who came with a computer

Web dev experience anyone?

Git/Github experience?

Are you ok with using VK group for coordination?

Tools

Text editor

Browser with good inspector (Firefox/Chrome)

Show something already!

HTML basics

Box model

Display (block, inline, etc)

Position

HTML elements

Semantic difference

Different default styles

Sources

MDN (better access it through Google)

Stack Overflow

CSS basics

How to add CSS to a page

Selectors

CSS vs inline styles

MOAR CODEZ!

Let's start your task

Let's use YouTube.com as an example

Cross-browser markup

Normalization

Normalize.css

Experimental features and vendor prefixes

caniuse.com

Normalize the page

Responsive design

Media queries

Browser tools

Let's implement mobile version

Basic usage of JavaScript

How to add scripts

What is DOM?

Selectors and event listeners

Who heard about jQuery?

Vanilla JS

You don't need jQuery

Use JS for scrolling effects

Notes on doing markup

You would normally start with design first

Going top-down and using colored blocks is still a good idea

If you have an issue go back to colored blocks

Make website look decent

Color scheme

Stock photos

Content

Notes about frameworks

Bootstrap, Foundation, Materialize-css

It's good to understand what they are doing

Frameworks usually include normalization

The less JS - the better

Time to get your tasks and start hacking!