ПОСАДОЧНАЯ СТРАНИЦА ДЛЯ МЕБЕЛИ
Здравствуйте!
Элисон здесь с очередным проектом!!!💃🏽 . Я думаю, что, возможно, я только начинаю вникать в этот писательский бизнес, и мне нравится каждая минута. Во-первых, я думаю, что не так много рассказала о себе, поэтому позвольте мне начать с того, чем я занимаюсь. Я работаю в кинопрокатной компании, так что, очевидно, я зарабатываю на жизнь просмотром фильмов 😌 и параллельно изучаю Front-end разработку, чтобы потом сменить профессию или сделать и то, и другое, но я сомневаюсь, что это произойдет. Мой первый шаг в мир технологий был ошеломляющим, но, как говорят, ничто хорошее не дается легко, так что я делаю все возможное, чтобы оставаться в игре.
.
Сейчас я работаю над своим третьим проектом с использованием CSS flexbox. Честно говоря, я думал, что CSS будет простым, так как HTML был простым, но потом я понял, что это не только «красота», но и отзывчивость… ОГО… Я не был готов к Flex Box. Бродя по интернету, я наткнулся на статью об эффективном способе изучения Flexbox
КРАТКАЯ ИНФОРМАЦИЯ О FLEX-BOX
Модель макета Flexible Box (flexbox) — это модель макета, разработанная для одномерного контента. Она отлично справляется с задачей получения набора элементов, имеющих разные размеры, и возвращает наилучший макет для этих элементов.
Flex-макеты имеют следующие особенности, которые вы сможете изучить в этом руководстве.
Они могут отображаться в виде строки или столбца.
Они учитывают режим написания документа.
По умолчанию они однострочные, но их можно попросить развернуть на несколько строк.
Элементы макета могут быть визуально переупорядочены, в отличие от их порядка в DOM.
Пространство может быть распределено внутри элементов, так что они становятся больше и меньше в зависимости от пространства, доступного в их родительском блоке.
Пространство можно распределить вокруг элементов и гибких линий в обернутом макете, используя свойства выравнивания блоков.
Сами элементы могут быть выровнены по поперечной оси.
ОБЗОР ВЫРАВНИВАНИЯ FLEX-BOX
Flexbox принес с собой набор свойств для выравнивания элементов и распределения пространства между ними. Эти свойства оказались настолько полезными, что с тех пор были перенесены в собственную спецификацию, их можно встретить и в Grid Layout. Здесь вы можете узнать, как они работают при использовании flexbox.
Набор свойств можно разделить на две группы. Свойства для распределения пространства и свойства для выравнивания. Свойства, которые распределяют пространство, следующие:
justify-content: распределение пространства по главной оси.
align-content: распределение пространства по поперечной оси.
place-content: сокращение для установки обоих вышеуказанных свойств.
Свойства, используемые для выравнивания во флекс-боксе:
align-self: выравнивает отдельный элемент по поперечной оси.
align-items: выравнивает все элементы как группу по поперечной оси.
https://web.dev/learn/css/flexbox/
Я решил опробовать знания о flex box на этом минималистичном одностраничном сайте, который я нашел на Dribble, и использовать его для экспериментов с теми знаниями, которые я приобрел о них.
Я начал с навигационной панели, и поскольку я сделал так много навигационных панелей, я выбрал одну из моих коллекций. Мне было трудно организовать ее и сделать отзывчивой, но с помощью нескольких руководств, особенно одного от Кевина Пауэлла, мне удалось сделать ее отзывчивой.
https://www.youtube.com/watch?v=fm3dSg4cxRI&t=38s
Кроме того, я понял, что нужно делать больше проектов, чтобы улучшить свои навыки, и что есть много разных путей, которые можно выбрать в веб-разработке. Вот готовый продукт https://furni-landing-page.vercel.app/ Ссылки в навигационной панели пока никуда не ведут, так как это демонстрационная страница. Когда я освою больше знаний, я создам сайт электронной коммерции.
Искренне, если вы дочитали до конца, спасибо.
Все готово друзья, удачного дня!
Целую до следующего раза😘.