Всем привет!

Канал жив, я тоже😉 ...но свободного времени все меньше, так что контент будет по возможности (хотя идей для статей и постов много)

Опубликовал новую небольшую практическую статью - Выбор диапазона значений на основе плагина noUiSlider - https://frontips.ru/vybor-diapazona-znachenij-na-osnove-plagina-nouislider/

Как всегда, буду рад, если контент окажется вам полезен 😌

https://atroposjs.com/ - свежий плагин (от разработчиков Swiper) для создания 3D параллакс эффекта при наведении

Выглядит интересно, надо будет как-нибудь попробовать

Учим Flexbox, уничтожая зомби - это же надо было так заморочиться :)

https://flexboxzombies.com/p/flexbox-zombies - изначально ценник на этот курс/игру был $179, сейчас в свободном доступе

Две хорошие минималистичные шпаргалки по Flexbox и Grid...

https://flexbox.malven.co/

https://grid.malven.co/

...на первое время очень даже полезно

Только нет моего любимого свойства place-content: center; (сокращенная запись для align-content и justify-content), которое позволяет одной строкой центрировать дочерние элементы - https://developer.mozilla.org/en-US/docs/Web/CSS/place-content

👆🏼примерно так я уже почти полтора месяца собираюсь что-то написать сюда :)

Недавно впечатлился вроде бы банальной анимацией - скорость света в реальном времени на примере расстояния между Землёй и Луной (https://youtu.be/LvH2MVI8idw?t=20)

..и конечно же решил сделать подобную анимацию на HTML/CSS

подумал, что начинающим верстальщикам тоже может быть интересным такое простенькое практическое задание (flexbox, animation, position, и css-переменные можно попробовать применить)

если есть желание, ниже условия и некоторые данные:

- сделать анимацию скорости света от Солнца до Земли, и отдельно от Земли до Луны
- используем только HTML и CSS
- масштаб не нужно соблюдать
- время, за которое свет преодолевает расстояние от Солнца до Земли - 500 секунд, от Земли до Луны - 1,255 секунды

..если нет желания, вот ссылка на мой Codepen - https://codepen.io/hqdrone/pen/xxXdrWZ?editors=1100

вдруг кому приглянется этот landing для вёрстки в портфолио

https://www.figma.com/file/TxmRb25oGdgFkehzYKA2sa/Main?node-id=0%3A1

George Moller бесплатно раздает свои визуальные заметки по HTML/CSS и UI/UX

https://georgemoller.gumroad.com/?_ga=2.264275855.1003087443.1639985413-1792034241.1638102129

Небольшая заметка о различиях box-shadow и filter: drop-shadow()

Живой пример на Codepen - https://codepen.io/hqdrone/pen/vYeZWwZ

Ссылка на изображение без сжатия - https://frontips.ru/notes/drop-shadow.png

https://www.patterns.dev/ - мощнейший ресурс по паттернам проектирования веб-приложений для опытных разработчиков.. мы же все стремимся именно к этому ;) сохранил себе в избранное

Приятный макет для вёрстки в портфолио

https://www.figma.com/file/QuJ5ZW3o28x86inskZLnHw/Folo-Web?node-id=0%3A1

Есть один интересный момент в макете, который хотелось бы разобрать отдельно (постараюсь сделать это в ближайшее время)

Вчера в макете обратил внимание на элемент с галочкой (у выделенной карточки)

Конечно, можно пойти по простому пути и вставить этот элемент изображением (если это статичный декоративный элемент)

Но будем считать, что элемент должен быть интерактивным (тогда уже получается задача из разряда https://cssbattle.dev/ :)

Можно попрактиковаться и попробовать сверстать его самостоятельно

Сделал свое решение на Codepen - https://codepen.io/hqdrone/pen/OJxOJRP

Возможно, решение не самое элегантное, и если вы найдете более краткое/чистое решение, можете скинуть ссылку на свой Codepen сюда @frontips_feedback_bot - интересно будет посмотреть

https://30secondsofinterviews.org/ - ответы на популярные вопросы по HTML, CSS, Javanoscript, React для подготовки к собеседованию

Еще один вариант Landing Page для вёрстки в портфолио

https://www.figma.com/file/Y3JViV61DfCuFsCCINPotm/Digital-Agency?node-id=0%3A3

Как думаете, какой результат будет выведен?

Проверяем прямо в консоли браузера и получаем "3"... что? 😳

Это один из специфических нюансов Javanoscript

Если после "0" следуют цифры от 0 до 7, то такие числа рассматриваются как числа в восьмеричной системе счисления

Но если после "0" есть цифры 8 или 9, то такое число в восьмеричной системе не может существовать и рассматривается как десятичное

Поэтому "018" будет интерпретировано как "18", а "017" будет преобразовано из восьмеричной системы в десятичную и будет равно "15", следовательно 18 - 15 = 3

Кому интересны подробности - ссылка на MDN

Кстати, вчерашний пример нашёл на ресурсе с тестами по Javanoscript - https://javanoscriptquiz.com/

Вопросов там немного, но большинство из них на знание нюансов

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

Делал недавно вёрстку простого макета, решил записать процесс

Вышло около 5 часов, сегодня публикую первую часть

Без монтажа и комментариев, но надеюсь и такой контент будет полезен

Вёрстка реального проекта #1 - https://youtu.be/m57R2vec6tU

Всех с праздниками!

Тепла и уюта :)

Думаю уже заметили, что на канале включил нативные реакции, которые добавили в обновленной версии телеграм

Кстати, можно оценивать и ранее опубликованные посты.. прикольно, учитывая то, что на последние посты немного подзабил добавлять кастомные кнопки реакций:)

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

Вёрстка реального проекта #2 - https://youtu.be/jho4ND5KYHM

Во второй части:
- стилизуем Header
- добавим мобильное меню
- сделаем слайдер на Swiper.js и стилизуем секцию Hero
- пропишем стили для адаптивности Header и Hero

Повторюсь - это просто запись процесса вёрстки, поэтому тут и "размышления" и заимствование кода с предыдущих проектов и прочее... можно сказать "прямой эфир" ;)

Третья часть вёрстки проекта полностью посвящена стилизации секции About

Несмотря на минимальное количество контента в этой секции, визуально она отрисована с долей креатива :)

Поэтому при вёрстке этой секции будем активно использовать CSS calc() при позиционировании элементов

Вариантов сверстать такую секцию несколько.. в процессе вёрстки думал, как будет более оптимально (сейчас наверно сверстал бы немного по-другому - не лучше или хуже, просто по-другому).. но на тот момент выбрал вариант, который на видео

Вёрстка реального проекта #3 - https://youtu.be/BqWNaOuf7gc