Podstawy układu treści - kurs 3900 RUB. z Hexlet, szkolenie 18 godz., data: 1 grudnia 2023 r.
Miscellanea / / December 04, 2023
Obecnie arkusze stylów zapewniają ogromne możliwości stylizowania tekstu i bloków na stronie: tła, koloru, wykorzystania audio i wideo. Wszystkie te elementy pozwalają na tworzenie kolorowych i przystępnych dla użytkowników witryn. Dużo czasu poświęcono na naukę nowych selektorów, pseudoklas i pseudoelementów. Pozwalają na stylizację treści w nietuzinkowy sposób.
Testy
Są to zadania praktyczne, które zalecamy wykonać po ukończeniu kursu. Zadania pomogą Ci zdobyć dodatkowe doświadczenie w programowaniu i utrwalić nabyte umiejętności. Zazwyczaj zalecamy wykonanie 3-5 testów. Ale jeśli to nie zadziała, nie rozpaczaj. Po prostu wróć do nich później.
1. Wstęp
Praca z treścią jest podstawową częścią tworzenia projektu. Za pięknymi animacjami, blokami i obrazkami kryje się treść. Użytkownik wchodzi na stronę lub otwiera dla niej aplikację. W tej lekcji krótko omówimy tematy, które będą omawiane w trakcie kursu.
teoria
2. Model pudełkowy i CSS
Jakie właściwości CSS wpływają na rozmiar elementów wyświetlanych na stronie? Zapamiętajmy koncepcję modelu pudełkowego i przeanalizujmy, jak działają właściwości marginesu, dopełnienia i obramowania, aby ustawić zewnętrzne/wewnętrzne dopełnienie i widoczne krawędzie elementu. Zapoznajmy się z właściwością box-sizing, która zmienia standardowe zachowanie modelu pudełkowego
teoria
3. Style tekstu
Tworzenie strony to przede wszystkim praca z tekstem. Nieważne jak piękny jest projekt, jeśli informacja jest trudna lub niemożliwa do odczytania, użytkownik szybko opuści stronę. Na tej lekcji zapoznamy się z podstawowymi właściwościami stylizacji tekstu.
teoria
testy
ćwiczenia
4. Czcionki i praca z nimi
Czy słyszałeś wyrażenie „baw się czcionkami”? Czas to zrobić. Uczymy się łączyć czcionki za pomocą CSS, kontrolować wielkość tekstu, wygląd i ustawiać odstępy między wierszami. Pod koniec lekcji przestudiujemy uogólnioną właściwość czcionki, dzięki której możesz ustawić 6 różnych stylów tekstu jednocześnie
teoria
testy
ćwiczenia
5. Listy
Listy są integralną częścią tekstu. Pozwalają grupować powiązane ze sobą fragmenty, łącząc je według ich znaczenia. Na tej lekcji omówimy dostępne typy list w HTML, przećwiczymy zagnieżdżanie list i poruszymy temat stylizowania znaczników list
teoria
testy
ćwiczenia
6. Kolumny
Tworzenie wielokolumnowego układu magazynu przy użyciu CSS było problematyczne. Wraz z pojawieniem się standardu CSS3 pojawił się nowy moduł - CSS Multi-column Layout, który umożliwił tworzenie kolumn z automatycznym przesyłaniem treści. Przyjrzyjmy się możliwościom modułu CSS Columns i ograniczeniom, jakie narzuca ta metoda stylizacji tekstu
teoria
testy
ćwiczenia
7. Jednostki
Podobnie jak w świecie rzeczywistym, świat układu używa jednostek miary do wskazywania rozmiarów elementów, dopełnienia, rozmiaru tekstu i tak dalej. Na tej lekcji zapoznamy się z podstawowymi jednostkami miary i ich związkiem z elementami na budowie. Przeanalizujmy koncepcję jednostek względnych i absolutnych i zidentyfikujmy różnicę między jednostkami em i rem
teoria
testy
ćwiczenia
8. Elementy multimedialne
Odwiedzający strony internetowe lubią nie tylko czytać tekst, ale także odbierać informacje poprzez elementy medialne: obrazy, wideo, audio. Jak je poprawnie dodać i uwzględnić różnice w przeglądarkach? Dlaczego obraz na stronie ma małe wcięcie u dołu? Przyjrzyjmy się temu i nieco więcej podczas lekcji.
teoria
testy
ćwiczenia
9. Stoły
Tabele to koszmar projektanta układu. Do ich tworzenia wykorzystuje się mnóstwo tagów, a drobne błędy potrafią zrujnować nastrój. Na tej lekcji krok po kroku będziemy uczyć się tworzenia prostych i złożonych tabel, zrozumiemy, skąd mogą wynikać błędy i jak im zapobiegać. Pod koniec lekcji będziesz mógł śmiało tworzyć tabele i przestać się ich bać.
teoria
testy
ćwiczenia
10. Formularze
Formularze są ważnym interaktywnym elementem strony internetowej. Podobnie jak linki, formularze zapewniają interakcję pomiędzy użytkownikiem a stroną, umożliwiając przesyłanie danych. Nauczmy się tworzyć formularze, dodawać pola tekstowe, pola wyboru, listy i przyciski. Poruszmy temat dostępności formularzy dla osób niepełnosprawnych
teoria
testy
ćwiczenia
11. Selektory
Na potrzeby tej lekcji poznaliśmy i przetestowaliśmy proste selektory, które pozwoliły nam wybierać elementy według klasy, identyfikatora lub znacznika. Jak inaczej zaznaczyć element na stronie? Na tej lekcji przeanalizujemy selektory powiązane i sąsiednie, nauczymy się używać selektorów według atrybutów
teoria
testy
ćwiczenia
12. Pseudoklasy
Kontynuujmy temat selektorów w CSS i zapoznajmy się z koncepcją pseudoklasy. Nauczmy się, jak ich używać do wybierania elementów parzystych lub nieparzystych, jak dodawać nowe style najechania kursorem najedź myszką na element i dlaczego nawet elementy będą takie, gdy użyjesz tylko pewnego pseudoklasa. Przyjrzyjmy się stanom elementów i pseudoklasom strukturalnym
teoria
testy
ćwiczenia
13. Pseudoelementy
Brakuje elementów na stronie? Na ratunek przychodzą pseudoelementy – elementy stworzone za pomocą CSS. Na tej lekcji przyjrzymy się, jak tworzone są pseudoelementy, do czego są potrzebne i jakie mają cechy. Zobaczmy, jak znaczniki list są stylizowane w CSS
teoria
testy
14. Przelewowy
Przepełnienie to sytuacja, w której zawartość wewnątrz kontenera jest większa niż wielkość samego kontenera. Taka sytuacja może zepsuć układ nawet doświadczonemu projektantowi układu. W tej lekcji dowiemy się, co z tym zrobić i jak zarządzać ukrywaniem treści za pomocą właściwości overflow. Przyjrzyjmy się właściwości przepełnienia tekstu i dowiedzmy się, jak dodać wielokropek w tekstach, jeśli nie ma na to wystarczającej ilości miejsca
teoria
testy
ćwiczenia
15. Zmienne CSS
Wyobraź sobie, że na stronie internetowej znajduje się kilkanaście bloków z tłem tego samego koloru. Musisz zmienić wszystkie te kolory. Jak to zrobić bez ciągłego zmieniania koloru w każdym selektorze i jak zmienne mogą w tym pomóc, dowiemy się w tej lekcji. Przyjrzyjmy się, jak zmienne są tworzone i używane, dowiedzmy się o zakresie i dlaczego zmienne globalne są lepsze niż zmienne zależne od selektora
teoria
testy
16. Tło
Projektant układu dość często staje przed koniecznością stylizowania nie tylko konkretnych elementów, takich jak tabele, listy, tekst, elementy multimedialne czy formularze. Czasami trzeba także wystylizować klocki, w których się znajdują. Aby to zrobić, możesz ustawić tło dla bloku z treścią, a my dowiemy się, jak to zrobić, korzystając z właściwości tła w tej lekcji. Przeanalizujmy właściwości ustawiania koloru, obrazu, dowiedzmy się, jak ustawić tło i ustawić jego rozmiar
teoria
testy
17. Gradienty
Jednokolorowe tło lub obraz to nie jedyny sposób na stylizację bloku. Artyści i projektanci często używają gradientów do tworzenia tła — płynnych przejść między kolorami. W tym samouczku nauczymy się tworzyć gradienty liniowe i promieniowe. Korzystając z gradientów i trików, będziemy badać tworzenie ostrych przejść między kolorami, a także dowiemy się o kole kolorów i o tym, jak za jego pomocą znaleźć kombinacje kolorów dla gradientów
teoria
ćwiczenia
18. Niezależna praca
Zadania dodatkowe, które pozwalają utrwalić zdobytą teorię
19. Dodatkowe materiały
Artykuły i filmy przygotowane przez zespół Hexlet. Pomoże Ci zgłębić tematykę kursu