frontips.ru

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

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

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

Привет, друзья!

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

Ссылка на макет - 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

Всем привет!

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

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

Ссылка на статью - https://frontips.ru/gradientnaya-prozrachnost-kartochek-transformaciya-kursora-pri-navedenii/

Немного попрактикуемся ;)

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

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

Результат через несколько дней

Удивляет, сколько полезных бесплатных ресурсов можно найти по вёрстке/фронтенду

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

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

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

Решил не откладывать надолго статью с примером использования плагина Rellax

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

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

Ссылка на статью - https://frontips.ru/parallaks-effekt-na-osnove-plagina-rellax/

Всем привет!

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

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

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

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

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

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

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

Всем привет!

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

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

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

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

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

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

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

https://omatsuri.app/ - подборка различных инструментов на одном ресурсе:

- генератор треугольников
- генератор теней для выбранного цвета
- генератор градиентов
- SVG-фигуры
- Сжатие SVG
- преобразование SVG → JSX
- преобразование в BASE64
- генератор случайных данных
- коллекция символов
- генератор текстов
- отображение различных курсоров
- подробная информация о нажатой клавише

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

А для просмотра и поиска необходимых символов есть другой, более интересный ресурс - https://www.toptal.com/designers/htmlarrows/

Всем привет!

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

Задача: стилизовать и анимировать карточки, как в примере на видео

Чтобы не начинать с нуля, сделал начальный шаблон, который можно скачать по ссылке https://frontips.ru/assets/images/practice6/practice6.zip

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

Всем привет!

Результат недавнего практического задания, как и в прошлый раз, решил оформить в небольшую статью, с описанием некоторых нюансов и особенностей. Надеюсь, будет полезно :)

Ссылка на статью - https://frontips.ru/variant-prostoj-galerei-izobrazhenij-na-flexbox/

Еще немного практики ☕️

Сделать простую галерею, как в примере на видео, используя только CSS

- высота блока с галереей 600px
- изображения раскрываются при наведении курсора
- изображений может быть разное количество
- дополнительно можно сделать эффект плавного масштабирования изображения

Результат, как обычно, в ближайшие день/два

Всем привет!

Результат вчерашнего практического задания в виде новой практической статьи :) там же можно скачать архив с результатом

Ссылка на статью - https://frontips.ru/effekt-plavnogo-podcherkivaniya-ssylok-pri-navedenii/

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

Попробовать добиться такого же эффекта выделения ссылок, как в примере на видео

Используем только CSS

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

Небольшая подборка разнообразных полезных и просто интересных ресурсов:

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.svgbackgrounds.com/
https://www.visiwig.com/patterns/

https://neumorphism.io/ - генератор эффекта в стиле неоморфизма
https://glassmorphism.com/ - генератор эффекта прозрачного матового стекла (к сожалению, в Firefox пока не включена поддержка свойства backdrop-filter по-умолчанию, поэтому полноценный эффект смотрите в Chrome)

https://animista.net/ - множество CSS анимаций

https://cssvalues.com/ - описание значений CSS свойств - этот ресурс очень понравился, раньше не встречал его

Всем привет!

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

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

Ссылка на статью - https://frontips.ru/effekt-sledovaniya-za-kursorom/

Неделю назад опубликовывал макет, где была отрисована навигация по секциям

Написал небольшую статью с примером, как можно реализовать такую навигацию

Ссылка на статью - https://frontips.ru/navigaciya-po-sekciyam/

Всем привет!

Сегодня хочу поделиться двумя наиполезнейшими ресурсами

https://htmldom.dev/ - работа с DOM на чистом JavaScript

https://1loc.dev/ - JavaScript решения в одну строку

Эти два ресурса - одни из лучших, что доводилось находить - максимум пользы!