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:

1. Wstęp: Wprowadzenie do modułu i omówienie znaczenia responsywności w projektowaniu stron internetowych.
2. Co to responsywność: Wyjaśnienie pojęcia responsywności i dlaczego jest ważne w dzisiejszych czasach.
3. Viewport: Omówienie viewportu w kontekście responsywności i jego roli w wyświetlaniu stron na różnych urządzeniach.
4. White gap: Wyjaśnienie problemu "białych przerw" między elementami na urządzeniach mobilnych i sposobów radzenia sobie z nim.
5. 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.
6. Srcset: Omówienie atrybutu srcset w HTML i jego roli w dostosowywaniu obrazów do różnych rozdzielczości ekranów.
7. Proporcje: Wyjaśnienie stosowania proporcji w CSS do zapewnienia odpowiedniego układu i wyglądu elementów na różnych urządzeniach.
8. Responsywne wideo: Przedstawienie technik dostosowywania odtwarzanych wideo do różnych ekranów i urządzeń.
9. Media queries — types: Wprowadzenie do media queries w CSS i omówienie różnych typów mediów, na które można reagować.
10. Media queries - min-width: Wyjaśnienie użycia media queries w celu reagowania na minimalną szerokość ekranu i dostosowywania stylów.
11. Media queries - max-width: Omówienie użycia media queries w celu reagowania na maksymalną szerokość ekranu i dostosowywania stylów.
12. Layout kolumnowy: Przedstawienie techniki układania stron w kolumny i dostosowywania ich do różnych urządzeń.
13. Layout kolumnowy klasami CSS: Omówienie tworzenia responsywnego układu kolumnowego za pomocą klas CSS.
14. Flexbox grid: Wyjaśnienie wykorzystania flexboxa do tworzenia responsywnych siatek i układów na stronie.
15. Układy naprzemienne: Przedstawienie techniki układania elementów w układy naprzemienne i dostosowywanie ich do różnych urządzeń.
16. 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

💪 Odbierz bezpłatny kurs!