Jak zrobić stronę na całe okno przeglądarki?

[@HARRYPOKA]

Jesteś mega pozytywnym gościem , aż chce się Ciebie oglądać :).

[@godlewsky_kubus]

Racja

[@r0ck_solid310]

Proste, przystępne tłumaczenie bez zbędnego lania wody i komplikowania faktami, o których początkujący nie mają pojęcia, i mieszania im w głowie. Zaczyna się świetnie, tak jak oczekiwałem. Zasubskrybowałem zaraz po tym jak ostatnio natrafiłem na film wprowadzający do kursu i widzę, że miałem dobre przeczucie. Nie miałem większego kontaktu ze web devem poza szkołą, dowiedziałem się tu paru ciekawych rzeczy (które zdecydowanie ułatwiłyby mi życie na zajęciach :P) i myślę, że dam radę się w końcu zmotywować. Czekam na więcej

[@SamurajProgramowania]

Dzięki :) Powodzenia!

[@thelastman57]

Świetny kanał, wszystko dokładnie przedstawione, zrozumiałe, prowadzący, którego bardzo przyjemnie się słucha! Chce się uczyć jak nigdy, bardzo mi Pan pomógł ;) Dobrze, że jest ktoś taki jak Pan. Pozdrawiam !

[@wojciechsadowski4020]

Bardzo pozytywny instruktor, przyjemnie się ogląda i edukuje

[@camel8809]

Bardzo fajnie wytłumaczone :-) Jakiś czas już siedzę w stronach i mam jakieś tam swoje przyzwyczajenia. Rzadko używałem flexa, bo na moje potrzeby wystarczało odpowiednie pozycjonowanie + margin:0 auto; Ale widzę, że chyba będę musiał sobie zaktualizować wiedzę ;-) Krótko podsumowując - prosimy więcej :-) A poza tym, nie to żebym komuś odradzał programowanie, ale z doświadczenia wiem, że zawsze na początku z JS-em jest taki mały myk (kiedy wystąpi błąd): Nienawidzę JS-a, nienawidzę JS-a, nienawidzę JS-a, nienawidzę JS-a, nienawidzę JS-a, . . . . . O! W końcu zadziałało! Kocham JS-a i programowanie! ;-D Trzeba się uzbroić w cierpliwość i znajomego, który trochę ogarnia i ewentualnie na świeżo coś podpowie. Jak zaczynałem to tylko z książkami, ewentualnie jakimiś tutorialami w sieci. I powiem tyle, jak nie masz do kogo się zgłosić z jakimś problemem, to musisz mieć 4 razy więcej motywacji. Oczywiście też nie chcę demonizować sprawy, bo idzie się tego w pojedynkę nauczyć, potrzeba tylko znacznie więcej czasu.

[@kamil-00]

Jesteś super, mam książkę o tym jak pisać strony www, a dzięki tobie mogę uzupełniać widzę której nie ma zwartej w książce. Dzięki za twoje chęci i starania !:)

[@SamurajProgramowania]

Dzięki :)

[@Wihajster_123]

Magrywasz świetne filmiki, przyjemne, na spokojnie, kodowanie z Twoją pomocą to czysta przyjemność, masz w dodatku szczery i miły głos (co jest niezwykle ważne). Oby tak dalej i powodzenia w dalszych odcinkach! ;) ;) PS: Ucze się w technikum informatycznym i szczerze powiedziawszy to więcej się tu nauczyłem i samemu szperając po sieci niż na lekcjach :p PS2: Jakby co to mam pomysł na kolejny odcinek jeśli jesteś zainteresowany :) chodzi mianowicie o efekt parallaxy na stronie co jest ostatnio dość modne i efektowne :)

[@SamurajProgramowania]

Jacek, bardzo Ci dziękuję za tak miłą recenzję :)

[@Wihajster_123]

Samuraj Programowania Are U welcome ;)

[@Pazzak13]

Ma pan bardzo przyjemny głos i świetnie tłumaczy. mimo że w miarę rzecz ogarniam to słucham sobie w ramach odświeżania. keep up the good work!

[@SamurajProgramowania]

bardzo dziękuję :)

[@7pysiek]

Świetne :) Nie mogę doczekać się kolejnego odcinka. Jedynie co zauważyłem po pobraniu plików, to że przy wyświetlaniu w mniejszej rozdzielczości przycisk nachodzi na tekst, lub teks chowa się za przycisk ;)

[@SamurajProgramowania]

Dawid, bo nie zrobiliśmy tego jeszcze responsywnie, stąd taki efekt przy mniejszych rozdzielczościach, ale chętnie pokaże jak to ogarnąć w kolejnym odcinku albo przy kolejnym projekcie.

[@7pysiek]

No to czekam na dalsze instrukcje :) w kolejnym filmie.

[@monika163]

o! bardzo prosimy odcinek o responsywności:)

[@tohno520]

Przycisk lub inny element można także wyśrodkować: button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /i reszta width, padding... } zamiast liczenia pikseli.

[@slapa02]

Nic specjalnego ale wstawiam, żeby zrobiło się ci miło, że masz jeszcze jednego ucznia ;) fullpage.s-paw.pl Pozdrawiam, i czekam na kolejne filmiki. Świetna robota dięki :)

[@marciu11]

Super filmy i super przekaz wiedzy. bez nadęcia z uśmiechem i na ludzie ludzie! Bardzo fajnie się Twoje filmy ogląda - dziś siedzę już 4 godzinę :) Odnośnie pozycjonowania buttona. Nie lepiej będzie, zamiast na sztywno definiować wielkość buttton'a i przesuwać go ujemnymi marginesami, to przesunąć go tranformem o -50%? Da nam to elastyczność wielkości buttona. Wystarczy opisać paddingiem "przestrzeń" buttona a wielkość elastycznie dopasuje się do treści w nim. pozostając również wyśrodkowanym względem strony. Oczywiście nie przeszkadza to nieć sztywnej wielkości, gdy tego potrzebujemy. Pozdrawiam i jeszcze raz bardzo miło się ten przekaz wiedzy ogląda :)

[@Burooss]

Czy da się przycisk button przekształcić w coś ala menu po naciśnięciu którego przekieruje na inną stronę?

[@aniach8935]

Można prosić o kod źródłowy:)

[@bbart9628]

hahahahahaha, dobry żart :D Zajebiście, kolejna baza wiedzy :)) Oki, robię dokładnie, to co Ty, a fotka wychodzi mi absolutnie nie w oknie przeglądarki, a albo do lewej rozciągnięte albo do prawej nie dociągnięte... Wtf?

[@paczekgrubas]

Mam pytanie, czy aby te ustawianie przycisku na środku w 16:46 w filmie jest ok? A co z paddingiem i borderem? skoro przycisk ma 260px szerokości, zawiera padding 2x 20px i border 2x 3 px, to czy nie powinno być 306px podzielone na 2? czyli 153px? i analogicznie do wysokości?

[@norbertwilczynski2956]

świetne poradniki

[@13damxan13]

Podaj kod bankowy bo nw gdzie wyslac te 100$ :/

[@SamurajProgramowania]

;)

[@MrFckingninja]

Może wiesz, ale jak nie to Cię czegoś nauczę :) transform: translate(-50%,-50%); wtedy nie trzeba znać width i height. Pozdrawiam uczeń technikum XD

[@MrFckingninja]

Niech Pan sprawdzi i zastosuję tę technikę w następnych odcinkach, jest to moim zdaniem najlepsza opcja wysrodkowania :)

[@SamurajProgramowania]

@MrFckingninja dzięki! Znana mi i bardzo dobra technika do wyśrodkowania, na pewno będzie wykorzystywana przez mnie w kolejnych filmach :)

[@psvpl]

Gdyby nie "kod bankowy" to można by pomyśleć, że człowiek z serca chciał to zrobić, ale widać, że nawet nie ma pojęcia o czym mówi i to jest smutne. Mam nadzieję, że Samuraj gdzieś tam kiedyś poda jakiś numer konta do przelewów, bo czasem by wypadało dać coś od siebie, a nie tylko brać za darmo, zwłaszcza że po polsku nie ma za dużo dobrych kanałów o programowaniu.

[@programista100]

Bardziej przypadło mi do gustu określenie "onepage" dla takich stron :)

[@przemysawzglenicki9933]

przy display flex poslugujac sie poleceniami center ustawiamy cos w srodku rzeczjasna. moje pytanie brzmi czy mozemy to jakos ustawic tak jak w przypadku przycisku(position:absolute) troszke wyzej troszke w bok? :) jak tak to jakie bylyby polecenia w css. pozdrawiam i poraz enty dzieki za film ! :) edit: imgur.com/a/OZh87 mnie chyba trochę poniosło.. odnosze wrażenie, że za dużo nawaliłem wszystkiego, ale co tam chociaż utrwalam wszystko :P ps przyznaje się, że dzialajacy zegar oraz ikonki social media powstaly przy pomocy kanalu pasja informatyki. :D

[@danieltakashi]

Jakiego skrótu używasz do formatowania kodu?

[@devnullex]

Witam, kiedy można się spodziewać części o PHP? :) ps. Flex jest świetny, ale w starszym IE kuleje. Masz na to jakąś radę?

[@sebastiankwiatkowski5769]

Jak żyć? Oglądać te filmy.

[@veldan4355]

Mam nadzieję, że dalej będziemy robić jeszcze bardziej rozbudowane rzeczy :) chciałem żeby po naciśnieciu na przycisk przekierowało Nas do innej strony. Zrobiłem

[@Mucronis15]

W jaki sposób rozwalasz ten nawias klamrowy w 4:48 na kilka linijek? Korzystając z okazji chciałbym się dowiedzieć jakiego motywu używasz w Brackets? Instalowałem już kilka różnych skórek ale Twoja jest chyba najbardziej czytelna :)

[@SamurajProgramowania]

Dodatek Beautify, A skórka to Panda Theme :)

[@MarcinPalczak]

Landing page/full page: nawodna.pl Od razu pytanie - jak zrobić aby box też zmieniał rozmiar wszerz (lub w ogóle rozmiar)?

[@SamurajProgramowania]

Pół-socjopata ;) Można określić wielkość boxa w procentach podobnie elementy w środku.

[@over40pl]

Super kurs. Na jego podstawie robię stronę, ale napotakłem na problem i nie wiem, jak go rozwiazać. Gdyby w tym projekcie fonty w h1 i h2 były ciemne, a rozjaśniać musiała je chmurka pod nimi, która by je okalała, zmieniała rozmiar i wędrowała za mini wraz ze zmianą rzodzielczości, to jak trzeba by się do tego zabrać? Osobiście użyłem pliku png jako background w divie. Niestety nie chce mi się on centrować lub rozciągać do środka h1 i h2.

[@KonradSzejnfeld]

Czekam na Flex'a :) W szczególności fajnie jak wytłumaczysz/przedstawisz różnice/przewagi na Grid'em. Tzn. zdaję sobie sprawę z przewagi Flex'a, jednak widać, że Grid nadal przoduje. Rozumiem, że to przez to, że niektóre przeglądarki nie obsługują flex'a?

[@SamurajProgramowania]

flexa już chyba wszystkie obsługują (trzeba tylko o prefiksach pamiętać) :)

[@KonradSzejnfeld]

Dzięki za info. Mobilne przeglądarki też?

[@SamurajProgramowania]

Wydaje się, że tak caniuse.com/#feat=flexbox

[@KonradSzejnfeld]

Wielkie dzięki! Na Twoje filmy czeka się jak na kolejny odcinek najlepsego serialu :) Mega dzięki za Twoje chęci i sposób narracji. Podrawiam!

[@SamurajProgramowania]

Dzięki Konrad :)

[@porter8783]

Dzień dobry Nauczycielu :) czy wiesz, że do pełnej strony brakuje tylko rozwijanego menu i jakiejś galerii zdjęć. Może zrobisz, jakiś odcinek o w/w wymienionym. Uczeń

[@michawasiak150]

Świetna seria czekam na kolejne odcinki. Polecam stronkę unsplash.com/ bardzo dobrej jakości zdjęcia, które można wykorzystywać za darmo na stronach www. Pozdrawiam.

[@paweonorin2978]

ja pozwoliłem stworzyć takiego potworka, mam nadzieję, że nadto optymalizacji nie pokrzaczyłem codepen: codepen.io/pawel_programuje/full/MprvvM/ ps. jestem tym typem humana co jeszcze kilka tygodni temu nie wiedział co się kryje po drugiej stronie tego pięknego świata, keep do it !

[@SamurajProgramowania]

potworek ;)

[@SamurajProgramowania]

i link prowadzi we właściwe miejsce. Dzięki! :)

[@paweupawel8890]

co byś polecił bardziej pod kątem nauki pierwszego jezyka i pracy w branży IT. PHP czy JavaScript + Node.JS ???

[@SamurajProgramowania]

Ja uwielbiam js, więc zdecydowanie polecam. Znam kilka osób, które przeszły z php na js/node i też nie żałują :) Nie jestem przeciwnikiem php, ale przynajmniej w moim kręgu znajomych js, java, c# a nawet python są zdecydowanie bardziej popularne i widzę, że raczej nikt takiej ścieżki nie żałuje. Znam za to średnio zadowolonych z wypłat i perspektyw programistów php.

[@paweupawel8890]

dzieki a mógłbyś moze kiedys zrobić kiedys moze o tym odcinek? Nawet krótki. Porównanie dla poczatkujących wady i zalety PHP vs JavaScript , .NET , JAVA , Ruby on Rails? Dlaczego w dzisiejszych czasach PHP jest tak "wyśmiewany" przecież działa na nim 70% internetu. Czy na obecną chwilę jest większe zapotrzebowanie na rynku pracy na JS ?

[@pheecatoanimation3669]

Gadki o wyborze języka to tak jak rozprawiać o kupnie samochodu, każdy ma inne potrzeby więc każdy wybiera co innego. Chcesz tworzyć strony www to ucz się JS i PHP. PHP przeszedł zmiany i jest bardzo dobrym językiem, tak jak mówisz 70 % internetu na nim bazuje. Python jest łatwiejszy ale dopiero przeciera szlaki. Czy wzbije się na szczyt> Może a może nie? Python jest o tyle fajny,że możesz na nim robić strony www, aplikacje a także bawić się microprocersorami. PHP to głównie internet. Zacznij od JS (sprawdz codeacademy) maja genialne kursy. Później inne języki będą przychodzić z łatwością. W każdym języku są kroki milowe które ciężko początkowo ogarnąć. Powodzenia!

[@TheDawidoskar]

gdzie mozna skopiowac te kody css ???

[@abyff7662]

Co zrobić, żeby po kliknięciu na przycisk wyświetliło się zdj, komunikat, lub przekierowało na jakąś inną stronę np.?

[@opalkowski]

Świetnie się Ciebie słucha/ogląda. Mam przy okazji jedno pytanie: jak owo tło (zdjęcie) zrobić lekko przezroczystym?

[@leszekadamek8348]

Witam, u mnie obraz (przy widoku 100% w przeglądarce) wyświetlany jest częściowo (jakby był powiększony) , gdy przykładowo zjadę z powiększeniem np.do 25%to widać, że obraz tła jest wielokrotnie powtórzony. Jak temu zaradzić?

[@wojciechnajda3417]

Czemu kiedy samemu ściągając obrazek ze strony i umieszczając źródło do niego to albo nie wyświetla mi w przeglądarce albo pojawiają się małe obrazki obok siebie? A w momencie pobrania grafiki w pliku pod stroną jest wszystko ok?

[@aza8351]

Mam pytanie. Ja koło tytułu strony np. tak jak tu "Strona na jeden ekran" Ustawić logo, naczek lub obraz jak w Yt czy Fb???

[@diabllo2101]

Niestety ale plik do pobrania jest nie dostępny, proszę o reload

[@savageman001]

Super

[@janusz9345]

Z tym projektem to odgadles moj plan - juz od jakiegos czasu powoli ogarnialem jak zrobic full-page'a (chociaz robilem to przez dodanie img w body lub head) ale twoj sposob wydaje sie o niebo lepszy :-) - czy jesli chce, aby wyswietlaly mi sie u gory strony przyciski social media, moge to spokojnie zrobic divami / divem czy lepiej / latwiej inaczej? Pozdrawiam!

[@SamurajProgramowania]

Jasne, możesz tak jak piszesz divem i użyć dla nich position absolute by ustawić tam gdzie chcesz.

[@mateusz6897]

Cześć, czy będą filmy z zaawansowanym html/css ? Pozdrawiam :)

[@agnieszkaszymczak3963]

Hej! Jak przerzucasz w minucie 4:46 kilka deklaracji do różnych linijek? Pozdrawiam :)

[@SamurajProgramowania]

Agnieszka, dodatek Beautify, włączony na save :) Udanego tygodnia!

[@smakiemocji2940]

Jaką poleca Pan książkę o projektowaniu stron internetowych?

[@tmchecki8610]

Co to za rozszerzenie w przeglądarce które ukrywa zawartośc CSSa na stronach?

[@karolwieczorek1241]

Mi natomiast nie wystwietla backgroundu. Kod napisalem identycznie header { background: url('beach.jpg'); } Tak to wyglada w moim przypadku. Arkusz styli jest podpiety w index.html WTF? W inspekcji strony widzę, że obrazek jest podpiety, ale wyswietla go jako biel....

[@dmar6668]

moze nie masz w folderze co jest ten plik css i html..

[@dmar6668]

albo zrób to: header { background: url('beach.jpg'); height: 100vw; width: 100vw; }

[@mariuszzbikowski166]

to mi coś takiego wyszło, coś tam kombinowałem z przejściem, teksty jak zwykle jakiś pomysł na szybko www.maroio.pl/fullpage/

[@Burooss]

Fajne. ;)

[@franc8887]

Mam pytanie do mądrej głowy:) Nie mogłem ustawić (button - position - absolute)Przycisk w ogóle nie reagował .Nie mogłem dojść dlaczego , dopiero potem zauważyłem że w kodzie poprawnym który ściągnąłem w css w określeniu headera jest od góry do dołu (background-size,height,width} a nie (height,width,background-size,) tak jak jest to pokazane w filmiku.Czy to ustawienie mogło powodować mój problem ?

[@SamurajProgramowania]

nie powinno mieć. Kolejność właściwości w regule nie jet ważna.

[@kubakarasek7077]

Mam pytanko, mianowicie dlaczego jak daje szerokosc jakiegos elementu 100vw to pojawia mi sie pasek na dole i dany element jest szerszy niz szerokosc ekranu?

[@SamurajProgramowania]

resetowałeś body? Ma domyślny margines, który powiększa twoją stronę.

[@takciezb3jtuje]

wpisuje dokladnie tak jak na filmie header { background: url ('tlo.jpg') } jednak nie dziala

[@tohno520]

header { background-image: url("tlo.jpg"); //chyba średnika nie dałeś albo grafiki nie ma w folderze projektu background-position: center; background-size: cover; height: 100vh; width: 100vw; }

[@Brodeon]

codepen.io/Brodeon/pen/ryppZO. Mam nadzieję że się podoba ;)

[@MrAgr3st]

Samuraju! Mam info przy wejściu na link z kodem źródłowym "requested package does not exist". Jakaś szansa na reupload? PS. Czy to będzie to samo, gdy wejdę na websamuraj i wyświetlę źródło strony :)?

[@jarosawkrokowski1808]

podczepiam się pod pytanie i szkoda bo : "Warto pobrać kod, bo macie tam bonusy"

[@karolborowiecki3595]

a właśnie właśnie kiedy JS >>?? będzie to równoległe z CSS ??

[@SamurajProgramowania]

w tym tygodniu zacznę, ale chcę się jeszcze zastanowić jak najlepiej poprowadzić ten cykl by był ciekawy i przydatny.

[@wojciechglugla4385]

Pisanie "capsem" w html nie należy do nawyków najpoprawniejszych. :) zamiast tego normalnie napisany tekst, a w css text-transform z uppercase. Na upartego wielokropek możnaby wstawić poprzez pseudoelement. Pozdrawiam. :)

[@xdxd-jr5wn]

na samym poczatku jak przechodzisz do css to wpisujesz taka duza gwiazdke jak ja robisz?

[@xdxd-jr5wn]

to jest normalna gwiazdka z klawiatury?

[@michalphs123]

Jak podzielić sobie tak okienka na połowę, jest jakaś sztuczka czy trzeba samemu ustawić? ;p Ps. Zamiast pisać capsem to lepiej użyć text-transform, ale pewnie o tym wiesz :p

[@SamurajProgramowania]

Michał, jeśli poważenie pytasz (nie wiem, więc się asekuruje ;) ) to wystarczy okno programu/przeglądarki przeciągnąć w lewo/prawo i autoamtycznei tworzy nam połówki ekranu :). Co do text-transform, to masz rację oczywiście :)

[@jewelofnile2424]

Apropo full paga, znalazłem fajny rodzaj strony i jestem ciekaw czy mógłbyś zrobić coś takiego w kursie css jeśli nie wymaga to JSa: pl.english-attack.com/?Facebook&Poland&Poland&TVADD&OrangePoland Chodzi mi o to że tymi kulkami z lewej zmienia się tak jakby slajdy.

[@pazitm89]

lmgtfy.com/?q=css+on+scroll

[@djkidii]

JS na bank

[@norbertwilczynski2956]

Dlaczego nie używasz atom'a ?

[@SamurajProgramowania]

Przyzwyczajenie. Ale mam też atoma i od czasu do czasu odpalam też na nim :)

[@djkidii]

Atom to dno :D na i7 przy wiekszym projekcie to chodzi tak wolno jak mózg petru :D

[@michateos4179]

Na tej stronie wyrzuca mi błąd w css, masz wpisane width: 100wh ;)

[@SamurajProgramowania]

dzięki wielki! :) Poprawione

[@PrzemysawDziubczynski]

Chciałem się dowiedzieć i link nie działa...

[@SamurajProgramowania]

juz działa :)

[@Mucronis15]

Natchnienie znalazłem w słowniku polskich wulgaryzmów ;) codepen.io/PsiaMac/pen/LWezxd

[@krolpuszczy2519]

Button wogóle nie chce mi się stylować, ktoś może zerknąć i powiedzieć gdzie popełniłem błąd? codepen.io/krolpuszczy/pen/YZdOOE

[@SamurajProgramowania]

po top i left daj dwukropek :)

[@krolpuszczy2519]

Kajam się z pokorą, rumieniec przez tydzień mi nie zejdzie z twarzy i podwójnie pozdrawiam :) :)

[@piotr7182]

Co jeśli takich button'ów mieli byś my więcej, a wystylizować chcieli byśmy go inaczej po prostu robimy coś takiego Button 1 Button 2

[@Destiny-xe4lc]

Popraw tytuł kolego :]

[@SamurajProgramowania]

jeśli chodziło o okna - > okno, to poprawione. Dzięki za zwrócenie uwagi :)

[@kamilk.6518]

Poleciało 100$ 😂

[@marcelwojdat9671]

PROGRAMOWAĆ

[@krolpuszczy2519]

To i ja wrzuce od siebie.

[@krolpuszczy2519]

mab.to/JKQrHmoNI

[@psychopatarecords6544]

imgur.com/a/z9HNv Takie ala mem XD z dystansem jak coś --> link do kodu mab.to/Ac4AjyPnN

[@SamurajProgramowania]

to jest niekryty krytyk? ;)

[@psychopatarecords6544]

hah niestety pan xd tak sie dzieje gdy ma sie mozg przesiakniety suchymi memami xd

[@psychopatarecords6544]

hah niestety pan xd tak sie dzieje gdy ma sie mozg przesiakniety suchymi memami xd

[@ukaszpietruszka1749]

lukas55.cba.pl/18/ ja systematyzuję wiedzę :)

[@Peregrinatio]

kamilip123.iwebt.pl Taki one page ode mnie ( wiem, że responsywnie nie najlepiej, ale źle chyba nie jest

[@SamurajProgramowania]

nieźle :)

[@ernestpiotr6721]

super stronka ! ;)

[@jarosawkrokowski1808]

Fajna. Jak taką zrobić z tej z filmu?

[@DarkSmallRavenHeart]

Zmniejsz sobie padding w inputach formularza, albo zwiększ wysokość, bo nie widać tekstu, np. padding: 2px 10px; ;)

[@Szary32]

a oto mój efekt nauki przez tydzień codepen.io/guma321/pen/jBYyBa?editors=0100 myślę że fajnie to wygląda :)

[@SamurajProgramowania]

Góry przyjemne :)