Web UI

Lesson 1: Course introduction

Table of content

  • A bit of history
  • Current situation
  • Browsers, engines and platform
  • Technical restrictions of web development
  • Tools
  • Resources
  • Home task

Go to slides

Lessons 2-3: HTML section

Key points:

  • Markup languages
  • HTML Specification
  • Tags, Elements, Attributes
  • Documents, client/server side rendering
  • Semantic and accessibility

Lesson 2

  • Markups history and types: HTML vs XML
  • HTML document structure, HTML syntax
  • Applications grows up, HTML5
  • Lets look into specification
  • Types of elements, attributes
  • Lets run site and inspect this
  • Overview of meta-tags
  • Overview of structural tags

Lesson 3

  • Scripts and styles embedding
  • Resource loading, page lifecycle
  • Semantic and accessibility

Lessons 4-6: CSS section

Section key points:

  • CSS specifications and trendings
  • CSS syntax, units, properties
  • Page layout: tables, floats, flexbox, grids
  • Documents, client/server side rendering
  • Practice, practice, practice

Lesson 4

Lesson key points:

  • CSS specifications evolution
  • CSS syntax, rules, properties, selectors, values
  • Advanced selectors, conflicts and specificity
  • Units
  • Referencing
  • Flags and vendors prefixes
  • Decorative properties

Lesson 5

Lesson key points:

  • Page layout
  • Box model
  • Positioning
  • Layouts evolution

Lesson 6

Lesson key points:

  • Build own grid system
  • Flexbox

Lessons 7-12: JavaScript section

Section key points:

  • Syntax
  • Build-ins
  • Classes, objects, prototypes
  • Modules
  • Functional programming

Lesson 7

Lesson key points:

  • Referencing
  • Data types
  • Conditions, operators, expressions

Lesson 8

Lesson key points:

  • Objects, properties, build-ins

Lesson 9

Lesson key points:

  • Prototypes

Lesson 10

Lesson key points:

  • Arrays, dates
  • Functions

Lesson 11

Lesson key points:

  • Classes and modules
  • AMD, CommonJS, UMD

Lesson 12

Lesson key points:

  • Functional programming

Lessons 13-19

Section key points:

  • Specifications
  • DOM, elements, operations
  • BOM, browser APIs
  • AJAX, server side communication
  • JS execution runtime

Lesson 13

Lesson key points:

  • DOM Specifications
  • DOM, elements, operations
  • Page rendering

Lesson 14

Lesson key points:

  • Events

Lesson 15

Lesson key points:

  • Forms, controls, buttons
  • Navigation and history

Lesson 16

Lesson key points:

  • HTTP protocol
  • REST
  • XML/JSON

Lesson 17

Lesson key points:

  • AJAX, XHR
  • Fetch

Lesson 18

Lesson key points:

  • JSONP, CORS
  • Promises

Lesson 19

Lesson key points:

  • JS execution

Additional section

Section key points:

  • Storages
  • iframe
  • Web components
  • Animations
  • CSS Grids
  • NodeJS
  • ES2015
  • Regular Expressions
  • Popular libraries