По мотивам шутки из reddit "when UI designer go crazy..." (https://www.reddit.com/r/ProgrammerHumor/comments/pln9fd/frustrated_ui_designers/)

Сделал свою реализацию этого упоротого UI элемента 😅 - https://codepen.io/hqdrone/pen/BaZdMZz

https://userinyerface.com - но этот UI, по-моему, уже не превзойти никому (я даже до второго шага заполнения формы не дошёл 😤😂)

Давно не было макетов для вёрстки, увидел один приятный макет, решил поделиться ссылкой

https://www.figma.com/community/file/986179266414896817

Если есть желание получить ревью вашей вёрстки, напишите @frontips_feedback_bot, обсудим

https://devhints.io/ - огромная коллекция шпаргалок для разработчиков

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

Друзья, спешите!

На Udemy бесплатно раздают крутые курсы! (на некоторые курсы скидка закончится менее чем через сутки, поторопитесь ;)

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

CSS And Javanoscript Crash Course - https://t.co/fd3OwVmpNK?amp=1

Complete Responsive Web Development: 4 courses in 1 - https://t.co/9tTDpWkIXK?amp=1

Front End Web Development Ultimate Course 2021 - https://t.co/9IYROgXo90?amp=1

Всем привет!

Скидки на курсы из предыдущего поста уже закончились. Eсли вдруг узнаю еще о таких 100% скидках на платные курсы, обязательно сделаю пост :)

На самом деле, Udemy предлагает много бесплатных базовых курсов. При необходимости, по ссылкам ниже, можно подобрать что-то для себя

https://udemyfreecourses.org/
https://www.udemy.com/courses/free/

—-

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

Небольшая подборка ресурсов, которые могут быть полезны для 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 - интересно будет посмотреть