آموزش طراحی و ساخت صفحه 404 | خطای 404 چیست

به دوره آموزشی ساخت صفحه 404 خوش آمدید ، به بهانه ساخت صفحه 404 می خوایم با ترفندهای CSS یا CSS Tricks آشنا بشیم. ما صفحه ای فانتزی با HTML،CSS و کمی jQuery پیاده خواهیم کرد. دمو زیر رو ببینید 🙂

مشاهده دمو آنلاین

خطا و صفحه 404 چیست؟

یکی از صفحات پرکاربرد در سایت ها که باید همشه در طراحی سایت مد نظر قرار بدید، صفحات 404 هستند. زمانیکه کاربر به یک لینک شکسته و یا صفحه ای از سایت شما مراجعه کنه که اون صفحه وجود خارجی نداشته باشه، با خطای 404 در سمت سایت مواجه میشه. ما برای نگه داشتن کاربر باید صفحه 404 رو جذاب کنیم تا از سایت خارج نشه و گمان نکنه که سایت داون شده!

اگر از سیستم مدیریت محتوای وردپرس استفاده می کنین کافی هست تا در پوشه تم تون یک فایل با نام 404.php ایجاد کنین و محتوا و طرح صفحه 404 تون رو در اون قرار بدید. پس هر اچ تی ام الی رو میتونید به راحتی تبدیل به صفحه 404 برای وردپرس کنین.اگر با وردپرس آشنایی ندارید می تونید مسیر وردپرس رو در ویلرن دنبال کنید.

همونطور که در دمو دیدید، المان هایی وجود دارند که به صورت متحرک هستند، ما تماما با CSS و jQuery پیاده خواهیم کرد و هیچ کدام غیر از تصویر پشت زمینه تصویر نیستند و حتی در کنار اون یه موزیک مخوف و ترسناک هم اضافه خواهیم کرد تا حالت فانتزی و ترسناک داشته باشه 😀

راستی پیشنیاز این دوره فقط این هست که باید HTML و CSS رو مسلط باشید، همین 🙂 اگر تسلط ندارید هیچ عیبی نداره حتما دوره آموزش HTML و CSS ویلرن رو مشاهده کنید و بعد بیاید این دوره ترسناک رو ببینید (شوخی کردم، ترس نداره بیا ببین چه خبره 😀 )

امیدواریم که مثل همیشه مارو همراهی کنید، بهتره همین الان دست به کار بشید و این دوره کوتاه، راحت و البته شدیــــدا جذاب رو مشاهده کنید. 😀

موفق باشید 🙂

1- معرفی دوره ساخت صفحه 404
1 دقیقه

با ما همراه باشید تا بیشتر در مورد ساخت و پیاده سازی صفحه 404 اطلاع پیدا کنید .

دانلود ویدیو درس

2- پیاده سازی HTML صفحه 404
6 دقیقه

در این جلسه کدهای HTML رو می نویسیم تا بتونیم استایل هایی که نیاز داریم رو برای پروژمون پیاده سازی کنیم.

حتما با ما همراه باشید.

دانلود ویدیو درس

سورس 2

3-پیاده سازی استایل ها
23 دقیقه

قسمت اول :

در این قسمت ما background یا تصویر پشت زمینه رو پیاده خواهیم کرد و بعد از اون استایل های دو عدد 4 رو میزنیم، در نهایت ظاهر پروژه به صورت زیر میشه.

برای مشاهده ویدئوی این درس می بایست در دوره ثبت نام نمائید.

ضمنا ثبت نام در این دوره رایگان می باشد

سورس3

قسمت دوم :

حالا نوبت می رسه به آقای روح 😀 باید با CSS ، روح که همون عدد 0 بین دو عدد 4 هست رو پیاده کنیم 🙂 و بعد از اون هم با خاصیت animation در CSS اون رو متحرک کنیم و در نهایت کارمون مثل تصویر زیر در میاد.