Tutorial HTML CSS i Javascript, ale bez ściemy
HTML-код
- Опубликовано: 2 авг 2024
- ⭐ zrozumiecreact.pl/ - Sprawdź nasz kurs React! ⭐
👉 Newsletter: zaczynamyprogramowac.pl 👈
🎤 Discord: / discord 🎤
🔥 Facebook: / zaczynamy.programowac 🔥
👉 Newsletter: zaczynamyprogramowac.pl 👈
00:00:00 Intro
00:03:27 Przegląd zadania
00:22:52 Header
00:47:20 Stylowanie przycisków
01:13:00 Stylowanie walki
01:31:30 Podstawowa logika w JS
02:09:30 Logika wygranej/przegranej
Wyzwanie na frontendmentor:
www.frontendmentor.io/challen...
Kod na githubie:
github.com/FilipMam/rock-pape...
Na kanale znajduje się sporo odcinków, w których kodzimy strony i aplikację. Z perspektywy wielu z Was wygląda to tak, jakbyśmy od kopa otworzyli VSC i stworzyli w nim bez pomyłki stronę. Cóż... Realia wyglądają tak, że często do takich odcinków przygotowujemy się wcześniej, żeby samo nagranie przebiegło płynnie. Nawet pomimo tego zdarzają się błędy, które jesteśmy w stanie wyciąć w post produkcji, więc końcowy efekt wygląda na bardzo bezwysiłkowy.
Ostatnio prosiliśmy Was w ankiecie o wybranie frontendowe projektu, który zakodzimy bez wcześniejszego przygotowania. Chcemy w ten sposób pokazać Wam, że popełnianie błędów, trafianie na ściany i plątanie się we własnym kodzie jest normalne, nawet dla osób z większym doświadczeniem :)
W ankiecie wygrał projekt Rock paper scissors (kamień papier nożyce) i to właśnie nim zajmiemy się w tym odcinku!
Filip Mamcarczyk
Kacper Sokołowski
Co sądzicie o takiej formie filmu?
Nwm, nie oglądałem jeszcze.
@@masterpl7000 noob ja juz cały obejrzałem
Jestem mega podekscytowany - biorę się za oglądanie! 😎
Wydaję mi się, że jest to bardzo fajna forma pokazująca jak działa rzeczywiście programowanie, bo wiele osób się strasznie szybko demotywuję, i poddaje jak widzi w jaki sposób wyglądają jakieś kursy, albo problemy rozwiązywane na RUclips przez ekspertów, ale nigdy nie mają wglądu do tego jaka droga musiałabyć przebyta, aby osiągnąć takie rezultaty, sam początkowo kiedyś bardzo szybko się demotywowałem na to, że coś mi nie wychodzi drugi czy trzeci raz przez kilka godzin, aż nagle w końcu trafi się na rozwiązanie, bądź samemu się na nie wpadnie co jest jeszcze bardziej satysfakcjonujące. Wydaję mi się, że każdy programista musi przejść takie etapy, kodzenia, błedów, debugowania, czytania dokumentacji i wielokrotnego fixowania kodu, żeby widzieć efekty takiej pracy. Dzieki takim materiałom jest idealnie pokazane, że nawet przez profesjonalistów, projektowanie oprogramowania, stron etc. wygląda tak samo jak u początkujących zmaganie się z pierwszymi problemami. Zdecydowanie chciałbym więcej takich materiałów, widzieć na polskim Youtubie, mimo, że to nie są języki, które akurat wykorzystuję. Pozdrawiam i pamiętajcie:
8 godzin debugowania jest wstanie zaoszczędzić 5 minut czytania dokumentacji. Szanujmy nasz czas ;3
bardzo przyjemna, mysle ze tego typu kontent idealnie pasuje na stream
Świetnie! W odrealnionym świecie sztucznej perfekcji pokazujecie prawdziwe oblicze codziennej pracy. Oby więcej takich materiałów! Dają kopa w momencie zastoju :-)
Tego potrzebowałam ❤️ Będzie przerabiane! 😃
Świetny materiał!
Więcej takich odcinków, świetna sprawa !
Świetny materiał. Przywróciłeś mi wiare w siebie! :D
Super robota!
Bardzo dobry tutorial, zacząłem naukę od Udemy a obecnie przechodzę przez freecodecamp, udaje mi się kończyć kursy i projekty a gdy na czymś utknę korzystam z pomocy Google jednak mimo to wiele konceptów trudno zapamiętać i zrozumieć kończąc dane wyzwanie tylko raz, ten dodatkowy komentarz do twojej pracy w tym filmie pozwolił mi lepiej zrozumieć kilka spraw :)
Świetny film
Bardzo fajny film, dzięki za polecenie stronki frontend mentor, bedzie ćwiczone 🤟
Taak! Brakowało mi takiego tutorialu.
Świetna forma wideo! Więcej takich :D Co prawda 3 godziny musiałem brać na kilka podejść ale i tak jest to super rozwiązanie!
Bardzo fajny film. Gratuluję umiejętności.
super filmik :)
Trzeci dzien to juz ogladam 😎
Sam korzystam dość często z Frontend Mentora. Fajnie zobaczyć jak ktoś podejmuję próbę przejścia przez takie zadanie od początku do końca w realny sposób. Szacun za tak długi i wartościowy materiał 👍💪
Dzięki :) !
Zacząłem od 9 a kończę o 1:45 z przerwami. Nie wszystko zrozumiałem i nadążałem z logicznym myśleniem. Super materiał. Kiedyś śmiałem się z ludzi co mówią , że portfolio mają grę papier kamień nożyce. Po tym co tu narobiłeś zyskałem uznanie.
Super film. Następnym razem dawaj stream live :D
480👍Obejrzałem całość👌Pozdrawiam👌💻👌⌨️👌
Hej, zacząłem oglądać ten kanał niedawno. Treściwe i wartościowe treści, swietnie się ogląda, słucha i uczy. Dzięki!! PS. Taka forma odcinka jak najbardziej świetna, więcej takich 😄
Dzięki!
Fajny film i pomysł :D Można również zrobić podobny format, ale w formie live'a
swietnie
Ej to jest supeeeeeer :)
Dzięki!
@@JZP Przede wszystkim jest to super, że można z tego filmu wywnioskować, w jaki sposób układać plan w projekcie, nad czym zastanawiać się od początku oraz od czego "ZACZĄĆ" , czyli to co jest w zamyśle kanału :) Dla takiego amatora jak ja to ważne. Pozdrawiam :)
@@k9.jhl. Dzięki! Pozdro!
Mega spoko! Na waszym kanale jest dużo filmików o podstawach, może warto dodać coś o reacie lub angularze?
Dzięki za sugestię
Super obejrzeć jak ktoś inny podchodzi do programowania, mi niestety tak dobrze nie idzie jeszcze z CSS. Miło wiedzieć, że istnieje coś takiego jak aspect-ratio bo ostatnio musiałem przy zadaniu pisać tą funkciolaność ręcznie w JS.
Nie mart się, przyjdzie z czasem :) Pozdro!
Super kanał będzie może poradnik do SCSS?
Fajnie by było jakby pojawiły się jakieś tutoriale prezentujące wykonanie prostych paneli administracyjnych, np. z galerią. Czy da się wyłącznie zrobić coś takiego z użyciem baz danych, czy są jakieś inne myki...
@Jak zacząć programować? Jeśli chodzi o opcję Keep Open to można ją wywołać w szybszy sposób:
- Double click na plik
- Środkowy przycisk na plik
- Ustawienie, żeby plik zawsze był otwierany w trybie Keep Open (na pojedyńczy click), kroki poniżej
1. Ctrl + Shift + P
2. Wpisujemy 'Preferences: Open User Settings' > Zatwierdzamy
3. W Search settings wpisujemy 'workbench.editor.enablePreview'
4. Odznaczamy checkbox
Pozdro :D
Dzięki!
Według mnie taka forma filmu pozwala na uczenie się naprawiania błędów
Wspominasz o prettier, a co sądzisz o ESLint? Materiał oczywiście jak zawsze pierwsza klasa :-)
Z ESLint też warto korzystać :) Dzięki za komentarz :)
Trochę nie wierze. Jakiś miesiąc temu szukałem sobie pierwszej rzeczy jaką mogłem napisac znając html/css i bedąc po 3 zajęciach javascriptu. Waszego filmu dzisiaj nie uda mi się obejrzeć. Ale mega mnie zastanawia jak rozwiązałeś pewne problemy. Mój kod jest słaby. teraz wiem więcej i planowałem zrobić w ramach treningu refaktoryzację. Teraz będzie mnie korcić podejrzeć jak jest u Ciebie. Pozdrawiam P.S (ze spokiem i jaszczurką też był plan (nawet jako głowny) ale ciężko znaleźć było spoka fajnego w svg;D
Ale w co nie wierzysz? :D
Super! Te podstawy są ciężkie, ja podchodziłem do kodowania kilka razy, i nie robiłem tego lata. Wiem, że mogę zainstalować frameworki i robić gotowe strony, kopiować kod od innych, przecież setki tych rzeczy już powstawało, i naprawdę robić jakiś wkład.. Ale nadal, nie mam podstaw w postaci czystego JS, dużego doświadczenia z HTML, nie znam preprocesorów CSS - i potrzebuje czuć się w tym biegły, sam dla siebie.
Co nie zmienia faktu, że jestem pewien że umiałbym zrobić już ciekawą i w miarę złożoną aplikację.
Problem jest taki, że nie wiedziałbym czemu i jak ona działa :D
Pozdrawiam!
Dzięki! Pozdro :)
Mimo że siedzę w android studio i kotlinie, szacuneczek że pokazujesz realia programowania a nie marketingowe slogany :) 5!
a już myślałem że jedynym mobilniaczem tutaj jestem xd
Dzięki
+ gameDev :)
Teraz bylo by fajnie zobaczyc to albo podobne zadanie ale z reactem itp. ;]
Podbijam
Nagracie kiedyś jakieś kursy lub poradniki na temat C#?
Cześć, świetny materiał, można wiele się nauczyć, mimo że w kilku momentach nie rozumiałem kilku rzeczy :D Przy okazji, w jaki sposób ustawiłeś MDN w języku polskim? osobiście wolę czytać dokumentację po angielsku bo i tak jest to bardzo ważne, ale czasami jak nie rozumiem jednej rzeczy 5 godzin to przeczytanie czegoś w języku polskim może chociaż mentalnie podnieść na duchu :D
Dzięki za komentarz! W prawym górnym rogu jest wybór języka :)
@@JZP Zgadza się, natomiast u mnie języka polskiego nie ma, stąd pytanie :D
Czemu w projektowanie bez podejścia mobile first? Wszędzie uczą żeby jednak media queries dostosowywać do większych ekranów a nie mniejszych
To czego się uczy, a to co robi się w praktyce to dwie różne rzeczy :)
Masz buga w finalnym kodzie, linijka 91 ;) Masz tam klucz do LSa playera zamiast AI i dlatego wynik po odświeżeniu strony (o ile komputer wygrał) będzie nadpisywał wynik gracza.
27:30 jak nazywa się wtyczka, którą się posłużyłeś do szybkiego zrobienia diva? słyszałem że w VSC jest coś takiego fabrycznie, ale ja tego nie mam :(
Emmet :)
Obejrzałem tylko początek i jedyne czego bym się przyczepił to focus na mikrofonie.. ;)
Czy będą robione kolejne challange z tej strony?
Jeśli się Wam spodoba to jak najbardziej :)
Fajny pomysł na film, szkoda że nie ma w opisie linku do kodowania/plików, pozdrawiam😀
Dodałem w opisie link do repo, dzięki za komentarz :)
fajny ten aspect ratio tylko niestety ma ponizej 90% na can i use
Jest coś podobnego jak frontendmentor tylko pod języki obiektowe jak C#/Java?
Codewars :)
Male pytanko pewnie wielokrotnie komentowane, ale nie znalazłem. Mam 42 lata czy jest sens wchodzić w ten świat, czy jest szansa na znalezienie pracy ?
Pytanie powtarzane wielokrotnie. Oczywiście, że warto! Wiek nie ma znaczenia
Zaproszenie do discorda mi nie działa
A klient zawsze dołączona pliki graficzne?
Zazwyczaj tak. Najczęściej w formie projektu na figmie/sketchu czy plików .psd :)
51:30 czemu ta kropka w src?
Przyzwyczajenie :)
1:37:17 nie rozumiem tego LocalStorage, jak to działa?, nie wytłumaczyłeś, tylko napisałeś kod,
jak ktoś to widzi pierwszy raz to czego się nauczy, to jakieś cookies?
Hej! Mamy odcinek o LocalStorage, poszukaj na kanale 🙂
@@JZP O, fajnie, dzięki 👍to w sumie można podlinkować w video ;)
Będzie link do gita? 😀
podbijam
Dodany w opisie :)
@@JZP Dzięki
Robię dużo projektów z frontendmentora i nie ukrywam, że autorzy dodają wiele smaczków nawet do najłatwiejszych challenge'ów i są tam zazwyczaj takie elementy z którymi problemy mogą mieć nawet dobrzy frontendowcy, aby wykonać je dobrze. Nad niektórymi challenge'ami potrafię siedzieć kilka dni, żeby wszystko było tak jak chce :)
Fajny RPS xD Ja kilka miesięcy podczas nauki zrobiłem swój ale teraz patrzę na ten kod to LOL XDDD
noxagen.github.io/r_p_s_project-game/ zapraszam jesli ktoś chce zagrać ^^
Materiał świetny jak każdy