Flexbox - praktyczny tutorial CSS dla początkujących!
HTML-код
- Опубликовано: 2 авг 2024
- 👉 Zapisz się na newsletter: zaczynamyprogramowac.pl 👈
🎤 Discord: / discord 🎤
🔥 Zapisz się do grupy na FB: / zaczynamy.programowac 🔥
Gra Flexbox Froggy:
flexboxfroggy.com/
Film, w którym Dan Abramov centruje diva ❤️
• Coding Interview with ...
[0:00] Intro
[2:50] display: flex
[4:28] justify-content i oś główna
[7:28] space-around i space-between
[10:42] align-items i oś poprzeczna
[14:55] flex-direction
[22:22] order
[24:26] align-self
[26:00] flex-wrap
Pozycjonowanie elementów w CSS sprawia dużo trudności początkującym, dlatego w tym odcinku krok po kroku opowiem jak działa flexbox! Ten tutorial CSS będzie łatwiejszy dzięki swietnej grze Flexbox Froggy!
Filip Mamcarczyk
Kacper Sokołowski
Chyba najlepszy kanał w Polsce o programowaniu, gratuluję
Jezcze overment jest godny polecenia.
oooooo c0rny tutaj, weź idź do ediego lepiej na live żeby shotować a nie tutaj xD
Chcemy praktyczny odcinek z stworzeniem strony responsywnej, żeby zobaczyć jak można stworzyć świetny wygląd, żeby nie było (misz-masz) na stronie, tylko był ład!
Tak, postaramy się zrobić taki tutorial i pokazać w nim praktyczny flexbox :) ! Dzięki za komentarz!
I jak ci idzie nauka programowania 8 miesięcy później od dodania tego komenta? Udało ci się przez ten czas nauczyć wystarczająco tyle, żeby znaleźć jakąś robotę w branży IT?
@@DIES3L.10 ta i zarabiam 20 tys na luzie
Rewelacja! 💖
Bardzo dobrze wytłumaczone
Super odcinek😀👏
elegancki filmik
Świetna robota! 😊 bardzo wartościowy kanał.
Super film. Polecam każdemu🥰❤️
super.Dziekuje
Super poradnik. Akurat miałem uczyć się flexboxów ale nie mogłem znaleźć dobrego tutoriala. Świetnie tłumaczysz
Dzięki!
Fantastyczna robota i te żabki🐸
Kurde, dzięki że jesteś/jesteście i pomagacie tym co zaczynają i tym co szukają pomocy z projektami, i tłumaczycie to bardzo zrozumiale w prosty sposób leci łapka w góre :D
Wooow! Świetna gra!! Naprawdę pozwala zrozumieć temat. Doskonale tłumaczysz :-D Dziękuję! :-D :-D (jaram się)
Jak ja się cieszę że wpadłem na ten filmik, będąc szczerym nie potrafiłem polubić się z CSS ale ta gierka choć dopiero się uczę była tak prosta że byłem w stanie zrobić ją praktycznie całą z małą pomocą przy 2/3 zadaniach a przy tym przysporzyła mi frajdy i pomogła w zrozumieniu flexboxa, na pewno wrócę do niej jeszcze nie raz żeby poćwiczyć i przy tym fajnie się bawić. Dzięki za ten filmik! ❤
Filip, fajnie że to pokazałeś na takim przykładzie, filmik z pewnościa odpale sobie na pewno kilka razy i nie wiem jak inni ja bym chcial jakiś praktyczny przyklad na stronie internetowej przy projekcie.
24 zadania zrobione razem z Tobą:)
Spoko, dzięki za feedback! Pomyślimy nad bardziej praktycznym przykładem :)
Super wyjaśnione, ciekawie i na wielu przykładach, tylko nie "ściaśnione żabki" a ściśnięte :D
Dzięki 😁
Bardzo dziękuję za wszystkie materiały! Na kanał trafiłam niedawno dzięki filmie o galerii zdjęć, a teraz nadrabiam zaległości :)
Twoje materiały dodają mi motywacji do nauki, bo świetnie tłumaczysz, a dodatkowo bardzo miło się Ciebie słucha! ☺
Przydatny byłby odcinek omawiający tworzenie responsywnych stron :)
Dzięki! Faktycznie, musimy nagrać taki odcinek :)
Idealnie w punkt, bo tego właśnie miałem się nauczyć teraz w weekend. Super prosto objaśnione.
Fajny Benek
Bardzo dziękuje, like i respect z Ukrainy.
polecam Flexbox zombies - to dopiero zabawa ! :)
Filip, zrobilem dziś sam przechodząc przez prawie wszystkie etapy bez zagladania do filmiku, najwiekszy problem mialem przy odwróconym wrapowaniu .
czuje że mam tu jeszcze rom do improvements :)
To teraz czas na GRID'a! :)
czekamy na grid-garden :D
Super poradnik jak zawsze ! 🤓😀 czy jest mozliwosc rozszerzenie tematu flex-box jeszcze o 3 wazne wlasciwosci flex-grow, flex-shrink, and flex-basis ( poprzez praktyczne pokazanie danego tematu) 😏❤️
Przy następnej okazji opowiemy o tym :D niestety w tej gierce nie było poziomów, które nawiązywałby do tych właściwości :) Dzięki za komentarz!
Zróbcie film o frontendmentor stronka jest świetna jako praktyka frontendu
Może poradnik z jakimi zadaniami programista w pracy się spotyka, bo sama wiedza to jedno, a inna to wdrożenie tej wiedzy w pracy. Po prostu jak to działa od kuchni
Który mechanizm flexboxowy sprawia Wam najwięcej problemów?
16:40 pierwsza myśl "display: block;" hahahahah
Oś x - justify content oś y - align items
Cześć, czy robienie drzewka (struktury) flex to dobry wybór czy inaczej do tego podejść. Obecnie mam zrobione na position:absolute ale jest problem z centrowaniem tego na stronie?
Myślę, że często pozycjonowanie flexem będzie działalo lepiej niż pozycjonowanie absolutem :)
Panowie byście mogli zrobić większej ilości treści o JS. Przerobiłem kilkadziesiąt godzin nauki o HTML, CSS i uznaje, ze rozumiem co i jak, ale na JS mam po prostu ścianę... (już drugi raz robię kurs o JS i jak "grochem o ścianę"). Jak byście mogli tworzyć jakieś praktyczne projekty z wyjaśnieniami to byłbym ogromnie wdzięczny! Pozdrawiam
A nasz kurs JS widziałeś?
@@JZP Tak, widziałem. Obejrzałem go po przerobieniu kursu JS na udemy - 15h teorii + jakies 8-10 projektów. Nie wiem czy programowanie w JS polega na szukaniu funkcji w internecie odpowiadające za daną czynność? Tak sie zastanawiam.
21 zadanie z 37 XD
Planujecie coś podobnego z grid'a? ;)
Sądząc po Waszych rekacjach to tak :D
Podymione
Te zebym ja cie nie podymil zadymiarzu
Ma ktoś jakąś stronkę z zadaniami dla początkujących?
Zaczynając totalnie od zera do tworzenia w miarę dobrez wyglądających stron internetowych.
Lubię oglądać tutoriale, ten kanał jest świetny, ale ja preferuję samodzielność i potem wyszukiwanie i radzenie sobie z problemami na własną rękę.
Świetny kanał, fajna gierka z tymi żabkami, dzięki za materiał.
Nie wiem, czy do końća o to Ci chodzi, ale sprawdź sobie frontendmentor.io :) dzięki za miłe słowo!
@@JZP Mam nadzieję, że znajdę coś ciekawego, zaczynam dopiero, mam za sobą zaledwie kilka godzin zabawy, więc na start tylko i wyłącznie HTML w połączeniu z CSS, jakieś proste, intuicyjne strony, bez fajerwerków. Dzięki za linka
@@biggestturtle973 Powodzenia!
Gdzie ty byłeś 3 miesiące temu ja się pytam?
ᴘʀᴏᴍᴏsᴍ
największym problemem tej "gry" że pomija osobiście uważam jedną z największych/najważniejszych zmiennych FLEX: X nie ma nic o tym a to zmienia postrzeganie na cały flex imho