{"id":19154,"date":"2021-09-01T20:03:00","date_gmt":"2021-09-01T17:03:00","guid":{"rendered":"https:\/\/goit.global\/blog\/chto-dolzhen-umet-nachynaiushchyy-front-end-razrabotchyk\/"},"modified":"2023-08-30T22:07:15","modified_gmt":"2023-08-30T10:07:15","slug":"chto-dolzhen-umet-nachynaiushchyy-front-end-razrabotchyk","status":"publish","type":"blog","link":"https:\/\/goit.global\/pl\/blog\/co-powinien-umiec-poczatkujacy-programista-frontend\/","title":{"rendered":"Co powinien umie\u0107 pocz\u0105tkuj\u0105cy programista front end?"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Jak wynika z danych statystycznych o wakatach i zarobkach dla specjalist\u00f3w IT w 2021 roku, rozpocz\u0119cie pracy na stanowisku \u201cJunior Front-End Developer\u201d to szybki i sprawdzony spos\u00f3b na wej\u015bcie do <\/span><a href=\"https:\/\/goit.global\/pl\/\"><span style=\"font-weight: 400;\">bran\u017cy IT<\/span><\/a><span style=\"font-weight: 400;\">.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Aby m\u00f3c wykona\u0107 zadanie rekrutacyjne i dosta\u0107 prac\u0119 po rozmowie kwalifikacyjnej, pocz\u0105tkuj\u0105cy programista front end powinien posiada\u0107 wymagane kompetencje: zar\u00f3wno twarde, jak i mi\u0119kkie. Poni\u017cej dowiesz si\u0119 o nich wi\u0119cej i b\u0119dziesz w stanie sporz\u0105dzi\u0107 checklist\u0119 umiej\u0119tno\u015bci niezb\u0119dnych do rozpocz\u0119cia kariery w bran\u017cy IT.\u00a0<\/span><\/p>\n<h2><b>Czym zajmuje si\u0119<\/b> programista<b> front end na pocz\u0105tku swojej kariery?<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Zadanie Junior Front-End developera polega na tworzeniu widocznej cz\u0119\u015bci strony internetowej tak, aby umo\u017cliwi\u0107 u\u017cytkownikom interakcj\u0119 z ni\u0105 oraz precyzyjnie przekaza\u0107 wizj\u0119 projektanta. Do zada\u0144 \u201cfrontendowca\u201d nale\u017cy tak\u017ce zintegrowanie strony klienckiej z backendem, baz\u0105 danych, rozszerzeniami oraz wszelkiego rodzaju web service\u2019ami.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Przeanalizujmy, co powinien wiedzie\u0107 i umie\u0107 pocz\u0105tkuj\u0105cy programista front end, \u017ceby sprawnie wykonywa\u0107 zadania, kt\u00f3re b\u0119dzie dostawa\u0142 od swojego pracodawcy lub klienta.\u00a0<\/span><\/p>\n<h2><b>Oto lista TOP 5 umiej\u0119tno\u015bci technicznych dla pocz\u0105tkuj\u0105cego programisty front end<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Zdobycie tych 5 umiej\u0119tno\u015bci technicznych oczekiwanych w przypadku programist\u00f3w front end sprawi, \u017ce \u0142atwo odnajdziesz si\u0119 na ka\u017cdej rozmowie o prac\u0119, a ponadto b\u0119dziesz m\u00f3g\u0142 realizowa\u0107 zlecenia jako freelancer.\u00a0<\/span><\/p>\n<h3><b>1. HTML+CSS<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">HTML (skr\u00f3t od HyperText Markup Language). U\u017cywaj\u0105c tego j\u0119zyka, programi\u015bci front end tworz\u0105 \u201cszkielet\u201d witryny lub strony internetowej. Znaczniki (tagi) HTML s\u0142u\u017c\u0105 do stworzenia \u201cmakiety\u201d, na kt\u00f3rej s\u0105 wy\u015bwietlane:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">tre\u015bci tekstowe;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">listy wypunktowane i numerowane;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">obrazy;\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">tre\u015bci medialne.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">CSS (skr\u00f3t od Cascading Style Sheets) jest j\u0119zykiem opisuj\u0105cym style strony, kt\u00f3ry sprawia, \u017ce strona wygl\u0105da w atrakcyjny spos\u00f3b.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Za pomoc\u0105 w\u0142a\u015bciwo\u015bci CSS programista front end dostosowuje spos\u00f3b wy\u015bwietlania tre\u015bci na stronie do okre\u015blonych potrzeb u\u017cytkownika \u2013 od najzwyklejszego pokazania tekstu do jego odczytywania na g\u0142os, a czasem nawet przekazania do specjalnych urz\u0105dze\u0144, u\u017cywaj\u0105cych alfabetu Braille\u2019a.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">HTML i CSS to podstawy potrzebne dla frontendowca tak samo, jak malarzowi potrzebna jest umiej\u0119tno\u015b\u0107 tworzenia szkic\u00f3w jego przysz\u0142ych obraz\u00f3w. Dlatego pierwszym krokiem do rozpocz\u0119cia kariery jako Junior Front-end developer jest zapisanie si\u0119 na maraton tworzenia stron za pomoc\u0105 HTML i CSS.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">W ramach maratonu:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">stworzysz pierwsz\u0105 stron\u0119 ze swoim CV;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">poznasz podstawowe znaczniki (tagi) HMTL i w\u0142a\u015bciwo\u015bci CSS potrzebne do tworzenia stron internetowych w przysz\u0142o\u015bci;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">wst\u0119pnie spr\u00f3bujesz swoich si\u0142 w bran\u017cy IT.<\/span><\/li>\n<\/ul>\n\n\n<p class=\"has-text-align-center has-primary-background-color has-background wp-block-paragraph\"><a href=\"https:\/\/goit.global\/pl\/newcomers\/\">Zapisz si\u0119 na maraton HTML\/CSS<\/a><\/p>\n\n\n<h3>2.<b> JavaScript<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Wiedza z zakresu JavaScript to prawdziwy \u201cmust have\u201d dla ka\u017cdego programisty front end! U\u017cywaj\u0105c tego j\u0119zyka programowania, specjali\u015bci sprawiaj\u0105, \u017ce przedtem statyczne strony HTML staj\u0105 si\u0119 dynamiczne. Na przyk\u0142ad, za pomoc\u0105 JS developer potrafi sprawi\u0107, \u017ce dzia\u0142ania u\u017cytkownika powoduj\u0105:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">wy\u015bwietlanie w\u0142a\u015bciwej animacji;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u201cwyskakiwanie\u201d potrzebnych okien;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">ujawnianie zamierzonych efekt\u00f3w.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Wed\u0142ug danych <\/span><a href=\"https:\/\/insights.stackoverflow.com\/survey\/2021\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">StackOverFlow 2021<\/span><\/a><span style=\"font-weight: 400;\"> 83 052 respondent\u00f3w, tj. 64,95%, realizuje projekty IT za pomoc\u0105 JavaScript, co czyni JS najpopularniejszym j\u0119zykiem programowania, odkrywaj\u0105cym nowe perspektywy dla pocz\u0105tkuj\u0105cych specjalist\u00f3w. Dlatego, je\u015bli chcesz tworzy\u0107 niesamowite i nowoczesne strony internetowe, zapisz si\u0119 na 2-tygodniowy mini kurs nauki JavaScript w GoIT.<\/span><\/p>\n\n\n<p class=\"has-text-align-center has-primary-background-color has-background wp-block-paragraph\"><a href=\"https:\/\/goit.global\/pl\/newcomers\/\">Dowiedz si\u0119 wi\u0119cej o mini kursie JavaScript<\/a><\/p>\n\n\n<h3><b>3. JQuery i Frameworki JavaScript, CSS<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">JQuery jest bibliotek\u0105 JavaScript, kt\u00f3ra u\u0142atwia pisanie oraz redukuje ilo\u015b\u0107 kodu potrzebnego do interakcji pomi\u0119dzy JavaScript a HTML.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ponadto JQuery zawiera bogat\u0105 kolekcj\u0119 gotowych do u\u017cytku element\u00f3w interfejsu, co upraszcza tworzenie i konfigurowanie galerii, okien modalnych, formularzy itd.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Frameworki JavaScript i CSS to biblioteki, w kt\u00f3rych znajduj\u0105 si\u0119 zestawy domy\u015blnych styl\u00f3w oraz element\u00f3w dynamicznych. Aby odej\u015b\u0107 od suchych termin\u00f3w, sp\u00f3jrzmy na prosty przyk\u0142ad ilustruj\u0105cy, czym s\u0105 te frameworki.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Wyobra\u017a, \u017ce jeste\u015b pocz\u0105tkuj\u0105cym programist\u0105 front end. Dosta\u0142e\u015b zadanie: stw\u00f3rz wst\u0119pn\u0105 wersj\u0119 witryny, strony internetowej lub aplikacji, u\u017cywaj\u0105c uniwersalnych danych wej\u015bciowych, nadaj\u0105cych si\u0119 jako podstawa do ka\u017cdego projektu. Masz dwie opcje:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Zrealizowa\u0107 projekt od zera, po\u015bwi\u0119caj\u0105c na tworzenie podstaw kilkadziesi\u0105t godzin. B\u0119dzie to znakomita szansa na zdobycie do\u015bwiadczenia dla pocz\u0105tkuj\u0105cego programisty, je\u015bli oczywi\u015bcie nie ma presji czasu zwi\u0105zanej ze zbli\u017caj\u0105cym si\u0119 deadlinem.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Skorzysta\u0107 z framework\u00f3w JS i CSS i tym samym mie\u0107 gotowe podstawy projektu w godzin\u0119 lub dwie. Jest to spos\u00f3b na osi\u0105gni\u0119cie bardzo szybkich post\u0119p\u00f3w ju\u017c na pocz\u0105tku projektu bez konieczno\u015bci pisania du\u017cej ilo\u015bci kodu od zera.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Pocz\u0105tkuj\u0105cy specjalista powinien \u201cmie\u0107 w arsenale\u201d obie opcje i wybiera\u0107 pomi\u0119dzy nimi w zale\u017cno\u015bci od (braku) dost\u0119pnego czasu.\u00a0<\/span><\/p>\n<h3><b>4. System kontroli wersji\u00a0<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Pracuj\u0105c nad projektami, programista front end codziennie wsp\u00f3\u0142pracuje z zespo\u0142em developerskim, projektantami stron i testerami. W celu usprawnienia komunikacji mi\u0119dzy nimi potrzebna jest umiej\u0119tno\u015b\u0107 pracy z systemem kontroli wersji. We\u017amy na przyk\u0142ad Git. Co musisz wiedzie\u0107:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Jak zainstalowa\u0107 Git na komputerze.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Jak u\u017cywa\u0107 narz\u0119dzia Git do wprowadzania zmian tak, by zobaczy\u0142 je zesp\u00f3\u0142.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Jak przegl\u0105da\u0107 zmiany i przywraca\u0107 poprzednie wersje projektu.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">System kontroli wersji umo\u017cliwia podgl\u0105d zmian w projektach. Wersjonowanie pomaga unika\u0107 zb\u0119dnego przepisywania kodu, gdy\u017c wystarczy tylko przywr\u00f3ci\u0107 wcze\u015bniejsz\u0105 wersj\u0119 projektu i przepisa\u0107 jedynie wadliw\u0105 cz\u0119\u015b\u0107 kodu.<\/span><\/p>\n<h3><b>5. Projektowanie adaptacyjne<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Tworz\u0105c witryny i strony internetowe, pami\u0119taj, \u017ce b\u0119da one wy\u015bwietlane na r\u00f3\u017cnych urz\u0105dzeniach u\u017cytkownik\u00f3w:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">komputerach,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">tabletach,<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">kom\u00f3rkach.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Specjalista na stanowisku \u201cJunior Front End Developer\u201d powinien zna\u0107 techniki projektowania adaptacyjnego potrzebne do tworzenia stron, kt\u00f3re b\u0119d\u0105 si\u0119 dostosowywa\u0107 przy wy\u015bwietlaniu na danym urz\u0105dzeniu.<\/span><\/p>\n<h2><b>Kompetencje mi\u0119kkie dla programisty front end<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Pocz\u0105tkuj\u0105cy programista front end potrzebuje nie tylko umiej\u0119tno\u015bci twardych, lecz te\u017c kompetencji mi\u0119kkich (tzw. \u201csoft skills\u201d). Wszystko o umiej\u0119tno\u015bciach mi\u0119kkich mo\u017cesz przeczyta\u0107 w odpowiednio zatytu\u0142owanym <\/span><a href=\"https:\/\/goit.global\/ua-ru\/blog\/soft-skills\/?amp%3Butm_medium=organic\"><span style=\"font-weight: 400;\">artykule<\/span><\/a><span style=\"font-weight: 400;\"> na blogu GoIT Journal.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">TOP 5 umiej\u0119tno\u015bci mi\u0119kkich dla pocz\u0105tkuj\u0105cych:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><i><span style=\"font-weight: 400;\">Umiej\u0119tno\u015b\u0107 pracy zespo\u0142owej:<\/span><\/i><span style=\"font-weight: 400;\"> wykonanie nale\u017c\u0105cych do Ciebie zada\u0144 ma bezpo\u015bredni wp\u0142yw na realizacj\u0119 projektu, dlatego dbaj o dotrzymywanie deadline\u2019\u00f3w oraz rzetelnie wykonuj swoj\u0105 prac\u0119.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><i><span style=\"font-weight: 400;\">Dyscyplina: <\/span><\/i><span style=\"font-weight: 400;\">je\u017celi wzi\u0105\u0142e\u015b na siebie zobowi\u0105zanie, przedstaw wyniki swojej pracy, nawet je\u015bli nie wykona\u0142e\u015b wszystkiego w 100%.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><i><span style=\"font-weight: 400;\">Skuteczna komunikacja: <\/span><\/i><span style=\"font-weight: 400;\">opanuj narz\u0119dzie Git, zadawaj pytania, bierz aktywny udzia\u0142 w dyskusjach.\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><i><span style=\"font-weight: 400;\">Kreatywno\u015b\u0107:<\/span><\/i><span style=\"font-weight: 400;\"> spr\u00f3buj podchodzi\u0107 do zada\u0144 z pasj\u0105, szukaj nieszablonowych rozwi\u0105za\u0144, dzi\u0119ki kt\u00f3rym b\u0119dziesz m\u00f3g\u0142 tworzy\u0107 oryginalne strony internetowe.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><i><span style=\"font-weight: 400;\">Samodzielno\u015b\u0107 w rozwi\u0105zywaniu problem\u00f3w:<\/span><\/i><span style=\"font-weight: 400;\"> zanim zapytasz kogo\u015b z pracy, pr\u00f3buj samodzielnie znale\u017a\u0107 odpowied\u017a w Internecie.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Je\u015bli chcesz pracowa\u0107 jako Junior Front End Developer, sprawd\u017a kurs przygotowany przez GoIT, kt\u00f3ry zrobi z Ciebie specjalist\u0119 front end od podstaw. W ci\u0105gu 183 dni kursu:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">zdob\u0119dziesz wiedz\u0119 i umiej\u0119tno\u015bci niezb\u0119dne do znalezienia pracy, r\u00f3wnie\u017c jako freelancer;<\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">zyskasz i rozwiniesz swoje kompetencje mi\u0119kkie;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">nauczysz si\u0119 tworzy\u0107 CV do pracy jako programista front end oraz dowiesz si\u0119, gdzie je zamie\u015bci\u0107, \u017ceby zainteresowa\u0107 rekruter\u00f3w;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">nauczysz si\u0119 komunikowa\u0107 ze specjalistami HR i rekruterami, \u017ceby przedstawia\u0107 swoje umiej\u0119tno\u015bci i portfolio w najlepszym \u015bwietle.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Je\u015bli chcesz dosta\u0107 osobisty plan rozwoju w jako specjalista front end, zapisz si\u0119 na kurs Front End<\/span> online.<\/p>\n\n\n<p class=\"has-text-align-center has-primary-background-color has-background wp-block-paragraph\"><a href=\"https:\/\/goit.global\/pl\/courses\/frontend\/?amp%3Butm_medium=organic\"><em><a href=\"https:\/\/goit.global\/pl\/courses\/\"><em>Dowiedz si\u0119 wi\u0119cej o kursie Front End online GoIT<\/em><\/a><\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rozpocz\u0119cie kariery front-end developer&#8217;a: Kluczowe umiej\u0119tno\u015bci dla pocz\u0105tkuj\u0105cych. Dowiedz si\u0119 wi\u0119cej na Go IT! Czytaj teraz.<\/p>\n","protected":false},"featured_media":19156,"menu_order":70,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false},"categories":[3077],"tags":[3146],"class_list":["post-19154","blog","type-blog","status-publish","has-post-thumbnail","hentry","category-front-end-developer","tag-front-end-developer"],"acf":[],"_links":{"self":[{"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/blog\/19154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/types\/blog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/media\/19156"}],"wp:attachment":[{"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/media?parent=19154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/categories?post=19154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/tags?post=19154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}