Курс Web-разработчик - Начни свой путь тут

Один из самых подробных материалов для старта в веб-разработке Последний урок (43 минуты) не поместился, поэтому он тут: https://campfire-school.com/courses/w... ____________ Расширенная версия курса с моей личной поддержкой и уникальным дипломным проектом: https://campfire-school.com/courses/w... Сокращенная версия на Udemy: https://www.udemy.com/course/webdevel... Если нет скидки на Udemy: https://campfire-school.com/courses/w... Реальные отзывы о трудоустройстве со мной за много лет: https://t.me/petrychenko_ivan/523 Если что-то не так: пишите в личку: https://t.me/ivanpetrychenko ___________ 0:00 Вступление 5:44 Классификация и этапы создания сайтов/веб-приложений Ресурсы: Доска из урока: https://miro.com/app/board/uXjVKS4_r40=/ wireframe.cc для создания прототипов: https://wireframe.cc/ Еще один сервис для создания прототипов: https://ninjamock.com/ 42:22 Современная разработка сайтов, веб-приложений и других веб-продуктов. Перспективы 47:02 Как все это работает изнутри: протоколы, клиент-серверная архитектура и http Доска из урока: https://www.figma.com/file/hpFXPyMvi1... Что такое TCP/IP более сложно + другие: https://is.gd/j0XKOU Про HTTP подробно (и сложно): https://habr.com/ru/articles/215117/ 01:03:41 Как все это работает изнутри: html, css, js и тд. Доска из урока: https://www.figma.com/file/hpFXPyMvi1... 01:10:07 Работа с графикой: виды, дизайн-макеты и тп Image file type and format guide : https://developer.mozilla.org/en-US/d... 10 Types of Image File Extensions and When to Use Them: https://blog.hubspot.com/insiders/dif... 01:30:04 Сервисы для работы с графикой 20 Best Web Design Tools: https://www.hostinger.com/tutorials/w... Figma: https://www.figma.com/ Плагин Inspect Styles: https://www.figma.com/community/plugi... Плагин Zeplin: https://www.figma.com/community/plugi... Zeplin: https://zeplin.io/ Pixso: https://pixso.net/ Figpea: https://figpea.com/ Макет: https://www.figma.com/design/m2lCvlv9... Графика из макета: https://drive.google.com/file/d/12XSG... 02:00:40 Преобразование иконок в svg формат и “сетки” в макетах Vectorizer: https://www.vectorizer.io/ 02:10:17 Установка и настройка редактора кода VSCode: https://code.visualstudio.com/ Node.js: https://nodejs.org/en Список необходимых плагинов: https://is.gd/BbhTKf Keyboard shortcuts for Windows: https://is.gd/KDCFHf 02:28:47 Создаем свой первый проект. Основы HTML HTML Tags Ordered Alphabetically: https://www.w3schools.com/tags/ Сокращенные команды Emmet: https://docs.emmet.io/cheat-sheet/ 03:06:39 Основные теги HTML на практике Список HTML-тэгов: https://htmlreference.io/ Книга из урока: https://www.gutenberg.org/files/11/11... Книга для домашнего задания: https://is.gd/isnSpl 04:06:00 Семантика и семантические теги HTML5 Список семантических тэгов: https://shorturl.at/DNKLH 04:25:49 Основы CSS на практике CSS-селекторы: https://learn.javascript.ru/css-selec... Справочник CSS: https://webref.ru/css 05:08:36 Блочная модель CSS Про border: https://developer.mozilla.org/ru/docs... Про padding: https://developer.mozilla.org/ru/docs... Про margin: https://developer.mozilla.org/ru/docs... 05:36:30 Developer Tool. Что это и как с ним работать? 05:55:26 Блочная модель CSS. Часть 2 box-sizing: https://is.gd/pzGdTy 06:30:23 Позиционирование элементов в CSS. Принцип карточной колоды 06:56:28 Выравнивание элементов по вертикали. История: верстка таблицами и float'ами https://caniuse.com/ 07:12:39 Единицы измерения CSS Документация: https://shorturl.at/nclHj 07:43:44 Специфичность CSS селекторов Формула расчета: https://is.gd/IGoXj5 "Знаете ли вы селекторы?": https://learn.javascript.ru/css-selec... 07:59:07 Автоматическое форматирование кода Документация: https://shorturl.at/qf9Ci 08:09:20 Практика часть 1. Создаем сайт на чистом HTML и CSS Макет для работы: https://shorturl.at/wq2Kb 08:56:03 Практика часть 2. Создаем сайт на чистом HTML и CSS Проверить код: https://shorturl.at/0NaWK 09:38:28 Технология Flexbox Статья из урока: https://is.gd/R0MUzV Документация: https://is.gd/ZlD4Jr 09:57:39 Применение Flexbox в проекте Проверить код: https://is.gd/PP08vn 10:14:51 Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание Итоговый вариант: https://is.gd/HmIyHl Виды ссылок: https://is.gd/ELoxri 11:07:32 Свойство object-fit и работа с изображениями object-fit: https://is.gd/00GOII 11:28:20 Нормализация стилей normalize.css и аналоги normalize.css: https://is.gd/3HOFlk modern-normalize: https://is.gd/4g0xjL Про комбинированный подход: https://is.gd/mSa04z 11:44:52 Подключение файлов через cdn-сервера. Различия и преимущества