Делюсь еще одной потрясающей находкой (точнее сразу несколькими в рамках одного проекта), которую добавил себе в избранное

https://hcdev.ru/ - Справочник HTML и CSS
https://noscriptdev.ru/ - Справочник Javanoscript и Typenoscript
https://reactdev.ru/ - Справочник React
https://angdev.ru/ - Справочник Angular
https://nodejsdev.ru/ - Справочник Node.js

Большое количество информации с примерами кода, иллюстрированием, описанием нюансов и так далее

Всем привет!

В одном из видео на Youtube наткнулся на интересный проект - https://cssbattle.dev/ (как-то он мимо меня раньше проходил:)

Выбираешь задачу с фигурой, сделанной на HTML/CSS, и добиваешься аналогичного результата

Выкладываю свое решение одной из простейших задач - https://cssbattle.dev/play/46, можете сначала попробовать решить сами, а затем посмотреть видео

Довольно увлекательно :)

Два полезных, дополняющих друг друга, ресурса по функциям плавности (easing)

https://easings.net/ru - здесь более подробное описание

https://easings.co/ - здесь более наглядные примеры

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

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

С помощью 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

По мотивам шутки из 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