Tworzenie stron internetowych Rozwój front-endu - bezpłatny kurs internetowej szkoły programowania dla dzieci Hello World, szkolenie 44 godziny, data: 3 grudnia 2023.

Jak działa Internet

Porozmawiajmy o podstawowych pojęciach dotyczących Internetu i jego architektury. Dowiedzmy się czym jest domena, hosting, architektura klient-serwer. Skonfigurujmy środowisko pracy i porozmawiajmy o trzech filarach rozwoju Front-endu - HTML, CSS i JavaScript.

HTML

Struktura dokumentu HTML

Stwórzmy pierwsze strony HTML i przyjrzyjmy się przykładom prostych i złożonych stron internetowych. Zastanówmy się, jakie bloki powinny znajdować się na naszej stronie. Sprawmy, aby nasze strony łączyły się ze sobą, dowiedzmy czym różni się tekst od hipertekstu oraz czym są tagi i atrybuty.

Pracuj z tekstem

Nauczmy się poprawnie pracować z tekstem w formacie HTML: podzielmy go na akapity, wskażmy nagłówki i podtytuły. Nauczmy się tworzyć listy numerowane i wypunktowane oraz cytować klasykę.

Linki i obrazy

Zapoznajmy się z linkami bardziej szczegółowo, a także nauczmy się wstawiać zdjęcia i używać ich jako linków.

Układ stołu

Stwórzmy naszą pierwszą tabelę i dowiedzmy się z jakich tagów się składa. Nauczmy się, jak łączyć komórki, zmieniać liczbę wierszy i kolumn, wyrównywać tekst i wiele więcej. Dowiemy się także od projektanta podstawowych wskazówek, jak upiększyć swój stół.

Wprowadzenie do formularzy

Stwórzmy nasz pierwszy formularz, nauczmy się pracować z polami wejściowymi, listami rozwijanymi, polami wyboru i oczywiście przyciskami. Przeanalizujmy inne elementy formularza, które przydadzą się nam w przyszłości.

CSS

Wprowadzenie do CSS

Przypomnijmy sobie, czym jest CSS i jak go używać. Nauczmy się korzystać z CSS podczas pracy ze stronami HTML. Przyjrzyjmy się składni CSS, czym są selektory, dziedziczenie i z jakim priorytetem nasze style są stosowane w dokumencie HTML.

Selektory

Przyjrzyjmy się selektorom bardziej szczegółowo. Dowiedzmy się, jak uzyskać dostęp do jednego lub większej liczby elementów, jaka jest różnica między klasą a pseudoklasą i elementem od pseudoelementu. Przyjrzyjmy się wytycznym CSS i dowiedzmy się, o co ludzie lubią pytać na temat CSS w rozmowach kwalifikacyjnych.

Dziedziczenie, kaskadowanie i priorytet

Dowiadujemy się, że kaskader i kaskader nie są z tej samej dziedziny. Rozumiemy zasady, według których style CSS są stosowane do elementów HTML.

Ozdoba tekstowa

Wróćmy do tego, od czego zaczęliśmy – do tekstu. Nauczmy się, jak sprawić, by nasz tekst był piękny i przyjazny dla użytkownika, korzystając z właściwości CSS: pogrubienia, kursywy, rozmiaru, koloru, tła i innych.

Zablokuj model dokumentu

Nauczmy się tagów div i span, a także ustawiania rozmiarów elementów, dopełnienia i obramowań. Rozumiemy jak powstaje model blokowy dokumentu i jakie mamy możliwości pozycjonowania elementów.

JavaScript

Przedstawiamy JavaScript

Zapoznajmy się z trzecim filarem rozwoju Front-endu - JavaScriptem. Dowiedzmy się, czym są zmienne, typy danych i do czego są potrzebne. I oczywiście napiszemy nasz pierwszy program.

Warunki

Pamiętajmy o logice, operacjach logicznych i ich kombinacjach. Niech siła i kontrola będą z nami.

Cykle

Nauczmy się, jak wiele zrobić, pisząc mały kod. Rozumiemy, że cykl w cyklu jest prosty, ale trzeba zachować ostrożność.

Tablice

W programowaniu są masy lodowe, lasy i tablice. W tej lekcji przeanalizujemy, co mają ze sobą wspólnego i czym się różnią. Wskazówka - bardzo pomogą nam pętle z poprzedniej lekcji.

Funkcje

Jeśli zmienne i odpowiednia dla nich nazwa to ABC programowania, to umiejętność pracy z funkcjami i dobierania dla nich odpowiednich nazw jest już receptą. W tej lekcji dowiemy się, jak podzielić program na logiczne bloki i dlaczego jest to ważne.

Obiekty

Zapoznamy się z koncepcją obiektów, metod i zaczniemy zapoznawać się z zasadami OOP.

Wprowadzenie do DOMA

JavaScript byłby bezużyteczny, gdyby nie mógł wchodzić w interakcję z dokumentem HTML. Dowiemy się, czym jest DOM (Document Object Model), ale co ważniejsze, nauczymy się pracować z HTML i CSS za pomocą JavaScript.

Obsługa zdarzeń

Teraz przejdziemy na wyższy poziom i nauczymy się reagować i wchodzić w interakcję z użytkownikiem za pomocą JavaScript. Dowiemy się również, dlaczego zdarzenia JavaScript mogą pękać i opadać.

HTML5 i CSS3

HTML5: co nowego i dlaczego?

Dowiedzmy się, jakie zmiany zaszły w HTML5 i dlaczego. Przyjrzyjmy się nowym elementom i przeanalizujmy przypadki ich prawidłowego użycia.

Pozycjonowanie elementów i siatki

Przyjrzyjmy się nowym sposobom strukturyzowania stron i pozycjonowania na nich elementów.

Formularze HTML5

Zbadajmy ciemną stronę mocy i poćwiczmy z nowymi formularzami w HTML5, a także zmianami w starych. Popracujmy nad nowymi typami pól do wprowadzania dat, kolorów, liczb i tego, jak podpowiadać użytkownikowi, aby trochę ułatwił mu życie.

Dźwięk i wideo

W tym samouczku jesteś zarówno DJ-em, jak i redaktorem. Podczas tej lekcji nie będziemy mieli czasu na stworzenie własnego YouTube'a, ale bardzo się postaramy stworzyć prototyp z podstawową funkcjonalnością.

Praca z tekstem w CSS3

Dowiedzmy się, jakie są możliwości i zalecenia dotyczące formatowania tekstu w najnowszej wersji standardu.

Efekty przejścia i transformacji w CSS3

Nauczmy się tworzyć animacje i różne efekty za pomocą CSS3. Zapoznajmy się z pułapkami podczas tworzenia takich efektów.

Układ adaptacyjny

Dowiedzmy się, dlaczego konieczne jest dostosowywanie układu, a kiedy jest to niepotrzebne i może wyrządzić szkody. Przyjrzyjmy się podstawowej składni i oczywiście poćwiczmy układ adaptacyjny.

Flexbox i siatka CSS

Dowiemy się, jakie są współczesne podejścia do układania bloków, a także jakie trudności wiążą się z ich stosowaniem.

Preprocesory CSS: LESS i SASS

Chcesz używać zmiennych w CSS? Łatwo! Dowiedz się, jakie ciekawe rzeczy możesz zrobić, korzystając z preprocesorów CSS.

JavaScript na nowym poziomie

ES-2015+

Co to jest nowoczesny JavaScript, „tryb ścisły” i jak z tym żyć.

OOP w JavaScript

Przyjrzyjmy się strukturze klas we współczesnym JavaScript i dlaczego się ich używa, skoro wszystko można zrobić za pomocą funkcji. Jak działa dziedziczenie i jakie inne sposoby tworzenia klas istnieją w JS.

Funkcje szczegółowo

Dowiedzmy się, czym jest Deklaracja funkcji i Wyrażenie funkcji, dowiedzmy się, jak wywołać funkcję bez nazwy. Przyjrzyjmy się wyrażeniu „wiązanie kontekstowe”.

AJAX i JSON

Wejdźmy na nowy poziom jako programiści, nauczmy się wysyłać żądania HTTP i dowiedzmy się, jak serwer i klient mogą się ze sobą komunikować i nie kłócić.

Wyrażenia regularne

„Jeśli masz problem i zamierzasz go rozwiązać za pomocą wyrażeń regularnych, to masz już dwa problemy”. Nauczmy się, jak uniknąć strzelania sobie w stopę za pomocą wyrażeń regularnych.

Konstruktorzy, moduły uruchamiające zadania i zarządzanie zależnościami

Bower, npm, gulp, Grunt, webpack i spółka. Nie ma w tym nic skomplikowanego, ale trzeba to rozgryźć.

Testowanie w JavaScript

Tam, gdzie jest kod, zawsze są błędy. Dowiesz się jak zminimalizować ich liczbę oraz jakie praktyki i narzędzia nam w tym pomogą.

Algorytmy

Dowiemy się jak napisać kod, aby później procesor i przeglądarka nie odczuwały straszliwego bólu podczas uruchamiania Twojego programu.

ReagujJS

Wprowadzenie do ReactJS

Zapoznajmy się z ReactJS, nauczmy się pisać proste komponenty i porównajmy go z innymi popularnymi frameworkami. Zapoznajmy się z koncepcją Virtual DOM.

Architektura i konfiguracja aplikacji React

Dowiedzmy się, jakie czynności musimy wykonać, aby nie tylko pisać w React, ale także robić to możliwie efektywnie i wygodnie.

Stworzenie pierwszej aplikacji w ReactJS

Przyjrzyjmy się bliżej JSX, ReactComponent, ReactDOM.render, funkcji Render. Konfigurujemy i uruchamiamy pierwszą aplikację, ustalamy relacje pomiędzy komponentami i zdarzeniami procesu.

Routing i ReactJS

Co to jest routing; Zapoznajmy się z ReactRouterem i jego funkcjonalnością; W naszej aplikacji organizujemy routing.