Strona internetowa od zera. Cały kod HTML 1/4
HTML-код
- Опубликовано: 8 сен 2024
- Jak zbudować stronę internetową od podstaw. Dla osób, które są na początku swojej nauki tworzenia stron.
Ucz się z moich kursów na Udemy. Mam dla Ciebie zniżki na moje kursy.
Kod do kursu Web developer od podstaw w 15 intensywnych dni: websamuraj.pl/...
Front-end średniozaawansowany w 15 intensywnych dni: websamuraj.pl/...
Kod do kursu Kompletny kurs programowanie w JavaScript: websamuraj.pl/...
Kod do kursu Zaawansowane projekty w CSS i JavaScript: websamuraj.pl/...
Kod do kursu React od podstaw: websamuraj.pl/...
Kod do kursu Node.js, Express i MongoDB: websamuraj.pl/...
1) Struktura HTML - • Strona internetowa od ...
2) Wygląd CSS 1/2 - • Strona internetowa od ...
3) Wygląd CSS 2/2 - • Strona internetowa od ...
4) Bonusy :) - • Bonus do serii "Pierws...
Dzięki ci, że będziesz to tłumaczył na przykładzie robienia gotowych stronek :) Można zobaczyć jak to wszystko działa a nie jak w niektórych kursach, strukture pokażą na przykłądzie kilku kolorowych prostokątów i weź to potem wykorzystaj :)
To jest podstawowy problem nauki z tymi wszystkimi tutorialami. Na szczęście jest Samuraj i Zelent.
tyle ze u zelenta w tutach nie ma nic o rtd i to trochę ssie
rtd? co to?
nie sądziłem, że tak łatwo mi pójdzie z programowaniem mojej pierwszej strony. Zawsze uwielbiałem spędzać czas przed komputerem, ale nigdy nie robiłem nic sensownego. Postanowiłem nauczyć się programować i powiem Ci szczerze, że nie sądziłem, że tak łatwo mi pójdzie napisanie swojej "pierwszej strony" i co najważniejsze cieszy mnie to, że coś udało mi się stworzyć. Nie zapominam o tym, że udało mi się to zrobić z twoją pomocą, naprawdę mówisz prosto i zrozumiale, a to się liczy. Chyba zostanę na dłużej z programowaniem. ;) Fajna zabawa i chociaż czas spędziłem lepiej przed komputerem. Pozdrawiam
Bardzo dobrze wykonany materiał. Wcześniej miałem okazję obejrzeć także ten od p. Mirosława Zelenta, ale od trzeciej części miałem problem z jego właściwym przyswojeniem. Tu o dziwo cały kod działa bezproblemowo i zrozumienie przychodzi łatwo a sam materiał ogląda się z przyjemnością.
Świetnie wytłumaczone najlepszy i jedyny dobry poradnik jaki widziałem :) Pozdrawiam !
Wielki szacunek za takie wyjaśnienie tego tematu w tak przystępny sposób. W gimnazjum zaliczyłem tworzenie stron w FrontPage (stworzenie i postawienie jej na serwer+ domena - mając lat 14-16 gdzie większość chłopaków lata w tym wieku za piłką) a potem w LO czysty HTML+ramki+tabele itd (i tworzenie stron na zaliczenie tematu z informatyki). Teraz do tego wracam za Twoim pośrednictwem Samuraj, wracam do korzeni, ale czuję że będzie coś mega. Robisz kapitalną robotę :)
Dzięki Dominik. Powodzenia! :)
A pomozesz wrzucic strone na serwer?
Powiem że jesteś Bogiem, dosłownie :) !!! Bardzo fajnie się Ciebie słucha, masz dar do przekazywania wiedzy i dzięki Tobie zainteresowałem się tym tematem bo wiem jak do tego podejść. Dzięki wielkie za konkretne uporządkowane materiały i rady, motywacja wzrasta z każdym dniem i mam nadzieję, że bedziesz kontynuował swoją pracę dla nas :D. Z góry bardzoooo dziekujemy za poświęcony czas. Suby są, polubienia są, przypomnienia o Twoich filmach również ;) pozdrawiam i kontynuuję naukę
Dzięki Przemku! Powodzenia w nauce i wielu udanych projektów w przyszłości :)
będą również w późniejszej drodze poruszane podstawy javascript i JQuery, bardzo opornie mi to idzie, a Pan potrafi przekazywać w bardzo przystępny sposób wiedzę
Paweł, jak najbardziej, jestem wielbicielem javascript a korzystam też z jquery :) W pierwszej kolejności chce jednak zrobić sporo materiałów o css (projekty)
Jest to mój kolejny z filmów i codziennie przed spaniem zadaje sobie pytanie czy obejrzeć jeszcze jeden czy już iść spać 😀 masz dar , rewelacyjny głos i wszystko jest takie jasne . Poświęciłem tydzień po godzinie dziennie na oglądanie tej serii HTML od podstaw i w weekend postaram się zrobić pierwsza stronę dzięki tobie. Mega kanał naprawdę polecam .
Uwielbiam samuraja! 😁
Witam. Na wstępie chciałbym serdecznie podziękować że poświęca Pan swój czas na nauke innych.Startowałem już z wieloma kursami wideo jednak dopiero video zamieszczane przez pana mnie nie nużą i wręcz czekam na następne :) Chciałbym jedynie jeszcze zapytać się o jedną rzecz,która moim zdaniem jest dość istotna, w przyszłości być może nawet obowiązkowa. Chodzi mi o dodawanie "alt" do obrazków - róbmy to nie tylko pod wyszukiwarke internetowa i gdy obrazek nie moze sie zaladowac, obecnie "alt" jest ważny ze względu na czytniki ekranowe i ułatwienie dostępu do stron dla osób niewidomych. Myśle że warto o tym wspomnieć aby przy tworzeniu opisów obrazków zwracać uwagę aby opis "alt" był nieco bardziej treściwy i nie ograniczał sie np do słowa "logo","zdjęcie" itp. ;) PS. Życzę wytrwałości, zarówno Tobie Samuraju, aby codzienne sprawy nie pochłonęły Cie na tyle żebyś zwolnił tempo, jak i nam, uczniom aby udało się zacisnąć zęby i dać radę znaleźć te 20godzin tygodniowo i mieć ogromną satysfakcje z efektów juz za kilka miesięcy:)
Dzięki, świetna uwaga, wspomnę o tym.
a wiesz dlaczego ...? Bo to humanista jest :)
Super filmiki! Bardzo przyjemnie i bezstresowo przedstawione :)
wszyscy : oglądają
ja: robię 10 minutową pauzę na pobranie tego czegoś
Genialne.Tego mi właśnie było trzeba, żeby zajarzyć o co w tym wszystkim chodzi.Jak to razem ze sobą skleić.W sumie banalnie proste.Nie moge doczekac sie CSS.Pozdrawiam serdecznie. Dziekuje za ten kanał i twoją prace i wysiłek, żeby kogos czegoś nauczyć, no ale też coś po sobie pozostawić! Zaczęła tworzyć się historia.
Ale mega baza wiedzy. Już jesteś moim idolem a jako motywacja powiedziałem sobie muszę za wszelką cenę być lepszy niż "Samuraj programowania"!!!Oczywiście nieosiągalne Pozdrawiam dziękuję i lecę do następnych filmików.
Dzięki tobie będę miał szóstkę z informatyki :)
Cieszę się, że tutaj trafiłem! Oglądałem już trochę tutów, ale Twoje są najlepsze. Dzięki, że poświęcasz na to swój prywatny czas. Szacuneczek.
przydało sie i 2022 roku. Dzięki wielkie!!
Bardzo interesująco,dokładnie i szybko wytłumczone. Chodź z HTML i CSS działam podczas edycji gotowych motywów stron np. w WordPress już od bardzo dawna, fajnie jest podszkolić się w tworzeniu wszystkiego samemu od podstaw. Dziękuję :)
Dzięki, robisz naprawdę dobrą robotę!
Oglądając te filmy z wdzięczności wyłączyłem nawet Adblocka, w razie gdyby miał być jakiś przychód z reklam :) W dzisiejszych czasach jest rzadko spotykanym zjawiskiem, szczególnie w Polsce. :)
Pozdrawiam!
Przerobiłam już cały kurs szybkiego wstępu, teraz jestem w trakcie tego. Świetnie tłumaczone! Póki co jestem zafascynowana pisaniem, oby tak już zostało. Czekam na kolejne i kolejne tutoriale :)
to tak jak ja ;) pozdro
SUPER!!!!Dzięki twoim poradnikiem nauczyłem się tworzyć strony,inni gadają gadają a ty pokoleniu powolutku tlumaczysz i to mi sie podoba!WIĘCEJ TAKICH PORADNIKÓW!😁😁😁😂😁😎
Kolejny super odcinek! Dziękuję ;)
Zajebisty poradnik. Polecam
Dziękuję panu bardzo! Świetnie pan tłumaczy i to dzięki panu ogarnęłam jak robić stronę html. Jeszcze raz bardzo dziękuję!
Dziękuję bardzo za pomoc dzięki panu mogę otworzyć business
Super film, super inicjatywa! Wszystko jasno i czytelnie!
Super wszystko omówione, oglądam z zaciekawieniem i od razu przelewam to do Bracketsa. Dzięki za ten film!
Bardzo dobry odcinek. Udało mi się wszystko szybko i łatwo wykonać, chociaż wątek ze wstawianiem ikonek w sekcji jest dla mnie słabo wytłumaczony, ale to tak jakbym miał się czegoś czepiać.
Dzięki za komentarz, możliwe że zbyt powierzchownie pojechałem z tym tematem :/ Może kiedyś jeszcze wrócę przy okazji obrazków i meta na facebooka i innych elementów graficznych umieszczanych w headzie.
Dziękuję, idzie mi coraz lepiej! Strasznie się cieszę!
Dzięki, super filmik, wszystko ładnie wytłumaczone. Używam tych poradników żeby zrobić projekt do szkoły i powiem że polecam!
powiem ci że jesteś zajebisty :D szukałem wiele poradników i tutoriali w necie ale żadnego nie rozumiałem i nagle w polecanych zobaczyłem twój kanał i teraz po trochu wszystko zaczynam ogarniać :)
super film szczególnie za to że pokazałem to pani na informatyce i dostałem 6. Ale ogólnie mega
Hej, świetne filmy. Polecam wtyczkę do Bracketsa "emmet" - np. po wpisaniu "html:5" do pustego dokumentu i wcisnieciu taba, tworzy nam "podstawę strony"
super ziomek fajnie właśnie robię stronkę na której będę opublikował artykuły napisane prze zemnie
i mega pomogłeś wyszło mi identycznie oczywiście inne zd i tekst ale tak to git jest
Bardzo fajny kurs. Polecam innym! 👍👍👍👍👍👍👍👍
Bardzo dobrze :). Dobrze tłumaczysz. polecam!
Jedyna profesjonalnie nagrana seria (oprócz arduino)
Dzięki Panu uda mi się zaliczyć informatykę
Bardzo dziękuje za taką serię!
gościu jesteś szefem. wszystko fajnie prosto tłumaczysz.
super filmik zrobiłem wszystko ok i przechodzę do kolejnego
super film
Poprostu dziekuje!
zajebisty samuraj, duzo sie dowiedzialem, dalej nic nie wiem
Z niecierpliwością czekam na więcej!
Jesteś super :D Bardzo mi pomogłeś!
Super :) Jestem zadowolona
w końcu ktoś kto normalnie tłumaczy a nie jak ta baba z informatyki
dziękuje za naukę przyda się :)
Dzięki za mega wiedzę!!
kocham ten materiał!
Pisanie kodu w head odnośnie faveicon nie jest koniecznie. A tego się już nawet nie robi :)
Wystarczy dodać sam plik ikonki o pełnej nazwie i przeglądarka sama go wczytuje bez kodu :)
Również wrapper nie powinien być przypisany do ID tylko do class :) (tak wychodzi ze wzorców projektowych i ogólnej zasady)
A tak materiał bardzo dobry :)
Cześć, chciałbym Ci powiedzieć że uratowałeś mi życie! Miałem wiedzę 0 na temat html. Mimo to w jeden dzień z tobą zrobiłem 6 stron internetowych! Bardzo przyjemnie się ogląda. Wszystko zrozumiałe, muzyka na idealnym poziomie umila naukę. DZIĘKUJĘ BARDZO ZA POŚWIĘCONY CZAS NA TEN PORADNIK! Dokładnie takiego czegoś szukałem.
Zajebista sprawa :D czekam na więcej
A ja cały dzień czekałem :D
Żona kazała sprzątać, więc mogłem ogarnąć temat dopiero po południu ;)
Proponuję , listę kolejkową do sprzątania , Aby nasz Samuraj mógł skupić się na tym co ważne - czyli materiały dla nas :) cały Piątek i Sobotę klikałem na YT czy to już !!!
Popieram incjatywe listy kolejkowej :). Ja rowniez wyczekuje niecierpliwie kazdego nowego odcinka. "Samuraju"....swietna robota. Fajnie ze sa ludzie tacy jak Ty, ktorzy maja checi dzielic sie swoja wiedza.
Nie działa link do paczki z plikami strony :(
Z jakich rozszerzeń korzystasz w Bracketsie? :)
Super odcinek :D
Trzeba sobie przypomnieć przed MegaK :D
dokładnie :D
Łapa w górę leci
Bardzo dobry materiał
Bardzo dobry tutorial
dziękuję!!!
Pomocy!! Obraz z osobą mi się nie wyświetla ale zapisałem poprawnie wszystko!!
Hej. Czy dobrze rozumiem, że nowy znacznik ma domyślne ustawianie elementów w wierszu, a nie pod sobą? Pozdrawiam.
"a" jest znacznikiem liniowym, a zgodnie z tym co powiedział Samuraj zajmuje on tyle miejsca ile potrzebuje, więc stąd on układa się jeden obok drugiego a nie pod sobą, wystarczy że wrzucisz to do listy
COS
to będzie układany jeden pod drugim.
Bartek, to jak się ustawiają elementy wewnątrz zależy od tego jakie to są elementy a nie od samego . Nav jest blokowy i zajmuje 100% miejsca (wiec menu ma szerokość 100% i element będzie poniżej a nie obok), ale , które są w nav są już są liniowe, a wiec każdy element menu będzie ustawiał się obok siebie i będzie zajmował tyle miejsca ile potrzebuje (co w praktyce naszej strony na tym etapie oznacza, że dużo miejsca po prawej wydaje się puste). Jeśli zrobisz tak jak Michał albo elementy wezmiesz w czyli Pozycja1 itd. to będą domyślnie pod sobą. Dodam, że w stylach css wszystko to powywracamy ;)
Ach, no tak! Teraz wszystko jasne, dzięki za odpowiedz.
Dobry wpis Samuraju. Twoje wyjaśnienie poukładało mi wiedzę o podstawach niektórych elementów: blokowe vs liniowe. Teraz będzie łatwiej modyfikować je w CSS wiedząc jak i gdzie się umiejscawiają i ile
zajmują miejsca w stanie tzw. "surowym".
BTW fantastyczny tutorial o praktycznym używaniu HTML/CSS.
Widziałem wykład o podstawach, w poprzednich video. Teraz łatwiej to zrozumieć na przykładzie strony z powyższej lekcji. Wielki szacunek dla Ciebie, że dzielisz się wiedzą!
Tak jak poprzednicy czekam na JS/JQuery bo to jest "to co tygryski lubią najbardziej ale nie zawsze wiedzą jak ;-)".
Paczka z plikami spadła z rowerka :(
SUPER!!
mega pomoc dzieki wielkieeeeee
Nie działa link z materiałami do pobrania :(
Witaj Samuraju :D Chciałby podziękować za Twoją wspaniałą pracę jaką tu wykonujesz, jestem całkowicie zielony w tym temacie ale dzięki Tobie naprawdę z dnia na dzień coraz lepiej to rozumiem i nie jest już to dla mnie czarna magia. Naprawdę świetna praca dzięki której uczę się z ogromną przyjemnością :)
Mam też pytanie dlaczego nie mogę na mojej stronce zamieścić każdego filmika z yt? Część z nich które chciałem zamieścić i odtworzyć na mojej stronie nie chcę się odpalić, pisze, że plik niedostępny a np. te filmiki 10h godzinne działają bez problemu? Co jest tego przyczyną? Wszystko robiłem tak jak Ty na swoim filmie :) Dziękuję i pozdrawiam serdecznie ;)
Witam. Bardzo przydatny materiał, który na pewno się przyda. Mam pytanie (nie wiem czy już gdzieś to już zrobiłeś) czy mógłbyś zrobić tutorial jak zrobić stronę internetową podobną do tej, ale także dać nawigacje po lewej/prawej stronie? Możliwe, że sam bym zrobił, ale chciałbym zobaczyć jak to by ekspert zrobił :)
witam, czy robiąc storne www w html jest problem z dopisywaniem treści w trakcie prowadzenia strony, w tym dodawaniu krótkich filmików i fotek?
Cześć, dziękuję bardzo za ten film, który mi bardzo pomógł w tworzeniu strony internetowej,
mam tylko pytanie jakie wymiary ma obrazek programisty?
Jak zwykle rewelacja :) mam przy okazji pytanie: czy każdy może na swojej stronie umieszczać odnośnik do yt? nie ma w tym obostrzeń prawnych? I jakbyś mógł podać źródło obrazków, które możemy bezpiecznie wrzucać na swoją stronę...
Super odcinek przerzucam sie na drugi ;]
Lepiej zlecić komuś kto się na tym zna... Ja osobiście polecam firmę www.iconmedia.pl chłopaki znają się na robocie. Stronę stworzą od razu, żeby zaczęła się pozycjonować a ktoś kto nie m,a pojęcia o pozycjonowaniu to wyda miliony na Adsy
Dokładnie tak, jeżeli komuś zależy żeby strona przynosiła zysk to najlepiej komuś zlecić
Popieram!
Faktycznie profeska, wszystko na gotowych pluginach z wordpressa. I dodatkowo nie widze jej w wyszukiwarce po wpisaniu agencja medialna poznan. :) Portfolio na stronie tez nie ma.
dzięki wielkie :3
26:53 Jak to zrobić teraz? Po zmianie wyglądu youtube nie ma takiej opcji ; /
Znalazłem rozwiązanie.
Naciskasz ppm na filmie i jest tam opcja "Skopiuj kod do umieszczenia na stronie".
wystarczy zmienić wielkość :)
Mam pytanie @ SamurajProgramowania jak chodzi o ten kod to np mogę zrobić w Visual studio w programie do kodowania czy moja strona będzie działać jak użyje innego programu niż pan?
Robiłem tak samo ja Ty a struktura body w zbadaj element u mnie skąpa jest nie ma tych elementów struktury body co u Ciebie. Może dlatego że korzystam z chrome i nie wyświetla tych wierszy, ale strona "działa" i wygląda tak samo ;)
Dzięki stary
Dzięki!!!!
Materiał b. dobry :) Polecam !!!
Szkoda, że link z materiałami nie działa :(
Przydalo by sie jakies info dla poczatkujaceych odnosnie edytora, ktorego uzywasz oraz jego konfiguracji. Dzieki za material.
Super kurs !!! Czy ktos z tutaj obecnych jak i sam kierownik produkcji mial problem z wyswietlaniem na zywo w google chrome obrazkow , wpisuje poprawna sciezke w brackets gdzie po najechaniu kursorem podglad zjdjecia dziala , a juz po wcisnieciu skrotu klawiszowego ctr+alt+p ( podglad w chrome na zywo ) pokazuje wszsytkie przyciski a zdjec brak :(
Lodomir lubi programować, Lodomir lubi Samurajów
wszystko pięknie wyjaśnione, tylko w jaki sposób tworzę link mojej strony?
Wrzucam sobie link 'a z youtube'a i w miejscu, w którym ma pojawić się film, jest tylko puste pole, co zrobić z tym fantem?
Witam. Mam pytanie odnośnie div-a wrapper, a mianowicie jak się go stosuje w przypadku gdy nagłówek główny strony występuje na całej szerokość strony, natomiast pozostała cześć strony jest już węższa i zajmuje dajmy na to 80% jej szerokości. Czy pozostałą część strony zamykamy w innym kontenerze tego typu? Jakie rozwiązanie jest najbardziej praktyczne?
Pytanie a ile czasu powinna przeznaczyć osoba która już zdała egzamin zawodowy na webdevelopera ale chce sobie odświerzyć temat ?
Siemka! Paczka z plikami nie istnieje :/ Dodałbyś jeszcze raz?
perfect nice
Witam, w jaki sposób podczas tworzenia head tak szybko kopiujesz różne elementy? Masz każdy z nich pod innym skrótem klawiszowym ?
pasja informatyki lepiej tłumaczy bez urazy... ...ale like zostawie
'Pasja informatyki' super tłumaczy :)
@@SamurajProgramowania "Pasja informatyki" zajebiście tłumaczy xd
Cześć. Super seria. Mam pytanie na które nie mogę znaleźć odpowiedzi...
Dlaczego Brackets ciągle przenosi mi linie w prawo, po napisaniu headera ze zdjeciem i przejsciu do nastepnej linijki przenosi mi kursor na środek strony, trzeba w kazdej linijce spacja kasować przestrzeń. Da się to jakos zmienic w ustawieniach?
Witam
Świetne kurs, mam pytanie do ludzi co oglądają tą serię od początku? Ile lekcji oglądacie na raz, powiedzmy jednego dnia?
(pytanie do ludzi zielonych i zaczynających przygodę z programowaniem czyli takich jak ja)
Nie jestem zielony, ale 4 minimum.
Jakich skrótów klawiszowych używasz do wprowadzania kodu html???? Korzystam z tego samego edytora kodu i trochę mnie męczy wpisywanie każdej linijki z tzw "palca".
Jak dodać formularz kontaktowy , a w zasadzie formularz kontaktowy mam dodany tylko niestety jak próbuje wysłać e-maila próbnego pisze mi , że strona nie istnieje. A jeszcze mam pytanie jedno ? A mianowicie chodzi mi o to dlaczego mam mam 4 zakładki : o mnie, oferta, harmonogram i kontakt , dlatego one mi nie przechodzą płynnie, tylko muszę np. na cisnac na " o mnie " i dopiero na "harmonogram" i tak samo jest z "kontaktem" bo z "ofertą nie ma problemu.
Bardzo proszę o pomoc.
Po obejrzeniu Pana filmików stworzyłam swoją stronę internetową:) Materiały były bardzo przydatne. Dziękuje bardzo.
Pozdrawiam
Mam taki problem że zdjęcie nie wyświetla się gdy plik odpalam już w przeglądarce. Testowałem na dwóch różnych komputerach, a nawet na telefonie, próbowałem z umieszczeniem linku do obrazka zamiast nazwy obrazka ale dalej nic. Zawsze jest problem z wyświetleniem
👍
Fajna nazwa stary