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

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

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

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

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

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

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

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

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

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

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

...при тестировании этого примера натолкнулся на неприятнейший баг в 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

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