LESS та адаптивний дизайн
ITVDN: курси програмування
Відеокурси з
програмування

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

    Підписка

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

    Підписка

      ×

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

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

      ВІДЕОУРОК № 11. LESS та адаптивний дизайн

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

      На цьому курсі Ви познайомитеся з новими можливостями 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:14
      Немного о возможностях LESS
      0:01:34
      Неудобства CSS
      0:08:17
      Подключение LESS
      0:12:03
      Переменные
      0:17:20
      Mixin
      0:23:58
      Операции для работы с цветом
      0:25:09
      Вложенные правила
      0:27:44
      Использование псевдоклассов
      0:28:47
      Пример. Рекомендуется повторить самостоятельно
      0:37:54
      Кратко о том как сделать адаптивный дизайн
      0:40:03
      Media Queries. Пример №1
      0:43:17
      Пару советов о виде сайта с разным разрешением экрана
      0:46:01
      Media Queries. Пример №2
      0:51:52
      Фреймворк Skeleton
      ПОКАЗАТИ ВСЕ
      Титри відеоуроку
      Титрів до цього уроку не передбачено
      Студенти також дивляться
      HTML5 & CSS3 Поглибленний
      ДЕТАЛЬНІШЕ
      HTML5 та CSS3 Стартовий (2018)
      ДЕТАЛЬНІШЕ

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

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

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

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      59.99 $
      Придбати
      Преміум Plus
      • Усі відеокурси на 12 місяців
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      100.00 $
      199.99 $
      Придбати
      Акція
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      89.99 $
      Придбати
      коментарі та обговорення
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.