{"id":7936,"date":"2021-09-01T20:03:00","date_gmt":"2021-09-01T17:03:00","guid":{"rendered":"https:\/\/goit.global\/?post_type=blog&#038;p=7936"},"modified":"2023-07-05T21:19:04","modified_gmt":"2023-07-05T09:19:04","slug":"junior-front-end-razrabotchik-dolzhen-umet-znat","status":"publish","type":"blog","link":"https:\/\/goit.global\/ro\/blog\/ce-trebuie-sa-poata-un-front-end-developer-incepator\/","title":{"rendered":"Ce are de f\u0103cut un front-end developer \u00eencep\u0103tor?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>Pozi\u021bia de Front-End Developer pentru un \u00eencep\u0103tor este o modalitate rapid\u0103 \u0219i sigur\u0103 de a \u00eencepe o carier\u0103 de dezvoltator \u00een IT. Probabil \u0219i tu vei ajunge la aceast\u0103 concluzie dup\u0103 ce vei analiza statisticile posturilor vacante \u0219i salariilor speciali\u0219tilor din domeniu.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dar pentru a trece un interviu, un test \u0219i a ob\u021bine un loc de munc\u0103, dezvoltatorul front-end \u00eencep\u0103tor trebuie s\u0103 de\u021bin\u0103 abilit\u0103\u021bi tehnice \u0219i \u201cflexibile\u201d specifice. Mai jos, \u00ee\u021bi vom povesti despre ele pentru a \u00ee\u021bi putea crea un checklist la \u00eenceput de drum \u00een IT.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Ce face un dezvoltator Front-End \u00eencep\u0103tor?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sarcina unui Front-End Developer \u00eencep\u0103tor este de a crea partea vizibil\u0103 a unui site web, astfel \u00eenc\u00e2t s\u0103 transmit\u0103 cu exactitate ideea web designerului \u0219i s\u0103 permit\u0103 utilizatorilor s\u0103 interac\u021bioneze cu pagina web. De asemenea, este important ca dezvoltatorul front-end s\u0103 configureze corect partea vizibil\u0103 astfel \u00eenc\u00e2t s\u0103 comunice eficient cu backend-ul \u0219i baza de date, cu suprastructurile externe \u0219i toate tipurile de servicii.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hai s\u0103 analiz\u0103m ce ar trebui s\u0103 \u0219tie \u0219i s\u0103 fac\u0103 un dezvoltator Front-End \u00eencep\u0103tor pentru a \u00eendeplini cu succes sarcinile pe care un angajator sau un client le va stabili.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Top 5 abilit\u0103\u021bi tehnice pentru un FrontEnd Developer \u00eencep\u0103tor<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Odat\u0103 ce vei ob\u021bine aceste 5 skill-uri tehnice pentru front-end \u2013 vor fi binevenite la orice interviu, dar totodat\u0103, vei putea \u00eencepe s\u0103 preiei comenzi \u0219i pentru freelance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. HTML+CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">HTML (abreviere pentru HyperText Markup Language) este un limbaj de marcare hipertext. Cu ajutorul acestuia, un front-end developer creeaz\u0103 \u201cscheletul\u201d unui site sau al unei pagini web. Folosind tag-urile HTML, speciali\u0219tii creeaz\u0103 o \u201cmachet\u0103\u201d care afi\u0219eaz\u0103:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>con\u021binutul textului;<\/li>\n\n\n\n<li>liste marcate \u0219i numerotate;<\/li>\n\n\n\n<li>imagini;<\/li>\n\n\n\n<li>con\u021binut media.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">CSS (abreviere pentru Cascading Style Sheets) este un limbaj de stil a unei pagini web, care formeaz\u0103 logic macheta stilistic\u0103 \u0219i corect\u0103 a unui site sau pagini, f\u0103c\u00e2ndu-l frumos din punct de vedere vizual.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Folosind propriet\u0103\u021bile CSS Front-End, un specialist personalizeaz\u0103 pagina pentru utilizator \u00een func\u021bie de obiective \u2013 \u00eencep\u00e2nd cu simpla prezentare, p\u00e2n\u0103 la citire vocal\u0103 sau chiar redarea fontului Braille pe dispozitivele speciale.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>HTML \u0219i CSS reprezint\u0103 baza. <\/strong>Aceasta este necesar\u0103 unui front-end developer, a\u0219a cum un artist are nevoie de schi\u021be pentru viitoare picturi. Prin urmare, dac\u0103 vrei s\u0103 \u00eencepi cu succes o carier\u0103 ca dezvoltator Front-End, f\u0103 primul pas \u0219i \u00eenregistreaz\u0103-te la <a href=\"https:\/\/m.goit.global\/ro\/?amp%3Butm_medium=blog&#038;amp%3Butm_campaign=button\">maratonul de machetare HTML\/CSS<\/a>, unde:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>vei crea primul t\u0103u site-CV;<\/li>\n\n\n\n<li>vei \u00eenv\u0103\u021ba tag-urile HTML de baz\u0103 \u0219i propriet\u0103\u021bile CSS pentru a crea site-uri \u0219i pagini web;<\/li>\n\n\n\n<li>\u00ee\u021bi vei testa propriile puteri \u00een IT&nbsp;<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-center has-primary-background-color has-background wp-block-paragraph\"><a href=\"https:\/\/m.goit.global\/ro\/?amp%3Butm_medium=blog&#038;amp%3Butm_campaign=button\">\u00cenregistreaz\u0103-te gratuit la maratonul de HTML\/CSS<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cunoa\u0219terea JavaScript pentru un dezvoltator Front-End este obligatorie! Cu ajutorul acestui limbaj de programare, speciali\u0219tii adaug\u0103 dinamism elementelor de pe paginile HTML ini\u021bial statice. De exemplu, cu ajutorul JS, un dezvoltator se asigur\u0103 c\u0103 \u00een timpul ac\u021biunilor utilizatorului:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>a fost afi\u0219at\u0103 anima\u021bia corect\u0103;<\/li>\n\n\n\n<li>\u201cau ap\u0103rut\u201d ferestrele necesare;<\/li>\n\n\n\n<li>au ap\u0103rut efectele dorite.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Conform sondajului <a href=\"https:\/\/insights.stackoverflow.com\/survey\/2021\" target=\"_blank\" rel=\"noopener\">StackOverFlow 2021<\/a>, dintre cei 83.052 de oameni chestiona\u021bi,<strong> 64,95% creeaz\u0103 proiecte IT \u00een JavaScript<\/strong>. Acest lucru face din JS cel mai popular limbaj de programare \u0219i deschide perspective pentru \u00eencep\u0103tori.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. jQuery \u0219i Frameworks JavaScript, CSS<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JQuery \u2013 este o bibliotec\u0103 JS care simplific\u0103 scrierea \u0219i reduce cantitatea de cod necesar\u0103 pentru interac\u021biunea dintre JavaScript \u0219i HTML.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">De asemenea, jQuery con\u021bine o colec\u021bie bogat\u0103 de elemente pentru interfa\u021b\u0103 gata f\u0103cute, care simplific\u0103 crearea \u0219i personalizarea galeriilor, ferestrelor modale sau a formularelor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Framework-urile JavaScript \u0219i CSS sunt biblioteci care reprezint\u0103 un set de stiluri \u0219i elemente dinamice \u201cimplicite\u201d. Pentru a evita termenii plictisitori \u0219i a explica mai simplu ce este, vom da un exemplu. Imagineaz\u0103-\u021bi c\u0103 e\u0219ti un dezvoltator web front-end \u00eencep\u0103tor.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Prime\u0219ti sarcina de a realiza o \u201cmachet\u0103\u201d a unui site web, a unei pagini web sau a unei aplica\u021bii. De asemenea, \u00ee\u021bi sunt date note introductive care vor servi drept baz\u0103 pentru proiect. Ai 2 variante:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>S\u0103 \u00eencepi crearea unui proiect <strong>de la zero<\/strong>, pierz\u00e2nd zeci de ore la crearea elementelor de baz\u0103 \u2013 o practic\u0103 excelent\u0103 pentru un \u00eencep\u0103tor dac\u0103 nu este constr\u00e2ns de termene limit\u0103<\/li>\n\n\n\n<li>S\u0103 utilizezi framework-urile JS \u0219i CSS pentru crearea bazei proiectului \u00eentr-o or\u0103 sau dou\u0103 \u2013 o posibilitate de a \u201cini\u021bia\u201d rapid proiectul de la zero, <strong>f\u0103r\u0103 a fi nevoie de coding prea mult<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Pentru un \u00eencep\u0103tor, este util s\u0103 le poat\u0103 face pe am\u00e2ndou\u0103 pentru a putea alege \u00een func\u021bie de disponibilitatea (sau absen\u021ba) timpului.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Sistemul de control al versiunilor<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00cen procesul de lucru asupra proiectelor, un dezvoltator Front-End interac\u021bioneaz\u0103 zilnic cu echipa de dezvoltare, designeri web \u0219i testeri. Pentru a face comunicarea convenabil\u0103 pentru toat\u0103 lumea, trebuie s\u0103 pute\u021bi lucra cu un sistem de control al versiunilor. De exemplu, haide\u021bi s\u0103 analiz\u0103m Git. Trebuie s\u0103 \u0219tii:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cum se instaleaz\u0103 Git pe un computer<\/li>\n\n\n\n<li>Cum trimi\u021bi modific\u0103ri \u00een Git pentru ca echipa s\u0103 le vad\u0103<\/li>\n\n\n\n<li>Cum s\u0103 vizualizezi modific\u0103rile \u0219i s\u0103 verifici versiunile anterioare ale unui proiect<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Un sistem de control al versiunilor aplica\u021biei ajut\u0103 dezvoltatorul front-end la \u00eenceput de drum s\u0103 fac\u0103 evalu\u0103ri ale proiectelor \u0219i, \u00een loc s\u0103 rescrie codul din nou, s\u0103 poat\u0103 reveni la versiunea cea mai recent\u0103 \u0219i s\u0103 \u201crescrie\u201d <strong>doar partea necesar\u0103<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Design adaptiv<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La crearea site-urilor \u0219i paginilor web, este important s\u0103 re\u021bine\u021bi c\u0103 utilizatorii le vor vizualiza pe diferite dispozitive:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>calculatoare;<\/li>\n\n\n\n<li>tablete;<\/li>\n\n\n\n<li>smartphone-uri.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Pozi\u021bia de Front-End Developer pentru un \u00eencep\u0103tor este o modalitate rapid\u0103 \u0219i sigur\u0103 de a \u00eencepe o carier\u0103 de dezvoltator \u00een IT. Probabil \u0219i tu vei ajunge la aceast\u0103 concluzie dup\u0103 ce vei analiza statisticile posturilor vacante \u0219i salariilor speciali\u0219tilor din domeniu.<\/p>\n","protected":false},"featured_media":23629,"menu_order":70,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false},"categories":[626],"tags":[907],"class_list":["post-7936","blog","type-blog","status-publish","has-post-thumbnail","hentry","category-front-end-developer","tag-front-end-developer"],"acf":[],"_links":{"self":[{"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/blog\/7936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/types\/blog"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/media\/23629"}],"wp:attachment":[{"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/media?parent=7936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/categories?post=7936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/tags?post=7936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}