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

🔝 Самые интересные статьи за последние дни: • Почему я не готовлюсь к алгоритмическому интервью • 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%; } }

👩‍💻 Всё ли ты знаешь о работе с асинхронностью? Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину. Читать...

🔎 Подборка валютных вакансий Frontend разработчик (Angular, jQuery) 🟢JavaScript (jQuery), TypeScript, Angular 9+, HTML5 Canvas, HTML, CSS 🟢до 700 000 ₸ | 3–6 лет опыта Full Stack React разработчик 🟢TypeScript (React, Node.js, Next.js), Python, HTML, CSS, SQL, NoSQL, PostgreSQL 🟢до 2 000 $ | 1–3 года опыта Lead frontend developer (Angular) 🟢TypeScript, Angular 18, RxJs, Highcharts, Jest, Playwright, SaaS 🟢до 5 000 $ | 3–6 лет опыта QA/TA engineer (JavaScript) 🟢JavaScript, Playwright, Cypress, QA 🟢до 1 500 $ | 1–3 года опыта Website Developer/UX UI Designer (WordPress) 🟢WordPress, Elementor, SEO, HTML, CSS, JavaScript, PHP, Adobe XD, Figma, Sketch 🟢от 2 000 до 3 000 $ | 5+ лет опыта

😱 Страх ошибки — худший тормоз для роста. Сколько раз ты избегал нового только потому, что боялся облажаться? Ошибка кажется концом света, но на деле это просто этап обучения. Сидя в зоне уверенности, ты никогда не узнаешь, насколько можешь быть сильнее, умнее, опытнее. 🎯 Что делать: начни с маленьких рисков. Возьми задачу, в которой пока не уверен, или предложи идею на митинге, даже если есть сомнения. Фейлы — это не клеймо, а возможность показать, как ты умеешь справляться и двигаться дальше. Чем раньше примешь это, тем быстрее начнёшь расти.

👩‍💻 CSS Веерное раскрытие с grid и @property Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию. Читать...

85% детей обижены: родители выбрали им нелюбимое хобби Уберегите от этого своего ребенка — запишите его на бесплатную профориентацию для детей от международной IT школы Алгоритмика. Она поможет подобрать полезное хобби с точностью до 94% (по результатам 10 000 прошедших). На профориентации ребенка будут вести эксперты из IT-компаний: - расскажут о профессиях; - объяснят основы программирования; - и предложат выполнить задания на интерактивной платформе. В конце родителям дадут обратную связь — какими сильными навыками обладает ваш ребенок, и как помочь ему раскрыть свой потенциал в IT. Записаться можно на этой неделе, в бесплатном потоке есть 7 мест. Зарегистрироваться #реклама 16+ online.algoritmika.org О рекламодателе

🔎 Подборка вакансий для лидов Senior Frontend Developer/Tech Lead 🟢React, Webpack/vite, TypeScript/JavaScript, Redux, PrimeReact, Axios 🟢от 200 000 ₽ на руки | опыт от 3 лет Lead Frontend (React) 🟢React, Vue (желательно), DevOps практики, PHP (желательно) 🟢Уровень дохода не указан | опыт более 6 лет Lead Frontend Developer (TypeScript / React) 🟢TypeScript, React, Next.js, HTML, CSS, SCSS, MobX, WebSockets, Docker, Linux 🟢Уровень дохода не указан | опыт от 4 лет Senior/Lead Frontend-разработчик 🟢TypeScript, Kotlin, React, Next.js, TailwindCSS, React Query, Redux Toolkit, eCharts, React Flow 🟢Уровень дохода не указан | опыт более 6 лет Fullstack разработчик/Team lead 🟢React, Redux, Material UI, JavaScript, HTML5, CSS3, SCSS, GitLab, Figma, TypeScript, Node.js 🟢Уровень дохода не указан | опыт от 5 лет

Курс графического дизайна с нуля. Бесплатное обучение! Выбери свое направление в дизайне: графический дизайн, веб-дизайн, UX/UI-дизайн. И изучи бесплатно основы дизайна с личным наставником! 3 работы в портфолио. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🚀 Вебинар: Погружение в децентрализованные технологии🚀 Узнайте, как использовать Solidity для создания продвинутых dApp. Этот вебинар важен для понимания текущего состояния и потенциала Web3, что критично для разработчиков в освоении Solidity и создании продвинутых dApp. ⏰ Дата и время: 11.11.2024 в 20:00 (мск) На уроке будет: - Обсуждение базовых технологий, включая блокчейн и смарт-контракты - Представление и анализ нескольких децентрализованных приложений - Рассмотрение успешных кейсов использования Solidity - Обсуждение безопасности - Прогнозы и перспективы развития децентрализованных технологий В результате участники получат актуальные знания о применении Solidity в разработке современных dApp. Не упустите возможность узнать больше о dApp и их потенциале! 👉 Зарегистрируйтесь для участия: https://vk.cc/cEhbDn Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576