frontips.ru – Telegram
frontips.ru
512 subscribers
75 photos
29 videos
13 files
138 links
Авторские статьи по вёрстке/фронтенду, макеты для вёрстки, практические задания, полезные ресурсы и многое другое

Обратная связь - @frontips_feedback_bot
Download Telegram
Как думаете, какой результат будет выведен?

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

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

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

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

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

Кому интересны подробности - ссылка на MDN
👍5
Кстати, вчерашний пример нашёл на ресурсе с тестами по Javanoscript - https://javanoscriptquiz.com/

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

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

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

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

Вёрстка реального проекта #1 - https://youtu.be/m57R2vec6tU
👍3
Всех с праздниками!

Тепла и уюта :)
🎉15
This media is not supported in your browser
VIEW IN TELEGRAM
Думаю уже заметили, что на канале включил нативные реакции, которые добавили в обновленной версии телеграм

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

Сегодня отдыхаем, а скорей всего уже завтра опубликую вторую часть видео по вёрстке проекта
👍8🔥5🎉3😱1
Вёрстка реального проекта #2 - https://youtu.be/jho4ND5KYHM

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

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

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

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

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

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

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

Код из видео в песочнице - https://codesandbox.io/s/happy-frog-w7h03
4👍1
В четвёртой части стилизуем секции Numbers и Services - https://youtu.be/xO5HlKOR4GI
👍1
Финальная часть по вёрстке проекта - https://youtu.be/ytlgzQH5tZM

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

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

NFT сейчас очень обсуждаемая тема, и такая работа в портфолио, думаю, будет привлекать внимание
👍10
https://doka.guide/ - великолепная русскоязычная документация(справочник) для разработчиков
👍173
Некоторое время назад уже упоминал сайт 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, доступность, и прочее
👍3
Сразу два качественных, лаконичных макета для практики 👍🏼
1
Заметки по БЭМ от George Moller
---
Ссылка на твит автора
🔥8