Web-разработчик 2025 [campfire-school.com] [Ivan Petrychenko]

[Принц]

Складчина: 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



Спойлер: 2. Ускорение работы и еще больше современных подходов

Зачем нам этот модуль
Как чистый 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



Спойлер: 3. Необходимые технологии для веб-разработчика и продвинутая практика

Зачем нам этот модуль
Препроцессоры в 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
Заключение. ИИ для ускорения работы. Интерфейсы в разных технологиях. Проекты



Спойлер: 4. (Бонус-практика) Практика с сайтом-портфолио

Зачем нам этот модуль
Подготовка к созданию портфолио
Создаем первый экран, часть 1
Создаем первый экран, часть 2 (анимация меню)
Используем CSS Grid для создания второго экрана
Создаем третий экран портфолио
Реализуем скрипт автоматического пересчета процентов
Создаем блок-портфолио работ
Создаем блок с контактами
Политика конфиденциальности. Что это, зачем и как использовать.
Добавляем object-fit и работаем с изображениями
Адаптация портфолио, часть 1
Заканчиваем портфолио и адаптируем последние экраны







СКАЧАТЬ

Для просмотра скрытого содержимого вы должны зарегистрироваться