frontips.ru

Сразу два качественных, лаконичных макета для практики 👍🏼

Некоторое время назад уже упоминал сайт https://web.dev/, когда делал заметку про CSS свойство accent-color, но на этом ресурсе еще много всего полезного

Learn CSS - https://web.dev/learn/css/
Learn Responsive Design - https://web.dev/learn/design/
Learn Forms - https://web.dev/learn/forms/

Layout patterns - https://web.dev/patterns/layout/

а также про анимации, оптимизацию, SEO, доступность, и прочее

https://doka.guide/ - великолепная русскоязычная документация(справочник) для разработчиков

Визуально очень приятный макет для вёрстки в портфолио - https://www.figma.com/file/fYD5fS1iHRYVLzGlZJHtDv/CryptoKet---NFT-Marketplace-UI-Kit?node-id=0%3A1

Полноценный проект на несколько страниц со Style Guide, компонентами, в двух цветовых схемах (тёмная и светлая), а также мобильные версии

NFT сейчас очень обсуждаемая тема, и такая работа в портфолио, думаю, будет привлекать внимание

Финальная часть по вёрстке проекта - https://youtu.be/ytlgzQH5tZM

Верстаем секции Video, News, Contacts и Footer

В четвёртой части стилизуем секции Numbers и Services - https://youtu.be/xO5HlKOR4GI

Публикую небольшое видео на Youtube, как сделать прикольный эффект при наведении на ссылку - https://youtu.be/WTzGu_H4PE4

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

Код из видео в песочнице - https://codesandbox.io/s/happy-frog-w7h03

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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