Складчина: Web-разработчик 2025 [campfire-school.com] [Ivan Petrychenko]
Освойте все, что необходимо для создания web-продуктов
Любые интерфейсы, которые вы видите в интернете на любом устройстве, созданы при помощи HTML и CSS или продуктов на их основе
Курс полностью перезаписан и новая версия выложена 06.2025
Кому подойдет этот курс?
- Вы вообще не знакомы с темой создания сайтов и web-продуктов, но хотите освоить эту область с нуля
- Вы уже делали свои первые попытки создания веб-продуктов
- Вы хотите расширить свой кругозор и узнать лучшие техники
- Мы с вами пройдем путь от установки своего первого редактора кода до создания полноценных, полностью функционирующих и расположенных в интернете сайтов. Будем изучать теоретическую часть и сразу же применять её на реальных проектах
- Вы четко будете следовать плану обучения, построенному на практическом применении, а не просто по главам учебника. Это позволит держать концентрацию на нужной информации и не распылять ваше внимание
Мы последовательно начинаем с самых основ, переходим к рабочим моментам, а позже и к продвинутым
Никаких перескакиваний. Вся информация наслаивается и применяется последовательно
- Мы изучим основы web-разработки: что такое web-продукт, зачем он нужен, циклы создания, как работает интернет изнутри, и многое другое
- Научимся работать с графическими редакторами в контексте верстки: figma, Zeplin и тп
- Научимся работать с графикой для web'a, в том числе с SVG
Мы будем подробно разбирать нюансы использования в реальной работе всех составляющих web-продуктов
- Узнаем и поймем как использовать HTML5 и CSS3 в реальных проектах
- Узнаем основы JS, научимся применять его в своих проектах
- Научимся работать с Git и GitHub
- Научимся работать с технологиями Flexbox и CSS Grid будем их использовать сразу в практике
- Научимся работать с новейшими фишками CSS, такими как CSS Nesting
- Научимся использовать препроцессоры SASS/SCSS в своих проектах
Использование самых последних и трендовых подходов в разработке, но с учетом поддержки браузеров, устройств и необходимости. Ведь мы за правильный продукт, который будет работать у всех
- Мы научимся создавать мобильную адаптацию сайтов и приложений
- Научимся использовать методологии (Atomic design, BEM и тп)
- Поймем, как создавать многостраничные сайты и принципы посадки под CMS (системы управления сайтами)
- Научимся автоматизировать процессы при помощи планировщиков задач (Vite, Gulp)
- Научимся оптимизировать скорость работы сайтов и проводить валидацию верстки по стандартам w3c
- Научимся следовать последним стандартам доступности a11y
- Научимся работать с множеством готовых плагинов, устанавливать гео-карты на сайте, работать со шрифтами и многое другое...
- Создадим ваш личный сайт-портфолио
- Никаких ограничений по времени. Занимаетесь в удобном для вас темпе, а доступ к материалам никуда не исчезает!
Ключевое в этом курсе
Данный курс - это не просто собрание материалов, которые доступны по всему интернету. Это передача практического опыта: как сделать лучше, удобнее, какие инструменты или подходы применить в разных ситуациях и все в этом роде. Поэтому каждый урок - это не только сухая информация, но и живые примеры ситуаций, как делать стоит и как нет
Последняя редакция курса - это объединение моего опыта, всех вопросов и практических задач от всех студентов, которые проходили этот курс. Ведь первая редакция была аж 2018м году
Отсюда и еще один плюс: у вас вся информация по одной теме будет в одном месте
Почему стоит начать свое обучение уже сейчас?
Если вы хотите работать с сфере web-разработки, то создание интерфейсов (верстка) - это абсолютно необходимый навык. Без этого не обходится ни один web-продукт
Мало того, что изучив всю данную вам информацию вы уже сможете создавать свои продукты и работать как на фрилансе, так и в компании, но и вы заложите базу для дальнейшего обучения. Владея этими навыками вы сможете освоить любую CMS (Wordpress, ModX и тп) изнутри, сможете понять и изучить как работает backend часть, и сможете создавать визуальную часть приложений, написанных на JavaScript фреймворках и библиотеках(ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях)
Спойлер: Содержание курса
Спойлер: 1. Погружение в тему создания web-продуктов. Изучение основ HTML и CSS
- Зачем нам этот модуль
- Современная разработка сайтов, веб-приложений и других веб-продуктов. Перспективы
- Про конструкторы, искусственный интеллект и перспективы
- Классификация и этапы создания сайтов/веб-приложений
- Как все это работает изнутри: протоколы, клиент-серверная архитектура и http
- Как все это работает изнутри: html, css, js и тд.
- Работа с графикой: виды, дизайн-макеты и тп
- Сервисы для работы с графикой
- (Дополнительно) Преобразование иконок в svg формат и “сетки” в макетах
- Установка и настройка редактора кода
- Создаем свой первый проект. Основы HTML
- Основные теги HTML на практике
- Семантика и семантические теги HTML5
- Основы CSS на практике
- Блочная модель CSS
- Developer Tool. Что это и как с ним работать?
- Блочная модель CSS. Часть 2
- Позиционирование элементов в CSS. Принцип карточной колоды
- Выравнивание элементов по вертикали. История: верстка таблицами и float'ами
- Единицы измерения CSS
- Специфичность CSS селекторов
- Автоматическое форматирование кода
- Практика часть 1. Создаем сайт на чистом HTML и CSS
- Практика часть 2. Создаем сайт на чистом HTML и CSS
- Технология Flexbox
- Применение Flexbox в проекте
- Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание
- Свойство object-fit и работа с изображениями
- Нормализация стилей normalize.css и аналоги
- Подключение файлов через cdn-сервера. Различия и преимущества
- Работа со шрифтами в web'e
- Зачем нам этот модуль
- Как чистый CSS постепенно догоняет инструменты
- CSS Nesting
- Практика. Создаем новый проект
- CSS variables (custom properties)
- Практика. Создаем первые две секции
- CSS Grid. Начало
- CSS Grid. Единица гибкости (fr) и repeat()
- Что использовать: Grid или Flexbox
- Практика. Создаем grid-секцию
- CSS Grid. Явные и неявные гриды
- CSS Grid. Функция minmax()
- CSS Grid. Масштабирование треков, auto-fit и auto-fill
- CSS Grid. Позиционирование треков
- (Дополнительно) CSS Grid. Выравнивание треков
- (Дополнительно) CSS Grid. Grid Area и подсетки
- Псевдоклассы в CSS
- Применяем псевдоклассы в проекте, CSS transition
- Псевдоэлементы в CSS
- Применяем псевдоэлементы в проекте
- Практика. Заканчиваем базовую верстку. Функция calc()
- Про футер и переменную
- Варианты работы с иконками
- Адаптация проектов под различные устройства
- Что такое Pixel Perfect
- Большая практика. Адаптация проекта. Часть №1
- Tip. Nesting при адаптации
- Адаптация проекта. Часть №2
- Логические свойства размеров
- Локальные ссылки, favicon и smooth-behavior
- Системы контроля версий. Git
- Сервисы для хранения репозиториев. github / gitlab и другие
- Публикуем сайт в интернете. Домен. Хостинг. Сброс "кеша"
- Как работать с GitHub с разных компьютеров, gitignore и Git UI
- Зачем нам этот модуль
- Препроцессоры в CSS (SASS/SCSS и другие)
- Методологии названия классов (BEM, Atomic и тд) конвенция названий
- Что такое сборщики проектов, планировщики задач и тд.
- Настраиваем Vite для нового проекта и разбор нюансов
- ИИ для конфигураций
- Обсуждаем и подготавливаем новый проект
- Заготовка под проект
- Что такое Mobile first
- Практика. Разбираемся с UI Kit / Style Kit и остальными нюансами сборки
- Практика. Создаем первую секцию и переиспользуемые компоненты
- Функция clamp для быстрой адаптации (+ min()/max())
- Практика адаптации
- Готовые инструменты для ускорения работы со стилями
- ИИ для списка инструментов
- Практика
- В дополнение к практике
- Перечень веб-компонентов и их названий + дз
- Формы в web-продуктах
- Знакомимся с языком программирования Javascript
- Большая практика. Создаем и разбираем компонент-слайдер. Часть 1
- Большая практика. Создаем и разбираем компонент-слайдер. Часть 2
- Дополнительная строка настройки слайдера
- Реальные процессы в работе
- Альтернативные варианты функционала
- Большое домашнее задание. Создаем футер
- Практика. Создаем гамбургер-меню. Трансформации
- Практика. Создаем табы на странице
- Проверьте свою работу
- Практика. Создаем записи блога и обсуждаем нюансы динамического контента
- Практика. Создаем интерактивные карты. Iframe
- Практика. Валидация форм
- Разбираем интересные моменты д/з, :auto-fill
- Практика. Отправка формы c сайта
- Анимации при помощи CSS3
- Библиотеки для работы с анимациями и AI-tips
- Валидация, оценка и оптимизация веб-продукта. Метрики
- Мета-тэги и OG tags, расширенный favicon
- Загружаем web-продукт на реальный хостинг. Что такое FTP
- Заключение. ИИ для ускорения работы. Интерфейсы в разных технологиях. Проекты
- Зачем нам этот модуль
- Подготовка к созданию портфолио
- Создаем первый экран, часть 1
- Создаем первый экран, часть 2 (анимация меню)
- Используем CSS Grid для создания второго экрана
- Создаем третий экран портфолио
- Реализуем скрипт автоматического пересчета процентов
- Создаем блок-портфолио работ
- Создаем блок с контактами
- Политика конфиденциальности. Что это, зачем и как использовать.
- Добавляем object-fit и работаем с изображениями
- Адаптация портфолио, часть 1
- Заканчиваем портфолио и адаптируем последние экраны
Скрытая ссылка