{"id":16211,"date":"2023-03-14T03:23:27","date_gmt":"2023-03-13T14:23:27","guid":{"rendered":"https:\/\/goit.global\/?post_type=blog&#038;p=16211"},"modified":"2024-02-14T02:39:03","modified_gmt":"2024-02-13T13:39:03","slug":"co-powinien-umiec-poczatkujacy-programista-front-end","status":"publish","type":"blog","link":"https:\/\/goit.global\/pl\/blog\/co-powinien-umiec-poczatkujacy-programista-front-end\/","title":{"rendered":"Co powinien umie\u0107 pocz\u0105tkuj\u0105cy programista Front-end?"},"content":{"rendered":"<p>Stanowisko Junior Front-End Developer dla pocz\u0105tkuj\u0105cego \u2013 to szybki i pewny spos\u00f3b na <a href=\"https:\/\/goit.global\/pl\/newcomers\/\">rozpocz\u0119cie kariery w bran\u017cy IT<\/a> . Taki wniosek nasuwa si\u0119, je\u015bli przeanalizujemy statystyki wakat\u00f3w i wynagrodze\u0144 dla specjalist\u00f3w IT.<br \/>\nAle aby przej\u015b\u0107 rozmow\u0119 kwalifikacyjn\u0105, wykona\u0107 zadanie testowe i zosta\u0107 zatrudnionym, pocz\u0105tkuj\u0105cy Front-End developer musi posiada\u0107 konkretne umiej\u0119tno\u015bci techniczne i &#8220;mi\u0119kkie&#8221; (soft skills). Poni\u017cej opowiem o nich, aby\u015b m\u00f3g\u0142 sporz\u0105dzi\u0107 list\u0119 kontroln\u0105 do rozpocz\u0119cia kariery w IT.<\/p>\n<h2>Czym zajmuje si\u0119 Junior Front-end developer<\/h2>\n<p><strong>Zadaniem programisty Junior Front-End<\/strong> jest stworzenie widocznej cz\u0119\u015bci serwisu w taki spos\u00f3b, aby dok\u0142adnie przekaza\u0107 intencj\u0119 projektanta i umo\u017cliwi\u0107 u\u017cytkownikom interakcj\u0119 ze stron\u0105 internetow\u0105. Dla programisty front-end wa\u017cne jest r\u00f3wnie\u017c skonfigurowa\u0107 stron\u0119 klienck\u0105 tak, aby prawid\u0142owo wsp\u00f3\u0142dzia\u0142a\u0142a z backendem i baz\u0105 danych, dodatkami stron trzecich i wszelkiego rodzaju serwisami.<\/p>\n<p>Przeanalizujmy, co powinien wiedzie\u0107 i umie\u0107 Junior Front End Developer, aby umiej\u0119tnie wykonywa\u0107 zadania, kt\u00f3re postawi przed nim pracodawca lub klient.<\/p>\n<h2>Top 5 umiej\u0119tno\u015bci technicznych Junior Front-End Developer<\/h2>\n<p>Gdy zdob\u0119dziesz te 5 Tech Skills dla programisty front-end \u2013 b\u0119dziesz mile widziany na ka\u017cdej rozmowie kwalifikacyjnej i b\u0119dziesz m\u00f3g\u0142 bra\u0107 zlecenia jako wolny strzelec.<\/p>\n<h3>1. HTML+CSS<\/h3>\n<p><strong>HTML (skr\u00f3t od HyperText Markup Language)<\/strong> \u2013 to hipertekstowy j\u0119zyk znacznik\u00f3w. Za jego pomoc\u0105 programista front-end tworzy &#8220;szkielet&#8221; witryny lub strony internetowej. Za pomoc\u0105 znacznik\u00f3w HTML specjali\u015bci tworz\u0105 &#8220;makiet\u0119&#8221;, kt\u00f3ra prawid\u0142owo wy\u015bwietla:<\/p>\n<ul>\n<li>tre\u015b\u0107 tekstow\u0105,<\/li>\n<li>listy wypunktowane i numerowane;<\/li>\n<li>obrazy<\/li>\n<li>tre\u015bci medialne<\/li>\n<\/ul>\n<p><strong>CSS (skr\u00f3t od cascading style sheets)<\/strong> \u2013 to j\u0119zyk styl\u00f3w strony, kt\u00f3ry tworzy logicznie poprawny uk\u0142ad zewn\u0119trzny witryny lub strony, czyni\u0105c j\u0105 \u0142adn\u0105 wizualnie.<\/p>\n<p>Za pomoc\u0105 w\u0142a\u015bciwo\u015bci CSS specjalista Front-end dostosowuje wygl\u0105d strony dla u\u017cytkownika w zale\u017cno\u015bci od ustalonych cel\u00f3w \u2013 od zwyk\u0142ej prezentacji tekstu do odczytywania g\u0142osowego, a nawet do wydruku w alfabecie Braille&#8217;a na specjalnych urz\u0105dzeniach.<br \/>\nzorganizowa\u0107 swoje miejsce pracy i skutecznie realizowa\u0107 zaplanowane dzia\u0142ania;<\/p>\n<ul>\n<li>od\u0142o\u017cy\u0107 media spo\u0142eczno\u015bciowe, gdy jeste\u015b zaj\u0119ty prac\u0105;<\/li>\n<li>wyja\u015bni\u0107 dziecku\/partnerowi, \u017ce jeste\u015b teraz zaj\u0119ty wykonywaniem zadaniem X i spe\u0142nisz jego\/jej pro\u015bb\u0119 za N minut;<\/li>\n<li>zachowywa\u0107 motywacj\u0119 w ci\u0105gu ca\u0142ego dnia pracy.<\/li>\n<\/ul>\n<p>HTML i CSS \u2013 to podstawy. Dla specjalisty Front-end s\u0105 tak samo potrzebne, jak dla artysty umiej\u0119tno\u015b\u0107 tworzenia szkic\u00f3w przysz\u0142ych obraz\u00f3w. Dlatego, je\u015bli chcesz z sukcesem rozpocz\u0105\u0107 karier\u0119 programisty Junior Front-end, zr\u00f3b pierwszy krok \u2013 zarejestruj si\u0119 na maraton tworzenia uk\u0142ad\u00f3w HTML\/CSS. Podczas maratonu:<\/p>\n<ul>\n<li>stworzysz swoj\u0105 pierwsz\u0105 stron\u0119 internetow\u0105, przedstawiaj\u0105c\u0105 CV;<\/li>\n<li>poznasz podstawowe znaczniki HTML i w\u0142a\u015bciwo\u015bci CSS, za pomoc\u0105 kt\u00f3rych w przysz\u0142o\u015bci b\u0119dziesz tworzy\u0107 strony i serwisy internetowe;<\/li>\n<li>spr\u00f3bujesz swoich si\u0142 w IT na podstawowym poziomie.<\/li>\n<\/ul>\n<h3>2. JavaScript<\/h3>\n<p>Znajomo\u015b\u0107 <strong>JavaScript<\/strong> dla programisty Front-end to &#8220;must have&#8221;! Za pomoc\u0105 tego j\u0119zyka programowania specjali\u015bci dodaj\u0105 dynamik\u0119 do element\u00f3w na pocz\u0105tkowo statycznych stronach HTML. Na przyk\u0142ad za pomoc\u0105 JS, programista robi tak, aby przy akcjach u\u017cytkownika:<\/p>\n<ul>\n<li>pojawia\u0142a si\u0119 w\u0142a\u015bciwa animacja,<\/li>\n<li>&#8220;wyskakiwa\u0142y&#8221; potrzebne okna,<\/li>\n<li>pojawia\u0142y si\u0119 odpowiednie efekty.<\/li>\n<\/ul>\n<p>Wed\u0142ug ankiet StackOverFlow 2021 83`052 respondent\u00f3w 64,95% tworzy projekty IT w JavaScript. To sprawia, \u017ce JS jest najpopularniejszym j\u0119zykiem programowania i otwiera perspektywy dla pocz\u0105tkuj\u0105cych. Je\u015bli wi\u0119c jeste\u015b gotowy tworzy\u0107 fajne, nowoczesne strony internetowe \u2013 zarejestruj si\u0119 na 2-tygodniowy mini kurs JavaScript w GoIT.<\/p>\n<h3>3. JQuery i Frameworki JavaScript, CSS<\/h3>\n<p><strong>JQuery<\/strong> to biblioteka JS, kt\u00f3ra upraszcza pisanie i zmniejsza ilo\u015b\u0107 kodu potrzebnego do interakcji mi\u0119dzy JavaScript a HTML.<br \/>\nPonadto JQuery zawiera bogat\u0105 kolekcj\u0119 gotowych element\u00f3w interfejsu, co u\u0142atwia tworzenie i dostosowywanie galerii, okien modalnych i formularzy.<\/p>\n<p><strong>Frameworki JavaScript i CSS<\/strong> to biblioteki, kt\u00f3re oferuj\u0105 zestaw domy\u015blnych styl\u00f3w i element\u00f3w dynamicznych. Aby odej\u015b\u0107 od nudnych termin\u00f3w i \u0142atwiej wyja\u015bni\u0107, co to jest, podajemy przyk\u0142ad. Wyobra\u017a sobie, \u017ce jeste\u015b programist\u0105 Junior Front End. Otrzyma\u0142e\u015b zadanie wykonania &#8220;szkicu&#8221; serwisu, strony internetowej lub aplikacji i otrzyma\u0142e\u015b dane wej\u015bciowe, kt\u00f3re b\u0119d\u0105 pasowa\u0142y jako podstawa do ka\u017cdego projektu. Masz 2 opcje:<\/p>\n<ul>\n<li>Zacz\u0105\u0107 projekt od zera i sp\u0119dzi\u0107 kilkana\u015bcie godzin na tworzenie podstaw \u2013 to \u015bwietna praktyka dla pocz\u0105tkuj\u0105cego, je\u015bli projekt nie jest pilny.<\/li>\n<li>Skorzysta\u0107 z framework\u00f3w JS oraz CSS i stworzy\u0107 baz\u0119 projektu w godzin\u0119 lub dwie \u2013 to mo\u017cliwo\u015b\u0107 szybkiego rozwini\u0119cia projektu od zera, bez konieczno\u015bci d\u0142ugotrwa\u0142ego kodowania.<\/li>\n<\/ul>\n<p>Dla pocz\u0105tkuj\u0105cego przydatne jest umie\u0107 robi\u0107 jedno i drugie, aby wybiera\u0107 w zale\u017cno\u015bci od dost\u0119pno\u015bci (braku) czasu.<\/p>\n<h3>4. System kontroli wersji<\/h3>\n<p>Podczas pracy nad projektami programista Front-end codziennie wchodzi w interakcje z zespo\u0142em rozwojowym, projektantami stron internetowych, testerami. Aby komunikacja by\u0142a wygodna dla wszystkich, musisz umie\u0107 pracowa\u0107 z <strong>systemem kontroli wersji<\/strong>. Dla przyk\u0142adu we\u017amy pod uwag\u0119 Git. Co nale\u017cy wiedzie\u0107:<\/p>\n<ul>\n<li>Jak zainstalowa\u0107 Git na komputerze.<\/li>\n<li>Jak przekazywa\u0107 zmiany do Git, aby zesp\u00f3\u0142 m\u00f3g\u0142 je zobaczy\u0107.<\/li>\n<li>Jak przegl\u0105da\u0107 zmiany i przywraca\u0107 wcze\u015bniejsze wersje projektu.<\/li>\n<\/ul>\n<p><strong>System kontroli wersji<\/strong> pozwala pocz\u0105tkuj\u0105cemu programi\u015bcie Front-end na rewizj\u0119 projekt\u00f3w oraz na powr\u00f3t do poprzedniej wersji, co umo\u017cliwia &#8220;naprawienie&#8221; potrzebnej cz\u0119\u015bci kodu, zamiast przepisywa\u0107 go od nowa.<\/p>\n<h3>5. Projektowanie adaptacyjne<\/h3>\n<p>Tworz\u0105c serwisy i strony internetowe nale\u017cy pami\u0119ta\u0107, \u017ce u\u017cytkownicy b\u0119d\u0105 je przegl\u0105da\u0107 na r\u00f3\u017cnych urz\u0105dzeniach:<\/p>\n<ul>\n<li>komputerach;<\/li>\n<li>tabletach;<\/li>\n<li>smartfonach.<\/li>\n<\/ul>\n<p>Aby tworzy\u0107 strony, kt\u00f3re b\u0119d\u0105 si\u0119 dostosowywa\u0107 do wy\u015bwietlania na dowolnym urz\u0105dzeniu, programista Junior Front End powinien zna\u0107 techniki adaptacyjnego projektowania stron internetowych.<\/p>\n<h2>Soft Skills (umiej\u0119tno\u015bci mi\u0119kkie) programisty Front End<\/h2>\n<p>Dla pocz\u0105tkuj\u0105cego programisty Front End wa\u017cne jest, aby opanowa\u0107 nie tylko Tech, ale r\u00f3wnie\u017c Soft Skills. Wszystko na temat &#8220;mi\u0119kkich&#8221; umiej\u0119tno\u015bci zosta\u0142o ju\u017c om\u00f3wione w artykule o takiej samej nazwie na blogu GoIT.<br \/>\nTOP-5 Soft Skills dla pocz\u0105tkuj\u0105cego:<\/p>\n<ul>\n<li>Umiej\u0119tno\u015b\u0107 pracy w zespole \u2013 wykonywanie swoich zada\u0144 ma bezpo\u015bredni wp\u0142yw na tworzenie projektu, dlatego wa\u017cne jest dotrzymywanie termin\u00f3w oraz rzetelne wykonywanie pracy.<\/li>\n<li>Dyscyplina \u2013 zobowi\u0105za\u0142e\u015b si\u0119 do przedstawienia wynik\u00f3w pracy \u2013 zr\u00f3b to, nawet je\u015bli nie jest jeszcze w 100% gotowa.<\/li>\n<li>W\u0142a\u015bciwa komunikacja \u2013 opanuj Git, zadawaj pytania i bierz udzia\u0142 w dyskusjach.<\/li>\n<li>Kreatywno\u015b\u0107 \u2013 staraj si\u0119 wykonywa\u0107 zadania z zaanga\u017cowaniem, poszukuj nietypowych rozwi\u0105za\u0144 i wtedy Twoje strony b\u0119d\u0105 niepowtarzalne.<\/li>\n<li>Samodzielne rozwi\u0105zywanie problem\u00f3w \u2013 rzadziej pytaj koleg\u00f3w o odpowiedzi, a wi\u0119cej wyszukuj sam.<\/li>\n<\/ul>\n<h2>Jak zosta\u0107 front end developerem?<\/h2>\n<p>Je\u015bli chcesz otrzyma\u0107 stanowisko Junior Front End Developer \u2013 w GoIT jest ju\u017c opracowany kurs, kt\u00f3ry zrobi z Ciebie specjalist\u0119 Front End od zera. W ci\u0105gu 183 dni kursu:<\/p>\n<ul>\n<li>zdob\u0119dziesz wiedz\u0119 i umiej\u0119tno\u015bci potrzebne do zatrudnienia i pracy na jako freelancer;<\/li>\n<li>ukszta\u0142tujesz i udoskonalisz swoje Soft Skills;<\/li>\n<li>dowiesz si\u0119, jak tworzy\u0107 CV programisty Front End i gdzie je zamieszcza\u0107, aby zainteresowa\u0107 rekruter\u00f3w;<\/li>\n<li>nauczysz si\u0119, jak komunikowa\u0107 si\u0119 z pracownikami dzia\u0142\u00f3w HR i rekruterami, aby zaprezentowa\u0107 swoje umiej\u0119tno\u015bci i portfolio w najlepszy mo\u017cliwy spos\u00f3b.<\/li>\n<\/ul>\n<p>Je\u015bli chcesz otrzyma\u0107 osobisty plan rozwoju w dziedzinie Front-end \u2013 <a href=\"https:\/\/goit.global\/pl\/courses\/fullstack\/\">zarejestruj si\u0119 na kurs Front End online<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Stanowisko Junior Front-End Developer dla pocz\u0105tkuj\u0105cego \u2013 to szybki i pewny spos\u00f3b na rozpocz\u0119cie kariery w bran\u017cy IT . Taki wniosek nasuwa si\u0119, je\u015bli przeanalizujemy statystyki wakat\u00f3w i wynagrodze\u0144 dla specjalist\u00f3w IT.<\/p>\n","protected":false},"featured_media":16140,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false},"categories":[],"tags":[],"class_list":["post-16211","blog","type-blog","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/blog\/16211","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\/16140"}],"wp:attachment":[{"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/media?parent=16211"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/categories?post=16211"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goit.global\/pl\/wp-json\/wp\/v2\/tags?post=16211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}