Własna stronka od zera - responsywność #3

[@paulmonde6896]

Elegancko, wlasnie jestem po obejrzeniu. Notatki zrobione, wszystko przecwiczone, zapamietane. Mozna spokojnie isc spac :)

[@krystianwiduch9536]

Mój ulubiony cytat ,,Wybierz zawód który lubisz, a nigdy nie będziesz pracować" Mam wiele hobby ale tworzenie stron i nie tylko jest moim zawodem którego chcem się uczyć po ukończeniu Gimnazjum.Twoje filmy są doskonałe, zacheciły mnie do tego aby się nie podawać i walczyć do samego końca.

[@Wihajster_123]

Świetny filmik! Kilka dni temu doszedłem jakby do etapu mojej nauki właśnie do "media queries", zacząłem się tym bawić pisząc responsywną stronę dla firmy mojej Mamy, ale o kilku rzeczach nie wiedziałem, nie byłem pewien, czy dobrze to koduję i brakowało mi tego wyjaśnienia. Dzięki ogromne za to i czekam na kolejne odcinki!! :) :) :)

[@ukaszseremak3019]

Bartoszu chylę czoła i czekam z niecierpliwością na więcej. Tłumaczysz to wszytko świetnie. Pozdrawiam serdecznie

[@SamurajProgramowania]

Dzięki Łukasz. Pozdrawiam!

[@budownictwoinstalacjemaszy1265]

Dzięki Bartek za kolejny, fajny materiał. Responsywność przyda nam się w przyszłych projektach. Pozdrawiamy.

[@SzyMsPG]

Dobre poradniki nie są złe :)

[@rajzok97]

Uczę się pisać już jakiś czas stronki, a dzięki Tobie nauczyłem się wielu nowych rzeczy! Super kanał! :)

[@zbigniewstonoga3042]

12:53 niech Pan powtórzy jeszcze raz.

[@Dorthion]

Czekałem cały dzień na ten odcinek :D

[@SamurajProgramowania]

hehe, tak czułem, więc się sprężyłem ;)

[@The15157jacek]

ja również, dziękuje :D

[@wioletafurman4259]

Napotkałam ten problem z obrazkiem przykrywającym tekst i zaczęłam go sama rozwiązywać wcześniej w obawie że nie dam rady nadążać za kursem skoro już mi się sypie, no i kiedy zrezygnowana właczyłam Twój film dalej...właśnie przeszedłeś do tego zagadnienia :D

[@RafalPodraza]

Dziękujemy

[@michalpaszkiewicz]

Wspaniały kanał i wspaniałe materiały! Pozdrawiam serdecznie :)

[@SamurajProgramowania]

Dziękuję Michał! Miłego weekendu!

[@ukaszbogacz7760]

Prośba tylko jedna Bartku, nie zaprzestawaj tego co robisz. Jeden z najlepszych poradników. Mam nadzieję że nie długo wejdziemy na coś bardziej zaawansowanego. Pozdrawiam

[@SamurajProgramowania]

Cześć Łukasz, w tym roku raczej React, Redux czy Node.js jeszcze nie ruszymy ;) Zresztą póki co dla mnie taki kanał o front-end + js też jest ok, dobrze się z tym czuję.

[@SamurajProgramowania]

Na kolejny odcinek serii zapraszam we wtorek 12.09

[@KaaaVaaa]

Mega dobre. Piękna seria, dopiero jutro kolejny odcinek :(

[@marcindampc5766]

i po to ja tu właśnie zajrzałem, żeby takie info przeczytać :)

[@McSkyPl]

Może warto pomyśleć o jakiejś stronce na fb lub czymś podobnym do takich informacji? Pozdrawiam

[@masztan]

Nie każdy element ma before i after. Mają tylko te elementy, które posiadają ciało, w którym umieszcza się kolejne lub teksty. After czy before nie zadziała np dla IMG czy INPUTa. Ale zadziała dla Treść w ciele buttona

[@muzykazbajek4273]

Bartek swoimi filmami - a obejrzałem chyba większość - zachęciłeś mnie do nauki programowania. Żadna grafika do pocięcia i zakodowania już mi nie straszna. Wiem, że jeszcze daleka droga przede mną bo zaczynam przygodę z PHP i fajnie jakbyś w tym temacie coś nagrał bo masz niesamowity dar tłumaczenia. Pozdrawiam serdecznie.

[@patriks6056]

Muzyka z bajek ponoć PHP odchodzi do lamusa bo już w JS da się odnieść do baz danych - chyba na tym kanale jest nawet wspomniane o tym. Jednak zastanawiam się czy da się budować w JS różnego rodzaju formularz i ukrywać dane poufne. Przydało by się to :) A na pewno budowa formularza kontaktowego bo to na stronach się wykorzystuje często..

[@erwin_adv]

no no nie zapędzał bym się , że PHP odchodzi do lamusa spokojnie :P JS ma też swoje wady

[@krzysztofj.9166]

niedawno wprowadzili php 7 i jest dalej rozwijany. Poza tym większość CMSów wykorzystuje ten język

[@patriks6056]

za każdym razem jak się pytałem kogoś o naukę tego języka każdy z automatu mówił mi lepiej naucz się JS, PHP jest nie opłacalne.. więc opieram się tylko na tym.. tak czy siak jak się jest w czymś dobrym to zawsze się znajdzie pracę :P - mówiąc to takim przykładem.

[@Savanderr]

PHP nie odejdzie do lamusa, z jednej ważnej kwestii. Raz że jest intensywnie rozwijany, dwa że w przeciągu ostatnio 25lat powstało ogrom rozwiązać z użyciem PHP. Czy to frameworki ( Jak np. Laravel, Symfony2 ), czy CMS'y (Content Management System, np. Wordpress). Faktem jest też, ze Javascript posiada mnóstwo rozwiążań. Aczkolwiek to wcale nie wyklucza PHP, w szczególności po akutalizacji do wersji 7, która ogromnie została zoptymalizowana.

[@fejr89]

Dzięki Bartek

[@bardganik]

Robisz bardzo fajne filmy. Poprawiłbym jedynie to, że jak dajesz te napisy z błędami to mógłbyś robić cięcia i je poprawiać. Ale tak to super🙂

[@erykcz6531]

Brakuje jeszcze dokończenia tego kółeczka i listy, ale myślę, że tego opis się pojawi :D Ciekawy odcinek, pozdrawiam ;)

[@MrShadyKiller]

Kto i po co daje łapki w dół na czymś takim? Dobry materiał

[@paweupawel8890]

dzieki samuraju !

[@pawesieniawski173]

Samuraju, arigato :) Świetna robota!

[@georghins3351]

Witam, jeżeli do rozkładania elementów na stronie zastosujemy metodę "flex" lub "grid" , sposób przedstawiony w powyższym filmie na przenoszenie tekstu do kolejnej linii nie działa :( Pozdrawiam

[@Damian1Ch93]

Świetne, pozdrawiam :)

[@snoopyfrogs]

Widzę że za wczorajsze opóźnienie dziś jest wcześniej! Zasiadam do nauki!

[@SamurajProgramowania]

rekompensata ;)

[@KronikarzCieni]

można zmienić taką stronę na laptopa?

[@devman5813]

Cześć, czy można póżniej taką stronkę zmienić w apk i przesłać np sklep google? Jako aplikacja mobilna?

[@jarekjaro7325]

jak dodawać nowe urządzenia w google chrome dev, tak zeby były rzeczywiste rozmiary ekranu?

[@arekstec8853]

Jaka jest różnica między em a rem, czy to jest to samo? Często spotykam taki zapis.

[@LukaszSkyWalker]

Dzięki!!

[@patriks6056]

Swoją drogą uzupełniając delikatne braki czym się różni zapis span:after od span::after? Drugi to pseudo klasa powiedziane jest w filmiku a pierwszy zapis jak się nazywa? Jedna wersja wykona kod i druga też.. Więc w zasadzie jest jakaś różnica..

[@SamurajProgramowania]

Brak różnicy, po prostu organizacja w3c zaleca (piszę z tego co mam w głowie) używanie zapisu z dwoma dwukropkami (w przypadku pseudo elementów), przy czym ze względu na wsteczną kompatybilność akceptuje zapisanie z jednym.

[@SamurajProgramowania]

ps. jeśli w filmie jest pseudoklasa to nie jest to precyzjne (sorka), ::after jest pseudo elementem. (pseudo klasa to np. :hover)

[@krzysiekwychowaek1367]

mam jesno pytanko, w momencie jak w html dopisałem viewport to cała srona mi się rozwaliła, musiałem wszystko poprawiać rozmiarowo, ktoś wie dlaczego?

[@krzysiekwychowaek1367]

sory za szybko zadane pytanieXD

[@Redbulek]

Witam, Ja mam taki problem bo chce sobie na stronie ustawić background, tylko że moje tło, obrazek nie jest tak jak w kursie mniejszy od jak dobrze rozumiem VP tylko sporo większy i ustawiłem te tło w CSSie dla headera żeby nie nachodził ten obrazek na tekst i tutaj pojawia się mój problem: Ponieważ jak pozycja będzie ustawiona na landspace to wtedy widać to co jest na tym większym obrazku tzn co zostało ucięte. Moje pytanie brzmi w jaki sposób można to zmienić?, czy może lepiej stworzyć osobny obrazek dla landspace? Próbowałem zmienić width i height ale jak można było się domyślić jak dam height na 100vh to obrazek staje się rozciągnięty. Z góry dziękuje za odpowiedz, Pozdrawiam.

[@SamurajProgramowania]

Hej, by móc coś pomóc (ja lub ktoś inny) musisz dać dostęp do kodu np. wrzucając go na codepen (przy okazji jeśli nie znasz, warto poznać).

[@Redbulek]

codepen.io/anon/pen/vJoxVB

[@g3anonim]

Mam pytanie trochę z innej beczki. Załóżmy, że w przyszłości chciałbym zrobić taką stronę dla jakieś osoby odpłatnie, ale całą wiedzę pozyskałem z Twoich tutoriali i siłą rzeczy szereg rozwiązań będzie bazowało na Twoich przykładach np. "łamanie" tekstu w zależności od orientacji ekranu itd. Jak wtedy wyglądają kwestię prawne? Czy muszę wpisać jakiś komentarz typu "Based on Samuraj Programowani", czy to już jest kradzież własności intelektualnej i nie można korzystać? Ewentualnie, czy istnieje jakiś program do porównania źródeł i np. jak jest więcej niż 30% zgodności to już jest kopiowanie czyjegoś kodu? :)

[@SamurajProgramowania]

Dobry temat na kanał websamuraj na YT :) Generalne ochrona kodu sama w sobie jest bardzo mała, ale poruszę szczegółowo to zagadnienie. Oczywiście z tych tutoriali możesz czerpać jak chcesz i stosować kod jak i gdzie chcesz beż żadnego przypisania ;). Ale polecam pisać jeszcze lepszy kod! :)

[@doic]

Czy pokaże nam pan skrypt na rozwinięcie strony tzn. efekt strzałki i ikony nawigacji?

[@SamurajProgramowania]

ikony nawgacji nie wiem bo nie ma tutaj co nawigować (pewnie o menu zrobie osobny film), ale efekt strzalki oczywiście będzie.

[@doic]

Dziękuję bardzo za odpowiedź, pozdrawiam serdecznie i życzę miłego dnia :)

[@luucjano5768]

Witam, a jakieś kursy stacjonarne są? Bo jeśli łapie z tego co Pan mówi na filmie, to na kursie tym bardziej! Pozdrawiam

[@SamurajProgramowania]

zapraszam na websamuraj.pl :)

[@FacetJakBook]

Nie działa mi regulacja height w landscape... Ile bym nie wpisał zawsze tak samo mój github: github.com/ziemowitpl/WebSamuraj-WWW-od-zera Ostatni commit. Czy czegoś nie domknąłem ?? Pozdrawiam i Dziękuję! Przepraszam że w złej kolejności ale nie wiedziałem skąd wziąć tą dziewczynę...

[@hubercio120]

Jak zrobić "^" tylko, że większe ?

[@kk43506]

Mam taki problem, przy pozycji poziomej na mobile mam grafikę na headerze opuszczoną do dołu, żeby lepiej wyglądała (position: absolute; bottom -45%). I ustawienie headera na overflow:hidden nie obcina tych 45% grafiki która wystaje u dołu i przechodzi mi na main :( Czy to tak nie działa czy czegoś nie rozumiem?

[@SamurajProgramowania]

wrzuć na codepen, wtedy można zobaczyć o co chodzi.

[@kk43506]

codepen.io/kk43506/pen/rGBWrP Nie ma tej grafiki ale jak się zjedzie niżej na stronie to widać to pole między headerem a mainem w którym jest grafika a gdzie powinna być ucięta, mam nadzieję że wiesz o co mi chodzi :)

[@SamurajProgramowania]

Szczerze, to nie widzę problemu u siebie, ale spróbuj zarówno main jak i header ustawić im display: relative i oprócz tego header daj z-index: 1 a main daj z-index:2

[@kk43506]

nie pomaga :/ Na penie widać pod szarym tłem gdzie zaczyna się niebieskie tło maina, najpierw część jakby obramowaną a dopiero później czystą niebieską. I właśnie chodzi mi o to obramowanie na początku którego nie powinno być bo oryginalnie właśnie na to pole zachodzi mi niechciana grafika.

[@kk43506]

Pomogło dodanie do headera position:relative :) O to Ci chodziło? I co właściwie zrobiłem :D? ed. Jeszcze zauważyłem, że w chromie przy nexus 5x na widoku mobilnym można po kliknięciu na zmianę orientacji wybrać opcję np z włączoną klawiaturą albo paskiem wyszukiwania przeglądarki i właśnie przy tej klawiaturze wszystko się kurczy i najeżdża na siebię, jak ustawić aby klawiatura zasłaniała stronę i nie ingerowała w położenie elementów?

[@donkwaQ]

hej, możesz wrzucić gdzieś pełny kod? bo mi coś się nie zgadza i nie wychodzi dokładnie jak powinno i nie moge dojść gdzie jest błąd...

[@SamurajProgramowania]

Cześć, pliki masz w opisie.

[@donkwaQ]

właśnie znalazłem :D wybacz i dzięki

[@handymanpawel]

Gdzie się podział odcinek #4? :(

[@handymanpawel]

O jest info że...jutro :-( ....

[@jarekjaro7325]

jakby ktoś chciał wprowadzić konkretne urządzenia z rzeczywistymi rozmiarami, to na tej stronie są podane: www.mydevice.io/

[@frontdrag3621]

Wincy!! :D

[@Lbmaniak]

Mobajl fyrst.

[@wojciechnajda3417]

danke :)

[@wojciechtaras8331]

Ogarnia ktoś jak przesuwać strzałkę góra dół w divie bo u mnie wcale nie jest na środku demyt ;d;d

[@SamurajProgramowania]

Wojtku, na razie nie musisz dbać o to by strzałka była w środku w pionie (będziemy ją animować), zrób tak by była trochę mniejsza niż wielkość kontenera i wycentruj ją w poziomie za pomocą text-align.

[@piotrsawicki3804]

mam +!