[Перевод] 12 важнейших сайтов для освоения CSS в 2023 году

Хотите войти в веб-разработку, но не знаете, с чего начать? Освоение CSS станет отличным стартом и, к счастью для вас, в сети существует огромное количество учебных ресурсов. Мы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки. Будь вы начинающий программист или опытный, на этих сайтах есть информация для всех уровней: от полноценных учебных пособий до памяток и фрагментов кода.

Подробнее

[Перевод] Руководство по цветовым функциям CSS

Возможно, вы использовали CSS для изменения цвета элемента на веб-странице, но слышали ли вы что-нибудь о цветовых функциях CSS? Если нет, то из этой статьи узнаете нечто новое и крайне полезное! Что такое цветовые функции CSS? Цветовые функции CSS (CSS color functions) — это способ задания цвета в CSS при помощи математических функций, а не простого кода цвета. Функции обеспечивают больше контроля и гибкости при работе с цветами, используемыми в таблице стилей. При помощи цветовых…

Подробнее

[Перевод] Руководство по реализации отзывчивого дизайна в 2023 году

Сегодня построение отзывчивых макетов уже не основывается на контрольных точках (breakpoints) с фиксированной шириной. Вместо этого современные макеты должны работать на устройствах практически любого размера. Однако, к своему удивлению, я всё ещё встречаю сайты, где используется паттерн отзывчивого дизайна – когда присутствует контейнер, получающий новое значение max-width в соответствии с шириной области просмотра. Термин «отзывчивый» сегодня отражает уже очень многое. У нас есть…

Подробнее

[Перевод] Условные выражения в CSS

Мне нравится думать о CSS как о языке дизайна с условными выражениями. На протяжении многих лет CSS был известен как способ стилизации веб-страниц. Однако сегодня этот язык эволюционировал настолько, что в нём уже есть правила условных выражений. Любопытно то, что эти правила реализуются не напрямую (например, в CSS всё ещё нет if/else). Инструменты дизайна наподобие Figma, Sketch и Adobe XD сильно облегчили жизнь дизайнеров, однако им всё равно не хватает той гибкости, которая есть у CSS.

Подробнее

[Перевод] Создаём веб-сайт, как будто сейчас 1999 год

Раньше веб был более странным местом В прошлом году я поставила перед собой цель вернуть дух старого веба, креативность и шарм конца 90-х и начала 2000-х. В те времена не было правил, ты ставил на веб-страницу что угодно, потому что это было твоё пространство, в котором можно делать всё, что пожелаешь. И для целого поколения Интернет-пользователей наличие собственного веб-сайта было признаком крутости. Именно так обстояли дела тогда, в эпоху до появления социальных сетей и web 2.0, о…

Подробнее

[Перевод] Знакомство с тестированием веб-приложений

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

Подробнее

[Перевод] Разработка настоящих компонентов: блок сообщения Facebook Messenger

Смесь любопытства и тяги к исследованиям снова привели меня к системе обмена сообщениями Facebook. Я уже изучал компоненты Facebook и писал об этом. Сейчас я обратил внимание на то, что в одни только блоки для вывода сообщений чата вложена огромная работа. На первый взгляд может показаться, что разработка компонента, реализующего чат — это просто, что у составных частей такого компонента будет не особенно много вариаций. Если же вникнуть в тему работы с сообщениями, то окажется, что один…

Подробнее

[Перевод] Фронтенд-разработчику: 7 основных принципов дизайна

Я занимаюсь разработкой фронтенда. Мне часто приходится слышать такой вопрос: «Надо ли мне изучить дизайн для того, чтобы стать фронтенд-разработчиком?». Прежде чем я отвечу на этот вопрос — мне хотелось бы, чтобы читатели, которые тоже им задаются, понимали, что во многих компаниях есть собственные UX/UI-дизайнеры. Они рисуют интерфейсы, делают макеты, а программисты при этом занимаются исключительно своим делом. Задача программистов заключается в том, чтобы вдохнуть жизнь в макет

Подробнее

[Перевод] Веб-технологии, которые могут работать не так, как ожидается

Веб-технологии постоянно развиваются, а у разработчиков появляется возможность создавать всё более качественные и совершенные онлайн-проекты. Правда, бывает так, что какие-то новые веб-возможности работают не так, как того можно было бы ожидать. Это может касаться сфер юзабилити, безопасности, приватности. Я попадал в такие ситуации. Например, при использовании механизма ленивой загрузки в HTML. Соответствующий атрибут очень легко добавить в разметку, описывающую изображение, сделав это…

Подробнее

[Перевод] CSS: системные цвета, шрифты и кое-что ещё

Думаю, все мы, в целом, знакомы с таким способом описания CSS-цветов: color: OldLace;background: rebeccapurple; Полагаю, их обычно называют «именованными цветами». Но конкретные цвета, одни и те же в любой ситуации, к которым можно обращаться по именам, это — далеко не единственный вид особых CSS-цветов. Есть ещё одна разновидность подобных цветов. Их имена связаны с цветами уже не так однозначно. Речь идёт о так называемых «системных цветах». Джим Нильсен опубликовал потрясающий…

Подробнее

[Перевод] CSS, JavaScript и блокировка парсинга веб-страниц

Недавно мне попался материал, посвящённый проблеме загрузки CSS-файлов, которая замедляет обработку материалов страниц. Я читал ту статью, стремясь научиться чему-то новому, но мне показалось, что то, о чём там говорилось, не вполне соответствует истине. Поэтому я провёл собственное исследование этой темы и поэкспериментировал с загрузкой CSS и JavaScript. Читать дальше →

Подробнее

Создаем приложение для ANDROID быстро и просто

Сегодня я хотел бы поделиться с Вами, как быстро и просто можно создать приложение для Android с базовыми знаниями HTML CSS и JS. По данному примеру код на Java для Android будет минимальным. Благодаря платформе XAMARIN приложения для мобильных телефонов можно делать в Visual Studio. Читать дальше →

Подробнее