Ta lekcja jest w bazie eduweb

Zaloguj się kontem z dostępem albo wykup dostęp do bazy, żeby obejrzeć wideo.

Lekcja 11/ 38Stany przycisków

0:00 / 0:00
UI, UX i WebdesignWebflowStrony WWW bez Kodowania

Webflow: Stany przycisków

5 godz. 47 min wideo38 lekcji9 modułów

Czego się nauczysz

  • Praktyczny przykład wdrażania strony
  • Statyczna strona one-page
  • Wszystkie narzędzia layoutu w Webflow
  • Publikowanie strony na subdomenie
  • Układ i struktura HTML
  • Wdrożenie projektu z kursu Adobe XD

Webflow - Strony WWW bez Kodowania

Webflow to obecnie najlepszy wizualny edytor stron WWW. To prawdziwa rewolucja jeśli chodzi o projektowanie i wdrażanie zarówno statycznych, prostych stron, jak i witryn zawierających dynamiczne treści a nawet gotowych systemów e-commerce. Z wykorzystaniem technologii no-code publikacja stron jest szybsza i łatwiejsza niż kiedykolwiek. Ten kurs ma za zadanie wprowadzić Cię w Świat stron bez kodowania z pomocą Webflow, adresując najważniejszy element - layout. W skrócie, poznasz wszystkie techniki które pozwalają na wykonanie dowolnego projektu w Webflow, od czystej kartki, aż po działającą, statyczną witrynę. To świetny wstęp dla tych z Was, którzy jeszcze nie mieli do czynienia z Webflow, chcą ugruntować podstawy, bądź stworzyć swoją pierwszą stronę!

Nowoczesny Edytor

Jeśli edytory wizualne stron kojarzysz z technologiami określanymi jako WYSiWYG - Webflow nie ma z nimi praktycznie nic wspólnego. Kod, który generowany jest przez Webflow to czysty, estetyczny HTML, CSS, JavaScript a o jego jakości decyduje jedynie to, jak dobrze znasz narzędzie a także technologie webowe. Można więc powiedzieć, że Webflow raczej pozwala Ci tworzyć strony w rekordowym czasie, dzięki temu że nie musisz pisać kodu, a układ wyklikujesz w interfejsie. Takie podejście gwarantuje, że nasze strony będą przygotowane w oparciu o semantyczny kod i nowoczesne standardy!

Możliwości Webflow

Są praktycznie nieograniczone. Poza tym, że możesz tworzyć strony statyczne, masz też możliwość przygotowania dynamicznych witryn w oparciu o CMS a nawet kompletnych systemów E-commerce, budując je z gotowych komponentów. Webflow tym jednak różni się od "kreatorów stron", że zaczynamy w nim pracę zwykle od czystej kartki, a co za tym idzie możemy zaimplementować dowolny layout! Następnie, z pomocą Webflow możemy opublikować gotową stronę, dodać do niej naszą domenę, dołożyć hosting i... violla! Bez zbędnych konfiguracji strona jest widoczna w sieci. Dodatkowo, klient może edytować ją bezpośrednio w przeglądarce, z pomocą wbudowanego Edytora CMS, a także dodawać treści!

Czego dowiesz się z kursu Webflow

W tym kursie skupimy się na Layoucie, który jest podstawą efektywnej pracy w Webflow. To znaczy, że omówimy elementy semantyczne strony jak również jej ostylowanie. Dowiesz się, jak zastosować w Webflow popularne konstrukcje CSS Layout, takie jak Grid czy Flexbox. Pokażę Ci jak od czystej kartki wdrożyć kompletny layout strony, którą wcześniej przygotowaliśmy w kursie Adobe XD. Jeśli chcesz dowiedzieć się, jak zaprojektowałem samą witrynę - odsyłam Cię właśnie do tego kursu. Możesz przerobić go wcześniej, lub równolegle z kursem Webflow, który masz przed sobą.

Co po nauce Layoutu?

Po opanowaniu podstaw Webflow będziesz mógł z powodzeniem tworzyć statyczne witryny, w rekordowym czasie. Poznasz wszystkie zasady konstrukcji i stylowania. Będziesz więc mógł wyruszyć w dalszą podróż z Webflow z kolejnymi kursami, które znajdziesz na eduweb.pl i dodać do Twojej strony dynamiczne dane (w kursie Zaawansowanym przygotujemy bloga), jak również cały system E-commerce (który stworzymy w osobnym kursie). Wszystkie materiały przygotowałem tak, aby się dopełniały i abyś mógł poznać wszystkie, nawet najbardziej zaawansowane funkcje Webflow w rekordowym czasie!

Webflow a WordPress

Można powiedzieć, że Webflow ze swoim podejściem i integracją z wieloma narzędziami no-code to WordPress na miarę naszych czasów. Trudno powiedzieć, że w każdym aspekcie tworzenia stron będzie lepsze, jednak WordPress ma niewątpliwie sporo wad, które Webflow eliminuje - przykładem jest dość archaiczny codebase, dziurawe wtyczki, podatność na ataki, konieczność ciągłego utrzymania, własnego hostingu etc. Nie ulega wątpliwości, że Webflow jako platforma zarządzana i nowoczesna, ze świetnie rozwiązanym, skalowalnym hostingiem, darmowym SSL itp. ma wiele atutów. Jednak dalej WordPress będzie przydatny w niektórych zastosowaniach i np. budżetowych rozwiązaniach na potrzeby blogów, oraz tam, gdzie wtyczki mogą zastąpić funkcjonalności, których brakuje w Webflow. Nadal te dwa narzędzia są ważne w zasobniku każdego web designera i na pewno warto je znać a następnie na potrzeby konkretnego projektu - wybrać to bardziej odpowiednie!

Dla kogo jest ten kurs?

Webflow to genialne narzędzie dla wszystkich osób, które chcą zacząć swoją przygodę z tworzeniem stron WWW - prosty interfejs wizualny, rozbudowane możliwości, hosting, SSL, domena - to wszystko w kilka kliknięć. Dlatego ten kurs to dobra propozycja dla osób początkujących, które chcą zacząć tworzyć strony. Ale uwaga! Bez solidnych podstaw HTML i CSS Twoje strony nigdy nie będą optymalnie przygotowane. Będziesz także często sfrustrowany tym, że jakieś ustawienie nie działa - tymczasem będzie to pożądane zachowanie wynikające ze specyfikacji HTML. Dlatego zdecydowanie polecam przed kursami Webflow przerobić przynajmniej kurs podstawowy HTML i CSS, a optymalnie jeszcze kursy CSS Grid i Flexbox. Webflow swój największy potencjał jest bowiem w stanie odkryć przed tymi z Was, którzy rozumieją już technologię web i potrafią tworzyć strony. W rękach takich osób Webflow to narzędzie, które niesamowicie przyspiesza pracę i dowożenie nowych projektów dla klientów. Mimo więc, że Webflow jest przyjazny dla początkujących (którzy nawet równolegle mogą uczyć się HTML), jego zalety w największej mierze docenią web designerzy, UI/UX designerzy i web developerzy, którzy mogą pracować i dostarczać projekty w zupełnie nowy sposób!

Wersja oprogramowania: Webflow 2020+

Kurs Webflow

9 rozdziałów38 lekcji5h 47min

Witaj w Webflow

36min
  • Wprowadzenie5min(zablokowana)
  • Wycieczka po UI12min(zablokowana)
  • Podstawowe ustawienia8min(zablokowana)
  • Import fontów11min(zablokowana)

Wprowadzenie do pracy

25min
  • Praca z CSS10min(zablokowana)
  • Jak działają breakpointy5min(zablokowana)
  • Podstawy layoutu9min(zablokowana)

Pierwsza Sekcja Strony

36min
  • Sekcja Hero13min(zablokowana)
  • Style dla sekcji Hero9min(zablokowana)
  • Czym są symbole8min(zablokowana)
  • Stany przycisków6min(zablokowana)

Tworzymy menu

1h 1min
  • Podstawy menu10min(zablokowana)
  • Praca z submenu14min(zablokowana)
  • Wariant po najechaniu11min(zablokowana)
  • Dokowanie menu8min(zablokowana)
  • Menu dla telefonów7min(zablokowana)
  • Gotowe menu12min(zablokowana)

Kolejne sekcje Strony

1h 2min
  • Sekcja Features16min(zablokowana)
  • Sekcja Delivery11min(zablokowana)
  • Sekcja Standards9min(zablokowana)
  • Sekcja z zakładkami7min(zablokowana)
  • Wariant responsywny zakładek7min(zablokowana)
  • Sekcja z Partnerami13min(zablokowana)

Sekcja FAQ i Animacja

40min
  • Struktura sekcji9min(zablokowana)
  • Elementy Animacji9min(zablokowana)
  • Timing Animacji6min(zablokowana)
  • Ustawienia Targetu Animacji7min(zablokowana)
  • Easing w Animacji9min(zablokowana)

Kończymy Stronę

56min
  • Sekcja z Blogiem13min(zablokowana)
  • Formularz Kontaktowy12min(zablokowana)
  • Korzystanie z Font Awesome10min(zablokowana)
  • Budujemy footer cz. 113min(zablokowana)
  • Budujemy footer cz. 28min(zablokowana)

Dodatki

32min
  • Animacje na stronie cz. 18min(zablokowana)
  • Animacje na stronie cz. 28min(zablokowana)
  • Obsługa formularza w Zapier5min(zablokowana)
  • Publikowanie Strony11min(zablokowana)

Zakończenie

1min
  • To wszystko na teraz1min(zablokowana)

Ten kurs jest w bazie eduweb

Dostęp do wszystkich kursów z bazy eduweb za 199 zł/mies.

Wykup dostęp do bazy

Autor kursu

Średnia ocen autora: 4,8

Bio

Od wielu lat projektuje serwisy internetowe, dużą wagę przykładając do ich funkcjonalności a także skutecznych technik promocji. Swoje umiejętności praktyczne zdobywa projektując grafikę oraz strony www dla wiodących polskich i zagranicznych agencji reklamowych. Współpracuje między innymi z Adobe, Microsoft, Wacom. Jako trener i spiker prowadzi szkolenia oraz eventy i warsztaty. Posiada szereg uprawnień i certyfikatów eksperckich.

W wolnych chwilach stara się przekazać Ci całą praktyczną wiedzę, pasję i doświadczenie. Zapraszamy do kursu - gwarantujemy, że ta świetna zabawa przyniesie Ci mnóstwo satysfakcji!