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

КАК СТАТЬ 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/PEKN8NtBDQ0 - основы Git(видео, плейлист)
https://youtu.be/QkY8lXZuiqQ - более подробный курс по Git(видео, плейлист)
https://git-scm.com/book/ru/v1 - пособие по Git
https://git-scm.com/book/ru/v1/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-Git – инструкция по установке Git
Шаг 6. Верстка первого сайта

 Используем Git
 Адаптивная вёрстка
 Анимация
 Есть переходы по ссылкам

Желательно использовать как можно больше полученных знаний для их закрепления.

Материалы:
https://www.behance.net/search?content=projects&sort=appreciations&time=week&featured_on_behance=true&search=free%20template (ресурс для дизайнеров)– здесь можно найти макеты

https://lifehacker.ru/open-psd-without-photoshop/ (статья)- чем открыть макет, если нет photoshop
https://validator.w3.org/unicorn/?ucn_task=full-css&ucn_lang=ru#validate-by-input+task_full-css – проверка css на валидность
https://validator.w3.org/#validate_by_input – проверка html на валидность
tatyanafrontend@gmail.com – для шедевров! 

Видео КАК СТАТЬ FRONTEND-РАЗРАБОТЧИКОМ? ЧАСТЬ 1 - ПОШАГОВАЯ ИНСТРУКЦИЯ канала frontendgirl