Tutorial HTML CSS i Javascript, ale bez ściemy

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:

Kod na githubie:

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

[bartoszludwiczak]

Świetnie! W odrealnionym świecie sztucznej perfekcji pokazujecie prawdziwe oblicze codziennej pracy. Oby więcej takich materiałów! Dają kopa w momencie zastoju :-)

[marekbialik]

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 :)

[jakobo]

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ł 👍💪

[yourSOULismy]

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.

[legolas]

Więcej takich odcinków, świetna sprawa !

[MrGrzesiek]

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 😄

[matteod]

Świetny materiał. Przywróciłeś mi wiare w siebie! :D

[mvrtynvx]

Tego potrzebowałam ❤️ Będzie przerabiane! 😃

[fabix_]

Bardzo fajny film, dzięki za polecenie stronki frontend mentor, bedzie ćwiczone 🤟

[patrykkozowski]

Mega spoko! Na waszym kanale jest dużo filmików o podstawach, może warto dodać coś o reacie lub angularze?

[Edoka]

Ś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!

[jerzypeka]

480👍Obejrzałem całość👌Pozdrawiam👌💻👌⌨️👌

[camilion]

Mimo że siedzę w android studio i kotlinie, szacuneczek że pokazujesz realia programowania a nie marketingowe slogany :) 5!

[otakusenpaifrompoland]

Bardzo fajny film. Gratuluję umiejętności.

[Johny_Scooba]

Fajny film i pomysł :D Można również zrobić podobny format, ale w formie live'a

[dropkapl]

Super film. Następnym razem dawaj stream live :D

[jllisek]

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

[pawegargula]

@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
4. Odznaczamy checkbox

Pozdro :D

[Sumcio]

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.

[tam_i_tu_czyli_wszedzie]

Według mnie taka forma filmu pozwala na uczenie się naprawiania błędów