frontips.ru

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

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

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

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

Недавно впечатлился вроде бы банальной анимацией - скорость света в реальном времени на примере расстояния между Землёй и Луной (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

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

Две хорошие минималистичные шпаргалки по 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

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

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

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

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

Всем привет!

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

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

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

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

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

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

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

🔥Бесплатная раздача еще нескольких платных курсов на 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: на данный момент бесплатная раздача этих курсов уже закончилась, если будет ещё - сообщу :)

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

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

Всем привет!

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

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

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

—-

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

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

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

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

CSS And Javascript 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

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

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

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

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

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

По мотивам шутки из 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, по-моему, уже не превзойти никому (я даже до второго шага заполнения формы не дошёл 😤😂)

С помощью CSS свойства accent-color можно изменить акцентный цвет элементов формы

accent-color поддерживается пока только в последних версиях Chrome, Firefox, Edge (https://caniuse.com/?search=accent-color)

В проектах использовать пока рано, но радует, что работа в этом направлении ведётся (хоть и ооочень медленно), ведь до сих пор стилизация элементов формы довольно проблематична и достигается обходными путями

Немного полезных ссылок на эту тему:

https://css-tricks.com/almanac/properties/a/accent-color/
https://web.dev/accent-color/
https://accent-color.glitch.me/

Если вдруг кому-то нужно, ссылка на изображение без сжатия - https://frontips.ru/notes/accent-color.jpg

Сегодня совсем небольшая заметка о проблеме, с которой недавно столкнулся - при написании Stylus стилей в NuxtJS проекте, происходит ошибка при сборке (тема очень специфическая, но вдруг кому-то сэкономит немного времени)

Ссылка на заметку - https://frontips.ru/ne-rabotaet-stylus-v-nuxt-js-kak-ispravit/