2. Осваиваем бэкенд: серверная часть
Если вам интересно, как работают базы данных, авторизация и API, можно уйти в бэкенд.

Варианты технологий:

• Node.js + Express (если хотите остаться в JS-экосистеме);

• Python (Django/Flask) — проще синтаксис, много возможностей;

• PHP (Laravel) — популярен в вебе;

• C# (ASP.NET) / Java (Spring) — корпоративный сектор.

Результат: сможете писать серверную логику и стать Fullstack-разработчиком.

3. Идем в дизайн и UX/UI
Если вам нравится не только верстать, но и продумывать интерфейсы, можно развиваться в дизайн:

• Figma/Adobe XD — создание макетов;

• Основы UX — юзабилити, исследования;

• Анимация интерфейсов (CSS/JS, GSAP, Framer Motion).

Результат: сможете работать UI/UX-дизайнером или фронтендером с уклоном в дизайн.

4. Другие направления: мобильная разработка, тестирование, DevOps

• Мобильная разработка: React Native, Flutter, Swift/Kotlin.

• Тестирование (QA): ручное и автоматическое (Selenium, Cypress).

• DevOps: Docker, CI/CD, облачные технологии (AWS, Azure).

Как выбрать направление?
Вместо того чтобы пытаться освоить всt сразу, попробуйте определить, что вам интереснее всего:

• Если вам нравится создавать визуальные элементы, работать с анимацией и интерфейсами, то выбирайте фронтенд.

• Если вас больше увлекает: логика и работа с данными, создание сложных систем, решение неочевидных задач, то вам может подойти бэкенд-разработка.

• Если мечтаете: разрабатывать мобильные приложения, работать с современными кроссплатформенными технологиями, то вас может заинтересовать мобильная разработка.

Главное — не останавливаться! После HTML/CSS открывается огромный мир IT, и вы можете найти именно то, что вам по душе.

А что бы выбрали вы? Делитесь в комментариях!

Обзор курсов

1. Курс «HTML/CSS» от Otus
Вы научитесь верстать сайты с нуля, узнаете все тонкости HTML и CSS, изучите адаптивную и кросс-браузерную верстку, разберетесь в современных инструментах (Figma, Git, Webpack, Bootstrap, Tailwind), а также ознакомитесь с принципами семантической разметки и оптимизации кода. После курса вы сможете создавать профессиональные макеты, работать с дизайнерами и разработчиками, а ваш проект станет частью портфолио.

Цена:  57 000 ₽
Длительность: 4 месяца.
Подробности:

• практико-ориентированный подход;

• актуальные инструменты (Figma, Git, Webpack, Bootstrap, Tailwind);

• гибкий формат;

• от основ к продвинутым темам;

• подготовка к трудоустройству;

• требует дисциплины;

• если вы уже уверенно верстаете, часть тем покажется простой;

• 2 вебинара в неделю и ДЗ могут быть ощутимой нагрузкой при совмещении с работой;

• курс фокусируется на верстке, что может быть недостаточно для Fullstack-ролей без доп. обучения;

• налоговый вычет.

Посмотреть программу курса >>>

2. Курс «Веб-вёрстка» от Skillbox
Вы научитесь создавать современные, адаптивные сайты с нуля, узнаете, как работать с HTML и CSS на профессиональном уровне, изучите кросс-браузерную верстку и доступность (accessibility), разберетесь в инструментах разработчика (Git, DevTools), а также ознакомитесь с продвинутыми техниками — CSS-анимациями, оптимизацией кода и автоматизацией сборки. Курс идеально подойдет тем, кто хочет стать востребованным верстальщиком или заложить фундамент для карьеры фронтенд-разработчика.

Цена: 50 862 ₽
Цена со скидкой: 30 516 ₽
Длительность: 4 месяца.
Подробности:

• постепенное усложнение;

• практика с первых уроков;

• актуальные навыки;

• гибкий формат;

• бонус: год английского;

• обновляемая программа;

• курс охватывает верстку, но не JS, что ограничивает для fullstack-ролей;

• 4 месяца при совмещении с работой могут потребовать дисциплины;

• доступ к курсу навсегда.

Посмотреть программу курса >>>

3. Курс «Основы HTML и CSS» от Контур Школа
Вы научитесь создавать веб-страницы с нуля, узнаете основы HTML и CSS, изучите, как добавлять текст, изображения, таблицы и формы, разберетесь во взаимодействии frontend и backend, а также ознакомитесь с принципами верстки и оформления контента. Этот курс — идеальный старт для тех, кто хочет войти в веб-разработку или систематизировать базовые знания.

Цена: 15 000 ₽
Длительность: 2 месяца.
Подробности:

• все материалы доступны сразу, можно учиться в своем темпе;

• практические навыки;

• нет жестких дедлайнов, подходит для совмещения с работой или работой учебой;

• дополнительные материалы;

• подходит только для новичков, продвинутых тем нет;

• только тесты, не нашли упоминаний верстки реальных макетов или заданий;

• темы вроде frontend или backend лишь обозначены, но не раскрыты.

Посмотреть программу курса >>>

4. Курс «Вёрстка на HTML и CSS» от Бруноям
Вы научитесь профессионально верстать сайты, узнаете все тонкости HTML и CSS, изучите адаптивную и кросс-браузерную верстку, разберетесь в работе с Figma и GitHub, а также ознакомитесь с созданием CSS-анимаций. После курса вы сможете создавать современные веб-страницы и получите год поддержки наставника для старта карьеры в IT.

Цена: зависит от тарифа.
Длительность: 3 месяца.
Подробности:

• программа обновляется каждые 3 месяца;

• практическая направленность;

• год поддержки после обучения;

• помощь в трудоустройстве;

• комплексный подход;

• может потребовать значительного времени при совмещении с работой;

• базовый уровень JavaScript не охвачен, что ограничивает для некоторых позиций;

• несмотря на поддержку, требуется дисциплина;

• срок доступа к курсу зависит от тарифа;

• налоговый вычет.

Посмотреть программу курса >>>

5. Курс «Профессиональная верстка» от Хекслет
Вы научитесь профессионально верстать адаптивные сайты, узнаете все тонкости Flexbox и Grid, изучите препроцессоры SASS и Pug, разберетесь в автоматизации сборки с Gulp, а также ознакомитесь с Bootstrap для быстрой разработки. После курса вы создадите 2 полноценных проекта для портфолио и получите навыки, востребованные в современной веб-разработке.

Цена: от 3 900 ₽/мес.
Длительность: 5 месяцев.
Подробности:

• пошаговая программа;

• практико-ориентированный подход;

• современный стек;

• гибкий формат;

• AI-наставник;

• акцент на адаптивность;

• интенсивная программа;

• фокус только на верстке.

Посмотреть программу курса >>>

Реклама. ООО Отус онлайн-образование, ИНН 9705100963, erid: LdtCJyCA3, ЧАСТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ДОПОЛНИТЕЛЬНОГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ ОБРАЗОВАТЕЛЬНЫЕ ТЕХНОЛОГИИ СКИЛБОКС (КОРОБКА НАВЫКОВ), ИНН 9704088880, erid: 2VfnxxcSezk, АНО АНО ДОПОЛНИТЕЛЬНОГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ УЧЕБНЫЙ ЦЕНТР СКБ КОНТУР, ИНН 7715091714, erid: LdtCKGfGs, ООО БРУНОЯМ, ИНН 7840502496, erid: LdtCK4uLs, ООО ХЕКСЛЕТ РУС, ИНН 7325174845, erid: LdtCKGPYq.

<style>

:root {

--start-scale: 0.1;

--scale-step: 4.8;

--animation-duration: 15s;

--spawn-delay: 1.1s;

}

body {

margin: 0;

overflow: hidden;

background: black;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

}

.yu, .pahu {

position: absolute;

color: white;

font-family: Arial;

animation: yu-animation var(--animation-duration) linear forwards;

transform-origin: 63% 50%;

opacity: 0;

}

.yu {

font-size: 50vmin;

}

.pahu {

font-size: 15vmin;

color: #ff5555;

--start-scale: 0.8; /* Отдельный масштаб для надписи */

}

@keyframes yu-animation {

0% {

transform: scale(var(--start-scale)) rotate(var(--rotate-start));

opacity: 1;

}

100% {

transform: scale(30) rotate(var(--rotate-end));

opacity: 0;

}

}

</style>

</head>

<body>

<script>

let counter = 0;

let nextPahuAt = 10 + Math.floor(Math.random() * 6) + 5; // 10 + (5-10)

function createPahu() {

const pahu = document.createElement('div');

pahu.className = 'pahu';

pahu.textContent = 'ПАХУЮ';

const startAngle = Math.random() * 360;

const endAngle = startAngle + 360 * 3;

pahu.style.setProperty('--rotate-start', `${startAngle}deg`);

pahu.style.setProperty('--rotate-end', `${endAngle}deg`);

pahu.addEventListener('animationend', () => pahu.remove());

document.body.appendChild(pahu);

}

function createYu() {

counter++;

// Создаем ПАХУЮ каждые 10-15 букв Ю

if(counter >= nextPahuAt) {

createPahu();

counter = 0;

nextPahuAt = 10 + Math.floor(Math.random() * 6) + 5; // Новый интервал

}

const yu = document.createElement('div');

yu.className = 'yu';

yu.textContent = 'Ю';

const startAngle = Math.random() * 360;

const endAngle = startAngle + 360 * (Math.random() * 2 + 1);

yu.style.setProperty('--rotate-start', `${startAngle}deg`);

yu.style.setProperty('--rotate-end', `${endAngle}deg`);

yu.addEventListener('animationend', () => yu.remove());

document.body.appendChild(yu);

setTimeout(createYu, parseFloat(getComputedStyle(document.documentElement)

.getPropertyValue('--spawn-delay')) * 1000);

}

// Запуск анимации

// made by Махурчеватор just for fun ^^

createYu();

</script>

</body>

</html>

обновил, убрал спойлер, хз через задницу вставляется, в каментах еще раз продублировал, в посте форматирование кода хз как настроить