Тег: css

Почему дизайнеры должны перейти с px на rem (и как это сделать в Figma)

1_L0jtcMWvl4YtFV7KB5-xlg.jpeg

Скорее всего, вы с удовольствием использовали пиксели (px) в Sketch и Figma, не задумываясь об этом. Это то, что стоит в этих программах по-умолчанию и прекрасно работает. Тем более все еще распространена практика pixel perfect, которая так удачно накладывается на пиксели.

22 октября 2022
2.3 тыс.
21 мин

Что нового в CSS после CSS3?

Спецификация «CSS3» имела огромный успех. Целая куча новых вещей была реализована, и было очень здорово, чтобы мы могли наконец-то получить их в CSS. Градиенты, анимации и переходы, радиусы границ, тени, трансформации… вау! Более того, красивый баннер CSS3 (и духовный покровитель «HTML5») взлетел, и индустрия была просто переполнена учебными материалами обо этом всем.

CSS 3, HTML5

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

Так что же им сказать?

24 января 2022
1.2 тыс.
14 мин

Смена светлой и темной тем сайта на CSS

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

Давайте посмотрим, как вы можете сделать это на вашем сайте.

03 августа 2021
12.2 тыс.
2 мин

Центрирование в CSS

Использование flex для центрирования в CSS - это, пожалуй, самый правильный вариант сегодня.

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

Но это далеко не единственный вариант.

Давайте представим, что вам необходимо выровнять по горизонтали несколько inline-* элементов. text-align: center; сделает это буквально в одну строку.

See the Pen Centering Inline Elements by Chris Coyier (@chriscoyier) on CodePen.

А что, если вам надо отцентрировать эти же элементы относительно родительского элемента? Это легко сделать с помощью width: fit-content для родительского контейнера.

See the Pen Centering Unknown Width Parent by Chris Coyier (@chriscoyier) on CodePen.

03 января 2021
1.9 тыс.
1 мин

15 сайтов онлайн-курсов для программистов

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

15 сайтов онлайн-курсов для программистов

03 января 2021
2.7 тыс.
12 мин

9 полезных плагинов VS Code для вёрстки

Visual Studio Code — один из самых популярных редакторов кода. Многие разработчики предпочитают его, так как он удобен в использовании и содержит множество полезных расширений, с помощью которых легко оптимизировать работу.

Полезные плагины помогают допускать меньше ошибок при написании кода, да и значительно сокращают время работы. Чтобы установить расширения, необходимо перейти во вкладку «Extensions» и с помощью поиска найти нужный плагин.

03 января 2021
2.6 тыс.
3 мин

Собеседование в АйТи. Моя первая работа программиста | Лекция 8 | Web-разработка для начинающих

Первая работа в АйТи. Первое собеседование на должность программиста. С чем предстоит столкнуться и на какие вопросы надо знать ответы. Ну и конечно же, как не бояться.

Это восьмая лекция моих курсов для будущих веб-разработчиков. Остальные лекции, а также мои блоги (влоги) можно найти у меня на канале.

Репозиторий с презентациями и домашними заданиями

07 октября 2020
1.8 тыс.
17 сек

JavaScript. Работа с DOM | Лекция 7 2/2 | Web-разработка для начинающих

Предыдущие лекции были про DOM. Поэтому разговоры о JavaScript стоит начать именно с взаимодействия с HTML и CSS. Я расскажу про самые важные функции жаваскрипта, связанные с выбором элементов, работой с аттрибутами, работа с классами и стилями, добавление и удаление обработчиков событий.

Это седьмая лекция (часть 2) моих курсов для будущих веб-разработчиков. Остальные лекции, а также мои блоги (влоги) можно найти у меня на канале.

Репозиторий с презентациями и домашними заданиями

07 октября 2020
1.6 тыс.
22 сек

CSS. Позиционирование элементов | Лекция 7 1/2 | Web-разработка для начинающих

Позиционирование в css для многих остается какой-то сложно и непонятной штукой. Но все очень просто, и я попытаюсь это доказать за 20 минут. Поговорим про все значения свойства position и посмотрим примеры: static, relative, absolute, sticky, fixed.

Это седьмая лекция моих курсов для будущих веб-разработчиков. Остальные лекции, а также мои блоги (влоги) можно найти у меня на канале.

Репозиторий с презентациями и домашними заданиями

07 октября 2020
1.8 тыс.
20 сек

Scrum. Метод управления проектами для программистов | Лекция 6 | Web-разработка для начинающих

Для того, чтобы ускорить разработку и сделать финальный продукт качественным, в программировании применяется методология Agile. Но в целом аджайл - слишком широкое понятие, поэтому мы поговорим о Scrum - самом популярном подходе в веб-разработке.

Это пятая лекция моих курсов для будущих веб-разработчиков. Остальные лекции, а также мои блоги (влоги) можно найти у меня на канале.

Репозиторий с презентациями и домашними заданиями: https://github.com/larchanka/web-dev-remind

24 августа 2020
1.9 тыс.
19 сек
« Назад