Mam stronę.

Zrobiliśmy piękną stronę. Dopieściliśmy ją pod każdym kątem. PO drodze nauczyliśmy się bardzo wiele. Wiemy co to HTML, wiemy jak nadać styl i urodę (hahaha). Uczyliśmy się jak efektywniej, mądrzej pracować. A co najważniejsze nasze umiejętności będą rosły z każdą kolejną zrobioną przez nas stroną. Została nam do nauczenia się jeszcze jedna rzecz. Jak to zrobić, aby inni zobaczyli naszą stronę. Mamy dwie drogi, aby zrobić. Zależy czy masz wykupiony serwer i konkretną domenę pod tą stronę. Możesz również opublikować stronę, nie mając domeny i serwera. Wtedy korzystasz z firmy hostingowej np. github.
Możesz również stworzyć portfolio z twoimi „dziełami”. Wtedy wystarczy jedna domena (np. z Twoim imieniem i nazwiskiem) i wykupiony serwer.

Trzy drogi i wszystkie prowadzą do jednego: pokazania stron/y w internecie. Powodzenia. 

Domena, serwer i co?

W tym miejscu opiszę jak postawić na serwerze stronę. Czy znajdą się na niej Twoje portfolio, czy tylko jedna strona lub blog i portfolio, nie ma to istotnego znaczenia. Pewne rzeczy robi się po prostu takie samo. Gotowi? Działamy.

Kup domenę czyli swój „wirtudomek”.

Dostawców hostingu jest od groma. Gdzie kupisz domenę i miejsce na serwerze (stronę przechowujemy na serwerze) to tylko Twoja sprawa. Za obie te sprawy trzeba zapłacić.
Sama korzystam ze Zenbox i sobie chwalę. 

WordPress pomoże.

Czy dla kogoś, kto tworzy strony, dobrym wyborem jest WordPress? To zależy. Jeśli dodatkowo chcesz zająć się również back-endem i np. blogiem to, moim zdaniem chyba nie warto tracić czas na postawienie całości, a bardziej skupić się na projektach? To moje osobiste zdanie, czytałam w wielu miejscach internetu, że co to za koder, który posiłkuje się „gotowcem”. Ale! Przecież jako programiści posiłkujemy się różnym oprogramowanie do optymalizacji pracy, prawda? Czym w takim razie różni się od tego WordPress? A zawsze możemy nauczyć się o nim czegoś nowego, może kiedyś sami napiszemy na niego motyw? Kto wie?

OK. Portfolio na WordPress to nic innego jak odpowiednio dobrany motyw. Pamiętajcie, że motyw wybieramy ze sprawdzonego źródła, najlepiej z repozytorium WP. Ostatnio przeglądałam motywy i pod portfolio wpadł mi w oko motyw o nazwie: „Postfolioo„.

Wgraj pliki.

Opcja troszkę dłuższa i wymagająca więcej pracy to wgranie plików strony bezpośrednio na serwer. Aby się do tego zabrać, musimy zalogować się do klienta FTP naszego serwera. Tam skopiujemy wszystkie pliki strony tj. index.html, style.css, folder ze zdjęciami itp. Zrobimy to za pomocą specjalnego do tego programu np. Filezilla.  

Nie będę się rozpisywać po kolei jak to zrobić, bo praktycznie każda firma hostingowa ma przygotowane tutoriale na tę okoliczność. Przykładowy link do Kei.pl.  Warto przeszukać zakładkę Pomoc/ Wiedza u swojego dostawcy serwera.

Czy taka strona jest lepsza od tej na WordPressie? Jest po prostu inna i już. Z pewnością więcej pracy wymaga, ale przy okazji uczysz się czegoś nowego – obsługi serwera i orientowania się we właściwych folderach. Jaką drogę wybierzesz, jest to tylko Twoja decyzja, a co najfajniejsze, zawsze możesz zmienić zdanie.  

Strona na GitHub?

Na GitHub-ie możemy również postawić własną stronę z portfolio. To miejsce nie jest tylko i wyłącznie przeznaczone na repozytoria Twoich projektów. Zanim się rozpędzisz, to musisz wiedzieć kilka rzeczy o tym.

Wbrew pozorom nie jest to jakieś szczególnie trudne. Po pierwsze nic nie płacisz. Super! Ale możesz ta mieć tak naprawdę tylko stricte strony www, czyli kod uruchamiany w przeglądarce internetowej tj.html+css+js. GitHub Pages to statyczna usługa hostingowa.  Back-end nie będzie obsługiwany. Czy to przeszkadza? Absolutnie nie, ale musisz o tym wiedzieć.
Stronę publikujesz bezpośrednio z repozytorium na githubie.
Można takie portfolio rozszerzyć o własny blog (super, co nie?) za pomocą oprogramowania Jekyll.

Strona w pięciu krokach.

• Wejdź do repo z projektem Twojej strony.
• Wybierz ustawienia (settings – prawy górny róg).
• Przejdź do sekcji GitHub Pages.
• Wybierz w źródle kodu strony (source) główną gałąź, czyli master. Dlaczego? Ponieważ ten branch (gałąź) powinna być przetestowana, najlepsza i najaktualniejsza.
• Zapisujemy, odświeżamy (pojawi się link do strony: nazwa-użytkownika.github.io) i … gotowe! 

I tak strona już jest. Nic strasznego, prawda? Co dalej?

Usiądź i delektuj się…

Teraz już możesz sobie pozwolić na oddech. Powiesiliśmy stronę w internecie. Należy nam się chwila relaksu. A to jest dobry moment nad zastanowieniem się nad nowymi celami. 

Co zamierzasz teraz? Nauczyliśmy się masę nowych rzeczy. Większość z nich potrzebuje ciągłej praktyki i poznawania nowych trików. Wtedy będziemy rozwijać swoje umiejętności i pogłębiać swoją wiedzę. Częściej będziemy mogli innym proponować jakieś rozwiązania.

Jaki jest Twój kolejny krok? Nowy język? Nowy Framework? A może zainteresuje Cię bardziej to co jest ukryte na stronie? Back-end? 

Artykuł Powieś ją! pochodzi z serwisu To co najważniejsze.

Obecnie wszyscy mają swoje miejsce w internecie. Niektórzy mają profil na Instagramie, inni na Facebooku. Są również osoby, które chcą własnej strony www. Czy to możliwe, jeśli nie chce się za to komuś płacić i nie potrafi się kodować? A może chcą się nauczyć tej sztuki? Wszystko jest obecnie możliwe. Wystarczy chcieć i znaleźć trochę czasu. 

Przyda się też sporo samozaparcia, kiedy motywacja co jakiś czas będzie spadać.

Zbuduj stronę

W internecie można znaleźć wszystko. Dlatego niektórzy chcą mieć tam swoje miejsce. Czy prowadzić bloga, czy postawić stronę wizytówkową – to kwestia motywacji. Jeśli chcemy coś przekazać od siebie, to blog jest dobrym wyborem. Każda opinia jest dobra. A tak na dobrą sprawę nie trzeba wybierać pomiędzy wizytówką a blogiem. Można mieć obie te rzeczy na raz.  

Aby strona faktycznie była nasza, warto kupić sobie domenę oraz miejsce na serwerze. Wtedy jak długo płacimy (raz do roku) tak długo jesteśmy jedynym właścicielem naszej strony. 
Gdzie kupimy domenę i serwer? Wpisując w Googla frazę  „hosting” wyskoczą nam firmy, które się tym zajmują. 
Ja mam serwer na Zenbox.

Którędy droga?

Aby postawić stronę, musisz się zastanowić, jak to zrobić. Nie chcesz nikomu za to płacić? Naucz się tego!. 
Masz dwie drogi. Prostą i tą bardziej czasochłonną.
Wybierając WordPress, możesz dosyć szybko postawić stronę samodzielnie. Ja tak zrobiłam. Ten blog, który czytasz, powstał dzięki Ewelinie Muc i jej kursowi „WP dla zielonych”. I faktycznie jest dla całkiem „zielonych” jeśli chodzi o technologie internetowe.

 Kilka razy w roku może zakupić ten kurs.
Obecnie, do poniedziałku – 08.10 – Ewelina prowadzi jego sprzedaż.

To jest ta prostsza droga. A ta bardziej absorbująca to już faktyczne kodowanie jak front-endowiec. Będziesz potrzebować ogarnięcia HTML5 oraz CSS3. W późniejszym czasie przyda się znajomość JavaScriptu. 
Ogarnięcie tego z pewnością zajmie dużo więcej czasu niż WordPress, ale co się nauczysz to Twoje.

Avocode i Brackets

Jeśli wybierasz tę dłuższą drogę … no cóż, czeka cię trochę pracy. Ale za to jaka satysfakcja! Dwa programy, które Ci pomogą w programowaniu to (według mnie) Avocode – link oraz Brackets – link. 

Avocode

Avocode to program do obróbki plików PSD. Cóż to plik PSD? To format pliku do zapisu grafiki dwuwymiarowej.  Tak zapisuje się projekty stron. Poniżej jej przykład. 
Oczywiście, jeśli chcesz wymyślić stronę całkowicie sama, to nie potrzebujesz tej aplikacji i gotowych projektów. Ale! To narzędzie warto poznać. Zwłaszcza że ma ono 14-dniowy okres próbny. Później płaci się miesięczną subskrypcję, którą zawsze można albo zwiesić lub z niej zrezygnować.

Co potrafi Avocode? Możemy wycinać zdjęcia, pobierać fragmenty kodu, dokładne wymiary elementów oraz ich rozmieszczenie. Mamy gotowe informacje m.in. na temat wysokości, szerokości elementu, czcionki i jej rozmiaru, kolorów; wszystko od razu z odpowiednimi jednostkami. Możemy skopiować wszystko jednym kliknięciem i wkleić do bezpośrednio swojego edytora. Oczywiście nie zakoduje to naszej strony od razu ;), ale bardzo usprawni sam proces.

Brackets

To edytor tekstu stosowany do pisania kodu. Istnieje jeszcze wiele innych stosowanych przez programistów. Dlaczego ten? Próbowałam kilku i ten jest dla mnie najwygodniejszy. Można w nim włączyć opcję Emmet – super sprawa. Co jeszcze? Możesz zmienić jego wygląd, dorzucać masę wtyczek oraz co chyba na początku drogi z kodowaniem jest to prosty w obsłudze program. Koloruje kod. Co to znaczy? Od razu zauważysz, gdzie masz przypisaną kasę, tag czy jakikolwiek inny element (np. zmienne, funkcje w JS).
Poza tym jest dostępny podgląd „na żywo”. Coś jak CodePen, ale lokalnie
Brackets jest dostępny w wersji polskiej i można go podpiąć do GIT-a.

WordPress

Ok. Zdecydowałaś się jednak najpierw poznać WordPress. Też dobra droga, bo oswaja Cię z technologią. Tak ja wspomniałam wyżej – możesz kupić kurs u Eweliny  albo …gdziekolwiek indziej. W internecie wiele osób proponuje kursy WordPressa. W każdym Udemy czy Strefie Kursów znajdziesz to, co potrzebujesz. Możesz też znaleźć na You Tube darmowe kursy WordPressa – czy są dobre? Nie wiem, bo tak jak już pisałam – wierna jestem Ewelinie Muc.
Jest jeszcze jedna osoba, która zajmuje się tą technologią. To Ola Gościniak. Nie tak dawno polecałam ją na naszym fanpage’u na Facebooku. 

Bądź online

Ola napisała książkę o tworzeniu strony www na podstawie WordPress. Od kompletnych podstaw, czyli celu strony do SEO i innych takich spraw. Wszystko opisała prostym językiem i okrasiła ćwiczeniami. Mamy sporą dawkę teorii popartej praktyką. Nic tylko działać. Książkę możesz kupić tu. Ola poza tym prowadzi bardzo merytorycznego bloga na tematy związane z blogowaniem i WordPressem oraz sprzedaje również swój kurs WordPressa. Nie przechodziłam go, ale jeśli jest choć trochę zbliżony stylem do książki, to jest to bardzo fajny wybór. 

Co będzie?

Jeśli chodzi o WordPressa, to warto go znać. I jest mnóstwo kompetentnych osób, które Cię poprowadzą „za rączkę”.

Dodatkowo nauka html, css i JS to inwestycja w Twoje umiejętności. W serii wpisów o front-endzie chce Ci pokazać, co można zakodować samej. Dlatego na początek wybierz projekt. Tak jak już wspomniałam, taki projekt zapisany jest w pliku PSD. Gdzie znaleźć takie projekty? 
Masz dwie drogi (znowu!;)).
Wpisz w wujka googla: „projekt PSD free”.

Albo skorzystaj z linku poniżej. Zapisując się na darmowe konto, możesz wybierać, przebierać w setkach projektów stron. 

Artykuł Moja www… pochodzi z serwisu To co najważniejsze.