Недавно меня спросили о различных учебных материалах, которые я использовал как разработчик-самоучка. Я подумал: «Почему бы не написать об этом и не распространить богатство?» Имейте в виду, что существует множество доступных ресурсов, помимо перечисленных, и что это те немногие, которые позволили мне вырасти как Front-End разработчик.

Поехали!

Основы

Создание заметок с помощью Понятие

  • Понятие для заметок, задач, вики-страниц и баз данных. Он служит универсальным рабочим пространством для заметок, управления задачами и проектами.
  • Возможности: выделите текст, примените цвет шрифта, добавьте изображения, вставьте ссылки или закладки, вложите заметки, добавьте выноски и используйте шаблоны заметок.

Сохраните код с помощью repl.it

  • Repl.it запускается прямо из вашего браузера благодаря интеграции с GitHub и поддержке почти всех основных языков программирования.
  • Особенность: сохраняйте фрагменты кода или пишите примеры для просмотра в любое время.

Редактор кода с VS Code

Вы можете использовать несколько редакторов кода. Visual Studio Code довольно легко установить, легко понять и настроить. Вот список из нескольких расширений кода, которые я использую для автозаполнения и форматирования.

  • Автоматически закрывающий тег - автоматическое добавление закрывающего тега при вводе закрывающей скобки открывающего тега.
  • Автоматический импорт - автоматически находит, анализирует и предоставляет действия кода и автозавершение кода для всех доступных операций импорта.
  • Автоматическое переименование тега - при переименовании одного тега HTML / XML автоматически переименовывайте парный тег HTML / XML.
  • Bracket Pair Colorizer 2 - Позволяет идентифицировать совпадающие скобки по цвету.
  • Подсветка цвета - стили CSS / веб-цвета, найденные в вашем документе.
  • Document This - автоматически генерирует подробные комментарии JSDoc для файлов TypeScript и JavaScript.
  • Dracula Official - Темная тема для VS Code.

  • Формат HTML - форматирует документы HTML с помощью автоматического отступа, переноса и удаления ненужных пробелов с сохранением новой строки.
  • IntelliSense - Автозаполнение для определений классов CSS, которые можно найти в вашей рабочей области.
  • Live Sass Compiler - компилируйте файлы SASS / SCSS в файлы CSS в реальном времени с перезагрузкой браузера в реальном времени.
  • npm - Управление командами npm.
  • Автозаполнение пути - обеспечивает завершение пути для кода Visual Studio.
  • Путь Intellisense - Автозаполнение имен файлов.
  • Sass - выделение синтаксиса, автозаполнение, форматирование.
  • vscode-icons - Настройка иконок.

Учебная литература

Это еще одно дружеское напоминание о том, что это те немногие учебные материалы, которые позволили мне расти как Front-End разработчик. Вы, безусловно, можете найти больше ресурсов в Интернете.

Наслаждаться!

Как работает Интернет

HTML5

CSS3

Не обязательно создавать проекты FCC с использованием кода. Вместо этого я решил изучить Git и Github, чтобы лучше подготовиться к использованию терминала в VS Code.

Строить проекты

Git и Github

  • Зарегистрируйтесь в Github, если хотите стать частью большого сообщества разработчиков ПО с открытым исходным кодом. Потенциальные работодатели и широкая общественность смогут увидеть ваш код и то, как часто вы его фиксируете. Вы всегда можете сделать свои репозитории приватными.
  • Изучите основные командные строки с Git.

Дополнительные ресурсы

Другие способы дизайна

  • Раздел Sass по сертификации интерфейсных библиотек FCC, Расширенный курс CSS Йонаса Шмедтмана по Udemy
  • Раздел начальной загрузки для сертификации интерфейсных библиотек FCC
  • Попутный ветер CSS

JavaScript

  • Прочтите документацию и попытайтесь понять ее
  • Прежде чем перейти к JS, я провел небольшое побочное исследование использования node и npm.
  • Синтаксический подкаст на тему Основы JS

Синтаксис запоминать не нужно. Однако вы должны знать, как использовать инструменты в вашем наборе инструментов.

Вникать в:

  • Числа, NaN, бесконечность
  • переменные, let, var, const
  • Унарные операторы, логические значения, строки
  • Методы, объект, оператор typeof, parseInt и parseFloat
  • Операторы сравнения, двойное и тройное равенство
  • Операторы if, else if, else, вложение условных выражений
  • Истинные и ложные ценности
  • И (&&) Или (||) Не (!)
  • Массивы и помощники массивов: push, pop, shift, unshift, include, join, slice, splice, sort, find, filter, every, reduce, spread, rest
  • Объекты и размещение
  • Циклы: for, while, for of, for in
  • Область видимости: область видимости функции, область видимости блока, лексическая область видимости
  • Функции высшего порядка, функции как аргументы, обратные вызовы, подъем
  • Ключевое слово это
  • Манипуляции с DOM: объект документа, getElementById, getElementsByTagName, getElementsByClassName, querySelector, innerHTML, innerText, append, prepend, remove, события DOM
  • Асинхронный код, обратные вызовы, обещания
  • Async, Await, API

Если после всего этого вы начинаете сомневаться в себе, не позволяйте синдрому самозванца поглотить вас. Обучение - это процесс, а не марафон!

  • Раздел FCC по алгоритмам JavaScript и структурам данных
  • Как создать свою собственную среду тестирования
  • СТРОЙТЕ СВОИ ПРОЕКТЫ!

Другие средства взаимодействия

  • Сертификация интерфейсных библиотек FCC Разделы jQuery, React, Redux, React и Redux
  • Проекты библиотек переднего плана FCC

Больше инструментов!

  • Курсы Udemy от Андрея Нэагои, Анджелы Ю, Кольта Стила, Стивена Грайдера и других!
  • Проект Один
  • Twitter # 100DaysOfCode

Какие еще ресурсы и инструменты вы использовали или используете в настоящее время? Хотелось бы увидеть их в комментариях!