Небольшая подборка ресурсов, которые могут быть полезны для pet-проектов

https://blobs.app/ - приятный генератор noscript blobs
https://befonts.com/ - шрифты на любой вкус
https://worldvectorlogo.com/ - логотипы разных брендов в noscript
https://kaboompics.com/ - бесплатные фото + цветовые схемы к фото

🔥Бесплатная раздача еще нескольких платных курсов на Udemy

React JS- Complete Guide for Frontend Web Development [2021] - https://t.co/pLP4ZveXcj?amp=1

HTML & CSS - Certification Course for Beginners - https://t.co/MtrYBNCRAU?amp=1

CSS & JavaScript - Certification Course for Beginners - https://t.co/QY80Y3SJyj?amp=1

upd: на данный момент бесплатная раздача этих курсов уже закончилась, если будет ещё - сообщу :)

Вчера сайтом дня по версии CSSDesignAwards стал сайт https://lemkus.com и получил высокие оценки - https://www.cssdesignawards.com/sites/lemkus/39816/

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

Хороший пример того, что к идеалу можно стремиться долго, но порой достаточно сделать просто "хорошо" и получить высокие оценки и признание

java5cript.com - еще больше информации по Javanoscript 🔥

Всем привет!

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

Опубликовал новую небольшую практическую статью - Выбор диапазона значений на основе плагина 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