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

https://frontips.ru/kak-otsledit-klik-vne-elementa/

Добавил на сайт самописный поиск на Vue.

Мгновенный поиск с подсветкой по названию статьи, описанию и ключевым словам

Получилось довольно неплохое решение для статического блога

https://frontips.ru/search

Приветствую всех подписавшихся!

Новая статья про свойство z-index уже доступна. Приятного чтения.

---

Свойство z-index c первого взгляда кажется простым, и это не далеко от истины, но чтобы полноценно разобраться в его работе, необходимо узнать о такой концепции, как контекст наложения (stacking context)

https://frontips.ru/svojstvo-z-index-i-kontekst-nalozheniya/

Всех с наступающими праздниками!

Давайте в следующем году развиваться вместе ;)

Максимально уютный плейлист на предстоящие праздники.

Приятного прослушивания!

https://frontips.ru/spotify-cozy-lofi/

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

Добавил на сайт тёмную тему и установил её по-умолчанию.

Подробнее про создание тёмной темы писал в статье по ссылке ниже

https://frontips.ru/css-peremennye-kak-sdelat-temnuyu-temu/

---

Переключить тему можно в выпадающем меню, нажав на иконку лампочки.

Первая статья в 2021 году уже доступна. Приятного чтения!

—-

Свойство position является одним из базовых CSS-свойств, которое необходимо понять при изучении вёрстки. В этой статье мы разберём его подробно на примерах.

https://frontips.ru/pozicionirovanie-elementov-svojstvo-position/

Практическая статья по созданию адаптивных вкладок (tabs), используя JavaScript уже доступна. Приятного чтения!

https://frontips.ru/variant-adaptivnyh-vkladok-tabs-na-javanoscript/

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

https://frontips.ru/plavnoe-izmenenie-vysoty-bloka-bez-jquery/

Привет всем подписавшимся!

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

Мой блог, как и этот канал, достаточно молодые (около 3-4 месяцев), но уже имеются положительные отзывы, и это вдохновляет продолжать писать и развивать проект!

Давайте развиваться вместе! ;)

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

По одной из идей уже написал небольшую практическую статью, где рассмотрим создание вертикального адаптивного слайдера с превью на основе плагина Swiper

Статья доступна по ссылке ниже

https://frontips.ru/variant-vertikalnogo-slajdera-s-prevyu-na-osnove-swiper/

---

Благодарю за интерес к моему каналу/блогу!

Всем привет!

Готова еще одна небольшая практическая статья. На этот раз сделаем несложную реализацию модальных окон без каких-либо библиотек и плагинов

Статья доступна по ссылке ниже

https://frontips.ru/variant-modalnyh-okon-na-javanoscript/

Всем привет! ✋🏻

В новой статье посмотрим, как можно просто и быстро создавать и использовать символьные SVG-спрайты

https://frontips.ru/sozdayom-i-ispolzuem-simvolnyj-noscript-sprajt/

---

Всем хороших выходных! ☕️

Приветствую!

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

В этот раз посмотрим, как сделать простой Preloader при загрузке страниц

Ссылка на статью - https://frontips.ru/kak-sdelat-prostoj-preloader-pri-zagruzke-stranic/

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

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

Пока очередная статья в процессе написания, предлагаю, время от времени, публиковать бесплатные, но качественные макеты Figma для практики/портфолио

Поддерживаете ли вы данную идею?

---

Первый макет от https://figmango.com/

Всем привет!

Спасибо, что поддержали идею с публикацией макетов! Немного позже будет еще одна идея на обсуждение :)

---

Теперь к новой статье!

В этот раз посмотрим, как добавлять маски для текстовых полей input

Частая задача при вёрстке макетов - добавление масок для текстовых полей, чтобы пользователь вводил данные именно в том формате, который необходим

Ссылка на статью:

https://frontips.ru/kak-sdelat-masku-dlya-tekstovyh-polej-input/

Друзья!

При анонсировании своих статей решил добавлять кнопку "Поддержать проект"

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

Нажав на кнопку "Поддержать проект", вы перейдёте на страницу https://frontips.ru/donate, где есть три рекламных блока Google Adsense без неприемлемого контента. Я буду благодарен, если вы иногда просто будете переходить по этим рекламным блокам

Также вы можете поддержать проект просто поделившись ссылкой на статью/канал/пост

Ваша поддержка важна для меня! Спасибо!

—-

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

Как и обещал - выкладываю следующий макет для вёрстки (постом ниже) 👇🏼

Макет взят здесь - https://dribbble.com/shots/9693631-SolarBox-Landing-Page-Figma-Freebie

---

Некоторые полезности для вёрстки этого макета:

Шрифт берем на Google Fonts - https://fonts.google.com/specimen/Poppins?query=+Poppins&preview.text_type=custom

Как подключать шрифты описывал в этой статье - https://frontips.ru/podklyuchaem-veb-shrifty/

---

Для секций "Our Focus" и "Our Projects" рекомендую использовать display: grid; - данную технологию уже активно использую во всех текущих проектах

---

Если будут трудности с секцией "About us", можно будет почитать статьи про position и z-index:

Позиционирование элементов - свойство Position - https://frontips.ru/pozicionirovanie-elementov-svojstvo-position/
Свойство z-index и контекст наложения - https://frontips.ru/svojstvo-z-index-i-kontekst-nalozheniya/

---

Так как вёрстка должна быть адаптивной, возможно пригодятся следующие статьи:

Основы адаптивной верстки - https://frontips.ru/osnovy-adaptivnoj-vyorstki/
Адаптивная навигация - https://frontips.ru/adaptivnaya-navigaciya/

—-

Всем хорошего дня!

—-

Всем привет!

Появилась мысль записать видео с вёрсткой пары секций макета, который опубликовывал в предыдущем посте, залить на Youtube, а сюда выложить результат - то есть архив с вёрсткой этих секций

Но сразу оговорюсь, что это будет эксперимент - просто видео процесса вёрстки используя Gulp/Pug/Stylus, без комментариев, монтажа и так далее