Jak chciałbyś pracować w wiodących firmach na świecie, jednocześnie wywierając wpływ poprzez piękny rozwój front-endu?
Istnieje duże zapotrzebowanie na wyjątkowych artystów współczesnego internetu, a ten przewodnik pokaże Ci, jak zacząć.
A ponieważ ludzie pracujący w oprogramowaniu są jednymi z najbardziej nagradzanych osób, warto rozważyć nabycie tej nowej umiejętności. Nigdy nie wiadomo, może to w końcu przerodzić się w karierę dla Ciebie.
Pierwsza część tego przewodnika poświęcona jest odpowiedziom na naglące pytania dotyczące rozwoju front-endu. Jeśli wiesz o obowiązkach, pensjach i innych aspektach bycia front-end developerem, możesz pominąć drugą część. Druga część tego poradnika poświęcona jest zasobom, samouczkom i wskazówkom.
Spis treści:
Czym jest programowanie front-endowe?
Tworzenie stron internetowych typu front-end to praktyka używania HTML, CSS i JavaScript do tworzenia unikalnych aplikacji internetowych. Aplikacje takie jak strony internetowe, strony mobilne, ale także aplikacje mobilne i Progresywne aplikacje internetowe.
Możesz też myśleć o tym w ten sposób, każda przeglądana witryna, w tym ta, została w jakiś sposób zbudowana przez programistę front-end. Przynajmniej po stronie klienta.
To, co kiedyś wymagało rozbudowanych narzędzi i frameworków, można teraz zrobić przy użyciu natywnych specyfikacji.
Chociaż front-end jest jedną z najbardziej dostępnych ścieżek w tworzeniu stron internetowych, może być również jednym z najtrudniejszych.
Technologia tworzenia stron internetowych ciągle się zmienia, co oznacza, że programiści muszą regularnie dostosowywać swoje umiejętności do najnowszych praktyk. Może to być męczące dla początkującego, ale poprawia się po roku lub dwóch solidnych praktyk rozwojowych.
Czy możesz nauczyć się programowania front-end za darmo?
Absolutnie możesz!
O wiele łatwiej jest nauczyć się tworzenia stron internetowych, głównie dzięki ogromnemu napływowi nowych zasobów, samouczków i projektów open source.
Projekty takie jak freeCodeCamp pomagają milionom ludzi pisać kod do ich pierwszych programów. A blog freeCodeCamp jest pełen ekscytujących artykułów nie tylko o frontendzie, ale także o innych aspektach tworzenia stron internetowych. Warto dodać do zakładek!
Wygląda na skomplikowaną? Z praktyką jest coraz łatwiej!
Chociaż założeniem tego przewodnika jest pomoc w nauce za darmo, nie możemy przeoczyć korzyści płynących z płatnych kursów.
Istnieje wiele startupów, które zaspokajają potrzeby zdeterminowanego tłumu, a my przedstawimy kilka niesamowitych platform kursów, które na koniec dadzą Ci nawet certyfikat.
Jaka jest średnia pensja dla front-end developera?
Programista front-end z wcześniejszym doświadczeniem może liczyć na ponad 100 000 USD rocznie, jeśli mieszka w Stanach Zjednoczonych.
To nie jest zła liczba!
Deweloperzy juniorów mogą spodziewać się, że zabiorą do domu od 60 000 USD i więcej.
A pensje w Europie również wydają się całkiem rozsądne; Niemcy mają średnio 50 000 USD rocznie.
Warto zauważyć, że popularność pracy zdalnej eksplodowała w ostatnich latach, co oznacza, że deweloperzy chcą zrównać swoje wynagrodzenia na całym świecie z międzynarodowymi standardami. To bardziej powód, aby rozważyć zostanie front-end developerem!
Jak znaleźć pracę jako front-end developer?
Technicznie rzecz biorąc, praca powinna być ostatnią rzeczą, o której należy rozmawiać. Najpierw musisz zgromadzić umiejętności, a następnie pomyśleć o potencjalnych możliwościach. Ale ponieważ ten post ma strukturę przewodnika, zawsze możesz wrócić i sprawdzić tę sekcję w celach informacyjnych.
Praca zdalna rośnie w niespotykanym dotąd tempie. W końcu komu nie podoba się pomysł pracy w domu, a jeszcze lepiej, prosto z plaży?
Oto lista najpopularniejszych tablic ogłoszeń dla programistów front-end:
Jest to nieco skrócona lista witryn, które zawierają zalecenia dotyczące znalezienia następnej pracy front-endowej. Inną alternatywą, jaką masz, jest praca nad osobistym projektem w nadziei, że będzie on opłacalny lub spędzenie czasu na występach freelancerów.
Zasoby: od czego zacząć.
Poniższe zasoby dotyczą rozpoczęcia pracy. Pod tym względem stosujemy dość liniowe podejście. I z tego prostego powodu, że istnieje ogromna ilość zasobów.
Aby szybko rozpocząć, koncentrujemy się na platformach i narzędziach front-end, które wplatają się w nowoczesny przepływ pracy. W rezultacie możesz nauczyć się podstawowej i średnio zaawansowanej składni kodowania, jednocześnie rozumiejąc narzędzia, które zarządzają przepływem pracy współczesnego programisty.
Zdecydowanie zaleca się, aby poświęcić trochę czasu na te zasoby, ponieważ przygotują one Cię do kursów i samouczków znajdujących się w drugiej części tego przewodnika.
Akademia kodowania
Jeśli poświęcisz choćby kilka minut na szukanie zasobów do nauki kodowania, to Codecademy bez wątpienia będzie jednym z Twoich pierwszych hitów. Ta platforma do nauki programowania jest dobrze znana i przez siedem lat służyła ponad 100 milionom osób.
W tym czasie Codecademy było dość rewolucyjne dzięki dynamicznemu i interaktywnemu interfejsowi kodowania. I chociaż wielu podążało tą samą ścieżką, Codecademy utrzymuje spójne osiągnięcia.
W dzisiejszych czasach możesz uzyskać certyfikat po zakończeniu, a wielu z nich skorzystało z tego certyfikatu, aby znaleźć pracę w startupie najwyższego poziomu; jako junior dev, nie mniej.
Cały czas jest argument, że Codecademy to za mało.
Z punktu widzenia doświadczonego programisty — jasne, może ta platforma jest zbyt prosta. Ale jeśli uczysz się tylko o programowaniu front-end, nie ma nic bardziej satysfakcjonującego niż wykonywanie instrukcji krok po kroku z wynikami w czasie rzeczywistym.
Codecademy oferuje zajęcia z HTML5, CSS3, SASS, Python, JavaScript, Ruby, SQL i Java.
Naucz się układu CSS
Jako programista front-end spędzisz rozsądną ilość czasu pracując z układem. Układ to płótno, na którym tworzysz strukturę witryny. Ten tekst na blogu jest umieszczony w wierszu, który jest częścią większego kontenera.
Dotyczy to wszystkich projektów stron internetowych. Korzystając z Naucz się układu CSS, możesz uzyskać podstawową wiedzę na temat działania kontenerów i wierszy, a także tego, jak możesz umieszczać zawartość dokładnie tam, gdzie chcesz.
Dodatkowe narzędzia, które możesz poznać, to Żabka Flexbox dla Flexbox podstawy i Siatkowy ogród dla Krata podstawy, odpowiednio.
Układ jest dość ważnym tematem do zrozumienia, więc poświęć kilka godzin na zagłębienie się w swoje doświadczenia związane z układem. Najlepszym sposobem na naukę jest praktyka.
Bootstrap
Gdy już zrozumiesz, jak działają układy, nadszedł czas na konkretne eksperymenty. Jasne, możesz iść dalej i spróbować opracować niestandardowy interfejs użytkownika jako swój pierwszy projekt, ale to może cię odstraszyć od więcej niż zachęcić do kontynuowania.
Musisz więc poznać jeden lub dwa frameworki. Framework to prosty sposób na rozpoczęcie dowolnego rodzaju tworzenia stron internetowych. Otrzymujesz narzędzia i dokumentację, dzięki którym możesz zacząć tworzyć interaktywne strony internetowe już pierwszego dnia. A jednym z najlepszych do zrobienia jest Bootstrap.
Twórz responsywne, mobilne projekty w Internecie, korzystając z najpopularniejszej na świecie biblioteki komponentów front-end. Bootstrap to zestaw narzędzi typu open source do programowania w HTML, CSS i JS.
Bootstrap jest intensywnie używany w całej sieci i jest bez wątpienia jednym z najpopularniejszych frameworków front-end na świecie.
Heck, spory procent odwiedzanych codziennie witryn korzysta z niektórych funkcji Bootstrap.
Jedną z fantastycznych rzeczy w Bootstrap jest jak szybko możesz zacząć. Strony dokumentacji są pełne przykładów i przypadków użycia. A co najlepsze, system układu Bootstraps został zaprojektowany z myślą o responsywnym projektowaniu. Tak więc Twoje witryny oparte na Bootstrap są automatycznie przyjazne dla urządzeń mobilnych.
A jeśli podoba Ci się to, co ma do zaoferowania Bootstrap, oto dodatkowe zasoby dotyczące popularnych frameworków front-end:
Lista kontrolna interfejsu użytkownika
Pomimo technologii, której używasz do tworzenia witryn internetowych, nadal musisz przestrzegać pewnych zasad i przepisów. Oczywiście można zignorować takie wymagania, ale kosztem doświadczenia użytkownika i kompatybilności cyfrowej.
Front-End Checklist to doskonałe narzędzie, w którym możesz podać adres URL swojej witryny, a platforma przeprowadza audyt witryny pod kątem najlepszych praktyk w zakresie projektowania front-end. Obejmuje to sprawdzenie, czy zoptymalizowałeś swoje obrazy lub czy postępujesz zgodnie z najlepszymi praktykami SEO.
Powinieneś próbować używać tej aplikacji tak długo, jak wymaga zrozumienia, jakie są nowoczesne wymagania dla profesjonalnych stron internetowych i aplikacji. Poza tym nieinwazyjny i płynny interfejs użytkownika to absolutna przyjemność.
Vue.js
Vue.js to świetny przykład, który pokazuje, jak mały pomysł/koncepcja może wyrosnąć na jedną z najbardziej rozpoznawalnych rzeczy na świecie. Rzeczywiście, Vue.js szturmem podbił społeczność front-endową.
Ta progresywna struktura pomaga programistom w tworzeniu niesamowitych interfejsów użytkownika przy użyciu HTML i JavaScript.
Ramy są w całości wspierane przez społeczność — zarówno po stronie finansowej, jak i rozwojowej.
To doskonały przykład na to, jak open-source może się łączyć i tworzyć wspaniałe rzeczy. A jako front-end developer powinieneś uczyć się więcej na open-source i dlaczego to ważne.
Oto kilka bardzo polecanych tekstów na Vue.js:
I wreszcie, sprawdź różne projekty zbudowane za pomocą Vue.js na Prezentacja Vue.js stronie internetowej.
Podstawy front-endu
Wszystko, na co przyjrzeliśmy się do tej pory, było w większości bezpłatne i open-source. Wszystko czego potrzebujesz to się złapać Wzniosły tekst, i możesz być na dobrej drodze do eksperymentowania z interfejsem, a absolutnie powinieneś! Czytanie samouczków i dokumentacji frameworka to tylko połowa sukcesu.
Prawdziwa nauka odbywa się w edytorze tekstu i przeglądarce. Jedynym minusem tego podejścia jest to, że nie jest ono całkowicie systematyczne. Działasz w trybie „każdy na każdego”, a wyniki mogą się różnić w zależności od Twojej zdolności do samodyscypliny.
Chyba że zdecydujesz się zainwestować, a przez inwestowanie mam na myśli wydać symboliczną sumę na zakup dowolnej książki front-endowej od Książka na osobności. Ci goście są jednymi z najlepszych w branży, a weterani front-endów wielokrotnie polecają ich książki.
Sekcja Podstawy front-endu zawiera książkę o SVG, CSS, HTML, JavaScript i Sass, która jest idealnym punktem wyjścia dla nowoczesnych przepływów pracy front-end.
GitHub
GitHub to Twoje cyfrowe biuro do programowania i programowania. Jest to największa platforma open source na świecie, w której znajduje się większość najpopularniejszych na świecie frameworków i narzędzi.
Dzięki GitHub możesz hostować swoje projekty i zapraszać inne osoby do przesyłania swoich wkładów. Możesz też samodzielnie przesyłać wkłady do innych projektów.
Możesz także odkrywać GitHub i wszystko, co ma do zaoferowania. Na przykład GitHub jest domem dla słynnych list Awesome, które są ogromnymi zbiorami samouczków, zasobów, narzędzi i innych rzeczy dla określonych frameworków i technologii.
Np, Niesamowita lista front-end która zawiera aktualne informacje na temat najnowszych rzeczy, które należy wiedzieć o front-endzie i dokąd zmierza.
Przepełnienie stosu
Stack Overflow ma słynną reputację jako najbardziej rygorystyczna witryna z pytaniami i odpowiedziami na świecie. I naprawdę tak jest.
Użytkownicy Stack Overflow nie lekceważą pytań, które nie zostały zbadane lub odpowiednio przeanalizowane. I chociaż może to wydawać się odrażające, pomaga stworzyć silne poczucie celu.
Widzisz, za każdym razem, gdy użytkownik przesyła odpowiedź na pytanie, inni użytkownicy mogą zgłosić się i zagłosować na tę odpowiedź. W końcu otrzymujesz kilka „zweryfikowanych” odpowiedzi, które dokładnie odpowiadają na pytania użytkowników. Dzięki temu hierarchia serwisu pozostaje przejrzysta i spójna.
Jako początkujący programista front-end będziesz chciał używać Stack Overflow, aby zrozumieć niektóre tematy, ale także zadawać pytania, jeśli musisz. Jednak w przypadku większości początkujących powinieneś być w stanie znaleźć zwięzłe odpowiedzi w ciągu kilku sekund.
Samouczki i kursy: Opanowanie ekosystemu.
Pierwsza sekcja była w całości poświęcona zasobom i platformom, które pomogą Ci zacząć. Powinieneś poświęcić rozsądną ilość czasu na każdy wymieniony przez nas zasób, aby rzeczywiście poczuć, czego można się spodziewać po programowaniu front-end.
Gdy już to zrobisz, możesz zwrócić uwagę na samouczki i kursy. Są to ściślej zorganizowane zasoby z silnym naciskiem na uczenie się.
Programowanie front-end to zbiór narzędzi, frameworków, bibliotek, oprogramowania testowego i wielu innych. Nie daj się jednak przestraszyć samej skali!
Warto zauważyć, że niektóre z poniższych kursów nie są dostępne bezpłatnie. Zapewniamy jednak, że poniższe zalecenia są absolutnie najlepsze.
Co więcej, platformy takie jak Frontend Masters pozwolą Ci zapoznać się ze wszystkimi technologiami używanymi w najbardziej udanych startupach na świecie.
Celem tego posta nie jest promowanie rozwoju front-end jako hobby, ale zapewnienie namacalnych zasobów, abyś mógł być na dobrej drodze do rozpoczęcia kariery dzięki całej swojej nauce.
Dokumentacja internetowa MDN
MDN (Mozilla Developer Network) w taki czy inny sposób nawiąże z Tobą znajomość. Ta platforma dokumentacji sieciowej jest całkowicie poświęcona promowaniu działania sieci. Tutaj możesz dowiedzieć się o narzędziach programistycznych, technologiach internetowych i samym tworzeniu stron internetowych.
Kiedy szukasz jakichś szczegółów w CSS lub HTML, to często MDN pojawia się jako pierwszy wynik w Google i innych wyszukiwarkach. Przewodniki, specyfikacje i ogólne informacje są uporządkowane w sposób, który ma sens dla programistów front-end.
Kursy front-end edX
Jak wspomniano wcześniej w tym przewodniku, przestrzeganie ścisłego programu nauczania jest bardzo liniowym sposobem uczenia się i adaptacji. Aby rozpocząć kurs, musisz sprawdzić, co ma do zaoferowania edX. Nie tylko możesz otrzymać certyfikaty po ukończeniu, ale możesz także uczyć się w preferowanym tempie.
Kursy edX są dokładnie ustrukturyzowane, z wyraźnym naciskiem na pomoc uczniom w zrozumieniu podstaw każdego tematu kursu. W tej chwili możesz nauczyć się technologii takich jak JavaScript, HTML5, CSS3 i innych.
Jeśli chcesz uzyskać pełny certyfikat front-end, będziesz musiał dokonać skromnej inwestycji w wysokości 500 USD — ale daje to również bezpośredni dostęp do instruktorów kursu i nie tylko. Wiele firm korzystało z edX, aby zapisać swoich pracowników do tego konkretnego programu.
Mistrzowie frontendu
Frontend Masters jest podobny do doświadczenia typu bootcamp. Kursy, które można znaleźć na tej platformie, są niezwykle dokładne, z naciskiem na treści długoterminowe i naukę zorientowaną na projekt.
Tutaj możesz dowiedzieć się o technologiach takich jak React, Vue, Angular, Node.js i wielu innych. Jakość produkcji jest niezwykle wysoka, dzięki czemu możesz cieszyć się doświadczeniem podobnym do tego na prawdziwym kursie Bootcamp.
Jako zarejestrowany użytkownik możesz śledzić swoje postępy na Uczyć się strona. Ta strona śledzi twoje postępy w nauce, pokazując procenty dla każdej technologii z osobna, ale także procenty dla całych stosów. To świetny sposób na utrzymanie motywacji.
Wreszcie, ukończenie kursu Frontend Masters w CV nie pozostanie niezauważone przez pracodawcę.
jajogłowy
Egghead jest bardzo podobny do wspomnianej powyżej platformy, ale wyróżnia się bardziej stanowczymi i skondensowanymi lekcjami. Na przykład lekcja „Budowanie dynamicznych list w Flutterze za pomocą ListViews” trwa tylko 2 minuty, ale zapewnia wystarczającą ilość materiału do nauki, aby naprawdę zrozumieć koncepcję.
Egghead zapewnia samouczki i kursy dotyczące frameworków, bibliotek, języków, narzędzi i platform. Chcesz dowiedzieć się więcej o programowaniu mobilnym? Nie ma problemu, Egghead ma materiały szkoleniowe na iOS, Androida i inne platformy.
Roczna cena to skromne 250 USD, ale zapewnia to dostęp do każdego kursu i samouczka znajdującego się na stronie. Możesz także omówić każdą lekcję z innymi członkami społeczności. Warto zainwestować!
Sztuczki CSS
Chris Coyier to absolutna legenda w społeczności CSS. Nie tylko nadąża za CSS-Tricks od ponad dekady, ale jest także współzałożycielem CodePen — popularna platforma do współdzielenia kodu dla twórców stron internetowych.
Jedną z rzeczy, na które możesz liczyć w CSS-Tricks, jest to, że jest on stale aktualizowany, a historie są publikowane w oparciu o aktualnie popularne tematy i technologie. W rezultacie możesz szybko zwiększyć swoje umiejętności, korzystając z samouczków dostarczonych przez wielu autorów witryny.
Krótko mówiąc, jest to przydatna strona do przechowywania zakładek i sprawdzania raz dziennie. Otrzymasz ogromną wartość z samych samouczków, ale także z zaleceń, które są z nimi powiązane.
Szkocka
Scotch jest zarówno źródłem nauki, jak i miejscem na najnowsze wydarzenia w tworzeniu stron internetowych. Działa od 2014 roku — strona zgromadziła ogromną liczbę fanów wraz z tysiącami bezpłatnych samouczków dotyczących tworzenia stron internetowych.
Autorzy Scotcha skupiają się głównie na technologiach takich jak Vue, React, Laravel, Angular, JavaScript, Node.js i tym podobnych. I nie myśl, że są to też podróbki.
W większości będziesz budować prawdziwe i namacalne aplikacje. Np. Czy chciałbyś dowiedzieć się, jak zbudować klona Twittera Vue i Adonisa? Nie ma problemu, po prostu zapisz się na darmowy kurs, a zostaniesz ustawiony.
Wspaniała strona i nie mogę jej wystarczająco polecić żadnym nowym i istniejącym twórcom front-end!
Wskazówki: Jeśli nie ma walki, nie ma postępu.
Skoro dotarłeś tak daleko, równie dobrze możesz oddać się niektórym z poniższych wskazówek. Chociaż front-end jest lukratywnym wyborem kariery, wiąże się z dość stromą krzywą uczenia się i sporym bólem głowy, gdy owijasz głowę wokół aktualnej osi czasu.
Niemniej jednak, ze względu na poziom możliwości, możesz przyciągnąć – warto walczyć pod górę!
Ucz się w granicach rozsądku.
Dlaczego uczysz się programować? Chcesz dostać lepszą pracę? Chcesz tworzyć kreatywne strony internetowe? Znajdź swój powód, ponieważ przyda się. Przyda się w tych dniach, a nawet tygodniach, kiedy będziesz walił głową w ścianę — zastanawiając się, czy coś z tego jest tego warte.
Znajdź swoje plemię.
Będziesz chciał nawiązać przynajmniej kilka kontaktów z osobami o podobnych poglądach, a nawet mentorami, jeśli to możliwe. Kiedy poszedłem pożyczyć książkę o Pascalu od nauczyciela CS z mojej starej szkoły, był bardzo przyjazny i otwarty na pomysł, aby pomóc mi z wszelkimi problemami, jakie mogę mieć. Rozważ podobną drogę, albo znajdując lokalną społeczność, albo znajdując innych programistów w społecznościach internetowych. O wiele łatwiej jest się nauczyć, gdy ktoś wskazuje palcem to, gdzie trzeba patrzeć.
Unikaj uczenia się wszystkiego.
Nie nakładaj na siebie ciężaru wiedzy o wszystkim. Jeśli chodzi o front-end, wystarczy zacząć od HTML5 i CSS3. JavaScript jest jak wisienka na torcie, więc uważaj z ilością lukru, ponieważ możesz się rozdęć! Po zapoznaniu się z podstawami zapoznaj się z nowymi obszarami, tematami i strukturami. Kluczem do sukcesu są małe i kompaktowe kęsy do nauki.
Jeśli chcesz dowiedzieć się więcej, przeczytaj ten post autorstwa Ali Spittel gdzie dzieli się ponad 25 wskazówkami dla nowych programistów.
Wynosić się
Na co czekasz? Wyjdź i zacznij się uczyć! Pamiętaj, aby co kilka miesięcy zaglądać do tego przewodnika po programowaniu front-end, aby uzyskać nowe aktualizacje i wskazówki.
Powodzenia!