Верстка простого сайта с нуля для начинающих 🔥

Мы на практике поверстаем сайт с использованием HTML и SCSS. Макет отрисован в Figma.

Также мы снова объявляем конкурс в рамках видео. Победитель получит 5000 руб на карту и ссылку с работой опубликуем в описание к видео. Необходимо будет доверстать макет до конца и сделать адаптив. Куда скидывать ссылки - найдешь в ссылке 👇🏻

✅ Смотреть - https://youtu.be/oxQpayexHnI

Не забудь оставить лайк и комментарий на Youtube, чтобы другие тоже заметили это видео 😊

#версткасайта

​​CSS: работа с текстом на изображениях 🗻

Вы можете встретить компонент пользовательского интерфейса, у которого есть текст над изображением. В некоторых случаях в зависимости от используемого изображения текст будет трудно прочитать. У этой проблемы есть несколько различных решений, таких как добавление градиента или затемнение изображения, наложение тени на текст и другие. Этот прием будет полезен не только frontend и веб-разработчикам, но и ui/ux-дизайнерам.

Читать: https://habr.com/ru/company/skillfactory/blog/551850/

#css

Сегодня последний день приема ваших работ для участия в конкурсе ⚡️

Напомню, что для участия в конкурсе нужно доделать адаптив сайта, показанного в видео - https://youtu.be/ICj4lMwdiVk

Победитель получит 5000 руб на карту и ссылку с работой опубликуем в описание к видео.

Все условия отправки заявок описаны в видео на Youtube.

А я в свою очередь завтра опубликую список работ в формате Excel, чтобы вы видели всех участников, и изучу содержимое. Если возникнет спорный момент с выбором победителя, то выставлю голосование. Вероятнее всего, на ютубе во вкладке Сообещство.

⚡️ Ссылки собраны https://docs.google.com/spreadsheets/d/1-U_d0l4XW5_JIL5VcGlNAgi5hCtobOVEC3xI_1gAi60/edit?usp=sharing

Завтра начну просмотр ✌️

Все курсы по JavaScript пройдены, а книги – прочитаны? Тогда пора повысить уровень знаний при помощи профильной конференции!

🧑‍💻 Большая конференция по JavaScript-разработке начнется во вторник, 20 апреля!

HolyJSHolyJS –это 4 дня докладов, воркшопов, best practices из опыта крутых IT-команд, общение со спикерами и коллегами в чатах и дискуссионных зонах, а также активности с ценными призами и даже игровая платформа, имитирующая реальную площадку. Вся программа доступна по ссылке.

👉 Смотри всю программу на https://bit.ly/3mNOaZT

В этот раз все онлайн, а значит можно просвещаться и развлекаться, сидя на диване с кофейком. В общем, сплошные плюсы.

✅ Покупай Personal-Standard билет по промокоду tpverstakJRG2021pc на https://bit.ly/3sraN7O

​​Пользовательские CSS-переменные, инверсия светлоты цветов и создание тёмной темы за 5 минут 🌚

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

Читать: https://habr.com/ru/company/ruvds/blog/551038/

#css

​​Нестандартные шрифты: как подключить и оптимизировать 💱

Чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом, а требует использовать какой-то нестандартный. В этом случае при загрузке страницы файл со шрифтом нужно подгружать с сервера по той же схеме, что и остальные ресурсы — CSS-файлы, изображения и так далее. Он может весить довольно много, именно поэтому для быстрой загрузки страницы выгоднее сначала рассмотреть возможность использования стандартных шрифтов. Но даже с нестандартными шрифтами можно избежать большинства проблем, если уделить внимание оптимизации.

Читать: https://habr.com/ru/company/htmlacademy/blog/552388/

#css

​​GUI для отладки HTTP запросов (webhook tester) 😎

Если разработчик пишет код, который взаимодействует с внешним миром, то закон Мерфи сработает быстрее, чем хотел бы того этот самый разработчик. Часто ошибки появляются на стороне кода отправляющего данные из-за недостаточной его проверки, полагаясь на "ну, код вроде выглядит нормально, да и unit-тест есть на это". Но должного ли качества этот самый тест, и фиксирует ли он то, что надо? В этот момент появляется желание посмотреть "так что же на самом деле отправляет my-awesome-lib?", и если отправка происходит посредством протокола HTTP - то, возможно, данный материал расширит возможность отладки HTTP запросов в ваших проектах.

Читать: https://habr.com/ru/post/517196/

#work

Всем привет 👋 Поделитесь полезными телеграм-каналами, где вы обычно ищите заказы на фриланс по верстке или фронтенд 👇

​​React: наглядное пособие для начинающих. Создаем свой компонент без знаний JavaScript 😃

Эта статья — введение в React для начинающих. И это первое, с чего стоит начать, прежде чем детально изучить React. В статье объясняются основные идеи React на пальцах (и с помощью картинок). Нет опыта работы с JavaScript? Не беда! Если у вас есть базовые знания HTML (например, HTML-тегов), эта статья должна вам понравиться. Статья покажет общую картину того, что делает React таким особенным.

Читать: https://habr.com/ru/company/quarkly/blog/552214/

#react

Свежий отзыв с продвинутого курса по верстке 💥

Антон обучался на потоке, который стартовал 1 марта на полном тарифе с куратором. И хотим поделиться не только отзывом, но и работами.

✅ Верстка учебного проекта:
https://github.com/Tony7-the-Human/OrganicWeb

✅ Верстка дипломного проекта:
https://github.com/Tony7-the-Human/Homefor

Основной Github - https://github.com/Tony7-the-Human
Если вы заинтересованы в верстальщике - обращайтесь к @Tony7_The_Human

⚡ Следующие потоки курсов стартуют 17 мая:
Базовый курс - https://frontendblok.com/courses/html-css
Продвинутый курс - https://frontendblok.com/courses/advanced-html-css

⚠️ Также у нас есть бесплатный марафон "Основы веб-разработки", который поможет разобраться в будущей профессии - https://frontendblok.com/marathons/web-marathon

#отзыв

​​Малоизвестные, но крутые атрибуты в HTML 🤔

Спросите случайного фронтендера, какие атрибуты HTML он использует — и услышите что-то вроде «src, href, style, class...» и прочую чепуху, которую всем ещё в младенчестве вживили на чипе агенты IETF. Между тем, стандарты веба не стоят на месте, и с каждым годом в браузерах появляются всё более крутые фичи не только для монструозного CSS, но и для обычных элементов HTML. Вы знали, что с помощью атрибутов можно пинговать произвольный адрес, а элементы формы могут многократно переопределять её поведение? Вряд ли.

Читать: https://habr.com/ru/company/vdsina/blog/551970/

#html

​​Используй console.log () как про 😎

Использование console.log() для отладки JavaScript - самая распространенная практика среди разработчиков. Но есть еще кое-что ...

Объект console обеспечивает доступ к отладочной консоли браузера. Особенности того, как это работает, варьируются от браузера к браузеру, но де-факто существует набор функций, которые обычно предоставляются.

Читать: https://habr.com/ru/company/itsoft/blog/552076/

#javascript

Победитель найден! 💥

Это 14-я работа, в которой используется Pug, SCSS и немного JS.
Работа Романа - https://github.com/Unleashed97/justice-league

Обязательно посмотрите мои комментарии, которые я оставила в предыдущей ссылке поста. Там я расписала плюсы и что стоит доработать. Идеальных работ не было, но может это и плюс?

Я таким образом смогла понять ваши основные ошибки, а значит в ближайшее время сделаю разбор ошибок в видео и постараюсь отобразить своё видение адаптива.

Спасибо всем, кто участвовал! ❤
Не забывайте, что сейчас идет параллельно еще один конкурс (смотрите последнюю практику).

Комментарий к посту писать сюда - https://www.youtube.com/post/UgyGr7Fo1CP-LpngmiR4AaABCQ

Хочешь иметь крутое портфолио, но у тебя нечего верстать?

РЕШЕНИЕ ЕСТЬ!!!

Подпишись на канал 👉 @figma_templates — где каждый день публикуются макеты Figma для практики верстки.

Этих макетов еще нет в сети, поэтому они будут уникальными для первых кто их скачает, так как мы берем их из самого популярного ресурса ENVATO.

У всех подписчиков есть возможность бесплатно заказать один из более чем 3500 макетов на выбор.

#реклама

Слова победителя конкурса ⬆️⬆️⬆️

А я в свою очередь напомню вам, что сейчас идёт ещё один конкурс, где нужно доверстать и сделать адаптив сайта с использованием HTML/SCSS.

Видео и условия участия в конкурсе:
https://youtu.be/oxQpayexHnI

​​Создаем Booking приложение с Webix UI 😎

Эта статья предназначена для тех, кто ценит свое время и не желает тратить многие месяцы на дотошное изучение нативных технологий web разработки. Знать и разбираться в них безусловно полезно, но в современном мире технологии развиваются настолько стремительно, что уследить за всеми тонкостями — задача не из легких. Чтобы не чахнуть над талмудами скучнейших документаций, которые изменятся уже завтра, можно использовать готовые решения.

Одно из лучших решений предлагает нам команда Webix. Их библиотеку UI компонентов мы и рассмотрим в этой статье.

Читать: https://habr.com/ru/post/551988/

#javascript

​​Типобезопасность в JavaScript: Flow и TypeScript 🤔

Все, кто имеют дело с разработкой UI в кровавом enterprise наверняка слышали о «типизированном JavaScript», подразумевая под этим «TypeScript от Microsoft». Но кроме этого решения существует как минимум ещё одна распространённая система типизации JS, и тоже от крупного игрока IT-мира. Это flow от Facebook. Надо признать, что в 2021 году flow уже значительно проигрывает TypeScript как в популярности, так и в поддержке со стороны самых разных утилит (и библиотек), и пора бы его поставить на полку, и перейти на де-факто стандарт TypeScript. Но под этим хочется на последок сравнить эти технологии, сказать пару (или не пару) прощальных слов flow от Facebook.

Читать: https://habr.com/ru/post/552760/

#javascript

​​Какие CSS-генераторы можно использовать в 2021 году 🤔

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

Схема работы таких генераторов проста: достаточно ввести через простой визуальный интерфейс нужные вам параметры и на выходе получить готовые CSS-стили. Далее полученный код нужно скопировать и добавить в свой проект.

Читать: https://habr.com/ru/company/vdsina/blog/552562/

#css