[campfire-school] WEB-разработчик, 2025 (Иван Петриченко)

Скрытый текст. Открывается зарегистрированным пользователям.

​

Освойте все, что необходимо для создания web-продуктов
Любые интерфейсы, которые вы видите в интернете на любом устройстве, созданы при помощи HTML и CSS или продуктов на их основе

Кому подойдет этот курс?

• Вы вообще не знакомы с темой создания сайтов и 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 фреймворках и библиотеках(ведь там везде используется верстка как и на обычных сайтах, в том числе и на мобильных приложениях)

Содержание курса

• Погружение в тему создания web-продуктов. Изучение основ HTML и CSS
• Ускорение работы и еще больше современных подходов
• Необходимые технологии для web-разработчика и продвинутая практика
• (Бонус-практика, необязательно) Практика с сайтом-портфолио

Спойлер: Подробное содержание курса

Погружение в тему создания web-продуктов. Изучение основ HTML и CSS

1. Зачем нам этот модуль
2. Современная разработка сайтов, веб-приложений и других веб-продуктов. Перспективы
3. Про конструкторы, искусственный интеллект и перспективы
4. Классификация и этапы создания сайтов/веб-приложений
5. Как все это работает изнутри: протоколы, клиент-серверная архитектура и http
6. Как все это работает изнутри: html, css, js и тд.
7. Работа с графикой: виды, дизайн-макеты и тп
8. Сервисы для работы с графикой
9. (Дополнительно) Преобразование иконок в svg формат и “сетки” в макетах
10. Установка и настройка редактора кода
11. Создаем свой первый проект. Основы HTML
12. Основные теги HTML на практике
13. Семантика и семантические теги HTML5
14. Основы CSS на практике
15. Блочная модель CSS
16. Developer Tool. Что это и как с ним работать?
17. Блочная модель CSS. Часть 2
18. Позиционирование элементов в CSS. Принцип карточной колоды
19. Выравнивание элементов по вертикали. История: верстка таблицами и float'ами
20. Единицы измерения CSS
21. Специфичность CSS селекторов
22. Автоматическое форматирование кода
23. Практика часть 1. Создаем сайт на чистом HTML и CSS
24. Практика часть 2. Создаем сайт на чистом HTML и CSS
25. Технология Flexbox
26. Применение Flexbox в проекте
27. Практика. Заканчиваем сайт на чистом HTML и CSS + домашнее задание
28. Свойство object-fit и работа с изображениями
29. Нормализация стилей normalize.css и аналоги
30. Подключение файлов через cdn-сервера. Различия и преимущества
31. Работа со шрифтами в web'e

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

1. Зачем нам этот модуль
2. Как чистый CSS постепенно догоняет инструменты
3. CSS Nesting
4. Практика. Создаем новый проект
5. CSS variables (custom properties)
6. Практика. Создаем первые две секции
7. CSS Grid. Начало
8. CSS Grid. Единица гибкости (fr) и repeat()
9. Что использовать: Grid или Flexbox
10. Практика. Создаем grid-секцию
11. CSS Grid. Явные и неявные гриды
12. CSS Grid. Функция minmax()
13. CSS Grid. Масштабирование треков, auto-fit и auto-fill
14. CSS Grid. Позиционирование треков
15. (Дополнительно) CSS Grid. Выравнивание треков
16. (Дополнительно) CSS Grid. Grid Area и подсетки
17. Псевдоклассы в CSS
18. Применяем псевдоклассы в проекте, CSS transition
19. Псевдоэлементы в CSS
20. Применяем псевдоэлементы в проекте
21. Практика. Заканчиваем базовую верстку. Функция calc()
22. Про футер и переменную
23. Варианты работы с иконками
24. Адаптация проектов под различные устройства
25. Что такое Pixel Perfect
26. Большая практика. Адаптация проекта. Часть №1
27. Tip. Nesting при адаптации
28. Адаптация проекта. Часть №2
29. Логические свойства размеров
30. Локальные ссылки, favicon и smooth-behavior
31. Системы контроля версий. Git
32. Сервисы для хранения репозиториев. github / gitlab и другие
33. Публикуем сайт в интернете. Домен. Хостинг. Сброс "кеша"
34. Как работать с GitHub с разных компьютеров, gitignore и Git UI

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

1. Зачем нам этот модуль
2. Препроцессоры в CSS (SASS/SCSS и другие)
3. Методологии названия классов (BEM, Atomic и тд) конвенция названий
4. Что такое сборщики проектов, планировщики задач и тд.
5. Настраиваем Vite для нового проекта и разбор нюансов
6. ИИ для конфигураций
7. Обсуждаем и подготавливаем новый проект
8. Заготовка под проект
9. Что такое Mobile first
10. Практика. Разбираемся с UI Kit / Style Kit и остальными нюансами сборки
11. Практика. Создаем первую секцию и переиспользуемые компоненты
12. Функция clamp для быстрой адаптации (+ min()/max())
13. Практика адаптации
14. Готовые инструменты для ускорения работы со стилями
15. ИИ для списка инструментов
16. Практика
17. В дополнение к практике
18. Перечень веб-компонентов и их названий + дз
19. Формы в web-продуктах
20. Знакомимся с языком программирования Javascript
21. Большая практика. Создаем и разбираем компонент-слайдер. Часть 1
22. Большая практика. Создаем и разбираем компонент-слайдер. Часть 2
23. Дополнительная строка настройки слайдера
24. Реальные процессы в работе
25. Альтернативные варианты функционала
26. Большое домашнее задание. Создаем футер
27. Практика. Создаем гамбургер-меню. Трансформации
28. Практика. Создаем табы на странице
29. Проверьте свою работу
30. Практика. Создаем записи блога и обсуждаем нюансы динамического контента
31. Практика. Создаем интерактивные карты. Iframe
32. Практика. Валидация форм
33. Разбираем интересные моменты д/з, :auto-fill
34. Практика. Отправка формы c сайта
35. Анимации при помощи CSS3
36. Библиотеки для работы с анимациями и AI-tips
37. Валидация, оценка и оптимизация веб-продукта. Метрики
38. Мета-тэги и OG tags, расширенный favicon
39. Загружаем web-продукт на реальный хостинг. Что такое FTP
40. Заключение. ИИ для ускорения работы. Интерфейсы в разных технологиях. Проекты

(Бонус-практика) Практика с сайтом-портфолио

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

Цена: 15 € = ~1500р