Верстка сайту на Flexbox CSS
ITVDN: курси програмування
Відеокурси з
програмування
УКР
  • РУС
  • УКР

Замовити дзвінок

    Вибери свою IT спеціальність

    Підписка

    Замовити дзвінок

    +38 099 757 27 82
    УКР
    • РУС
    • УКР
    Arrow
    🔥Premium 15 місяців за акційною ціною доступний до 31 січня. Подробиці
    Arrow
    Замовте дзвінок
    Ми будемо раді допомогти Вам з вибором курсу чи спеціальності та спланувати навчання на ITVDN
    • Ukraine (Україна)+380
    • Poland (Polska)+48
    • Kazakhstan (Казахстан)+7
    • Azerbaijan (Azərbaycan)+994
    • Afghanistan (‫افغانستان‬‎)+93
    • Albania (Shqipëri)+355
    • Algeria (‫الجزائر‬‎)+213
    • American Samoa+1
    • Andorra+376
    • Angola+244
    • Anguilla+1
    • Antigua and Barbuda+1
    • Argentina+54
    • Armenia (Հայաստան)+374
    • Aruba+297
    • Ascension Island+247
    • Australia+61
    • Austria (Österreich)+43
    • Azerbaijan (Azərbaycan)+994
    • Bahamas+1
    • Bahrain (‫البحرين‬‎)+973
    • Bangladesh (বাংলাদেশ)+880
    • Barbados+1
    • Belarus (Беларусь)+375
    • Belgium (België)+32
    • Belize+501
    • Benin (Bénin)+229
    • Bermuda+1
    • Bhutan (འབྲུག)+975
    • Bolivia+591
    • Bosnia and Herzegovina (Босна и Херцеговина)+387
    • Botswana+267
    • Brazil (Brasil)+55
    • British Indian Ocean Territory+246
    • British Virgin Islands+1
    • Brunei+673
    • Bulgaria (България)+359
    • Burkina Faso+226
    • Burundi (Uburundi)+257
    • Cambodia (កម្ពុជា)+855
    • Cameroon (Cameroun)+237
    • Canada+1
    • Cape Verde (Kabu Verdi)+238
    • Caribbean Netherlands+599
    • Cayman Islands+1
    • Central African Republic (République centrafricaine)+236
    • Chad (Tchad)+235
    • Chile+56
    • China (中国)+86
    • Christmas Island+61
    • Cocos (Keeling) Islands+61
    • Colombia+57
    • Comoros (‫جزر القمر‬‎)+269
    • Congo (DRC) (Jamhuri ya Kidemokrasia ya Kongo)+243
    • Congo (Republic) (Congo-Brazzaville)+242
    • Cook Islands+682
    • Costa Rica+506
    • Côte d’Ivoire+225
    • Croatia (Hrvatska)+385
    • Cuba+53
    • Curaçao+599
    • Cyprus (Κύπρος)+357
    • Czech Republic (Česká republika)+420
    • Denmark (Danmark)+45
    • Djibouti+253
    • Dominica+1
    • Dominican Republic (República Dominicana)+1
    • Ecuador+593
    • Egypt (‫مصر‬‎)+20
    • El Salvador+503
    • Equatorial Guinea (Guinea Ecuatorial)+240
    • Eritrea+291
    • Estonia (Eesti)+372
    • Eswatini+268
    • Ethiopia+251
    • Falkland Islands (Islas Malvinas)+500
    • Faroe Islands (Føroyar)+298
    • Fiji+679
    • Finland (Suomi)+358
    • France+33
    • French Guiana (Guyane française)+594
    • French Polynesia (Polynésie française)+689
    • Gabon+241
    • Gambia+220
    • Georgia (საქართველო)+995
    • Germany (Deutschland)+49
    • Ghana (Gaana)+233
    • Gibraltar+350
    • Greece (Ελλάδα)+30
    • Greenland (Kalaallit Nunaat)+299
    • Grenada+1
    • Guadeloupe+590
    • Guam+1
    • Guatemala+502
    • Guernsey+44
    • Guinea (Guinée)+224
    • Guinea-Bissau (Guiné Bissau)+245
    • Guyana+592
    • Haiti+509
    • Honduras+504
    • Hong Kong (香港)+852
    • Hungary (Magyarország)+36
    • Iceland (Ísland)+354
    • India (भारत)+91
    • Indonesia+62
    • Iran (‫ایران‬‎)+98
    • Iraq (‫العراق‬‎)+964
    • Ireland+353
    • Isle of Man+44
    • Israel (‫ישראל‬‎)+972
    • Italy (Italia)+39
    • Jamaica+1
    • Japan (日本)+81
    • Jersey+44
    • Jordan (‫الأردن‬‎)+962
    • Kazakhstan (Казахстан)+7
    • Kenya+254
    • Kiribati+686
    • Kosovo+383
    • Kuwait (‫الكويت‬‎)+965
    • Kyrgyzstan (Кыргызстан)+996
    • Laos (ລາວ)+856
    • Latvia (Latvija)+371
    • Lebanon (‫لبنان‬‎)+961
    • Lesotho+266
    • Liberia+231
    • Libya (‫ليبيا‬‎)+218
    • Liechtenstein+423
    • Lithuania (Lietuva)+370
    • Luxembourg+352
    • Macau (澳門)+853
    • North Macedonia (Македонија)+389
    • Madagascar (Madagasikara)+261
    • Malawi+265
    • Malaysia+60
    • Maldives+960
    • Mali+223
    • Malta+356
    • Marshall Islands+692
    • Martinique+596
    • Mauritania (‫موريتانيا‬‎)+222
    • Mauritius (Moris)+230
    • Mayotte+262
    • Mexico (México)+52
    • Micronesia+691
    • Moldova (Republica Moldova)+373
    • Monaco+377
    • Mongolia (Монгол)+976
    • Montenegro (Crna Gora)+382
    • Montserrat+1
    • Morocco (‫المغرب‬‎)+212
    • Mozambique (Moçambique)+258
    • Myanmar (Burma) (မြန်မာ)+95
    • Namibia (Namibië)+264
    • Nauru+674
    • Nepal (नेपाल)+977
    • Netherlands (Nederland)+31
    • New Caledonia (Nouvelle-Calédonie)+687
    • New Zealand+64
    • Nicaragua+505
    • Niger (Nijar)+227
    • Nigeria+234
    • Niue+683
    • Norfolk Island+672
    • North Korea (조선 민주주의 인민 공화국)+850
    • Northern Mariana Islands+1
    • Norway (Norge)+47
    • Oman (‫عُمان‬‎)+968
    • Pakistan (‫پاکستان‬‎)+92
    • Palau+680
    • Palestine (‫فلسطين‬‎)+970
    • Panama (Panamá)+507
    • Papua New Guinea+675
    • Paraguay+595
    • Peru (Perú)+51
    • Philippines+63
    • Poland (Polska)+48
    • Portugal+351
    • Puerto Rico+1
    • Qatar (‫قطر‬‎)+974
    • Réunion (La Réunion)+262
    • Romania (România)+40
    • Russia (Россия)+7
    • Rwanda+250
    • Saint Barthélemy+590
    • Saint Helena+290
    • Saint Kitts and Nevis+1
    • Saint Lucia+1
    • Saint Martin (Saint-Martin (partie française))+590
    • Saint Pierre and Miquelon (Saint-Pierre-et-Miquelon)+508
    • Saint Vincent and the Grenadines+1
    • Samoa+685
    • San Marino+378
    • São Tomé and Príncipe (São Tomé e Príncipe)+239
    • Saudi Arabia (‫المملكة العربية السعودية‬‎)+966
    • Senegal (Sénégal)+221
    • Serbia (Србија)+381
    • Seychelles+248
    • Sierra Leone+232
    • Singapore+65
    • Sint Maarten+1
    • Slovakia (Slovensko)+421
    • Slovenia (Slovenija)+386
    • Solomon Islands+677
    • Somalia (Soomaaliya)+252
    • South Africa+27
    • South Korea (대한민국)+82
    • South Sudan (‫جنوب السودان‬‎)+211
    • Spain (España)+34
    • Sri Lanka (ශ්‍රී ලංකාව)+94
    • Sudan (‫السودان‬‎)+249
    • Suriname+597
    • Svalbard and Jan Mayen+47
    • Sweden (Sverige)+46
    • Switzerland (Schweiz)+41
    • Syria (‫سوريا‬‎)+963
    • Taiwan (台灣)+886
    • Tajikistan+992
    • Tanzania+255
    • Thailand (ไทย)+66
    • Timor-Leste+670
    • Togo+228
    • Tokelau+690
    • Tonga+676
    • Trinidad and Tobago+1
    • Tunisia (‫تونس‬‎)+216
    • Turkey (Türkiye)+90
    • Turkmenistan+993
    • Turks and Caicos Islands+1
    • Tuvalu+688
    • U.S. Virgin Islands+1
    • Uganda+256
    • Ukraine (Україна)+380
    • United Arab Emirates (‫الإمارات العربية المتحدة‬‎)+971
    • United Kingdom+44
    • United States+1
    • Uruguay+598
    • Uzbekistan (Oʻzbekiston)+998
    • Vanuatu+678
    • Vatican City (Città del Vaticano)+39
    • Venezuela+58
    • Vietnam (Việt Nam)+84
    • Wallis and Futuna (Wallis-et-Futuna)+681
    • Western Sahara (‫الصحراء الغربية‬‎)+212
    • Yemen (‫اليمن‬‎)+967
    • Zambia+260
    • Zimbabwe+263
    • Åland Islands+358
    loader
    Telegram Viber WhatsUp Email

    Приховати

    Ми отримали Вашу заявку
    Наш менеджер незабаром
    зв'яжеться з Вами.
    ОК

    Про курс

    Flexbox - це сучасний інструмент верстки, що дозволяє швидко створювати складні гнучкі макети та функції, спрощуючи вирішення завдань, для яких раніше ми використовували чистий CSS.

    Даний курс дозволить вам практично розглянути прийоми використання технології Flexbox. Ви познайомитеся із загальними поняттями та принципами логіки роботи технології, навчитеся застосовувати основні властивості, розгляньте способи взаємодії між елементами, побачите те, як можна комбінувати медіа запити з флексбоксом та багато іншого.

    Читати далі...

    Цей курс входить до спеціальності:

    Попередні Вимоги

    Базові знання верстки HTML & CSS. Бажано ознайомлення з технологією верстки FlexBox

    Читати далі...

    Ви навчитеся

    • Виконувати верстку хедера макету та меню в ньому.
    • Створювати просте меню на сайті за допомогою флексбокс технології.
    • Вміти використовувати властивості flex-grow та flex-shrink для створення «гумової» верстки.
    • Виконувати планшетну та мобільну версії простої сторінки без використання додаткових правил медіа запитів.
    • Розуміти функції властивостей align-items, flex-wrap, order, а також їх нюанси та переваги використання.
    • Працювати з додатковим потоком у flexbox, розміщуючи елементи у потрібній позиції.
    • Розуміти як, навіщо і коли потрібно змінити напрямок основного потоку.
    • Розміщувати багато рядкових блоків, незалежно від кількості, працюючи з флексбоксами.
    Читати далі...
    Завантажити матеріали курсу Для отримання матеріалів курсу необхідно авторизуватися
    Отримати сертифікат Для отримання сертифікату необхідно авторизуватися
    • Тривалість: 1 год 30 хв
    • Курс створено: 14.01.2020
    • Уроків: 5 з
    • Оновлено: 03.12.2020
    • Мова: російська

    Що входить до курсу

    • 5 відео уроків
    • Домашні завдання
    • Перевірка ДЗ
    Увійдіть або зареєструйтеся для того, щоб продовжити перегляд безкоштовного відео

    Технологія flexbox дозволяє створювати більш легко та правильніше розкладку елементів для вебсторінки на відміну від float-ів, Flexbox дозволяють з легкістю вирівнювати елементи по горизонталі та по вертикалі, змінювати напрямок та порядок відображення елементів, розтягувати блоки на всю висоту чи ширину, або прибивати їх до будь-якого краю батьківського елемента.

    Читати далі...

    Мета уроку - ознайомитися з основами технології flexbox, загальними поняттями та принципами логіки роботи технології flexbox, виробити розуміння того, як використовувати flexbox на практиці. Познайомитись із початковою простою структурою перед створенням лендіг (односторінкового) сайту та розібратися з тим, як виконувати перші кроки при верстці. Також розглянути створення простого меню на сайті з використанням флексбокс технології.

    Читати далі...

    Мета уроку - ознайомитися з основними властивостями, що використовуються на практиці, і отримати розуміння того, коли їх використовувати. Розібрати які є можливості у властивостей align-items, flex-wrap, order, а також їх нюанси та переваги використання.

    Читати далі...

    Мета уроку - розібрати як, навіщо і коли потрібно змінити напрямок основного потоку. Переглянути які аспекти з'являються при зміні потоку. Розглянути, якою стає поведінка у властивості margin з flexbox елементами, яким чином можна використовувати медіа запити при верстці макета, використовуючи flexbox технологію. Ознайомитися з властивістю flexdirection і як змінює свою поведінку властивість margin з використанням флексбоксів.

    Читати далі...

    Мета уроку - познайомитися з властивостями flex-grow і flex-shrink для створення гумової верстки. Ознайомитись із процесом завершення планшетної та мобільної версії простої сторінки без використання додаткових правил медіа запитів.

    Читати далі...
    ПОКАЗАТИ ВСЕ

    Купуй передплатуз доступом до всіх курсів та сервісів

    Бібліотека сучасних IT знань у зручному форматі

    Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

    Стартовий
    • Усі відеокурси на 3 місяці
    • Тестування з 10 курсів
    • Перевірка 5 домашніх завдань
    • Консультація з тренером 30 хв
    59.99 $
    Придбати
    Premium 15 міс
    • Усі відеокурси на 15 місяців
    • Тестування з 24 курсів
    • Перевірка 20 домашніх завдань
    • Консультація з тренером 120 хв
    100.00 $
    220.00 $
    Придбати
    Акція
    Базовий
    • Усі відеокурси на 6 місяців
    • Тестування з 16 курсів
    • Перевірка 10 домашніх завдань
    • Консультація з тренером 60 хв
    89.99 $
    Придбати
    коментарі та обговорення
    Notification success