Bardzo fajny przykład i dobrze wytłumaczony. Świetnie też poprowadzony. Chętnie obejrzałbym, a nawet zakupił obszerniejszy kurs z dziedziny CSS, JS, PHP i baz danych
To ja spróbuję dodać małą cegiełkę od siebie. Zamiast nadawać wysokość i robić trochę hardcode (24:46), przy translateY można wykorzystać wysokość animowanego elementu o której wcześniej wspomniałeś, czyli będzie: "from { transform: translateY(-100%); }" i też pięknie się chowa.
Twoje filmy są super, a tekst "to nie jest tak jak w życiu, jak chcemy komuś pocisnąć, że odkąd Cię poznałem to moje życie zmieniło się o 360 st." made my day :D
zatrzymalem sie na minucie 12:28, gdyz wszytsko zrobilem tak jak ty ale prostokat ktory ci sie pojawil na stronie mi sie nie stworzyl. Chodzi o .container
Czesc próje cos po dziaac ale kiedy dochodze do ustawienia wielkosci "logo-eustion-mark" w 50:20 sekundzie zaczynasz ustawiac wielkosc logo. po wprowadzeniu { logo 150px oraz logo img 100%} to nic się nie zmienia
Przy nazewnictwie klas w CSS myślę, że warto byłoby wspomnieć o korzystaniu z metodologii BEM, aby ktoś niezaznajomiony z tym wiedział, czemu dane klasy tak osobliwie nazywasz. Fajny materiał. Pozdrawiam
Parę błędów zrobiłem ale finalnie jakoś to wyszło. Był problem z dodaniem drugiego pgn pod ,,szkłem,, no nie dałem rady tego zrobić. Psuło mi wszystko😅 Dodatkowo inne PNG dodawałem niż ty masz tutaj więc widzę że to też ma znaczenie jaki rozmiar i ogólnie no czasem coś nie chciało wejść. Chociaż kopiowałem twoje objaśnienia. No ale pewnie robiłem jakieś błędy więc pewnie ich jeszcze tak nie widzę bo jestem początkujący. Finalnie i tak wyszlo dobrze jak pokombinowałem dzięki !
Jasne, nie przejmuj się tym w ogóle - ja sam uczę się robią te filmy, więc bardzo możliwe, że coś przeoczyłem :) Zobaczysz z biegem czasu, że coś co kiedyś było dla Ciebie problem staje się zupełnie jasne :) Powodzenia!
@@JZP No tak ze wszystkim tak jest. Niecwiem czy dobrze robię ale nie chcę iść na żaden bootcamp narazie póki nie załapie podstaw żeby nie mieć takiego szoku jak zdecyduję się już pójść na taki kurs 😅Generalnie zrobiłem już 3 stronkę w podstawowej wersji, czasami okrojoną o parę opcji ale zrobiłem 😂piona miłej niedzieli !
jaki jest sens ustawiania 2x background w tym samym bloku CSS? pierw sam wartość koloru a potem background: gradient ? to się nie kasuje? ma to jakieś zastosowanie o którym nie wiem?, zrobiłeś to minimum 2 razy
Mega! A skąd można brać takie stylowe elementy do swojej strony? Ja coś znalazłam na freepiku, ale psuje mi to rozdzielczość i strona się rozjeżdża pomimo małych rozmiarów obrazka...lepiej usuwać tło obrazków?
Przy klasach nie musicie naciskać TAB, wystarczy Enter. Ze swojego wciąż niewielkiego doświadczenia wyniosłem tyle, że im mniej się odrywasz od klawiatury tym jest szybciej.
hej, świetny materiał, a mam pytanie. Jest sposób, by animację takiego klawisza zrobić, by przechodził od góry strony do dołu strony? Nie ekranu, ale strony ze scroll barem. Inny niż określenie sztywno wysokości strony? i tak by schodząc w dół nie powiększała strony? Ktoś coś?
Fajny efekt ale chyba tylko do stron o ciemnych tle tak mi sie wydaje :) Pytanie z innej paczki macie może do polecenia kogoś lub jakaś rade jak sprawdzić swoje CV profil na git by był bardziej atrakcyjny dla rekrutrów?
Siemka Adrian! Co do tła - w opisie jest link do tutoriala Dev Ed. Tam tło jest dość jasne i imho wygląda fajnie. Co do CV - masz może profil na LinkedIn? Myślę że jeśli wrzuciłbyś tam post z prośbą o rady, to rekruterzy i rekruterki chętnie by pomogli :)
Bardzo fajne i przydatne nagranie. Mam też pytanie. Tekst i zdjęcia nie dopasowują mi się do pojemności środkowego prostokąta tylko pojawia się po jego prawej stronie przewijanie w dół. Co może być tego przyczyną?
@@JZP Hej, to znowu ja 🙂 Mam problem, bo nie wyświetlają mi się np dodane kolory strony, z czego może to wynikać. Robiłem wszystko zgodnie z tobą. Stronę HTML mam stworzoną. Nie wiem o co chodzi 🤔
Super kurs, to mój trzeci z waszego kanału (i w życiu też😉), dzięki serdeczne za waszą pracę. Mam pytanko, po dodaniu zdjęcia Kacpra wywaliło mi cały container do góry, w taki sposób, że widać tylko dolną krawędź z fragmentem tekstu i buttonem. Czy ktoś może się domyśla co tu się zadziało? I jak zrobić, żeby container się trzymał środka strony? Pozdrawiam i jeszcze raz dzięki za wasz kanał😊
@@JZP Dzięki za szybką odpowiedź, zrobiłam sobie przerwę, wróciłam do kodu i znalazłam błąd w html-u, i już mi wszystko działa, także zabieram się za końcówkę i pozdrawiam serdecznie:)
@@Dziaro1 a, rozumiem. W tym konkretnym przypadku potraktowałem wszystkie tagi img jako elementy dekoracyjne i specjalnie zostawiłem im pusty alt - dzięki temu screen readery pomijają te elementy przy "czytaniu strony". Wyobraziłem sobie, że z perspektywy użytkownika screen readera np. pytajnik w tle nie ma większa znaczenia, więc postawiłem ustawić mu alt="". Być może faktycznie powinienem był rozważyć dodanie altów do obrazków z naszymi twarzami :) W każdym razie dzięki za czujność i zgłoszenie uwagi, pozdrawiam ciepło!
Fajnie tlumaczone, milo sie slucha, dzieki za poswiecony czas ; ) jako bardzo poczatkujacy: czy w css .container musi miec [background: rgba] jak podany jest nizej gradient wraz z rgba? Pozdrawiam!
Cześć Damian! W tym przypadku użyłem rgba, bo chciałem, żeby kolor był lekko przezroczysty, ale w gradiencie można używać również zapisów RGB, HEX i innych :) Na naszym kanale jest filmik o pisance, obczaj go sobie - tam mówię o tym trochę więcej :) Pozdro!
Kochani nie moge dodac zadnego logo za to szkiełko . Robie identycznie jak na filmie kod sprawdzalem pare razy i na paru roznych obrazkach i sie nie dodaje :/ jakies pomysły ?
@@JZP tak patrzylem wszystko powiino byc okej moim okiem nowicujsza :) Dopiero sie ucze :) Jakies pomysly jeszcze ? Dodam ze w VSC tez nic mi sie nie podswietla czerwona kreska . Myslalem ze moze problem emmeta ale wylaczylem go bo przestawial kod ulozylem tak jak masz na filmie i dalej nic . A i dodam ze jak usuwam atrybut alt=" " to pojawia sie jedynie malutka biala smuga za szklem :)
2:46 Zamiast "html:5" można wpisać po prostu "!". Efekt ten sam.
O najs! Dzięki!
@@JZP popieram, jest szybciej ;)
Więcej takich tutoriali, jest mega! :)
Dzęki!
Super materiał!
Ta literówka z „transform” sprawiła, że przypomniałem sobie ile razy gapiłem się w ekran myśląc „No przecież to musi działać” 😂
Bardzo fajny przykład i dobrze wytłumaczony. Świetnie też poprowadzony. Chętnie obejrzałbym, a nawet zakupił obszerniejszy kurs z dziedziny CSS, JS, PHP i baz danych
Dzięki Adam!
To ja spróbuję dodać małą cegiełkę od siebie.
Zamiast nadawać wysokość i robić trochę hardcode (24:46), przy translateY można wykorzystać wysokość animowanego elementu o której wcześniej wspomniałeś, czyli będzie:
"from { transform: translateY(-100%); }" i też pięknie się chowa.
Twoje filmy są super, a tekst "to nie jest tak jak w życiu, jak chcemy komuś pocisnąć, że odkąd Cię poznałem to moje życie zmieniło się o 360 st." made my day :D
Świetna sprawa taki długi film, wielki LIKE ode mnie 😀
Dzięki!
Miłośnicy 2137, Wszechświat znowu przemówił! (patrz - długość filmu)
XD
A jak pan Jezus powiedział?
Od razu widać, że gość ze świętego tagu #przegryw
Ciekawy i pouczający materiał z bazą do własnych prób. Duża ŁAPKA w górę!
Dzięki za totorial - świetna👍 robota
Dziękuję Filip ! Świetny materiał.
Odkąd zacząłem korzystać z Twoich tutoriali, moje życie zmieniło się o 360 stopni :)
Zdrówka
:D to dobrze, że nie o 720 :D
@@JZP ???
Wpadłem przypadkiem i zostaje 😎😎😎
zatrzymalem sie na minucie 12:28, gdyz wszytsko zrobilem tak jak ty ale prostokat ktory ci sie pojawil na stronie mi sie nie stworzyl. Chodzi o .container
Fajna sprawa :) Dzieki za material!
Czesc próje cos po dziaac ale kiedy dochodze do ustawienia wielkosci "logo-eustion-mark" w 50:20 sekundzie zaczynasz ustawiac wielkosc logo. po wprowadzeniu { logo 150px oraz logo img 100%} to nic się nie zmienia
Przy nazewnictwie klas w CSS myślę, że warto byłoby wspomnieć o korzystaniu z metodologii BEM, aby ktoś niezaznajomiony z tym wiedział, czemu dane klasy tak osobliwie nazywasz. Fajny materiał. Pozdrawiam
Dzięki za feedback!
As a developer I enjoy on your presentation ! Great video man ! Awesome Job ! 💚
Glad you enjoy it!
24:50 h@h@h@ - dzięki za śmiech
47:06 Jeśli chodzi o zapisywanie before i after, robi się to z 2 dwukropkami czyli div::after :)
Nie jest to wymagane, to kwestia semantyki :) Zadziała zaórwno z jednym jak i dwoma dwukropkami :)
@@JZP Działa, tak ale właśnie kwestia semantyki. Oglądałem Kevina nie pamiętam nazwiska, amerykański yt'ber i tak było właśnie opisywane. Pozdro
Super, właśnie czegoś takiego szukałem bo planuje szklane portfolio :)
Pierwszy raz tu jestem i od razu polubiłem
Dzięki wielkie - bardzo mi to pomogło :) i nawet działa :)
17:33 Jakiej wyszukiwarki/jakiego tła używasz, że masz taki widok kiedy włączasz nową kartę w przeglądarce? Materiał super, pozdrawiam :D
To wtyczka do Chrome o nazwie Momentum :)
@@JZP Dziękuję :D
Fajnie się to ogląda..
Parę błędów zrobiłem ale finalnie jakoś to wyszło. Był problem z dodaniem drugiego pgn pod ,,szkłem,, no nie dałem rady tego zrobić. Psuło mi wszystko😅 Dodatkowo inne PNG dodawałem niż ty masz tutaj więc widzę że to też ma znaczenie jaki rozmiar i ogólnie no czasem coś nie chciało wejść. Chociaż kopiowałem twoje objaśnienia. No ale pewnie robiłem jakieś błędy więc pewnie ich jeszcze tak nie widzę bo jestem początkujący. Finalnie i tak wyszlo dobrze jak pokombinowałem dzięki !
Jasne, nie przejmuj się tym w ogóle - ja sam uczę się robią te filmy, więc bardzo możliwe, że coś przeoczyłem :) Zobaczysz z biegem czasu, że coś co kiedyś było dla Ciebie problem staje się zupełnie jasne :) Powodzenia!
@@JZP No tak ze wszystkim tak jest. Niecwiem czy dobrze robię ale nie chcę iść na żaden bootcamp narazie póki nie załapie podstaw żeby nie mieć takiego szoku jak zdecyduję się już pójść na taki kurs 😅Generalnie zrobiłem już 3 stronkę w podstawowej wersji, czasami okrojoną o parę opcji ale zrobiłem 😂piona miłej niedzieli !
@@rafaniestrzeba9242 Moim zdaniem bardzo dobrze robisz :) z biegiem czasu zobacyzsz, że nie ptorzebujesz bootcampu :)
Bardzo przydatna wiedza 🛠
Kolejny super materiał. Skąd chłopaki pobieracie te pliki png do animacji ?
jaki jest sens ustawiania 2x background w tym samym bloku CSS? pierw sam wartość koloru a potem background: gradient ? to się nie kasuje? ma to jakieś zastosowanie o którym nie wiem?, zrobiłeś to minimum 2 razy
a powiesz jak zrobić żeby jak się najedzie na guzik żeby wyświetlał jakiś tekst?
Mega! A skąd można brać takie stylowe elementy do swojej strony? Ja coś znalazłam na freepiku, ale psuje mi to rozdzielczość i strona się rozjeżdża pomimo małych rozmiarów obrazka...lepiej usuwać tło obrazków?
Wiecie może, co może być przyczyną tego, ze container rozbija się na 2 części?
Nie znalazłem drugiej części kursu. Czy nagrali Państwo drugą część, w której programujecie zapisy na neslettera?
Nie
@@JZP Czemu takie kategoryczne nie? Kiedy będzie kontynuacja?
Przy klasach nie musicie naciskać TAB, wystarczy Enter. Ze swojego wciąż niewielkiego doświadczenia wyniosłem tyle, że im mniej się odrywasz od klawiatury tym jest szybciej.
hej, świetny materiał, a mam pytanie. Jest sposób, by animację takiego klawisza zrobić, by przechodził od góry strony do dołu strony? Nie ekranu, ale strony ze scroll barem. Inny niż określenie sztywno wysokości strony? i tak by schodząc w dół nie powiększała strony? Ktoś coś?
świetny film
Fajny efekt ale chyba tylko do stron o ciemnych tle tak mi sie wydaje :)
Pytanie z innej paczki macie może do polecenia kogoś lub jakaś rade jak sprawdzić swoje CV profil na git by był bardziej atrakcyjny dla rekrutrów?
Siemka Adrian!
Co do tła - w opisie jest link do tutoriala Dev Ed. Tam tło jest dość jasne i imho wygląda fajnie.
Co do CV - masz może profil na LinkedIn? Myślę że jeśli wrzuciłbyś tam post z prośbą o rady, to rekruterzy i rekruterki chętnie by pomogli :)
Cześć Panowie, jakbyście zrobili jakiś odcinek o metodologii BEM to byłoby miło :)
Siemka Marek, dzięki za podsunięcie pomysłu!
Czesc bardzo fajny material. Czy zamierzacie moze zrohic jakis poradnik python’a?
Na ten moment skupimy się na frontendzie, ale w przyszłości Python pewnie też się pojawi :)
fajne, ale firefox i tak nie wspiera backdrop filtra, na pewno nie blura ;) swojego czasu sfari też miało z tym problem, ale są już webkity
Skąd wziąć takie grafiki? Chodzi mi o stronkę, skąd można różne tego typu grafiki znaleźć. Pozdrawiam.
Te konkretne wykonał dla nas grafik, ale możesz korzytać z darmowych serwisów z ikonami, np. iconmonstr :)
Bardzo fajne i przydatne nagranie. Mam też pytanie. Tekst i zdjęcia nie dopasowują mi się do pojemności środkowego prostokąta tylko pojawia się po jego prawej stronie przewijanie w dół. Co może być tego przyczyną?
A tekst i zdjęcia znajudją się bezpośrednio w tym prostokącie? Jakie masz na nim ustawione CCS?
@@JZP Już chyba sobie poradziłem. Bardzo dziękuję za odpowiedź. Zmniejszyłem wielkość logo i tekst się podniósł do góry. Pozdrawiam serdecznie.
@@filippaluch902 Pozdro!
Hej, mam pyt, w jaki sposób w virtual skasować to co robiliśmy i zacząć nowy plik od nowa i gdzie przechowujesz już skończone pracę.
Pozdrawiam 🙂👍
A czym jest virtual?
@@JZP Jezu sorry, chodziło mi o Visual Studio Code
@@arekchojnacki3957 Spoko :D Najprościej chyba usunąć pliki na liście po lewej, a potem stworzyć nowy :)
@@JZP A zapisujesz gdzieś już wcześniej stworzone przez ciebie prace
@@JZP Hej, to znowu ja 🙂
Mam problem, bo nie wyświetlają mi się np dodane kolory strony, z czego może to wynikać. Robiłem wszystko zgodnie z tobą. Stronę HTML mam stworzoną. Nie wiem o co chodzi 🤔
czym sie rozni w css, root od *?
siema dsz linka do obrazków z tła?
siema nie chcę mi działać podkreślanie linku mam tak samo jak na filmiku sprawdzałem sobie nawet z githuba mam tak samo
co może być tego przyczyną ?
Siema, chodzi o linię pod linkiem>
Super kurs, to mój trzeci z waszego kanału (i w życiu też😉), dzięki serdeczne za waszą pracę. Mam pytanko, po dodaniu zdjęcia Kacpra wywaliło mi cały container do góry, w taki sposób, że widać tylko dolną krawędź z fragmentem tekstu i buttonem. Czy ktoś może się domyśla co tu się zadziało? I jak zrobić, żeby container się trzymał środka strony? Pozdrawiam i jeszcze raz dzięki za wasz kanał😊
Hej! Dzięki za miłe słowo :)
Ciężko ocenić bez kodu co może być nie tak - może spróbujesz wrzucić na naszą grupę FB/discord?
@@JZP Dzięki za szybką odpowiedź, zrobiłam sobie przerwę, wróciłam do kodu i znalazłam błąd w html-u, i już mi wszystko działa, także zabieram się za końcówkę i pozdrawiam serdecznie:)
trochę głupie pytanie ale skąd wziąć .png żeby nie było białego lub kratkowanego tła. Żeby były widoczne same kontury jak np z tym przyciskiem
My nasze obrazki kupiliśmy akurat od grafika, ale możesz poszukać różnych ikonek z przezroczystością na stronie iconmonstr.com
Ej bo ten tekst zaczynamy programować mi się pojawia gdzieś z boku
Skąd bierzesz te przyciski czy kropki? Możesz podać jakiś link gdzie znajdę takie elementy do wykorzystania?
Akurat te elementy zrobił nam grafik. Możesz np. skorzystać ze stronki iconmonstr, są na niej darmowe ikony :)
@@JZP Dzieki wielkie :D Super film! Czy jest do Ciebie jakiś kontakt na instagram?
@@dansemacabre8210 Nie mam instagrama :) Możesz dołaczyć do grupy na fejsbooku (link w opisie) i tam zadawać pytania :) Pozdro!
jak mógłbym dodać jakiś element(najlepiej przycisk) nad container?
Chodzi Ci o dodanie go w płaszyźnie Z?
@@JZP tak, aby był centralnie umieszczony nad całym efektem szkła
@@filippanek1370 to chyba najprościej będzie go umieścić za otwarcie tagu container :)
Brak alt-a to dość duży błąd semantyczny, ale sam materiał ciekawy. Pozdrawiam i czekam na kolejne filmy 👍
Hej Radku, w którym miejscu go zabrakło? Wydawało mi się, że dodał się wszędzie dzięki emmetowi :(
Nie chodzi że go w którymś miejscu zabrakło tylko pozostał pusty.
Poprawnie sympatycznie powinno wyglądać np. tak:
@@Dziaro1 a, rozumiem. W tym konkretnym przypadku potraktowałem wszystkie tagi img jako elementy dekoracyjne i specjalnie zostawiłem im pusty alt - dzięki temu screen readery pomijają te elementy przy "czytaniu strony". Wyobraziłem sobie, że z perspektywy użytkownika screen readera np. pytajnik w tle nie ma większa znaczenia, więc postawiłem ustawić mu alt="". Być może faktycznie powinienem był rozważyć dodanie altów do obrazków z naszymi twarzami :) W każdym razie dzięki za czujność i zgłoszenie uwagi, pozdrawiam ciepło!
Fajnie tylko jestem zielony w temacie gdzie mogę znaleźć takie motywy co się poruszają z kad je pobierać?
Możesz np skorzystać ze strony iconmonstr.com :)
Fajnie tlumaczone, milo sie slucha, dzieki za poswiecony czas ; ) jako bardzo poczatkujacy: czy w css .container musi miec [background: rgba] jak podany jest nizej gradient wraz z rgba? Pozdrawiam!
Cześć Damian!
W tym przypadku użyłem rgba, bo chciałem, żeby kolor był lekko przezroczysty, ale w gradiencie można używać również zapisów RGB, HEX i innych :) Na naszym kanale jest filmik o pisance, obczaj go sobie - tam mówię o tym trochę więcej :)
Pozdro!
Co do outline'a buttona nie można po prostu zrobić w css outline:none; ?
Z punktu widzenia dostępności strony na czytnikach itp. lepiej tego unikać :)
Kochani nie moge dodac zadnego logo za to szkiełko . Robie identycznie jak na filmie kod sprawdzalem pare razy i na paru roznych obrazkach i sie nie dodaje :/ jakies pomysły ?
Sprawdzałeś może w DEV tools czy wszystkie style dodały się odpowiednio?
@@JZP tak patrzylem wszystko powiino byc okej moim okiem nowicujsza :) Dopiero sie ucze :) Jakies pomysly jeszcze ? Dodam ze w VSC tez nic mi sie nie podswietla czerwona kreska . Myslalem ze moze problem emmeta ale wylaczylem go bo przestawial kod ulozylem tak jak masz na filmie i dalej nic . A i dodam ze jak usuwam atrybut alt=" " to pojawia sie jedynie malutka biala smuga za szklem :)
@@ernestromanowski2456 W takim razie prawdopodobnie podałeś złą ścieżkę do obrazka :) sprawdź dokładnie atrybut src w tagu img
szkoda tylko że backdrop-filter nie działa na firefoxie :v
Super poradnik, jeżeli potrafię 90% tego poradnika przed jego obejrzeniem to mogę już szukać pracy w tym kierunku ? 🤣 Pozdrawiam
Myślę, że tak!
mobilne przegladarki nie wspieraja backdrop-filter :/
a wie ktoś jak zablokowac skrolowanie w dół i w góre i w prawo lewo?
body {
overflow: hidden;
}
:D
W CSS nie działa // jako komentarze, ale już w JS działa
nie działa mi kolor jak to naprawić?
Który kolor?
@@JZP może chodzi o gradient albo kolor fontu przy okazji super film
fajne, ale nie responsywne, tylko na duże ekrany, idąc w dół wszystko się rozjeżdża
Zaje...fajny tutorial.
pierwszy długimetraż , który nie katuje
from{transform: rotateZ(-360deg);} daje ten sam efekt 👌