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

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

Автор дизайна - 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/

Процесс вёрстки/программирования должен быть комфортным, и визуальная/аудиальная составляющие не менее важны, чем физические(рабочий стол, кресло, клавиатура, мышь и тд)

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

https://coding-fonts.css-tricks.com/ - выбираем шрифт
https://www.vscolors.com/ - выбираем тему (темы представлены для VSCode, но эти же темы можно найти и для других редакторов)

Мне больше всего приглянулись тема One Dark и шрифт Fira Code, которые использую уже довольно длительное время

В аудиальном плане в процессе вёрстки отдаю предпочтение тишине или нейтральной lofi музыке. Недавно появился эстетически приятный проект - https://lofi.cafe/. Если вам тоже нравится lofi музыка - рекомендую

Всем привет!

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

Ссылка на статью - https://frontips.ru/psevdo-3d-effekt-pri-navedenii-na-kartochku/

В коллекцию потрясающих ресурсов - бесплатные, лаконичные и максимально полезные

https://htmlreference.io - гид по HTML элементам

https://cssreference.io/ - визуальный гид по CSS свойствам

Всем привет!

Сегодня хотел бы поделиться хорошим плагином для создания parallax-эффекта

RELLAX.js - плагин написан на чистом JavaScript, минифицированная версия весит всего около 7кб, довольно прост в использовании

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

Ссылка на страницу плагина - https://dixonandmoe.com/rellax/