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

ErrorCorrection dedi:

Sublime Text kullanıyorum hocam prettier var mı?

Genişletmek için tıkla...

Wilfaelor dedi:

Tam anlamıyla güzel bir örnek...

Genişletmek için tıkla...

bonz dedi:

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.

Genişletmek için tıkla...

ErrorCorrection dedi:

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?

Genişletmek için tıkla...

bonz dedi:

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

Genişletmek için tıkla...

ErrorCorrection dedi:

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

Genişletmek için tıkla...

{
  // 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,
}

Beroski dedi:

Hocam, kitap okuyordum. Kusura bakmayın, yetişemedim. Zaten konu çözülmüş gibi gözüküyor

Genişletmek için tıkla...

ErrorCorrection dedi:

Bir bakın istedim siteye hocam

Genişletmek için tıkla...

Beroski dedi:

Sitede bir problem yok. Sorunu tam anlayamadım. Bu arada kendinizi geliştirmişsiniz, güzel bir index.

Genişletmek için tıkla...

ErrorCorrection dedi:

Hocam CSS'i düzgün kullanmış mıyım?
Mesela şöyle daha kolay yapılır falan dediğiniz yerler var mı?

Genişletmek için tıkla...

Ö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;
}