Układ stron internetowych z wykorzystaniem CSS Grid, Flexbox i innych nowoczesnych technik
A course by Javier Usobiaga Ferrerprojektant stron internetowych
A course by Javier Usobiaga Ferrer, projektant stron internetowych
Odkryj nowe siatki i inne sposoby projektowania stron internetowych za pomocą CSS Shapes, zmiennych i efektów parallax
Sieć żyje w ciągłych zmianach, a wraz z pojawieniem się CSS Grid i Flexbox zasady gry ponownie się zmieniły. Javier Usobiaga – web designer, FrontEnd developer i współzałożyciel studia Swwweet – ma 13 lat doświadczenia w tworzeniu różnorodnych projektów dla klientów takich jak Barcelona City Council, a swoim bogatym doświadczeniem zaprasza do odkrywania najnowocześniejszych technik i narzędzi które rewolucjonizują sektor.
Jeśli w trakcie Wprowadzenie do Responsive Web Development z HTML i CSS , zacząłeś już w świecie responsywnej sieci, w tym poznasz różne zaawansowane techniki z narzędziami takimi jak CSS Grid, Flexbox, CSS Shapes, jednostki widoku, zmienne CSS, przekształcenia 3D czy paralaksy efekty .
Czego nauczysz się na tym kursie online?
llekcji: 25 & liczba dodatkowych zasobów: 16
Jednostki obserwacyjne
4 min, 40 sek.
Obrazy z dopasowaniem do obiektu
4 min, 44 sek.
Kolumny CSS
3 min, 1 sekunda
Kształty CSS
7 min, 5 sek.
Zmienne w CSS
4 min, 11 sek.
Wprowadzenie do flexboxa
3 min, 12 sek.
Co obejmuje ten kurs?
Pierwsze, co zrobisz, to poznanie Javiera Usobiagi, jego kariery zawodowej i najwybitniejszych projektów.
Zaczniesz się uczyć, jak kształtować układ za pomocą jednostek w stosunku do jednostek rzutni, właściwości dopasowanie obiektu i jak rozmieszczać tekst w kolumnach z kolumnami CSS. Zobaczysz, jak kształty internetowe mogą przestać być prostokątne dzięki clip-path i kształtom CSS, a także nauczysz się optymalizować kod za pomocą niestandardowych właściwości zmiennych natywnych.
Odkryjesz rewolucję, jaką przyniósł Flexbox w świecie layoutu stron internetowych . Javier nauczy Cię wszystkich możliwości dopasowywania elementów. W tym celu wyjaśni właściwości kontenera i zawartości oraz możliwości wyrównania z osią główną, osią skrzyżowaną i osiami alternatywnymi.
Będziesz nadal odkrywać nowe zasady gry z CSS Grid, całkowicie zmieniając sposób, w jaki ustrukturyzujesz swój kod i ustawisz układ __ . Poznasz niektóre funkcje siatki, właściwości rozkładu i rozmiaru oraz sposób tworzenia siatki, która dostosowuje się do różnych rozmiarów ekranu za pomocą funkcji repeat i minmax .
Javier wyjaśni bardziej zaawansowane techniki z CSS Grid na obszarach siatki, wyrównaniu i kolejności, zagnieżdżaniu, a na przykładzie zobaczysz, jak można używać Grid i Flexbox w połączeniu w projekcie.
Pokrótce poznasz transformacje 3D z praktycznym przykładem głębi i efektów w scrollu aby w końcu zobaczyć projekty, przykłady i zasoby wybrane przez Javiera jako inspiracje.
What is this course's project?
Wykonasz darmowe ćwiczenie z jedną lub więcej poznanymi technikami. Javier zrobi stronę informacyjną o podboju bieguna południowego, możesz wybrać motyw i projekt, który chcesz.
Projekty uczestników kursu
Who is this online course for?
Każdy, kto interesuje się nowoczesnym projektowaniem i layoutu z CSS Grid, Flexbox i innymi nowoczesnymi technikami.
Requirements and materials
Aby wziąć udział w kursie niezbędna jest solidna znajomość HTML i CSS, komputer i edytor kodu.
Oceny
- 8 miesięcy temu
An Amazing course to learn Flexbox & Grid and some advanced animations.
- 9 miesięcy temu
increíble
- creative_250792PLUS9 miesięcy temu
Cours très instructif, agréable, très complet
- rok temu
Es un curso muy bueno
- rok temu
Um curso prático e direto, com ênfase em um entendimento passo a passo.
Lubi również swoją rolę nauczyciela projektowania stron internetowych w renomowanych warsztatach i szkołach, takich jak Elisava, IDEP.
Usobiaga rozumie sieć w całości, nie tylko to, jak piękna może być na ekranie komputera, ale także jej użyteczność w różnych urządzeniach i okolicznościach.
W jego słowach „Myślę, że równie ważne jak estetyka jest to, jak szybko się ładuje lub jak dobrze reaguje i wydaje mi się, że w naszej branży często o tym zapominamy”.
Zawartość
- Cz.1
Wstęp
- Prezentacja
- Wpływy
- Cz.2
Kształtowanie układu
- Jednostki obserwacyjne
- Obrazy z dopasowaniem do obiektu
- Kolumny CSS
- Kształty CSS
- Zmienne w CSS
- Cz.3
Układ w jednym wymiarze z flexbox
- Wprowadzenie do flexboxa
- Właściwości kontenera
- Właściwości treści
- Wyrównania w osi głównej i osi poprzecznej
- Zaawansowane składy
- Zaawansowane układy z flexbox
- Cz.4
Układ w dwóch wymiarach z siatką CSS
- Wprowadzenie do siatki CSS
- Funkcje siatki
- Dystrybucja i rozmiar
- Automatyczna responsywna siatka
- Cz.5
Zaawansowana siatka CSS
- Obszary na siatce
- Wyrównanie i porządek
- Zagnieżdżanie
- Grid (i flexbox) w praktyce
- Cz.6
Trzeci wymiar: głębia i efekty przewijania
- Wprowadzenie do transformacji 3D
- Naprawiono nagłówki
- Przewijaj zsynchronizowane animacje
- Inspiracje i zasoby
- PK
Projekt końcowy
- Techniki układania stron internetowych
Kurs Domestika - czego możesz się spodziewać?
Nauka we własnym tempie
Radość z nauki w domu, bez wyznaczonych terminów. Szybko przyswajasz wiedzę, a swój plan zajęć układasz wedle uznania.
Nauka z najlepszymi ekspertami
Przydatne metody oraz ciekawe techniki przedstawione i wyjaśnione przez najlepszych specjalistów z branży kreatywnej.
Doświadczeni prowadzący
Wszyscy prowadzący są specjalistami w swojej dziedzinie. Przekazują wiedzę z pasją, tłumaczą zagadnienia w jasny sposób, a podczas zajęć kładą nacisk na praktyczne zastosowanie zdobytej wiedzy.
Certificates
PLUSIf you're a Plus member, get a spersonalizowany certyfikat signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.
Miejsca w pierwszym rzędzie
Wysoka jakość wideo sprawia, że nie umknie Ci żaden szczegół. Dzięki nieograniczonemu dostępowi możesz obejrzeć nagrania tyle razy, ile potrzebujesz, aby przyswoić nowe umiejętności.
Dzielenie się wiedzą i pomysłami
Zadawaj pytania, nie wahaj się poprosić o opinię czy poszukać rozwiązania. Podziel się swoimi wrażeniami z nauki z pozostałymi członkami społeczności, którzy tak jak Ty uwielbiają tworzyć.
Łączność z kreatywną społecznością z całego świata
Społeczność kilku milionów użytkowników z całego świata, pełnych ciekawości oraz chęci odkrywania i wyrażania swojej kreatywności.
Profesjonalna realizacja kursów
Domestika starannie dobiera prowadzących i produkuje wszystkie kursy we własnym zakresie, aby zapewnić wysoką jakość nauki online.
Często zadawane pytania
This course is designed for people with basic CSS knowledge who want to dive deeper into advanced layouts, modern techniques, and experimenting with the latest properties. You don’t need to be an expert, but you should know the basics of HTML and CSS.
You should have basic knowledge of HTML and CSS, plus a code editor and a modern browser. No special tools or framework experience required.
You’ll learn to build advanced, responsive layouts with Flexbox and CSS Grid, parallax animations, custom shapes, viewport units, image and column control, CSS variables, and 3D transforms for innovative web interfaces.
The course covers element alignment, advanced properties, differences between Flexbox and Grid, responsive layouts, nested grids, custom areas, distribution techniques, and when to choose each method based on design needs.
Viewport units like vh and vw are used to size blocks, text, and images relative to the browser window, creating responsive interfaces and avoiding horizontal scroll or poor proportions.
Yes, you’ll learn to create parallax animations, sticky headers, and scroll-synced effects using pure CSS and advanced visual interaction techniques.
Yes, the course teaches how to adjust images with object-fit, object-position, media queries, and techniques to make images adapt to any container or screen.