Bubble: Rozpoczynamy budowę Headera
od Podstaw
6 godz. 34 min · Bubble · Full-stack i Programowanie
Krzysiek PiekarzAutomation Specialist / No-code DeveloperCzego się nauczysz
- Podstawy pracy z edytorem
- Wprowadzenie do workflows
- Praca z nowym silnikiem responsywnym
- Praktyczne wykorzystanie pluginów
- Statyczna strona główna
- Funkcjonalna strona logowania i rejestracji
Praca w stylu no-code
Zapomnij o ręcznym pisaniu kodu i żmudnym tworzeniu stron www lub aplikacji! Wykorzystując przejrzysty edytor Bubble będziemy w stanie rozpocząć naszą pracę od czystej kartki i wyklikać cały układ bezpośrednio w interfejsie. Dodatkowo pokażę Ci w jaki sposób można wdrożyć do projektu w pełni funkcjonalną logikę obsługi użytkowników nawet wtedy, gdy nie posiadasz żadnej wiedzy programistycznej. A to wszystko w niemal ekspresowym tempie i bez zbędnych konfiguracji, które bywają zmorą programistów.
Dlaczego warto korzystać z Bubble?
Edytor zapewnia spójny i intuicyjny interfejs, dzięki któremu stworzenie nawet skomplikowanej aplikacji staje się wyjątkowo proste. Dodatkowo wbudowana baza danych sprawia, że nie musimy korzystać z żadnych zewnętrznych rozwiązań a zarządzanie nią jest na tyle intuicyjne, że poradzi sobie z tym nawet niedoświadczony użytkownik. Kolejną zaletą jest dostęp do ogromnej biblioteki pluginów, dzięki którym będziemy mogli wzbogacić naszą aplikację o obsługę płatności, analitykę, SEO i wiele więcej.
Co można zbudować w Bubble?
Niemal wszystko, z wykorzystaniem Bubble bezproblemowo stworzymy klony takich serwisów jak: Twitter, Asana, Todoist, AirBnB, Trip Advisor lub Yelp. Edytor pozwala stworzyć w pełni funkcjonalną aplikację w ciągu nawet kilku dni! Dzięki temu nie będziemy musieli przepalać naszego budżetu na zewnętrzne software house, którym wdrożenie podobnych rozwiązań może zająć tygodnie pracy.
Czego dowiesz się z kursu?
W tym kursie skupimy się na podstawach pracy z edytorem, tak aby korzystanie z niego stało się dla Ciebie naturalne. Wykorzystamy w praktyce zakładkę Design, która jest odpowiedzialna za front-end naszej strony oraz zapoznamy się z działaniem workflows, które "tchną życie" w nasz projekt. Efektem naszej pracy będzie nowoczesny landing page oraz w pełni funkcjonalna strona logowania/rejestracji. Dodatkowo zadbamy również o to, by całość była w pełni responsywna i dobrze prezentowała się zarówno na ekranach desktopowych, jak i urządzeniach mobilnych.
Wykraczamy poza edytor
Jedną z zalet edytora Bubble jest to, że nie stanowi on hermetycznego środowiska, w którym jesteśmy skazani na korzystanie jedynie z rozwiązań zaprojektowanych przez jego twórców. To niesamowicie funkcjonalna platforma, którą w prosty sposób możemy połączyć również z zewnętrznymi usługami wykorzystując gotowe pluginy. Pokażę Ci w jaki sposób możemy zaimplementować do naszego projektu opcję logowania i rejestracji z wykorzystaniem Google, tak, aby użytkownik mógł utworzyć konto w naszym serwisie za pomocą jednego kliknięcia. A kolejnym bonusem będzie przesyłanie adresów e-mail z formularza zapisu na newsletter bezpośrednio do bazy w Airtable!
Dla kogo jest ten kurs?
Ten kurs powstał z myślą o osobach, które chcą poznać edytor Bubble i nowy kierunek rozwoju aplikacji no-code. Będzie również doskonałym punktem startowym dla tych wszystkich, którzy nie posiadają żadnej wiedzy programistycznej ale nadal chcą tworzyć w pełni funkcjonalne serwisy i strony internetowe. Poziom kursu został dopasowany zarówno do osób, które do tej pory nie korzystały z Bubble, jak i tych, którzy posiadają już przynajmniej podstawowe doświadczenie w tym zakresie. Dzięki zdobytej w nim wiedzy będziesz mógł postawić pierwszy krok na drodze, która pozwoli Ci przekuć Twój pomysł w działający startup.
Witam Cię w kolejnej lekcji, w której skupimy się na tworzeniu naszego header'a.
Wróćmy więc do projektu wzorcowego i zobaczmy jak to tutaj wygląda.
A więc będziemy budować tą część.
Mamy tutaj logo, dodatkowo nazwę projecto obok menu oraz dwa przyciski.
A więc nie przedłużając wracamy do edytora i przystępujemy do pracy.
Natomiast zanim do tego przejdziemy, chcę zwrócić Twoją uwagę na jedną bardzo ważną rzecz.
Jeżeli tutaj teraz najadę na grupe, na daną
grupę wrapper.
To jak widzisz, pojawia mi się tutaj oznaczenie 830 pixeli od dołu strony.
Dodatkowo jeżeli najadę na sam element to mam informację jego szerokości i
wysokości. Za wyświetlanie tych danych odpowiada ta
tutaj włączona opcja show distance on hover.
Jeżeli bym ją wyłączył
to teraz najeżdżając na element nic się tutaj więcej nie pojawia.
Ja natomiast zawsze korzystam z tej opcji zawsze zostawiam ją włączoną, ponieważ
dużo łatwiej jest wtedy pozycjonować elementy.
Dodatkowo, przejdźmy tutaj do grupy wrapper.
I ustalmy jakąś minimalną wysokość na
troszkę większą, żeby nam się lepiej pracowało np.
na 550 pixeli.
Dodatkowo mamy tutaj zaznaczoną opcję fit hight to content.
Działa to na tej zasadzie, że teraz ta grupa
może mieć minimalną wysokość 550 pixeli i nie ustawialiśmy żadnej maksymalnej,
jest tutaj infinite, a przy tej opcji będzie się ona
rozszerzała tak długo w dół, aby zmieściły się w niej wszystkie elementy dzieci.
Jeżeli teraz dodajemy tutaj jedną grupę, skopiuję i wkleję.
Znowu skopiuję i wkleję.
Tak jak widzisz teraz cała grupa wrapper nam się rozciąga w dół, tak aby dostosować
swoją wysokość do wszystkich elementów jakie znajdują się w środku.
Tyle tutaj tytułem wstępu.
Wróćmy do tej grupy i nazwijmy ją header.
Container layout ustawiamy oczywiście na row.
Zgodnie tutaj z naszym wzorcowym projektem odznaczamy fixed-width.
I to co możemy zrobić teraz to tutaj usunąć tę wartość, czyli wpisać 0.
Dlaczego wpisałem tutaj 0, a nie 320?
Otóż dlatego, że teraz mówię, że grupa header będzie dostosowywała swoją
szerokość do elementu rodzica, czyli maksymalnie może się rozciągnąć,
mając tutaj zaznaczone infinity,
na taką szerokość jaką będzie miał rodzic.
A ponieważ dla rodzica ustawiliśmy tutaj
to minimalne 320, to nie musimy tego robić dla każdego jego dziecka.
Dodajmy teraz jeszcze marginesy do naszego header'a.
Chcę, żeby on był tutaj odsunięty od krawędzi o 40 pixeli z każdej strony.
Robię to po to, aby właśnie
jeżeli zejdziemy tutaj,
przejdziemy do trybu responsywnego.
Ustalmy to 1280 pixeli.
Tak jak widzisz tutaj nasz header jest odpowiednio odsunięty od
krawędzi, tak żeby nie przylegał po tych stronach od razu do całej strony.
Stawiamy sobie tutaj taki delikatny oddech.
Wracamy do builder'a i ok.
Możemy teraz przystąpić tutaj do dodawania kolejnych elementów.
Pierwszym z nich będzie obrazek, a więc
wybieram tutaj element image i wstawiam bezpośrednio
do naszego header'a.
Widzisz obrazek został wstawiony.
Pojawiło nam się tutaj okienko właściwości dostosowane właśnie do tego elementu.
I teraz tak. W zakładce tutaj appearance przede wszystkim
możemy wczytać taki statyczny obrazek bezpośrednio z naszego dysku.
Możemy go również tutaj wyszukać
w obrazkach dostępnych w serwisie Pexels.
Jeżeli wybrałbym jakiś obrazek i kliknął import poczekajmy chwilkę.
Jak widzisz taki obrazek został wstawiony, a tutaj
dodatkowo Bubble
wstawił go bezpośrednio do samego edytora.
Wygenerował dla nas link,
natomiast my możemy ten obrazek usunąć, jest nam tutaj niepotrzebny.
Klikam więc tutaj w clear,
muszę się przełączyć między zakładkami, aby zostało to odpowiednio wyczyszczone.
I chcę wstawić tutaj swój własny obrazek z dysku.
Klikam więc na upload
i wskazuję odpowiedni obrazek,
w moim przypadku jest to logo svg.
Dodatkowo możemy tutaj jeszcze przyciąć taki obrazek.
Ja z tej opcji bardzo rzadko korzystam, ale może Ci się do czegoś przydać.
Natomiast bardzo ważne jest stawianie alttagów do obrazków.
Ja tu wpiszę projecto logo.
Dodatkowo możemy tutaj jeszcze zaznaczyć opcję czy ten obrazek nie jest klikalny
o tym porozmawiamy sobie nieco więcej, kiedy będziemy omawiać workflows.
Tak samo ten przycisk.
Jak się domyślasz, tutaj możemy ustawić odpowiednie style dla takiego obrazka.
Bubble dla obrazków nie ma jakichś żadnych predefiniowanych styli.
Moglibyśmy je dodać, my tego nie będziemy robić.
Natomiast możemy dodać tzw.
tooltip, czyli tekst, który będzie się
pojawiał, jeżeli użytkownik najedzie na taki obrazek.
Możemy tutaj dodać i zobaczyć jak to będzie działało.
Kliknijmy preview.
Jeżeli teraz najadę na obrazek
to pojawia mi się właśnie taki tooltip:
Hello World, czyli z tekstem, który tam wpisaliśmy.
Czasami ta opcja może Ci się przydać, ja natomiast rzadko z niej korzystam, więc
to możemy wyłączyć.
To co możemy tutaj jeszcze zdefiniować
to border, czyli obramowanie dla naszego obrazka.
Nadajemy mu jakieś tutaj obramowanie.
Mogę kliknąć tutaj tą opcję i wybrać różne rodzaje takiego obramowania.
Najczęściej będziesz korzystał z obramowania typu solid.
Raczej rzadziej właśnie z tych pozostałych.
Dodatkowo mogę tutaj zdefiniować jaki chcę mieć kolor takiego obramowania.
Ustawmy go może na czerwony, żeby był lepiej widoczne.
Jak widzisz teraz nasz obrazek tutaj dostał border.
Czyli obramowanie.
Dodatkowo możemy taki border zdefiniować osobno dla każdej krawędzi.
Na chwilę obecną dodaliśmy go z każdej strony.
Jeżeli przejdziemy do podglądu.
Tak jak widzisz nasz obrazek tutaj ma obramowania z każdej strony.
Może odsuńmy go trochę od góry.
Żeby było to lepiej widoczne dodajmy mu tutaj margines, powiedzmy 50 pixeli.
I teraz wróćmy do podglądu.
Jak widzisz obramowanie jest teraz z każdej strony.
Będę chciał je dodać tylko
konkretnej krawędzi, to mogę tutaj to zrobić klikając na
obrazek i zaznaczając tą opcję zdefiniowania border'u niezależnie.
I teraz mogę taki border
dodać właśnie jak widzisz tutaj na góra na prawą stronę, na dół albo na lewę.
A dajmy może właśnie border na górze.
Wybierzmy tutaj solid i border na dole też na solid i
ustawmy tutaj nasz kolor czerwony.
Jak widzisz teraz obrazek posiada obramowanie tylko u góry i u dołu.
Przywróćmy jednak tą poprzednią opcję, czyli z każdej strony.
Tu dodatkowo możemy dodać zaokrąglenie rogów.
Wpiszmy tu np.
wartość 10.
Jak widzisz teraz ten border ma tutaj takie zaokrąglone rogi.
Jest to dobrze widoczne właśnie teraz na podglądzie.
Odpowiednie zaokrąglenia na rogach.
Jeżeli byśmy tutaj zdefiniowali border
osobno dla każdej krawędzi, to wtedy będziemy mogli tutaj
ten border radius ustawić odpowiednio osobno dla każdego tutaj tego rogu.
To co możemy jeszcze dodać dla obrazka to shadow czyli cienie.
Wybierzmy tutaj jakiś shadow typu outset,
jak widzisz taki cień został dodany tutaj pod obrazkiem.
Wróćmy sobie do podglądu.
Jak widzisz cień jest teraz widoczny, a my możemy nim zarządzać właśnie tutaj
poprzez te ustawienia
możemy go odsunąć tutaj w poziomie, w pionie, dodać odpowiedni blur i odpowiedni
spread a dodatkowo oczywiście ustawić tutaj jego kolor, dajmy mu np.
jakiś taki bardzo ciemny kolor
I zróbmy tutaj
8 na 8.
Jak widzisz teraz jest to bardzo mocno widoczny cień.
Ok, usuńmy tę opcję, my to nie chcemy dodawać
żadnego cieniowania.
Nie chcemy dodawać żadnego border'u.
Możemy jeszcze taki obrazek przekręcić
gdybyś potrzebował to ustawiasz tutaj odpowiedni kąt np.
20 pixeli.
Tutaj tak średnio to widać,
bo nasz obrazek jest okrągły, ale wierz mi na słowo taki obrót działa.
Natomiast ja tego nie chcę tutaj ustawiać.
Chcę zostawić wartość 0.
Z tych opcji tutaj już więcej nie musimy korzystać.
Przejdźmy więc może do zakładki layout'y i zobaczmy, co tutaj możemy zdefiniować.
Więc przede wszystkim możemy
tutaj ustalić, czy nasz obrazek ma się pojawiać na stronie w momencie jej załadowania.
Tak, zostawiamy tą opcję.
O tym ukrywaniu, pokazywaniu też porozmawiamy sobie nieco później.
Natomiast tutaj mogę, jak się domyślasz
odpowiedniego go wypozycjonować względem właśnie jego rodzica.
Odsuńmy mu tutaj margines jest nam niepotrzebny.
Z tej opcji chwilowo też na razie nie musimy korzystać.
Przejdźmy więc tutaj do ustawień rozmiaru tego obrazka.
Jak na chwilę obecną widzisz ma tutaj
rozmiary 320 na 240, czyli właśnie te wartości.
W moim przypadku chcę, żeby to był obrazek
kwadratowy o wymiarach 42 pixela na 42 pixele.
Jak to zrobić?
Wystarczy, że tutaj wpiszę wartość 42 pixele.
Teraz jak widzisz mamy odpowiednią
szerokość, ale wysokość pozostała tutaj niezmieniona.
Mogłem tutaj też wpisać.
Zaznaczyć tą opcję i powiedzieć, że chce mieć tutaj 42 pixele.
Ale możemy to zrobić prościej
zaznaczając tą opcję, czyli ustawienia stałego aspect ratio.
I tu mówimy, że szerokość ma odpowiadać wysokości w stosunku 1 do 1.
Czyli jeżeli szerokość jest 42 pixele to i wysokość będzie 42 pixele.
Jeśli teraz zmniejszyłbym tutaj albo zwiększył rozmiar
tego obrazka, powiedzmy ustawił szerokość
na 100 pixeli, to oczywiście wysokość została tutaj odpowiednio dostosowana.
Oczywiście ten stosunek możemy zmienić.
Możemy powiedzieć, że np.
chcemy mieć.
2 do 1.
Czyli jak widzisz tutaj szerokość jest 100 pixeli, a wysokość 50.
Czyli odpowiednio ten stosunek został zachowany.
Wróćmy jednak do 1 na 1 i tutaj do wartości 42 pixele.
Ok, mamy dodany obrazek.
To teraz musimy dodać ten tekst, który się nam tutaj pojawia.
Wybieramy więc element tekstowy i dorzucamy go tutaj.
Jak widzisz, tutaj opcje są nieco inne i też je sobie tutaj pokrótce omówimy.
Przede wszystkim.
Te dwie są dla nas bardzo ważne.
Do not apply bb-code.
Do czego służy bb-code?
Zaraz Ci wytłumaczę.
Powiedzmy, że wpiszę tutaj jakąś wartość: Hello World!
I zanim jeszcze tutaj przejdziemy do tych ustawień, wróćmy do layout'u.
Jak widzisz, tutaj te opcje są niemal identyczne jak dla obrazka.
Odnajdźmy tą szerokość.
Jak widzisz wtedy
rozciąga mi się tutaj to całe pole tekstowe na dostępną szerokość.
Minimalnie ma tutaj 200 pixeli,
a tutaj oczywiście możemy dostosować jego wysokość.
W przypadku tekstu zawsze ustawiamy tutaj
minimal height na 0, ponieważ chcemy, aby takie pole
tekstowe dostosowywało się do tekstu, który znajduje się w środku.
Teraz jeżeli chciałbym tutaj
sobie wycentrować ten tekst na chwilę obecną jest tutaj
właśnie przesunięty do lewej strony, to musiałbym tak, przede wszystkim odpiąć tutaj
te style i teraz dopiero ustawić tutaj wycentrowanie tekstu.
Jak widzisz ten tekst został tutaj wycentrowany.
Może zwiększymy mu tutaj czcionkę, żeby było to lepiej widoczne.
Ok, natomiast co w sytuacji, kiedy ja chcę właśnie korzystać z tego stylu body copy?
Natomiast chcę, żeby ten tekst był wycentrowany.
No tak, musiałbym odpinać, zmienić tutaj na wycentrowanie i tworzyć
nowy styl właśnie z taką opcją wycentrowania.
Możemy to jednak zrobić dużo prościej, właśnie stosując bb-code.
Aby to zrobić wróćmy do stylu body copy
i tutaj w samym tekście dodajemy odpowiednie znaczniki.
Center na przodzie i
zamknięcie center na tyle.
Jak widzisz teraz, ten tekst został tutaj odpowiednio zastosowany,
ponieważ Bubble rozpoznał sobie ten bb-Code i go tutaj odpowiednio zastosował.
Gdybym to wyłączył, to jak widzisz teraz
jest to rozpoznawane jako po prostu zwykły tekst.
Mamy tutaj jeszcze opcję rozpoznawania linków i maili.
Jeżeli w tym polu wpisałbym np.
I zaznaczył tą opcję, że chce rozpoznawać linki i maile.
Dodatkowo mogę wskazać jaki kolor mają mieć te linki np.
właśnie taki kolor niebieski.
To zobacz co się stanie jeżeli pobierzemy teraz naszą stronę.
Tu jest zwykły tekst nie przekazywałem żadnego linku.
Odświeżamy.
Jak widzisz zmienił nam się tutaj kolor na niebieski.
Dodatkowo jeżeli najeżdżam to mam mam informację, że to jest link.
Mogę go kliknąć.
Oczywiście jak się domyślasz przejdziemy do strony Eduweb'u,
ponieważ Bubble rozpoznał sobie, że ma tutaj do czynienia z linkiem.
Z tej opcji też czasami korzystam, jeżeli zajdzie taka potrzeba.
Na chwilę obecną możemy to wyłączyć, nam
jest to niepotrzebne ok, i wróćmy do nazwy, która jest nam tutaj potrzebna.
Nazwę projecto, Dodatkowo nie chcę, żeby to mi się rozciągało tutaj na całą szerokość.
Nie potrzebuję tej opcji.
Mogę więc tutaj dostosować szerokość tego
pola tekstowego do tekstu, który znajduje się w środku.
Wystarczy, że zaznaczę tą opcję i tu muszę ustawić na 0.
Wtedy to pole tekstowe skurczy mi się właśnie tutaj do
wartości tekstu, jakie znajduje się w środku.
Teraz zadbajmy o to, aby go tutaj odpowiednio sobie ostylować.
Klikam więc tutaj remove style
chce usunąć ten predefiniowany styl body copy i dodać tutaj własne style.
Przede wszystkim wybierzmy tutaj odpowiednią czcionkę
ja będę korzystał z czcionki nunito sans. Jak widzisz
Bubble daje nam tutaj dostęp do bardzo wielu różnych rodzajów czcionek.
Są one w większości importowane
bezpośrednio z czcionek dostępnych w Google Fonts.
Wyszukajmy więc odpowiedniej,
w moim przypadku jest to nunito sans o rozmiarze 700.
Tutaj wielkość fontu to będzie 32 pixele, a kolor fontu to 6C,
5D, D3 ok.
Dodatkowo chcę tutaj
wysokość linii zmniejszyć na 1, ponieważ będzie to tylko ten jeden napis
nie pojawia nam się tu żaden inny tekst i teraz mamy tutaj logotyp.
Mamy tutaj nazwę naszego, naszej aplikacji lub naszego projektu.
Ok, teraz chcę, żeby te dwa elementy były ze sobą połączone.
Dlaczego?
Zaraz się pokażę, ponieważ tutaj zgodnie z projektem będziemy dodawać teraz menu.
A więc ta część, która ma być tutaj po
lewej stronie, a nasze menu ma być tutaj po prawej.
Jeżeli bym taką, elementu tutaj rodzica, czyli dla całego header'a nadał, ustawił właśnie
tą opcję, czyli space between, to zobacz co się dzieje.
Dokładnie takie zachowanie jakiego się spodziewaliśmy.
Tutaj obrazek jest po tej stronie, tekst jest po tej.
OK.
Więc żeby to się wszystko tutaj odpowiednio zgadzało.
Zaznaczmy sobie obrazek, zaznaczmy sobie
tutaj ten tekst.
Mam te dwa elementy zaznaczone i teraz prawym przyciskiem myszy klikam
i mówię, że chcę to ubrać w
w row container, czyli właśnie tutaj
taki kontener, który będzie mi spinał te dwa elementy razem.
Tu muszę mu oznaczyć
minimalną szerokość
oznaczyć mu minimalna wysokość tak aby on mi się dostosował do elementu w środku.
I to co mogę zrobić tutaj to dla tego tekstu, bo
jak widzisz obrazek jest troszkę wyższy
niż tekst, dla samego tekstu chcę ustawić wyśrodkowanie wtedy ładnie to wygląda.
Dodatkowo odsunąć ten obrazek tutaj od tekstu o 10 pixeli.
I już otrzymujemy dokładnie taki efekt, na jakim nam zależało.
Teraz możemy przystąpić tutaj do tworzenia menu i dodania przycisków.
Jak się domyślasz, do stworzenia menu znowu wykorzystamy tekst.
Możemy wybrać go stąd, albo po prostu,
żeby znowu nie bawić się w ustawienia właśnie to minimum width, min height itd.
Mogę sobie skopiować ten tekst,
wstawić go tutaj poza tą grupę, nazwijmy ją może logo wrapper.
I tutaj dodajmy ten tekst.
Jak widzisz tag został odpowiednio tutaj
przeniesiony, ponieważ nasza grupa jest tutaj,
cały header jest dosyć wysoki, on odpowiednio przeskoczył tutaj niżej.
Jeżeli byśmy mu teraz odznaczyli tą opcję min height.
Jak widzisz, teraz wszystko jest już tak jak być powinno, czyli ta wysokość całej
grupy header została dostosowana do elementu w środku.
Najwyższy z nich jest właśnie ta grupa
tutaj logo wrapper, a więc tutaj cały header się do niej dostosował.
Ok, teraz ustalmy tutaj style tekstu, elementów naszego menu.
W moim przypadku chcę, aby tutaj te
elementy menu były pisane właśnie czcionką nunito sans, tym razem w rozmiarze 600.
Wysokość fonta to 18 pixeli.
A kolor 081735.
Line spacing pozostawiamy na 1.
Tych opcji tutaj nie zmieniamy.
To co na czym mi tu jednak zależy to
dodanie padding, ponieważ jeżeli użytkownik będzie chciał kliknąć
taki element menu, to żeby to zadziałało musiałby kliknąć bezpośrednio w tekst.
Jeżeli dodamy padding to będzie mógł
wyjechać kursorem troszkę poza ten tekst i dalej łapać się w tym elemencie.
W moim przypadku damy mu padding od góry i dołu ustawione na 10 pixeli.
I z lewej strony i prawej strony na 20.
Jak widzisz tutaj nam się to teraz odpowiednio rozciągnęło.
Mogę sobie to skopiować.
Jak widzisz, znów mi się to rozjeżdża.
A więc wiesz doskonale co musimy zrobić.
Musimy zgrupować te dwa elementy, czyli klikam oba teksty.
Znowu chce to, je umieścić jeden koło drugiego.
A więc wybieram row container.
Znów muszę mu tutaj usunąć minimalną szerokość.
Wysokość ustawić właśnie na 0, żeby się
dostosował do elementu w środku i teraz wszystko działa jak trzeba.
Dodatkowo mogę tutaj usunąć marginesy na
tych tekstach, ponieważ nadaliśmy im padding.
To już nie musimy dodawać marginesów.
A więc tutaj też klikam 0.
Wróćmy na chwilę do strony wzorcowej.
Mamy tutaj about, features, pricing i contact.
A więc odwzorujmy to sobie tutaj.
Kopiuję i wklejam, a następnie odpowiednio tylko zmieniam tekst, aby go zmienić
wpisuję wartość tutaj.
Oczywiście bez literówek.
Elementy menu mamy już gotowe.
Tak więc pozostaje nam tutaj jeszcze
dodanie przycisków, ale tym zajmiemy się już w kolejnej lekcji.