Quest: CSS Grid
Pobaw się poniższym kodem. Zwróć uwagę na zachowanie przy zmianie szerokości okna przeglądarki. <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal ...
Quest: HTML i CSS beginner
Oto kilka przydatnych kodzików i kilka przydatnych linków. Pierwsze zadanie jest następujące: zrób stronę internetową, której kod rozumiesz w 100%. Zadanie drugie: opublikuj swoją stronę. Prosty kodzik #1 <!DOCTYPE html> <html> <hea ...
Mój zestaw zasad obowiązujących na zajęciach (v2.9)
Zasady dotyczące celu przychodzenia na zajęcia: Do szkoły przychodzimy, żeby się uczyć. Wyposażenie pracowni przeznaczone jest wyłącznie do nauki. Wykorzystanie sprzętu podczas lekcji do celów innych niż nauka jest zabronione i powoduje pozbawie ...
Quest: WordPress + Elementor
Utwórz stronę startową dla fikcyjnej szkoły akrobatyki „YOU CAN”: wykorzystanie gotowego szablonu w Elementorze dopuszczalne odwzorowanie istniejącej strony (układ 1:1) zmiana treści i grafik na własne strona musi być: w pełni klikalna ...
Quest: Logika a CSS
Jak zasady logiki formalnej pojawiają się w CSS – każdy selektor to tak naprawdę mała „formuła logiczna”, określająca, które elementy spełniają dane warunki. Przeanalizuj poniższy kod, a następnie sprawdź czy rozumiesz, wykonując polecenie podane na ...
Quest: Logika, entropia, modele i abstrakcja
Cel projektu Zrozumienie czterech podstawowych pojęć z teorii informatyki.Celem nie jest referat teoretyczny.Celem jest pokazanie, że te pojęcia realnie wpływają na rozumienie, ocenę i projektowanie systemów i ich funkcji. Etap I – praca indyw ...
Quest: Bootstrap z CSSem w parze
Przykład poniżej pokazuje, że wygląd Bootstrapa 5 można zmieniać (bez SCSS), korzystając z kaskady CSS oraz zmiennych CSS wbudowanych w framework. Nadpisanie zmiennych globalnych (:root) zmienia cały motyw aplikacji, natomiast nadpisanie zmiennyc ...
Quest: Grid vs Flex w Bootstrapie
Porównajmy dwa warianty kodu: Grid <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Bootstrap layout – Grid</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link ...
Quest: CSS vs Bootstrap
Osobiście nie lubię dopracowywać wyglądu stron i aplikacji. Jeśli masz podobnie - może Ci się spodobać Bootstrap. Przeanalizuj kod poniżej Możesz też przeanalizować kodziki z questa Bootstrap - start Dopytaj AI czym jest Bootstrap, ale ko ...
Quest: The Event
Temat projektu: Strona promująca kilkudniowe wydarzenie Celem projektu jest stworzenie responsywnej strony internetowej w WordPressie, promującej kilkudniowe wydarzenie (np. konferencję, obóz, wyprawę lub szkolenie). Strona powinna prezentować pe ...
Quest: HTML + CSS bez JS
CSS się zmienia, ewoluuje. To co kiedyś wymagało JS dziś już często go nie potrzebuje. Demo 1 - basic <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca ...
Quest: Bootstrap – start
Przetestuj i przeanalizuj te dwa kody: Akordeon: <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Akordeon Bootstrap</title> ...
Vibe coding – filmik
AI - Co robić i jak żyć? Gdzie są granice używania AI do kodowania? A może wcale ich nie ma? https://youtu.be/TaZDH4DxSl8 Moja sugestia na etapie nauki kodowania: Zastąp vibekodowanie "programowaniem w parze z AI". Nie rezygnuj z etap ...
Quest: Strona z bazą JSON (ładowaną w JS)
A gdyby tak utworzyć plik z bazą danych...? Poniższy projekcik to strona której treść jest pobierana z pliku JSON za pomocą skryptu JS. Uruchom projekt i popraw: W pliku JSON są podane adresy grafik, jednak grafiki nie istnieją. Przygotuj je ...
Quest: WordPress + JS
Przetestuj działanie skryptu, a następnie uruchom go w Wodrpresie. Kod HTML wyklikaj w edytorze Wordpressa Kod CSS dodaj do kodu szablonu strony lub za pomocą wtyczki (np. Simple Custom CSS and JS) Kod JS dodaj za pomocą wtyczki (np. Code ...
Quest: WordPress – wtyczki
Rozbuduj funkcjonalność Swojej strony. Dodaj: Podstronę na hasło Podstronę wymagającą zalogowania System gromadzenia statystyk Informację o ciasteczkach zgodną z prawem Działający formularz kontaktowy Efektowną podstronę zrobioną ...
Quest: Podstawy WordPressa
Zainstaluj Wordpressa Instalacja ręczna - to czasem jedyna opcja. Użyj wtedy jednego z wielu poradników wideo z YT. Instalacja automatyczna - najczęściej hostingi posiadają zautomatyzowany instalator popularnych skryptów takich jak Wordpress. B ...
Quest: Zawsze tylko dobre strony
Cechy dobrej strony by PK Użyteczna - tworzona w określonym celu - wtedy jest motywacja Responsywna - witryna dopasuje się do wielkości używanego urządzenia Prosta - bez zbędnych efektów Przejrzysta nawigacja Atrakcyjna wizualnie ...
Quest: Projektowanie UX – tekst
Tekst Czytelność: Wybieraj czcionki, które są łatwe do odczytania na ekranie, np. bezszeryfowe dla tekstów głównych. Szeryfowe są dobre dla dłuższych treści w PDF-ach lub książkach cyfrowych. Rozmiar czcionki: odpowiedni dla platformy i zasto ...
Quest: Projektowanie UX – menu
Tworzenie intuicyjnego menu i łatwej w obsłudze nawigacji na stronie internetowej to kluczowy element dobrego projektowania UX (User Experience). Oto zasady, które warto stosować: Czytelność: Używaj prostych i zrozumiałych etykiet, np. „O nas”, ...
Quest: Selektory CSS
Przeanalizuj i zrozum kod: <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>Selektory CSS</title> <style> * {color: grey;} div { font-f ...
Quest: Krótki CSS
Te elementy formatowania w CSS są podstawowe. Najpierw upewnij się, że rozumiesz kod. Jest tu kilka nieoczywistych elementów: Niektóre style mają 2 lub 4 wartości. Co oznaczają poszczególne liczby? W kodzie są znaki . # > Co oznaczają? ...
Quest: Responsywna tabela
Ta prosta tabela nie jest responsywna. Możesz to sprawdzić zmniejszając okno przeglądarki. Lorem ipsum 1Lorem ipsum 2Lorem ipsum 3Lorem ipsum 4Lorem ipsum 5Lorem ipsum 6Lorem ipsum 789101112131415151718192021 ale jeśli przetestujesz poniższy k ...
Quest: Quasi-blog
Problem Jaką technologię wybrać do przygotowania quasi-bloga, by dodawanie wpisów było łatwe a sam blog efektowny? Co na nim publikować? Możliwe rozwiązania Strona w HTMLTo rozwiązanie najprostsze technicznie, ale finalnie najbardziej prac ...