Kurs Webflow

Wprowadzenie

Koszyk Koszyk
  • Opis
  • Recenzje
  • Autor
  • Transkrypt
  • Pytania i odpowiedzi
  • QA

23 ocen

Wprowadzenie

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ę!

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

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!

Dlaczego wybrać właśnie ten kurs?

  1. Kurs wideo to najbardziej efektywna a zarazem najprzyjemniejsza forma nauki. Jest on tak prowadzony, byś cały czas mógł go śledzić z zainteresowaniem i zaangażowaniem, a także czerpać satysfakcję ze zdobytej wiedzy!
  2. Wiedza, którą otrzymujesz w tym kursie, to nie tylko sucha teoria, ale również wskazówki od praktyka z wieloletnim doświadczeniem, dzięki którym dużo łatwiej będzie Ci opanować materiał i pracować efektywniej.
  3. Uczysz się na praktycznych przykładach. Kurs, który masz przed sobą to esencja praktycznej wiedzy i doświadczenia a także wzorów, które oszczędzą Ci godziny pracy i poszukiwań.
4 godziny 22 minuty

Strony WWW z SystemFlow

Framework dla Webflow

SystemFlow to framework stworzony z myślą o niezwykle wydajnej pracy w Webflow. Jeśli tworzysz strony dla klientów i chcesz znacznie przyspieszyć swoją pracę w Figma oraz Webflow - ten kurs powstał właśnie dla Ciebie! Omawia on wszystkie ważne składowe i koncepcje SystemFlow, pokazując podejście systemowe do projektowania. Sam SystemFlow zawiera dziesiątki gotowych do użycia komponentów i ponad 1000 klas CSS, które pomogą Ci zapanować nad prostymi i bardziej złożonymi projektami. Sam SystemFlow oraz dostęp do Webflow czy Figmy należy wykupić osobno, ale w kursie znajdziesz kupon o wartości około 100 zł, którym obniżysz cenę SystemFlow przy jego zakupie.

Grzegorz Róg

25 minut

Webflow Tips and Tricks

Przyspiesz swoją pracę w Webflow

Zobacz najciekawsze triki i techniki pracy w Webflow, z pomocą których budowanie stron WWW będzie jeszcze prostsze, a przede wszystkim - szybsze! Na przestrzeni tylko 25 minut, Grzegorz pokaże Ci ponad 40 praktycznych technik, o których być może jeszcze nie słyszałeś. Przyjrzymy się między innymi najważniejszym skrótom klawiaturowym upraszczającym pracę, poznasz też przykłady technik z zastosowaniem obrazków, polepszania wydajności Twojego projektu, korzystania z zewnętrznych wtyczek i narzędzi czy organizacji klas. To materiał obowiązkowy dla każdego, kto już pracuje w Webflow bądź zaczyna uczyć się tego narzędzia, dzięki czemu wejdziesz na zupełnie nowy, zoptymalizowany poziom pracy!

Grzegorz Róg

1 godzina 40 minut

Strony WWW w Rekordowym Czasie

Dzięki Webflow i SystemFlow

Czy da się zarobić 10.000 zł na stronie wykonanej w 2 godziny? Jak się okazuje - tak, trzeba tylko poznać najnowsze technologie no-code i ich praktyczne zastosowania. Już wkrótce zmieni się na dobre to, jak podchodzimy do tworzenia stron WWW oraz front-endu a klasyczne podejście w przypadku wielu projektów odejdzie w zapomnienie. Będziemy pracować szybciej, skuteczniej i lepiej. Wymaga to jednak zmian - w myśleniu twórców, freelancerów, agencji, klientów. Okazuje się, że często osoby bez dużego doświadczenia są w stanie tworzyć i dowozić projekty lepiej i szybciej, niż zespół developerów. Jednak i jedni i drudzy zdecydowanie zyskają na nowym podejściu, które chcę Wam pokazać. W ramach Warsztatu wykonamy praktyczny projekt prostej strony, która z pewnymi modyfikacjami została w rekordowym czasie wdrożona dla klienta... za rekordową cenę. Najważniejsze jest jednak, że wszyscy byli zadowoleni. Zobacz, że to możliwe i zacznij uczyć się właściwych technologii!

Grzegorz Róg

3 godziny 52 minuty

Kurs Webflow

E-commerce

Profesjonalny sklep z autorskim layoutem w kilkanaście godzin? Tak właśnie wyglądała droga do tworzenia źródeł do tego kursu. W tym kursie dowiesz się, jak z pomocą Webflow i jego nowego modułu e-commerce, przygotować w pełni funkcjonalny sklep internetowy - dla Ciebie, lub Twojego klienta. Naszym zdaniem Webflow to godna uwagi alternatywa dla WooCommerce czy Shopify, posiadająca wiele zalet jeśli chodzi o elastyczność, skalowalność i profesjonalizm tworzonego rozwiązania. Ma jednak na razie także kilka wad, które należy rozważyć podczas realizacji konkretnego projektu. Zapraszamy na kurs, w ramach którego Grzegorz krok po kroku przeprowadzi Cię przez budowę kompletnego sklepu dla marki odzieżowej w Webflow.

Grzegorz Róg

4 godziny 45 minut

Kurs Webflow

Techniki Zaawansowane i CMS

Dzięki Webflow możesz tworzyć strony WWW bez konieczności kodowania - zarówno statyczne, jak i dynamiczne, z wykorzystaniem CMS oraz bazy danych. To narzędzie, które zmienia sposób, w jaki tworzymy internetowe serwisy, pozwalając nam pracować wydajnie jednak w zgodzie ze standardami. Naszym zdaniem to narzędzie, które zasługuje na miano "kolejnego WordPress'a". W tym Kursie dowiesz się jak przygotować kompletny system blogowy z wykorzystaniem CMS w ramach Webflow. Jeśli jeszcze nie masz podstaw Webflow, zachęcamy do skorzystania wcześniej z kursu podstawowego.

Grzegorz Róg

Autor: Grzegorz Róg

**Idea Architect**

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. <br><br> 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!

eduweb.pl
@grzegorzrog

Ten kurs nie posiada jeszcze transkryptu. Choć bardzo się staramy, wygenerowanie transkryptów do wszystkich kursów jest bardzo czasochłonne. W wielu przypadkach wymaga zaangażowania drogiego oprogramowania i godzin pracy przy poprawianiu transkryptu tak, aby był on możliwie jak najlepszy.

Zależy nam na tym, aby przygotować transkrypty do wszystkich naszych treści. To jedyny sposób dla osób niedosłyszących, aby mogły wygodnie uczyć się technologii. Poza tym, transkrypty ułatwiają skanowanie kursu w poszukiwaniu informacji i jego indeksowanie.

Szukamy osób, które mogłyby nam pomóc w poprawianiu transkryptów. Jeśli masz chwilę wolnego czasu i interesuje Cię dany kurs, w zamian za taką pomoc chętnie udostępnimy Ci wybrany materiał. Wyślij swoje zgłoszenie tutaj, jeśli możesz pomóc nam rozwijać platformę.

  • Informacje
  • Lekcje

Autor: Grzegorz Róg

Czas: 5 godzin 47 minut

Wersja: Webflow 2020+

Aktualizacja: 21.07.2020

  • Certyfikat w ramach Ścieżki
  • Dostęp z urządzeń przenośnych
  • Licencje dla firm i szkół
Podaruj w prezencie

Witaj w Webflow

  • Wprowadzenie

  • Wycieczka po UI

  • Podstawowe ustawienia

  • Import fontów

Wprowadzenie do pracy

  • Praca z CSS

  • Jak działają breakpointy

  • Podstawy layoutu

Pierwsza Sekcja Strony

  • Sekcja Hero

  • Style dla sekcji Hero

  • Czym są symbole

  • Stany przycisków

Tworzymy menu

  • Podstawy menu

  • Praca z submenu

  • Wariant po najechaniu

  • Dokowanie menu

  • Menu dla telefonów

  • Gotowe menu

Kolejne sekcje Strony

  • Sekcja Features

  • Sekcja Delivery

  • Sekcja Standards

  • Sekcja z zakładkami

  • Wariant responsywny zakładek

  • Sekcja z Partnerami

Sekcja FAQ i Animacja

  • Struktura sekcji

  • Elementy Animacji

  • Timing Animacji

  • Ustawienia Targetu Animacji

  • Easing w Animacji

Kończymy Stronę

  • Sekcja z Blogiem

  • Formularz Kontaktowy

  • Korzystanie z Font Awesome

  • Budujemy footer cz. 1

  • Budujemy footer cz. 2

Dodatki

  • Animacje na stronie cz. 1

  • Animacje na stronie cz. 2

  • Obsługa formularza w Zapier

  • Publikowanie Strony

Zakończenie

  • To wszystko na teraz

}