Web Development Full Stack - Kompletny Kurs Od Podstaw

Definicje podstawowych pojęć jak strona internetowa i aplikacja – różnice między nimi

Jak internet i strony internetowe działają razem

Najbardziej interesują nas dynamiczne strony internetowe. Ale powinniśmy zacząć naukę od czegoś prostego – statycznej strony www

Nowoczesny web development – aplikacja „single page”, która zapobiega przeładowaniu strony przeglądarki www

W tym kursie będzie wykorzystana przeglądarka Chrome firmy Google aby wyświetlać postęp prac przy tworzeniu stron

HTML, CSS, JavaScript – każda dobra strona www składa się z tych elementów. Nauczymy się ich!

Od otwarcia pustego pliku do wysłania na serwer. Również o innych możliwościach tworzenia stron

Obecnie to najpopularniejszy edytor dla programistów. Przykładowe ustawienia – zmiana wielkości czcionki, wysokość linii, grubość czcionki, czcionka wbudowanego terminala

Jak pisać kod w VSCode i poruszać się po nim aby przyspieszyć proces programowania (NIE na temat technik szybkiego pisania!)

Spójrzmy na przykładową stronę online i jak wygląda jej kod (czyli co ma „pod maską”)

Możemy stworzyć go ręcznie lub wygenerować automatycznie używając edytora VSCode

Tagi jak paragrafy, div (kontener na treść), nagłówki, nowe linie

Tagi jak span, link, listy uporządkowane i nieuporządkowane. Różnice między tagami div i span

Jak tworzyć wiersze i kolumny w tabelach HTML

Pogrubienie, pomniejszenie czcionki, itd.

Tagi – header, footer, article i inne

Jak tworzyć formularze HTML (elementy, w które coś wpisujemy i wysyłamy, np. formularz rejestracji)

Jak walidować (sprawdzać poprawność) pól formularza aby nie wysłać na serwer niepoprawnych danych (walidacja po stronie przeglądarki)

Każdy tag HTML może posiadać atrybuty, które rozszerzają możliwości elementów HTML

Użycie tagu img oraz atrybutu src tego tagu aby załadować obrazek na stronę www

Jeden ze sposobów załadowania zewnętrznych stylów CSS oraz skryptów JS do dokumentu HTML

Nawiasy ostrokątne, twarde spacje, emotikony

Wykorzystanie GitHub Pages (darmowy serwis internetowy) aby opublikować naszą pierwszą statyczną stronę www w internecie

Zapoznajmy się ze składnią języka CSS

Nauka podstawowych selektorów CSS jak paragraf (p) i in. Jak grupować i zagnieżdżać style używając selektorów dzieci i potomków

Możemy pisać kod CSS w trzech różnych miejscach: w tagu html jako atrybut, w sekcji head dokumentu HTML, jako zewnętrzny plik css

Priorytety sposobów ładowania stylów CSS. Użycie słowa kluczowego “!important” w definicji stylu (najwyższy priorytet)

Zapoznamy się z kilkoma stylami CSS: rozmiar czcionki, rodzina czcionek, wcięcie tekstu, wysokość linii, dekoracja tekstu, wyrównanie. Ustawienie przykładowych wartości dla nich

Poznamy kolejne style CSS: szerokość, wysokość, zaokrąglenia, marginesy, odstępy wewnętrzne (padding). Ustawienie przykładowych wartości

Poznamy kolejne style CSS:: kolor tła, kolor tekstu, obramowania, tło jako obrazek. Ustawienie przykładowych wartości

Elementy HTML składają się nie tylko z treści jak np. tekst ale również z marginesów, obramowania itd., które definiują przestrzeń między elementami

Używamy tej własności CSS aby rozwiązać domyślny problem z całkowitą szerokością i wysokością elementu

Używamy pseudo klas aby określić stan elementu, np. a:hover określa styl dla linku po najechaniu kursorem myszki komputerowej

Klasy CSS możemy użyć dla wielu elementów ale „id” tylko dla jednego elementu w obrębie jednego dokumentu HTML

Możemy wyświetlać elementy na różne sposoby: wszystkie w jednej linii, jeden pod drugim (jako elementy blokowe) itd.

Jeśli chcemy zdecydować po której stronie (lewej, prawej) element ma być umieszczony, możemy użyć własności float i clear CSS

Nauczymy się CSS Flexbox – świetne narzędzie do pozycjonowania elementów na stronie www

Kolejne typy pozycjonowania elementów na stronie: absolutne, względne i ustalone na stałe

W tej lekcji stworzymy stopkę nie zmieniającą swojej pozycji nawet po przewijaniu paskiem przewijania. Użyjemy do tego własności fixed stylu CSS

Zapoznamy się z technikami dostosowania wyglądu strony www do różnych urządzeń jak laptopy, tablety i smartfony

Jak zaprojektować stronę internetową aby robiła dobre wrażenie. Jak dobrać paletę kolorów na stronę www

Zapoznaj się z trzeba typami zmiennych JavaScript: var, const, let. Kiedy użyć każdej z nich

Możemy uruchamiać JavaScript nie tylko z dokumentu HTML ale również w konsoli Chrome. Użycie Window Object

Różne typy danych w JavaScript: tekst, liczby, tablice, json i inne. Łączenie ciągów danych

Najważniejsza struktura w języku JavaScript – funkcja. Poznaj słowo kluczowe „this” w funkcji

Jak manipulować stringami (ciągami tekstu) z użyciem wbudowanych funkcji JavaScript

Jak operować na tablicach używając wbudowanych funkcji JavaScript (jak map, foreach, filter, reduce). Również na temat template literals w ES6

W każdym języku programowania często decydujemy co robić pod pewnymi warunkami. Wtedy używamy konstrukcji IF

Głębsze wyjaśnienie sposobów deklaracji zmiennych w języku JavaScript

Takie jak AND i OR. Używane są w instrukcjach warunkowych

Bardziej zaawansowana instrukcja warunkowa w JavaScript

Zamiast IF możemy użyć SWITCH nie tylko w JavaScript ale w wieku innych językach programowania

Często chcemy wykonać jakiś kod JavaScript bez przerwy do czasu aż spełniony zostanie określony warunek

Co to są klasy, obiekty itd. Używanie znaku kropki w obiektach

Możemy nie tylko pisać kod ale również komentować bloki kodu aby lepiej czytać kod i rozumieć o co w nim chodzi

JavaScript jest językiem synchronicznym ale często w prawdziwym programowaniu potrzebujemy asynchronicznego przetwarzania, np. podczas wysyłki email użytkownik może robić inną czynność na stronie

Używamy tych elementów do obsłużenia synchronicznego oraz asynchronicznego kodu

Zapoznajmy się z funkcjami JavaScript do manipulowania elementami HTML

Użytkownik może wywołać zdarzenie na stronie, np. kliknięcie przycisku. Programista może obsłużyć to zdarzenie używając funkcji, np. wysłać formularz na serwer po kliknięciu przycisku

Ten operator jest bardzo przydatny. Dzięki niemu możemy np. dodać coś do tablicy, połączyć dwie tablice w jedną i in.

Wygodny sposób przypisywania elementów do zmiennych

Bardzo przydatne do trzymania często używanego kodu w osobnych plikach i importowania ich w razie potrzeby (zapobiega powtarzaniu kodu)

Nowa wersja JavaScript ES2020 umożliwia dynamiczne importowanie kodu, np. import gdy zajdzie określony warunek. Omówienie funkcji samowywołujących się

Mamy wiele możliwości przechowywania dynamicznych danych, np. email użytkownika. Jednym z nich jest lokalna baza przeglądarek internetowych

Używanie funkcji JSON.parse oraz JSON.stringify w języku JavaScript

Używanie Fetch API do pobierania danych z serwera

Również stwórz nagłówki i linki dla nowych podstron

Użycie zewnętrznych plików CSS. Zmiana tytułu strony. Użycie własności CSS „float: left” do pozycjonowanie elementów

Rozwiązanie problemu opływania elementów gdy tego nie chcemy. Pozycjonowanie stałe dla stopki dla ustalenia trwałej pozycji na dole strony

Uwzględnij sekcje strony w jednym div-ie i ostyluj go

Dodaj elementy HTML do stworzenia listy zadań. Nadaj im ładny wygląd

Użyj własności box sizing CSS do prawidłowego wyświetlania elementów z dodanym paddingiem lub marginesami

Podstawowe stylowanie przycisków

Stylowanie przycisków. Ustalanie tła obrazka za pomocą CSS

Dodanie CSS dla prawidłowego wyświetlania strony na różnych urządzeniach jak telefon komórkowy i in.

Dodanie tagów HTML, kontenerów div i in.

Utworzenie przycisków, dodanie klas CSS używając JavaScript. Dodanie zewnętrznego kodu JavaScript do dokumentu HTML

Dodanie przekreślenia wiersza oraz koloru do ukończonego zadania z listy

Stwórz kod JavaScript i użyj zdarzenia „keyup” do przechwycenia treści zadania napisanego w formularzu. Pokaż rezultat w Chrome Developer Tool

Użycie lokalnej bazy danych przeglądarki do przechowywania zadań. Użyj JSON.stringify jak funkcji obiektu JavaScript

Pobranie listy zadań z lokalnej bazy przeglądarki Chrome. Użycie JSON.parse jako funkcji obiektu JavaScript

Użycie funkcji createElement() do dynamicznego stworzenia elementów HTML do pokazania listy zadań jako listy ul-li. Wyjaśnienie kodu synchronicznego oraz asynchronicznego

Przełączanie między statusami zadania (wykonane lub nie wykonane). Użycie modułów JavaScript

Użycie modułów JavaScript, obsługa zdarzeń

Tutaj ściągniesz kod źródłowy całej aplikacji, który możesz wykorzystać w razie problemów

Co możemy zrobić z Node.js

Zapoznajmy się ze stroną www dla Node.js oraz instrukcją jego instalacji

Wyślemy odpowiedź z serwera do przeglądarki internetowej

Najpopularniejsze zadanie dla aplikacji opartych o Node.js

Ładowanie wbudowanych modułów Node. Tworzenie własnych modułów i ich importowanie

Bardzo często nie musimy tworzyć kodu samodzielnie. Możemy ściągnąć wiele darmowych modułów i użyć ich w naszej aplikacji internetowej

Zapoznamy się z frameworkiem dla Node.js – Express. Co możemy zrobić dzięki niemu

Używamy Node Package Manager do instalacji Express JS

Gdy np. klikamy coś na stronie, tworzymy zapytanie wysyłane do serwera. Potem serwer wysyła odpowiedź do przeglądarki, np. że wiadomość z formularza została prawidłowo wysłana

Gdy klikniemy link, serwer musi wiedzieć jak obsłużyć takie zapytanie. Stwórzmy pierwszą obsługę ścieżki (route). Instalacja Nodemon dla web developmentu

Gdy wyślemy formularz to wyślemy dane POST na serwer, który musi je obsłużyć

Bardzo ważna koncepcja Express. Dzięki niej możemy np. zabronić dostępu do strony użytkownikom niezalogowanym

Co to jest EJS. Zainstaluj go przy użyciu Node Package Manager

Użyj instrukcji EJS „include” aby załadować powtarzalne elementy na stronę takie jak nagłówek, stopka itd.

Zapoznaj się z najczęściej stosowaną składnią języka EJS

Bardzo często przekazujemy dynamiczne parametry do widoków stron, np. lista artykułów na blogu z bazy danych

Często trzeba użyć dodatkowych funkcji JavaScript aby wyświetlić dane z parametrów przekazanych do widoków stron

Załóż darmowe konto aby użyć bazy danych online w celach nauki. Zainstaluj paczkę mongodb

Użyj aplikacji Express aby połączyć się z bazą danych MongoDB

Zapisz rekord w bazie danych (Create)

Po zapisie do bazy musimy umieć odczytywać dane z bazy (Read)

Często zmieniamy dane w bazie (Update)

Często usuwamy dane z bazy danych (Delete)

Najpopularniejsza: jeden do wielu, np. artykuł na blogu może mieć wiele komentarzy od użytkowników