CSS kodundaki hatalar nasıl anlaşılır?

Sublime Text kullanıyorum hocam prettier var mı?
Onu kullanmayın. VS Code yükleyin. Bir kaç eklenti ile çok daha hızlanır işiniz. Ben şahsen bunları kullanıyorum. Ayrıca MacBook resminin hover'ını bence kaldırın. Piksel düşünce sıkıntı oluyor. Veya da scale(1.05) yapın.
1677964360662.png


Tam anlamıyla güzel bir örnek...
CSS dosyasına aktarılınca da hatasız olur.
 
Onu kullanmayın. VS Code yükleyin. Birkaç eklenti ile çok daha hızlanır işiniz. Ben şahsen bunları kullanıyorum. Ayrıca MacBook resminin Hover'ını bence kaldırın. Piksel düşünce sıkıntı oluyor. Veya da scale(1.05) yapın.
Eki Görüntüle 1690250

CSS dosyasına aktarılınca da hatasız olur.

Hocam yazdığım kod iyi mi?
Yani ileride daha akıcı yazacağım Flex falanla daha güzel görünür ama şu an kullandıklarımla uygun bir site olmuş mu?
 
Hocam yazdığım kod iyi mi?
Yani ileride daha akıcı yazacağım Flex falanla daha güzel görünür ama şu an kullandıklarımla uygun bir site olmuş mu?

Kodlarını okumadım sadece gördüklerimi söylüyorum. Hatasız çalışıyorsa elleme. Onları yedekle, sonrasında ise gereksiz gördüğün kodları silerek kod sayısını düşürebilirsin. Veya dediğimi yaparken aklına bir şey gelir ve 1 yöntem ile onlarca kodu silmiş olursun. Şu an da kodum düzgün mü diye düşünme sadece yaz. Düzgün çalışıyorsa sorun yoktur. Ama temelini ise düzgün at. Sublime kullanma dediğim gibi. Bazı kuralları uygula kendine sorun olmaz. Mesela CSS'den örnek vereyim yazdığın kod okunur olsun.
Örnek;

1677964635651.png


Ama böyle olursa kimse okumak dahi istemez.
1677964656113.png
 
Kodlarını okumadım sadece gördüklerimi söylüyorum. Hatasız çalışıyorsa elleme. Onları yedekle, sonrasında ise gereksiz gördüğün kodları silerek kod sayısını düşürebilirsin. Veya dediğimi yaparken aklına bir şey gelir ve 1 yöntem ile onlarca kodu silmiş olursun. Şu an da kodum düzgün mü diye düşünme sadece yaz. Düzgün çalışıyorsa sorun yoktur. Ama temelini ise düzgün at. Sublime kullanma dediğim gibi. Bazı kuralları uygula kendine sorun olmaz. Mesela CSS'den örnek vereyim yazdığın kod okunur olsun.
Örnek;

Eki Görüntüle 1690258

Ama böyle olursa kimse okumak dahi istemez.
Eki Görüntüle 1690259

Evet ya o bayağı sorun oluyor. Onu çözmem lazım en yakın zamanda hatta şimdi çözeyim :D
 
Evet ya o bayağı sorun oluyor. Onu çözmem lazım en yakın zamanda hatta şimdi çözeyim :D

Sana önerim VS Code yüklemen. Ardından sana attığım eklentilerden 2., 3. ve sonuncu eklenti hariç hepsini yüklemen. Ardından ise CTRL + P yapıp ardından bu seçeneğe tıklaman

1677964877934.png


JSON:
{
  // Editor
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.detectIndentation": false,
  "editor.insertSpaces": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontSize": 14,
  "editor.tokenColorCustomizations": {
    "comments": "#ffd300"
  },
  "editor.unicodeHighlight.allowedLocales": {
    "tr": true
  },
  "explorer.compactFolders": false,
  "breadcrumbs.enabled": false,
  "files.autoSave": "onFocusChange",
  // Workbench
  "window.commandCenter": false,
  "workbench.layoutControl.enabled": false,
  "workbench.startupEditor": "none",
  "workbench.iconTheme": "material-icon-theme",
  "liveServer.settings.donotShowInfoMsg": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": true,
  "explorer.confirmDragAndDrop": false,
  "editor.minimap.enabled": false,
}

Bunları girmen. Okuyarak kendine göre kişileştir.
 
Hocam CSS'i düzgün kullanmış mıyım?
Mesela şöyle daha kolay yapılır falan dediğiniz yerler var mı?
Sadece birkaç değişiklik yapılırsa kod daha okunaklı ve kolayca düzenlenebilir hale gelir, ama onlar da o kadar önemli değil.

Kod:
Örnek Değişiklik

.navbar div {
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  margin-right: 20px;
  transition: .5s;
}
 

Technopat Haberler

Geri
Yukarı