Добро пожаловать!!
Предположим, вы первый раз Добро пожаловать! 🤩 Прежде всего, давайте начнем с небольшого предисловия к сегодняшней статье.👇
Как некоторые, возможно, знают, я переключился на разработку пользовательского интерфейса несколько недель назад и начал решать задачи, используя HTMLиCSS. Эти испытания Frontend Mentor Challenge были выполнены с использованием Pure CSS. 👇
- Challenge 01: компонент NFT Preview Card
- Вызов 02: компонент ценовой сетки Sigle
- Задание 03: — Целевая страница с одним вступительным разделом
- Вызов 04: — Целевая страница буфера обмена
- Вызов 05: — 3 — Компонент карточки предварительного просмотра столбцов
- Challenge 06: компонент карты предварительного просмотра продукта
- Вызов 07: Целевая страница агентства Sunnyside
- Challenge 08: компонент карты предварительного просмотра статистики
- Вызов 09: - Компонент QR-кода
- Вызов 010: раздел Сетка отзывов
С Thaaaat… Давайте приступим к нашему сегодняшнему вызову.
Что касается сегодняшнего задания, мы будем выполнять задание для юниоров от Front End Mentor. 👉Вызов 011 — компонент предварительного просмотра статьи
Как всегда, давайте начнем задание с мотивирующей цитаты.👇(Это одна из цитат, которая помогает мне продолжать двигаться, я делюсь ею с вами в надежде, что она поможет вам всем также продолжать двигаться вперед)
Закройте свое эго за дверью. Эго может быть сильнейшим препятствием на пути к успеху. Оно может убить возможности и успех.
~ Дуэйн Джонсон ~
Прежде чем начать, позвольте мне выделить небольшое примечание (как всегда):-
Для некоторых из вас это может быть испытанием, которое вы можете выполнить с закрытыми глазами, для некоторых из вас это может быть проблемой, когда вы изучаете что-то новое, и для некоторых из вас это может быть начальным шагом в CSS. Так что эта статья для всех, от профи до новичка, которые любят учиться и оттачивать свои навыки.🤓 При этом…..
НАЧНИТЕ ВЫЗОВ
🔸 Название испытания: -
Компонент предварительного просмотра статьи
🔸 Описание:-
Ваша задача состоит в том, чтобы создать эту целевую страницу на основе дизайнов, представленных в стартовом коде. Ваши пользователи должны иметь возможность:
- Просмотр оптимального макета страницы в зависимости от размера экрана устройства.
🔸 Инструменты: -
HTML, CSS и фигма
ШАГ 01 — Начните с плана (HTML)🚀
Прежде всего, мы сделаем эскиз/чертеж компонента карты, используя HTML. После этого мы создадим внешний вид компонента предварительного просмотра статьи в соответствии с дизайном.
🔴 ШАГ 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> Article Preview Component</title>
</head>
<!-- Body Section-->
<body>
</body>
</html>
🔴 ШАГ 1.2 ➡ Создайте основную структуру для компонента предварительного просмотра статьи.
<div class="main-container"> <div class="image-container"></div> <div class="bottom-container"></div> </div>
🔴 ШАГ 1.3 ➡ Создайте структуру для каждого раздела
01) Разметка раздела изображения (ребенок 01)
<div class="image-container"></div>
01) Разметка раздела контента (дочерний элемент 02)
<div class="bottom-container">
<h1 class="heading">
Shift the overall look and feel by adding these wonderful
touches to furniture in your home
</h1>
<p class="paragraph">
Ever been in a room and felt like something was missing? Perhaps
it felt slightly bare and uninviting. I’ve got some simple tips
to help you make any room feel complete.
</p>
<div class="link">
<div class="user">
<div class="person"></div>
<div class="info">
<p class="name">
Michelle Appleton
</p>
<p class="date">
28 Jun 2020
</p>
</div>
</div>
<div class="share">
<a href="">
<img src="./images/icon-share.svg" alt="share icon">
</a>
</div>
</div>
</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> Article Preview Component </title> </head>
🔴Шаг 2.2 ➡ Импорт шрифтов во внешнюю таблицу стилей
Как видно из дизайна, мы использовали шрифт под названием Nunito Sans. Поэтому сначала мы можем зайти в Google Font, найти шрифт Nunito Sans, щелкнуть соответствующий вес шрифта, который нам нужен, а затем получить ссылку для импорта.
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap');
🔴Шаг 2.3 ➡ Используйте root: для объявления цветов, которые мы используем
:root {
--white:#ffffff;
--lightgrey:#9FABB2;
--darkgrey:#4E555D;
--greyishwhite:#ECEFF4;
--lightblue: #EDF2F8;
}
Подробное объяснение :root см. в Challenge No 002, где я описал, почему и что мы используем :root.
🔴Шаг 2.4 ➡ Включите стиль для универсального селектора
Теперь позвольте мне начать с небольшого примечания🔊:- Поскольку я описательно провел вас через универсальный селектор в предыдущих задачах (001, 002, 003, 004, 005, 006 ), а также в статье CSS, я не буду объяснять универсальный селектор и почему мы снова его используем.
*, a{
text-decoration: none;
font-family: 'Nunito Sans', sans-serif;
font-size: 15px;
margin: 0px;
text-decoration: none;
}
🔴Шаг 2.5 ➡ Включите цвет фона для всей страницы.
Как вы можете видеть, для всей страницы есть фоновый эффект голубого цвета.
body {
background-color: var(--lightblue);
}
🔴Шаг 2.6 ➡ Давайте приступим к стилизации родительского контейнера.
.main-container {
max-width: 330px;
min-height: 500px;
width:100%;
background-color: var(--white);
border-radius: 14px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
}
🔴Шаг 2.7 ➡ Давайте приступим к стилизации контейнера изображения (дочерний элемент 01)
.image-container {
background-image: url("./images/drawers.jpg");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
height:200px;
}
🔴Шаг 2.8 ➡ Приступим к стилю нижнего контейнера (ребенок 02)
.bottom-container {
padding: 30px 20px 30px 20px
}
.heading {
color: var(--darkgrey);
font-size: 18px;
font-weight:900;
}
.paragraph {
font-size: 15;
font-weight: 400;
margin-top: 20px;
}
.link {
align-items: center;
display: flex;
justify-content: space-between;
flex-direction: row;
margin-top: 20px;
}
.person {
background-image: url("./images/avatar-michelle.jpg");
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
width:40px;
height: 40px;
border-radius: 50px;
}
.user {
display: flex;
flex-direction: row;
align-items: center;
}
.info {
margin-left: 10px;
}
.info .name{
font-weight: 700;
}
.share {
width: 40px;
height: 40px;
border-radius: 50px;
background-color: var(--lightblue);
display: flex;
align-items: center;
justify-content: center;
}
.share img a{
width:20px;
height:17px;
}
— — ПОСМОТРИМ РЕЗУЛЬТАТ В МОБИЛЬНОМ ПРОСМОТРЕ💣. ТАДААА..🤩 — —
ШАГ 03 — Время сделать адаптивным для всех экранов (Media Query)🚀
Поскольку мы использовали подход, ориентированный на мобильные устройства, мы сделали базовые стили для мобильного представления. Теперь пришло время использовать медиа-запрос и сделать его адаптивным для экранов большего размера.
Как только вы включите стили для медиа-запроса, эти стили будут переопределять базовый стиль соответственно для больших экранов.
🟡Шаг 3.1 ➡ Давайте завершим, настроив стили для экранов с разрешением более 768 пикселей.
@media screen and (min-width:768px){
.main-container {
max-width: 740px;
max-height: 290px;
min-height: 10px;
display: flex;
flex-direction: row;
margin-top: 100px;
}
.image-container {
width:287px;
height: 287px;
border-bottom-left-radius: 14px;
border-bottom-right-radius: 0px;
border-top-left-radius: 14px;
border-top-right-radius: 0px;
}
.bottom-container {
max-width: 400px;
}
.heading {
font-size: 20px;
max-width: 350px;
}
}
Заключительная мысль
Как и в случае с этой задачей, я закончу эту статью надеждой на то, что вы что-то приобрели и чему-то научились. Спасибо, что проверили это.
Теперь пришло ваше время, чтобы попробовать это испытание. Поверьте, вам понравится этот процесс.
Если вы хотите получить больше знаний, отточить свои навыки или вам нужно небольшое напоминание, ознакомьтесь со следующими статьями.👇🧠
Сосуд знаний в 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/Article-Preview-Component.git
02) Ссылка на хостинг:-https://article-iota-jade.vercel.app/
03) Ссылка на вызов:-https://www.frontendmentor.io/challenges/article-preview-component-dYBN_pYFT
Не стесняйтесь проверить предыдущий челлендж в сетке и флексбоксе👇
Вызов 01 | Вызов 02 | Вызов 03 |Вызов 04
