نسبت با نفر قبلی...البته فقط تازه کارها هم ممکن هست که این اشتباهات رو نداشته باشن و حتی خود من هم بعضی اوقات یکسری از این موارد رو فراموش میکنم
1. همیشه تگها را ببندید
چندی پیش ممکن بود مواردی این چنینی عادی به نظر برسد :
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
دقت کنید در کد بالا تگهای ol یا ul وجود ندارد و حتی تگ li هم بسته نشده است. اما امروزه به خاطر استاندارد سازی وب سایتها این کار کاملا اشتباه است و ممکن است باعث ایراداتی در سایت شما بشود. پس همیشه همه تگهای خود را ببندید :
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
2. DOCTYPE درست انتخاب کنید
همیشه بسته به نوع نیاز خود بهترین DOCTYPE را برای اسناد خود انتخاب کنید، شما میتوانید در این پست اطلاعات بیشتری را در مورد DOCTYPE ها بدست آورید.
3. هیچوقت از Inline Style ها استفاده نکنید
بعضی مواقع که دارید روی کد خود کار می کنید ممکن است وسوسه انگیز باشد که برای دادن استایل از روش inline استفاده کنید :
بهتر است همیشه ابتدا کدنویسی ساختار سایت خود را تکمیل کنید و بعد به استایل دادن آن توسط فایل بیرونی CSS بپردازید :
در این پست می توانید اطلاعات بیشتری را در مورد انواع روشهای دادن استایل بدست آورید.
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
#someElement > p {
color: red;
}
4. فایلهای CSS بیرونی را در head قرار دهید
شما می توانید فایهای بیرونی CSS را هر جا که بخواهید قرار دهید. اما پیشنهاد می شود که این فایلها درون head قرار گیرند چون لود شدن صفحه ها افزایش می یابد.
<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>
5. فایلهای javascript را در انتها قرار دهید
یکی از مهمترین اهداف در طراحی وب سایت سریع لود شدن صفحات میباشد ، برای همین منظور همیشه بهتر هست که کدهای جاوااسکریپت را در انتهای صفحه قرار دهیم تا کاربر منتظر لود شدن همه کدهای جاوااسکریپت نماند.
<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>
6. از inline javascript استفاده نکنید
خیلی مواقع دستورات جاوااسکریپت را به طور مستقیم در کد HTML قرار داده میشود در صورتیکه این کار خیلی جالب نیست و بهتر هست همه کدهای جاوااسکریپت در یک فایل خارجی قرار داده شوند.
7. همیشه Validate کنید
ابتدا پلاگین Web Developer Toolbar رو برای فایرفاکس دانلود کنید، سپس از گزینه های Validate HTML و Validate CSS همیشه و به طور دائم استفاده کنید.
8. Firebug را دانلود کنید
این پلاگین فایرفاکس یکی از بهترین ابزارها برای برنامه نویسان و طراحان وب سایت است. توسط این پلاگین به راحتی می توانید کد جاوااسکریپت خود را دیباگ کنید و همه المانهای کد HTML و CSS را به راحتی بررسی کنید و تغییر بدهید. حتما دانلود کنید !
9. از Firebug استفاده کنید
به طور متوسط کاربران از 20 درصد از تواناییهای فایرباگ استفاده می کنند، شما میتوانید با چند ساعت وقت گذاشتن از درصد بیشتری از تواناییهای این ابزار فوق العاده استفاده کنید ، برای این منظور از منابع زیر استفاده کنید :
10. تگها را با حروف کوچک بنویسید
کد شما در این حالت هم کار می کند :
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
اما بهتر است همیشه از حروف کوچک استفاده کنید :
<div>
<p>Here's an interesting fact about corn. </p>
</div>
11. از تگهای h1 تا h6 استفاده کنید
یکی از بهترین عادتهایی که می توانید بکنید این است که از این 6 تگ به درستی استفاده کنید، چون هم برای موتورهای جستجو خوب است و هم رتبه سایت شما را بهتر می کند.
<h1>This is a really important corn fact! </h1>
<h6>Small, but still significant corn fact goes here. </h6>
12. اگر وبلاگ می سازید از h1 برای عنوان استفاده کنید
بهتر است در ساخت وبلاگ از تگ h1 برای عنوان مطالب استفاده کرد تا اینکه این تگ را برای عنوان سایت و لوگو قرار داد. البته این انتخاب بیشتر به عهده خود شما می باشد اما از نظر SEO این کار نتیجه بهتری خواهد داشت.
13. yslow را دانلود کنید
یاهو برای فایرباگ پلاگین عالی ساخته است که توسط آن میتوانید به نقاط ضعف وب سایت خود پی ببرید و آنها را بهینه کنید. این پلاگین را نیز حتما دانلود کنید.
14. navigation را درون تگ ol قرار دهید
هر وب سایتی یک navigation دارد، شما میتوانید این قسمت را به صورت زیر کدنویسی کنید :
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
اما روش بهتر این است که این قسمت را درون تگ ol و li قرار دهید :
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
15. یاد بگیرید چگونه IE را هدف قرار دهید
چه بخواهید و چه نخواهید همیشه هنگام کدنویسی با IE سروکله خواهید زد. یکی از بهترین روشها این است که ابتدا کد CSS را کامل بنویسید، سپس برای قسمتهایی که در Internet Explorer به مشکل میخورید یک فایل CSS جداگانه تهیه کنید و آنرا فقط برای IE اجرا کنید :
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
کد فوق می گوید که اگر مرورگر کاربر IE بود و نسخه آن کمتر از 7 بود این کد را اجرا کند، اگر میخواهید خود IE 7 هم شامل شود به جای lt عبارت lte را به کار ببرید.
16. یک برنامه برای کدنویسی انتخاب کنید
چه روی پی سی کار کنید و چه روی مک همیشه انتخابهای عالی برای کدنویسی دارید، در زیر لیستی را مشاهده می کنید که تعدادی از این برنامه ها را معرفی کرده است :
عاشقان پی سی :
عاشقان مک
17. وقتی وب سایت تمام شد آنرا فشرده کنید
توسط zip کردن فایلهای CSS و JS میتوانید تا 25 درصد حجم آنها را کاهش دهید. توسط ابزارهای آنلاین زیر می توانید این کار را انجام دهید :
JavaScript
CSS
18. بریدن، بریدن و بریدن
شما معمولا عادت دارید که وقتی کدنویسی می کنید هر پاراگراف را درون یک div قرار دهید و آن div را هم درون یک div دیگر قرار دهید. اما بهتر است وقتی کدنویسی سایت تمام شد به کدها دوباره نگاه بندازید و تگهای اضافی که استفاده نکرده اید را پاک کنید تا سرعت سایت شما افزایش یابد.
19. همه تصاویر به alt نیاز دارند
به خاطر accessibility و validation حتما لازم است که alt در تصاویر قرار داده شود، فراموش نکنید !
بد :
<IMG SRC="cornImage.jpg" />
بهتر :
<img src="cornImage.jpg" alt="A corn field I visited." />
20. سورس را ببینید
همه ما به نحوی از هم کپی میکنیم، اما مهم این است که از این کپی کردنها چیزی یاد بگیریم و بعدها خودمان کدنویسی بکنیم، برای شروع بد نیست به سایتهای مختلف رفته و سورس آنها را ببینید و کپی کنید (البته طرح گرافیکی را نه فقط کد)، سپس بعد از مدتی می بینید که می توانید برای خودتان هم کد بنویسید.
21. همه المانها را استایل بدهید
این تمرین بیشتر برای موقعی مناسب است که برای مشتری طراحی می کنید، ممکن است شما در طرح خود از تگ لیست استفاده نکرده باشید اما از کجا می دانید مشتری شما هم نمی خواهد از آن استفاده کند، برای همین علت بهتر است همیشه همه المانها را با توجه به استایل سایت کدنویسی کنید حتی اگر از آنها استفاده نمی کنید.
22. فتوشاپ یاد بگیرید
وقتی کدنویسی HTML و CSS را یاد گرفتید بهتر است فتوشاپ را هم یاد بگیرید، چون ابزاری بسیار کارآمد و مفید برای طراحی وب سایت خواهد بود. از منابع زیر می توانید استفاده کنید :
- Videos section
- Lynda.com
- You Suck at Photoshop
- چند ساعت اختصاص دهید تا کلیدهای میانبر در فتوشاپ را یاد بگیرید
23. همه تگهای HTML را یاد بگیرید
خیلی از تگهای HTML هستند که به ندرت از آنها استفاده می کنید، اما این بدین معنی نیست که نباید آنها را یاد بگیرید. برای مثال تگ abbr و یا cite .
24. در فضای مجازی فعال شوید
وقتی یک مطلبی را در مورد طراحی و برنامه نویسی وب سایت فرا گرفتید چرا آنرا با بقیه قسمت نمی کنید ؟ یک وبلاگ بسازید و دانسته های خود را آموزش دهید ! خیلی از کاربران هستند که کمتر از شما می دانند. با این کار هم به بقیه کمک کردید و هم می توانید دانسته های خود را هم محک بزنید.
25. از CSS Reset استفاده کنید
این مورد یکی از مواردی است که همیشه سر استفاده کردن یا نکردن آن بحث است، به نظر من بهتر است یکی از فایلهای معروف CSS Reset را دانلود کنید و طبق آن برای خود یک فایل جداگانه بسازید مثلا از فایل Eric Mayer استفاده کنید. اگر تنها فایل را کپی کنید به درستی نخواهید فهمید که این کدها دقیقا چه کاری را انجام می دهند.
26. تراز کنید
یکی از بهترین تمرینها این است که سعی کنید در طرحهایتان همه المانها با هم تراز باشند.
27. slice کردن قالب فتوشاپ
حال که کدنویسی HTML و CSS را فرا گرفتید و قالب خود را در فتوشاپ طراحی کردید باید یاد بگیرید که چگونه میتوانید قالب فتوشاپ خود را برای کدنویسی تکه تکه و یا همان slice کنید. خیلی کار سختی نیست فقط نیاز به تمرین دارد، می توانید از منابع زیر هم برای یادگیری استفاده کنید :
28. از framework ها هنوز استفاده نکنید
فریم ورکهای CSS و Javascript خیلی عالی هستند اما برای شروع مناسب نیست که از آنها استفاده کنید. وقتی شما در ابتدای یادگیری CSS هستید استفاده کردن از این فریم ورکها شما را بیشتر گیج می کند. این فریم ورکها برای برنامه نویسان حرفه ای است که میخواهند کمی در زمان صرفه جویی کنند.
آیا در سایت خود از Meta Keywords استفاده کنیم؟ 
قالب جدید سایت 
کفش قرمز
آموزش ساخت دامنه ی رایگان tk. به صورت تصویری
کد دو آهنگ انلاین بسیار زیبا از سجاد و حسین به نام های متاسفم دلم و عاشقم من 
قالب زیبای سایت دانلودها