Логово верстальщика

​​🟡Тест по React JS от OTUS — Ответьте на 19 вопросов и проверьте, насколько хорошо вы знаете язык. Сможете сдать — пройдёте на продвинутый онлайн-курс по React.js со скидкой! 👉🏻ПРОЙТИ ТЕСТ ОНЛАЙН-КУРСА ПО REACT.JS  Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

​​🚀Учимся верстать: что такое CSS В этой статье автор расскажет, почему всё, что ваш браузер может выводить на экран или запускать называется фронтендом, и для чего нужна и как работает каскадная таблица стилей, а также вы узнаете почему CSS просто указывает стиль оформления для элементов HTML и всего документа в целом. Читать...

​​👤15 ошибок или советов HTML и CSS В этой статье автор расскажет, почему при вёрстке страницы, надо убедиться, что кодировка файла установлена в UTF-8, и почему многие верстальщики, когда надо сделать текст зелёным цветом, прикрепляют к нему класс green, а также вы узнаете почему некоторые новички в HTML думают, что HTML это язык программирования. Читать...

​​🤔Язык HTML: что это такое и как он работает В этой статье автор расскажет, что такое HTML, для чего он нужен и стоит ли называть его языком программирования, а также вы узнаете из чего состоит HTML-код, и как он работает на сайтах. Читать...

​​🔥18 советов по CSS, которые сделают жизнь разработчика проще В этой статье автор расскажет, почему на сайте, где в первую очередь важен контент, интервалы должны гармонично дополнять содержание, почему дизайнеры часто работают с 12-колонной сеткой, и CSS-фреймворки следуют этому, а также вы узнаете какие функции можно использовать для выравнивания текста. Читать...

​​🤔Хотел кликнуть, но не смог: как правильно настроить размер области клика В этой статье автор расскажет, почему не всегда возможно сделать кликабельную зону больше просто за счёт изменения ширины и высоты элемента или отступа, и почему часто на страницах с категориями кликабельная область ссылок не распространяется на всю ширину элемента списка, а также вы узнаете в каких случаях есть необходимость добавить кнопку «Показать ещё» или стрелку на краю заголовка раздела. Читать...

​​🎯 Тест по Node JS от OTUS 🚀 Ответьте на 20 вопросов и проверьте, насколько вы готовы к обучению на углубленном курсе - Node JS Developer от OTUS Курс рассчитан на frontend-разработчиков или backend-разработчиков со знанием Javascript 🔥 РЕЗУЛЬТАТ ПРОХОЖДЕНИЯ КУРСА Разработка серверных приложений любой сложности на Node.js с использованием Express, TypeScript, GraphQl, Apollo и Nest.js Время прохождения теста ограниченно 30 минут 👉 ПРОЙТИ ТЕСТ  Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Нативная интеграция. Информация о продукте www.otus.ru

​​🚀CSS Scroll Snap — мощное средство для создания прокручиваемых контейнеров без JavaScript В этой статье вы узнаете, как создать прокручиваемый контейнер, и настроить отображение содержимого, как CSS Scroll Snap позволяет привязать положение прокрутки к местоположению или определённым элементам после того, как пользователь прокрутил страницу, а также вы узнаете как управлять прокруткой, и настроить внешний отступ элемента. Читать...

​​🚀Улучшаем адаптивность сайта с помощью CSS функции clamp() В этой статье автор расскажет, почему чтобы улучшить адаптивность вашего сайта, не обязательно использовать какие-то сложные слушатели событий с помощью Web API ResizeObserver, функцию Calc() или media-запросы CSS, которые будут подставлять нужные элементы страницы в зависимости от размера окна браузера, и почему функция Clamp() — единственная функция, специально созданная для того, чтобы позволить почти любому элементу регулировать свой размер в определенных пределах, чтобы он соответствовал размеру окна приложения, а также вы узнаете почему Clamp() идеально подойдёт для установки минимального и максимального размера отступа между секциями. Читать...

​​🤔Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице В этой статье автор расскажет, какой принцип работы технологии CSS Flexbox, которая используется для создания сложных гибких макетов за счёт правильного размещения элементов на странице, как justify-content отвечает за выравнивание элементов по главной оси, а также вы узнаете как flex-basis отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами CSS Flexbox. Читать...

​​🚀Инструменты разработчика для проектировщика HTML и CSS В этой статье автор расскажет, зачем проектировщику инструменты разработчика, почему инструменты разработчика в разных браузерах немного отличаются внешним видом и функционалом, как менять дизайн элементов, тестировать сервис, править мелкие баги и передавать разработчику готовый код вместо объяснения на пальцах, а также вы узнаете как менять параметры цвета и тени. Читать...

​​💡Мини-туториал по анимации в CSS и HTML5 В этой статье автор расскажет, как работает анимация в CSS без использования JavaScript, как правильно использовать свойство animation, которое позволяет анимировать практически любое свойство HTML элемента, и почему правило анимации указывается в блоке keyframes, а также вы узнаете какие инструменты использовать для создания большого количество разных анимаций, где лимитом будет только ваше воображение и здравый смысл. Читать...

​​👤Виды анимации на верстке: свойства, особенности, примеры кода В этой статье вы узнаете, что происходит в браузере, когда мы запускаем анимацию и каким образом браузер перерисовывает все эти кадры, и какие процессы происходят кроме перерисовки стилей, а также вы узнаете почему самая сложная и важная часть веб-анимации — добиться её плавности. Читать...

​​🧑‍💻Делаем textarea с автоматической высотой — краткий гайд В этой статье автор расскажет, зачем задавать блоку div и textarea одинаковые className, почему оба блока должны генерировать один и тот же текст, как создать компонент для разбивки, и обернуть строки во фрагменты, а также вы узнаете что делает свойство break-word в div и как его правильно использовать. Читать...

​​🔥10 шпаргалок для веб-разработчика В этой статье автор расскажет, что такое символьные объекты, какие новые типы ввода были добавлены с появлением HTML 5, почему некоторые символы зарезервированы за HTML-разметкой, а потому и не могут использоваться напрямую, поскольку есть шанс поломать вёрстку, а также вы узнаете почему при первом знакомстве с CSS могут возникнуть проблемы с обозначением единиц измерения. Читать...

​​❔❔ JS-разработчик? А насколько хорошо ты знаешь Vue.js? JS-разработчик? А насколько хорошо ты знаешь Vue.js?  ✔️ Пройди тест из 20 вопросов и узнай, сможешь ли ты учиться на курсе "Vue.js Developer" от OTUS. Если правильно ответишь хотя бы на 12 вопросов - сможешь поступить на курс по специальной цене!  ⏰ Время прохождения теста ограничено 30 минут ✍️ПРОЙТИ ТЕСТ: https://otus.pw/c9rd/ Курс доступен в рассрочку. 🎁 Пройдете успешно тест, получите доступ к открытым урокам курса. Реклама. Информация о рекламодателе на сайте www.otus.ru

​​😵Адаптивная вёрстка: что это и как использовать В этой статье автор расскажет, как адаптивная вёрстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки, зачем разбивать устройства на разные категории и верстать для каждой из них отдельно, почему это займет слишком много времени, и почему мы не сможем продолжать верстать для каждого устройства отдельно, а также вы узнаете как делать опциональное отображение контента, чтобы они уместились на маленьких экранах. Читать...

​​👌Резиновая верстка: универсальная сетка под все брейкпоинты, примеры и правила В этой статье автор расскажет, что такое резиновая верстка, почему резиновыми макеты делают только по горизонтали, как можно использовать формулы автоматического рассчёта размеров, и как можно больше использовать коэффициенты, а также вы узнаете как искать способы написания меньшего количества стилей, для того, чтобы переложить работу для рассчёта размеров на браузер. Читать...

​​😮Обновите Свой Статический Веб-Сайт До Прогрессивного Веб-Приложения В этой стать вы узнаете, что такое PWA, для чего его нужно использовать, как с помощью его создать веб-приложение, как создать веб-манифест, а также вы узнаете как обновить index.html и создать service-worker.js. Читать...

​​🖥Как Провести A/B-Тестирование Вашего Сайта В этой статье автор вам расскажет, как работает A/B-тестирование, почему оно его очень важно делать, какие есть типы тестов, что такое многовариантное и многостраничное тестирование, а также вы узнаете элементы которые можно проводить таким тестированием. Читать...