frontips.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Друзья!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Всем привет!

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

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

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

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

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

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

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

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

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

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

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

---

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

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

---

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

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

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

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

Макет взят здесь - 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-svg-sprajt/

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

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

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

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