Привет… Привет… С возвращением!!
Предположим, вы первый раз Добро пожаловать! 🤩 Прежде всего, давайте начнем с небольшого предисловия к сегодняшней статье.👇
Как некоторые из вас, возможно, знают, несколько недель назад я переключился на разработку пользовательского интерфейса и начал решать задачи с использованием HTMLиCSS. Затем я выполнил четыре задания с помощью Flexbox (Вызов 01, Вызов 02, Вызов 03 и Вызов 04). После этого я сделал еще три испытания, используя CSS Grid (Вызов 05, Вызов 06 и Вызов 07). И последнее, но не менее важное: наша последняя задача была выполнена с использованием Flexbox и CSS (Challenge 08 ).
Несмотря на то, что мы выполнили несколько задач с использованием чистого CSS, я подумал, почему мы остановились на этом, пока мы переходим к следующему сеансу, мы продолжим делать то, с чего начали. Разве не лучше??
Итак, что касается меня и, надеюсь, всех вас, я решил выполнить несколько крошечных задач от Frontend Mentor с использованием CSS. Я твердо верю, что каждый раз нам есть чему поучиться.
С Thaaaat… Давайте приступим к нашему сегодняшнему вызову.
Что касается сегодняшнего задания, мы будем выполнять задание для начинающих от Front End Mentor. 👉Вызов 009 – Компонент QR-кода.
Как всегда, давайте начнем задание с мотивирующей цитаты.👇(Это одна из цитат, которая помогает мне продолжать двигаться, я делюсь ею с вами в надежде, что она поможет вам всем также продолжать двигаться вперед)
«все меняют не большие шаги, а самые маленькие из повседневной жизни, которые меняют».
~Мел Роббинс~
Прежде чем начать, позвольте мне выделить небольшое примечание (как всегда):-
Для некоторых из вас это может быть испытанием, которое вы можете выполнить с закрытыми глазами, для некоторых из вас это может быть проблемой, когда вы изучаете что-то новое, и для некоторых из вас это может быть начальным шагом для CSS Grid. Так что эта статья для всех, от профи до новичка, которые любят учиться и оттачивать свои навыки.🤓 При этом…..
ВЫ ГОТОВЫ К ВЫЗОВУ??💣
🔸 Название испытания: -
🔸 Описание:-
Ваша задача состоит в том, чтобы создать эту целевую страницу на основе дизайнов, представленных в стартовом коде. Ваши пользователи должны иметь возможность:
- Просмотр оптимального макета страницы в зависимости от размера экрана устройства.
🔸 Инструменты: -
HTML, CSS и фигма
ШАГ 01 — Начните с плана (HTML)🚀
Прежде всего, мы сделаем эскиз/чертеж компонента карты, используя HTML. После этого мы создадим внешний вид компонента QR-карты в соответствии с дизайном.
🔴 ШАГ 1.1 ➡ Базовая структура HTML
<!DOCTYPE html>
<html lang="en">
<!-- Head Section-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title> QR Card Component</title>
</head>
<!-- Body Section-->
<body>
</body>
</html>
🔴 ШАГ 1.2 ➡ Создайте основную структуру для компонента QR Card.
<body>
<div class="main-container">
<!-- image section -->
<div class="image-container">
</div>
<!-- bottom content section -->
<div class="bottom-container">
</div>
</div>
</body>
🔴 ШАГ 1.3 ➡ Создайте структуру для каждого раздела
Теперь мы закончили с базовой структурой. Пришло время углубиться в каждый контейнер и сделать макет для каждого раздела для нашего старта.
01) Разметка раздела изображения
<div class="image-container">
<img src="./images/qr-code-icon.png" alt="qr image">
</div>
02) Разметка нижнего раздела контента
<div class="bottom-container"> <h1> Improve your front-end skills by building projects </h1> <p> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> </div>
— — На этом мы закончили с чертежом. Пришло время проверить результат нашего плана.👀👇 — —
— — ХМММ, я не фанат этого. Выглядит некрасиво.🤮 Но вместо того, чтобы тратить время на жалобы, давайте займемся работой и сделаем ее более привлекательной — —
ШАГ 02 — Время сделать его более привлекательным (CSS)🚀
Здесь мы сначала начнем стиль для мобильного представления, а затем настроим стиль для больших экранов с помощью медиа-запросов.
🔴 Шаг 2.1 ➡ Прежде всего, давайте начнем с привязки внешней таблицы стилей к файлу HTML.
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial scale=1.0"> <link rel="stylesheet" href="styles.css"> <title> QR Card Component </title> </head>
🔴Шаг 2.2 ➡ Импорт шрифтов во внешнюю таблицу стилей
Как вы видите, в дизайне мы использовали шрифт под названием Poppins. Поэтому сначала мы можем перейти в Google Font, найти шрифт ‘Poppins’, щелкнуть соответствующий вес шрифта, который нам нужен, а затем получить ссылку для импорта.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
🔴Шаг 2.3 ➡ Используйте root: для объявления цветов, которые мы используем
:root {
--white: #ffffff;
--black: #000000;
--lightgrey: #B0B4B7;
--lightblue:#D5E1EF;
}
Подробное объяснение :root см. в Challenge No 002, где я описал, почему и что мы используем :root.
🔴Шаг 2.4 ➡ Включите стиль для универсального селектора
Теперь позвольте мне начать с небольшого примечания🔊:- Так как я описательно провел вас через универсальный селектор в предыдущих задачах (001, 002, 003, 004, 005,006), а также в Статья о CSS, я не буду объяснять универсальный селектор и почему мы снова его используем.
* {
color:var(--black);
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 600;
margin: 0px;
margin-left: auto;
margin-right: auto;
}
🔴Шаг 2.5 ➡ Включите цвет фона для всей страницы.
Как вы можете видеть, для всей страницы есть фоновый эффект голубого цвета.
body {
background-color: #D5E1EF;
}
🔴Шаг 2.6 ➡ Давайте приступим к стилизации всей страницы.
.main-container {
background-color: var(--white);
border-radius: 24px;
box-shadow: 0px 10px 22px rgba(0, 0, 0, 0.25);
width:320px;
padding: 16px 16px 40px 16px;
margin-top: 100px;
}
.image-container img {
border-radius: 24px;
width:100%;
height:auto;
}
.bottom-container {
text-align: center;
}
.bottom-container h1 {
font-size: 21px;
width:260px;
padding-top: 20px;
padding-bottom: 16px;
}
.bottom-container p {
color: var(--lightgrey);
font-size: 12px;
font-weight: 500;
line-height: 18px;
padding-left: 60px;
padding-right: 60px;
}
Примечание. Мы не будем использовать медиа-запрос, потому что нет никакой разницы, когда вы настраиваете ширину экрана. ➡ Ширина карты одинакова для всех размеров экрана
— — ПОСМОТРИМ РЕЗУЛЬТАТ В МОБИЛЬНОМ И НА РАБОЧЕМ МОБИЛЬНОМ ПРОСМОТРЕ💣. ТАДААА..🤩 — —
Заключительная мысль
Как и в случае с этой задачей, я закончу эту статью надеждой на то, что вы что-то приобрели и чему-то научились. Спасибо, что проверили это.
Теперь пришло ваше время, чтобы попробовать это испытание. Поверьте, вам понравится этот процесс.
Если вы хотите получить больше знаний, отточить свои навыки или вам нужно небольшое напоминание, ознакомьтесь со следующими статьями.👇🧠
Сосуд знаний в CSS https://medium.com/@nknuranathunga/vessel-of-knowledge-in-grid-1272764725a2
Понимание flexbox для упрощения работы:- https://levelup.gitconnected.com/understanding-flexbox-to-make-things-easy-adf90891ff25
Изучите основы CSS за несколько минут:- https://bootcamp.uxdesign.cc/beginners-guide-to-css-9bc8298985c0
Руководство по HTML для начинающих: https://uxplanet.org/beginners-guide-to-html-and-css-letss-start-off-with-html-3d7ffd035182
Если вам это нравится, похлопайте один или несколько раз и не стесняйтесь оставлять свои мысли и отзывы в разделе комментариев.
Спасибо, что ознакомились с этим. Не стесняйтесь ознакомиться с другими моими статьями, нажав на следующую ссылку 👇
🔸Подпишитесь на меня в Твиттере👀: @NathashaR97🔸
Перейдите по следующей ссылке для репозитория кода и файла Figma🧠👇
01) Репозиторий кода: - https://github.com/NathashaR97/QR-card-Component.git
02) Ссылка на хостинг:- https://qr-card-component-snowy.vercel.app/
03) Ссылка на вызов:-https://www.frontendmentor.io/challenges/qr-code-component-iux_sIO_H
Не стесняйтесь проверить предыдущий челлендж в сетке и флексбоксе👇
Сетка и Flexbox оба ➡
Вызов 008
Сетка ➡
Вызов 005
Вызов 006
Вызов 007
Нажмите на задание, чтобы проверить задания 01–04, которые выполняются с помощью flexbox
