Web geli\u015ftirmeye ba\u015flamak g\u00f6z korkutucu mu geliyor? Bu makale, Week-1’de atman\u0131z gereken ilk ad\u0131mlar\u0131, temel kavramlar\u0131 ve modern web d\u00fcnyas\u0131na giri\u015finizi kolayla\u015ft\u0131racak bilgileri sunuyor. S\u0131f\u0131rdan ba\u015flayarak ilk web sayfan\u0131z\u0131 olu\u015fturmaya haz\u0131r olun ve bu heyecan verici yolculu\u011fa bizimle ad\u0131m at\u0131n. Bu rehber, karma\u015f\u0131k teorilerden ziyade pratik uygulamalara odaklanarak, \u00f6\u011frenme s\u00fcrecinizi keyifli ve verimli hale getirmeyi hedefliyor.<\/p>\n
Dijital d\u00f6n\u00fc\u015f\u00fcm\u00fcn h\u0131z kesmeden devam etti\u011fi g\u00fcn\u00fcm\u00fczde, web geli\u015ftirme becerileri sadece bir kariyer yolu olmaktan \u00f6te, dijital okuryazarl\u0131\u011f\u0131n temel bir par\u00e7as\u0131 haline gelmi\u015ftir. \u0130nternet, i\u015f d\u00fcnyas\u0131ndan e\u011flenceye, e\u011fitimden sosyal etkile\u015fime kadar hayat\u0131m\u0131z\u0131n her alan\u0131na n\u00fcfuz etmi\u015f durumda. Dolay\u0131s\u0131yla, web sayfalar\u0131, uygulamalar ve dijital deneyimler olu\u015fturma yetene\u011fi, g\u00fcn\u00fcm\u00fcz\u00fcn en de\u011ferli yetkinliklerinden biri olarak kabul ediliyor.<\/p>\n
Peki, web geli\u015ftirme yolculu\u011funuza neden tam da \u015fimdi ba\u015flamal\u0131s\u0131n\u0131z? \u00d6ncelikle, bu alan s\u00fcrekli geli\u015fen ve yenilik\u00e7i bir yap\u0131ya sahip. Her ge\u00e7en g\u00fcn yeni teknolojiler, Framework’ler (yaz\u0131l\u0131m \u00e7er\u00e7eveleri) ve ara\u00e7lar ortaya \u00e7\u0131k\u0131yor. Bu dinamik ortam, s\u00fcrekli \u00f6\u011frenmeyi seven ve kendini geli\u015ftirmeye a\u00e7\u0131k bireyler i\u00e7in e\u015fsiz f\u0131rsatlar sunar. \u00dcstelik, web geli\u015ftiricilere olan talep d\u00fcnya genelinde ve T\u00fcrkiye’de de h\u0131zla art\u0131yor. Hem b\u00fcy\u00fck kurumsal \u015firketlerde hem de startup (giri\u015fim) ekosisteminde yetenekli geli\u015ftiricilere ihtiya\u00e7 duyuluyor. Bu durum, istikrarl\u0131 bir kariyer ve cazip kazan\u00e7 potansiyeli anlam\u0131na geliyor.<\/p>\n
Web geli\u015ftirme sadece profesyonel bir alan de\u011fil, ayn\u0131 zamanda yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 ifade edebilece\u011finiz bir platformdur. Kendi fikirlerinizi hayata ge\u00e7irebilir, ki\u015fisel projelerinizi tasarlayabilir ve d\u00fcnyaya kendi dijital izlerinizi b\u0131rakabilirsiniz. Bir web sayfas\u0131n\u0131 s\u0131f\u0131rdan olu\u015fturup, onun taray\u0131c\u0131da canland\u0131\u011f\u0131n\u0131 g\u00f6rmek, ger\u00e7ekten tatmin edici bir deneyimdir. Ayr\u0131ca, web geli\u015ftirme becerileriyle freelance (serbest \u00e7al\u0131\u015fma) olarak d\u00fcnyan\u0131n her yerinden projeler alabilir, kendi \u00e7al\u0131\u015fma saatlerinizi belirleyebilir ve co\u011frafi s\u0131n\u0131rlamalardan ba\u011f\u0131ms\u0131z bir ya\u015fam kurabilirsiniz. \u00d6zellikle T\u00fcrkiye’de, uzaktan \u00e7al\u0131\u015fma imkanlar\u0131n\u0131n artmas\u0131yla birlikte, web geli\u015ftiriciler i\u00e7in esneklik ve ba\u011f\u0131ms\u0131zl\u0131k her zamankinden daha eri\u015filebilir hale gelmi\u015ftir. Bir\u00e7ok ki\u015fi bu alana girmek istese de, ba\u015flang\u0131\u00e7 noktas\u0131n\u0131 bulmakta zorlanabiliyor. Bu makale, tam da bu noktada, “Week-1” ile size sa\u011flam bir temel atmay\u0131 ve ilk ad\u0131mlar\u0131n\u0131z\u0131 g\u00fcvenle atman\u0131z\u0131 sa\u011flamay\u0131 ama\u00e7l\u0131yor. Bu nedenle, web geli\u015ftirme \u00f6\u011frenmeye ba\u015flamak i\u00e7in hi\u00e7bir zaman ge\u00e7 de\u011fildir; asl\u0131nda, \u015fu an en do\u011fru zamand\u0131r.<\/p>\n
Web geli\u015ftirme d\u00fcnyas\u0131na ad\u0131m att\u0131\u011f\u0131n\u0131zda kar\u015f\u0131la\u015faca\u011f\u0131n\u0131z ilk ve en temel \u00fc\u00e7 teknoloji HTML, CSS ve JavaScript’tir. Bu \u00fc\u00e7l\u00fc, modern web’in yap\u0131 ta\u015flar\u0131n\u0131 olu\u015fturur ve bir web sayfas\u0131n\u0131n hem g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc hem de etkile\u015fimini belirler. Onlar\u0131 bir evin in\u015fas\u0131na benzetebiliriz: HTML evin iskeletini ve temel odalar\u0131n\u0131 olu\u015ftururken, CSS bu evin boyas\u0131n\u0131, dekorasyonunu ve mimari tarz\u0131n\u0131 belirler. JavaScript ise evin elektrik tesisat\u0131n\u0131, otomasyon sistemlerini ve hareketli par\u00e7alar\u0131n\u0131 kontrol eder, yani evin interaktif (etkile\u015fimli) olmas\u0131n\u0131 sa\u011flar. Bu benzetme, her birinin web sayfas\u0131ndaki rol\u00fcn\u00fc daha iyi anlaman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n
Bu \u00fc\u00e7 teknoloji aras\u0131ndaki ili\u015fki, birbiriyle ayr\u0131lmaz bir b\u00fct\u00fcnd\u00fcr. HTML olmadan bir web sayfas\u0131 var olamaz; CSS olmadan sayfa estetikten yoksun, s\u0131radan g\u00f6r\u00fcn\u00fcr; JavaScript olmadan ise sayfa dura\u011fan kal\u0131r ve kullan\u0131c\u0131yla etkile\u015fime giremez. Dolay\u0131s\u0131yla, etkili ve modern bir web sitesi geli\u015ftirmek i\u00e7in bu \u00fc\u00e7\u00fcn\u00fcn temel prensiplerini anlamak ve bunlar\u0131 bir arada kullanmay\u0131 \u00f6\u011frenmek kritik \u00f6neme sahiptir. “Week-1” odak noktam\u0131zda, bu temel ta\u015flar\u0131n her birine ayr\u0131 ayr\u0131 de\u011finecek ve ilk ad\u0131mlar\u0131n\u0131z\u0131 atman\u0131za yard\u0131mc\u0131 olaca\u011f\u0131z. Bu sayede, karma\u015f\u0131k web projelerine giri\u015f yapmadan \u00f6nce sa\u011flam bir temel olu\u015fturacaks\u0131n\u0131z.<\/p>\n
HTML, “HyperText Markup Language” (K\u00f6pr\u00fc Metni \u0130\u015faretleme Dili) k\u0131saltmas\u0131d\u0131r ve web sayfalar\u0131n\u0131n yap\u0131s\u0131n\u0131 olu\u015fturmak i\u00e7in kullan\u0131lan standart i\u015faretleme dilidir. Bir web sayfas\u0131ndaki t\u00fcm i\u00e7erik, ba\u015fl\u0131klar, paragraflar, resimler, ba\u011flant\u0131lar, listeler ve tablolar gibi \u00f6\u011feler HTML etiketleri (tag) arac\u0131l\u0131\u011f\u0131yla tan\u0131mlan\u0131r. HTML, bir programlama dili de\u011fildir; daha ziyade, web taray\u0131c\u0131lar\u0131na i\u00e7eri\u011fin nas\u0131l d\u00fczenlenece\u011fini ve g\u00f6sterilece\u011fini anlatan bir dizi talimat setidir. Bu etiketler, taray\u0131c\u0131lar\u0131n metni, medyay\u0131 ve di\u011fer \u00f6\u011feleri do\u011fru \u015fekilde yorumlayarak kullan\u0131c\u0131ya g\u00f6rsel bir sayfa sunmas\u0131n\u0131 sa\u011flar.<\/p>\n
\u0130lk web sayfan\u0131z\u0131 olu\u015fturmak olduk\u00e7a basittir. \u0130htiyac\u0131n\u0131z olan tek \u015fey bir metin d\u00fczenleyici (Notepad, VS Code, Sublime Text gibi) ve bir web taray\u0131c\u0131s\u0131d\u0131r (Chrome, Firefox gibi). \u0130\u015fte temel bir HTML sayfas\u0131n\u0131n yap\u0131s\u0131:<\/p>\n
Yukar\u0131daki kodu bir metin d\u00fczenleyiciye yap\u0131\u015ft\u0131r\u0131n ve dosyay\u0131 "index.html" olarak kaydedin. Ard\u0131ndan, bu dosyay\u0131 web taray\u0131c\u0131n\u0131zda a\u00e7t\u0131\u011f\u0131n\u0131zda, ilk web sayfan\u0131z\u0131 g\u00f6rm\u00fc\u015f olacaks\u0131n\u0131z. \u015eimdi bu yap\u0131n\u0131n temel \u00f6\u011felerini inceleyelim:<\/p>\n
<!DOCTYPE html><\/code>: Bu, belgenin HTML5 standard\u0131nda oldu\u011funu belirtir. Her HTML dosyas\u0131n\u0131n ba\u015f\u0131nda yer almal\u0131d\u0131r.<\/li>\n<html lang=\"tr\"><\/code>: T\u00fcm HTML i\u00e7eri\u011fini kapsayan k\u00f6k etikettir. lang=\"tr\"<\/code> \u00f6zelli\u011fi, sayfan\u0131n dilinin T\u00fcrk\u00e7e oldu\u011funu belirtir, bu da arama motorlar\u0131 ve ekran okuyucular i\u00e7in \u00f6nemlidir.<\/li>\n<head><\/code>: Sayfa hakk\u0131nda meta bilgileri (sayfay\u0131 tan\u0131mlayan bilgiler) i\u00e7erir. Taray\u0131c\u0131da g\u00f6r\u00fcnmez, ancak sayfan\u0131n nas\u0131l i\u015flenece\u011fini, arama motorlar\u0131n\u0131n nas\u0131l indeksleyece\u011fini belirler.<\/li>\n<meta charset=\"UTF-8\"><\/code>: Karakter kodlamas\u0131n\u0131 belirtir. T\u00fcrk\u00e7e karakterler de dahil olmak \u00fczere t\u00fcm karakterlerin do\u011fru g\u00f6r\u00fcnt\u00fclenmesi i\u00e7in \u00f6nemlidir.<\/li>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><\/code>: Mobil cihazlarda sayfan\u0131n do\u011fru \u00f6l\u00e7eklenmesini sa\u011flar.<\/li>\n<title>\u0130lk Web Sayfam<\/title><\/code>: Taray\u0131c\u0131 sekmesinde veya pencere ba\u015fl\u0131\u011f\u0131nda g\u00f6r\u00fcnen metni belirler.<\/li>\n<body><\/code>: Web sayfas\u0131n\u0131n as\u0131l g\u00f6r\u00fcnen i\u00e7eri\u011fini bar\u0131nd\u0131r\u0131r. Ba\u015fl\u0131klar, paragraflar, resimler, ba\u011flant\u0131lar gibi her \u015fey bu etiketin i\u00e7ine yaz\u0131l\u0131r.<\/li>\n<h1><\/code>: En \u00f6nemli ba\u015fl\u0131k etiketidir (Heading 1). Sayfada sadece bir tane <h1><\/code> kullan\u0131lmas\u0131 \u00f6nerilir.<\/li>\n<p><\/code>: Paragraf metni i\u00e7in kullan\u0131l\u0131r.<\/li>\n<a><\/code>: K\u00f6pr\u00fc (link) olu\u015fturmak i\u00e7in kullan\u0131l\u0131r. href<\/code> \u00f6zelli\u011fi, ba\u011flant\u0131n\u0131n gidece\u011fi URL’yi belirtir.<\/li>\n<img><\/code>: Resim eklemek i\u00e7in kullan\u0131l\u0131r. src<\/code> \u00f6zelli\u011fi resmin kayna\u011f\u0131n\u0131, alt<\/code> \u00f6zelli\u011fi ise resim y\u00fcklenemedi\u011finde veya ekran okuyucular i\u00e7in alternatif metni belirtir.<\/li>\n<ul><\/code> ve <li><\/code>: S\u0131ras\u0131z liste (Unordered List) ve liste \u00f6\u011feleri (List Item) olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/li>\n<\/ul>\nHTML etiketleri genellikle bir a\u00e7\u0131l\u0131\u015f etiketi (<etiket><\/code>) ve bir kapan\u0131\u015f etiketi (<\/etiket><\/code>) ile gelir ve i\u00e7erik bu ikisi aras\u0131na yerle\u015ftirilir. Baz\u0131 etiketler, \u00f6rne\u011fin <img><\/code> veya <meta><\/code>, tek ba\u015f\u0131na kullan\u0131l\u0131r ve kapan\u0131\u015f etiketine ihtiya\u00e7 duymaz. Bu temel bilgilerle, Week-1 sonunda basit ama anlaml\u0131 HTML sayfalar\u0131 olu\u015fturabilecek ve web geli\u015ftirmenin ilk ad\u0131m\u0131n\u0131 atm\u0131\u015f olacaks\u0131n\u0131z.<\/p>\nCSS ile Web Sayfan\u0131za Hayat Vermek: Temel Se\u00e7iciler ve \u00d6zellikler<\/h3>\n
HTML bir web sayfas\u0131n\u0131n iskeletini olu\u015ftururken, CSS (Cascading Style Sheets – Basamakl\u0131 Stil Sayfalar\u0131) bu iskelete g\u00f6rsel bir estetik kazand\u0131r\u0131r. Renkler, yaz\u0131 tipleri, boyutlar, bo\u015fluklar, d\u00fczen ve animasyonlar gibi t\u00fcm g\u00f6rsel \u00f6\u011feler CSS arac\u0131l\u0131\u011f\u0131yla tan\u0131mlan\u0131r. CSS, web sayfalar\u0131n\u0131z\u0131n profesyonel ve \u00e7ekici g\u00f6r\u00fcnmesini sa\u011flar, ayn\u0131 zamanda i\u00e7eri\u011fin sunumunu yap\u0131dan ay\u0131rarak daha d\u00fczenli ve y\u00f6netilebilir bir kodlama s\u00fcreci sunar. Bu ayr\u0131m, bir web sitesinin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de\u011fi\u015ftirmek istedi\u011finizde, HTML yap\u0131s\u0131n\u0131 bozmadan kolayca stil g\u00fcncellemeleri yapabilmenizi sa\u011flar.<\/p>\n
CSS kodunu HTML belgesine eklemenin \u00fc\u00e7 temel yolu vard\u0131r: sat\u0131r i\u00e7i (inline), dahili (internal) ve harici (external). En iyi uygulama ve en \u00e7ok tercih edilen y\u00f6ntem harici stil sayfalar\u0131 kullanmakt\u0131r, \u00e7\u00fcnk\u00fc bu y\u00f6ntem kodunuzu daha mod\u00fcler hale getirir ve birden fazla HTML sayfas\u0131nda ayn\u0131 stil dosyas\u0131n\u0131 kullanman\u0131za olanak tan\u0131r. Harici bir CSS dosyas\u0131 olu\u015fturmak i\u00e7in, stil kurallar\u0131n\u0131z\u0131 i\u00e7eren bir dosya (genellikle style.css<\/code> ad\u0131nda) olu\u015fturur ve bunu HTML dosyan\u0131z\u0131n <head><\/code> b\u00f6l\u00fcm\u00fcne bir <link><\/code> etiketi ile ba\u011flars\u0131n\u0131z. \u0130\u015fte bir \u00f6rnek:<\/p>\n<\/div>\n\u015eimdi, style.css<\/code> dosyan\u0131za ekleyebilece\u011finiz baz\u0131 temel CSS se\u00e7icileri ve \u00f6zelliklerine g\u00f6z atal\u0131m. Se\u00e7iciler, HTML belgesinde hangi \u00f6\u011felerin stilize edilece\u011fini belirlerken, \u00f6zellikler bu \u00f6\u011felere uygulanacak stilin t\u00fcr\u00fcn\u00fc tan\u0131mlar.<\/p>\nTemel CSS Se\u00e7icileri:<\/h4>\n\n- Element Se\u00e7ici:<\/strong> Belirli bir HTML etiketinin t\u00fcm \u00f6rneklerini se\u00e7er. \u00d6rne\u011fin, t\u00fcm paragraflar\u0131 (
p<\/code>) veya t\u00fcm ba\u015fl\u0131klar\u0131 (h1<\/code>) stilize etmek i\u00e7in kullan\u0131l\u0131r.\n\n\nh1 {\n color: darkblue;\n}\np {\n font-size: 16px;\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n- Class Se\u00e7ici:<\/strong> Belirli bir
class<\/code> \u00f6zelli\u011fine sahip t\u00fcm \u00f6\u011feleri se\u00e7er. Bir HTML \u00f6\u011fesine class=\"ozel-metin\"<\/code> gibi bir s\u0131n\u0131f atayarak, bu s\u0131n\u0131fa \u00f6zel stil uygulayabilirsiniz. S\u0131n\u0131f se\u00e7iciler .<\/code> (nokta) ile ba\u015flar.\n\n\n.ozel-metin {\n background-color: lightgray;\n padding: 10px;\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n- ID Se\u00e7ici:<\/strong> Belirli bir
id<\/code> \u00f6zelli\u011fine sahip tek bir \u00f6\u011feyi se\u00e7er. id<\/code>‘ler bir sayfada benzersiz olmal\u0131d\u0131r. ID se\u00e7iciler #<\/code> (diyez) ile ba\u015flar.\n\n\n#ana-baslik {\n text-align: center;\n border-bottom: 2px solid gray;\n}\n <\/code><\/pre>\n<\/p><\/div>\n<\/li>\n<\/ul>\nYayg\u0131n CSS \u00d6zellikleri:<\/h4>\n\ncolor<\/code>: Metin rengini ayarlar.<\/li>\nbackground-color<\/code>: \u00d6\u011fenin arka plan rengini ayarlar.<\/li>\nfont-family<\/code>: Yaz\u0131 tipini belirler (\u00f6rne\u011fin, Arial, sans-serif<\/code>).<\/li>\nfont-size<\/code>: Metin boyutunu ayarlar (\u00f6rne\u011fin, 18px<\/code>, 1.2em<\/code>).<\/li>\ntext-align<\/code>: Metnin hizalamas\u0131n\u0131 ayarlar (\u00f6rne\u011fin, left<\/code>, center<\/code>, right<\/code>).<\/li>\nmargin<\/code>: \u00d6\u011fenin d\u0131\u015f bo\u015flu\u011funu ayarlar (di\u011fer \u00f6\u011felerle aras\u0131ndaki bo\u015fluk).<\/li>\npadding<\/code>: \u00d6\u011fenin i\u00e7 bo\u015flu\u011funu ayarlar (i\u00e7eri\u011fi ile kenarl\u0131\u011f\u0131 aras\u0131ndaki bo\u015fluk).<\/li>\nborder<\/code>: \u00d6\u011fenin kenarl\u0131\u011f\u0131n\u0131 belirler (kal\u0131nl\u0131k, stil, renk).<\/li>\nwidth<\/code> \/ height<\/code>: \u00d6\u011fenin geni\u015fli\u011fini ve y\u00fcksekli\u011fini ayarlar.<\/li>\n<\/ul>\n\u00d6nceki HTML \u00f6rne\u011fimize stil ekleyelim. index.html<\/code> dosyan\u0131z\u0131n <head><\/code> b\u00f6l\u00fcm\u00fcne <link rel=\"stylesheet\" href=\"style.css\"><\/code> sat\u0131r\u0131n\u0131 ekleyin. Ard\u0131ndan, style.css<\/code> ad\u0131nda yeni bir dosya olu\u015fturun ve i\u00e7ine a\u015fa\u011f\u0131daki kodlar\u0131 yaz\u0131n:<\/p>\n\n\n\/* style.css *\/\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f4f4f4; \/* A\u00e7\u0131k gri arka plan *\/\n color: #333; \/* Koyu gri metin rengi *\/\n}\n\nh1 {\n color: #0056b3; \/* Mavi ba\u015fl\u0131k *\/\n text-align: center;\n margin-bottom: 30px;\n}\n\np {\n line-height: 1.6;\n margin-bottom: 15px;\n}\n\na {\n color: #007bff; \/* Mavi ba\u011flant\u0131 *\/\n text-decoration: none; \/* Alt \u00e7izgiyi kald\u0131r *\/\n}\n\na:hover {\n text-decoration: underline; \/* \u00dczerine gelince alt \u00e7izgi ekle *\/\n}\n\nimg {\n max-width: 100%;\n height: auto;\n display: block; \/* Resmi blok seviyesinde g\u00f6ster *\/\n margin: 20px auto; \/* \u00dcstte ve altta bo\u015fluk, ortala *\/\n border: 1px solid #ddd;\n border-radius: 5px;\n}\n\nul {\n list-style-type: square; \/* Kare madde i\u015fareti *\/\n margin-left: 25px;\n}\n\nli {\n margin-bottom: 8px;\n}\n <\/code><\/pre>\n<\/p><\/div>\nBu CSS kodlar\u0131, sayfan\u0131z\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc iyile\u015ftirecek ve daha profesyonel bir hava katacakt\u0131r. HTML ve CSS’in bu temel prensiplerini anlamak, Week-1 \u00f6\u011freniminizin en kritik par\u00e7as\u0131d\u0131r. Bu sayede, web sayfalar\u0131n\u0131z\u0131n sadece bilgi i\u00e7ermekle kalmay\u0131p, ayn\u0131 zamanda g\u00f6rsel olarak da \u00e7ekici olmas\u0131n\u0131 sa\u011flayabileceksiniz.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryosu: Basit Bir Ki\u015fisel Portfolyo Sayfas\u0131 Olu\u015fturma<\/h2>\n
\u015eimdiye kadar \u00f6\u011frendi\u011fimiz HTML ve CSS temel bilgilerini ger\u00e7ek bir senaryo \u00fczerinde uygulayarak peki\u015ftirelim. Hayal edin ki, yeni mezun bir yaz\u0131l\u0131mc\u0131s\u0131n\u0131z veya web geli\u015ftirme alan\u0131na ilgi duyan bir profesyonelsiniz. \u0130\u015f ba\u015fvurular\u0131n\u0131zda veya networking (a\u011f olu\u015fturma) etkinliklerinde kendinizi tan\u0131tmak i\u00e7in basit ama etkili bir ki\u015fisel portfolyo (\u00f6zge\u00e7mi\u015f) sayfas\u0131na ihtiyac\u0131n\u0131z var. Bu sayfa, sizin kim oldu\u011funuzu, ne t\u00fcr projeler yapt\u0131\u011f\u0131n\u0131z\u0131 ve ileti\u015fim bilgilerinizi potansiyel i\u015fverenlere veya i\u015f ortaklar\u0131na sunacak. “Week-1” hedeflerimiz do\u011frultusunda, bu senaryo \u00fczerinden ad\u0131m ad\u0131m ilerleyerek hem HTML yap\u0131s\u0131n\u0131 kuracak hem de CSS ile bu sayfay\u0131 g\u00f6rsel olarak \u015fekillendirece\u011fiz.<\/p>\n
Bu proje, sadece teorik bilgileri pratik bir uygulamaya d\u00f6n\u00fc\u015ft\u00fcrmekle kalmayacak, ayn\u0131 zamanda web geli\u015ftirmenin temel prensiplerini peki\u015ftirmenize yard\u0131mc\u0131 olacakt\u0131r. Bir portfolyo sayfas\u0131, ki\u015fisel markan\u0131z\u0131 olu\u015fturman\u0131n ve dijital d\u00fcnyada var olman\u0131n ilk ad\u0131mlar\u0131ndan biridir. Ayr\u0131ca, bu t\u00fcr bir proje, gelecekte daha karma\u015f\u0131k web uygulamalar\u0131 geli\u015ftirmek i\u00e7in sa\u011flam bir temel olu\u015fturman\u0131za olanak tan\u0131r. T\u00fcrkiye’deki i\u015f piyasas\u0131nda, geli\u015ftiricilerin kendilerini dijital ortamda iyi ifade etmeleri ve \u00f6rnek \u00e7al\u0131\u015fmalar\u0131n\u0131 sergilemeleri b\u00fcy\u00fck \u00f6nem ta\u015f\u0131maktad\u0131r. Bu y\u00fczden, basit bir portfolyo sayfas\u0131 bile kariyerinizde \u00f6nemli bir fark yaratabilir. \u015eimdi, bu ki\u015fisel portfolyo sayfas\u0131n\u0131 nas\u0131l olu\u015fturaca\u011f\u0131m\u0131za dair ad\u0131mlara ge\u00e7elim.<\/p>\n
Ad\u0131m 1: Portfolyonun HTML \u0130skeletini Kurma<\/h3>\n
Portfolyo sayfam\u0131z i\u00e7in \u00f6ncelikle HTML iskeletini olu\u015fturaca\u011f\u0131z. Bu iskelet, sayfan\u0131n ana b\u00f6l\u00fcmlerini (ba\u015fl\u0131k, hakk\u0131mda, projeler, ileti\u015fim) tan\u0131mlayacak ve i\u00e7eri\u011fin semantik (anlamsal) yap\u0131s\u0131n\u0131 belirleyecektir. Semantik HTML etiketleri kullanmak, sayfan\u0131n hem arama motorlar\u0131 taraf\u0131ndan daha iyi anla\u015f\u0131lmas\u0131na hem de eri\u015filebilirlik (accessibility) a\u00e7\u0131s\u0131ndan daha iyi olmas\u0131na yard\u0131mc\u0131 olur. index.html<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki kodlar\u0131 yap\u0131\u015ft\u0131r\u0131n:<\/p>\n<\/div>\nBu HTML yap\u0131s\u0131nda, <header><\/code> (ba\u015fl\u0131k), <main><\/code> (ana i\u00e7erik), <section><\/code> (b\u00f6l\u00fcm) ve <footer><\/code> (alt bilgi) gibi HTML5 semantik etiketlerini kulland\u0131k. Bu etiketler, i\u00e7eri\u011fin amac\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtir ve sayfan\u0131n okunabilirli\u011fini art\u0131r\u0131r. Ayr\u0131ca, gezinme i\u00e7in bir <nav><\/code> etiketi ve liste \u00f6\u011feleri i\u00e7in <ul><\/code> ve <li><\/code> kulland\u0131k. <img><\/code> etiketine profil-resmi<\/code> s\u0131n\u0131f\u0131 ekleyerek, CSS ile \u00f6zel stil uygulamak i\u00e7in bir hedef belirledik. Proje kutular\u0131 i\u00e7in de proje-kutusu<\/code> s\u0131n\u0131f\u0131n\u0131 kulland\u0131k. Bu \u015fekilde, HTML i\u00e7eri\u011fimizi d\u00fczenli ve anlaml\u0131 bir \u015fekilde yap\u0131land\u0131rd\u0131k.<\/p>\nAd\u0131m 2: CSS ile Portfolyo Sayfas\u0131n\u0131 \u015eekillendirme<\/h3>\n
HTML iskeletimizi olu\u015fturduktan sonra, s\u0131ra geldi style.css<\/code> dosyam\u0131z\u0131 d\u00fczenleyerek portfolyo sayfam\u0131za g\u00f6rsel bir kimlik kazand\u0131rmaya. Amac\u0131m\u0131z, sayfan\u0131n temiz, modern ve kullan\u0131c\u0131 dostu g\u00f6r\u00fcnmesini sa\u011flamak. \u00d6ncelikle genel sayfa stillerini ayarlayacak, ard\u0131ndan her bir b\u00f6l\u00fcme \u00f6zel dokunu\u015flar yapaca\u011f\u0131z. style.css<\/code> dosyan\u0131z\u0131 a\u00e7\u0131n ve a\u015fa\u011f\u0131daki kodlar\u0131 ekleyin:<\/p>\n\n\n\/* Genel Stil Ayarlar\u0131 *\/\nbody {\n font-family: 'Arial', sans-serif;\n line-height: 1.6;\n margin: 0;\n padding: 0;\n background-color: #f8f8f8;\n color: #333;\n}\n\n.container { \/* Sayfa i\u00e7eri\u011fini ortalamak ve geni\u015fli\u011fi s\u0131n\u0131rlamak i\u00e7in *\/\n max-width: 960px;\n margin: auto;\n overflow: hidden;\n padding: 0 20px;\n}\n\n\/* Header Stilleri *\/\nheader {\n background-color: #333;\n color: #fff;\n padding: 1rem 0;\n text-align: center;\n}\n\nheader h1 {\n margin: 0;\n font-size: 2.5rem;\n}\n\nheader p {\n font-size: 1.1rem;\n margin-top: 5px;\n}\n\nheader nav ul {\n padding: 0;\n list-style: none;\n}\n\nheader nav ul li {\n display: inline;\n margin-right: 20px;\n}\n\nheader nav a {\n color: #fff;\n text-decoration: none;\n font-weight: bold;\n}\n\nheader nav a:hover {\n color: #ffc107; \/* Sar\u0131ms\u0131 renk *\/\n}\n\n\/* B\u00f6l\u00fcm Stilleri *\/\nsection {\n padding: 40px 0;\n border-bottom: 1px solid #eee;\n background-color: #fff;\n margin-bottom: 20px;\n}\n\nsection:last-of-type {\n border-bottom: none;\n margin-bottom: 0;\n}\n\nsection h2 {\n text-align: center;\n color: #007bff;\n margin-bottom: 30px;\n font-size: 2rem;\n}\n\n\/* Hakk\u0131mda B\u00f6l\u00fcm\u00fc *\/\n.profil-resmi {\n display: block;\n margin: 0 auto 20px auto;\n border-radius: 50%; \/* Yuvarlak resim *\/\n width: 150px;\n height: 150px;\n object-fit: cover; \/* Resmin oran\u0131n\u0131 korurken kutuyu doldur *\/\n border: 3px solid #007bff;\n}\n\n\/* Projeler B\u00f6l\u00fcm\u00fc *\/\n.proje-kutusu {\n background-color: #f9f9f9;\n border: 1px solid #ddd;\n padding: 20px;\n margin-bottom: 20px;\n border-radius: 8px;\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.proje-kutusu h3 {\n color: #333;\n margin-top: 0;\n}\n\n.proje-kutusu a {\n display: inline-block;\n background-color: #007bff;\n color: #fff;\n padding: 8px 15px;\n text-decoration: none;\n border-radius: 5px;\n margin-top: 10px;\n}\n\n.proje-kutusu a:hover {\n background-color: #0056b3;\n}\n\n\/* \u0130leti\u015fim B\u00f6l\u00fcm\u00fc *\/\n#iletisim ul {\n list-style: none;\n padding: 0;\n text-align: center;\n}\n\n#iletisim ul li {\n margin-bottom: 10px;\n}\n\n#iletisim a {\n color: #007bff;\n text-decoration: none;\n}\n\n#iletisim a:hover {\n text-decoration: underline;\n}\n\n\/* Footer Stilleri *\/\nfooter {\n background-color: #333;\n color: #fff;\n text-align: center;\n padding: 1rem 0;\n margin-top: 30px;\n}\n <\/code><\/pre>\n<\/p><\/div>\nBu CSS kodu ile:<\/p>\n
\nbody<\/code> i\u00e7in genel yaz\u0131 tipi, arka plan rengi ve metin rengi ayarland\u0131.<\/li>\nheader<\/code> i\u00e7in koyu arka plan, beyaz metin ve merkez hizalama uyguland\u0131. Gezinme ba\u011flant\u0131lar\u0131n\u0131n \u00fczerine gelindi\u011finde renk de\u011fi\u015ftirmesi sa\u011fland\u0131.<\/li>\n- Her
section<\/code> (b\u00f6l\u00fcm) i\u00e7in beyaz arka plan, i\u00e7 bo\u015fluk ve alt kenarl\u0131k eklendi.<\/li>\n- Profil resmi i\u00e7in
.profil-resmi<\/code> s\u0131n\u0131f\u0131 kullan\u0131larak yuvarlak bir \u015fekil, ortalama ve kenarl\u0131k verildi.<\/li>\n- Proje kutular\u0131 i\u00e7in
.proje-kutusu<\/code> s\u0131n\u0131f\u0131 ile hafif bir g\u00f6lge, kenarl\u0131k, i\u00e7 bo\u015fluk ve yuvarlak k\u00f6\u015feler eklendi.<\/li>\n- \u0130leti\u015fim b\u00f6l\u00fcm\u00fcndeki liste \u00f6\u011feleri i\u00e7in madde i\u015faretleri kald\u0131r\u0131ld\u0131 ve metin ortaland\u0131.<\/li>\n
footer<\/code> i\u00e7in header<\/code> ile benzer bir stil uyguland\u0131.<\/li>\n<\/ul>\nBu CSS kodlar\u0131n\u0131 style.css<\/code> dosyan\u0131za kaydettikten sonra index.html<\/code> dosyan\u0131z\u0131 taray\u0131c\u0131n\u0131zda a\u00e7t\u0131\u011f\u0131n\u0131zda, basit ama profesyonel g\u00f6r\u00fcn\u00fcml\u00fc ki\u015fisel portfolyo sayfan\u0131z\u0131 g\u00f6receksiniz. Bu, “Week-1” sonunda HTML ve CSS ile neler yapabilece\u011finize dair somut bir \u00f6rnektir ve sizi daha ileri seviyelere ta\u015f\u0131mak i\u00e7in harika bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\nWeek-1 Sonras\u0131 \u0130leri Ad\u0131mlar ve \u00d6\u011frenme \u0130pu\u00e7lar\u0131<\/h2>\n
Web geli\u015ftirme yolculu\u011funuzun “Week-1″ini ba\u015far\u0131yla tamamlad\u0131n\u0131z ve HTML ile CSS’in temel prensiplerini kavrad\u0131n\u0131z. Art\u0131k statik web sayfalar\u0131 olu\u015fturabiliyor ve onlara g\u00f6rsel bir estetik kazand\u0131rabiliyorsunuz. Ancak bu yolculuk daha yeni ba\u015fl\u0131yor ve \u00f6n\u00fcn\u00fczde ke\u015ffedilecek bir\u00e7ok heyecan verici konu var. Bu b\u00f6l\u00fcmde, Week-1 sonras\u0131 atabilece\u011finiz ileri ad\u0131mlara ve \u00f6\u011frenme s\u00fcrecinizi daha verimli hale getirecek ipu\u00e7lar\u0131na de\u011finece\u011fiz. Unutmay\u0131n, s\u00fcrekli \u00f6\u011frenme ve pratik yapma, bu alanda ba\u015far\u0131l\u0131 olman\u0131n anahtar\u0131d\u0131r.<\/p>\n
\u00d6ncelikle, \u00f6\u011frendi\u011finiz temel bilgileri peki\u015ftirmek i\u00e7in k\u00fc\u00e7\u00fck projeler yapmaya devam edin. \u00d6rne\u011fin, farkl\u0131 temalarda (yemek tarifi sitesi, yerel bir i\u015fletmenin tan\u0131t\u0131m sayfas\u0131, basit bir foto\u011fraf galerisi) yeni web sayfalar\u0131 olu\u015fturmaya \u00e7al\u0131\u015f\u0131n. Her yeni projede, daha \u00f6nce kullanmad\u0131\u011f\u0131n\u0131z HTML etiketlerini veya CSS \u00f6zelliklerini denemekten \u00e7ekinmeyin. Bu pratikler, bilginizi sa\u011flamla\u015ft\u0131racak ve kar\u015f\u0131la\u015fabilece\u011finiz farkl\u0131 senaryolara kar\u015f\u0131 sizi haz\u0131rlayacakt\u0131r. Ayr\u0131ca, projelerinizi geli\u015ftirirken taray\u0131c\u0131 geli\u015ftirici ara\u00e7lar\u0131n\u0131 (Browser Developer Tools) kullanmay\u0131 \u00f6\u011frenmek, hata ay\u0131klama (debugging) ve stil ayarlamalar\u0131 yapma becerilerinizi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde geli\u015ftirecektir. Modern taray\u0131c\u0131lar\u0131n sundu\u011fu bu ara\u00e7lar, web sayfan\u0131z\u0131n HTML yap\u0131s\u0131n\u0131, CSS stillerini ve hatta JavaScript kodunu an\u0131nda incelemenize ve de\u011fi\u015ftirmenize olanak tan\u0131r.<\/p>\n
Bir sonraki \u00f6nemli ad\u0131m, JavaScript \u00f6\u011frenmeye ba\u015flamakt\u0131r. JavaScript, web sayfalar\u0131n\u0131za interaktif \u00f6zellikler eklemenizi sa\u011flayan bir programlama dilidir. Kullan\u0131c\u0131 giri\u015flerini i\u015flemek, dinamik i\u00e7erik y\u00fcklemek, animasyonlar olu\u015fturmak ve hatta sunucu taraf\u0131 (back-end) geli\u015ftirme yapmak i\u00e7in JavaScript kullan\u0131l\u0131r. Week-1’de HTML ve CSS ile iskeletini ve g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc olu\u015fturdu\u011funuz bir web sitesine, JavaScript ile adeta can verebilirsiniz. Bu, web geli\u015ftirme piramidinin \u00fc\u00e7\u00fcnc\u00fc ve son temel katman\u0131d\u0131r. JavaScript \u00f6\u011frenirken, DOM (Document Object Model – Belge Nesne Modeli) manip\u00fclasyonu, olay dinleyicileri (event listeners) ve temel programlama mant\u0131\u011f\u0131 gibi konulara odaklanman\u0131z faydal\u0131 olacakt\u0131r.<\/p>\n
Ayr\u0131ca, versiyon kontrol sistemlerini, \u00f6zellikle Git ve GitHub’\u0131 \u00f6\u011frenmek, profesyonel bir geli\u015ftirici olmak i\u00e7in vazge\u00e7ilmezdir. Git, projelerinizin kod ge\u00e7mi\u015fini y\u00f6netmenizi ve farkl\u0131 versiyonlar aras\u0131nda kolayca ge\u00e7i\u015f yapman\u0131z\u0131 sa\u011flarken, GitHub bu projeleri \u00e7evrimi\u00e7i olarak depolaman\u0131za, payla\u015fman\u0131za ve di\u011fer geli\u015ftiricilerle i\u015fbirli\u011fi yapman\u0131za olanak tan\u0131r. Bu ara\u00e7lar, kodunuzu g\u00fcvende tutman\u0131n yan\u0131 s\u0131ra, bir geli\u015ftirici olarak portfolyonuzu olu\u015fturman\u0131n ve yeteneklerinizi sergilemenin de en etkili yoludur. T\u00fcrkiye’deki bir\u00e7ok teknoloji \u015firketi, i\u015fe al\u0131m s\u00fcre\u00e7lerinde adaylar\u0131n GitHub profillerini incelemeyi tercih etmektedir.<\/p>\n
\u00d6\u011frenme kaynaklar\u0131 konusunda ise, MDN Web Docs (Mozilla Developer Network) ve FreeCodeCamp gibi platformlar harika ba\u015flang\u0131\u00e7 noktalar\u0131d\u0131r. MDN, web teknolojileri hakk\u0131nda kapsaml\u0131 ve g\u00fcncel dok\u00fcmantasyon sunarken, FreeCodeCamp interaktif dersler ve projeler arac\u0131l\u0131\u011f\u0131yla pratik \u00f6\u011frenme deneyimleri sa\u011flar. Udemy ve Coursera gibi platformlarda da \u00fccretli veya \u00fccretsiz bir\u00e7ok kaliteli kurs bulabilirsiniz. Son olarak, yerel veya \u00e7evrimi\u00e7i geli\u015ftirici topluluklar\u0131na kat\u0131lmak, sorular\u0131n\u0131z\u0131 sormak, deneyimlerinizi payla\u015fmak ve di\u011fer geli\u015ftiricilerle etkile\u015fimde bulunmak, \u00f6\u011frenme s\u00fcrecinizi h\u0131zland\u0131racak ve motivasyonunuzu y\u00fcksek tutacakt\u0131r. Unutmay\u0131n, web geli\u015ftirme bir maratondur, sprint de\u011fil. Sab\u0131rl\u0131 olun, pratik yap\u0131n ve s\u00fcrekli \u00f6\u011frenmeye a\u00e7\u0131k kal\u0131n.<\/p>\n
Sonu\u00e7: Web Geli\u015ftirme Yolculu\u011funuz Ba\u015flad\u0131!<\/h2>\n
Web geli\u015ftirme d\u00fcnyas\u0131na att\u0131\u011f\u0131n\u0131z ilk ad\u0131m olan “Week-1″i ba\u015far\u0131yla tamamlad\u0131n\u0131z. Bu makale boyunca, web’in temel yap\u0131 ta\u015flar\u0131 olan HTML ve CSS’i derinlemesine inceledik, ilk web sayfan\u0131z\u0131 nas\u0131l olu\u015fturaca\u011f\u0131n\u0131z\u0131 ve ona nas\u0131l stil kazand\u0131raca\u011f\u0131n\u0131z\u0131 \u00f6\u011frendik. Ayr\u0131ca, edindi\u011finiz bu temel bilgileri ger\u00e7ek bir senaryo \u00fczerinde, yani basit bir ki\u015fisel portfolyo sayfas\u0131 olu\u015fturarak peki\u015ftirdik. Art\u0131k bir web sayfas\u0131n\u0131n iskeletini kurabiliyor, ona renkler, yaz\u0131 tipleri ve d\u00fczen ekleyebiliyorsunuz. Bu, dijital d\u00fcnyada kendi varl\u0131\u011f\u0131n\u0131z\u0131 olu\u015fturmak i\u00e7in kritik bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.<\/p>\n
Unutmay\u0131n ki web geli\u015ftirme, s\u00fcrekli \u00f6\u011frenme ve pratik yapma gerektiren dinamik bir aland\u0131r. Week-1’de edindi\u011finiz bu temel bilgiler, sizi daha ileri seviyelere ta\u015f\u0131yacak sa\u011flam bir zemin olu\u015fturuyor. JavaScript \u00f6\u011frenmeye ba\u015flamak, versiyon kontrol sistemlerini kullanmak ve aktif olarak projelere kat\u0131lmak, bu yolculukta sizi bir sonraki seviyeye ta\u015f\u0131yacak anahtarlard\u0131r. Her yeni kod sat\u0131r\u0131, her yeni proje, sizi daha yetkin ve kendine g\u00fcvenen bir geli\u015ftirici yapacakt\u0131r. Bu heyecan verici yolculukta ba\u015far\u0131lar dileriz; web d\u00fcnyas\u0131 sizin yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 bekliyor!<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n\n- \n Web geli\u015ftirmek i\u00e7in hangi programlama dillerini bilmeliyim?<\/strong><\/p>\n
Web geli\u015ftirmenin temelinde HTML (i\u015faretleme dili), CSS (stil dili) ve JavaScript (programlama dili) bulunur. Front-end (\u00f6n y\u00fcz) geli\u015ftirme i\u00e7in bu \u00fc\u00e7\u00fc olmazsa olmazd\u0131r. Back-end (arka y\u00fcz) geli\u015ftirme i\u00e7in ise Python, Node.js (JavaScript tabanl\u0131), PHP, Ruby veya Java gibi dillerden birini \u00f6\u011frenmeniz gerekebilir. Veritaban\u0131 y\u00f6netimi i\u00e7in SQL de \u00f6nemlidir.<\/p>\n<\/li>\n
- \n Ne kadar s\u00fcrede bir web sitesi yapabilirim?<\/strong><\/p>\n
Basit, statik bir web sitesini (Week-1’de \u00f6\u011frendiklerinizle) birka\u00e7 saat veya birka\u00e7 g\u00fcn i\u00e7inde olu\u015fturabilirsiniz. Ancak dinamik \u00f6zelliklere sahip, karma\u015f\u0131k ve kullan\u0131c\u0131 etkile\u015fimli bir web uygulamas\u0131 geli\u015ftirmek, projenin kapsam\u0131na ve sizin \u00f6\u011frenme h\u0131z\u0131n\u0131za ba\u011fl\u0131 olarak haftalar, hatta aylar s\u00fcrebilir. \u00d6nemli olan k\u00fc\u00e7\u00fck ad\u0131mlarla ba\u015flay\u0131p s\u00fcrekli pratik yapmakt\u0131r.<\/p>\n<\/li>\n
- \n Web geli\u015ftirme i\u00e7in en iyi kaynaklar nelerdir?<\/strong><\/p>\n
Ba\u015flang\u0131\u00e7 i\u00e7in MDN Web Docs (Mozilla Developer Network), FreeCodeCamp, W3Schools gibi \u00fccretsiz platformlar harikad\u0131r. Detayl\u0131 ve yap\u0131land\u0131r\u0131lm\u0131\u015f e\u011fitimler i\u00e7in Udemy, Coursera, Pluralsight gibi platformlardaki kurslar\u0131 de\u011ferlendirebilirsiniz. Ayr\u0131ca, YouTube’daki teknik kanallar ve Stack Overflow gibi forumlar da \u00f6\u011frenme s\u00fcrecinizde size yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<\/li>\n
- \n Front-end ve Back-end aras\u0131ndaki fark nedir?<\/strong><\/p>\n
Front-end (\u00d6n Y\u00fcz)<\/strong>, kullan\u0131c\u0131lar\u0131n bir web sitesiyle do\u011frudan etkile\u015fim kurdu\u011fu k\u0131s\u0131md\u0131r. G\u00f6rd\u00fc\u011f\u00fcn\u00fcz t\u00fcm g\u00f6rsel \u00f6\u011feler, d\u00fc\u011fmeler, formlar ve d\u00fczenler front-end teknolojileri (HTML, CSS, JavaScript) ile olu\u015fturulur. Back-end (Arka Y\u00fcz)<\/strong> ise sunucu, uygulama ve veritaban\u0131ndan olu\u015fan, kullan\u0131c\u0131lar\u0131n do\u011frudan g\u00f6rmedi\u011fi k\u0131s\u0131md\u0131r. Kullan\u0131c\u0131lar\u0131n girdi\u011fi verileri i\u015fler, veritaban\u0131ndan bilgi al\u0131r ve front-end’e g\u00f6nderir. Python, Node.js, PHP gibi diller back-end geli\u015ftirmede kullan\u0131l\u0131r.<\/p>\n<\/li>\n- \n Week-1’de \u00f6\u011frendiklerimle ne t\u00fcr projeler yapabilirim?<\/strong><\/p>\n
Week-1’de edindi\u011finiz HTML ve CSS bilgisiyle statik web sayfalar\u0131 olu\u015fturabilirsiniz. \u00d6rne\u011fin, ki\u015fisel bir portfolyo sayfas\u0131, k\u00fc\u00e7\u00fck bir i\u015fletmenin tan\u0131t\u0131m sitesi, bir yemek tarifi blogu, basit bir foto\u011fraf galerisi veya CV’nizin (\u00f6zge\u00e7mi\u015finizin) online versiyonunu yapabilirsiniz. Bu projeler, temel becerilerinizi peki\u015ftirmek ve yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 sergilemek i\u00e7in harika f\u0131rsatlard\u0131r.<\/p>\n<\/li>\n<\/ol>\n
#WebGeli\u015ftirme #HTML #CSS #Frontend #Yaz\u0131l\u0131mGeli\u015ftirme<\/p>\n