The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Ласкаво просимо до другого дня Front-End'у. Сподіваємося, ти потроху опановуєш цей надзвичайно цікавий напрям.
Вчора ми працювали з основами HTML. Знаємо, тобі теж хочеться, щоб твоя сторінка виглядала значно привабливіше.
Саме в цьому нам допоможе CSS. Сьогодні розберемося, як його правильно додати, як обрати конкретні елементи для стилювання тощо. У цьому уроці ти також знайдеш нові корисні посилання — не нехтуй ними, дослідницький дух у програмуванні важить чимало!
Орієнтовний час на опрацювання теорії: 60-90 хвилин.
Орієнтовний час на виконання практики: 60-90 хвилин.
Завдання на тиждень
Усі чотири уроки ти працюватимеш над створенням свого першого вебсайту з зображеннями:
У першому уроці ми встановимо VScode та розберемось з першими кроками в HTML. На практиці створимо сайт-галерею для улюблених зображень (майже Інстаграм :)
У другому уроці розглянемо як за допомогою CSS додати кольорів і стилю нашому сайту;
У третьому уроці дізнаємось що таке Flexbox та як спростити життя з його допомогою;
У четвертому уроці ще трошки поговоримо про CSS та як за допомогою більш просунутих команд прокачати наш сайт.
Структура уроку
Теорія CSS
Де розміщувати CSS
Підказки
Практика
Виконане завдання
Теорія CSS
Почнімо зі вступного відео про CSS.
У відео до цього уроку ти ознайомишся з теоретичною базою та загальними поняттями. Зверни увагу, що приклади у відео є лише зразком застосування певного функціонала і не містять точних інструкцій для виконання домашніх завдань. Спершу розглянь, як працює певна технологія — і тоді буде зрозуміліше, як застосувати її до конкретного практичного завдання.
Переглянь відео:
Вступ до CSS
Learn CSS in 20 minutes
Де розміщувати CSS
Є три основні шляхи додання CSS до сайту. Ось перший з них:
Рекомендовано: імпортувати CSS-файл таким чином:
і написати CSS в окремому файлі.
Написати CSS у тезі <style> для <head>.
3. Не рекомендовано: Написати CSS в атрибуті style= цільового елемента.
Підказка 1
Надані нижче підказки ти можеш скопіювати у свій текстовий редактор і запустити у браузері (або у випадку таблиць стилів, під'єднати до свого HTML-документа і потім запустити). Поглянь, як працює цей блок коду і що можна взяти з його роботи для практичного завдання.
Проводячи тестовий запуск цього курсу минулого року, ми отримували типові запити від студентів. Відповіді на них ми зібрали в одному файлі. Можливо, запитання, на яке ти шукаєш відповідь, вже можна знайти ось тут.
Пам'ятай, що основне при виконанні домашнього завдання - це зрозуміти, наскільки тобі цікаво займатись цією спеціальністю та продовжувати розвиватись в подальшому. Щось не так з текстом/відео/посиланнями? - звернись до координатора курсу в телеграмі
