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

300+ курсів за популярними IT-напрямками

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

    Підписка
    Підписка

    300+ курсів за популярними IT-напрямками

    УКР
    • РУС
    • УКР

    ×

    Ви відкрили доступ до тесту! Пройти тест

    Ви дійсно бажаєте відкрити доступ до тестування за курсом HTML5 і CSS3 Базовий на 40 днів?

    ВІДЕОУРОК № 7. Ведення в CSS3

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

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

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

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

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

    На веб-сайтах часто розміщуються відеоматеріали, а на деяких веб-сайтах потрібні інструменти для відтворення звукових файлів. У HTML5 з'являється ряд елементів, за допомогою яких спрощується створення мультимедійних сторінок за допомогою аудіо або відео. Для цього уроку Вам знадобляться базові знання JavaScript для того, щоб контролювати відтворення мультимедійного контенту на HTML5 сторінці. Також Ви дізнаєтесь, як можна кодувати звук та відео різними кодеками для підтримки відтворення у різних браузерах. У другій частині уроку будуть розглянуті нові елементи форм, які дозволяють спростити створення сторінок реєстрації, авторизації та інших елементів взаємодії з користувачем.

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

    Мікродані – це новий підхід до створення додаткової описової інформації для HTML документа. За допомогою мікроданих ми можемо в HTML сторінці, крім самої структури документа, зберегти спеціальну інформацію, яка буде корисна пошуковим системам та іншим програмам, що аналізують документи. У цьому уроці Ви дізнаєтесь, як використовувати мікродані та словники мікроданих у HTML5. Друга частина уроку буде присвячена геолокації. Ви навчитеся створювати програми, які зможуть отримати координати користувача та визначити його поточне положення. Ви дізнаєтесь, як можна комбінувати Geolocation API та Google карти.

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

    Один з найпопулярніших і найвідоміших елементів HTML5 – це canvas. З використанням canvas вже написано багато бізнес-додатків і браузерних ігор. За допомогою canvas та JavaScript коду frontend розробник тепер може генерувати графіку на стороні клієнта. Canvas складний і дуже потужний елемент HTML5, на цьому уроці Ви побачите приклади роботи з графікою на стороні клієнта, навчитеся створювати анімацію і різні ефекти.

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

    На цьому уроці Ви дізнаєтеся про нові функції HTML5 для зберігання даних у браузері клієнта. Ви дізнаєтеся, що таке localStorage та sessionStorage. Побачте основні відмінності веб-сховищ від cookie-файлів. Цей урок також буде корисним для тих, хто хоче навчитися створювати сценарії JavaScript, що виконують складні обчислення. Друга частина уроку присвячена специфікації Web Worker. Ви навчитеся використовувати багатопоточне програмування JavaScript. Третя частина уроку буде присвячена створенню автономних програм, які можуть працювати без доступу до Інтернету. HTML5 Offline Application – це новий механізм, який дозволяє створити програми, близькі до звичайних настільних програм. І на цьому уроці Ви дізнаєтесь, як це робити.

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

    Будь-який FrontEnd розробник знає, що таке CSS, але не кожен вміє користуватись можливостями, які з'явилися у CSS3 – новій версії формальної мови визначення стилю документа. За допомогою декількох інструкцій тепер можна робити складні графічні ефекти, які раніше займали багато часу. На цьому уроці Ви дізнаєтеся про стан специфікації CSS3 і про те, в яких браузерах підтримується CSS3. Також ви дізнаєтеся про те, які нові селекторні функції були введені в CSS3, які зміни торкнулися властивостей, за допомогою яких задаються кольори, фонові зображення та рамки елементів.

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

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

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

    Псевдокласи – елементи CSS правил, за допомогою яких можна визначити оформлення елементів, які змінили свій стан через дії користувача чи інші причини. Наприклад, за допомогою псевдокласів ми можемо визначити стиль елемента, який буде застосований тільки в тому випадку, якщо користувач навів курсор на елемент. У CSS3 з'явилося багато псевдокласів, які дозволяють легко оформляти документ. На цьому уроці ви дізнаєтеся про всі псевдокласи, описані в новій специфікації, а також дізнаєтеся, як можна створювати градієнти в CSS і як змусити старі браузери відображати ефекти CSS.

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

    Анімація - одне із завдань, які зазвичай вирішуються за допомогою JavaScript бібліотек. На цьому уроці будуть розглянуті властивості, які дозволяють без застосування додаткового коду за допомогою лише одного CSS створити анімаційні ефекти. На цьому уроці будуть розглянуті два можливі способи анімації – через властивість transition та через властивість animation. Також Ви дізнаєтесь про те, як працюють трансформації в CSS. Ви навчитеся використовувати трансформації translate, rotate, scale, skew і навіть трансформувати об'єкти у тривимірному просторі, створюючи цікаві ефекти для сторінок.

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

    Синтаксис CSS має багато недоліків – розробник не може створювати змінні, створювати блоки стилів та повторно їх використовувати як звичайні функції, використовувати арифметичні операції у стилях. Усі перелічені вище недоліки можна прибрати, застосувавши бібліотеку LESS для додавання до CSS додаткової динаміки. На цьому уроці Ви дізнаєтесь, як підключити LESS та вивчіть основні можливості цієї бібліотеки. На другій частині уроку буде розглянуто поняття адаптивного дизайну на прикладі невеликої веб-сторінки, яка буде адаптуватися під розміри браузера для того, щоб коректно відображатись на будь-якому пристрої – персональному комп'ютері, планшеті чи мобільному телефоні.

    Читати далі...
    ПОКАЗАТИ ВСЕ
    основні теми, що розглядаються на уроці
    0:00:58
    Чем CSS3 отличается от пре...
    0:03:13
    Освежим знания по CSS
    0:11:36
    Плагин Web Essentials
    0:16:48
    Некоторые селекторы CSS2 и...
    0:17:39
    Пример селектора вида E > F
    0:19:29
    Пример селектора вида E + F
    0:20:31
    Пример селектора вида E ~ F
    0:22:19
    Пример селекторов вида E[f...
    0:26:19
    Свойство "background-size"....
    0:30:51
    Работа с несколькими фонами
    0:32:28
    Свойство "background-origin...
    0:34:33
    Где посмотреть какими брауз...
    0:35:13
    Цветовые модели. Примеры
    0:40:34
    Свойство "border-radius". З...
    0:45:05
    Свойство "border-image". Гр...
    0:48:52
    Свойство "box-shadow". Тени
    0:51:45
    Позиционирование блочных эл...
    0:53:10
    Позиционирование блочных эл...
    0:54:46
    Свойство "box-ordinal-group...
    0:55:58
    Свойство "box-flex", родите...
    0:57:58
    Свойство "box-align", родит...
    0:59:28
    Свойство "box-direction" и...
    1:00:12
    Свойство "box-pack" и "disp...
    1:01:36
    Нюанс с размером блока, сво...
    1:04:09
    Небольшой пример верстки сайта
    ПОКАЗАТИ ВСЕ
    Титри відеоуроку
    Титрів до цього уроку не передбачено

    Відгуки наших студентів

    DOU

    Відгуки в DOU

    4,9/5 - 195 відгуків

    Володимир Бурцев
    Володимир Бурцев
    5/5
    Я вже не новачок у розробці. Проте вивчав Java, а працювати почав на іншій мові. Багато чого важливого і навіть базового позабував, а тут за допомогою ретельного проходження по всім пунктам і аспектам згадую все що потрібно і не висмикуючи з контексту, а послідовно щоби нічого не пропустити. Тут дуже багато окремих гілок за обраним напрямком. Був би час 🙂 PS записи трошки вкрилось пилом і часто зустрічаю помилки/обмовки, але в цілому на якість це не впливає. РАДЖУ!
    Почитати оригінал
    Facebook

    Відгуки в Facebook

    5,0/5 - 704 відгуки

    Оксана Лучко
    Оксана Лучко
    5/5
    Отличная подача материала, все подробно объясняется, приводятся примеры. Очень понравился курс 'c#базовый'. Буду продолжать обучение!
    Почитати оригінал
    Google

    Відгуки в Google

    4,9/5 - 814 відгуки

    Валерий Бахно
    Валерий Бахно
    5/5
    На ITVDN проходил уже более 10 курсов - очень хорошие лектора и подача материала! Доступные и понятные курсы за лояльную стоимость) Курс 'Создание приложений с помощью Spring Data' проходил для себя ознакомительно, узнал много нового и полезного - курс хорошо структурирован, много наглядности, работы с кодом, остался доволен! ITVDN, спасибо!!!
    Почитати оригінал
    Студенти також дивляться
    HTML5 & CSS3 Поглибленний
    ДЕТАЛЬНІШЕ
    HTML5 та CSS3 Стартовий (2018)
    ДЕТАЛЬНІШЕ

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

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

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

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

    Запитання і відповіді

    У чому перевага онлайн курсів програмування у порівнянні з офлайн?
    Яка вартість навчання?
    Скільки часу знадобиться, щоб опанувати програмування?
    Скільки часу знадобиться, щоб опанувати ІТ-спеціальність?
    З якого курсу розпочинати навчання?
    Як керувати своїм часом та організувати ефективне онлайн-навчання з тренером?
    Чи є у вас допомога з працевлаштуванням після закінчення навчання?
    Чи можливе персональне навчання з тренером ITVDN?
    З якого віку можна навчатися на платформі?
    Чи потрібні знання англійської мови для навчання?Чи потрібні знання англійської мови для навчання?
    Якого рівня можна досягти, пройшовши навчання зі спеціальності?
    Коли закінчиться підписка, що далі? Доступу до уроків не буде?
    Чи додаються знижки на придбання підписки?
    У чому перевага онлайн курсів програмування у порівнянні з офлайн?

    Онлайн курси мають низку переваг перед офлайн форматом:

    1. Незалежність від локації. Онлайн дозволяє навчатися де завгодно.
    2. Збереження часу та грошей на дорогу. Ви економите час та гроші з поїздок на курси та назад.
    3. Онлайн курси дешевші. Немає потреби в приміщенні та ноутбуках для студентів, тому вартість нижча
    4. Комфортний темп навчання, постійний доступ до інформації. Навчання у вашому темпі будь-коли і будь-де 24/7. Також є доступ до записаних уроків, чого немає в офлайн форматі.
    Яка вартість навчання?

    На ITVDN є 2 формати навчання: Live Online та відео курси. Ціна навчання залежить від обраного вами способу навчання.

    Якщо ви хочете навчатися самостійно у форматі відео курсів, вартість навчання складе в середньому 10-15 USD на місяць в залежності від обраного вами пакету підписки.

    Live Online – це онлайн навчання з тренером у групах разом із іншими студентами. Навчання у даному форматі коштує в середньому 6-7 USD за одну годину.

    Скільки часу знадобиться, щоб опанувати програмування?

    Залежить від того, скільки уваги програмуванню ви виділятимете щоденно, яка саме це мова і який у вас досвід кодингу. Середній час на опанування однієї мови за умови регулярних занять хоча б 2 год/день:

    • новачки – від 3 до 6 місяців;
    • ті, хто мають базові знання з іншої мови – від 1 до 3 місяців;
    • професійні програмісти – до 1 місяця.

    Найкращий варіант інвестиції часу – 8 годин щоденно (20% теорії + 80% практики). Більше практики – швидше опанування програмування.

    Скільки часу знадобиться, щоб опанувати ІТ-спеціальність?

    Для опанування ІТ-спеціальності треба виділити не менше 500 годин, з яких близько 100 годин – на перегляд відео уроків або відвідування онлайн занять із ментором, а 400 – на виконання практичних завдань за пройденими темами.

    В залежності від того, скільки часу ви готові виділяти на навчання в день, ви зможете пройти програму за 3-8 місяців. Якщо у вас є певна база знань з ІТ, кількість необхідного часу буде меншою.

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

    З якого курсу розпочинати навчання?

    Починати варто з тих, які містять в назві слово “Стартовий”. Такі курси мають вступний матеріал для знайомства з мовою або технологією.

    Якщо ж ви плануєте навчатися за конкретною спеціальністю у форматі відео курсів, перейдіть на сторінку спеціальності і прокрутіть до заголовку “Відео курси за спеціальністю …”. Нижче буде список відео курсів, котрі відсортовано в порядку необхідності вивчення.

    Ще нижче ви знайдете Roadmap зі спеціальності – путівник, на якому зображені відео курси у вигляді дерева, що також вас легко зорієнтує у послідовності проходження курсів.

    Як керувати своїм часом та організувати ефективне онлайн-навчання з тренером?

    Якщо ви обираєте Live Online навчання з тренером, все дуже просто:

    • відвідуйте всі заняття, вчасно виконуйте д/з;
    • додатково дивіться відео уроки на ITVDN;
    • після кожного уроку проходьте коротке тестування;
    • практикуйтеся в Інтерактивному практикумі;
    • спілкуйтеся з одногрупниками в ході вирішення д/з, задавайте питання ментору на уроках та поза ними;
    • в кінці кожного курсу складайте екзамен на TestProvider (та отримуйте Сертифікати);
    • в кінці всього навчання проходьте екзамен зі спеціальності і отримайте Диплом.
    Чи є у вас допомога з працевлаштуванням після закінчення навчання?

    Ми маємо спеціальний розділ – “Вакансії”, котрий допомагає нашим студентам шукати першу роботу в ІТ. Детальніше про можливості та призначення розділу за посиланням.

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

    Чи можливе персональне навчання з тренером ITVDN?

    На жаль, дана послуга на ITVDN не передбачена, однак ви можете замовити індивідуальну консультацію з нашим ментором. Деталі ви знайдете за посиланням.

    З якого віку можна навчатися на платформі?

    На ITVDN відсутні курси для дітей, тому комфортний вік для початку навчання за нашими матеріалами – від 14 років.

    Чи потрібні знання англійської мови для навчання?Чи потрібні знання англійської мови для навчання?

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

    Якого рівня можна досягти, пройшовши навчання зі спеціальності?

    На ITVDN можна пройти повне навчання з нуля до спеціаліста рівня Trainee/Junior. Якщо ви вже практикуючий розробник, наші відео курси допоможуть поглибити ваші знання до рівня Middle.

    Коли закінчиться підписка, що далі? Доступу до уроків не буде?

    Після закінчення дії вашої підписки доступ до відео курсів, на жаль, буде закрито. Однак ви зможете користуватися тими навчальними матеріалами, які ви завантажили на свій девайс під час навчання.

    Чи додаються знижки на придбання підписки?

    Ні, знижки не додаються.

    Notification success