100 days of code frontend
1.0.0
Примечание: этот ресурс старый! Я буду архивировать этот репозиторий к концу июля 2021 года, так как я чувствую, что многие из рекомендаций здесь устарели для обучения веб-разработке в 2021 году.
Пожалуйста, поддержите это репо, дав ему звезду ️ в верхней части страницы и следуйте за мной для получения дополнительных ресурсов!
Хотите узнать больше о разработке фронта? Учитывать:
Это несколько самоуверенная учебная программа для обучения фронтальной разработке в течение #100daysOfCode. По мере того, как он охватывает широкий спектр фронтовых тем развития, его можно рассматривать как более как «обзорный» стиль, а не глубокое погружение в какую-либо одну область. В идеале, ваш вывод от завершения этой учебной программы будет некоторым знакомством с каждой темой и способностью легко погружаться в любую область в будущем, когда это необходимо.
На эту учебную программу значительно повлияла современная дорожная карта Камрана Ахмеда. Пожалуйста, проверьте это-это превосходно.
Примечание : я знаю, что фронтальная разработка означает много разных вещей для многих людей! Если вы являетесь фронтальным разработчиком, и вы думаете, что это руководство может быть улучшено, пожалуйста, дайте мне знать, подняв проблему, как описано в разделе «Содействие». Спасибо!
Благодаря невероятным участникам, эта учебная программа была переведена на следующие языки!
Основным принципом этого репозитория является TimeBoxing. Если вы проводили какое -то количество времени в прошлом, пытаясь изучить веб -разработку или аналогичный навык, вы, вероятно, пережили спуска по кроличьей норе по какой -либо конкретной теме. Этот репозиторий направлен на назначение определенного количества дней для каждой технологии и побуждает вас перейти к следующему, как только это количество дней истекло.
Ожидается, что все находятся на другом уровне мастерства при запуске этого вызова, и это нормально. Новички и экспертные фронтальные разработчики могут выиграть от практики Timebox в каждой из этих областей.
Рекомендуемые повседневные мероприятия следующие:
Ниже вы можете найти небольшую информацию о каждой теме в учебной программе, а также некоторые идеи/руководство о том, что делать для каждого. Для вдохновения проектов, которые можно выполнять вместе с этой учебной программой, см. Раздел «Идеи проекта».
В рамках принципа временных бокса это нормально, если вы не проходите все элементы в разделе «Обучение и идеи». Вместо этого вы должны сосредоточиться на том, чтобы получить максимальную отдачу от количества дней, назначенных в каждую область, а затем двигаться дальше.
Язык гипертекстовой разметки (HTML) - это стандартный язык разметки для создания веб -страниц и веб -приложений. С каскадными листами в стиле (CSS) и JavaScript он образует триаду краеугольных технологий для всемирной паутины. Веб -браузеры получают HTML -документы с веб -сервера или от локального хранилища и визуализируют документы в мультимедийные веб -страницы. HTML описывает структуру семантически и первоначально включал сигналы для появления документа. (Источник: Википедия)
HTML действительно является основой веб -разработки. Даже в фреймворках на основе JavaScript вы в конечном итоге пишете HTML в той или иной форме.
Листы каскадных стилей (CSS) - это стиль, используемый для описания представления документа, написанного на языке разметки, таком как HTML. CSS является краеугольной технологией Всемирной паутины, наряду с HTML и JavaScript. CSS предназначен для обеспечения разделения презентации и содержания, включая макет, цвета и шрифты. Это разделение может улучшить доступность контента, обеспечить большую гибкость и управление при спецификации характеристик презентации, позволить нескольким веб -страницам обмениваться форматированием, указав соответствующий CSS в отдельном файле .CSS и уменьшить сложность и повторение в структурном содержании. (Источник: Википедия)
CSS является еще одним важным компонентом веб -разработки. Хотя он в основном используется для стиля и позиционирования HTML -элементов, он становится все более способным выполнять более динамические задачи (например, анимации), которые когда -то обрабатывались JavaScript.
<style> теги<link>JavaScript, часто сокращенный как JS, представляет собой высокий уровень, интерпретируемый язык программирования, который соответствует спецификации Ecmascript. Это язык, который также характеризуется как динамичная, слабо напечатанная, основанная на прототипах и многопарадигма. Наряду с HTML и CSS, JavaScript является одной из трех основных технологий всемирной паутины. JavaScript позволяет интерактивные веб -страницы и, следовательно, является неотъемлемой частью веб -приложений. Подавляющее большинство веб -сайтов используют его, и у всех основных веб -браузеров есть специальный двигатель JavaScript для его выполнения. (Источник: Википедия)
JavaScript становится все более важным в переднем мире. Хотя когда-то он использовался в основном для создания страниц динамичной, теперь он является основой многих фронтальных рамок. Эти рамки обрабатывают многие задачи, которые ранее были выполнены в среднем (например, маршрутизацию и отображение различных представлений).
<script> тег и размещениеJQuery-это быстро, маленькая и богатая функциями библиотека JavaScript. Это делает такие вещи, как HTML Document Traversal и манипуляция, обработка событий, анимация и Ajax намного проще с простым в использовании API, который работает на множестве браузеров. С комбинацией универсальности и расширяемости, jQuery изменил способ, которым миллионы людей пишут JavaScript. (Источник: jQuery.com)
После того, как вы провели некоторое время с простым (также называемым «ваниль») JavaScript, вы можете найти несколько задач немного громоздкими, особенно те, которые связаны с доступом и манипулированием элементами HTML. В течение довольно долгого времени JQUERY была библиотекой для облегчения и последовательных задач в разных браузерах. В настоящее время jQuery не обязательно «обязательное» обучение из -за достижений в ванильном JavaScript, CSS и новых фреймворках JavaScript (позже мы рассмотрим фреймворки). Тем не менее, было бы полезно потратить немного времени, чтобы выучить немного jQuery и применить его к небольшому проекту.
Адаптирующий веб -дизайн (RWD) - это подход к веб -дизайну, который делает веб -страницы хорошо отображаться на различных устройствах и размерах окна или экрана. Недавняя работа также рассматривает близость зрителя как часть контекста просмотра как расширение для RWD. Контент, дизайн и производительность необходимы на всех устройствах, чтобы обеспечить удобство использования и удовлетворенность. Сайт, разработанный с RWD, адаптирует макет к среде просмотра с помощью жидкости, сетки на основе пропорций, гибких изображений и Media-запросов CSS3, расширение правила @Media. (Источник: Википедия)
Адаптивная веб -дизайн - это все, чтобы сделать веб -приложения и правильно функционировать на всех типах устройства. Кратким примером может быть то, что веб-сайт должен правильно искать и функционировать как в веб-браузере настольных компьютеров, так и в браузере мобильных телефонов. Понимание отзывного дизайна имеет решающее значение для любого фронт-разработчика!
Доступность веб -сайта является инклюзивной практикой обеспечения отсутствия барьеров, которые предотвращают взаимодействие или доступ к веб -сайтам во всемирной паутине людьми с ограниченными возможностями. Когда сайты правильно разработаны, разработаны и отредактированы, обычно все пользователи имеют равный доступ к информации и функциональности. (Источник: Википедия)
Доступность, часто написанная как A11Y, является одной из самых важных тем в веб-разработке переднего интерфейса, но, кажется, часто становится короткой. Создание доступных веб -приложений - это не только этически обоснованные, но и имеет большой смысл бизнеса, учитывая дополнительную аудиторию, которая сможет просматривать ваши приложения, когда они будут доступны.
GIT - это бесплатная и распределенная система управления версиями с открытым исходным кодом, предназначенная для обработки всего от небольших до очень больших проектов со скоростью и эффективностью. (Источник: git-cm.com)
Управление версией/кодом является неотъемлемой частью инструментария любого веб -разработчика. Существует ряд различных систем управления версиями, но GIT на данный момент является наиболее распространенным в данный момент. Вы можете (и должны!) Использовать его для отслеживания своих проектов во время обучения!
Node.js-это кроссплатформенная среда времени выполнения с открытым исходным кодом, которая выполняет код JavaScript за пределами браузера. JavaScript используется главным образом для сценариев на стороне клиента, в которых сценарии, написанные в JavaScript, встроены в HTML-страницы и запускают клиентский двигатель JavaScript в веб-браузере пользователя. Node.js позволяет разработчикам использовать JavaScript для написания инструментов командной строки и для сценариев на стороне сервера-зарядные сценарии на стороне сервера для создания динамического контента веб-страницы до отправки страницы в веб-браузер пользователя. Следовательно, Node.js представляет собой парадигму «JavaScript везде», объединяющая разработку веб -приложений вокруг одного языка программирования, а не разных языков для сценариев на стороне сервера и клиента. (Источник: Википедия)
В то время как node.js обычно известен как противоположное решение, он используется довольно часто для поддержки фронтального развития. Это делает это несколькими способами, включая такие вещи, как управление инструментами для сборки, тестирование и лининг (все это скоро будет покрыто!). Диспетчер пакетов узлов (NPM) - еще одна отличная функция узла и может использоваться для управления зависимостями вашего проекта (то есть библиотеки кодов, на которые может полагаться ваш проект - jQuery - пример!).
SASS - это расширение CSS, которое добавляет власть и элегантность к основному языку. Он позволяет вам использовать переменные, вложенные правила, микшины, встроенный импорт и многое другое, все с полностью CSS-совместимым синтаксисом. Sass помогает сохранить большие таблицы стилей хорошо организованными, и быстро разрабатывает и работает небольшие таблицы стилей, особенно с помощью библиотеки стиля компаса. (Источник: sass-lang.com)
SASS позволяет вам писать CSS более программным образом. Если вы сделали несколько CSS, вы могли бы заметить, что в конечном итоге повторяете много информации-для примера, указав один и тот же цветовой код. В SASS вы можете использовать такие вещи, как переменные, петли и гнездование, чтобы снизить избыточность и повысить читаемость. После написания кода в SASS вы можете быстро и легко скомпилировать его для обычного CSS.
* Некоторые альтернативы: Фонд, Булма, материализуйте
Bootstrap-это бесплатная фронтальная платформа для разработки веб-сайтов и веб-приложений. Он содержит шаблоны дизайна на основе HTML и CSS для типографии, форм, кнопок, навигации и других компонентов интерфейса, а также дополнительных расширений JavaScript. (Источник: Википедия)
Существует множество вариантов изготовления, стиля и создания динамики вашего веб -приложения, но вы обнаружите, что начинание с фреймворта очень поможет вам в начале. Bootstrap - это одна из таких фреймворков, но это определенно далека от единственного варианта! Я рекомендую познакомиться с одной структурой, подобной этой, но гораздо важнее понимать основные основы HTML, CSS и JavaScript, чем оказаться в какой -либо единой структуре.
Блок, элемент, методология модификатора (обычно называемая BEM) является популярным соглашением о именованиях для классов в HTML и CSS. Разработанный командой в Yandex, его цель - помочь разработчикам лучше понять отношения между HTML и CSS в данном проекте. (Источник: css-tricks.com)
Важно знать, что существуют такие системы именования и организационные системы, такие как BEM, и почему они используются. Проведите здесь некоторое исследование, но на уровне начинающих я бы не рекомендовал посвятить слишком много времени на эту тему.
Gulp-это инструментарий для автоматизации болезненных или трудоемких задач в вашем рабочем процессе разработки, так что вы можете перестать возиться и строить что-то. (Источник: Gulpjs.com)
В современной фронтальной разработке вы часто обнаружите, что вам нужно автоматизировать такие задачи, как комплексные, перемещающие файлы и вводить ссылки в файлы HTML. Gulp - это один из инструментов, который может помочь вам сделать эти вещи!
buildПо своей сути WebPack является статическим модулем для современных приложений JavaScript. Когда WebPack обрабатывает ваше приложение, он внутренне создает график зависимости, который отображает каждый модуль, который нуждается в вашем проекте и генерирует одну или несколько пакетов. (Источник: webpack.js.org)
Представьте, что у вас есть большой проект веб -разработки, и многие различные разработчики работают над множеством различных задач. Вместо того, чтобы работать в одних и тех же файлах, вы можете как можно больше модулизировать их. WebPack помогает включить это, позволяя вашей команде работать модульно, а затем придет время для создания приложения, WebPack сонтет все это вместе: HTML, CSS/SASS, Javasscript, Images и т. Д. Webpack-не единственный модульный бондлер, но, похоже, в настоящее время это фронт.
Eslint - это утилита с открытым исходным кодом JavaScript, первоначально созданную Nicholas C. Zakas в июне 2013 года. Подкладка кода - это тип статического анализа, который часто используется для поиска проблемных шаблонов или кода, который не придерживается определенных руководящих принципов стиля. Существуют кодовые линейки для большинства языков программирования, и компиляторы иногда включают в себя ливни в процесс компиляции. (Источник: eslint.org)
Linting - это фантастический инструмент для качества кода, читаемости и последовательности. Использование Linter поможет вам поймать синтаксис и форматирование ошибок, прежде чем они отправятся в производство. Вы можете запустить Linters вручную или включить их в процесс сборки/развертывания.
* Некоторые альтернативы: Vue, Angular, Ember
React (также известный как React.js или ReactJS) является библиотекой JavaScript для создания пользовательских интерфейсов. Он поддерживается Facebook и сообществом отдельных разработчиков и компаний. React может использоваться в качестве базы в разработке одностраничных или мобильных приложений. Сложные приложения React обычно требуют использования дополнительных библиотек для управления государством, маршрутизации и взаимодействия с API. (Источник: Википедия)
Фронт-энды JavaScript Frameworks находятся на переднем крае современной фронтальной разработки. Одним из важных выводов здесь является то, что React, несмотря на невероятно популярный, является лишь библиотекой для создания пользовательских интерфейсов, тогда как рамки, такие как Vue и Angular, стремятся быть более полнофункциональными. Например, если вы создаете приложение в React, которое необходимо направить к разным представлениям, вам нужно привнести что-то вроде react-router .
create-react-app -это удобный инструмент для каркаса новых проектов React.Redux - это предсказуемый контейнер состояния для приложений JavaScript. Он помогает вам писать приложения, которые ведут себя последовательно, работают в разных средах (клиент, сервер и нативные), и их легко тестировать. Кроме того, он обеспечивает отличный опыт разработчика, такой как редактирование живого кода в сочетании с отладчиком во времени. (Источник: Redux.js.org)
Когда вы создаете более крупные и более крупные фронтальные приложения, вы начинаете понимать, что трудно поддерживать состояние приложения: такие вещи, как пользователь входит в систему, кто является пользователем, и, как правило, то, что происходит в приложении. Redux - отличная библиотека, которая помогает вам поддерживать один источник состояния, на котором ваше приложение может основывать свою логику.
Jest - это восхитительная структура тестирования JavaScript с акцентом на простоту. Он работает с проектами, использующими: Babel, TypeScript, Node, React, Angular, Vue и многое другое! (Источник: Jestjs.io)
Очень важно настроить автоматическое тестирование для ваших фронтальных проектов. Настройка автоматического тестирования позволит вам с уверенностью внести изменения в будущие изменения-если вы вносите изменения, и ваши тесты все еще пройдут, вам будет довольно удобно, что вы не сломали существующую функциональность. Слишком много структур тестирования для перечисления; Шутка - это просто один из моих любимых.
create-react-app , Jest уже настроен.* Альтернатива: поток
TypeScript-это язык программирования с открытым исходным кодом, разработанный и поддерживаемый Microsoft. Это строгий синтаксический суперсет JavaScript, и добавляет дополнительную статическую набор в язык. TypeScript разработан для разработки больших приложений и транслока в JavaScript. Поскольку TypeScript является суперсетом JavaScript, существующие программы JavaScript также являются действительными программами TypeScript. TypeScript может использоваться для разработки приложений JavaScript как для выполнения клиентской стороны, так и для сервера (node.js). (Источник: Википедия)
JavaScript динамически напечатан. Тем не менее, это распространенное убеждение, что статическое типирование (то есть указание типов переменных, классов, интерфейсов заранее) является более ясным и снижает вероятность дефектов/ошибок. Независимо от того, что вы чувствуете на этой теме, важно, по крайней мере, почувствовать статически типовую версию JavaScript, подобную TypeScript. Обратите внимание, что TypeScript компилируется до JavaScript, чтобы его можно было интерпретировать браузерами (т.е. браузеры не назнакомительно интерпретируют TypeScript).
Next.js-минималистичная структура для приложений React-Rendered Server. (Источник: next.js - react server рендеринг сделан правильно)
Теперь мы становимся продвинутыми! К настоящему времени вы создали приложение React (или Vue или Angular), которое выполняет немалую работу в браузере. По разным причинам (например, SEO, озабоченность по поводу производительности клиента), вы можете действительно хотеть, чтобы ваше интерфейское приложение было отобрано на сервере, а не на клиенте. Вот где входит такая структура, как Next.js.
Предполагается, что этот список дает вам широкую экспозицию на фронтальную экосистему, но на каждую тему просто невозможно, не говоря уже о бесчисленных инструментах в каждой области! Если вы думаете, что я пропустил что -то очень важное, пожалуйста, посмотрите раздел, чтобы увидеть, как вы можете помочь сделать это руководство лучше.
По мере прохождения #100daysOfCode вам понадобятся один или несколько проектов, к которым вы можете применить свои новые знания. В этом разделе я пытаюсь предоставить несколько идей проекта, которые вы можете использовать. В качестве альтернативы, вам рекомендуется придумать собственные идеи проекта, так как эти идеи могут заинтересовать и мотивировать вас больше.
Как правило, я нашел следующие ресурсы неоценимыми для разработки программного обеспечения для обучения:
Если вам нравится мой вклад в что -нибудь, не стесняйтесь общаться со мной в Twitter, и я сделаю все возможное, чтобы попытаться предложить некоторую помощь. Если вы думаете, что есть проблема с учебной программой или иметь рекомендацию, см. В разделе «Содействие» ниже.
Если вы цените выполненную здесь работу, вы можете внести значительный вклад, распространив информацию об этом хранилище, включая такие вещи, как:
Это работа в процессе, и я очень ценю любую помощь в поддержании этой базы знаний!
Принимая во внимание этот репозиторий, сначала обсудите изменение, которое вы хотите внести с помощью выпуска, прежде чем внести изменения. В противном случае, будет очень трудно понять ваше предложение и потенциально может привести к тому, что вы внесете большую работу в изменения, которые не будут объединены.
Обратите внимание, что все, кто участвует в этом проекте, либо пытается учиться, либо пытается помочь-пожалуйста, будьте хорошими!
