КАК СТАТЬ FRONTEND-РАЗРАБОТЧИКОМ? ЧАСТЬ 1 - ПОШАГОВАЯ ИНСТРУКЦИЯ HD

КАК СТАТЬ FRONTEND РАЗРАБОТЧИКОМ С УРОВНЯ НОЛЬ ДО УРОВНЯ JUNIOR ЧАСТЬ 1 Шаг 1. Введение  Что такое веб  Общение клиент-сервер  Http протокол  Принцип работы браузера Материалы https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works - как работает web (статья) https://developer.mozilla.org/ru/docs/Learn/Pages_sites_servers_and_search_engines - ещё про web (статья) https://developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/World_Wide_Web - и ещё про web (статья) https://www.youtube.com/watch?v=ZupzhLIuPIk - как работает браузер (видео) Шаг 2. Устанавливаем редактор кода, например VSCode  Учимся работать в среде разработки Материалы https://code.visualstudio.com/download - ссылка на скачивание установщика https://www.youtube.com/watch?v=paA-leudslo&feature=youtu.be – обзор VSCode (видео) Шаг 3.Изучаем основы HTML, практикуем  Теги  Метатеги  Viewport  Атрибуты  спецсимволы  Ссылки  Изображения + форматы изображений  Списки  Таблицы  Формы  Семантические теги HTML5  Вставка мультимедиа (видео, аудио) Дополнительно: • изучаем горячие клавиши среды разработки, пользуемся (желательно) • изучаем инструменты разработчика в Chrome (Elements) Материалы: https://html5book.ru/html-html5/ - путеводитель по всем тегам и основам HTML (сайт) https://developer.mozilla.org/ru/docs/Mozilla/Mobile/Viewport_meta_tag - про viewport https://youtu.be/8mK5aY5YOCc - основы HTML (видео, плейлист) https://nikomedvedev.ru/other/vscodeshortcuts/hotkeys.html - горячие клавиши VSCode (онлайн-шпаргалка) https://www.youtube.com/watch?v=FStLGMPHSEI – обзор инструментов разработчика в Chrome (видео) Шаг 4.Изучаем основы СSS  основные свойства o Текст o Шрифт o Цвет o Градиент o Единицы измерения o Рамки o Размеры o Позиционирование o Отступы o Фон  Селекторы  Каскадирование  Псевдоэлементы  Анимация  Flex  Grid  Адаптивная верстка  Работа с SVG Дополнительно: • изучаем инструменты разработчика в Chrome (Style) • изучаем Emmet (желательно) По желанию: • Bootstrap • БЭМ Материалы: https://htmlacademy.ru/ – тренировка CSS + закрепление HTML (интерактивные курсы) https://html5book.ru/css-css3/ - путеводитель по CSS (сайт) https://youtu.be/IsZDtOYUWvk (видео, плейлист) – основы CSS либо https://youtu.be/NkmZl1Yy94Q (видео, плейлист) – основы CSS https://learn.javascript.ru/css-transitions (учебник) - про анимации https://youtu.be/7Lg-438gAc8 (видео , плейлист) – подробно про Flex https://youtu.be/-fDqBEjfzGo – (видео) – про Grid https://www.youtube.com/watch?v=TNX0-JLdM_U (видео)– про SVG https://getbootstrap.com/ - Bootstrap https://ru.bem.info/ - про БЭМ Шаг 5. Изучаем git  устанавливаем git bash (ссори,в видео описка),  знакомимся с github,  заводим свой первый репозиторий,  практикуем команды git  создаём файл .gitignore Обязательно знать команды: o Git add o Git status o Git commit o Git push o Git pull o Git merge o Git checkout Материалы: https://youtu.be/PEKN8N