Добро пожаловать!!
Предположим, вы первый раз Добро пожаловать! 🤩 Прежде всего, давайте начнем с небольшого предисловия к сегодняшней статье.👇
Как некоторые, возможно, знают, я переключился на разработку пользовательского интерфейса несколько недель назад и начал решать задачи, используя HTMLиCSS. Эти задачи были выполнены с использованием Pure CSS.👇
- Challenge 01: компонент NFT Preview Card
- Вызов 02: компонент ценовой сетки Sigle
- Задание 03: — Целевая страница с одним вступительным разделом
- Вызов 04: — Целевая страница буфера обмена
- Вызов 05: — 3 — Компонент карточки предварительного просмотра столбцов
- Challenge 06: компонент карты предварительного просмотра продукта
- Вызов 07: Целевая страница агентства Sunnyside
- Challenge 08: компонент карты предварительного просмотра статистики
- Вызов 09: - Компонент QR-кода
С Thaaaat… Давайте приступим к нашему сегодняшнему вызову.
Что касается сегодняшнего задания, мы будем выполнять задание для юниоров от Front End Mentor. 👉Вызов 010 — Раздел сетки отзывов.
Как всегда, давайте начнем задание с мотивирующей цитаты.👇(Это одна из цитат, которая помогает мне продолжать двигаться, я делюсь ею с вами в надежде, что она поможет вам всем также продолжать двигаться вперед)
«Когда вы усердно работали, хорошо поработали и вошли в дверь возможностей, вы не захлопываете ее за собой. Вы достигаете Обратно.
~ Мишель Обама~
Прежде чем начать, позвольте мне выделить небольшое примечание (как всегда):-
Для некоторых из вас это может быть испытанием, которое вы можете выполнить с закрытыми глазами, для некоторых из вас это может быть проблемой, когда вы изучаете что-то новое, и для некоторых из вас это может быть начальным шагом в CSS. Так что эта статья для всех, от профи до новичка, которые любят учиться и оттачивать свои навыки.🤓 При этом…..
ВЫ ГОТОВЫ К ВЫЗОВУ??💣
🔸 Название испытания: -
Раздел Сетка отзывов
🔸 Описание:-
Ваша задача состоит в том, чтобы создать эту целевую страницу на основе дизайнов, представленных в стартовом коде. Ваши пользователи должны иметь возможность:
- Просмотр оптимального макета страницы в зависимости от размера экрана устройства.
🔸 Инструменты: -
HTML, CSS и фигма
Засучите рукава, приготовьте кофе со льдом, пришло время перейти к лучшей части учебника / испытания👊
Ранее мы делали план (HTML) и внутреннюю отделку (CSS) отдельно. Что касается сегодня, мы будем делать это по-другому.
- Шаг 01. Во-первых, мы начинаем с дизайна каждой карточки с отзывами.
- Шаг 02. Затем, когда все сделано, мы помещаем их в родительское представление.
- Шаг 03. Наконец, мы сделаем карту адаптивной в соответствии с дизайном.
- Ждать!!! Небольшой анонс, мы сделаем это и в мобильном первом подходе
ШАГ 01 — Дизайн карточек отзывов🚀
1.1 Давайте начнем с схемы отзывов
01) Карта отзывов для Даниэля
<div class="daniell-tetionial-wrapper">
<div class="quote-icon">
<img src="./images/bg-pattern-quotation.png" alt="quotation icon">
</div>
<div class="info-details">
<div class="person-image">
<img src="./images/image-daniel.png" alt="daniel">
</div>
<div class="info">
<h1> Daniel Clifford </h1>
<h2> Verified Graduate </h2>
</div>
</div>
<div class="description">
<p>
I received a job offer mid-course, and the subjects I
learned were current, if not more so, in the company I joined. I
honestly feel I got every penny’s worth.
</p>
</div>
<div class="quote">
<p>
“ I was an EMT for many years before I joined the bootcamp. I’ve
been looking to make a transition and have heard some people
who had an amazing experience here. I signed up for the free
intro course and found it incredibly fun! I enrolled shortly
thereafter. The next 12 weeks was the best - and most grueling
- time of my life. Since completing the course, I’ve
successfully switched careers, working as a Software Engineer
at a VR startup. ”
</p>
</div>
</div>
02) Карта отзывов для Джонатана
<div class="jonathan-tetionial-wrapper">
<div class="info-details">
<div class="person-image">
<img src="./images/image-jonathan.png" alt="jonathan">
</div>
<div class="info">
<h1> Jonathan Walters </h1>
<h2> Verified Graduate </h2>
</div>
</div>
<div class="description">
<p>
The team was very supportive and kept me motivated
</p>
</div>
<div class="quote">
<p>
“ I started as a total newbie with virtually no coding skills.
I now work as a mobile engineer for a big company. This was one
of the best investments I’ve made in myself. ”
</p>
</div>
</div>
03) Карта отзывов для Джанетт
<div class="janette-tetionial-wrapper">
<div class="info-details">
<div class="person-image">
<img src="./images/image-jeanette.png" alt="jonathan">
</div>
<div class="info">
<h1> Jeanette Harmon </h1>
<h2> Verified Graduate </h2>
</div>
</div>
<div class="description">
<p class="des">
An overall wonderful and rewarding experience
</p>
</div>
<div class="quote">
<p class="qt">
“ Thank you for the wonderful experience! I now have a job I
really enjoy, and make a good living while doing something I
love. ”
</p>
</div>
</div>
04) Карта отзывов для Патрика
<div class="patrick-tetionial-wrapper">
<div class="info-details">
<div class="person-image">
<img src="./images/image-jeanette.png" alt="jonathan">
</div>
<div class="info">
<h1> Patrick Abrams </h1>
<h2> Verified Graduate </h2>
</div>
</div>
<div class="description">
<p>
Awesome teaching support from TAs who did the bootcamp
themselves. Getting guidance from them and
learning from their experiences was easy.
</p>
</div>
<div class="quote">
<p>
“ The staff seem genuinely concerned about my progress which I
find really refreshing. The program gave me the confidence
necessary to be able to go out in the world and present
myself as a capable junior developer. The standard is above
the rest. You will get the personal attention you need from
an incredible community of smart and amazing people. ”
</p>
</div>
</div>
05) Карта отзывов для Киры
<div class="kira-tetionial-wrapper">
<div class="info-details">
<div class="person-image">
<img src="./images/image-kira.png" alt="jonathan">
</div>
<div class="info">
<h1> Kira Whittle </h1>
<h2> Verified Graduate </h2>
</div>
</div>
<div class="description">
<p class="des">
Such a life-changing experience. Highly recommended!
</p>
</div>
<div class="quote">
<p class="qt">
“ Before joining the bootcamp, I’ve never written a line of
code. I needed some structure from professionals who can help
me learn programming step by step. I was encouraged to enroll
by a former student of theirs who can only say wonderful
things about the program. The entire curriculum and staff
did not disappoint. They were very hands-on and I never had
to wait long for assistance. The agile team
project, in particular, was outstanding. It took my learning
to the next level in a way that no tutorial
could ever have. In fact, I’ve often referred to it during
interviews as an example of my developent
experience. It certainly helped me land a job as a full-stack
developer after receiving multiple offers.
100% recommend! ”
</p>
</div>
</div>
1.2 Теперь давайте займемся оформлением карточек с отзывами.
01) импортировать шрифты
Мы использовали шрифт под названием «Barlow Semi Condensed во всем дизайне. Поэтому сначала мы можем зайти в Google Font, найти шрифт 'Barlow Semi Condensed', щелкнуть соответствующий вес шрифта, который нам нужен, а затем получить ссылку для импорта.
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500;600;700&display=swap');
02) Используйте root: для объявления цветов
:root {
--white: #ffffff;
--purple: #7541c8;
--lighpurple: #A775F1;
--grey: #49556B;
--balckishblue: #18202D;
--lightgrey: #A7ABAE;
--darkgrey: #5A636C;
}
03) Включая стили для универсального селектора
* {
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 12px;
color: var(--white);
}
04) Общий стиль
p, h1 {
color: var(--white)
}
.daniell-tetionial-wrapper {
border-radius: 15px;
background-color: var(--purple);
width: 312px;
padding: 30px;
}
.info {
margin: 0px;
}
.quote-icon {
position: absolute;
right: 20px;
top: 8px;
}
.quote-icon img {
height: 102px;
width: 104px;
}
.info-details {
align-items: center;
display: flex;
flex-direction: row;
}
.person-image {
border-radius: 100%;
padding-right: 10px;
}
.person-image img {
border: 2px solid var(--lighpurple);
width: 31px;
height: 31px;
border-radius: 100%;
}
.description p {
color: var(--white);
font-size: 20px;
font-weight: 500;
}
.quote p {
color: var(--white);
font-size: 13px;
}
.black-text {
color: var(--darkgrey);
}
.each-wrapper {
margin-top:30px;
margin-bottom: 30px;
margin-left: 10px;
margin-right: 10px;
}
05) Особый стиль
.jonathan-tetionial-wrapper {
border-radius: 15px;
background-color: var(--grey);
max-width: 312px;
padding: 30px;
}
.janette-tetionial-wrapper,
.kira-tetionial-wrapper {
border-radius: 15px;
background-color: var(--white);
box-shadow: 5px 15px 15px rgba(0, 0, 0, 0.17);
max-width: 312px;
padding: 30px;
}
.description .des {
color: var(--balckishblue);
font-size: 20px;
font-weight: 500;
}
.quote .qt {
color: var(--balckishblue);
font-size: 13px;
}
.patrick-tetionial-wrapper {
border-radius: 15px;
background-color: var(--balckishblue);
max-width: 312px;
padding: 30px;
}
ШАГ 02 — Обтекание родительским представлением
2.1 Давайте начнем с схемы родительской оболочки
<div class="parent-wrapper">
<div class="parent-column">
<div class="first-row">
<div class="daniell-tetionial-wrapper each-wrapper">
</div>
<div class="jonathan-tetionial-wrapper each-wrapper">
</div>
</div>
<div class="second-row">
<div class="janette-tetionial-wrapper each-wrapper">
</div>
<div class="patric-tetionial-wrapper each-wrapper">
</div>
</div>
<div class="kira-tetionial-wrapper each-wrapper">
</div>
</div>
2.2 Теперь давайте сделаем стиль для родительской оболочки
.parent-wrapper {
display: flex;
flex-direction: column;
max-width: 1440px
align-items:center
}
ПЕРЕД ПЕРЕХОДОМ К ОТВЕТСТВЕННОЙ ЧАСТИ ПРОВЕРИМ РЕЗУЛЬТАТ В МОБИЛЬНОМ ПРОСМОТРЕ👇
ШАГ 03 — Пришло время сделать его отзывчивым🚀
@media screen and (min-width: 992px){
.parent-wrapper {
display: flex;
flex-direction: row;
align-items:stretch;
}
.first-row,
.second-row {
display: flex;
flex-direction: row;
}
.patrick-tetionial-wrapper {
max-width: 250
}
.daniell-tetionial-wrapper,
.patrick-tetionial-wrapper{
max-width: 550px;
width:550px
}
.quote-icon {
left: 700px
}
}
Заключительная мысль
Как и в случае с этой задачей, я закончу эту статью надеждой на то, что вы что-то приобрели и чему-то научились. Спасибо, что проверили это.
Теперь пришло ваше время, чтобы попробовать это испытание. Поверьте, вам понравится этот процесс.
Если вы хотите получить больше знаний, отточить свои навыки или вам нужно небольшое напоминание, ознакомьтесь со следующими статьями.👇🧠
Сосуд знаний в 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/Testimonials-Grid-Section.git
02) Ссылка на хостинг:- https://testimonials-grid-section-two-phi.vercel.app/
03) Ссылка на вызов:-https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7
