С помощью каких технологий верстал

Ответ

HTML, CSS, JavaScript — базовый стек. Для адаптивности — Flexbox, Grid, медиазапросы. Препроцессоры (SASS/LESS) для удобства стилей.

Фреймворки:

  • React/Vue/Angular для сложных SPA
  • Bootstrap/Tailwind для быстрого прототипирования

Пример адаптивной верстки:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .menu { flex-direction: column; }
}

Для оптимизации: BEM, CSS-модули, критический CSS. Инструменты: Figma/Photoshop → HTML/CSS.

Ответ 18+ 🔞

Ну вот, опять про фронтенд, да? Слушай, тут всё как в жизни — есть базовый набор, без которого ты просто мудак с пустыми руками. HTML, CSS, JavaScript — это как хлеб, вода и соль. Без них нихуя не соберёшь.

Адаптивность? Да это ж святое! Все сидят в телефонах, как будто к ним приклеены. Flexbox, Grid — твои лучшие друзья, чтобы всё не разъехалось к хуям собачьим. Медиазапросы — это когда ты говоришь сайту: «Слушай, дружок, если экран уже, чем твои амбиции, веди себя прилично».

Препроцессоры вроде SASS — это для ленивых гениев. Зачем писать одну и ту же хуйню сто раз, если можно написать один раз и заставить её плодиться?

Фреймворки — вот где начинается цирк:

  • React/Vue/Angular — это когда тебе нужно не просто страничку, а целое приложение, где всё вертится, обновляется и требует тонну логики. Выбирай на вкус, но React — это как водка, все его знают.
  • Bootstrap/Tailwind — для тех, кому впадлу изобретать велосипед. Хочешь быстро сделать что-то, что не стыдно показать? Бери готовые кирпичики и строй. Особенно Tailwind — он сейчас в моде, как похабный анекдот.

А вот тебе кусочек магии, чтобы твоя сетка не разваливалась на пиздюлины при сжатии окна:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

@media (max-width: 768px) {
  .menu { flex-direction: column; }
}

Видишь? auto-fit и minmax — это волшебные слова. Они говорят: «Эй, братва, вставайте в ряд, но если места мало — не толкайтесь, перестраивайтесь». А внизу — классика жанра: на маленьком экране меню становится столбиком, а не сраным бутербродом.

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

Инструменты? Открываешь Figma (или, прости господи, старый-добрый Photoshop), смотришь на макет и думаешь: «Ну и какую же хуйню тут нарисовал дизайнер?». А потом садишься и превращаешь эту картинку в живой, работающий код. Вот и вся философия, ёпта.