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



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?


Text editor

Browser with good inspector (Firefox/Chrome)

Show something already!

HTML basics

Box model

Display (block, inline, etc)


HTML elements

Semantic difference

Different default styles


MDN (better access it through Google)

Stack Overflow

CSS basics

How to add CSS to a page


CSS vs inline styles


Let's start your task

Let's use YouTube.com as an example

Cross-browser markup



Experimental features and vendor prefixes


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


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!

Made with Slides.com