Если вы думаете, что вы достаточно скурпулёзный веб-разработчик, только посмотрите на этот чек-лист!

Его создатели говорят, что если пробежаться по нему и поставить галочку напротив каждого пункта, получится куда более лучшая версия вашего же сайта. И это очень похоже на правду, ведь это действительно огромный чек-лист, в котором затронуты совершенно разные стороны вашего сайта: от шрифтов, JS и CSS до SEO и производительности.

Осторожно, назад пути уже не будет: https://frontendchecklist.io

#веб #css #javascript #seo

​​Где можно потренироваться в вёрстке на CSS?

Например, на CSSBattle. Это платформа, на которой нужно сверстать проект по изображению, используя как можно меньше кода.

Конечно, есть платные разделы, но много испытаний доступны бесплатно: https://cssbattle.dev/

#веб #фронтенд #css

Ещё один интересный codepen-проект, в этот раз с нестандартным лоадером

Что интересно, реализовано без единой строчки JavaScript — только SVG и CSS. Поэтому он практически никак не влияет на нагрузку:

https://codepen.io/jkantner/pen/VwrYggy

#css #веб

​​Просто небольшой codepen с анимированной карточкой входа.

Красиво, стильно, удобно и ни строчки JS — всё на чистом CSS. Посмотреть код можно тут: https://codepen.io/ig_design/pen/KKVQpVP

#css #веб

Годнота для фронтенд-разработчиков: большая база советов, трюков и лучших практик для веб-разработчика

Если вам нужно быстро реализовать какую-нибудь несложную фичу, типа добавления иконки к ссылкам, обработки поведения страницы при «битом» изображении или даже центрирования div, Front-End Tips вам в помощь: https://getfrontend.tips

Фичи можно искать по текстовому запросу, у каждой есть доступное объяснение и пример кода. Но что самое приятное, инструмент полностью бесплатный и пополняется сообществом.

#веб #javascript #css #html

​Прокачиваем скилл веб-разработки: контейнерные запросы CSS простым языком

Контейнерные запросы выводят нас за рамки области просмотра и позволяют любому компоненту/элементу реагировать на нужную ширину контейнера. С помощью контейнерных запросов вы сможете точно определять все стили компонента: изменять отступы, размеры шрифтов, фоны или полностью изменить свойства отображения и ориентацию дочерних элементов.

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

Всё простым языком и на реальных примерах: https://ishadeed.com/article/container-queries-are-finally-here/

#css #фронтенд

​Делимся годным бесплатным курсом по веб-разработке для начинающих

Курс поможет понять, как работает интернет. И научиться создавать веб-страницы с помощью HTML и CSS и деплоить их в интернет. Из плюсов курса — домашние задания с мини-проектами для самостоятельной проверки. Курс прошли почти 210 тыс. раз и оценили на 4.7 из 5.

Страница курса: https://stepik.org/course/38218/promo

#курсы #html #css #фронтенд

«Мужик, а у тебя есть шпаргалка по CSS, HTML и JS? Держи, мужик, шпаргалку по CSS, HTML и JS»

Очень удобная интерактивная шпаргалка, в которой собрана не только полезная информация по работе с CSS, HTML и JS но и различные генераторы, символы, эмодзи и полезные ссылки.

Сохраните, чтобы не потерять: https://htmlcheatsheet.com/css/

#шпаргалки #css #html #javascript

​Годнота для веб-разработчиков: подборка шпаргалок и полезных ресурсов по TailwindCSS

К TailwindCSS относятся по-разному: для одних это просто очередной фреймворк, для остальных — новый шаг эволюции веб-разработки.

Его фанаты считают, что он кардинально отличается от всех других фреймворков и создает отдельную парадигму веб-стилизации. И при этом выполняет все поставленные перед ним задачи, делая это лучше и удобнее других. По сути, TailwindCSS похож на Bootstrap, Foundation или Bulma, но у него точно есть несколько фич, за которые его можно полюбить.

И вот небольшая подборка полезных ресурсов, которые вам помогут познакомиться с ним поближе:

— Интерактивный пример почтового ящика Intercom на Tailwind CSS, который поможет попробовать фреймворк на практике

— Tailwind Cheat Sheet, шпаргалка по всем классам утилит и свойствам

— Meraki UI, набор нескольких готовых компонентов Tailwind CSS, которые можно кастомизировать перед копипастом

— Tailwind.run(), онлайн-площадка для Tailwind CSS с поддержкой пользовательской конфигурации сборки. С её помощью можно посмотреть, как итоговый вариант будет выглядеть на разных устройствах

#инструменты #css #веб #шпаргалки

​Шпаргалка по всем свойствам CSS Flexbox

Рассматриваем основы, разбираемся в свойствах и делимся шпаргалкой

#css #фронтенд #веб

​Как работает CSS Position — объяснение с примерами кода

Рассказываем, как работать с CSS Position и применять его свойства — relative, absolute, static, fixed и sticky для разработки веб-сайтов

#веб #фронтенд #css

Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объём кода?

Есть такая библиотека htmx. Она позволяет создавать сложные веб-приложения на HTML и выступает как альтернатива клиентскому рендерингу на Javascript. htmx помогает переиспользовать элементы на сервере, сократить объём кода на Javascript и отказаться от сборки.

Страница проекта

Небольшой вводный гайд по работе с htmx

#инструменты #css #javascript #html #веб

​Полный самоучитель по CSS Grid на примере единорога и со шпаргалкой

Рассказываем про свойства CSS Grid, которые помогут создавать адаптивные сайты и делимся шпаргалкой, которая охватывает все, что можно сделать с помощью Grid.

#css #шпаргалка #веб #фронтенд

​Центрируем вообще всё!

Рассказываем и показываем, как центрировать в CSS всё, что угодно, через Flexbox, Grid, Position и Margin

#css #веб

CSS следующего поколения: @container

Новое свойство @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера. Это что-то типа медиа-запросов, но с ориентацией не на область просмотра, а на родительский контейнер элемента.

В этой статье вы узнаете, какие возможности это открывает, как работает и где использовать:

https://webdevblog.ru/css-sledujushhego-pokoleniya-container/

#css