Учим HTML: истории из жизни, советы, новости, юмор и картинки — Горячее, страница 4

4 месяца назад

Что дальше после HTML/CSS?⁠⁠

Куда двигаться в веб-разработке и не только
Вчера мы публиковали подборку лучших курсов по HTML и CSS — возможно, вы уже выбираете подходящий вариант для старта. Но что делать после освоения базовой верстки? Куда двигаться, чтобы продолжать развиваться в IT?

Если вы уже уверенно верстаете страницы, но не знаете, какой навык осваивать следующим — этот материал для вас. Мы разберем основные направления развития после HTML/CSS и поможем выбрать подходящий путь.

1. Углубляемся в фронтенд: JavaScript и фреймворки
HTML и CSS — это база, но без JavaScript (JS) сайты остаются статичными. JS добавляет интерактивность: анимации, формы, динамическую загрузку данных.

Что учить?

Основы JavaScript: синтаксис, DOM-манипуляции, асинхронность (Promise, async/await).
Фреймворки и библиотеки: React.js (самый популярный, востребован в вакансиях), Vue.js (проще для новичков), Angular (используют в корпорациях).
Дополнительные инструменты: TypeScript (типизированный JS), Next.js/Gatsby (для SSR и статических сайтов).

Результат: сможете создавать сложные SPA (Single Page Applications) и претендовать на позицию Junior Frontend-разработчика.

Что дальше после HTML/CSS? Обучение, Frontend, Backend, HTML, CSS

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

108

Mahurchevator

4 месяца назад

Скринсейвер⁠⁠

код вставляем в блокнот и потом расширение ".txt" меняем на ".html":

<!DOCTYPE html>

<html>

<head>

<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>

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>

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

Показать полностью

[моё] Мат Рекурсия Скринсейвер HTML Длиннопост

4

7

GrblFF

5 месяцев назад

Страница 4.04⁠⁠

С днём веб мастера!
Меньше багов, код красив, прод жив.

[моё] HTML Веб-разработка Короткопост Текст

7

13

pimarov352

5 месяцев назад

Волосинка⁠⁠

Листаю ленту. Смотрю какая-то царапина на мониторе, которой не было. Но ногтем не чувствуется.

Лезу в код проверить, и да, волосинка добавлена на 1 апреля.

Выглядит как настоящая царапина. Прикол удался.

1 апреля Волосы Царапина CSS HTML Пикабу Скриншот

8

5

Valger

5 месяцев назад

CGI Media

3D-модель: World's best CSS Developer prize. Приз за лучшего CCS-разработчика⁠⁠

Ссылка на модель: https://skfb.ly/puP6Q

По ссылке выше можно скачать бесплатно для некоммерческого использования.

Опубликована: 16.03.2025

На момент публикации поста у модели:

0 скачиваний
2 просмотра
2 лайка

Всех желающих приглашаю также в свой ТГ-канал (чтобы было как у всех): https://t.me/fox_valger_3dsmax
Дискорд-сервер: https://discord.gg/nqnsBDJt
Тут мои модели постятся сразу после публикации на Скетчфабе.