{"id":9668,"date":"2020-12-28T23:08:03","date_gmt":"2020-12-28T20:08:03","guid":{"rendered":"https:\/\/www.kampuskod.com\/?p=9668"},"modified":"2020-12-29T00:05:53","modified_gmt":"2020-12-28T21:05:53","slug":"frontend-development-nedir-nasil-yapilir","status":"publish","type":"post","link":"https:\/\/www.kampuskod.com\/yazilim\/frontend-development-nedir-nasil-yapilir\/","title":{"rendered":"Frontend Development Nedir, Nas\u0131l Yap\u0131l\u0131r?"},"content":{"rendered":"\n

Bu yaz\u0131mda sizlere Frontend Development nedir, nas\u0131l yap\u0131l\u0131r hakk\u0131nda k\u0131sa bir yaz\u0131 payla\u015fmak istedim.<\/p>\n\n\n\n

\"einstein-sozu\" — Einstein diyor ki;
<\/figcaption><\/figure><\/div>\n\n\n\n
Merhabalar, ilk yaz\u0131mda sizlere elimden geldi\u011fince Frontend Development ile alakal\u0131 na\u00e7izane bilgilerimden, deneyimlerimden, Frontend nedir ve nas\u0131l yap\u0131l\u0131r gibi kavramlardan bahsetmeye \u00e7al\u0131\u015faca\u011f\u0131m.<\/p>\n\n\n\n
Benim frontend alan\u0131na y\u00f6nelmemin temel sebebi asl\u0131nda alm\u0131\u015f oldu\u011fum lise e\u011fitimimle ba\u015fl\u0131yor desem san\u0131r\u0131m daha do\u011fru olacak. O d\u00f6nemlerde tan\u0131\u015ft\u0131\u011f\u0131m \u201cweb geli\u015ftirme\u201d kavram\u0131, bu alana ilgi duydu\u011fumu fark etmem noktas\u0131nda temel olu\u015fturdu\u011funu s\u00f6yleyebilirim. Halihaz\u0131rda web tabanl\u0131 oldu\u011fum i\u00e7in \u00fcniversite e\u011fitimimde de frontend alan\u0131na y\u00f6nelik ald\u0131\u011f\u0131m e\u011fitimler ve yapt\u0131\u011f\u0131m \u00e7al\u0131\u015fmalar bu do\u011frultuda belirlemi\u015f oldu\u011fum kariyer hedeflerimle de devam etti\u011fini belirtebilirim.<\/p>\n\n\n\n
\n\n\n\n
$\"html-css-js\"$
HTML, CSS ve JavaScript\u2019in \u00f6rneklendirilmesi
<\/figcaption><\/figure><\/div>\n\n\n\n
\n\n\n\n
Frontend nedir ve nas\u0131l yap\u0131l\u0131r?<\/strong><\/h2>\n\n\n\n
Frontend kavram\u0131ndan bahsedildi\u011fi zaman insanlar\u0131n genellikle d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fc \u015fey asl\u0131nda HTML, CSS ve JavaScript\u2019 tir. K\u0131saca de\u011finecek olursak yukar\u0131da bulunan g\u00f6rselden yararlanmak istiyorum. HTML, bizim olu\u015fturdu\u011fumuz web sayfalar\u0131n\u0131n iskelet yap\u0131s\u0131na benzetebiliriz. Sayfalar\u0131m\u0131z bu iskelet yap\u0131s\u0131 \u00fczerinde in\u015fa edilir. CSS, web sayfalar\u0131ndaki tasar\u0131m k\u0131sm\u0131na kar\u015f\u0131l\u0131k gelir. \u0130\u00e7eriklerin nerede, hangi boyutta, hangi stilde g\u00f6r\u00fcnt\u00fclenece\u011fi konusunda yapaca\u011f\u0131m\u0131z ayarlamalarda kullan\u0131r\u0131z. JavaScript ise olu\u015fturmu\u015f oldu\u011fumuz yap\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131 gereken fonksiyonlar\u0131na kar\u015f\u0131l\u0131k gelir. Bir men\u00fcye t\u0131klad\u0131\u011f\u0131m\u0131z\u0131 d\u00fc\u015f\u00fcnelim, bu men\u00fcn\u00fcn a\u00e7\u0131l\u0131rken yapaca\u011f\u0131 olay(event), men\u00fc a\u00e7\u0131l\u0131rken i\u00e7erisinde mevcutsa bir animasyon veya backend ile haberle\u015fme i\u015flemlerini \u00f6rneklendirebiliriz.<\/p>\n\n\n\n
Her ne kadar frontend\u2019 in temelinde bunlar olsa da son y\u0131llarda JavaScript frameworklerinin (Angular, React ve Vue gibi) pop\u00fclerle\u015fmesi ve kullan\u0131m alan\u0131n\u0131n yayg\u0131nla\u015fmas\u0131 sayesinde frontend d\u00fcnyas\u0131n\u0131n ba\u015fka boyutlar kazand\u0131\u011f\u0131n\u0131 s\u00f6ylememiz yanl\u0131\u015f say\u0131lmaz. SPA dedi\u011fimiz yani Single Page Application(Tek Sayfal\u0131k Uygulama) kavram\u0131yla birlikte asl\u0131nda frontend bir uygulama geli\u015ftirme haline geldi diyebiliriz. Bununla beraber hayat\u0131m\u0131za giren Mobil Application kavram\u0131yla birlikte frontend k\u0131sm\u0131n\u0131 sadece web tabanl\u0131 d\u00fc\u015f\u00fcnmemek gerekir. Yani demem o ki Backend asl\u0131nda tek bir k\u0131s\u0131mdan olu\u015furken Frontend taraf\u0131 farkl\u0131 platformlar i\u00e7inde dizayn edilmekte veya kullan\u0131labilmektedir. (iOS, Android, IoT vs.)<\/p>\n\n\n\n
Responsive tasar\u0131ma da de\u011finecek olursam, ta\u015f\u0131nabilir cihazlar\u0131n hayat\u0131m\u0131zda aktif olarak rol oynamas\u0131ndan sonra \u00f6nemi daha da \u00e7ok ortaya \u00e7\u0131kan bir kavram oldu\u011fundan bahsedebiliriz. Eskiden mobil cihazlardan web sayfalar\u0131n\u0131 g\u00f6r\u00fcnt\u00fcledi\u011fimiz zaman sayfalar sanki desktop bir cihazdan g\u00f6r\u00fcnt\u00fcleniyormu\u015f gibi g\u00f6r\u00fcnt\u00fclenirdi. Fakat responsive tasar\u0131mlar\u0131nda geli\u015fmesiyle bu durum art\u0131k sayfalar\u0131 g\u00f6r\u00fcnt\u00fcledi\u011fimiz cihaz boyutlar\u0131na g\u00f6re (mobil,tablet vs.) g\u00f6r\u00fcnt\u00fclenmeye ba\u015fland\u0131. Yani sayfalar\u0131m\u0131z ona g\u00f6re geni\u015flik kazan\u0131yor, i\u00e7erikler ona uygun olarak hizalan\u0131yor gibi. Bu da beraberinde mobil cihazlardaki kullan\u0131mlar\u0131nda artmas\u0131na sebep oldu.<\/p>\n\n\n\n
\n\n\n\n
$\"\"$
G\u00fcn\u00fcm\u00fczde kullan\u0131lan Frontend teknolojilerinden baz\u0131lar\u0131<\/em>
<\/figcaption><\/figure><\/div>\n\n\n\n
\n\n\n\n
Frontend, en basit ifadeyle aray\u00fczde kullan\u0131c\u0131yla etkile\u015fime ge\u00e7en taraf olarak nitelendirebiliriz. Yani kullan\u0131c\u0131n\u0131n ziyaret etmi\u015f oldu\u011fu web sayfalar\u0131nda veya web uygulamalar\u0131nda g\u00f6r\u00fcnt\u00fcledi\u011fi, etkile\u015fime girdi\u011fi k\u0131s\u0131m. Bununla ilgili de verece\u011fim \u00f6rnekte Twitter\u2019\u0131 baz alal\u0131m. Twitter\u2019da anasayfam\u0131zda oldu\u011fumuzu d\u00fc\u015f\u00fcnelim. Takiple\u015fti\u011fimiz kullan\u0131c\u0131lar\u0131n tweetlerini g\u00f6r\u00fcnt\u00fcleyebiliyoruz, bu tweetlere be\u011feni, retweet gibi farkl\u0131 olaylar ger\u00e7ekle\u015ftirebiliyoruz, tweet atabiliyoruz, kullan\u0131c\u0131lara mesaj g\u00f6nderebiliyoruz vs.<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u00d6zetlemem gerekirse kariyer yolculu\u011funun ba\u015f\u0131nda olan bir geli\u015ftirici olarak ilk yaz\u0131mda elimden geldi\u011fince Frontend Development alan\u0131yla alakal\u0131 na\u00e7izane bilgi ve tecr\u00fcbelerimden bahsetmeye \u00e7al\u0131\u015ft\u0131m. Say\u0131lan konular uzay\u0131p gidebilir ancak \u00fczerinde durmak istedi\u011fim baz\u0131 hususlar\u0131 payla\u015fmaya gayret ettim. Ba\u015far\u0131l\u0131 olabildiysem ne mutlu bana. Bana ula\u015fmak isterseniz e\u011fer Twitter<\/a>, LinkedIn<\/a>, GitHub <\/a>\u00fczerinden ula\u015fabilirsiniz.<\/p>\n\n\n\n
Son olarak yaz\u0131m\u0131 Steve Jobs\u2019\u0131n \u015fu s\u00f6z\u00fcyle bitirmek istiyorum;<\/p>\n\n\n\n
<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
<\/p>\n\n\n\n
Te\u015fekk\u00fcr eder, sayg\u0131lar sunar\u0131m\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu yaz\u0131mda sizlere Frontend Development nedir, nas\u0131l yap\u0131l\u0131r hakk\u0131nda k\u0131sa bir yaz\u0131 payla\u015fmak istedim. Merhabalar, ilk yaz\u0131mda sizlere elimden geldi\u011fince Frontend Development ile alakal\u0131 na\u00e7izane bilgilerimden, deneyimlerimden, Frontend nedir ve nas\u0131l yap\u0131l\u0131r gibi kavramlardan bahsetmeye \u00e7al\u0131\u015faca\u011f\u0131m. Benim frontend alan\u0131na y\u00f6nelmemin temel sebebi asl\u0131nda alm\u0131\u015f oldu\u011fum lise e\u011fitimimle ba\u015fl\u0131yor desem san\u0131r\u0131m daha do\u011fru olacak. O d\u00f6nemlerde […]<\/p>\n","protected":false},"author":497,"featured_media":9671,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tdm_status":"","tdm_grid_status":""},"categories":[24],"tags":[523,3493,5144,5142,5145,5143,424,5147,5148,5146],"_links":{"self":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/9668"}],"collection":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/users\/497"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/comments?post=9668"}],"version-history":[{"count":7,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/9668\/revisions"}],"predecessor-version":[{"id":9683,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/9668\/revisions\/9683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media\/9671"}],"wp:attachment":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media?parent=9668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/categories?post=9668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/tags?post=9668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Einstein diyor ki;
<\/figcaption><\/figure><\/div>\n\n\n\n
Merhabalar, ilk yaz\u0131mda sizlere elimden geldi\u011fince Frontend Development ile alakal\u0131 na\u00e7izane bilgilerimden, deneyimlerimden, Frontend nedir ve nas\u0131l yap\u0131l\u0131r gibi kavramlardan bahsetmeye \u00e7al\u0131\u015faca\u011f\u0131m.<\/p>\n\n\n\n
Benim frontend alan\u0131na y\u00f6nelmemin temel sebebi asl\u0131nda alm\u0131\u015f oldu\u011fum lise e\u011fitimimle ba\u015fl\u0131yor desem san\u0131r\u0131m daha do\u011fru olacak. O d\u00f6nemlerde tan\u0131\u015ft\u0131\u011f\u0131m \u201cweb geli\u015ftirme\u201d kavram\u0131, bu alana ilgi duydu\u011fumu fark etmem noktas\u0131nda temel olu\u015fturdu\u011funu s\u00f6yleyebilirim. Halihaz\u0131rda web tabanl\u0131 oldu\u011fum i\u00e7in \u00fcniversite e\u011fitimimde de frontend alan\u0131na y\u00f6nelik ald\u0131\u011f\u0131m e\u011fitimler ve yapt\u0131\u011f\u0131m \u00e7al\u0131\u015fmalar bu do\u011frultuda belirlemi\u015f oldu\u011fum kariyer hedeflerimle de devam etti\u011fini belirtebilirim.<\/p>\n\n\n\n
\n\n\n\n
$\"html-css-js\"$
HTML, CSS ve JavaScript\u2019in \u00f6rneklendirilmesi
<\/figcaption><\/figure><\/div>\n\n\n\n
\n\n\n\n
Frontend nedir ve nas\u0131l yap\u0131l\u0131r?<\/strong><\/h2>\n\n\n\n
Frontend kavram\u0131ndan bahsedildi\u011fi zaman insanlar\u0131n genellikle d\u00fc\u015f\u00fcnd\u00fc\u011f\u00fc \u015fey asl\u0131nda HTML, CSS ve JavaScript\u2019 tir. K\u0131saca de\u011finecek olursak yukar\u0131da bulunan g\u00f6rselden yararlanmak istiyorum. HTML, bizim olu\u015fturdu\u011fumuz web sayfalar\u0131n\u0131n iskelet yap\u0131s\u0131na benzetebiliriz. Sayfalar\u0131m\u0131z bu iskelet yap\u0131s\u0131 \u00fczerinde in\u015fa edilir. CSS, web sayfalar\u0131ndaki tasar\u0131m k\u0131sm\u0131na kar\u015f\u0131l\u0131k gelir. \u0130\u00e7eriklerin nerede, hangi boyutta, hangi stilde g\u00f6r\u00fcnt\u00fclenece\u011fi konusunda yapaca\u011f\u0131m\u0131z ayarlamalarda kullan\u0131r\u0131z. JavaScript ise olu\u015fturmu\u015f oldu\u011fumuz yap\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131 gereken fonksiyonlar\u0131na kar\u015f\u0131l\u0131k gelir. Bir men\u00fcye t\u0131klad\u0131\u011f\u0131m\u0131z\u0131 d\u00fc\u015f\u00fcnelim, bu men\u00fcn\u00fcn a\u00e7\u0131l\u0131rken yapaca\u011f\u0131 olay(event), men\u00fc a\u00e7\u0131l\u0131rken i\u00e7erisinde mevcutsa bir animasyon veya backend ile haberle\u015fme i\u015flemlerini \u00f6rneklendirebiliriz.<\/p>\n\n\n\n
Her ne kadar frontend\u2019 in temelinde bunlar olsa da son y\u0131llarda JavaScript frameworklerinin (Angular, React ve Vue gibi) pop\u00fclerle\u015fmesi ve kullan\u0131m alan\u0131n\u0131n yayg\u0131nla\u015fmas\u0131 sayesinde frontend d\u00fcnyas\u0131n\u0131n ba\u015fka boyutlar kazand\u0131\u011f\u0131n\u0131 s\u00f6ylememiz yanl\u0131\u015f say\u0131lmaz. SPA dedi\u011fimiz yani Single Page Application(Tek Sayfal\u0131k Uygulama) kavram\u0131yla birlikte asl\u0131nda frontend bir uygulama geli\u015ftirme haline geldi diyebiliriz. Bununla beraber hayat\u0131m\u0131za giren Mobil Application kavram\u0131yla birlikte frontend k\u0131sm\u0131n\u0131 sadece web tabanl\u0131 d\u00fc\u015f\u00fcnmemek gerekir. Yani demem o ki Backend asl\u0131nda tek bir k\u0131s\u0131mdan olu\u015furken Frontend taraf\u0131 farkl\u0131 platformlar i\u00e7inde dizayn edilmekte veya kullan\u0131labilmektedir. (iOS, Android, IoT vs.)<\/p>\n\n\n\n
Responsive tasar\u0131ma da de\u011finecek olursam, ta\u015f\u0131nabilir cihazlar\u0131n hayat\u0131m\u0131zda aktif olarak rol oynamas\u0131ndan sonra \u00f6nemi daha da \u00e7ok ortaya \u00e7\u0131kan bir kavram oldu\u011fundan bahsedebiliriz. Eskiden mobil cihazlardan web sayfalar\u0131n\u0131 g\u00f6r\u00fcnt\u00fcledi\u011fimiz zaman sayfalar sanki desktop bir cihazdan g\u00f6r\u00fcnt\u00fcleniyormu\u015f gibi g\u00f6r\u00fcnt\u00fclenirdi. Fakat responsive tasar\u0131mlar\u0131nda geli\u015fmesiyle bu durum art\u0131k sayfalar\u0131 g\u00f6r\u00fcnt\u00fcledi\u011fimiz cihaz boyutlar\u0131na g\u00f6re (mobil,tablet vs.) g\u00f6r\u00fcnt\u00fclenmeye ba\u015fland\u0131. Yani sayfalar\u0131m\u0131z ona g\u00f6re geni\u015flik kazan\u0131yor, i\u00e7erikler ona uygun olarak hizalan\u0131yor gibi. Bu da beraberinde mobil cihazlardaki kullan\u0131mlar\u0131nda artmas\u0131na sebep oldu.<\/p>\n\n\n\n
\n\n\n\n
$\"\"$
G\u00fcn\u00fcm\u00fczde kullan\u0131lan Frontend teknolojilerinden baz\u0131lar\u0131<\/em>
<\/figcaption><\/figure><\/div>\n\n\n\n
\n\n\n\n
Frontend, en basit ifadeyle aray\u00fczde kullan\u0131c\u0131yla etkile\u015fime ge\u00e7en taraf olarak nitelendirebiliriz. Yani kullan\u0131c\u0131n\u0131n ziyaret etmi\u015f oldu\u011fu web sayfalar\u0131nda veya web uygulamalar\u0131nda g\u00f6r\u00fcnt\u00fcledi\u011fi, etkile\u015fime girdi\u011fi k\u0131s\u0131m. Bununla ilgili de verece\u011fim \u00f6rnekte Twitter\u2019\u0131 baz alal\u0131m. Twitter\u2019da anasayfam\u0131zda oldu\u011fumuzu d\u00fc\u015f\u00fcnelim. Takiple\u015fti\u011fimiz kullan\u0131c\u0131lar\u0131n tweetlerini g\u00f6r\u00fcnt\u00fcleyebiliyoruz, bu tweetlere be\u011feni, retweet gibi farkl\u0131 olaylar ger\u00e7ekle\u015ftirebiliyoruz, tweet atabiliyoruz, kullan\u0131c\u0131lara mesaj g\u00f6nderebiliyoruz vs.<\/p>\n\n\n\n
<\/p>\n\n\n\n
\u00d6zetlemem gerekirse kariyer yolculu\u011funun ba\u015f\u0131nda olan bir geli\u015ftirici olarak ilk yaz\u0131mda elimden geldi\u011fince Frontend Development alan\u0131yla alakal\u0131 na\u00e7izane bilgi ve tecr\u00fcbelerimden bahsetmeye \u00e7al\u0131\u015ft\u0131m. Say\u0131lan konular uzay\u0131p gidebilir ancak \u00fczerinde durmak istedi\u011fim baz\u0131 hususlar\u0131 payla\u015fmaya gayret ettim. Ba\u015far\u0131l\u0131 olabildiysem ne mutlu bana. Bana ula\u015fmak isterseniz e\u011fer Twitter<\/a>, LinkedIn<\/a>, GitHub <\/a>\u00fczerinden ula\u015fabilirsiniz.<\/p>\n\n\n\n
Son olarak yaz\u0131m\u0131 Steve Jobs\u2019\u0131n \u015fu s\u00f6z\u00fcyle bitirmek istiyorum;<\/p>\n\n\n\n
<\/p>\n\n\n\n
$\"\"$ <\/figure><\/div>\n\n\n\n
<\/p>\n\n\n\n
Te\u015fekk\u00fcr eder, sayg\u0131lar sunar\u0131m\u2026<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu yaz\u0131mda sizlere Frontend Development nedir, nas\u0131l yap\u0131l\u0131r hakk\u0131nda k\u0131sa bir yaz\u0131 payla\u015fmak istedim. Merhabalar, ilk yaz\u0131mda sizlere elimden geldi\u011fince Frontend Development ile alakal\u0131 na\u00e7izane bilgilerimden, deneyimlerimden, Frontend nedir ve nas\u0131l yap\u0131l\u0131r gibi kavramlardan bahsetmeye \u00e7al\u0131\u015faca\u011f\u0131m. Benim frontend alan\u0131na y\u00f6nelmemin temel sebebi asl\u0131nda alm\u0131\u015f oldu\u011fum lise e\u011fitimimle ba\u015fl\u0131yor desem san\u0131r\u0131m daha do\u011fru olacak. O d\u00f6nemlerde […]<\/p>\n","protected":false},"author":497,"featured_media":9671,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"tdm_status":"","tdm_grid_status":""},"categories":[24],"tags":[523,3493,5144,5142,5145,5143,424,5147,5148,5146],"_links":{"self":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/9668"}],"collection":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/users\/497"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/comments?post=9668"}],"version-history":[{"count":7,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/9668\/revisions"}],"predecessor-version":[{"id":9683,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/posts\/9668\/revisions\/9683"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media\/9671"}],"wp:attachment":[{"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/media?parent=9668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/categories?post=9668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kampuskod.com\/wp-json\/wp\/v2\/tags?post=9668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}