Передняя часть знаний + ресурсы B-платформы интеграции V1.0 версия

| Проект находится в стадии непрерывной поддержки... | Проект включает в себя: диаграммы мозга, PNG-изображения и документы MD. Удобно использовать для обучения в различных сценариях. Это не только путь самостоятельного изучения передней части, но и путь изучения передней части + карта знаний + интеграция бесплатных видео B-платформ.

Видеообъяснение: https://www.bilibili.com/video/BV1ub4y1h7ZY

Вы можете самостоятельно изучить переднюю часть, следуя этой карте знаний.

Я также создал группу самообучения WeChat, чтобы вы могли учиться вместе со мной. Мой номер WeChat: php100, добавьте меня в друзья, отправьте «Я хочу учиться самостоятельно», и я приглашу вас присоединиться к группе в течение 24 часов. Обещание: в группе нет сборов, рекламы или транзакций, она предназначена исключительно для использования в обучении.

Из-за ограничения количества друзей в WeChat я не могу добавить больше людей в группу. Рекомендую следить за общедоступным аккаунтом «Технический толстяк изучает программирование», который ежедневно публикует статьи, связанные с программированием.

Путь изучения передней части техническим толстяком

Интеграция ресурсов B-платформы

Сетевые знания

(Интернет)

• 1. Принцип работы сети
• Принцип работы компьютерной сети: https://www.bilibili.com/video/BV1xJ41137Q3
• 2. Что такое HTTP
• Подробное объяснение протокола HTTP: https://www.bilibili.com/video/BV1js411g7Fw
• 3. Браузер и принцип работы
• Как работает браузер?: https://www.bilibili.com/video/BV1x54y1B7RE
• 4. DNS и принцип работы
• Основной принцип работы DNS: https://www.bilibili.com/video/BV1GW411j7Ts
• Визуальное введение в DNS: https://www.bilibili.com/video/BV1F54y1R7BC
• 5. Знание, связанное с доменными именами
• Полное объяснение разрешения доменных имён: https://www.bilibili.com/video/BV1zA411x7Pj
• 6. Знание, связанное с облачными сервисами
• Раскрытие секретов серверов Alibaba Cloud: https://www.bilibili.com/video/BV1Rt411u7k4

Язык гипертекстовой разметки

(HTML)

• 1. Изучение основных знаний HTML
• Полный курс по основам HTML: https://www.bilibili.com/video/BV11t411K74Q
• 2. Правила написания HTML и семантический метод письма
• HTML ускоренный курс: https://www.bilibili.com/video/BV1vs411M7aT
• 3. Формы и проверка
• Проверка HTML5 формы: https://www.bilibili.com/video/BV16K4y1Z7Gb
• 4. Конвенции и лучшие практики
• Секретные знания о стандартах кода передней части: https://www.bilibili.com/video/BV19P4y147Jz
• 5. Основы SEO
• Обучающий курс по оптимизации SEO: https://www.bilibili.com/video/BV1fE411J7ya

Таблица стилей каскадных листов

(CSS)

• 1. Основные знания CSS
• CSS3 полный курс: https://www.bilibili.com/video/BV1Bx411u7cS
• CSS3 полный курс: https://www.bilibili.com/video/BV1et411q74F
• 2. Разбиение страницы и реализация макета

• Плавающий макет
• Макет с плавающим: https://www.bilibili.com/video/BV1Zs411j7Z3
• Фиксированный макет
• Фиксированный CSS макет: https://www.bilibili.com/video/BV1ni4y1g7tc
• Дисплей
• display&visibility: https://www.bilibili.com/video/BV1HJ411M7CM
• Ящик
• CSS ящик и фиксированный макет: https://www.bilibili.com/video/BV1P7411G7BW
• Сетка
• Как использовать сетку: https://www.bilibili.com/video/BV14C4y1W7oA
• Flex
• Гибкий макет Flex: https://www.bilibili.com/video/BV1BJ41197XE

• 3. Реагирующий дизайн макета страницы
• Шесть примеров обучения реагирующему макету: https://www.bilibili.com/video/BV1ov411k7sm

Скрипт браузера

(JavaScript)

• 1. Базовый синтаксис и знания JavaScript
• Базовый синтаксис JavaScript: https://www.bilibili.com/video/BV1Sy4y1C7ha
• 2. Управление DOM-элементами с помощью JavaScript
• Обязательные знания DOM BOM JavaScript: https://www.bilibili.com/video/BV1k4411w7sV
• 3. Асинхронный запрос Ajax
• Введение в Ajax: https://www.bilibili.com/video/BV1WC4y1b78y
• 4. ES6 и более поздние версии JavaScript
• Новые функции ES6-ES11: https://www.bilibili.com/video/BV1uK411H7on

Система управления версиями

Version Control System

• 1. Основное использование Git
• Последние курсы Git: https://www.bilibili.com/video/BV1FE411P7B3
• 2. Использование соответствующих платформ/программного обеспечения

• GitHub
• Десять минут, чтобы научиться GitHub: https://www.bilibili.com/video/BV1yo4y1d7UK
• GitLab
• Использование GitLab: https://www.bilibili.com/video/BV11E411x7Uv
• Gitee
• Этот сайт можно посмотреть, B-платформа ещё не имеет хорошего видео введения

Знания, связанные с сетевой безопасностью

Web Security Knowledge

• 1. HTTPS принцип и использование
• Вы даже не понимаете принцип HTTPS: https://www.bilibili.com/video/BV1Up4y1i7PG
• 2. CORS междоменный запрос и знание безопасности
• Что такое CORS: https://www.bilibili.com/video/BV1Kt411E76z
• 3. Политика безопасности контента
• Сетевая инфильтрация: https://www.bilibili.com/video/BV1kh411W7Vv
• 4. OWASP риски безопасности
• OWASP TOP10: https://www.bilibili.com/video/BV1ey4y1V7Jj

Инструмент управления пакетами

Package Managers

• 1. npm
• Инструменты управления пакетами: https://www.bilibili.com/video/BV1Dv411W7XP
• 2. yarn
• Вводный курс Yarn: https://www.imooc.com/learn/766 (B-платформа не имеет, рекомендуется этот бесплатный курс)

Препроцессор языка CSS

CSS Preprocessors

• 1. Sass
• От начального уровня до практического применения SCSS: https://www.bilibili.com/video/BV1Zg4y1v75U
• 2. PostCSS
• B-платформа не имеет хороших видео, рекомендуется купить книгу «Глубокое погружение в веб-дизайн с PostCSS»
• 3. Less
• Передний конец курса Less: https://www.bilibili.com/video/BV1YW411T7vd

Инструменты сборки

Build Tools

• 1. Команды выполнения задач [Task Runners]

• npm scripts
• Применение пакета npm: https://www.bilibili.com/video/BV1Dv411W7XP
• Gulp
• Вводный курс Gulp: https://www.bilibili.com/video/BV1yA411s72G

• 2. Инструменты упаковки

• Webpack
• От начального уровня до глубокого понимания Webpack: https://www.bilibili.com/video/BV1e7411j7T5
• Parcel
• Первоначальный опыт Parcel: https://www.bilibili.com/video/BV1Pa4y147Kf

• 3. Инструменты форматирования кода

• Prettier
• Использование Prettier и ESLint: https://www.bilibili.com/video/BV183411r7YK
• ESLint
• Начальный курс ESLint: https://space.bilibili.com/390120104/search/video?keyword=ESLint

Три основные рамки передней части

Web Framework

• React.js
• Основы React: https://www.bilibili.com/video/BV1g4411i7po
• Полная семья React: https://www.bilibili.com/video/BV1wy4y1D7JT
• Практический блог React: https://www.bilibili.com/video/BV1CJ411377B Реакт-магазин: практика

Vue.js

• Vue2 «всё в одном»:
• Vue3 «всё в одном»
• От новичка до профи во VueJS:

Angular

• Основы Angular:

Веб-программирование с использованием компонентов

Веб-компоненты

• HTML-шаблоны
• Пользовательские элементы
• Shadow DOM

Резюме: эта часть не содержит подходящего видео

Связанные с CSS фреймворки

Фреймворки CSS

• Bootstrap
• Изучаем Bootstrap за неделю:
• Material UI
• Вводный курс по Material UI:
• Materialize CSS
• Краткий курс по Materialize CSS:
• ReactStrap

Синтаксический сахар JavaScript

Средства проверки типов

• TypeScript
• От новичка к профи в TypeScript:
• Flow

Рендеринг на стороне сервера (SSR)

React.js

• Next.js
• Введение в Next.js:
• GatsbyJS
• Практика GatsbyJS:

Vue.js

• Nuxt.js
• Знакомство с Nuxt.js:

Angular

• Universal

Графическое программирование

GraphQL

• Cocos Creator
• Разработка графических игр в Cocos:
• Three.js
• Базовый курс Three.js (на английском):
• Курс Three.js:

Генераторы статических сайтов

Next.js

• Введение в Next.js:

GatsbyJS

• Практика GatsbyJS:

Nuxt.js

• Знакомство с Nuxt.js:

Vuepress

• От знакомства до мастерства в Vuepress:

Hugo

• Создание личного сайта за 10 минут:

Разработка мобильных приложений

Мобильные приложения

• React Native
• Базовые знания React Native:
• Практические занятия по React Native:
• UniApp
• От введения до практики в Uni-App:
• Пример использования Uni-App для доставки еды Meituan:
• Flutter
• Основы Flutter:
• Практика Flutter:
• Ionic
• Введение в Ionic:

Разработка настольных приложений

Настольные приложения

• Electron
• Введение в Electron:
• Основы Electron:

Примечание: в ответе сохранены оригинальное форматирование и гиперссылки.