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

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ą!

  • Tomek Tomek

    Odnośnie sublime, wyskakuje raz na 100 zapisań pliku takie coś jak tu: 05:45 https://www.youtube.com/watch?v=xsSnOQynTHs
    Gościo jest w top5 twórców reacta i napisał redux (więc PRO). Ja przez 2 lata nie kupiłem licencji :/ i przyzwyczaiłem się już do tego okienka 😉

  • Bartłoś Ce

    Tomek, dzięki za informacje. Tego właśnie nie byłem pewny, na ile dokuczliwy jest ten komunikat w Sublimie.

    Jeśli chodzi moje użycie Bracketsa to dzisiaj nadszedł ten dzień kiedy miarka się przebrała. Zacząłem dzisiaj pisać pierwszy kod w Angular2. Projekt tam waży sporo i Brackets się wysypywał często. Podobnie mieli użytkownicy Atoma, może nawet gorzej.

    Najbardziej jednak doskwierał mi sposób obsługi składni TypeScripta który jest używany w Ang2. Byłem po prostu zdezorientowany.

    Biorąc te dwie rzeczy pod uwagę przechodzę na https://code.visualstudio.com/. Wygląda na pierwszy rzut oka bardzo fajnie 🙂

  • Witam. Sublime nie jest wcale aż tak drogi jak na jego możliwości. Kiedyś korzystałem z Coda2 która miała sporo mniejsze możliwości a kosztuje chyba nawet 10USD więcej. Ja licencję kupiłem po 2 miesiącach. Ogólnie gorąco polecam Sublime.

    Odemnie takie małe porównanie Atom, Brackets i Sublime: https://blog.nayma.pl/wybieramy-najlepszy-edytor-tekstowy/
    oraz zestaw kilku dobrych wtyczek do Sublime:
    https://blog.nayma.pl/sublime-text-najlepsze-wtyczki-i-ustawienia/

    W kilku jeszcze słowach napisze , że sublime jest bez porównania najszybszy, najstabilniejszy i do tego radzi sobie najlepiej z edycją dużych plików (np z baz danych itp co czasami się przydaje a np Coda2, Atom czy Brackets zawsze się zawieszały po kilku operacjach). MOzna w nim tez naszybciej zainstalować rozszerzenia i zmienić pewne opcje korzystając z CMD+SHIFT+P.