- 7
- 2 389
Websites21
Poland
เข้าร่วมเมื่อ 19 เม.ย. 2024
Witaj! 👋 Nazywam się Marcin Kołpacki i od ponad 5 lat zajmuję się programowaniem oraz projektowaniem stron internetowych. W moich filmach staram się dzielić w 100% wiedzą i doświadczeniem, które zdobyłem na przestrzeni tych ostatnich kilku lat.
Profesjonalna Strona Internetowa | NextJS 15, Tailwind, UI/UX, Psychologia Sprzedaży | Poradnik 2024
Witaj 👋, w tym filmie stworzymy profesjonalną stronę internetową dla trenera personalnego. Technologie, których użyjemy, to Next.js 15 i Tailwind. Pokażę Ci również, jak podejść do procesu tworzenia treści, aby skutecznie dotrzeć do potencjalnego klienta na stronie. Miłego oglądania!
📤 Kontakt: hello@websites21.com
Rozdziały
00:00:00 - Intro
00:07:40 - Instalacja i organizacja projektu
00:11:40 - Nawigacja
00:40:20 - Hero
00:57:50 - Oferta
01:15:30 - Modal
01:35:15 - O mnie
01:44:20 - Footer
📤 Kontakt: hello@websites21.com
Rozdziały
00:00:00 - Intro
00:07:40 - Instalacja i organizacja projektu
00:11:40 - Nawigacja
00:40:20 - Hero
00:57:50 - Oferta
01:15:30 - Modal
01:35:15 - O mnie
01:44:20 - Footer
มุมมอง: 450
วีดีโอ
#2 Od Zera do Web Developera: Kompletny Poradnik Grid CSS 2024
มุมมอง 1053 หลายเดือนก่อน
W tym filmie znajdziesz kompletny poradnik, który przeprowadzi Cię krok po kroku przez wszystkie kluczowe koncepcje i techniki związane z Grid CSS. Niezależnie od tego, czy dopiero zaczynasz swoją przygodę z web developmentem, czy chcesz pogłębić swoje umiejętności. W tym poradniku dowiesz się: 👉 Jak działa Grid CSS i dlaczego jest tak potężnym narzędziem do tworzenia złożonych układów. 👉 Jak t...
#1 Od Zera do Web Developera: Kompletny Poradnik Flexbox CSS 2024
มุมมอง 1063 หลายเดือนก่อน
W tym filmie znajdziesz pełen poradnik, który przeprowadzi Cię krok po kroku przez wszystkie kluczowe koncepcje i techniki związane z Flexboxem. Bez względu na to, czy dopiero zaczynasz swoją przygodę z web developmentem, czy chcesz poszerzyć swoje umiejętności. W tym poradniku dowiesz się: 👉 Jak działa Flexbox i jakie problemy rozwiązuje. 👉 Jak ustawić kontener Flex i jego elementy podrzędne. ...
Create a Perfect Hero Animation for Your SaaS with Next.js 14 and Tailwind CSS
มุมมอง 2353 หลายเดือนก่อน
In this video, I will show you how to create a perfect hero animation for a SaaS project. The tech stack we will use includes Next.js 14 and Tailwind CSS. Please subscribe and like this video. Thanks! 📤 Contact: hello@websites21.com
Zbuduj Profesjonalny Formularz Logowania i Rejestracji | NextJS, React Hook Form, Google OAuth 2.0
มุมมอง 2374 หลายเดือนก่อน
⭐️ Dostęp do kodu źródłowego: github.com/Websites21/acounter Witaj, w tym filmie nauczysz się, jak stworzyć profesjonalny formularz logowania i rejestracji użytkowników. Dodatkowo zaimplementujemy funkcję weryfikacji kont w naszym serwisie. W projekcie skorzystamy z następujących technologii: Next.js 14, Prisma, Resend, React Email, Zod, React Hook Form, Tailwind, Google OAuth 2.0 📤 Kontakt: he...
Stwórz Stronę Marketingową z Nowoczesnym UI/UX | Next JS, Tailwind, Framer Motion | Poradnik 2024
มุมมอง 5974 หลายเดือนก่อน
⭐️ Dostęp do kodu źródłowego: github.com/Websites21/extracorp Witaj, w tym filmie pokażę Ci, jak stworzyć profesjonalną stronę marketingową dla naszego produktu, jakim jest panel do zarządzania firmą. Stworzymy wszystkie najważniejsze sekcje, jakie taka strona powinna zawierać. Design strony został zaprojektowany z myślą o jak najlepszym UI i UX dla naszych potencjalnych klientów oraz sama stro...
Zbuduj Sklep Internetowy z Panelem Admina | Next.js 14, React, Tailwind, Stripe, Prisma 2024
มุมมอง 6624 หลายเดือนก่อน
⭐️ Dostęp do kodu źródłowego: github.com/Websites21/zielonapaka W tym poradniku nauczysz się, jak stworzyć sklep internetowy, w którym użytkownicy będą mogli dokonywać zakupu wybranych przez siebie produktów. Również damy możliwość dodawania produktów na sklep oraz ich aktualizacji i wiele więcej. MongoDB: www.mongodb.com/ Prisma ORM: www.prisma.io/ Stripe: stripe.com/en-pl Unsplash: unsplash.c...
W sumie fajny ten front. Na mobilce w 2h to ja ledwo jestem w stanie postawić projekt ze wszsytkimi dependencjami i jakąś prostą nawigacją między ekranami. :D
Dzięki!
siema pytanie czemu jpg trzymasz lokalnie na dysku a nie w jakims aws lub azure? duzo lepiej
Siema. Wszystko siedzi potem na GitHubie, a strona jest hostowana na Vercelu, gdzie CDN od razu też jest w pakiecie, więc nie widziałbym w tym przypadku wykorzystania dodatkowych zewnętrznych serwisów.
Błąd, który za uwarzyłem to dodawanie social media na samym początku strony - zmniejsza konwersje
Czy mógłbyś rozwinąć swoją myśl?
@Websites21 Tak, jest to szeroko pomijany zabieg w UX, ponieważ dodając social media na samym początku lub w header tracisz konwersje przebywania czasu na stronie. Nawet CTA nic w tym nie pomoże. Przykuwasz większą uwagę na social co powoduje, że uzytkownik traci koncentrację, może ponownie już nie wrócić i już nie skorzysta z twojej usługi
@@MCbyGracjan źle to tłumaczysz. Social media na początku strony to na samo wejście wstawiać punkty wyjścia do ogromnych social portali, na których jest 50 rozpraszaczy, i działające masy światowej klasy specjalistów od tego, żeby z tych social mediów już nie wrócić z powrotem na twoją stronę. Pozostaje pytanie, co dla klienta jest ważniejsze i gdzie znajduje się jego glówna konwersja - z social mediów na stronę czy odwrotnie.
@@Av-uv6xu Dokładnie mi o to chodziło, widocznie źle to ująłem. Oczywiście wszystko zależy od typu klienta, z jakiego "lejka" przybędzie
@@MCbyGracjan Macie rację. Znam ten mechanizm, ale kompletnie o nim nie pomyślałem w momencie projektowania strony. Dzięki za info.
Bardzo fajny materiał do nauki, dziękuje i wyczekuje kolejnych :))
Dzięki!
W tym projekcie nie ma ani grama potrzebny używania JavaScriptu, a co dopiero Nexta xD. To jak strzelać z czołgu do muchy...
Zgodzę się, że liczba możliwości oferowanych przez Next.js mogła znacząco przewyższać niskie wymagania projektu. Niemniej jednak, nie widzę powodów, dla których nie miałbym go tutaj użyć. Uważam, że jest to bardziej już kwestia preferencji i wyboru technologii.
Mogę się zgodzić, że next js to ciężkie działa (ale to moje osobiste odczucia). Jednak nawet dla tak prostych stron warto użyć frameworka do chociażby lepszej organizacji pracy. Dlatego rozumiem osoby, które są nauczone pracować w jednym frameworka i czują się tam komfortowo, wszystko mają poukładane, że nawet proste projekty w nim robią. Oczywiście można też sobie poukladać zwykły css przy użyciu preprocessora (less, sass, stylus). Dla tylko jednej strony rzeczywiście zwykle nie ma sensu zaciągać frameworka. Jednak, gdy ta jedna strona jest rozbudowana, a zwłaszcza już dla kilku podstron, dla lepszej organizacji pracy i ogarnięcia nawigacji i stopki w jednym miejscu polecam astro - super łatwy, lekki intuicyjny i przyjemny w pracy. W zasadzie nie trzeba używać javascriptu, pliki astro to w dużej mierze zwykły html, stworzenie componentu jest bardzo łatwe. Łatwo przy build wygenerować czyste pliki html nawet tak, że nikt nie ogarnie, że został użyty jakiś framework (gdy się nie używa scope styles i samemu doda pliki css przez link, albo w plikach astro dla każedgo ze styles is:global. Dla prostych statycznych stron, ale też potencjalnie wielkich, bez większej interakcji i backendowej funkcjonalności astro to przyszłość.
Mega fajny kursik! tak trzymaj! będę polecał dla swoich!
Dzięki wielkie!
Would you switch over to English?
Probably yes. Still testing the possibilities
Hej przypadkiem trafilem na Twoja strone szukajac jakichs ciekawych projektow w NextJS. Bardzo fajne prowadzenie tresci. Co ile planujesz wrzucac nowe projekty?
@@arkadiuszadamowicz4612 Hej, cieszę się że podobają ci się moje filmy. Wrzucam tak co 2 tygodnie ale teraz planuje trochę częściej to robić i wiadomo wtedy krótsze będą. No i po angielsku spróbuję także nagrywac bo chciałbym mieć większe zasięgi
I mam pytanie czy pracujesz jako front endowiec na stały etat. Jeśli tak po jakim czasie ci się udało go dostać bo wiem że teraz na rynku ciężko duża konkurencja.
Jeszcze jedno techniczne odnośnie tego projektu. Zamiast tworzyć ręcznie przy użyciu spanow hamburger menu można się posłużyć biblioteka react-icons i tam sobie wybrać ikonkę. Jeśli chodzi o przyciski typu button i inne tego typu komponenty typu button zauważyłem że większość twórców w swoich projektach wykorzystuje świetny framework shadcn. Polecam :)
@@arkadiuszadamowicz4612 Nie mam pracy żadnej jeszcze. Doszkalam się cały czas i będę się starał, żeby znaleźć coś jednak niedługo, żeby trochę więcej doświadczenia nabrać w tym wszystkim. Odnośnie shadcn, to jest to super rzecz. Osobiście sam jednak wolę samemu tworzyć wszystkie komponenty. A odnośnie ikonek to staram się zawsze, aby w każdym poszczególnym projekcie korzystać tylko z jednego zestawu ikonek i nie mieszać ich z innymi stylami. To taki tip designowy
Hej! Jeżeli chcesz przewinąć do jakiegoś szczególnego rozdziału, to w opisie masz wszystkie timestampy. Nie wiem czemu, ale TH-cam nie chce mi ich wygenerować na pasku.
łapka dla zasięgu
Solidny film
pertarda
Genialny poradnik. Mam nadzieje, że pojawi się z twojej strony wiecej takich treści i oczywiscie leci sub <3
fajny poradnik, ale troche boli mnie twoj bledy akcent "imejdż ułerel"
@@IceMatiQ prawda 👍
🔥 Uwaga! 🔥 Pierwsze 5 osób, które napiszą do mnie na maila hello@websites21.com, będą mogły umówić się ze mną na darmową rozmowę, w której wytłumaczę dokładniej zagadnienia poruszane w ostatnich filmach dotyczące tworzenia stron oraz designu. Jeżeli chcesz zdobyć nową wiedzę z tego zakresu, jest to idealna okazja.
super kanał, czekam na więcej materiałów :)
Dzięki!
Świetny film! Niesamowicie mi pomógł i bardzo zainspirował :) Powodzenia w dalszym rozwoju kanału!
Bardzo się cieszę, że film się tak podoba. Dzięki za ten komentarz, to bardzo pomaga
wszystko fajnie :) jedyne co do poprawy to sekcja z infinite loopem (logo) zacina się, można to w bardzo prosty sposób naprawić :D
Hmm u mnie wszystko płynnie chodzi
A jakie masz na to rozwiązanie?
Fajny odcinek, więcej takich
Dobry odcinek
Jestem fanem
siema a dlaczego użyłeś cn w 59:32 a nie optional rendering? czyli np className={`flex items-center gap-2 text-base font-medium pb-4 px-2 ${ pathname === "/admin/add-product" ? "text-green-700" : "text-gray-700" }`}
Hej, cn ma swoich kilka innych jeszcze zalet korzystania i po prostu to z niej korzystam za każdym razem gdy chce dodawać jakieś style warunkowe
Nie jest źle, ja bym Ci jeszcze polecił abyś filmik na sekcje podzielił, łatwiej by było nawigować i widzieć jaki etap teraz robisz
Hej, wyświetlił się Twój filmik w proponowanych - bo dużo oglądam takich projektów, fajny pomysł na odcinek, jeszcze nie obejrzałem całych 6h ale z tego co widzę wszystko wygląda schludnie, kompletnie i prosto tak jak mówi zasada KISS (Keep It Simple Stupid). Dałem subika, jestem ciekaw co jeszcze potrafisz zbudować i powodzenia w rozwoju kanału! Będę śledził.
Hej, zrobił się mocny trend ostatnio na tego typu projekty i pomyślałem, że też w to pójdę. Co do projektu, starałem się go właśnie zrobić jak najbardziej schludnie i przejrzyście zarówno w kwestii kodu, jak i designu. Do końca z całej pracy nie jestem zadowolony, ale mam nadzieję, że chociaż trochę wiedzy przekazałem. Dzięki za pierwszy komentarz.