Kurs Tworzenia Stron WWW cz. 1

Pierwsza część kursu tworzenia stron internetowych, w którym poznasz podstawy HTML i CSS oraz stworzysz swoje pierwsze projekty!

  • Certyfikat ukończenia
  • Bezpłatne aktualizacje
  • Dożywotni dostęp

Dożywotni dostępKupujesz raz, aktualizacje gratis.

Szczegóły

O kursie

Czego się nauczysz?

Pierwsza część kursu wprowadzi Cię w obszerny i fascynujący świat tworzenia stron internetowych.

Jeśli nie wiesz, czym różni się HTML od CSS, ani co te dziwne skróty oznaczają – nie musisz się niczym przejmować. Wszystkiego nauczysz się od podstaw.

Jedyne czego Ci potrzeba to komputer i dobra kawa.

Demo

Zajrzyj do środka

Podglądowy odcinek z kursu.

Opinie o kursie

Kurs był w przeszłości dostępny na platformie Udemy. Poniżej kilka opinii kursantów.

4.9/5 ponad 6200 recenzji Zrzut z Udemy

Program

Plan kursu

  1. 1

    Wstęp i organizacja

    Pierwsze dwa działy to tak naprawdę kwestie organizacyjne, które pomogą Ci w wykorzystaniu pełnego potencjału kursu.

  2. 2

    Visual Studio Code

    W tym dziale poznasz najlepszy edytor kodu!

  3. 3

    HTML & CSS

    Kolejnym etapem nauki będzie poznanie HTML oraz CSS.

    Technologii, bez których nie stworzymy żadnej strony WWW!

  4. 4

    Przeglądarki internetowe

    Różnic pomiędzy przeglądarkami jest więcej, niż się może oku wydawać!

  5. 5

    Fonty, kolory, obrazy

    Czymże byłaby strona bez odpowiednio dobranych kolorów i fontów? Nie można zapomnieć o obrazach!

  6. 6

    Jednostki, kaskadowość, dziedziczenie i kombinatory

    Sprawy techniczno-techniczne, rodzinne i inne takie.

  7. 7

    Box model, display, position

    Widzieć czy nie widzieć? Z prawej, a może z lewej?

    Odpowiedzi na te i inne pytania znajdziesz w tym dziale.

  8. 8

    Transition, transform, background

    Wstęp do obszernego świata animacji i transformacji.

    A i o tłach będzie co nieco.

  9. 9

    Responsive Web Design

    Magia, która sprawia, że strona wyświetla się poprawnie zarówno na małym telefonie jak i na największym ekranie komputera!

  10. 10

    Dobre praktyki pisania kodu

    Każdy chce pisać dobry kod, ale nie każdy wie jak… Na szczęście ten problem nie będzie dotyczył Ciebie.

  11. 11

    Zadania i projekty

    Czas na zadania i projekty, które utrwalą Twoją nowo nabytą wiedzę!

    Zaczynamy budować doświadczenie.

  12. 12

    Ciekawostki

    Kawał świetnej roboty za Tobą!

    Zanim przejdziesz do kolejnej części kursu, czas na porcję ciekawostek!

Zacznij już dziś

Kurs Tworzenia Stron WWW cz. 1

  • Certyfikat ukończenia
  • Bezpłatne aktualizacje
  • Dożywotni dostęp

49złjednorazowo

Kup kurs

161 lekcji

Lista odcinków

Wstęp i organizacja7
  • Informacje
  • Jak się uczyć?
  • Mapa, frontend & backend
  • Bardzo ważne narzędzie, które niesamowicie Ci pomoże
  • Pomoc
  • Dowód na to, że mapa działa
  • Monitory
Visual Studio Code7
  • Podstawowa konfiguracja
  • Dodawanie folderów, tworzenie plików
  • Struktura plików i dalsza konfiguracja
  • Ładniejsze formatowanie HTML
  • Praca z Live Serverem
  • Lista fajnych styli i ustawień VS Code
  • Aktualizacje
Poznajmy HTML22
  • HTML – wprowadzenie
  • Podstawowa struktura HTML
  • Semantyka i najczęściej używane tagi HTML
  • Kod do kolejnych odcinków
  • Elementy blokowe i liniowe
  • Nagłówki
  • Linki
  • Podstawowa struktura strony
  • Quiz z tagów HTML
  • Metatagi
  • Formularze
  • Formatowanie i zabawa z tekstem
  • Quiz – metatagi, formularze i formatowanie
  • Informacje do list w HTML
  • Listy w HTML
  • Kod do odcinka o tabelach
  • Tabele w HTML
  • Audio, video, obrazki
  • Quiz ze wszystkich tagów HTML
  • DOCTYPE & HTML lang
  • Wprowadzenie do zadania – stwórz stronę!
  • Rozwiązanie do zadania – stwórz stronę!
Witajcie w świecie CSS!13
  • CSS – wprowadzenie
  • Quiz z budowy CSS
  • Gdzie umieszczać CSS?
  • Ścieżki do plików
  • Emmet
  • Quiz z umieszczania CSS
  • Zadanie – napraw CSS!
  • Rozwiązanie zadania z CSS
  • Krótszy zapis i komentarze
  • !important oraz dobra praktyka nazywania klas
  • Wprowadzenie do zadania – ostyluj stronę
  • Treść zadania – ostyluj stronę
  • Rozwiązanie zadania – ostyluj stronę
Przeglądarki internetowe3
  • Z jakich przeglądarek korzystać?
  • Domyślne style przeglądarek
  • Narzędzia deweloperskie
Fonty, kolory i obrazy15
  • Wprowadzenie do fontów
  • Aktualizacja Google Fonts
  • Google Fonts
  • Lista fajnych fontów
  • Font Awesome
  • Info do Font Awesome
  • Alternatywy dla Font Awesome
  • Stylowanie tekstu
  • Stylowanie tekstu – właściwości CSS
  • Quiz z fontów
  • Kolory
  • Obrazy
  • Wprowadzenie do zadania
  • Treść zadania
  • Rozwiązanie zadania
Jednostki, kaskadowość, dziedziczenie i kombinatory13
  • px, %, vw, vh
  • Rem & em
  • Max/min-width & height
  • Wprowadzenie do zadania z kształtami
  • Rozwiązanie zadania z kształtami
  • Specyficzność CSS
  • Kaskadowość i dziedziczenie
  • Kombinatory
  • Quiz z dziedziczenia i rodziny w CSS
  • Wprowadzenie do zadania z kombinatorami
  • Treść zadania z kombinatorami
  • Rozwiązanie zadania z kombinatorami
  • BONUS: Ściąga CSS
Box model, display, position26
  • Box model
  • Margin & padding
  • Wprowadzenie do zadania margin & padding
  • Rozwiązanie zadania margin & padding
  • Overflow
  • Quiz z box model
  • Border
  • Stylowanie linków
  • Stylowanie przycisków i :hover
  • Display inline, inline-block & block
  • Quiz z display
  • Position relative & z-index
  • Position absolute
  • Notatka relative & absolute
  • Kod do zadania z position
  • Wprowadzenie do zadania z position
  • Rozwiązanie zadania z position
  • Position fixed
  • Position sticky
  • Quiz z position
  • Kod i treść do zadania – ułóż elementy za pomocą position
  • Wprowadzenie do zadania – ułóż elementy za pomocą position
  • Rozwiązanie zadania – ułóż elementy za pomocą position
  • Wprowadzenie do zadania – zoom, move & color
  • Treść zadania – zoom, move & color
  • Rozwiązanie zadania – zoom, move & color
Transition & transform13
  • Transition
  • Transition – porównanie
  • Quiz z transition
  • Transform
  • Nowy transform
  • Transform origin
  • Calc
  • Wprowadzenie do zadania – transform & transition
  • Treść zadania – transform & transition
  • Rozwiązanie zadania – transform & transition
  • Optymalizacja zadania z transform & transition
  • Float
  • Background
Responsive Web Design9
  • RWD – co to jest? Czemu jest tak ważne?
  • Lista urządzeń w dev toolsach
  • Metatag viewport
  • @media queries
  • Wprowadzenie do zadania z media queries
  • Treść zadania z media queries
  • Rozwiązanie zadania z media queries
  • Mobile first
  • Nowy zapis @media
Dobre praktyki pisania kodu3
  • Dobre praktyki pisania kodu
  • Dlatego dbanie o kolejność jest tak ważne…
  • Polish-english
Zadania i projekty17
  • Tworzymy stronę z podstronami cz. 1 (struktura i nawigacja)
  • Tworzymy stronę z podstronami cz. 2 (header)
  • Tworzymy stronę z podstronami cz. 3 (footer)
  • Tworzymy stronę z podstronami cz. 4 (main)
  • Tworzymy stronę z podstronami cz. 5 (podstrony)
  • Zadanie z @media queries
  • Tworzymy responsywną stronę WWW cz. 1 (struktura i nawigacja)
  • Tworzymy responsywną stronę WWW cz. 2 (header)
  • Tworzymy responsywną stronę WWW cz. 3 (sekcja main)
  • Tworzymy responsywną stronę WWW cz. 4 (sekcja main)
  • Tworzymy responsywną stronę WWW cz. 5 (main + footer)
  • Tworzymy responsywną stronę WWW cz. 6 (ostatnie szlify)
  • Treść zadania – powtórka z rozrywki
  • Rozwiązanie zadania – powtórka z rozrywki!
  • Wprowadzenie do zadania – hero image
  • Treść zadania – hero image
  • Rozwiązanie zadania – hero image
Ciekawostki13
  • Hosting stron WWW, kupowanie domeny
  • Przydatne strony
  • Minifikacja kodu
  • Walidator kodu HTML
  • Prefiksy
  • Kursor
  • Reset i normalizacja CSS
  • Mój reset CSS
  • Problem z listami
  • Kwestie zdrowotne
  • AI w IT
  • Złodzieje w IT
  • Na co zwracać uwagę po cz. 1