Основи на оформлението на съдържанието - курс 3900 рубли. от Hexlet, обучение 18 часа, Дата: 1 декември 2023 г.
разни / / December 04, 2023
Днес стиловите таблици предоставят големи възможности за стилизиране на текст и блокове на страница: фон, цвят, използване на аудио и видео. Всички тези елементи ви позволяват да създавате цветни и достъпни сайтове за потребителите. Беше отделено много време за изучаване на нови селектори, псевдо-класове и псевдо-елементи. Те ви позволяват да стилизирате съдържанието по необикновен начин.
Тестове
Това са практически задачи, които препоръчваме да изпълните след завършване на курса. Задачите ще ви помогнат да придобиете допълнителен опит в програмирането и да затвърдите придобитите умения. Обикновено препоръчваме да попълните 3-5 теста. Но ако не се получи, не се отчайвайте. Просто се върнете при тях по-късно.
1. Въведение
Работата със съдържание е основна част при създаването на проект. Има съдържание, скрито зад красиви анимации, блокове и снимки. Потребителят влиза в сайта или отваря приложение за него. В този урок ще разгледаме накратко темите, които ще се изучават в курса.
теория
2. Модел на кутия и CSS
Какви свойства на CSS влияят върху размера на елементите, когато се показват на страницата? Нека си припомним концепцията на модела на кутията и да проучим как работят свойствата на margin, padding и border, за да зададем външна/вътрешна подложка и видими граници на елемент. Нека се запознаем със свойството box-sizing, което променя стандартното поведение на модела box
теория
3. Текстови стилове
Създаването на страница е преди всичко работа с текст. Без значение колко красив е дизайнът, ако информацията е трудна или невъзможна за четене, потребителят бързо ще напусне страницата. В този урок ще се запознаем с основните свойства на текстовия стил.
теория
тестове
упражнение
4. Шрифтове и работа с тях
Чували ли сте израза „играйте си с шрифтове“? Време е да направите това. Научаваме се да свързваме шрифтове с помощта на CSS, да контролираме размера на текста, дизайна и да задаваме разстояние между редовете. В края на урока ще проучим обобщеното свойство на шрифта, с което можете да зададете 6 различни стила на текст наведнъж
теория
тестове
упражнение
5. Списъци
Списъците са неразделна част от текста. Те ви позволяват да групирате свързани фрагменти, обединявайки ги според значението им. В този урок ще проучим наличните типове списъци в HTML, ще практикуваме влагане на списъци и ще се докоснем до темата за стилизирането на маркерите на списъци
теория
тестове
упражнение
6. Колони
Създаването на оформление на списание с няколко колони беше проблематично с помощта на CSS. С появата на стандарта CSS3 се появи нов модул - CSS Multi-column Layout, който направи възможно създаването на колони с автоматично прехвърляне на съдържание. Нека проучим възможностите на модула CSS Columns и ограниченията, които се налагат с този метод за стилизиране на текст
теория
тестове
упражнение
7. Единици
Точно както в реалния свят, светът на оформлението използва мерни единици, за да посочи размерите на елементите, подложките, размера на текста и т.н. В този урок ще се запознаем с основните мерни единици и връзката им с елементите на сайта. Нека изучим концепцията за относителни и абсолютни единици и да идентифицираме разликата между em и rem единици
теория
тестове
упражнение
8. Медийни елементи
Посетителите на уебсайта не само обичат да четат текст, но и възприемат информация чрез медийни елементи: изображения, видео, аудио. Как да ги добавите правилно и да вземете предвид разликите в браузъра? Защо изображението в сайта има малък отстъп в долната част? Нека проучим това и още малко в урока.
теория
тестове
упражнение
9. Маси
Масите са кошмарът на дизайнера. За създаването им се използват много тагове, а дребните грешки могат да развалят настроението. В този урок стъпка по стъпка ще изучаваме създаването на прости и сложни таблици, ще разберем откъде могат да възникнат грешки и как да ги предотвратим. До края на урока ще можете уверено да създавате таблици и да спрете да се страхувате от тях.
теория
тестове
упражнение
10. Форми
Формулярите са важен интерактивен елемент на уеб страница. Подобно на връзките, формулярите осигуряват взаимодействие между потребителя и страницата, което ви позволява да изпращате данни. Нека научим как да създаваме формуляри, да добавяме текстови полета, полета за избор, списъци и бутони. Нека да се докоснем до темата за достъпността на формулярите за хора с увреждания
теория
тестове
упражнение
11. Селектори
За този урок научихме и тествахме прости селектори, които ни позволиха да избираме елементи по клас, идентификатор или етикет. Как иначе можете да изберете елемент на страницата? В този урок ще анализираме свързани и съседни селектори, ще научим как да използваме селектори по атрибут
теория
тестове
упражнение
12. Псевдокласове
Нека продължим темата за селекторите в CSS и да се запознаем с концепцията за псевдоклас. Нека научим как да ги използваме, за да избираме четни или нечетни елементи, как да добавяме нови стилове при задържане мишката върху елемент и защо четните елементи ще бъдат такива, когато използвате само определен псевдокласа. Нека разберем състоянията на елементите и структурните псевдокласове
теория
тестове
упражнение
13. Псевдоелементи
Липсващи елементи на страницата? На помощ идват псевдоелементите – елементи, създадени с помощта на CSS. В този урок ще разгледаме как се създават псевдоелементите, защо са необходими и какви функции имат. Нека да видим как списъчните маркери са стилизирани в CSS
теория
тестове
14. препълване
Препълването е ситуация, при която съдържанието вътре в контейнер е по-голямо от размера на самия контейнер. Тази ситуация може да развали оформлението дори за опитен дизайнер на оформление. Ще научим какво да правим с това и как да управляваме скриването на съдържание с помощта на свойството overflow в този урок. Нека да разгледаме свойството text-overflow и да научим как да добавяме многоточие в текстове, ако няма достатъчно място за това
теория
тестове
упражнение
15. CSS променливи
Представете си, че на уебсайт има дузина блокове с фон от един и същи цвят. Трябва да промените всички тези цветове. Как да направите това, без постоянно да замествате цвета във всеки селектор и как променливите могат да помогнат, ще научим в този урок. Нека да разгледаме как се създават и използват променливите, да научим за обхвата и защо глобалните променливи са по-добри от променливите за всеки селектор
теория
тестове
16. Заден план
Дизайнерът на оформление доста често се сблъсква с необходимостта да стилизира не само конкретни елементи, като таблици, списъци, текст, медийни елементи и формуляри. Понякога също трябва да стилизирате блоковете, в които се намират. За да направите това, можете да зададете фона за блока със съдържание и ние ще научим как да направите това с помощта на свойството background в този урок. Нека да проучим свойствата за задаване на цвят, изображение, да научим как да позиционираме фона и да зададем неговия размер
теория
тестове
17. Градиенти
Едноцветният фон или изображение не е единственият начин за стилизиране на блок. Художниците и дизайнерите често използват градиенти за създаване на фонове - плавни преходи от един цвят към друг. В този урок ще научим как да създаваме линейни и радиални градиенти. Използвайки градиенти и трикове, ще изучаваме създаването на резки преходи между цветовете, а също така ще научим за цветното колело и как с негова помощ да намираме цветови комбинации за градиенти
теория
упражнение
18. Самостоятелна работа
Допълнителни задачи, които ви позволяват да консолидирате придобитата теория
19. Допълнителни материали
Статии и видеоклипове, курирани от екипа на Hexlet. Ще ви помогне да се потопите по-дълбоко в темата на курса