компютри

Преглед - Flexbox Курсове за Skillshare

Август 2021

Преглед - Flexbox Курсове за Skillshare


Интересувате ли се от Flexbox. В тази статия разглеждам два курса на Skillshare, които обхващат една и съща тема, основите на свойствата на Flexbox. Както при други CSS3, и вие имате нужда от основа на свойствата и стойностите на CSS, преди да започнете да създавате уебсайтове с Flexbox.


CSS: Основи на Flexbox
Исмаил Раджи, софтуерен инженер, уеб разработчик и инструктор
Продължителност: 11 минути

В този 11-минутен курс, Ismall Raji обсъжда специалистите Flexbox. Разбира се, това не е задълбочен курс, а бързо обобщение и демонстрация на свойствата. Ismall използва html редактор за разделен изглед, за да демонстрира всяко свойство на Flexbox и техните стойности. След това той обсъжда как да използвате Flexbox без никакви медийни запитвания за отзивчив уеб дизайн. Накрая той изпраща своите зрители в Flexbox Froggy, онлайн игра на Flexbox.




CSS Flexbox: Пълният клас
Питър Сомърхоф, Научете кодирането без пух!
Продължителност: 2 часа

В този двучасов курс на Skillshare, Peter Sommerhoff ще ви преведе през основните свойства на Flexbox, новия и подобрен CSS3 за контрол на оформлението на вашите уеб страници и уебсайт.

Питър започва с въвеждане на това какво точно представлява Flexbox, как може да направи кодирането ви CSS много по-лесно и текущата поддръжка на браузъра. Питър доставя един цип за изтегляне, съдържащ един HTML, един JPG и два CSS файла. Той обсъжда целта на всеки. След това той започва с прост пример за добавяне и оформяне на контейнерна кутия с четири divs вътре.

Използвайки този пример, Питър обсъжда основните свойства на контейнера Flex, включително гъвкавост и съдържание на обосновка и как те работят по-добре от старите CSS свойства. Той завършва с предложението за онлайн игра, Flexbox Froggy, която ще ви даде известна практика, използвайки тези свойства. Той се отнася към тази игра няколко пъти през целия курс.

Преминавайки към други свойства, Питър обсъжда свойствата на елементите за подравняване, гъвкавост и гъвкав поток, които контролират поставянето на всеки div в контейнера. Той демонстрира всяка стойностна опция, показвайки гъвкавостта на Flexbox. След това научаваме как да контролираме поведението на редовете вътре в контейнера, като използваме свойствата на гъвкавия елемент - подреждане, подравняване и саморазтягане.

Преди да обсъди трите примера на проекти, Питър обсъжда трите най-важни свойства за отзивчивите уебсайтове, които са свойствата на гъвкаво-растящо, гъвкаво свиване и гъвкаво основа. Свойствата на гъвкаво-растящо и гъвкаво свиване казват на divs в контейнера да растат / свиват, за да запълнят контейнера. Но той също така обсъжда как да контролира количеството на растеж / свиване за всеки отделен div.

След като покриете всички свойства, сте готови да разгледате някои примери. Питър започва с обикновен пример за галерия и преминава към по-гъвкаво галерийно решение. Той също така обсъжда вертикалното центриране на съдържание вътре в divs и добавяне на медийни обекти. И накрая, той обхваща свещения граал на оформления, който е заглавка в горната част, област със съдържание между две странични ленти в центъра и долен колонтитул. Той демонстрира колко лесно е това разположение да се маркира с Flexbox.

Разкриване: Като участник в партньорската програма на Skillshare, някои от връзките в тази статия са партньорски връзки. Въпреки това, моите мнения са напълно собствени въз основа на моя опит.

Набор начални уроци по flash/flex. (Август 2021)



Тагове Статия: Преглед - Flexbox Курсове за Skillshare, Digital Art и дизайн, Skillshare Flexbox онлайн видео курс

OrchidWiz Encyclopedia v. 2.0

OrchidWiz Encyclopedia v. 2.0

Дом и Градина

Имате мръсен въздух?

Имате мръсен въздух?

Дом и Градина