Moduł 03 – Responsywność
Moduł ten skupia się na tworzeniu responsywnych stron internetowych, które doskonale wyglądają i działają na różnych urządzeniach, w tym na smartfonach i tabletach. Uczestnicy kursu poznają techniki dostosowywania układu, obrazów, wideo i innych elementów do różnych rozmiarów ekranów za pomocą CSS i media queries.
📚 Zawartość modułu
Moduł "Responsywność" jest podzielony na 16 lekcji:
- Wstęp: Wprowadzenie do modułu i omówienie znaczenia responsywności w projektowaniu stron internetowych.
- Co to responsywność: Wyjaśnienie pojęcia responsywności i dlaczego jest ważne w dzisiejszych czasach.
- Viewport: Omówienie viewportu w kontekście responsywności i jego roli w wyświetlaniu stron na różnych urządzeniach.
- White gap: Wyjaśnienie problemu "białych przerw" między elementami na urządzeniach mobilnych i sposobów radzenia sobie z nim.
- Object-fit: Przedstawienie właściwości CSS object-fit i jej zastosowania w dostosowywaniu obrazów i elementów multimedialnych do różnych ekranów.
- Srcset: Omówienie atrybutu srcset w HTML i jego roli w dostosowywaniu obrazów do różnych rozdzielczości ekranów.
- Proporcje: Wyjaśnienie stosowania proporcji w CSS do zapewnienia odpowiedniego układu i wyglądu elementów na różnych urządzeniach.
- Responsywne wideo: Przedstawienie technik dostosowywania odtwarzanych wideo do różnych ekranów i urządzeń.
- Media queries — types: Wprowadzenie do media queries w CSS i omówienie różnych typów mediów, na które można reagować.
- Media queries - min-width: Wyjaśnienie użycia media queries w celu reagowania na minimalną szerokość ekranu i dostosowywania stylów.
- Media queries - max-width: Omówienie użycia media queries w celu reagowania na maksymalną szerokość ekranu i dostosowywania stylów.
- Layout kolumnowy: Przedstawienie techniki układania stron w kolumny i dostosowywania ich do różnych urządzeń.
- Layout kolumnowy klasami CSS: Omówienie tworzenia responsywnego układu kolumnowego za pomocą klas CSS.
- Flexbox grid: Wyjaśnienie wykorzystania flexboxa do tworzenia responsywnych siatek i układów na stronie.
- Układy naprzemienne: Przedstawienie techniki układania elementów w układy naprzemienne i dostosowywanie ich do różnych urządzeń.
- Projekt: Praca nad projektem, który obejmuje implementację responsywności na stronie internetowej.
👀 Zobacz przykładową lekcję z tej części kursu:
👨💻 Zobacz przykładowy kod z tej części kursu:
💸 Kup kurs
Kup cały kurs CodeRoad – TUTAJ
Kup ten moduł kursu – TUTAJ