{"id":28,"date":"2019-12-14T01:21:00","date_gmt":"2019-12-13T22:21:00","guid":{"rendered":"https:\/\/www.biltek.net.tr\/?p=28"},"modified":"2023-10-27T16:46:59","modified_gmt":"2023-10-27T13:46:59","slug":"frontend-nedir-frontend-developer-ne-is-yapar","status":"publish","type":"post","link":"https:\/\/www.biltek.net.tr\/blog\/frontend-nedir-frontend-developer-ne-is-yapar","title":{"rendered":"Frontend Nedir, Frontend Developer Ne i\u015f Yapar?"},"content":{"rendered":"\r\n<p>Son zamanlarda geni\u015f kitlelere yay\u0131lan yaz\u0131l\u0131m d\u00fcnyas\u0131n\u0131 kavrayabilmek i\u00e7in baz\u0131 terimlere hakim olmak gerekir. Frontend de bu terimler aras\u0131nda yer al\u0131r. Front-end kelimesi T\u00fcrk\u00e7e\u2019de \u201c\u00f6n y\u00fcz\u201d olarak bilinir. Web tasar\u0131m\u0131 ve web geli\u015ftirme konular\u0131nda aktif olarak kullan\u0131lan terim bir meslek dal\u0131na da ismini vererek \u00f6l\u00fcms\u00fczl\u00fc\u011f\u00fcn\u00fc kan\u0131tlam\u0131\u015ft\u0131r.<\/p>\r\n\r\n\r\n\r\n<p><strong>Frontend Nedir?<\/strong><\/p>\r\n\r\n\r\n\r\n<p>Herhangi bir web sitesinin veya uygulaman\u0131n genel olarak bak\u0131ld\u0131\u011f\u0131nda iki taraf\u0131 vard\u0131r. Bunlardan birisi Arka Y\u00fcz ( backend ), di\u011feri ise \u00d6n Y\u00fcz olarak kar\u015f\u0131n\u0131za \u00e7\u0131kar. Frontend olarak bilinen \u00f6n y\u00fcz\u00fcn asli g\u00f6revi kullan\u0131c\u0131 ile sitenin aras\u0131ndaki ba\u011flant\u0131y\u0131 kurmakt\u0131r. Siteye veya uygulamaya girdi\u011finiz ilk anda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz g\u00f6rseller, \u015fablonlar, butonlar, g\u00f6rsel bile\u015fenler ve daha pek \u00e7ok detay frontend i\u00e7erisinde yer al\u0131r. Web sitesinde kullan\u0131lacak renkler, i\u00e7eriklerin hangi d\u00fczende yerle\u015ftirilece\u011fi, yaz tipinin ve boyutunun belirlenmesi front end yap\u0131s\u0131n\u0131n i\u00e7erisinde bulunur.<\/p>\r\n\r\n\r\n\r\n<p><strong>Frontend Developer Nedir?<\/strong><\/p>\r\n\r\n\r\n\r\n<p>T\u00fcrk\u00e7e kar\u015f\u0131l\u0131\u011f\u0131 olarak \u201c\u00f6n y\u00fcz geli\u015ftirici\u201d olarak verilebilen frontend developer, web tabanl\u0131 uygulamalarda aktif rol oynar. Bir sitenin veya uygulaman\u0131n iskelet yap\u0131s\u0131 frontend developer taraf\u0131ndan haz\u0131rlan\u0131r. Bu alandaki uzmanlar s\u0131kl\u0131kla 3 tane yaz\u0131l\u0131m dili kullan\u0131r. Bunlar HTML, CSS, JS dilleri olarak kar\u015f\u0131n\u0131za \u00e7\u0131kar. Sistemleri g\u00f6rsel a\u00e7\u0131dan haz\u0131r hale getiren yaz\u0131l\u0131mc\u0131lar yal\u0131n haldeki bir yaz\u0131l\u0131ma tasar\u0131m haz\u0131rlar.<\/p>\r\n\r\n\r\n\r\n<p><strong>Frontend Developer G\u00f6revleri Nelerdir?<\/strong><\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>\u00d6n y\u00fcz geli\u015ftiricisi siteyi test eder ve e\u011fer var ise hatalar\u0131 ay\u0131klar. \u00d6n y\u00fcz programlama dilleri hakk\u0131nda yeterli teknik bilgilere sahip olmas\u0131 ve bu bilgileri kavrayarak hareket etmesi gerekir.<\/li>\r\n\r\n\r\n\r\n<li>Sitenin veya uygulaman\u0131n kullan\u0131labilirli\u011fini art\u0131rmaya y\u00f6nelik \u00e7al\u0131\u015fmalar yaparken ayn\u0131 zamanda g\u00f6rsel bile\u015fenler hakk\u0131ndaki i\u00e7eriklere yer verir.\u00a0<\/li>\r\n\r\n\r\n\r\n<li>Frontend developer uzmanlar\u0131 \u00f6nlerine gelen projede hangi yaz\u0131l\u0131m dilinin kullan\u0131ld\u0131\u011f\u0131n\u0131 kavrar ve gerekti\u011finde d\u00fczenleme yapar. Bu nedenden dolay\u0131 yaz\u0131l\u0131m dillerine hakim olmak bu i\u015fin \u00f6nemli noktalar\u0131ndan birisi olarak kar\u015f\u0131n\u0131za \u00e7\u0131kar.<\/li>\r\n\r\n\r\n\r\n<li>Kod dizginlerini tan\u0131mal\u0131 ve bu dizgileri tasar\u0131m ile do\u011fru noktada birle\u015ftirerek siteyi haz\u0131r hale getirir.<\/li>\r\n<\/ul>\r\n\r\n\r\n\r\n<p><strong>Frontend Developer Olmak \u0130steyenlerin Sahip Olmas\u0131 Gereken 7 Beceri Nedir?<\/strong><\/p>\r\n\r\n\r\n\r\n<p>Frontend developer olmak isteyenlerin \u00f6ncelikle kod yazmaktan ho\u015flan\u0131yor olmas\u0131 \u00f6nemli. Yarat\u0131c\u0131l\u0131k ve s\u00fcrekli kendini geli\u015ftirmeyi gerektiren alanda bu i\u015fi yapmak isteyenlerin temelde \u015fu \u00f6zelliklere hakim olmalar\u0131 gerekiyor.<\/p>\r\n\r\n\r\n\r\n<ul class=\"wp-block-list\">\r\n<li>HTML ve CSS ikilisini bilmek son derece \u00f6nemlidir. HTML k\u0131saltmas\u0131 HyperText Markup Language olarak a\u00e7\u0131l\u0131r ve standart i\u015faretleme dili olarak yaz\u0131l\u0131m d\u00fcnyas\u0131nda yer al\u0131r. Web sayfalar\u0131n\u0131n yarat\u0131lmas\u0131nda aktif rol oynar. Cascading Style Sheets ise CSS olarak k\u0131salt\u0131l\u0131r. CSS HTML ile olu\u015fturan sayfan\u0131n nas\u0131l g\u00f6r\u00fcnece\u011fini belirler. Font, yaz\u0131 stili, yerle\u015fim plan\u0131, renkler ve daha pek \u00e7ok detay CSS i\u00e7erisinde olu\u015fturulur.<\/li>\r\n\r\n\r\n\r\n<li>JavaScript frontend developer uzmanlar\u0131n\u0131n bilmesi gereken temel dillerden birisidir. Sayfa fonksiyonlar\u0131n\u0131n belirlenmesinde rol oynayan JavaScript sunumu yap\u0131lan sayfaya \u00e7e\u015fitli uzant\u0131lar ekleyerek interaktif \u00f6zellikleri web sitesine kazand\u0131r\u0131r. JavaScript ad\u0131na jQuery k\u00fct\u00fcphanesini kullanabilirsiniz. \u00c7ok fazla eklenti ve uzant\u0131y\u0131 i\u00e7eren k\u00fct\u00fcphaneyi JavaScript\u2019i \u00f6\u011frenerek etkin bi\u00e7imde kullanabilirsiniz.<\/li>\r\n\r\n\r\n\r\n<li>\u00dczerine \u00e7al\u0131\u015faca\u011f\u0131n\u0131z projeye uygun bir platformdan faydalanmak verimli deneyimleriniz i\u00e7in \u00f6nemlidir. \u0130\u015flevsel kodlar\u0131n yer ald\u0131\u011f\u0131 dosyalar sizi y\u00f6nlendirirken hata yapma pay\u0131n\u0131z\u0131 azalt\u0131r. Bunun i\u00e7in platformlar\u0131 ara\u015ft\u0131rmal\u0131 dilerseniz birden fazla platform kullanarak i\u015finizi b\u00fcy\u00fck oranda kolayla\u015ft\u0131rabilirsiniz.<\/li>\r\n\r\n\r\n\r\n<li>Kod yazma a\u015famas\u0131nda elinizde pek \u00e7ok say\u0131da versiyon birikir. Projeniz \u00fczerinde \u00e7al\u0131\u015f\u0131rken baz\u0131 noktalarda aksilikler ya\u015fanabilir ve bu noktada arzu edece\u011finiz son \u015fey t\u00fcm versiyonlar\u0131n\u0131z\u0131n \u00e7\u00f6pe gitmesi olur. Bu gibi bir durumda t\u00fcm kodlar\u0131 yeniden yazman\u0131z gerekir. Versiyon kontrol\u00fc bu noktada yeti\u015fir, yap\u0131lan de\u011fi\u015fikleri takip eder ve \u00f6nceki versiyonlara eri\u015fiminizi kolayla\u015ft\u0131r\u0131r.<\/li>\r\n\r\n\r\n\r\n<li>Farkl\u0131 test metotlar\u0131n\u0131 ke\u015ffederek projenizi testlere tabi tutman\u0131z gerekir. Test sonucunda tespit edilen hatalar\u0131 ay\u0131klayarak daha b\u00fcy\u00fck sorunlarla kar\u015f\u0131la\u015fmadan projenizi tamamlayabilirsiniz.<\/li>\r\n<\/ul>\r\n","protected":false},"excerpt":{"rendered":"<div class=\"mh-excerpt\"><p>Son zamanlarda geni\u015f kitlelere yay\u0131lan yaz\u0131l\u0131m d\u00fcnyas\u0131n\u0131 kavrayabilmek i\u00e7in baz\u0131 terimlere hakim olmak gerekir. Frontend de bu terimler aras\u0131nda yer al\u0131r. Front-end kelimesi T\u00fcrk\u00e7e\u2019de \u201c\u00f6n <a class=\"mh-excerpt-more\" href=\"https:\/\/www.biltek.net.tr\/blog\/frontend-nedir-frontend-developer-ne-is-yapar\" title=\"Frontend Nedir, Frontend Developer Ne i\u015f Yapar?\">[&#8230;]<\/a><\/p>\n<\/div>","protected":false},"author":2,"featured_media":1472,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[198],"tags":[],"class_list":["post-28","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-tasarim"],"_links":{"self":[{"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/posts\/28","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/comments?post=28"}],"version-history":[{"count":1,"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":1473,"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/posts\/28\/revisions\/1473"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/media\/1472"}],"wp:attachment":[{"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/media?parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/categories?post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.biltek.net.tr\/blog\/wp-json\/wp\/v2\/tags?post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}