frontips.ru

2021-06-04 12:01:48 Если вы сейчас на стадии изучения браузерных событий (DOM Events)...

- https://learn.javascript.ru/bubbling-and-capturing
- https://wesbos.com/javascript/05-events/targets-bubbling-propagation-and-capture
- https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Events

...то вам может быть полезен интересный инструмент визуализации - https://domevents.dev

Данный инструмент помогает наглядно увидеть порядок выполнения событий, а также понять разницу функций preventDefault(), stopPropagation(), stopImmediatePropagation() Открыть/Комментировать

2021-06-03 13:01:34 Уверен, каждый начинающий HTML-верстальщик, время от времени задаётся вопросом, можно ли вкладывать какой-либо HTML-тег в другой. Например, можно ли вложить img или div в тег абзаца p

Чтобы не искать эту информацию в спецификации, есть полезный инструмент-шпаргалка по вложенности тегов - https://caninclude.glitch.me/

Выбираете дочерний и родительский теги и сразу получаете результат Открыть/Комментировать

2021-06-02 12:01:41 https://wesbos.com/javascript - гид по JavaScript для начинающих - это невероятно титанический труд, да еще и в бесплатном доступе. Гид написан на простом английском - дополнительная мотивация и возможность подтянуть свой английский ;)

Также у автора есть отличнейшие бесплатные курсы:

- https://flexbox.io/ - курс из 20 видео по Flexbox c практическими примерами его использования
- https://cssgrid.io/ - около 4 часов видео по CSS Grid
- https://javascript30.com/ - практические видео по JavaScript Открыть/Комментировать

2021-06-01 14:01:47 Привет, друзья!

Сделал простой дизайн-макет, можете смело забирать и верстать для практики/портфолио

Ссылка на макет - https://www.figma.com/community/file/981156126929894622/Lorenzo-Anderson---Professional-Photografer

Но чтобы это не было очередным проходным макетом, проведем эксперимент - желающим предлагаю ревью/обзор вашей вёрстки этого макета на платной основе или можно сразу получить уже готовую вёрстку за символическую плату (например, чтобы сравнить или подсмотреть решение), подробнее здесь - https://telegra.ph/Obzorrevyu-vashej-vyorstki-maketa-ili-gotovaya-vyorstka-dlya-sravneniya-06-01 Открыть/Комментировать

2021-05-28 12:01:47 Всем привет!

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

Буду рад, если найдете для себя что-то полезное :)

Ссылка на статью - https://frontips.ru/gradientnaya-prozrachnost-kartochek-transformaciya-kursora-pri-navedenii/ Открыть/Комментировать

2021-05-25 13:01:13 Немного попрактикуемся ;)

Задача: добиться поведения как в примере на видео
- стилизовать и анимировать круг на заднем плане
- стилизовать карточки как в примере (обратите внимание на полупрозрачный низ карточки)
- при наведении курсор заменяем на полупрозрачный круг (ищем подсказки здесь - https://www.30secondsofcode.org/css/s/mouse-cursor-gradient-tracking)

Начальный шаблон - https://frontips.ru/assets/images/practice7/practice7.zip

Результат через несколько дней Открыть/Комментировать

2021-05-21 12:01:24 Удивляет, сколько полезных бесплатных ресурсов можно найти по вёрстке/фронтенду

Один из таких ресурсов - https://www.30secondsofcode.org/ (англоязычность ресурса не должна смущать, так как HTML/CSS/JS код от этого менее понятным не становится ;)

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

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

2021-05-20 13:31:01 Решил не откладывать надолго статью с примером использования плагина Rellax

В дополнение к параллакс эффекту, в примере будем использовать CSS-переменные

Надеюсь, будет полезно ;)

Ссылка на статью - https://frontips.ru/parallaks-effekt-na-osnove-plagina-rellax/ Открыть/Комментировать

2021-05-17 12:00:12 Всем привет!

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

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

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

Ссылка на страницу плагина - https://dixonandmoe.com/rellax/ Открыть/Комментировать

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

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

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