Podstawy HTML + CSS w dwie godziny - kurs krok po kroku!
HTML-код
- Опубликовано: 11 июл 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.
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.
Super kurs! Wszystko jasno i po kolei wyjaśnione! Materiał przerobiony, dzień uważam za udany! Dzięki wielkie!
Świetna robota panie Filipie!!!!! Uwielbiam Pana kursy 👍 biorę się za naukę 💪
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 ;-)
Biorę się za oglądanie! Dzięki za fajny film i Wasz czas na jego nagranie!
Miłego!
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!!!
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 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ę.
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!
To jest naprawdę bardzo długi poradnik, opisany krok po kroku.. Bardzo szczegółowo. Szacun!
Dzięki Adrian!
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
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 ! :)
Naprawdę świetna robota! Gratulacje. Bardzo dobrze poprowadzone szkolenie.
Dziękuje za taki material, bardzo przydatny i pokazuje ze nie ma co sie bać!!!!
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)
Super kurs dla osoby całkowicie początkującej. Wszystko bardzo dokładnie wytłumaczone. Robicie super robote. Dzieki
świetny materiał.
duży szacun za końcowy fragment o semantyce.
super że podzieliliście materiał na części, można sobie przypomnieć konkretny element cssa :)
Dzięki za pomoc, świetna robota ❤️
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!
Odwaliłeś niesamowity kawał roboty. 👍 Dzięki tej lekcji postaram się nieco bardziej zrozumieć strukturę budowy plików .EPUB 🙂
Dzięki wielkie. Nareszcie ktoś tłumaczy krok po kroku jak się do tego zabrać. Oby więcej takich poradników. Pozdrawiam.😍😍😍😍😍😍😍😍💪💪💪💪💪💪💪💪
Świetny kurs. Dziękuję 🙂
Dziękuję bardzo za ten tutorial :) teraz już rozumiem gdzie robię błędy ❤️❤️❤️
Najlepszy kurs jaki oglądałem z tej dziedziny. Bardzo przystępny i czytelny. Brawo dla prowadzącego.
Wszystko super wyjaśnione dziękuję :D
Świetna realizacja!
Dziękuje za Kawał dobrej roboty!!!!
Dziekuje bardzo! Bardzo rzeczowo i konkretnie!
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!
Świetne tłumaczenie! Wspaniały film ❤️
Dzięki!
Szacunek. Wartosciowa i darmowa wiedza.
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.
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 ten kursik! :) Świetna sprawa
Bardzo dziękuje za ten kurs, bardzo przyjemnie się słuchało.
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
Dzięki za poradnik 😀 świetna robota
Rewelacyjny materiał! Dziękuję:)
Jesteście mistrzami !
Brawo. Po prostu brawo. Świetna robota i dzięki Ci za to.
Przyjemność po naszej stronie :)
Wszystko zostało przedstawione w bardzo jasny i łatwy do przyswojenia sposób.
Wielkie dzięki za materiał.
Dzięki!
Rewelacja ! , dzięki za film
WIELKI szacun - dobra robota to mało powiedziane 💪👏👍
Dzięki!
Bardzo fajny poradnik. Gratulację za przekaz.
Ja bym wszystko prawie zrobił w DIVach ;)
Ś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 :)
Super materiał, dużo mi pomógł :)
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!
genialny materiał !!
Ś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.
Jesteś koksem, dziękuję za tak przydatne info
Dzięki za pomoc! Fajny film!
Kawał dobrej roboty!
Świetny materiał. NIewątpliwie takie wirtualne CV będzie dodatkowym atutem podczas szukania pierwszej pracy w IT.
Dziękuję za udostępnienie 😀
Rewelacja. Zrozumiały język dla początkujących. Daje kopa do dalszej nauki. Brawo
Z zadnego filmu nie moglem sie nauczyc, szczerze, to jest bardzo dobry poradnik bo w koncu cos sie ucze, dziękuje za pomoc :)
super kurs :) dzieki
Szacun 😎💪
Dziękuję Filip - świetny materiał!
Przyjemność po naszej stronie!
pozdrawiam, swietna robota !
Dzięki!
Jestem pod wrażeniem!
Świetne lekcje! Pomogły mi zrozumieć wiele kwestii, które mnie strasznie irytowały do tej pory w nauce :D
Super materiał
Meeeega przydatny film dla takiego żółtodzioba jak ja na drodze do programisty ✌ Like i duuuuzy sub 👊
Dzięki!
Przydało się!
świetny film
Bardzo wartościowy poradnik
Oj jak przyjdę z pracy to będę sie uczyć 🥰
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 :)
ucze sie programować i normalinie wszystko zrozumiałem najlepszy porgramista i nauczuciel
najlepszy uczeń
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?
Świetny materiał😁
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!
Cudowne
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.
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ę!
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?
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.
zajebista sprawa🤩
Dzięki.
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!
Super odcinek odwaliłeś dobrą robote
Dzięki!
Świetna robota liczę na więcej tego typu poradników
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
Dobry poradnik dla początkujących i like
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
Pozdrawiam :)
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 ;)
witam. mam 33 lata i zacznam swoja przygode... mega fajnie lopatologicznie wytlumaczone. Przerobiłem 7 lekcji i jestem naprawde wkrecony. Dzieki za tak prosty i przystepny przekaz. pozdrawiam
I jak Ci idzie nauka? Zapał nadal jest?
@@uzytkownik2563 Hej. Cały czas mam motywację ale znalazłem coś co mi bardziej odpowiada i w to się wkręciłem. Uczę się Javy I bardziej kręci mnie ten temat. Warto szukać własnej drogi, co nie zmienia faktu że ten film to dobry materiał i warto zajrzeć 😉
@@NORMANthc a jak Ci idzie z Java?
Mnie póki co leci html css a pozniej chce poznać java script i zobaczymy
Bardzo przyjemny sposób prezentacji
Dzięki!
Ty super dzęki💓💓💓👍
Dzięki za szkolenie, dużo się nauczyłam! ☺ Jutro startuję z jakąś kolejną stronką mojego autorstwa:)