Kurs Tworzenia Stron WWW w HTML i CSS od Podstaw do Eksperta

W jaki sposób zabrać się do mojego kursu Tworzenia Stron WWW, aby wynieść z tego jak najwięcej korzyści?

Oglądając lekcje upewnij się, że oglądasz je w najwyższej jakości.

• Dowiesz się czym jest host, jaka jest różnica między płatnym oraz darmowym hostingiem. Jakie są plusy posiadania płatnego hostingu?

Pokażę Ci jak zarejestrować darmową przestrzeń w Internecie dla Twojej strony.

Czym jest domena?

• Ściągamy z internetu program FileZilla, który służy nam do połączenia się z serwerem, instalujemy go i poznajemy jego niektóre funkcje. Łączymy się z naszym serwerem i "wrzucamy" na niego nasz pierwszy plik!

• Ściągamy oraz instalujemy Visual Studio Code

Jak dodać folder do VSC?

Jak stworzyć plik html?

Jak odpalić go w przeglądarce?

Jak zapisywać pliki w edytorze?

Jak korzystać z eksploratora VSC?

• Dowiadujemy się:
  - co oznacza WWW, HTML
  - czym jest hipertekst i dlaczego jest taki wyjątkowy
  - czym są tagi = znaczniki = słowa kluczowe

W tej lekcji dowiesz się czym jest HTML oraz czym różni się poszczególne wersje HTML od siebie.

• Zaczynamy zabawę stwarzając nasz pierwszy dokument HTML. Dowiadujemy się:
  - czym jest głowa oraz ciało strony ;)
  - czym są roboty oraz w jaki sposób zwracają one uwagę na tag title i pisanie stron zgodnie z regułami.

Tagowanie - oznaczanie jak na instagramie oznaczamy z pomocą nazw np. #pieknydzien #sport etc. tak tutaj tagujemy, czyli oznaczamy nadzwyczajne znaczenie tekstu z pomocą tagów np.

<b>pogrubiony</b>

Jak poprawnie zagnieżdżać tagi?

Jak SZYBKO owijać już istniejące tagi w VSC?

Jak tworzyć własne skróty w VSC?

Jak stworzyć tag pochylający tekst?

Czym są akapity?

Co robią?

Czym są białe znaki?

Czym jest tag "pusty" (bez zakończenia)?

Czemu się go stosuje?

Co robi tag <br>?

Jaka jest różnica między <br> vs <br />?

Czym jest atrybut?

Skąd się biorą atrybuty?

Jak działa atrybut "title"?

Jak działa atrybut "lang"?

Poznajemy skrót do tworzenia tagów z atrybutami z pomocą Emmet.

Do czego służy neutralny tag span? Kiedy z niego korzystamy?

Czym są rozszerzenia? Jak je instalować?

Jakie rozszerzenia używamy w kursie - które ułatwiają życie?

1) czym jest RGB?

2) co oznacza deprecated (non conforming)?

3) jak skorzystać z atrybutu 'style'?

4) jak zmienić kolor tła?

Jak dodać zdjęcie na stronę?

Jak działa atrybut src?

Jak działa atrybut alt?

Jak nazywać zdjęcia?

Skąd brać darmowe zdjęcia na Twoją stronę internetową?

Jak szybko pobrać szerokość/wysokość obrazka?

Jak stworzyć ścieżkę do pliku znajdującego się w innym folderze?

Przypomnij sobie podstawy rozwiązując quiz

Czym są komentarze? Kiedy z nich korzystać? Jak podglądnąć kod napisany przez innych?

• Dowiadujemy się:
  - czym są meta tagi
  - czym są metadane
  - jak dobierać słowa kluczowe oraz opis w meta tagach

Jak ustawić poprawne kodowanie na stronie aby polskie jak i inne mniej znane znaki były wyświetlane zawsze poprawnie?

Dowiadujemy się jak określić typ dokumentu strony

Jak zrobić, aby widzieć na bieżąco zmiany w pliku na swojej stronie? Jak automatycznie zapisywać plik?

• Dowiadujemy się czym są encje oraz po co je stosować. Dowiadujemy się jak uzyskać nietypowe znaki typu całka. Przypominamy sobie wszystkie zasady dotyczące pisania poprawnego dokumentu XHTML. Poznajemy stronę na której możemy przetestować poprawność naszej strony.

• Dowiadujemy się w jaki sposób poprawnie nazywać nasze pliki o rozszerzeniu .html oraz jaki to ma wpływ na naszą pozycję w wyszukiwarkach.

Jak zainstalować niestandardowe ikony.

• Dowiadujemy się:
  - czym są listy
  - jak stworzyć ponumerowaną, nieponumerowaną listę
  - jak stworzyć słowniczek definicji
  - jak stworzyć pole z legendą oraz opisem
  - jak stworzyć "niełamiącą się" spację.
  - jak stworzyć poziomą linię

znak > w EMMET

SHIFT + ALT + strzałka - kopiowanie danej lini w górę/dół

ALT + myszka (wiele kursorów)

[] vs {}

$      

CTRL K + S - skróty w VSC

Czym jest lista definicji?

Jak tworzyć listę definicji?

Po co w ogóle tworzyć listę definicji?

Jak stworzyć szybko z pomocą EMMET tagi na tym samym "poziomie"?

• Dowiadujemy się czym są odnośniki i jak je tworzyć?

• Jak stworzyć możliwość powrotu z podstrony na stronę główną?

• Uczymy się tworzyć odsyłacze (linki) do zewnętrznych stron

• Czym jest _blank i czy powinniśmy go używać?

  
  

• Dowiadujemy się czym są etykiety oraz po co one są.

• Tworzymy etykiety, by ulepszyć wrażenia z poruszania po witrynie

Jak stworzyć link do 'maila'?

Po co używamy tagu "address"?

Jak stworzyć link do 'telefonu'?

Jak tworzyć nagłówki?

Po co tworzymy nagłówki?

Skrót ALT-Z?

Jak poprawnie cytować ludzi? Różnice między tagami cite, blockquote i q.

Do czego służą tagi <abbr> oraz <dfn> Kiedy ich używamy i po co?

Kiedy używać <b>, a kiedy <strong>

Kiedy używać <i>, a kiedy <em>

Czy warto używać tagu <u> oraz <s>?

Do czego służą tagi: <b>, <i>, <u>, <s>, <strong>, <em>, <mark>

Tagi b,i,u,s to są pozostałości po starym HTML - najlepiej używać do uzyskania tego typu efektu CSS

Natomiast strong/em/mark to tagi semantyczne, czyli coś co dodaje "mocy" danemu słowu. Nie tylko ze względu na SEO, ale również gdy np. czytnik czyta niewidomemu tekst to czytnik wtedy wie, że te słowo ma "podkreślić". Skoro oznaczasz tak słowa to od razu wiadomo, że są to ważne słowa w tekście.

<sub> vs <sup> - jak zrobić indeks dolny/górny w tekście?

Jak wklejać tekst w ten sposób, aby jego oryginalne formatowanie nie znikło? Co zrobić, aby białe znaki były interpretowane w HTML?

Posługiwanie się multikursorem oraz poszukiwanie i podmienianie elementów z pomocą: CTRL + H

Czym jest formularz oraz input? Jak stworzyć formularz z loginem i hasłem?

Jakie są typy akcji wysyłania formularza?

Do czego służy atrybut "name"?

Do czego służy atrybut "action"?

Jak stworzyć przycisk "wyślij"?

Kiedy używać pola radio?

Jak stworzyć pole radio?

Czym są etykiety? Czym jest fieldset?

Kiedy używamy oraz jak tworzyć poprawnie pole z checkboxami?

checked/required/placeholder/size/maxlength/value/placeholder

Ćwiczymy tworząc formularz kontaktowy. Poznajemy textarea oraz input typu 'email'.

Jak pobrać datę i czas od użytkownika korzystając z time i date inputów?

Czym są tabele?

Jak stworzyć tabele?

Jak prawidłowo używać tagów: table, tr, td, th, thead, tbody?

Jak połączyć/sprawić, by komórka była rozpięta na więcej niż jedną w tabelach?

Praktyczny przykład użycia rowspan/colspan

• Uczymy się:
  - czym są tabelki
  - do czego służą...
  - jak je tworzyć...
  - zmieniać wypełnienia...
  - nadawać im kolory...
  - "poruszać" się w ich wnętrzu...
  - tworzyć z nich szablony stron...
  - i wiele innych
  Dowiadujemy się od czego pochodzą nazwy tagów typu tr, td etc.

Łopatologiczne wyjaśnienie czym jest CSS :)

Cym jest CSS? Do czego służy CSS? Dlaczego CSS jest taki fajny? Czym jest selektor tagów? Gdzie używamy CSS i dlaczego go używamy? Jaki problem rozwiązuje CSS?

- jak stworzyć style inline, wewnętrznie oraz zewnętrznie
- jaki jest priorytet wykonywania styli

• Poznajemy atrybuty o kluczach class oraz id, dowiadujemy się po co one są oraz do czego służą.

Czym różni się id od class?

Rozszerzenia CSS oszczędzające Twój cenny czas:

CSS Peak

HTML CSS Support

Do czego służą tagi div i span?

Jaka jest różnica między blokiem a inline?

Własność display - zmieniamy to w jaki sposób domyślnie wyświetlane są tagi.

Triki w Emmet do tworzenia tagów z atrybutem class i id

Jak uniknąć błędów w CSS? Wybieranie najważniejszej reguły.

• Bawimy się obramowaniami, poznajemy różne typy... groove... solid... dashed itp., nadajemy im kolory, wielkość - łączymy to wszystko i wiele innych!

Jak stworzyć zaokrągloną krawędź?

Powtarzamy wiadomości, aby nie zapomnieć niczego :)

Bawimy się tabelkami nadając im krawędzie. Dowiadujemy się jak działa padding.

• Sprawiamy, aby nasze linki zmieniały swój wygląd w zależności od ich stanu: nieodwiedzone, odwiedzone, aktywne oraz po najechaniu. Pokazuję kilka ciekawostek oraz w jaki sposób stworzyć menu poziome ;-)

• Tworzymy wykazy, podobne jak w HTML, ale dodatkowo potrafimy użyć obrazka jako wyróżnika

• Jak działa selektor ::before oraz jak go używać

• Jak dodać dowolną referencje?

• Dowiadujemy się w jaki sposób sprawić, aby niektóre elementy naszej strony np. obrazki stały się przeźroczyste tzn. "prześwitały" ;-). Tworzymy galerię z 4 obrazków, które po najechaniu na nich myszką zmieniają swój stan przeźroczystości - tworzy to fajny efekt :)

• czym różni się opacity od rgba

Jak zmienić kursor na inny? Po co zmieniać kursor?

Po co są atrybuty selektorów?

Jak stworzyć własny atrybut o niestandardowej nazwie? Po co w ogóle takie coś tworzyć?

Czym się różnią kolejne lekcje?

• Solidna lekcja poświęcona tłom, uczymy się nadawać im kolory, dowiadujemy się w jaki sposób zrobić powtarzające się, nie powtarzająca się lub też "nie ruszające się" wyśrodkowane obrazkowe tło i wiele innych!

• Poznajemy własności CSS, które:
  - dekorują tekst np. podkreślają, przekreślają, nadkreślają etc.
  - powiększają pierwsze litery każdego słowa, wszystkie litery lub też je zmniejszają...
  - zmieniają wyrównanie tekstu
  - sprawiają, że tekst się "nie zawija"
  - sprawiają, że wszystkie "białe znaki" są interpretowane
  

Jak stworzyć ładne wcięcia w akapitach oraz zmienić tylko pierwszą literę każdego akapitu.

• Dowiadujemy się czym jest dziedziczenie własności oraz w jaki sposób ono działa.
  Poznajemy różnicę między jednostkami tzn. px, em, mm, cm, % etc. Szczególnie skupiamy się na em, % i px.

Jak zmienić wysokość linii?

Jak dodać przestrzeń między literami?

Jak dodać przestrzeń między słowami?

• Bawimy się tekstem... zmieniając jego czcionki... powiększając go... pochylając... pogrubiając... poznajemy różnicę między oblique, a italic oraz następną jednostkę ex i wiele innych.

Omawiamy:

• font-size:

• font-variant

• font-family:

• font-weight:

• font-style: