Курс «Веб-вёрстка»
Плавный и комфортный путь в IT для новичка- Реальные задачи
от партнёров курса
Компаний Газпромбанк.Тех, WhiteMark и Хабр Фриланс
- 80+ проектов
Очень много практических работ и проектов, из которых вы составите сильное портфолио
- Индивидуальное обучение
Сами выбираете компанию и уровень сложности для практики
- -15%
Скидка действует
0 дня 00:00:00
Абсолютно новый формат обучения 🔥
- Приближенный к реальной работе
Благодаря новой методике курс подготовит вас к реальной работе на рынке. Новый формат обучения уже показал результаты.
- Позволяет быстрее осваивать навыки
Благодаря новому формату студенты сдают первое домашнее задание на 70% быстрее, чем раньше. Освоили теорию — сразу закрепили новый навык на практике.
- Помогает учиться эффективнее
Благодаря новому формату вы будете тратить на обучение на 23% меньше времени. При этом в портфолио вы сможете добавить на 30% больше работ по сравнению со старым форматом.
- Объясняет сложные вещи доступно
Благодаря понятным примерам из реального бизнеса успеваемость студентов Skillbox выросла на 24%, а количество трудоустройств увеличилось на 33%.
Ваш лёгкий старт для карьеры в IT
Вы будете превращать дизайн-макеты
в полноценные работающие сайты. Такие навыки нужны в любой IT-компании,
а освоить их по силам даже новичку.
Банки, маркетплейсы, стриминговые сервисы или фриланс — вы сами выбираете, в какой сфере работать.
Практикуйтесь на задачах от реальных IT-компаний
Вас ждут задачи от:
- Продуктовой IT-компании Газпромбанк.Тех
- Диджитал-агентства WhiteMark
- Фриланс-биржи Хабр Фриланс
В результате вы узнаете, как устроена работа в разных типах бизнеса: продуктовой компании, агентстве и на фрилансе. Поймёте, в каком формате комфортнее работать, и подготовитесь к трудоустройству.
Мы полностью изменили подход к обучению в IT
- Учитесь на задачах от реальных компаний
Именно такие задачи решают джуниор-специалисты в начале карьеры.
- Проходите курс в игровом формате
Выполняете задания и получаете баллы, чтобы перейти на новый уровень. В таком формате учиться интереснее и быстрее.
- Подстраивайте курс под себя
Вы сами решаете, с какой компанией вам интереснее работать и какой уровень сложности выбрать. Можете начать с простых заданий и постепенно переходить к более трудным.
Ещё больше о новом формате — в видео
Этот курс подойдёт
- Новичкам в IT
Если вы никогда не писали код, но хотите работать в IT, то веб-вёрстка — идеальный вариант для старта. На курсе вы с нуля и на реальных задачах научитесь верстать сайты разного уровня сложности, а кураторы всегда придут на помощь, если что-то непонятно.
- Тем, кто пробовал учиться верстать сам
Структурируете знания и разберётесь в темах, в которых раньше «плавали». Закрепите навыки на реальных проектах и получите обратную связь и код-ревью от опытных разработчиков.
А ещё у вас получится...
-
Выйти на фриланс уже во время обучения
Задачи по вёрстке сайтов — одни из самых востребованных на фриланс-биржах.
-
Строить карьеру в самых востребованных IT-сферах
Знание вёрстки — отправная точка для карьеры в IT. Она пригодится во фронтенд-, бэкенд-разработке, веб-дизайне, веб-аналитике и даже в менеджменте проектов.
-
Хорошо зарабатывать
Сможете начать зарабатывать ещё до окончания курса, а после — брать дорогие заказы на фрилансе или устроиться в IT-компанию.
Составили программу с учётом актуальных требований работодателей в 2024 году
Мы создали новый курс — изучили вакансии, пообщались с тимлидами Альфа-Банка, Самоката, Магнита, Азбуки Вкуса и сделали курс максимально актуальным для 2024 года. Внутри только те знания, которых ждут от джунов лидеры IT-индустрии.
Программа курса
- 27 теоретических материалов
- 40+ часов видеоуроков
- 80+ проектов
- Регулярно мониторим рынок и обновляем курс
- Этап 1
-
Готовим контент к публикации Перенесёте контент из макета в вёрстку, разметите шаблоны статей и подготовите для них графику.
- Познакомитесь с языком разметки HTML.
- Научитесь создавать первые теги, вкладывать их друг в друга, добавлять к ним атрибуты, а также наполнять теги контентом.
- Перенесёте изображения и текст из графического редактора Figma и создадите свои первые страницы.
- Узнаете, как форматировать код и с помощью специальных инструментов (Emmet, подсветки и других) писать его проще и быстрее.
-
- Этап 2
-
Верстаем контентный блок Углубитесь в разработку текстовых шаблонов и информационных страниц: создадите дополнительные текстовые блоки с помощью новых тегов и выполните стилизацию с помощью CSS.
- Познакомитесь с языком разметки CSS: селекторами, стилизуемыми свойствами и их значениями, комбинациями и особыми правилами.
- С помощью CSS и новых тегов HTML более глубоко подойдёте к разработке и оформлению текстовых страниц, подключите внешние шрифты и освоите дополнительные форматы графики.
-
- Этап 3
-
Верстаем информационный блок Разработаете компоненты (блоки-конструкторы), из которых будут собираться веб-страницы, с помощью методологии БЭМ.
- Изучите методологию БЭМ: поймёте, как писать нейминг для блоков, организовывать внутри них элементы и модификаторы.
- Познакомитесь с потоком документа и блочной моделью.
- Разберётесь с отступами элементов и новыми CSS-свойствами.
- Узнаете, что такое семантика и как она связана с доступностью.
-
- Этап 4
-
Верстаем гибкий компонент Сформируете сетки страницы с помощью технологии Flexbox: упорядочите контент внутри блоков и расположите крупные блоки относительно друг друга, подготавливая страницу к завершённому виду.
- Освоите базовые навыки работы с редактором кода — Visual Studio Code.
- Познакомитесь с файловой структурой проекта и правилами разделения файлов стилей внутри неё.
- Погрузитесь в CSS, изучите глобальные стили, и рассмотрите Flexbox — одну из самых популярных технологий для создания гибких сеток.
- Научитесь управлять расположением элементов на странице, организуя их по своим правилам.
-
- Этап 5
-
Верстаем раздел страницы Разработаете основные смысловые блоки страницы с помощью технологии Grid: сверстаете шапку, подвал и крупные секции.
- Продолжите изучать создание сеток на страницах и освоите новую технологию — CSS Grid.
- Узнаете, как использовать новые семантические теги для структурирования разделов страницы, углубите знания в области доступности сайтов и компонентного подхода к разработке.
- Познакомитесь с принципами самотестирования кода и рассмотрите методы работы с динамическим контентом — сможете эффективно управлять его изменениями на странице.
-
- Этап 6
-
Верстаем форму Сверстаете разные формы для проекта: входа и регистрации, подписки, отправки заявки, фильтра каталога.
- Научитесь создавать и стилизовать формы в HTML, которые будут удобны и понятны для пользователей.
- Узнаете, как сделать так, чтобы сайт одинаково отображался в разных браузерах.
- Будете использовать современные селекторы CSS для более точной и гибкой стилизации.
- Освоите методы позиционирования элементов, чтобы располагать их именно там, где вам нужно.
- Познакомитесь с техникой использования SVG-спрайтов для оптимизации графики.
- Глубже разберёте понятие доступности, чтобы делать сайты удобными для всех пользователей.
-
- Этап 7
-
Создаём адаптивную стилизацию Разработаете адаптив с помощью технологии Sass — подготовите страницу к отображению на планшетах и мобильных устройствах.
- Познакомитесь с основами адаптива страниц, чтобы ваши сайты отлично выглядели и работали на любом устройстве.
- Изучите, как адаптировать изображения под разные размеры экранов и обеспечивать их чёткость на retina-дисплеях.
- Узнаете, как создавать кросс-платформенные сайты, которые одинаково хорошо функционируют на всех устройствах и платформах.
- Погрузитесь в мир препроцессора SCSS, чтобы упрощать и ускорять работу с CSS.
- Углубитесь в знакомство с Figma и разберёте новые возможности этого инструмента.
-
- Этап 8
-
Верстаем адаптивные разделы Создадите резиновые страницы — подготовите максимально гибкую вёрстку под отображение на любой ширине экрана и любом устройстве.
- Научитесь создавать резиновую вёрстку, чтобы ваши сайты динамически подстраивались под размеры экрана.
- Узнаете, как использовать адаптивное позиционирование элементов, чтобы они оставались на своих местах вне зависимости от устройства.
- Углубитесь в создание адаптивных сеток с помощью Grid, чтобы легко управлять расположением контента.
- Познакомитесь с чек-листом для самотестирования, который поможет вам самостоятельно проверять и улучшать качество своего кода.
-
- Этап 9
-
Разрабатываем интерфейсные анимации Анимируете страницу: оживите отдельные элементы и создадите анимации, состоящие из десятков шагов, для крупных блоков.
- Погрузитесь в мир анимации — начнёте со знакомства с её историей и основными принципами.
- Поймёте, как создавать микроанимации, которые добавят интерактивности и живости вашим проектам.
- Освоите многоступенчатые анимации, которые позволят вам создавать сложные и плавные переходы.
- Научитесь анимировать SVG-графику, чтобы ваши изображения оживали на странице.
- Узнаете, как использовать режим Present в Figma для создания анимаций, чтобы понимать, что всё работает именно так, как задумано.
-
- Этап 10
-
Готовим вёрстку к продакшену Подготовите готовую вёрстку страницы к публикации: исправите баги и оптимизируете скорость загрузки страницы с помощью Lighthouse.
- Познакомитесь с ключевыми принципами оптимизации сайтов для повышения их производительности.
- Научитесь проверять качество своего сайта с помощью инструмента Lighthouse, чтобы выявлять и исправлять возможные проблемы.
- Узнаете, как создавать и подключать графику в формате WebP для уменьшения размера изображений без потери качества.
- Изучите процессы подготовки сайта к публикации, чтобы он был готов к запуску и работал максимально эффективно.
-
Партнёр курса — Газпромбанк.Тех
7-е место в рейтинге ИТ-работодателей финтех-отрасли по данным исследования Хабр и ЭКОПСИ в 2023 году
- Развиваем внутреннюю ИТ-экспертизу, внедряем гибкие практики разработки. Собрали опыт сильнейших экспертов для тех, кто только в начале пути
- Разрабатываем клиентоориентированные сервисы для розницы и корпораций. В качестве итогового задания вы тоже создадите своё веб-приложение для портфолио
- Мы делаем ставку на собственную команду, а не на подрядчиков. Нам нужны талантливые фронтенд-разработчики, лучших студентов пригласим на стажировку
Научим всем ключевым навыкам HTML-верстальщика
Должность
HTML-верстальщикНавыки
- Владею навыками адаптивной вёрстки на HTML и CSS
- Работаю в графическом редакторе Figma
- Работаю в VS Code и CodePen
- Использую препроцессор Sass
- Владею инструментами оптимизации изображений и кода
- Верстаю по Pixel Perfect
- Придерживаюсь компонентного подхода
- Коммуникабельный, понимаю свою роль в команде разработки
Инструменты
Студенты делают проекты коммерческого уровня
Кроме технических навыков, вы прокачаете софт скилы
- Умение работать в команде
Узнаете, какие роли есть в команде разработки и на реальных задачах курса увидите, кто какие функции выполняет.
- Коммуникативные навыки
Научитесь чётко понимать задачи, взаимодействовать с наставником, а также уверенно презентовать и защищать свои идеи и решения в коде.
- Навыки планирования
Благодаря практическим работам, которые разбиты на этапы, научитесь организовывать свою работу по шагам, по понятному алгоритму.
- Опыт решения проблем
Узнаете, как работать с документацией и самостоятельно искать ответы на вопросы.
Как проходит обучение
Спикеры курса доступно объяснят даже сложные темы
Поддержим вас на пути к новой профессии
-
Наставники
Помогут с трудными заданиями, проверят ваши работы и подскажут, как сделать их лучше. -
Координаторы
Помогут сориентироваться на платформе и решить организационные вопросы. -
HR-консультант
Поможет в поиске работы. Вместе вы составите план развития, резюме и портфолио. Консультант подготовит вас к собеседованиям и даст доступ к закрытому каналу с вакансиями. -
Служба заботы
Поможет установить лицензионные программы и решить технические вопросы.
Где работают участники курсов Skillbox
Поможем вам достичь карьерных целей
- За 4 года
мы трудоустроили более 20 000 студентов
- 2 200+ компаний
находятся в нашей базе работодателей
- Более 20% студентов
берут заказы на фрилансе во время обучения
Найдите первых заказчиков в Скил Маркете
- Комьюнити
- Реальные заказы
- Первые клиенты
- Кейсы в портфолио
Скил Маркет — это комьюнити Skillbox в Telegram, в котором участники публикуют заказы на коммерческие и некоммерческие проекты. Там вы сможете откликаться на задачи и собирать команды для совместных проектов.
Подтверждение ваших навыков
В конце обучения получите сертификат установленного образца. Мы обучаем по государственной лицензии №Л035−1 298−77/179 609.
Выгодные условия оплаты
- Оплата — через
6 месяцев
При оформлении рассрочки начнёте её выплачивать после 6 месяцев обучения
- Рассрочка без процентов
Без переплат, первого взноса или дополнительных процентов
- Налоговый вычет
Можно вернуть до 13% от стоимости курса, мы поможем оформить документы
Часто задаваемые вопросы
-
Я никогда не разрабатывал сайты. У меня получится?
Конечно! У вас всё получится даже без специальных знаний, главное — не забывайте практиковаться. С трудными задачами помогут эксперты, которые будут сопровождать вас на протяжении всего курса. -
Смогу ли я совмещать работу и обучение?
Да, вы можете заниматься в свободное от работы время. Однако чтобы пройти курс за 9 месяцев, мы советуем уделять обучению по 2 часа в день. Но такой график необязательно соблюдать, вы можете проходить курс в удобном темпе. -
Какой компьютер потребуется для учёбы?
- Операционная система: Windows 10.0 или выше, macOS 10.15 или выше, Linux — актуальные версии ОС.
- Процессор: 4-ядерный процессор 2,5 Ггц и выше.
- Жёсткий диск: от 18 Гб свободного места.
- Оперативная память: от 4 Гб и выше.
- Видеокарта: Intel HD Graphics 4000 и выше, Nvidia 330m и выше, ATI Radeon HD 4850 и выше.
- Разрешение экрана: для комфортной работы желательно 1920×1080.
- Стабильное подключение к сети с устройства (рекомендованная скорость от 20 Мбит).
-
Нужно ли устанавливать программы для работы на курсе?
Заранее ничего скачивать не нужно. Во время курса мы поможем вам установить весь необходимый софт для работы. -
Кто будет мне помогать в обучении на платформе?
У вас будут проверяющие эксперты и куратор в Telegram-чате курса. Они прокомментируют практические работы, дадут полезные советы и ответят на любые вопросы. Вы сможете перенять их опыт, профессиональные знания и лайфхаки. -
Нужно ли знать английский?
Совсем необязательно. Названия встроенных функций и выражений на языках программирования вы запомните в процессе. А незнакомые фразы можете перевести с помощью Google Translate. К тому же у вас будет доступ к урокам и материалам онлайн-платформы для изучения английского. Сможете подтянуть грамматику и расширить словарный запас. -
Хватит ли мне проектов в портфолио по окончании профессии?
Да, за это не волнуйтесь. К концу обучения у вас будет портфолио из самых разных типов проектов:- сайты с возможностью купить товар или услугу, записаться на мероприятие;
- стриминговые сервисы с музыкой, подкастами, фильмами и сериалами;
- платформы для обработки данных клиентов компании, документов, счетов.
-
Я смогу работать из дома?
Конечно! Многие компании предлагают удалёнку на постоянной основе. Вам не придётся ездить в офис: главное — быть на связи с командой. А если хотите самостоятельно выбирать проекты и заказчиков, для вас всегда доступны фриланс-платформы. -
Действуют ли какие-нибудь программы рассрочки?
Да, вы можете купить курс в рассрочку — и спланировать свой бюджет, разбив всю сумму на небольшие ежемесячные платежи.
-
Могу ли я получить налоговый вычет за обучение на платформе?
Да, вы можете вернуть часть средств в виде налогового вычета. Основные условия: быть налоговым резидентом РФ и платить НДФЛ. Налоговый вычет составит до 13% от стоимости курса. Максимальная сумма возврата части НДФЛ — 15 600 рублей за год при цене курса 120 000 рублей.- Вы можете вернуть средства через работодателя или налоговую.
- Для этого понадобится договор на обучение на платформе, наша лицензия на образовательную деятельность и чек об оплате курса, который придёт вам на почту или в личный кабинет банка.
- Если вы будете оформлять вычет через налоговую, нужно будет заполнить декларацию 3-НДФЛ. Удобнее всего это сделать в личном кабинете на сайте Федеральной налоговой службы.
- В течение 30 дней налоговая подтвердит ваше право на вычет.
- Если будете оформлять возврат части НДФЛ через работодателя, вам останется подать ему заявление о получении налогового вычета.
Не переживайте, если процесс кажется вам сложным. Наши менеджеры помогут разобраться в том, как вернуть налоговый вычет.
-
Какой документ я получу после окончания курса?
В конце обучения получите сертификат установленного образца. Мы обучаем по государственной лицензии № Л035−1 298−77/179 609. -
Сколько платят на фрилансе за создание сайтов?
Зависит от масштабов проекта. Например, на портале Хабр Фриланс вы можете найти заказы на вёрстку от 30 000 рублей и на разработку интернет-магазина, которая может стоить сотни тысяч. Иногда требуется не просто создать сайт «под ключ», а поправить что-то в существующем коде. Такие заказы стоят недорого. Но если брать сразу несколько таких в месяц, у вас появится хороший дополнительный источник заработка.
- Санкт-Петербург
- Алматы
- Минск
- Москва
- Санкт-Петербург
- Алматы
- Волгоград
- Воронеж
- Екатеринбург
- Казань
- Красноярск
- Нижний Новгород
- Новосибирск
- Омск
- Пермь
- Ростов-на-Дону
- Уфа
- Челябинск
- Вологда
- Гомель
- Ижевск
- Иркутск
- Калининград
- Кемерово
- Киров
- Краснодар
- Курск
- Липецк
- Махачкала
- Оренбург
- Пенза
- Ростов
- Рязань
- Саратов
- Сочи
- Ставрополь
- Сургут
- Тверь
- Тольятти
- Томск
- Тула
- Тюмень
- Ульяновск
- Хабаровск
- Чебоксары
⭐ 97,5% участников довольны курсом
Жаль, что доступ к курсам даётся на определённый срок. По крайней мере, когда я брал профессию Frontend-разработчика, доступ, по-моему, давался на три года. Для меня это недостаточный срок, чтобы качественно изучить весь материал. Хотя, может быть, проблема во мне.
3 отзыва