Step 1.1 Пройти все бесплатные курсы от HTML-Academy (обучение от FSD)

Эта цель ещё писалась года 2 назад и томилась в черновиках. Сейчас на сайте Html-Academy некоторые курсы обновились. Тем более, я начала проходить обучение от FSD и там первым пунктом идёт прохождение этих курсов.

Задание 1. Изучение верстки. 1-3 недели

Описание задания

В основе всей работы frontend-разработчика лежит создание интерфейсов. Первый и важный навык — умение скомпоновать внешний вид на HTML+СSS по макетам дизайнера.

===Часть 1

Мы рекомендуем начать обучение с крутого и полезного сервиса — HTML Academy. Базовый минимум — пройти все бесплатные курсы из этого сервиса. Платную версию проходить не обязательно, вы можете сразу перейти ко второй части и изучать материал по мере необходимости на других бесплатных ресурсах. Если решите пройти платные курсы, то можно взять подписку на месяц (повторюсь, не обязательно) — 390 руб. Вам должно хватить этого времени, чтобы ознакомиться с темами. HTML Academy не единственный обучающий ресурс по вёрстке, вы можете сами выбрать любой другой источник, главное просто свериться с содержанием курсов, чтобы не пропустить какие-то важные темы (в Академии просто почти все нужные темы достаточно полно охвачены)===Часть 2Вам необходимо изучить Git (систему контроля версий). Для изучения мы рекомендуем — https://githowto.com/ru.Задание вам даст

• Уверенные знания вёрстки с HTML и CSS. Чтобы понять примерный объём, можно посмотреть в содержание всех курсов по HTML/CSS у HTML Academy (курсы по JS можно не учитывать). Если вы отлично владеете темами из этого содержания, можете саму Академию не проходить.
• Уверенное владение Git. Если вы уже владеете следующими темами, то можете по гиту пока больше не изучать и идти дальше:
  • Индексация
  • Коммиты
  • Ветки (Создание, переключение)
  • Мерж веток
  • Просмотр изменений между коммитами или между ветками
  • Разрешение конфликтов
  • Клонирование репозиториев
  • Подключение нескольких удалённых репозиториев

Дополнительный материал к первому блоку Материалы не являются обязательными и прикладываются в качестве рекомендаций. Вы можете добавить порталы и ссылки в закладки. По мере прохождения курсов мы будем выдавать вам ссылки и порталы, где можно читать дополнительные материалы, искать ответы и следить за новостями отрасли:

• Книга «HTML и CSS. Разработка и дизайн веб-сайтов» Джон Дакетт
• Книга «Новая большая книга CSS» Дэвид Макфарланд (https://yadi.sk/d/L7gbNNXQcGdM4A , 2014 года 3-е издание. Большая книга CSS, 2016 года. Новая большая книга CSS)
• Основа методологии БЭМ
• HTML on MDN
• HTML и HTML5. Описание тегов по основным разделам
• Krekotun — инструкции и порталы для начинающих разработчиков
• Предлагайте свои дополнительные материалы
  • https://learn.freecodecamp.org/ — бесплатный аналог htmlacademy
  • http://htmlbook.ru/ — теория и есть несложные задачки на верстку (для практики полезная штука) дополнительно к описанию хочу отметить наличие на этом ресурсе справочников, которые можно использовать как шпаргалки:) http://htmlbook.ru/html - по html http://htmlbook.ru/css - по css https://webshake.ru/test-html/start - тест по html, проверь себя https://code-basics.ru/languages/javascript - основы JS, интерактивный бесплатный курс https://tproger.ru/translations/flex-properties-on-css/ - анимированое руководство по flex http://howtocenterincss.com/ - Как отцентрировать все что угодно https://fructcode.com/ru/courses/ - интересный сервис, есть как и база HTML/CSS, так и JS + jQuery для следующего этапа
  • https://webref.ru/ — хорошие туториалы по основам
  • https://htmlreference.io/ — инфа по html тегам
  • https://cssreference.io/ — инфа по css свойствам
  • https://flexboxfroggy.com/#ru — игра для изучения flex
  • http://cssgridgarden.com/#ru — игра для изучения grid
  • https://tpverstak.ru/flex-cheatsheet/ — хорошая шпаргалка по flex
  • https://frontender.info/centering-css-complete-guide/ — все о центрировании в css (много способов для разных задач)
  https://git-scm.com/book/ru/v2 - настольная книга по git Для изучения Git рекомендую эту игру: https://learngitbranching.js.org https://designpub.ru/long-dash-c0b28fab6fdb - о правилах типографики в вебе https://www.youtube.com/watch?v=Rke_Z1-nvUM&list=PL3LQJkGQtzc5rDeb7FjACNb6sOW300yA0 - Git для самых маленьких, наглядно https://www.w3schools.com/ -- материал разбит по блокам, можно посмотреть код любого примера, после блоков есть задания на повторение пройденного https://habr.com/ru/post/463923/ Контейнер больше не нужен https://flexboxfroggy.com/ Игра, позволяет изучить флексы http://howtocenterincss.com/ – how to center in CSS.