Jak zakodować witrynę internetową (kompletny przewodnik dla początkujących)

Większość z nas w zespole WPBeginner pamięta, jak wpatrywaliśmy się w nasz pierwszy pusty edytor kodu, całkowicie przytłoczeni wszystkimi tagami HTML, właściwościami CSS i funkcjami JavaScript, których musieliśmy się nauczyć.

Ale to było dawno temu i od tego czasu pomogliśmy tysiącom początkujących zamienić ten sam pusty ekran w piękne, funkcjonalne witryny internetowe.

Oto, czego się nauczyliśmy: kodowanie nie jest tylko dla “ludzi technicznych”. Przy odpowiednim podejściu i wskazówkach, każdy może nauczyć się budować witrynę internetową od podstaw. Przetestowaliśmy i udoskonaliliśmy naszą metodę nauczania z uczniami z różnych środowisk – od właścicieli firm po artystów.

W tym przyjaznym dla początkujących przewodniku przeprowadzimy cię przez cały proces kodowania twojej pierwszej witryny internetowej, korzystając z tej samej sprawdzonej metody, która zadziałała już niezliczoną ilość razy. Nie jest wymagane żadne zaplecze techniczne – wystarczy twoja chęć do nauki.

Kreatory witryn internetowych a kodowanie witryny od podstaw

W początkach Internetu tworzenie witryn internetowych przyprawiało o ból głowy. Zasadniczo trzeba było zbudować wszystko od podstaw za pomocą kodu, co mogło zająć wieki – pomyśl o godzinach, a może nawet tygodniach.

Na szczęście te czasy już dawno minęły. Obecnie aż 62,9% wszystkich witryn internetowych jest zbudowanych przy użyciu frameworków. Oznacza to, że nie musisz już wiedzieć, jak zbudować witrynę internetową od podstaw.

Większość ludzi korzysta obecnie z open-source’owego WordPressa i innych systemów zarządzania treścią (frameworków do tworzenia witryn internetowych), które pomagają im tworzyć strony internetowe.

W WPBeginner używamy bezkodowych kreatorów stron, takich jak WordPress i SeedProd dla wszystkich naszych witryn internetowych. Uważamy, że są one bardzo wygodne, łatwe w konfiguratorze i naprawdę wydajne.

Wspaniałą wiadomością jest to, że w około 95% przypadków możesz zbudować fantastyczną witrynę internetową za pomocą tych kreatorów witryn lub rozwiązań bez kodu.

Plusy i minusy korzystania z kreatora witryn internetowych

Oto niektóre z korzyści płynących z korzystania z kreatora witryn internetowych:

• Jest łatwy w użyciu, nawet dla początkujących.
• Nie musisz inwestować czasu i pieniędzy w naukę tworzenia stron internetowych.
• Dzięki temu oszczędzasz czas, który możesz przeznaczyć na rozwój swojej firmy.
• Łatwe tworzenie witryn internetowych e-handel, członkostwa i biznesowych bez wydawania fortuny.

Korzystanie z kreatora witryn internetowych ma jednak kilka wad:

• Twoja witryna internetowa może mieć niepotrzebne funkcje, które spowalniają jej działanie.
• Możesz nie potrzebować funkcji CMS do projektu, ale nadal będziesz musiał utrzymywać aktualizacje oprogramowania i kopie zapasowe.

Plusy i minusy pisania kodu od podstaw

Oto kilka korzyści płynących z samodzielnego pisania kodu od podstaw:

• Twoja witryna internetowa będzie miała tylko potrzebny kod, dzięki czemu będzie wczytywać się szybciej.
• Nie będziesz musiał aktualizować oprogramowania.
• Zdobędziesz cenne umiejętności programistyczne, które mogą prowadzić do nowych możliwości kariery WordPress.

Należy jednak porównać te zalety z następującymi wadami:

• Spędzisz godziny i dni ucząc się kodowania w HTML, CSS i JavaScript.
• Dynamiczne generowanie treści będzie trudne, ponieważ nie będziesz mieć dostępu do gotowego systemu zaplecza. Ponadto będziesz musiał nauczyć się języków po stronie serwera, takich jak PHP lub Python.
• Dodawanie i aktualizowanie treści będzie wymagało edycji wielu plików.
• Dodawanie nowych funkcji, SEO (optymalizacja pod kątem wyszukiwarek) i integracja z narzędziami innych firm będą trudne.
• Nie możesz łatwo udostępnić dostępu do twojej witryny internetowej bez przekazania pełnej kontroli komuś innemu.
• Zatrudnienie programisty do napisania kodu będzie kosztowne i niezbyt opłacalne.

Więcej szczegółów można znaleźć w naszym przewodniku na temat kreatorów witryn internetowych i ręcznego kodowania.

Ponieważ twój czas jest cenny, pokażemy ci, jak stworzyć witrynę internetową za pomocą narzędzi, które w zasadzie piszą kod za ciebie (omówimy je w metodach 1 i 2).

Następnie, w metodzie 3, podzielimy się kilkoma zasobami na temat tego, jak zbudować witrynę internetową całkowicie od zera. Jest to idealne rozwiązanie dla studentów, którzy chcą nauczyć się programowania.

Mając to na uwadze, przyjrzyjmy się, jak zakodować witrynę internetową. Możesz skorzystać z poniższych odnośników, aby przejść do wybranej metody:

1. Tworzenie własnej witryny internetowej za pomocą WordPressa

WordPress to najpopularniejsza platforma do tworzenia witryn internetowych. W rzeczywistości, zgodnie z naszym raportem dotyczącym udziału w rynku CMS, WordPress obsługuje ponad 43% wszystkich witryn internetowych.

Używamy WordPress dla wszystkich naszych witryn internetowych. Nasza dogłębna recenzja WordPressa omawia bardziej szczegółowo jego zalety i wady.

Po wyjęciu z pudełka WordPress jest już wyposażony w mnóstwo funkcji, ale jest jeszcze lepiej: możesz zainstalować dodatki zwane wtyczkami. Są to elementy oprogramowania, które dodają dodatkowe funkcje do WordPressa, a w samym repozytorium WordPress.org można znaleźć ponad 59 000, w tym wiele kreatorów stron bez kodu.

Jeśli chodzi o kreatory stron, SeedProd jest naszym najlepszym wyborem. Jest to popularny kreator stron WordPress typu “przeciągnij i upuść”, którego używaliśmy do projektowania wielu witryn internetowych naszych partnerów. Zaprojektowaliśmy nawet witrynę internetową SeedProd przy użyciu SeedProd!

Aby uzyskać więcej informacji, sprawdź naszą szczegółową recenzję SeedProd.

Aby rozpocząć korzystanie z WordPress, będziesz potrzebować nazwy domeny i hostingu. Zalecamy korzystanie z Bluehost. Jest to jeden z najlepszych dostawców hostingu WordPress, który oferuje naszym czytelnikom bezpłatną nazwę domeny i ogromną zniżkę na hosting (tylko 1,99 USD miesięcznie).

Jeśli chcesz przyjrzeć się alternatywom, polecamy Hostinger, SiteGround lub jedną z innych najlepszych firm hostingowych WordPress.

Po uzyskaniu domeny i hostingu, następnym krokiem jest instalacja WordPressa (we właściwy sposób).

Wspaniałą wiadomością jest to, że większość dobrych firm hostingowych, takich jak Bluehost, bardzo ułatwia instalację WordPressa dzięki procesowi instalacji jednym kliknięciem. Jest on naprawdę przyjazny dla użytkownika, więc wystarczy postępować zgodnie z instrukcjami wyświetlanymi na ekranie, aby rozpocząć.

Po zainstalowaniu WordPressa można logować się do kokpitu administratora. Będzie on wyglądał mniej więcej tak:

Porozmawiajmy teraz o tym, jak sprawić, by twoja witryna internetowa wyglądała niesamowicie bez konieczności pisania ani jednej linijki kodu. Aby rozpocząć, musisz zainstalować i włączyć wtyczkę SeedProd. Aby uzyskać szczegółowe informacje, zobacz nasz poradnik na temat instalacji wtyczki WordPress.

SeedProd pozwala łatwo zaprojektować twoją własną witrynę internetową i tworzyć piękne strony po prostu przeciągając i upuszczając – nie wymaga kodowania, więc jest idealny do tego poradnika.

Możesz również użyć go do stworzenia własnego, dostosowanego motywu WordPress od podstaw. Będzie to front-end twojej witryny internetowej, który użytkownicy zobaczą, gdy na nią przejdą.

Idąc dalej, SeedProd ma nawet kreator AI, który tworzy cały własny konfigurator motywu w mniej niż 60 sekund. Aby uzyskać szczegółowe informacje, zapoznaj się z naszym przewodnikiem na temat tworzenia witryny internetowej WordPress z AI.

Po zainstalowaniu SeedProd wystarczy przejść do strony SeedProd ” Landing Pages i kliknąć przycisk “Utwórz nowy Landing Page”.

Na następnym ekranie zostaniesz poproszony o wybranie szablonu.

SeedProd jest wczytywany z mnóstwem pięknie zaprojektowanych szablonów, aby dać ci przewagę. Obejmuje to szablony dla konkretnych przypadków użycia, takich jak witryny internetowe organizacji non-profit lub witryny firm motoryzacyjnych. Możesz też wybrać “Pusty szablon”, aby rozpocząć od pustej strony.

Następnie zostaniesz poproszony o wpisanie tytułu twojej strony i uproszczonej nazwy adresu URL.

Na przykład, jeśli tworzysz stronę główną swojej witryny internetowej, możesz wpisz “Strona główna” jako tytuł i adres URL (czyli adres internetowy dla tej konkretnej strony).

Następnie należy kliknąć przycisk “Zapisz i rozpocznij edycję strony”.

SeedProd będzie teraz wczytywać interfejs kreatora stron. Jest to intuicyjny kreator stron, w którym wystarczy wskazać i kliknąć, aby rozpocząć edycję.

Interfejs SeedProd typu “przeciągnij i upuść” jest łatwy w obsłudze dla początkujących, ale jest również wystarczająco potężny dla doświadczonych programistów.

Po lewej stronie zobaczysz wszystkie typowe elementy projektowania stron internetowych jako bloki. Potraktuj je jako bloki konstrukcyjne, które możesz po prostu przeciągnąć na swoją stronę.

Po prawej stronie zobaczysz podgląd na żywo twojego projektu. Możesz po prostu wskazać i kliknąć dowolny element, aby go edytować, usunąć lub przenieść.

Szukasz inspiracji lub po prostu chcesz szybko zbudować swoją witrynę internetową? SeedProd jest wyposażony w potężne funkcje sztucznej inteligencji, które mogą z łatwością generować tekst, w tym nagłówki, podpisy i wezwania do działania.

Wystarczy dodać blok tekstowy do twojego projektu i kliknąć przycisk “Generuj tekst AI”. Wpisz rodzaj podpowiedzi, której chcesz użyć i naciśnij “Generuj tekst”. SeedProd wygeneruje tekst na podstawie twoich instrukcji.

Chcesz tworzyć unikatowe obrazki i grafiki bez konieczności korzystania z oprogramowania do projektowania stron internetowych, takiego jak Canva?

Następnie SeedProd integruje się z DALL-E, dzięki czemu możesz generować oryginalne obrazki w kilka sekund, a następnie dodawać je do swojej witryny za pomocą jednego kliknięcia.

Zasadniczo można utworzyć własny projekt strony internetowej, w tym menu nawigacyjne, panele boczne i stopki, bez pisania kodu.

Teraz, jeśli potrzebujesz dodać jakiś własny kod, SeedProd również Cię w tym wyręczy. Wystarczy przeciągnąć i upuścić blok “Custom HTML” na twoją stronę.

Wewnątrz tego bloku można ręcznie dodać dowolny kod HTML.

Możesz także dostosować margines, dopełnienie i atrybuty wyglądu własnego bloku HTML.

Podobnie, możesz również dodać własny kod CSS do twojej strony.

Wystarczy kliknąć przycisk “Ustawienia” w lewym dolnym rogu i wybrać “Własny CSS”.

Po zakończeniu edycji twojej strony kliknij przycisk “Zapisz i opublikuj”, aby ją uruchomić.

Możesz również kliknąć przycisk “Podgląd”, aby zobaczyć twoją stronę w działaniu na żywo.

Wystarczy powtórzyć ten proces, aby utworzyć inne strony dla twojej witryny internetowej. Możesz dosłownie zbudować jednostronicową witrynę internetową lub nawet całą witrynę internetową dla małej firmy w ciągu kilku minut.

Piękno SeedProd polega na tym, że tworzenie i edytowanie witryny internetowej jest niezwykle łatwe.

Właśnie dlatego korzysta z niego tak wielu profesjonalnych deweloperów na całym świecie. W rzeczywistości nawet programiści w dużych firmach, takich jak Awesome Motive, polegają na SeedProd przy tworzeniu swoich głównych witryn internetowych, ponieważ jest tak szybki i konfigurowalny.

Alternatywy dla SeedProd

Nie chcesz korzystać z SeedProd? Mamy coś dla Ciebie! Oto niektóre z naszych najlepszych propozycji innych kreatorów stron WordPress, których możesz użyć:

• Thrive Architect – to fantastyczny kreator stron, który naprawdę koncentruje się na pozyskiwaniu konwersji. Zawiera ponad 357 wstępnie zaprojektowanych układów, które pozwalają szybko rozpocząć pracę.
• Divi Builder – kolejny potężny kreator typu “przeciągnij i upuść”, który działa zarówno jako motyw, jak i kreator stron. Zapewnia mnóstwo elastyczności.
• Beaver Builder – to kolejny dobrze znany i niezawodny kreator stron WordPress, który uwielbia wiele osób.
• Astra – Jeśli szukasz motywu, Astra jest super konfigurowalna i zawiera gotowe witryny internetowe, które możesz zainstalować jednym kliknięciem. To prawdziwa oszczędność czasu!

Chociaż możemy być nieco stronniczy w stosunku do WordPressa (ponieważ, no cóż, jesteśmy WPBeginner!), jego popularność naprawdę mówi sama za siebie. Mnóstwo wielkich nazwisk, takich jak BBC, Microsoft, Facebook i The New York Times, korzysta z WordPressa. Wiesz więc, że jesteś w dobrym towarzystwie!

2. Kodowanie witryny internetowej za pomocą Web.com Website Builder

Jeśli wolisz pominąć kroki związane z uzyskaniem nazwy domeny, konfiguracją hostingu i instalacją oprogramowania takiego jak WordPress, możesz skorzystać z kreatora witryn internetowych Web.com.

Jest to świetna platforma do tworzenia prostych witryn internetowych i sklepów internetowych. Mają nawet kreatora z przewodnikiem, który pomaga w tym procesie.

Plany cenowe Web.com obejmują bezpłatną nazwę domeny, bezpłatny certyfikat SSL (co jest ważne dla zabezpieczenia), dziesiątki szablonów i narzędzie do pisania AI, które pomaga szybko generować kopię witryny internetowej.

Wystarczy wybrać jeden z tysięcy gotowych szablonów witryn internetowych i dostosować projekt do potrzeb Twojej marki za pomocą jednego kliknięcia.

Konstruktor jest wyposażony we wszystkie zaawansowane funkcje, których można oczekiwać.

Możesz łatwo dodawać galerie zdjęć, filmy, pokazy slajdów, formularze kontaktowe, lokalizacje na mapie, przyciski mediów społecznościowych i wiele innych.

Nie musisz martwić się o aktualizacje, zabezpieczenia lub kopie zapasowe, ponieważ Web.com zajmuje się tym za Ciebie. Oferuje również całodobową obsługę przez czat, e-mail i telefon.

Alternatywy dla Web.com

Istnieje wiele różnych rozwiązań typu “wszystko w jednym”. Oprócz Web.com, oto kilka naszych najlepszych propozycji łatwych w użyciu kreatorów witryn internetowych, które nie są WordPress:

• Gator by HostGator – W pełni hostowany kreator witryn internetowych z narzędziami i szablonami typu “przeciągnij i upuść”.
• Domain.com Website Builder – Kolejna hostowana opcja z mnóstwem 111111 pięknych szablonów dla wszystkich rodzajów witryn internetowych.
• HubSpot – to kompleksowy kreator witryn internetowych i platforma marketingowa, która jest świetna dla małych firm.
• Wix – znany i popularny kreator witryn internetowych typu “przeciągnij i upuść”.
• BigCommerce – jeśli chcesz zbudować sklep internetowy, BigCommerce jest w pełni hostowaną opcją do rozważenia.

Więcej opcji można znaleźć w naszym porównaniu najlepszych kreatorów witryn internetowych z zaletami i wadami. Wykonaliśmy ciężką pracę, testując prawie każdy główny kreator witryn internetowych. Lubimy więc myśleć, że wiemy, o czym mówimy, jeśli chodzi o wybór odpowiedniego kreatora witryn internetowych!

3. Nauka kodowania witryny internetowej od podstaw

Jesteś studentem i chcesz nauczyć się kodować witrynę internetową od podstaw? To świetnie! Będziesz musiał opanować podstawy tworzenia witryn internetowych, takie jak HTML, CSS i kilka innych.

Chociaż istnieje mnóstwo kursów (zarówno bezpłatnych, jak i płatnych), ten, który naszym zdaniem jest naprawdę świetny, znajduje się w Code Academy.

Jego ukończenie zajmuje około 9 godzin, ale pod koniec nauczysz się kodować własną responsywną witrynę internetową od podstaw przy użyciu HTML, CSS i Bootstrap.

Nawet po ukończeniu kursu będziesz musiał trochę poćwiczyć, aby naprawdę dobrze opanować kodowanie witryn internetowych od podstaw. Ale nie martw się, jesteśmy tutaj, aby ci pomóc! W następnej sekcji pokażemy ci, jak zakodować bardzo podstawową witrynę internetową przy użyciu tylko HTML i CSS.

Nawet po ukończeniu kursu, będziesz potrzebował wielu godzin praktyki, zanim staniesz się naprawdę skuteczny w kodowaniu witryn internetowych od podstaw. W następnej sekcji pokażemy, jak zakodować bardzo podstawową witrynę internetową przy użyciu HTML i CSS.

Kodowanie podstawowej statycznej witryny internetowej

Witryny internetowe są tworzone przy użyciu HTML, CSS, a czasem JavaScript. Pomyśl o nich w ten sposób:

• HTML (Hyper Text Markup Language): To podstawa twojej strony internetowej. Definiuje podstawowy układ i całą treść, taką jak obrazki, tekst, filmy i inne.
• CSS (kaskadowe arkusze stylów): To właśnie sprawia, że twoja witryna internetowa wygląda dobrze! CSS obsługuje takie rzeczy jak kolory, marginesy, dopełnienie i rozmiar tekstu.

Do napisania tego kodu potrzebny będzie edytor kodu. Jest to specjalny edytor tekstu, który pomaga w pisaniu kodu poprzez podświetlanie różnych części, co ułatwia wykrywanie błędów i wydajniejsze pisanie.

Następnie należy rozpocząć projekt. Po prostu utwórz nowy katalog na twoim komputerze i nazwij go jak chcesz. To tutaj będziesz przechowywać wszystkie pliki twojej witryny internetowej.

Otwórz twój edytor kodu i utwórz nowy plik. Ponieważ będzie to strona główna twojej witryny internetowej, zalecamy nadanie jej nazwy index.html.

Ten plik jest miejscem, w którym napiszesz kod HTML dla twojej pierwszej strony internetowej.

Podstawowa strona HTML zawiera następujące sekcje.

• Kontener dokumentu HTML
• Głowa
• Ciało

Możesz utworzyć tę podstawową strukturę, pisząc następujący kod:

Deklaracja doctype HTML po prostu mówi przeglądarkom internetowym, że jest to strona HTML.

Kod wewnątrz sekcji head nie jest widoczny na ekranie. Definiuje on metadane dla twojego dokumentu HTML, takie jak tytuł dokumentu HTML, odnośnik do pliku CSS i inne.

Teraz wypełnijmy sekcję head twojej strony HTML:

Sekcja główna twojej witryny internetowej to miejsce, w którym definiujesz układ strony i dodajesz wszystkie treści, które zobaczą użytkownicy.

Oto przykład strony internetowej z nagłówkiem, głównym obszarem treści i stopką:

Możesz zastąpić symbole zastępcze twoją własną treścią. Pamiętaj tylko, aby zapisać swoje zmiany!

Po zapisaniu twojego dokumentu HTML, możesz go podglądnąć w przeglądarce. Możesz zobaczyć coś, co na początku wygląda trochę zwyczajnie, na przykład tak:

Dzieje się tak, ponieważ nasz dokument HTML wskazuje na dwa pliki, które nie istnieją. Pierwszym z nich jest arkusz stylów CSS.

CSS lub kaskadowy arkusz stylów to kolejny język kodowania. Służy do stylizacji elementów HTML, bloków konstrukcyjnych i selektorów div w twoich dokumentach HTML.

Po prostu utwórz plik o nazwie style.css za pomocą twojego edytora kodu i zapisz go w tym samym katalogu co plik index.html.

Następnie dodaj następujący kod do twojego pliku style.css:

To załatwia sprawę stylizacji. Należy jednak pamiętać, że CSS może zrobić o wiele więcej niż to, co tutaj pokazaliśmy! Może być używany do poprawy komfortu użytkowania, dodawania animacji, a nawet dostosowywania wyglądu twojej witryny internetowej na różnych rozmiarach ekranu za pomocą czegoś, co nazywa się media queries.

Następnie musimy jeszcze załadować obrazek.

Wystarczy utworzyć nowy katalog w twoim projekcie i nazwać go obrazkami.

Teraz znajdź obrazek, który chcesz wyświetlić i dodaj go do katalogu images.

Następnie wróć do pliku index.html i zmień nazwę obrazka w tagu <imag> na rzeczywistą nazwę twojego pliku graficznego.

Nie zapomnij zapisać wszystkich zmian, a następnie ponownie wyświetlić podgląd twojej strony w przeglądarce. Powinieneś teraz zobaczyć swój obrazek i podstawową stylizację z pliku CSS.

Możesz powtórzyć ten proces, aby utworzyć inne strony dla twojej witryny internetowej. Przydatną sztuczką jest użycie twojego pliku index. html jako szablonu dla innych stron. Wystarczy zapisać go pod inną nazwą (np. about.html lub contact.html), a następnie zmienić treść według potrzeb.

Mamy nadzieję, że ten artykuł pomógł ci w nauce kodowania witryny internetowej. Jeśli zdecydowałeś się na WordPressa, to możesz chcieć nauczyć się WordPressa (za darmo) w mniej niż tydzień lub zapoznać się z najlepszymi edytorami kodu dla początkujących.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.