Jak zacząć robić front-end na własnym komputerze?

3/3/2017

Już od jakiegoś czasu przerabiasz kursy w internecie i interesuje Cię Front-End? Chciałbyś/abyś spróbować swoich sił w praktyce na “prawdziwym” projekcie ale nie wiesz do końca jak się za to zabrać? Dzisiaj opiszę gdzie znaleść i jak zacząć robić projekty na własnym komputerze abyś mógł/mogła zacząć zdobywać praktyczne umiejętności w domowym zaciszu.

Jak zacząć robić Front-End?

Mniej więcej wiesz już o co chodzi w HTMLu, CSS’ie i JavaScripcie. Mówisz: “Dobra teraz pasuje stworzyć swoją pierwszą stronę.” Czego więc potrzebujesz aby to mogło się zdarzyć?

Generalnie rzecz biorąc potrzebujesz jednej rzeczy – edytora tekstowego obsługującego składnię języków Front-End z podglądem. Oczywiście możesz używać np. notatnika ale nie polecam tego rozwiązania 🙂 Drugą rzeczą której potrzebujesz żeby zrobić coś fajnego to projekt graficzny. Napisałem o tej kwestii TUTAJ.

Skąd mam wziąć edytor tekstowy?

Współczesne edytory tekstowe/środowiska znacząco ułatwią pracę programistom. Podpowiadają poszczególne właściwości/elementy kodu czy poprawiają składnie. Tworzenie nowych funkcjonalności w zasadzie bywa przyjemne bo nie tracimy zbyt wiele czasu na manualne klepanie w klawiaturę kolejnych serii znaków a skupiamy się na sensie pisanego kodu.

Jeśli chodzi o wybór samego edytora to tutaj zdania są podzielone. W zasadzie te najbardziej popularne oferują podobne funkcjonalności i często po prostu używamy tego który nam się najbardziej podoba. Poniżej lista tych szeroko używanych edytorów tekstu:

Brackets 

Darmowy open-sourcowy edytor. Ja go osobiście używam, dlaczego? Po prostu jest pierwszym który mi się nawinął. Uważam, że jest bardzo intuicyjny i ma dużo fajnych wtyczek. Jestem generalnie zadowolony ale nie w 100%. Czasem mi się po prostu wiesza przez moment i raczej nie chodzi tu o problem z komputerem. Na tym etapie mojej “kariery” Brackets jest OK ale nie wykluczam, że kiedy przejdę do większych projektów to zmienię na coś innego.

Atom  

Kolejny ciekawy edytor używany przez wielu devów. Czy lepszy od innych? Nie wiem. Przetestuj sobie i oceń.

Sublime 

Jednym z elementów którym się szczycą jest to, że można jednocześnie modyfikować wiele selektorów.Program można testować za darmo bez okresu próbnego jednak raz na jakiś czas pokazuje się okienko o zakupie komercyjnej wersji która kosztuje 70 USD.

Webstorm 

Program komercyjny który jak opisują jest znakomity w pracy np. z JavaScriptem i rozmaitymi jego frameworkami np. NodeJS. Wygląda fajnie i chętnie bym go używał gdyby nie… 129 EUR za 1 rok… Jest free trial na 30 dni. Ta firma oferuje wiele innych środowisk do pozostałych języków programowania.

Komentarz do edytorów.

W sieci jest ich jeszcze o wiele więcej. Którykolwiek nie zostałby wybrany to ma spełniać swoją funkcję – ułatwić Ci pisanie kodu. TUTAJ  artykuł po angielsku porównujący wspomniane wyżej edytory. 

Ważną rzeczą jest instalacja dodatkowych wtyczek jeśli edytor domyślnie nie obsługuje konkretnej składni czy funkcji np. beautify – porządkuję składnie/syntax w naszym kodzie (tak się nazywa na bracketsie) które pomagają w pracy.

Jak masz już wszystko zainstalowane to wybierasz sobie katalog główny na twoim kompie gdzie chcesz pisać stronę, tam tworzysz pliki index.html, style.css i script.js, style.css i script.js wrzucasz do podfolderów np. css i js, podajesz odpowiednie linki do style.css i script.js w pliku index.html i gotowe 🙂 Możesz zacząć budować swoją pierwszą stronę. W ten sposób:

Projekt graficzny.

Jeśli potrafisz to możesz sobie coś zaprojektować sam/a w TYCH programach graficznych. Jeśli jednak nie masz takich ambicji to w internecie dostępnych jest wiele darmowych projektów treningowych do ściągnięcia i zakodzenia w domowym zaciszu. Możesz je znaleść np. TUTAJ lub TUTAJ.  

Aby otworzyć i edytować ściągnięte projekty w postacie plików warstwowych .psd potrzebujesz jeden z programów opisanych w TYM artykule.

Podsumowanie.

Jak widzisz aby rozpocząć pracę nad własnym kodem trzeba się nieco przygotować. Jak uda Ci się to wszystko razem pospinać możesz zacząć kolejny etap szkolenia czyli tworzenie własnych stron. Z czasem Twoja wiedza będzie się zwiększać a warsztat pracy rozszerzać. Opiszę kolejne narzędzia przy okazji innych artykułów. Tymczasem powodzenia z Twoją pierwszą stroną internetową!

Podziel się z innymi 🙂

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?

Warto
Social media & sharing icons powered by UltimatelySocial

Podoba Ci się ten blog? Podziel się ze znajomymi!

  • Facebook
    Facebook
  • Twitter
    Visit Us