Podstawy HTML + CSS w dwie godziny - kurs krok po kroku!
Вставка
- Опубліковано 1 сер 2024
- ⭐ zrozumiecreact.pl/ - Sprawdź nasz kurs React! ⭐
Newsletter: zaczynamyprogramowac.pl 👈
Nasza grupa na FB: / zaczynamy.programowac 👈
Discord: / discord 👈
Jeśli zacznienie usypiać to śmiało przełączcie prędkość oglądania na 1.25 albo 1.5!
[00:00] Intro
[02:54] #1 - Jak zacząć tworzyć stronę internetową?
[07:27] #2 - Edytor tekstowy
code.visualstudio.com/
www.google.com/intl/pl_pl/chr...
[11:10] #3 - Dodawanie elementów na stronie
[14:09] #4 - Praca z tekstem
[19:59] #5 - Wyświetlanie list
[22:48] #6 - Dodawanie linków do innych stron
[25:54] #7 - Dodawanie zdjęć
Link do zdjęcia: i.ibb.co/FXZRT4b/default-avat...
[29:29] #8 - Poprawianie wyglądu strony i wprowadzenie do CSS
[33:31] #9 - Szybsze dodawanie styli
[41:31] #10 - Oddzielenie HTML i CSS
[46:06] #11 - Dziedziczenie styli
[50:27] #12 - Podział na sekcje
[54:48] #13 - DevTools
[59:48] #14 - Ułożenie elementów na stronie
[1:04:54] #15 - Wymiary elementów cz. I
[1:14:50] #16 - Wymiary elementów cz. II
[1:22:08] #17 - Pozycjonowanie elementów (cz. I)
[1:26:29] #18 - Pozycjonowanie elementów (cz. II)
[1:31:47] #19 - Dodawanie ikonek
Ikonka urodzin: i.ibb.co/TqwK7Yy/birthday-cak...
Ikonka telefonu: i.ibb.co/RhT5HxQ/phone.png
Ikonka maila: i.ibb.co/7WWSZdP/mail.png
Ikonka pinezki: i.ibb.co/NN2gZdT/pin.png
[1:39:32] #20 - Klasy
[1:42:26] #21 - Pozycjonowanie elementów (cz. III)
iconmonstr.com/
[1:52:40] #22 - Stany elementów i animacje
[2:04:56] #23 - Cienie i ostatnie szlify
[2:09:47] #24 - Wrzucenie strony "do internetu"
[2:13:27] #25 - Dostępność stron internetowych
Kod źródłowy finalnej wersji strony:
github.com/FilipMam/kurs-html...
W tym kursie HTML i CSS poznacie podstawowe tagi i zasady tworzenia stron internetowych. Dowiecie się jak działają style i poznacie m.in. flexbox, animacji czy zasady box-modelu. Na koniec dowiecie się jak za darmo zahostować swoją stronę w internecie dzięki serwisowi Netlify.
Filip Mamcarczyk
Kacper Sokołowski
Uwaga!
W kursie a konkretnie w lekcji #22 mamy babol: ustawiamy outline na none. Niestety patrząc przez pryzmat dostępności stron jest złe zachowanie, więc starajcie się go nie używać, jeśli nie musicie.
Więcej o outline: none przeczytacie w artykule: www.a11yproject.com/posts/2013-01-25-never-remove-css-outlines/.
Pozdro!
Czy zamiast wartości obramówk outline: none; można przyjąć w to miejsce np: outline: hidden; żeby rozwiązać ten problem ?
@@mateuszkotarba2158 czy doszedłeś może już do tego czym można zastąpić zamiast outline: none? Będę wdzięczna za odpowiedź.
3:01 To ty masz 104 lata? WTF
Tego się nie spodziewałem. Nie wiem kto Pana uczył lub czy pomysł na film jest autorski ale jest rewelacyjny. Sposób przedstawienia, narracja absolutne mistrzostwo. Dziękuje i proszę o więcej. Perełka.
Super kurs! Wszystko jasno i po kolei wyjaśnione! Materiał przerobiony, dzień uważam za udany! Dzięki wielkie!
Naprawdę szacun, za treść, przekazanie, przykłady, linki itd. Dzięki za włożoną pracę, warte każdej minuty! Zapisane w ulubionych do powtórki i ćwiczeń a tymczasem zabieram się za Twój kolejny kurs ;-)
Świetna robota panie Filipie!!!!! Uwielbiam Pana kursy 👍 biorę się za naukę 💪
Uczę sie programowania od niedawna, A to jest najbardziej czytelny kurs CSS i Html jaki znalazłem. Dziękuję!
Dzięki!
@@JZP nagrałes moze więcej poradników krok po kroku ?
@@stefanbatory8649 A szukałeś na kanale?
@@stefanbatory8649 Tak, sprawdź sobie playliste 'tutoriale z kodowania' na naszym kanale :)
I jak tam po 9 miesiącach? Kontynuujesz naukę programowania?
Świetny kurs. Dzięki bardzo za ogrom pracy, który musiałeś wykonać i mnóstwo pracy w to włożyć. Bardzo dużo można się nauczyć. Gratulacje
Właśnie skończyłem ten kurs po dwóch dniach. To było szalenie inspirujące i rozwijające. Super. przez najbliższy miesiąc będę się tym "bawił". Już nie mogę się doczekać. Sam kurs bardzo przystępny ale przede wszystkim wszystko spokojnie i dobrze przekazane. Na pewno zajrzę do kolejnych kursów.
Dziękuję za pomoc! To moje pierwsze kroki z HTML i CSS, wszystko wytłumaczone jasno i zrozumiale. Gorąco polecam!
Niesamowicie jasno wytłumaczone podstawy. Dzięki!
Bardzo, bardzo DZIĘKUJĘ za ten kurs! REWELACJA na którą długo czekałam. =D Bardzo przystępnie tłumaczone i wskazanie na konkretnych przykładach. SUPER pomysł i wykonanie ! BRAWO!!!
Dziękuje za taki material, bardzo przydatny i pokazuje ze nie ma co sie bać!!!!
Skończyłem właśnie oglądać całość i z czystym sumieniem mogę przyznać, że film świetny i myślę, że najlepszy poradnik do HTML i CSS. Zaczynam właśnie przygodę z programowaniem i na pewno obejrzę jeszcze inne filmy z programowania :D
Super film dzięki za czas poświęcony. Super tłumaczenie i jeszcze te mówienie ze spokojem😍. Pozdrawiam bardzo serdecznie i oby więcej takich
Biorę się za oglądanie! Dzięki za fajny film i Wasz czas na jego nagranie!
Miłego!
Super materiał, bardzo rzeczowy i praktyczny. Dzięki! :D
Super kurs. Krótko i na temat. Jestem bardzo zadowolona. Bez problemu tworzę strony w HTML. Dziękuję.
Najlepszy kurs HTML-CSS jaki robiłem. Było to dla mnie powtórzenie, wszystko o czym w kursie było mi już znane - hurrra!!! Radość bo co 3 dni średnio się załamuję :(. Dykcja, poprawność, logika, i co jeszcze ? Wszystko na 10/10 ! :)
Najlepszy kurs jaki oglądałem z tej dziedziny. Bardzo przystępny i czytelny. Brawo dla prowadzącego.
Dzięki wielkie. Nareszcie ktoś tłumaczy krok po kroku jak się do tego zabrać. Oby więcej takich poradników. Pozdrawiam.😍😍😍😍😍😍😍😍💪💪💪💪💪💪💪💪
Naprawdę świetna robota! Gratulacje. Bardzo dobrze poprowadzone szkolenie.
super że podzieliliście materiał na części, można sobie przypomnieć konkretny element cssa :)
Super kurs dla osoby całkowicie początkującej. Wszystko bardzo dokładnie wytłumaczone. Robicie super robote. Dzieki
Nigdy takich nie za dużo. Czasami nawet jak się już zna dany temat to warto posłuchać jak uczą inni. Dzięki za film.
Odwaliłeś niesamowity kawał roboty. 👍 Dzięki tej lekcji postaram się nieco bardziej zrozumieć strukturę budowy plików .EPUB 🙂
Super materiał, wszystko bardzo przejrzyście i szczegółowo wytłumaczone. Zrozumiałem parę kwestii z którymi wcześniej miałem problem, także dzięki wielkie :D Nic tylko czekać na kurs z JS i bardziej zaawansowanych tematów :D
Dzięki!
Dziękuję bardzo za ten tutorial :) teraz już rozumiem gdzie robię błędy ❤️❤️❤️
To jest naprawdę bardzo długi poradnik, opisany krok po kroku.. Bardzo szczegółowo. Szacun!
Dzięki Adrian!
świetny materiał.
duży szacun za końcowy fragment o semantyce.
Dzięki wielkie za ten poradnik 😍 motywujesz i dajesz od siebie mega pozytywną energię dzięki, której człowiek chce się rozwijać! A do tego konkretnie, na temat i mega szczegółowo prowadzisz lekcje, dzięki czemu wszystko mogłam na spokojnie zrozumieć 😜Kawał genialnej roboty i jeszcze raz dziękuję 😁
Nie ma za co, cieszę się, że się przydało!
Dzięki za pomoc, świetna robota ❤️
po obejrzeniu całego materiału mogę stwierdzić, że to jeden z najlepszych jakie oglądałem, mega konkretne, rzetelne, wytłumaczone jak małpie, propsik :)
Dzięki!
Bardzo dziękuje za ten kurs, bardzo przyjemnie się słuchało.
Świetna realizacja!
Fajny poradnik, proponuje oglądać w prędkości 1.5 :D
Świetny poradnik dla początkujących. Obecnie sam z niego korzystam i nauka idzie mi świetnie. Rozwijaj kurs dalej :)
Dzięki za miłe słowo!
Świetny kurs. Dziękuję 🙂
Wszystko zostało przedstawione w bardzo jasny i łatwy do przyswojenia sposób.
Wielkie dzięki za materiał.
Dzięki!
Rewelacyjny materiał! Dziękuję:)
Szacunek. Wartosciowa i darmowa wiedza.
To jest najlepszy kurs informatyczny jaki kiedykolwiek widziałem. Wszystko przedstawione w prosty i zrozumiały sposób. Nigdy bym nie pomyślał że można nauczyć się html-a i css-a w jeden wieczór.
+1 tylko że mi to zajęcił 6 godzin heh (3h na 1h)
Wszystko super wyjaśnione dziękuję :D
Super kurs, napewno będę dalej próbował z programowaniem bo widać, że ciekawie opowiadasz i jest to ciekawy temat
Dzięki!
PS - wczoraj oglądałem Totoro :D
Świetne tłumaczenie! Wspaniały film ❤️
Dzięki!
Brawo. Po prostu brawo. Świetna robota i dzięki Ci za to.
Przyjemność po naszej stronie :)
Dziękuje za Kawał dobrej roboty!!!!
Świetny materiał. Bardzo dobry dla początkujących. Bardzo dobrze porządkuje wiedzę do której spokojnie można później wracać. W zasadzie z tym materiałem spokojnie można startować do budowania swoich pierwszych stron internetowych przez osobę spoza branży :)
Dziekuje bardzo! Bardzo rzeczowo i konkretnie!
Dzięki za poradnik 😀 świetna robota
WIELKI szacun - dobra robota to mało powiedziane 💪👏👍
Dzięki!
Świetny film. Staram się uczyć regularnie. Średnio 2 razy dziennie przeżywam załamanie, raz na 2 dni dochodzę do wniosku, że to nie dla mnie, ale próbuję cisnąć dalej :D
Spoko, ja pracuję jako programista już parę lat i też często myślę, że to nie dla mnie :D głowa do góry!
każdy programista przez to przechodzi :)
Mam nadzieje że działasz dalej
@@xpaiinzexstasii979 tak :D znalazłem pracę jako project manager sekcji web, a wieczorami uczę się JSa :D
Zawsze na początku jest trudno. Jako uzupełnienie polecam kanał pasja informatyki. Są tam także lekcje HTML, CSS i Javascriptu. Dodatkowo jest PHP, C++ i inne przydatne filmiki do nauki programowania.
Świetny materiał. NIewątpliwie takie wirtualne CV będzie dodatkowym atutem podczas szukania pierwszej pracy w IT.
Dziękuję za udostępnienie 😀
Wielkie dzięki i chapeau bas za formę przekazania wiedzy. Nic lepszego na start nie mogłem znaleźć. Dopiero zaczynam swoją przygodę z programowaniem. Jestem podekscytowany i pełen zapału chociaż wiem, że będzie ciężko. Postaram się nie poddać i życzę innym wytrwałości! ;)
Powodzenia!
Rewelacja. Zrozumiały język dla początkujących. Daje kopa do dalszej nauki. Brawo
Jesteście mistrzami !
Z zadnego filmu nie moglem sie nauczyc, szczerze, to jest bardzo dobry poradnik bo w koncu cos sie ucze, dziękuje za pomoc :)
Bardzo ciekawy retoryczny dobrze tłumaczony kurs polecam 💪👏
Bardzo fajny poradnik. Gratulację za przekaz.
Ja bym wszystko prawie zrobił w DIVach ;)
Jesteś koksem, dziękuję za tak przydatne info
Świetne lekcje! Pomogły mi zrozumieć wiele kwestii, które mnie strasznie irytowały do tej pory w nauce :D
Rewelacja ! , dzięki za film
Super materiał, dużo mi pomógł :)
genialny materiał !!
Dziękuję Filip - świetny materiał!
Przyjemność po naszej stronie!
Dzięki za ten kursik! :) Świetna sprawa
Właśnie od tego filmu zacząłem się uczyć programowania i tworzenia stron internetowych. Dziś powiedziałem sobie, że zrobię 3 punkty, ale nawet nie zauważyłem jak doszedłem do 20 minuty. Treść wciągająca i przedstawiona tak prosto, że bardziej się już chyba nie da. Bardzo dziękuję za waszą ciężką pracę!
Jestem pod wrażeniem!
Szacun 😎💪
Kawał dobrej roboty!
Próbowałem zaczynać od podstaw HTML na code academy. Ale dobrze, że tu trafiłem, bo wiedza podana w bardziej przystępny sposób :)
Przydało się!
Bardzo wartościowy poradnik
świetny film
Dzięki za pomoc! Fajny film!
super kurs :) dzieki
Meeeega przydatny film dla takiego żółtodzioba jak ja na drodze do programisty ✌ Like i duuuuzy sub 👊
Dzięki!
Czesc, dziekuje za ten material, nie tylko rozjasnil mi to czego nie potrafilem zrozumiec z podrecznika ale rowniez mocno mnie podbudowal. Mam 23 lata i moim malym marzeniem jest zdac egzaminy na technika programiste, poki co jestem na poczatku drogi, daje sobie 2 lata, a potem mam nadzieje rozwijac sie dalej i sprobowac znalezc prace w tym zawodzie, twoja osoba jest dla mnie inspiracja, dziekuje ;)!
Dzięki! Trzymamy za Ciebie kciuki!
Super materiał
Dla tych którym komenda " justify-content: space-between;" nie nie wprowadza zadnych zmian, sprawdźcie czy informacje podane w nie sa za dlugie, jesli tak dodajcie w polowie żeby podzielic tekst na dwie linijki.
Oj jak przyjdę z pracy to będę sie uczyć 🥰
Świetny materiał😁
Dzięki!
ucze sie programować i normalinie wszystko zrozumiałem najlepszy porgramista i nauczuciel
najlepszy uczeń
Cudowne
Od tego zaczynałem :D, aktualnie lecę już z nauką reacta
Co bys mi polecił po tym kursie?
@@franekdzierzega9432 Dużo projektów, klep strony i baw się jak możesz. Oglądaj designy przykładowych stron internetowych i próbuj je stopniowo odtwarzać. Jak czegoś nie umiesz zrobić to szukaj po internecie i rozszerzaj swoja wiedze. Jak bedziesz czuł się swobodnie tworząc proste strony to polecam zacząć wtedy nauke javascripta. Najlepiej jak dołączysz do discorda z opisu tego filmu, tam jest wiele świetnych ludzi, którzy na pewno Ci pomogą w czasie gdy nie bedziesz wiedział jak coś zrobić, lub w jakim kierunku teraz się rozwijać. Najprostszym sposobem na nauke jest zabawa kodem i tworzenie projektów :).
@@Sallciq siema, ile czasu zajęło Ci ogarnięcie HTMLa i CSS zanim zabrałeś się za JavaScript?
pozdrawiam, swietna robota !
Dzięki!
Bardzo dobry poradnik, wszystko dobrze wytłumaczone.
Polecam robić sobie notatki, dzięki którym można przypomnieć sobie później co za co odpowiada.
Dzięki.
zajebista sprawa🤩
Świetna robota liczę na więcej tego typu poradników
staryyy ile ja się nauczyłem dzięki temu filmikowi! dopiero zaczynam:D
Cieszę się :D Powodzenia dalej!
@@JZP mam pytanie co zrobić żeby po kliknięci w dany napis kopiował on się automatycznie do schowka?
kurs zacząłem we wtorek około 18, skończyłem teraz w środę około 4 rano, a kurs niby trwa 2h :) Zasiedziałem się na urlopie. Czas zleciał dość szybko. Kapitalna i klawa forma przekazu informacji, w innym czasie oglądałem 3h Twojego kodowania. Podziwiam Twój talent jako szkoleniowca. Dziękuje w imieniu własnym gdyż jestem 40+.
Ja 2h rozciągnołem na 4 tygodnie bo czas nie zna litości :/ powodzenia!
wlasnie niedawno postanowilem sprobowac swoich sil w programowaniu jakos idzie cos nie cos rozumiem hah jutro sam sprobuje zrobic to co dzis sie nauczylem i malymi kroczkami do przodu. Dobrze miec material w takim wykonaniu naprawde duzo sie mozna dowiedziec .
pozdro
Super odcinek odwaliłeś dobrą robote
Dzięki!
Dobry poradnik dla początkujących i like
Filmik jest kozacki
...
Bardzo przyjemny sposób prezentacji
Dzięki!
Ty super dzęki💓💓💓👍
Dzięki! CSS przestaje boleć.🤩
To co zrobiłeś i jak to zrobiłeś jest absolutnie doskonałe. Pasuje mi wszystko sposób przekazania wiedzy, tempo jej przekazywania. Pierwszy kurs z którego rozumiem 100% poczynionych zagadnień. Pełen profesjonalizm. Dziękuję Ci.
Dzięki!
+1
Super kurs! Może odcinek kontynuacyjny na przykładzie z bardziej zaawansowaną stroną lub JavaScript w użyciu z HTML i CSS? Pozdro!
Subskrybuj nasz kanał, a na jesieni się nie zawiedziesz ;)