Недавно меня спросили о различных учебных материалах, которые я использовал как разработчик-самоучка. Я подумал: «Почему бы не написать об этом и не распространить богатство?» Имейте в виду, что существует множество доступных ресурсов, помимо перечисленных, и что это те немногие, которые позволили мне вырасти как 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 разработчик. Вы, безусловно, можете найти больше ресурсов в Интернете.
Наслаждаться!
Как работает Интернет
- Как создавался Интернет
- Интересно посмотреть на Интернет-кабели
- Как работают веб-браузеры?
- Что такое консоль браузера?
- Общее понимание Как работают HTML, CSS и JS
- Java и JavaScript не являются взаимозаменяемыми терминами.
HTML5
- Free Code Camp (FCC) Адаптивный веб-дизайн - базовый HTML и HTML5
- Ресурсы HTML5 от W3School
- Синтаксический подкаст на тему Доступность
CSS3
- Адаптивный веб-дизайн FCC - базовый CSS, прикладной визуальный дизайн, прикладная доступность, принципы адаптивного веб-дизайна CSS Flexbox, CSS Grid
- CSS Flexbox Froggy и CSS Grid Garden
- Шпаргалки по CSS - CSS Almanac, Flexbox, Калькулятор специфичности, CSS Grid
- Ресурсы CSS3 от W3School с упором на свойства, селекторы, изменение текста, шрифта, изображений, БЭМ, px против em против rem, отзывчивый пользовательский интерфейс, медиа-запросы.
- Адаптивный веб-дизайн FCC - СТРОЙТЕ СВОИ ПРОЕКТЫ!
Не обязательно создавать проекты FCC с использованием кода. Вместо этого я решил изучить Git и Github, чтобы лучше подготовиться к использованию терминала в VS Code.
Строить проекты
Git и Github
- Зарегистрируйтесь в Github, если хотите стать частью большого сообщества разработчиков ПО с открытым исходным кодом. Потенциальные работодатели и широкая общественность смогут увидеть ваш код и то, как часто вы его фиксируете. Вы всегда можете сделать свои репозитории приватными.
- Изучите основные командные строки с Git.
Дополнительные ресурсы
- Анимация
- Поддержка браузера
- Цвета - Палитра, Охота за цветом.
- Шрифты
- Иконки - Font Awesome, IcoMoon.
- Изображения и видео - Pexels, Unsplash
Другие способы дизайна
- Раздел 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
Какие еще ресурсы и инструменты вы использовали или используете в настоящее время? Хотелось бы увидеть их в комментариях!