Lahat ng kailangan mong malaman upang maging isang front-end developer

Lahat ng kailangan mong malaman upang maging isang front-end web developer!

Kung nais mong malaman na mag-code kasama ang layunin na maging isang pang-front developer, maraming mga bagay na kailangan mong malaman upang maging matagumpay at makakuha ng trabaho. Dapat kang magsimula sa pagkakaroon ng isang matatag na maunawaan ang mga pangunahing kaalaman sa pag-unlad ng web, pagkatapos ay dagdagan ang iyong mga kasanayan sa mga sobrang tool at mapagkukunan na ginagamit ng karamihan sa mga web developer.

Kung nagawa mo na ang pagsasaliksik at sigurado ka na ang pag-unlad sa harap ay ang paraan para sa iyo, suriin ang mga tool na ito na kailangan mo ring master. Ang pag-alam sa mga tool at mapagkukunang ito ay hindi lamang makakatulong sa iyo sa proseso ng pag-unlad ng web, ngunit makakatulong din ito sa iyo na patumbahin ang kompetisyon palabas ng tubig kapag nag-a-apply para sa mga trabaho.

Panghuli, kung hindi ka sigurado na 100% kung ang pag-aaral sa code ay isang bagay na nais mong subukan, narito ang 10 mga kadahilanan kung bakit ka dapat matutong mag-code.

Ano ang Ginagawa ng isang Front-End Developer

Kailangan mo munang malaman eksakto kung ano ang isang front-end web developer. Sa pangkalahatan, ang pagbuo ng web ay binubuo ng tatlong mga segment na uri ng trabaho:

1. Front-End Developer. Ang taong ito (tinatawag ding front-end web developer o front-end engineer) ay isang web developer na gumagana sa harap na dulo ng mga website at web application, na kasama ang lahat ng nakikita at ginamit ng gumagamit sa browser ng web page. Karaniwang nakatuon sa disenyo ang pagtuon sa mga developer.
2. Back-End Developer. Ang taong ito ay responsable para sa back end o sa server-side ng mga web site at web application. Ang likurang dulo ay kung saan ang lahat ng data ay manipulahin at na-update. Ang mga tagabuo ng back end ay karaniwang lohikal na nag-iisip.
3. Full-Stack Developer. Ang taong ito ay isang espesyal na ninja na may kasanayan sa parehong harap at dulo ng likod. Kung nasisiyahan ka sa pagtatrabaho kasama ang "mga magagandang bagay" pati na rin ang mga "sobrang techy" na bagay, maaaring para sa iyo ang trabahong ito…

Gayundin, noong unang panahon sa isang kalawakan na malayo, napakalayo… mayroong isang pamagat na kilala bilang Web Designer. Hindi talaga kailangang harapin ng taga-disenyo ang web ang pag-aaral na mag-code, at nakatuon lamang sa mga aspeto ng disenyo ng mga web page.

Sa mga araw na ito, dahil ang mga web site at web application ay naging mas functional at interactive, hinihingi ng job market ang mga serbisyo ng mga taong alam kung paano ang parehong disenyo at code.

Mayroon pa ring ilang mga trabahong magagamit para sa mga web designer, ngunit ang karamihan sa mga taga-disenyo ng web ay sumusubok na malaman upang mag-code para sa mas mahusay na mga pagkakataon, magbayad, at seguridad sa trabaho. Sa maraming mga paraan, ang trabaho ng isang front-end developer ay maaaring tingnan bilang isang taga-disenyo ng web na may husay sa isang wika sa pagprograma, marahil sa JavaScript.

Ang HTML ay ang balangkas ng mga web page, CSS ang balat, at ang JavaScript ang utak.

Master ang Mga Pangunahing Kaalaman

Talagang dapat mong magkaroon ng isang matatag na maunawaan ang tatlong pangunahing mga teknolohiya na ginagamit sa pag-unlad ng web, ang mga ito ay:

• HTML: ito ang unang pangunahing gusali ng pagbuo ng lahat ng mga web page, nagbibigay ito ng istraktura sa mga web page. Ang HTML ay isang wikang naka-coding, ngunit hindi ito isang ganap na wika ng pagprograma, sa halip ito ay isang mark-up na wika. Pinapayagan ka ng mga wikang markup na "mark up" ang teksto para sa mga layunin ng pagproseso.
• CSS: ito ang pangalawang pangunahing bloke ng pagbuo ng lahat ng mga web page, responsable ito para sa "hitsura at pakiramdam" ng mga web page. Ang CSS ay hindi rin isang wika ng pagprograma.
• Ang JavaScript: ay ang pangatlong bloke ng gusali at pinakaunang aktwal na wika ng pagprograma na natututunan ng karamihan sa mga developer ng web. Tumatakbo ang JavaScript sa browser ng computer, at pinapayagan nito ang pag-andar ng isang web page.

Kung naiisip mo ang tatlong mga bloke ng pagbuo ng web sa paraang naiisip mo ang isang tao, maiisip mo ito sa ganitong paraan: Ang HTML ay ang mga buto at balangkas ng mga web page, ang CSS ay nagbibigay ng balat, at ang JavaScript ang utak.

Maaari kang kumuha ng isang basag sa pag-aaral na mag-code ngayon sa pamamagitan ng pagkuha ng kurso sa pag-crash ng HTML ni Brad Traversy, na isang WHIZ sa pagtuturo ng mga teknolohiya sa pag-unlad ng web:

Pangunahing Mga Tool sa Pag-unlad ng Web

• Text Editor: nagsusulat kami ng code gamit ang isang text editor, at kailangan mong pumili ng isa at maging pamilyar sa lahat ng mga kakayahan. Ang ilan sa mga tanyag na editor ng teksto ngayon ay may kasamang: Atom, Sublime Text, Brackets, Visual Studio Code, at mahusay na lumang MS Notepad at Mac Text Edit.
• Mga Tool ng Developer ng Browser: Ang Google Chrome at Mozilla Firefox ay parehong nilagyan ng mga tool sa panloob na developer na nagbibigay-daan sa iyo upang tingnan at manipulahin ang code ng anumang website sa iyong browser.
• Ang mga tool na ito ay mabuti para sa mga layunin ng pag-debug, at syempre… ikaw lamang ang makakakita ng mga pagbabagong nagawa mo sa website gamit ang mga tool ng developer, dahil pagmamanipula mo lang sa site tulad ng paglitaw nito sa loob ng iyong sariling browser.
• Mga Sistema ng Control ng Bersyon: Pinapayagan ka ng mga system ng kontrol sa bersyon na pamahalaan ang mga pagbabago sa iyong mga proyekto sa web. Pinapayagan ka nitong bumalik sa iba't ibang mga bersyon ng isang proyekto nang hindi makagambala sa na-deploy na proyekto hanggang sa maperpekto mo ang iyong pinagtatrabahuhan. Mayroong maraming mga sistema ng kontrol sa bersyon na ginagamit, ngunit ang Git ay ang pinakapangingibabaw.
• Command Line (Terminal): Ang isang masusing mastering ng linya ng utos ay kinakailangan para sa propesyonal na pagbuo ng web. Nakakatakot ang linya ng utos, ngunit ginagawang madali ang pag-upload ng mga bagong pakete ng software, at ginagawang napakadaling mag-navigate sa mga file at folder. Maaari kang matuto upang makabisado ang linya ng utos sa isang araw.

Pangunahing Teknolohiya ng Pagsuporta sa Pag-unlad ng Web

• CSS Preprocessor: Ginagawa ng teknolohiyang ito ang pagsulat at pagpapanatili ng CSS ng simoy. Sa ngayon, ang pinakakaraniwang preprocessor ng CSS ay SASS, at maaari itong matutunan sa isang araw
• Mga Framework ng CSS: Pagdating sa paggawa ng mga kumplikadong gawain ng CSS na mas kaunting oras ang gugugol upang likhain, ang balangkas ng CSS na kakailanganin mong malaman ay ang Twitter Bootstrap.
• CSS Flexbox & CSS Grid: Parehas itong mga layout ng modelo ng web na CSS na makabuluhang makakatulong sa paggawa ng iyong mga web page na tumutugon.
• Mga Tool sa Bundling: Ang Webpack at Browserify na may Gulp ay ginagamit upang makatulong na ma-load ang iyong pahina nang mas mabilis sa browser. Naghahatid ang mga tool na ito upang mabawasan o mapaliit ang iyong nilalaman para sa mas mabilis na mga oras ng paglo-load.
• Mga Aklatan at Balangkas ng JavaScript: pinapayagan ka ng mga aklatan at balangkas na mabilis, mas madali, at mas mahusay na magdagdag ng mga pakikipag-ugnayan sa JavaScript sa mga web page. Tumutulong din ang mga ito upang gawing simple ang mas kumplikadong mga aspeto ng JavaScript. Ang ilan sa mga tanyag na aklatan at balangkas ay kinabibilangan ng: JQuery, React, at Angular.

Tulad ng nakikita mo, maraming kailangan mong malaman upang maging isang front-end web developer. Ang magandang balita ay ang LAHAT ng mga tool, mapagkukunan, at teknolohiya na ito ay maaaring matutunan nang libre. Maaari mo nang makita na maraming toneladang libreng mapagkukunan sa YouTube lamang…

Kung kailangan mo ng mas malawak na pag-aaral, ang lahat ng mga tool na ito ay maaaring matutunan nang wala sa gamit ang paggamit ng mga mapagkukunan sa online na pag-aaral tulad ng Team Treehouse. Mayroon ding mga solong kurso na magagamit, tulad ng The Complete Front-End Development na kurso o Modern React on Udemy.