SlideShare a Scribd company logo
HTML, CSS, JS
is not magic
Привет,
я Александр Фесенко
● Front-end Lead команды в Master of Code Ukraine
● Ментор Masters Academy
@smithua
2
План занятия
1. Что такое HTML
2. Что такое CSS
3. Что такое JavaScript
4. Что такое Developer Tools
HTML (Hyper Text Markup Language)
● Это в первую очередь стандарт разметки документа
● Любая веб страница состоит из HTML элементов (Tags)
● На самой странице, HTML теги вы не увидите, вместо них
показывается контент
Tags
HTML теги это имена элементов окружены угловыми скобками:
<tagname>тут ваш контент</tagname>
Html, css, js
Html, css, js
CSS (Cascading Style Sheets)
● Отвечает за раскладку веб-страницы
● Описывает как HTML элементы будут выглядеть на странице
● Имеет глобальную область видимости
Html, css, js
Html, css, js
JavaScript
● Язык программирования
● Может выполняться на клиенте и на сервере (NodeJS)
● Мультипарадигменный
● Динамическая типизация
● Автоматическое управление памятью
● Прототипное программирование (нет Class)
Грамматика и типы
Объявление переменных
Присваивание значений и
область видимости
Html, css, js
Структуры и типы данных
Шесть типов данных, которые являются примитивами:
1. Boolean => true или false.
2. null => Специальное ключевое слово, обозначающее нулевое или «пустое»
значение.
3. undefined => переменная, не имеющая присвоенного значения, обладает типом
undefined.
4. Number => число ( 5 или 3.4567 ).
5. String => строка ( “Hello, World!” ).
6. Symbol (ECMAScript 6)
и Object => структура данных, содержит в себе данные и инструкции по
работе с ними.
Developer Tools
● Must have инструмент для любого разработчика и не только
Useful links
HTML
CSS
JavaScript
Презентация по JavaScript
A guide to flexbox

More Related Content

PDF
HTML. Быстрое погружение. Влад Савицкий
PPT
Css part1
PPT
Css part2
PPT
Lection1
PDF
03 - Web-технологии. Язык разметки HTML
PPTX
Язык HTML
PPTX
Язык HTML
PPTX
Презентация на тему "WEB-программирование"
HTML. Быстрое погружение. Влад Савицкий
Css part1
Css part2
Lection1
03 - Web-технологии. Язык разметки HTML
Язык HTML
Язык HTML
Презентация на тему "WEB-программирование"

What's hot (20)

PPT
сысоев андрей
PPT
сысоев андрей
PDF
Основы языка HTML
PPTX
Frontend
PPT
основы нтмл
PDF
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
PPT
Web весна 2012 лекция 8
PPTX
Стажировка-2013, разработчики, занятие 8. Html, CSS
PDF
Css Intro. Vlad Savitsky
PPTX
Основы CSS
PPTX
Основы CSS (HTML5 тема 02 - основы CSS)
PPT
презентация по миру
PPTX
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
PPS
основы языка Html
PPT
Web осень 2012 лекция 8
PPTX
PPT
Лекция 10. Основы CSS.
сысоев андрей
сысоев андрей
Основы языка HTML
Frontend
основы нтмл
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
Web весна 2012 лекция 8
Стажировка-2013, разработчики, занятие 8. Html, CSS
Css Intro. Vlad Savitsky
Основы CSS
Основы CSS (HTML5 тема 02 - основы CSS)
презентация по миру
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
основы языка Html
Web осень 2012 лекция 8
Лекция 10. Основы CSS.
Ad

Similar to Html, css, js (20)

PDF
DOM-шаблонизаторы – не только "быстро"
PPTX
Мировые информационные ресурсы. Лекция 4
PPTX
Тема 1. Введение в HTML
PDF
kranonit S15 Vladimir Melnik - Ruby on Rails, BDD
PDF
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
PDF
Вёрстка по методологии БЭМ
PPTX
Лекция 16. Введение в HTML.pptx
PPTX
559646.pptx
PPTX
Html, Css, Java Script
PPTX
Современный подход к локализации на примере одного проекта
PPT
PDF
Лекция #4. Каскадные таблицы стилей
PPT
Html 1 Урок
PDF
Никулин Павел. Machine learning для текстового анализа
PDF
Лекция #3. Введение в языки разметки web-страниц
PDF
J query tutorial-for-beginners-1.0.1
PPT
JavaScript
PPT
XForms новое поколение веб-форм
DOM-шаблонизаторы – не только "быстро"
Мировые информационные ресурсы. Лекция 4
Тема 1. Введение в HTML
kranonit S15 Vladimir Melnik - Ruby on Rails, BDD
Компонентная разработка на Stylus, Jade, Typescript - Леонид Ширманов
Вёрстка по методологии БЭМ
Лекция 16. Введение в HTML.pptx
559646.pptx
Html, Css, Java Script
Современный подход к локализации на примере одного проекта
Лекция #4. Каскадные таблицы стилей
Html 1 Урок
Никулин Павел. Machine learning для текстового анализа
Лекция #3. Введение в языки разметки web-страниц
J query tutorial-for-beginners-1.0.1
JavaScript
XForms новое поколение веб-форм
Ad

More from Masters Academy (20)

PPTX
Ruby Exceptions
PPTX
Basic Net technologies
PPTX
Databases
PPTX
Environment
PPTX
Development Methodologies
PPTX
Object-Oriented Programming
PPTX
PPTX
Processing
PPTX
Serialization
PPTX
Serverless
PPTX
Data Types
PPTX
How to be up todate
PPTX
Call stack, event loop and async programming
PPTX
Server architecture
PPTX
Serialization
PPTX
Data types
PPTX
Net Technologies
PPTX
Net Technologies
PDF
Masters Academy workshop BA User stories: be simple, be useful
Ruby Exceptions
Basic Net technologies
Databases
Environment
Development Methodologies
Object-Oriented Programming
Processing
Serialization
Serverless
Data Types
How to be up todate
Call stack, event loop and async programming
Server architecture
Serialization
Data types
Net Technologies
Net Technologies
Masters Academy workshop BA User stories: be simple, be useful

Html, css, js

  • 1. HTML, CSS, JS is not magic
  • 2. Привет, я Александр Фесенко ● Front-end Lead команды в Master of Code Ukraine ● Ментор Masters Academy @smithua 2
  • 3. План занятия 1. Что такое HTML 2. Что такое CSS 3. Что такое JavaScript 4. Что такое Developer Tools
  • 4. HTML (Hyper Text Markup Language) ● Это в первую очередь стандарт разметки документа ● Любая веб страница состоит из HTML элементов (Tags) ● На самой странице, HTML теги вы не увидите, вместо них показывается контент
  • 5. Tags HTML теги это имена элементов окружены угловыми скобками: <tagname>тут ваш контент</tagname>
  • 8. CSS (Cascading Style Sheets) ● Отвечает за раскладку веб-страницы ● Описывает как HTML элементы будут выглядеть на странице ● Имеет глобальную область видимости
  • 11. JavaScript ● Язык программирования ● Может выполняться на клиенте и на сервере (NodeJS) ● Мультипарадигменный ● Динамическая типизация ● Автоматическое управление памятью ● Прототипное программирование (нет Class)
  • 16. Структуры и типы данных Шесть типов данных, которые являются примитивами: 1. Boolean => true или false. 2. null => Специальное ключевое слово, обозначающее нулевое или «пустое» значение. 3. undefined => переменная, не имеющая присвоенного значения, обладает типом undefined. 4. Number => число ( 5 или 3.4567 ). 5. String => строка ( “Hello, World!” ). 6. Symbol (ECMAScript 6) и Object => структура данных, содержит в себе данные и инструкции по работе с ними.
  • 17. Developer Tools ● Must have инструмент для любого разработчика и не только