​​Всем привет!

Как и обещал, выкладываю окончательный результат - ниже будет два архива

dist - готовая вёрстка, добавлены CSS стили

project - проект на gulp, добавлены Stylus стили

Если еще не успели попробовать сами, пока проигнорируйте, вернётесь позже

Сегодня-завтра будет опубликована новая статья, для которой буду использовать данную вёрстку

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

​​В продолжение нашей совместной вёрстки макета - новая практическая статья ;)

В jQuery есть метод siblings(), который позволяет получить соседние элементы. В этой статье посмотрим, как добиться того же результата на чистом JavaScript и сделаем довольно интересный визуальный эффект, используя данную возможность

Ссылка на статью - https://frontips.ru/kak-poluchit-sosednie-elementy-bez-jquery/

Нашёл еще один приятный и несложный макет для практики/портфолио

Макет взят здесь - https://www.figmaresources.com/resources/decbase-template

Превью макета - https://www.figma.com/file/Y3KCo2dzmj1fL8IoBmA6H8/Decbase?node-id=0%3A1

Копировать себе в Figma - https://www.figma.com/file/Y3KCo2dzmj1fL8IoBmA6H8/Decbase/duplicate

---

Данные материалы могут быть полезны при вёрстке этого макета

Для более гибкой работы с изображениями - https://frontips.ru/zoom-effekt-masshtab-i-pozicionirovanie-izobrazheniya/

В качестве слайдера можно использовать Swiper - https://frontips.ru/variant-vertikalnogo-slajdera-s-prevyu-na-osnove-swiper/ (в статье можно посмотреть, как подключить слайдер и некоторые настройки)

Для числа "20" с фоновым изображением - https://frontips.ru/zalivka-teksta-gradientom-ili-izobrazheniem/

Для иконок социальных сетей - https://frontips.ru/sozdayom-i-ispolzuem-simvolnyj-noscript-sprajt/

Если будут еще вопросы, попробуйте воспользоваться поиском - https://frontips.ru/search

Новое практическое задание :)

Необходимо добиться поведения, как в примере на видео

Используем только CSS, круги 200x200 пикселей, адаптивности пока не нужно

---

Завтра/послезавтра скину свой вариант реализации

Через некоторое время, на основе этого примера будет написана статья (возможно, даже не одна)

---

В архиве ниже, будет 2 варианта шаблона:

Practice#2 - чистые html/css

Practice#2(gulp-pug-stylus) - сборка gulp/pug/stylus

Опубликовываю свою реализацию вчерашнего практического задания

Внутри архива ниже будет:

Practice#2-result - чистый html,css

Practice#2(gulp-pug-stylus)-result - сборка gulp/pug/stylus

Можете пока сравнить со своим результатом

И уже завтра постараюсь дописать и опубликовать новую статью

Всем привет!

Возможно, не самая популярная тема - тема доступности, но решил написать ознакомительную статью по media-запросам any-pointer и any-hover с небольшим практическим примером, так как мне показались интересными возможности их применения

Ссылка на статью - https://frontips.ru/izmenyaem-povedenie-elementov-pri-nalichii-tochnogo-ukazatelya/

Сегодня при вёрстке очередного макета, снова натолкнулся на один часто встречающийся кейс, и решил написать об этом небольшую статью

Когда в дизайне элемент навигации при наведении выделяют другим начертанием шрифта, например bold, элемент становится шире и занимает больше пространства, чем раньше, при этом соседние элементы сдвигаются на некоторое расстояние, что является некорректным поведением

Думаю статья будет полезной, если вы встретите такой дизайн, но еще не решали данную задачу

Ссылка на статью - https://frontips.ru/izmenit-nachertanie-shrifta-pri-navedenii-bez-sdviga-sosednih-elementov/

Нашёл еще один бесплатный и качественный макет Figma для практики/портфолио

Несложный, минималистичный, светлый дизайн для блога

Макет взят здесь - https://logwork.com/blog/downloads/free-fashion-blog-template

Файл макета постом ниже👇🏼

Один из основных навыков, которым должен обладать верстальщик, это умение корректно составлять HTML-структуру

Правильно составленная структура экономит время при CSS-стилизации, адаптивности, расширении проекта и последующей его поддержке

Некоторое время назад я уже писал статью про методологию БЭМ, которая помогает добиться грамотной структуры вёрстки - https://frontips.ru/bem-polnyj-kontrol-nad-verstkoj/

Сегодня хотел бы поделиться одним полезным ресурсом, на котором можно наглядно посмотреть структуру часто используемых компонентов вёрстки, и варианты наименования таких компонентов и их дочерних элементов

Ссылка на ресурс - https://9elements.com/bem-cheat-sheet/

Друзья!

Нашёл впечатляющий, полезный ресурс - https://webcode.tools/

На данном ресурсе в интерактивном режиме можно посмотреть, как работают свойства CSS3, возможности HTML5, посмотреть поддержку этих возможностей браузерами и сгенерировать необходимый код

Помимо CSS3 и HTML5, есть генераторы для SEO-оптимизации

Все грамотно структурировано, максимально лаконично и интуитивно понятно

Совсем небольшой, но стилистически приятный макет, в котором есть интересные моменты при вёрстке некоторых элементов

По возможности, постараюсь написать статью, как сделать навигацию по секциям

Автор дизайна - https://krystonschwarze.com/

Вместо платных шрифтов можно использовать эти:
https://fonts.google.com/specimen/Playfair+Display
https://fonts.google.com/specimen/Poppins

Файл макета постом ниже 👇🏼

Новое практическое задание

Необходимо добиться поведения, как в примере на видео:

- есть контейнер, максимальная ширина которого 1120px
- секция Portfolio с сеткой фотографий находится внутри этого контейнера
- секции About и Contacts выходят за границы контейнера, но при этом текст, который содержится внутри этих секций визуально всегда находится в пределах максимальной ширины общего контейнера

Мой вариант реализации завтра/послезавтра

Скриншот страницы для ориентира 👆🏼