Логово верстальщика

🕵️‍♂️ Когда твоя работа зависит от Василия Задача вроде простая, но всё стопорится, потому что «это знает только Василий, он тут со времён динозавров». Никакой документации, только магия в его голове. В итоге — пока он не ответит, ты зависаешь, а проект буксует. Звучит знакомо? ⚙️ Если так, пора разорвать этот порочный круг. Вместо бесконечных вопросов начни собирать всё в одну базу знаний — хоть в Notion, хоть на салфетках. Предложи команде попробовать парное программирование: пока Василий творит чудеса, ты уже разбираешься, как эти фокусы повторить.

👩‍💻 Ошибки при работе с tailwindcss Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения. Читать...

Обучение на Frontend-разработчика. С нуля за 9 месяцев. На курсе вы получите все навыки, необходимые для старта в профессии Frontend-разработчика. Персональный наставник middle/senior уровня. 14 проектов, лайвкодинг, хакатоны, репетиции техсобеседования. Освоите JavaScript, React, TypeScript Официальный диплом и сертификат школы. Поддержка наставника по JS в течение 3-х месяцев после диплома. Гарантия трудоустройства. Если вы не устроитесь, вернём деньги. Это закреплено в договоре п. 6.14 С 9 по 30 ноября 2024 г. скидка 40% на все программы Result School Узнать больше #реклама 16+ result.school О рекламодателе

📈 Подборка статей для вашей карьеры • Почему любая оценка IT-шников обречена на провал? • Карьерный рост из senior: кто такой staff-инженер? • «Так и знала, что вы — бывший двоечник!» Самые глупые ошибки моей компьютерной молодости • Что лучше — оценка рекрутера или подбрасывание монетки? • Мотивационные стили в обучении: почему вам (возможно) не нужны цели или общение с одногруппниками

Получите грант на обучение в Центральном университете Прояви себя, получи грант до 2,8 млн на обучение ИТ и бизнесу в вузе. Для школьников 10-х и 11-х классов, СПО. Подать заявку #реклама apply.centraluniversity.ru О рекламодателе

🔎 Подборка вакансий для сеньоров HTML-верстальщик 🟢HTML, CSS, SCSS, JavaScript, GSAP, Anime.js, Canvas, Git, Gulp, Figma, Photoshop, Illustrator 🟢от 80 000 до 130 000 ₽ | 1–3 года Дизайнер-верстальщик 🟢HTML, CSS, JavaScript, Figma, Tilda, Clickfunnels, AXL 🟢от 60 000 до 200 000 ₽ | 3–6 лет HTML-верстальщик/CSS Senior 🟢HTML, CSS, SCSS, Less, JavaScript, Git, Figma, Photoshop, Illustrator 🟢от 130 000 до 180 000 ₽ | 3–6 лет Frontend-разработчик для сайта 🟢HTML, CSS, JavaScript, Vue.js, jQuery, Gulp, Figma 🟢от 120 000 ₽ | 3–6 лет Frontend-разработчик (Middle/Senior) 🟢JavaScript, Vue3, Nuxt3, HTML, CSS, SCSS, LESS, Git, REST API 🟢Уровень дохода не указан | 3–6 лет

👩‍💻 Button with tooltip hover timing feedback Панель плеера с подсказками при наведении. Сделана на SVG и CSS. Открыть код...

Проведём аудит вашего сайта по 50 критериям бесплатно! Узнайте, почему ваш сайт ещё не в топе выдачи Яндекс и Google. Занимаемся разработкой и продвижением сайтов с 2012 года. Узнать больше #реклама omegait.ru О рекламодателе

🔝 Самые интересные статьи за последние дни: • Почему я не готовлюсь к алгоритмическому интервью • 7 популярных библиотек Vue 3 UI-компонентов, которые заслуживают внимания • Жаркий спор по теме Masonry в CSS • Разница между ранним и поздним связыванием • Расширения VSCode для комфортной работы с проектами

👩‍💻 Фиксированная кнопка внизу экрана Создайте кнопку, которая всегда располагается в правом нижнем углу экрана, поверх основного содержимого страницы. При наведении на кнопку её цвет должен изменяться. Ожидаемое поведение: • Кнопка всегда остаётся в правом нижнем углу экрана. • При наведении на кнопку её цвет меняется на более тёмный оттенок. • Кнопка не перекрывает содержимое страницы и выглядит гармонично. Решение задачи🔽

<div class="content"> <p>Основное содержимое страницы...</p> </div> <button class="floating-button">Нажми меня</button> /* Стили основного содержимого */ .content { padding: 20px; font-family: Arial, sans-serif; line-height: 1.6; } /* Фиксированная кнопка */ .floating-button { position: fixed; bottom: 20px; right: 20px; padding: 15px 20px; background-color: #007BFF; color: white; border: none; border-radius: 50px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); cursor: pointer; transition: background-color 0.3s, transform 0.2s; } /* Эффект наведения */ .floating-button:hover { background-color: #0056b3; transform: scale(1.1); }

😱 Вот и всё! Теперь вам не нужно сливать деньги на дорогие курсы по фронтенд-разработке — всё необходимое для обучения доступно совершенно бесплатно! Всё, что нужно для изучения фронтенда: полное руководство по HTML, CSS, а также практические гайды — @made_in_html_css. Кстати, мы детально анализируем материалы по FRONTEND-разработке. При этом информация представлена в лёгком и доступном формате, который делает процесс обучения увлекательным и ненадоедливым! Не упустите шанс подписаться на этот уникальный канал — Made in HTML/CSS

🔎 Подборка вакансий для мидлов Верстальщик HTML 🟢HTML, CSS3, SCSS, JavaScript, jQuery, Bootstrap, Git 🟢Уровень дохода не указан | 1–3 года Сreative Middle HTML-верстальщик (Frontend-разработчик) 🟢HTML, PUG, JavaScript, CSS, SCSS, БЭМ, кроссбраузерная вёрстка, GSAP, AnimateJs, Git 🟢Уровень дохода не указан | 3–6 лет Frontend разработчик middle 🟢HTML, CSS, SCSS, PostCSS, JavaScript, Git, Pug, Fancybox, Swiper, Yandex Map 🟢от 140 000 до 180 000 ₽ | 3–6 лет Middle Веб Дизайнер на Tilda 🟢Figma, Tilda, Web-дизайн, Дизайн, Веб-дизайн 🟢от 70 000 до 90 000 ₽ | 1–3 года Дизайнер-верстальщик 🟢Adobe Illustrator, Adobe XD, Adobe InDesign, Полиграфический дизайн, Графический дизайн, Верстка, Дизайн-мышление, Верстка презентаций, Дизайн наружной рекламы 🟢от 55 000 до 65 000 ₽ | 1–3 года

👩‍💻 Что такое Grid Layout в CSS и как он работает? CSS Grid Layout — это мощная система для создания сеточных макетов на веб-страницах. Она позволяет легко размещать элементы на странице в виде строк и столбцов с минимальным количеством кода. Grid обеспечивает точное позиционирование и гибкость, идеально подходя для сложных макетов. ➡️ Пример:

<div class="grid-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
    gap: 10px; /* Расстояние между элементами */
  }
  .item {
    background: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.

🖥 Подробнее тут

👩‍💻 Gooey SVG Filter Button Анимированная кнопка с эффектом при наведении. Сделана на SVG, CSS и JavaScript. Открыть код...

🔎 Подборка вакансий для джунов Junior Frontend разработчик (Vue) 🟢HTML5, CSS3 (SCSS), JavaScript, TypeScript, Vue 2/3, Webpack/Vite, Vuex/Pinia, Stylelint/Eslint, GitLab 🟢Уровень дохода не указан | Опыт 1–3 года Junior frontend-разработчик (Saas, IT, Integration team) 🟢JavaScript (ES6+), DOM-API, HTML, CSS, SCSS, Vue2/Vue3 Options API, API (GET и POST методы), Git, консоль, Vue Devtools 🟢до 60 000 ₽ | Без опыта Junior Front-end Developer 🟢HTML, CSS, JavaScript, PHP, адаптивная верстка, пиксель перфект верстка, GET и POST запросы, работа с хостингами и провайдерами доменов 🟢до 100 000 ₽ | Опыт 1–3 года Junior Frontend Developer 🟢JavaScript, TypeScript, React, Redux-Saga, Next.js, HTML, CSS 🟢от 35 000 до 120 000 ₽ | Без опыта Junior Front-end Developer 🟢HTML, CSS, JavaScript, PHP, адаптивная верстка, пиксель перфект верстка, GET и POST запросы, работа с хостингами и провайдерами доменов 🟢до 100 000 ₽ | Опыт 1–3 года

В России не хватает дизайнеров интерьеров! по данным агрегаторов вакансий Именно поэтому онлайн школа Geometrium приглашает на практический 3-х дневный интенсив по дизайну интерьера Тебе точно нельзя пропустить этот интенсив, если ты: - Хочешь стать дизайнером интерьера - Хочешь сделать ремонт в своей квартире На интенсиве: ✅ Поймешь, как начать карьеру в сфере дизайна ✅ Познакомишься с программами для дизайна ✅ Сделаешь планировку и мудборд ✅ Узнаешь про бесплатные способы найти клиентов ✅ Узнаешь сколько зарабатывает дизайнер Жми - "Узнать больше" и занимай место Узнать больше #реклама 16+ geometrium-lesson.ru О рекламодателе

👩‍💻 Создание карточки с изображением и текстом, выровненным по нижнему краю Создайте карточку, которая содержит изображение и текст, выровненный по нижнему краю карточки. Карточка должна иметь фиксированную высоту, и текст всегда должен находиться у нижней границы. Ожидаемое поведение: • Изображение занимает верхнюю часть карточки. • Текст закреплён внизу карточки, даже если изображение маленькое. Решение задачи🔽

<div class="card"> <img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-img"> <div class="card-text">Текст внизу карточки</div> </div> .card { width: 200px; height: 300px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #ccc; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .card-img { width: 100%; height: auto; max-height: 70%; /* Ограничиваем высоту изображения */ } .card-text { padding: 10px; background-color: #f9f9f9; text-align: center; }

👩‍💻 8 важнейших аспектов JavaScript, которые нужно освоить до изучения React Изучение React без прочной базы JavaScript похоже на строительство дома без фундамента. В этой статье разберем 8 ключевых концепций, которые помогут тебе уверенно чувствовать себя в React-разработке и писать качественный код. Читать...

🔝 Самые интересные статьи за последние дни: • Знакомьтесь: input, output и model. Новые функции в Angular • Мой путь в мире веб-рендеринга: от статических страниц к гибридным архитектурам • Новый этап эволюции Vue — Vapor • Как сделать один плагин сразу для всех сборщиков фронтенда? • Личный опыт: добавление микроразметки на сайт

👩‍💻 Адаптивный блок с равными колонками Создайте адаптивный блок, который содержит три колонки одинаковой ширины. На больших экранах (от 1024px) колонки должны располагаться в один ряд, на планшетах (от 768px до 1023px) — в два ряда по две и одну, а на мобильных устройствах (до 767px) — каждая колонка должна занимать всю ширину. Ожидаемое поведение: • На больших экранах: три колонки в один ряд. • На планшетах: две колонки в первом ряду, одна во втором. • На мобильных: каждая колонка занимает всю ширину. Решение задачи🔽

<div class="container"> <div class="column">Колонка 1</div> <div class="column">Колонка 2</div> <div class="column">Колонка 3</div> </div> .container { display: flex; flex-wrap: wrap; gap: 16px; /* Отступы между колонками */ margin: 0 auto; max-width: 1200px; } .column { background-color: #4CAF50; color: white; padding: 20px; text-align: center; border-radius: 8px; flex: 1 1 calc(33.333% - 16px); /* Для больших экранов */ box-sizing: border-box; } /* Планшеты: две колонки в первом ряду */ @media (max-width: 1023px) { .column { flex: 1 1 calc(50% - 16px); } } /* Мобильные устройства: одна колонка в строке */ @media (max-width: 767px) { .column { flex: 1 1 100%; } }