Нашёл еще один бесплатный и качественный макет 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 выходят за границы контейнера, но при этом текст, который содержится внутри этих секций визуально всегда находится в пределах максимальной ширины общего контейнера

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

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

Я рад, что многие всё-таки находят время на выполнение практических заданий

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

Если получается решить задачу самостоятельно, полученная информация, сразу закреплённая практикой, усваивается и запоминается гораздо лучше

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

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

Архив с результатом вчерашнего практического задания постом ниже, но...

...при тестировании этого примера натолкнулся на неприятнейший баг в Firefox 87(64bit) - при горизонтальном изменении размера окна браузера не пересчитывается padding-right: calc(), за счёт которого и достигается решение данной задачи. Создал Bugreport - https://bugzilla.mozilla.org/show_bug.cgi?id=1700580. В Chrome, Opera, Edge пример работает корректно

Всем привет!

Сегодня хочу поделиться двумя наиполезнейшими ресурсами

https://htmldom.dev/ - работа с DOM на чистом JavaScript

https://1loc.dev/ - JavaScript решения в одну строку

Эти два ресурса - одни из лучших, что доводилось находить - максимум пользы!

Неделю назад опубликовывал макет, где была отрисована навигация по секциям

Написал небольшую статью с примером, как можно реализовать такую навигацию

Ссылка на статью - https://frontips.ru/navigaciya-po-sekciyam/

Всем привет!

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

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

Ссылка на статью - https://frontips.ru/effekt-sledovaniya-za-kursorom/

Небольшая подборка разнообразных полезных и просто интересных ресурсов:

https://mybrandnewlogo.com/ru/generator-gradienta-cveta - генератор градиента
https://colormixer.web.app - генератор цветовых схем

https://9elements.github.io/fancy-border-radius/ - фигуры с помощью border-radius
https://www.shapedivider.app/ - SVG фигуры/разделители для секций
https://bennettfeely.com/clippy/ - обрезка с помощью CSS свойства clip-path

Генераторы SVG фонов:
https://www.magicpattern.design/tools/css-backgrounds
https://www.noscriptbackgrounds.com/
https://www.visiwig.com/patterns/

https://neumorphism.io/ - генератор эффекта в стиле неоморфизма
https://glassmorphism.com/ - генератор эффекта прозрачного матового стекла (к сожалению, в Firefox пока не включена поддержка свойства backdrop-filter по-умолчанию, поэтому полноценный эффект смотрите в Chrome)

https://animista.net/ - множество CSS анимаций

https://cssvalues.com/ - описание значений CSS свойств - этот ресурс очень понравился, раньше не встречал его

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

Попробовать добиться такого же эффекта выделения ссылок, как в примере на видео

Используем только CSS

Результат в ближайшие день/два

Всем привет!

Результат вчерашнего практического задания в виде новой практической статьи :) там же можно скачать архив с результатом

Ссылка на статью - https://frontips.ru/effekt-plavnogo-podcherkivaniya-ssylok-pri-navedenii/

Еще немного практики ☕️

Сделать простую галерею, как в примере на видео, используя только CSS

- высота блока с галереей 600px
- изображения раскрываются при наведении курсора
- изображений может быть разное количество
- дополнительно можно сделать эффект плавного масштабирования изображения

Результат, как обычно, в ближайшие день/два

Всем привет!

Результат недавнего практического задания, как и в прошлый раз, решил оформить в небольшую статью, с описанием некоторых нюансов и особенностей. Надеюсь, будет полезно :)

Ссылка на статью - https://frontips.ru/variant-prostoj-galerei-izobrazhenij-na-flexbox/

Всем привет!

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

Задача: стилизовать и анимировать карточки, как в примере на видео

Чтобы не начинать с нуля, сделал начальный шаблон, который можно скачать по ссылке https://frontips.ru/assets/images/practice6/practice6.zip

Результат в ближайшие дни

https://omatsuri.app/ - подборка различных инструментов на одном ресурсе:

- генератор треугольников
- генератор теней для выбранного цвета
- генератор градиентов
- SVG-фигуры
- Сжатие SVG
- преобразование SVG → JSX
- преобразование в BASE64
- генератор случайных данных
- коллекция символов
- генератор текстов
- отображение различных курсоров
- подробная информация о нажатой клавише

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

А для просмотра и поиска необходимых символов есть другой, более интересный ресурс - https://www.toptal.com/designers/htmlarrows/