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

What's hot (20)

сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
Denis Latushkin
 
Frontend
FrontendFrontend
Frontend
Masters Academy
 
основы нтмл
основы нтмлосновы нтмл
основы нтмл
olgaoov
 
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
SmartTools
 
Web весна 2012 лекция 8
Web весна 2012 лекция 8Web весна 2012 лекция 8
Web весна 2012 лекция 8
Technopark
 
Стажировка-2013, разработчики, занятие 8. Html, CSS
Стажировка-2013, разработчики, занятие 8. Html, CSSСтажировка-2013, разработчики, занятие 8. Html, CSS
Стажировка-2013, разработчики, занятие 8. Html, CSS
7bits
 
Css Intro. Vlad Savitsky
Css Intro. Vlad SavitskyCss Intro. Vlad Savitsky
Css Intro. Vlad Savitsky
Vlad Savitsky
 
Основы CSS
Основы CSSОсновы CSS
Основы CSS
sneemb
 
Css
CssCss
Css
Andrey Dolinin
 
CSS
CSSCSS
CSS
United Design
 
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
Noveo
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
kuzeenka31
 
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
7bits
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
mmlllll
 
Web осень 2012 лекция 8
Web осень 2012 лекция 8Web осень 2012 лекция 8
Web осень 2012 лекция 8
Technopark
 
IT Center
IT CenterIT Center
IT Center
Victor Salimgareev
 
Лекция 10. Основы CSS.
Лекция 10. Основы CSS.Лекция 10. Основы CSS.
Лекция 10. Основы CSS.
Alexey Furmanov
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
 
сысоев андрей
сысоев андрейсысоев андрей
сысоев андрей
Vlado Sudin
 
Основы языка HTML
Основы языка HTMLОсновы языка HTML
Основы языка HTML
Denis Latushkin
 
основы нтмл
основы нтмлосновы нтмл
основы нтмл
olgaoov
 
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
Стажировка 2016-07-06 03 Евгений Тарасенко. Основы HTML и CSS (часть 1).
SmartTools
 
Web весна 2012 лекция 8
Web весна 2012 лекция 8Web весна 2012 лекция 8
Web весна 2012 лекция 8
Technopark
 
Стажировка-2013, разработчики, занятие 8. Html, CSS
Стажировка-2013, разработчики, занятие 8. Html, CSSСтажировка-2013, разработчики, занятие 8. Html, CSS
Стажировка-2013, разработчики, занятие 8. Html, CSS
7bits
 
Css Intro. Vlad Savitsky
Css Intro. Vlad SavitskyCss Intro. Vlad Savitsky
Css Intro. Vlad Savitsky
Vlad Savitsky
 
Основы CSS
Основы CSSОсновы CSS
Основы CSS
sneemb
 
Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)Основы CSS (HTML5 тема 02 - основы CSS)
Основы CSS (HTML5 тема 02 - основы CSS)
Noveo
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
kuzeenka31
 
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
Стажировка-2014, занятие 7. Языки разметки, HTML5, CSS3
7bits
 
основы языка Html
основы языка Htmlосновы языка Html
основы языка Html
mmlllll
 
Web осень 2012 лекция 8
Web осень 2012 лекция 8Web осень 2012 лекция 8
Web осень 2012 лекция 8
Technopark
 
Лекция 10. Основы CSS.
Лекция 10. Основы CSS.Лекция 10. Основы CSS.
Лекция 10. Основы CSS.
Alexey Furmanov
 

Similar to Html, css, js (20)

Jquery_tutorial_for-beginners
Jquery_tutorial_for-beginnersJquery_tutorial_for-beginners
Jquery_tutorial_for-beginners
Alena Balakina
 
J query шевчук
J query шевчукJ query шевчук
J query шевчук
Sergey Pashkov
 
J query tutorial-for-beginners-1.0.0
J query tutorial-for-beginners-1.0.0J query tutorial-for-beginners-1.0.0
J query tutorial-for-beginners-1.0.0
Сергей Ядров
 
J query tutorial-for-beginners-1.0.1
J query tutorial-for-beginners-1.0.1J query tutorial-for-beginners-1.0.1
J query tutorial-for-beginners-1.0.1
labzzzz
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptx
exxdisillusion69
 
HTML
HTMLHTML
HTML
L1nk1502
 
Роман Комаров — «Механизм работы браузера»
Роман Комаров — «Механизм работы браузера»Роман Комаров — «Механизм работы браузера»
Роман Комаров — «Механизм работы браузера»
Yandex
 
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 Урок
Nexa50
 
Html, Css, Java Script
Html, Css, Java ScriptHtml, Css, Java Script
Html, Css, Java Script
Business School «Digitov»
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
ssuser3896e2
 
Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4
Dmitriy Krukov
 
основы Html
основы Htmlосновы Html
основы Html
Alexander Babich
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страниц
Яковенко Кирилл
 
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
DataArt
 
Лекция 8. HTML основы. Часть 1.
Лекция 8. HTML основы. Часть 1.Лекция 8. HTML основы. Часть 1.
Лекция 8. HTML основы. Часть 1.
Alexey Furmanov
 
Webuibasics - Lesson 2 - HTML5 Layouts (in russian)
Webuibasics - Lesson 2 - HTML5 Layouts (in russian)Webuibasics - Lesson 2 - HTML5 Layouts (in russian)
Webuibasics - Lesson 2 - HTML5 Layouts (in russian)
xasima
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
mmmitioglo
 
Jquery_tutorial_for-beginners
Jquery_tutorial_for-beginnersJquery_tutorial_for-beginners
Jquery_tutorial_for-beginners
Alena Balakina
 
J query tutorial-for-beginners-1.0.1
J query tutorial-for-beginners-1.0.1J query tutorial-for-beginners-1.0.1
J query tutorial-for-beginners-1.0.1
labzzzz
 
Лекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptxЛекция 16. Введение в HTML.pptx
Лекция 16. Введение в HTML.pptx
exxdisillusion69
 
Роман Комаров — «Механизм работы браузера»
Роман Комаров — «Механизм работы браузера»Роман Комаров — «Механизм работы браузера»
Роман Комаров — «Механизм работы браузера»
Yandex
 
Html 1 Урок
Html 1 УрокHtml 1 Урок
Html 1 Урок
Nexa50
 
Тема 1. Введение в HTML
Тема 1. Введение в HTMLТема 1. Введение в HTML
Тема 1. Введение в HTML
ssuser3896e2
 
Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4
Dmitriy Krukov
 
Лекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страницЛекция #3. Введение в языки разметки web-страниц
Лекция #3. Введение в языки разметки web-страниц
Яковенко Кирилл
 
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
Александр Кашеверов — Коротко про WEB: HTML, CSS, JS.
DataArt
 
Лекция 8. HTML основы. Часть 1.
Лекция 8. HTML основы. Часть 1.Лекция 8. HTML основы. Часть 1.
Лекция 8. HTML основы. Часть 1.
Alexey Furmanov
 
Webuibasics - Lesson 2 - HTML5 Layouts (in russian)
Webuibasics - Lesson 2 - HTML5 Layouts (in russian)Webuibasics - Lesson 2 - HTML5 Layouts (in russian)
Webuibasics - Lesson 2 - HTML5 Layouts (in russian)
xasima
 
lesson3_HTML_rus.pdf
lesson3_HTML_rus.pdflesson3_HTML_rus.pdf
lesson3_HTML_rus.pdf
mmmitioglo
 
Ad

More from Masters Academy (20)

Ruby Exceptions
Ruby ExceptionsRuby Exceptions
Ruby Exceptions
Masters Academy
 
API
APIAPI
API
Masters Academy
 
Basic Net technologies
Basic Net technologiesBasic Net technologies
Basic Net technologies
Masters Academy
 
Databases
DatabasesDatabases
Databases
Masters Academy
 
Environment
EnvironmentEnvironment
Environment
Masters Academy
 
Development Methodologies
Development MethodologiesDevelopment Methodologies
Development Methodologies
Masters Academy
 
Object-Oriented Programming
Object-Oriented ProgrammingObject-Oriented Programming
Object-Oriented Programming
Masters Academy
 
Testing
TestingTesting
Testing
Masters Academy
 
Processing
ProcessingProcessing
Processing
Masters Academy
 
Serialization
SerializationSerialization
Serialization
Masters Academy
 
Serverless
ServerlessServerless
Serverless
Masters Academy
 
Data Types
Data TypesData Types
Data Types
Masters Academy
 
How to be up todate
How to be up todateHow to be up todate
How to be up todate
Masters Academy
 
Call stack, event loop and async programming
Call stack, event loop and async programmingCall stack, event loop and async programming
Call stack, event loop and async programming
Masters Academy
 
Server architecture
Server architectureServer architecture
Server architecture
Masters Academy
 
Serialization
SerializationSerialization
Serialization
Masters Academy
 
Data types
Data typesData types
Data types
Masters Academy
 
Net Technologies
Net TechnologiesNet Technologies
Net Technologies
Masters Academy
 
Net Technologies
Net TechnologiesNet Technologies
Net Technologies
Masters Academy
 
Masters Academy workshop BA User stories: be simple, be useful
Masters Academy workshop BA User stories: be simple, be usefulMasters Academy workshop BA User stories: be simple, be useful
Masters Academy workshop BA User stories: be simple, be useful
Masters Academy
 
Ad

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 инструмент для любого разработчика и не только