آموزش ساده و سریع طراحی وب

997 روز پیش

سومین مبحث آموزش چریکت‌های ارمایل، یادگیری اچ‌تی‌ام‌ال و سی‌اس‌اس بود که در حال حاضر با اتمام آن به صورت کامل برای استفاده و دانلود رایگان توسط شما عرضه شده است.

html & css learning video

به طور کل در تقریبا همه زبان‌های برنامه نویسی و حتی طراحی وب یک پروژه رو میشه به دو بخش frontend و backend تقسیم کرد. فرانت‌اند یعنی بخش جلویی و بک‌اند یعنی بخش پس زمینه کار. این اتفاق برای یک سایت ساده شخصی یا یک سایت خبری یا مثلا آشپزی هم میافته. شما در واقع دو بخش دارید.

در این آموزش ما قصد داریم که روش طراحی بخش جلویی کار یا frontend رو بهتون آموزش بدیم. جدا از اینکه در بخش پشتی کار چه اتفاقی داره میافته و از چه تکنولوژی استفاده میشه، در نهایت بخش جلویی کار در یک وب سایت ساده تا پیچیده‌ترین وب سایت‌ها از html و css‌ تشکیل شده است.

مطابق معمول ما تو آموزش‌هامون آخرین نسخه موجود رو آموزش خواهیم داد که در حال حاضر نسخه پنج اچ‌تی‌ام‌ال و نسخه سه برای سی‌اس‌اس هست. پس شما با دیدن و فهمیدن و درک این مجموعه آموزشی قادر خواهید بود تا ظاهر یک وب سایت رو به سادگی بسازید.

در تهیه این آموزش همانند همه آموزش‌های قبلی سعی شده مطالب با سرعت بالا گفته بشه و شاید در طی این مجموعه لازم باشه به دفعات فیلم رو به عقب برگردونده و جملات و یا کدها رو مرور کنید.(البته یکی از چریکت‌های ما فیلم‌هارو با سرعت پخش دو برابر میدید!)

هم‌چنین شاید لازم باشه بعد از بروز مشکل در بخشی خاص یا برای حل تمرین‌های ذکر شده در ویدیو به عقب برگردید و قسمت‌های عقب‌تر رو هم چندباره ببینید و بدونید که چریکت‌های ما هم با اینکه در هنگام ضبط حضور داشتن بعضی اوقات چندین بار فیلم‌ها رو مرور کردن، پس نگران این نباشید.

این مجموعه آموزشی شامل پنچاه و هفت قسمت به مدت زمان حدود سیزده ساعت و چهل و پنج دقیقه است. حجم فایل‌ها هم حدود یک و نیم گیگ شده است. از نظر حجم فایل‌ها از اونجایی که کیفیت در اولویت اول ما قرار داشت،‌ سعی شده حداقل کاهش کیفیت ممکن رو داشته باشیم و در این مجموعه کیفیت صدا هم نسبت به آموزش‌های قبلی بهبود خوبی داشتیم.

برای دانلود کامل و رایگان این مجموعه به ادامه مطلب بروید.

نیازمندی‌های مجموعه آموزشی طراحی وب

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

  • دانلود و نصب ادیتور سابلایم – Sublime
  • دانلود و نصب یک مرورگر مدرن مثل گوگل کروم – Chrome

دانلود

قسمت۰۱ | قسمت۰۲ | قسمت۰۳ | قسمت۰۴ | قسمت۰۵ | قسمت۰۶ | قسمت۰۷ | قسمت۰۸ | قسمت۰۹ | قسمت۱۰ | قسمت۱۱ | قسمت۱۲ | قسمت۱۳ | قسمت۱۴ | قسمت۱۵ | قسمت۱۶ | قسمت۱۷ | قسمت۱۸ | قسمت۱۹ | قسمت۲۰ | قسمت۲۱ | قسمت۲۲ | قسمت۲۳ | قسمت۲۴ | قسمت۲۵ | قسمت۲۶ | قسمت۲۷ | قسمت۲۸ | قسمت۲۹ | قسمت۳۰ | قسمت۳۱ | قسمت۳۲ | قسمت۳۳ | قسمت۳۴ | قسمت۳۵ | قسمت۳۶ | قسمت۳۷ | قسمت۳۸ | قسمت۳۹ | قسمت۴۰ | قسمت۴۱ | قسمت۴۲ | قسمت۴۳ | قسمت۴۴ | قسمت۴۵ | قسمت۴۶ | قسمت۴۷ | قسمت۴۸ | قسمت۴۹ | قسمت۵۰ | قسمت۵۱ | قسمت۵۲ | قسمت۵۳ | قسمت۵۴ | قسمت۵۵ | قسمت۵۶ | قسمت۵۷ |

دانلود کنید

دانلود مجموعه آموزش طراحی وب

حدود ۱۴۹۰ مگابایت

  1. asd313 پاسخ

    سلام خسته نباشید و خداقوت خدمت آقای عوض زاده؛ میخواستم بگم که قسمت دوم این مجموعه مشکل داره و پخش نمیشه و میره توو صفحه ای که یک سری خط کدنویسی وجود داره(بصورت یه عکس در میاد) و پایینش نوشته :
    Powered By Mixa

    و بعد دوباره ایندکس سایت شما رو میاره و فایل پخش نمیشه.

    یه چیز دیگه قسمت اول آموزشتونو دیدم متوجه شدم که سطح آموزشتون بسیار خوب و مطلوبه. حالا یه سوال… آیا آموزشهای دیگه ای مثل جاوا اسکریپت جی کوئری و پی اچ پی هم در برنامه های شما هست واسه ضبط کردن و منتشر کردن در سایت؟

    • asd313

      درستش کردم فهمیدم مشکل از کجاست…لینک این قسمت از آموزش خوبتون یه اشکال کوچولو داشت که با برطرف کردن اون اشکال، تونستم فیلم رو لود کنم. آخر اسم فایل این قسمت (chrikt-htmlcss02-html-.mp4) یه علامت «-» اضافه زده شده که اینو که برداشتم (طبق الگویی که بنظرم رسید شما برای نامگذاری استفاده کردید حدس زدم این علامت اضافه باشه) درست شد و از شما ممنونم.

      فقط میمونه سوال دومم…اگه لطف کنید و پاسخ بدید؛ ممنونتون میشم.

      باتشکر.

    • جواد عوض زاده

      سلام
      ممنون از تذکرتون، لینک تصحیح شد.

    • جواد عوض زاده

      بله، آموزش‌های بعدی هم در راه هست.
      در حال حاضر آموزش پی اچ پی مقدماتی به اتمام رسیده که ایشالا به زودی آپلود و منتشر میشه.
      پس از اون هم اگه عمری باشه، ایشالا آموزش حرفه‌ای PHP و جاوااسکریپت هم تهیه و منتشر خواهد شد.

  2. وحید پاسخ

    سلام
    تشکر از اینکه این آموزش رو ارائه دادید،تازه دانلود کردم و هنوز شروع نکردم ولی خواستم حداقل قدردانی از این کار شما،متشکر

  3. مهدی پاسخ

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

    • جواد عوض زاده

      سلام
      مجموعه فتوشاپ به صورت ساده آموزش داده شد منتها فیلمش به صورت کامل تهیه نشد و فعلا هم برنامه‌ای برای آموزش مجدد فتوشاپ نداریم

  4. آروین پاسخ

    مهندس جان در یک جمله دمت گرم

  5. Ramin پاسخ

    سلام اقای عوض زاده عزیز
    ممنون بابت سایت و اموزشهای خوبتون
    مثل اینکه اموزش cssپیش نیاز html رو لازم داره
    ولی اموزشش رو من ندیدم میشه اموزشش رو بزارید؟

    • جواد عوض زاده

      سلام
      این آموزش به صورت ترکیبی بوده و در خلال آموزش سی‌اس‌اس مباحث اچ‌تی‌ام‌ال هم مطرح میشه.

  6. مرتضی پاسخ

    باسلام و خسته نباشید
    برای ساخت و تولید نرم افزار ، برنامه درست کنین .
    با تشکر

  7. هادی پاسخ

    سلام دادا… واقعا دمت گرم … در این زمینه استادی به مولا …. خیلی استفاده کردم

  8. این نوشته در مطلبی با عنوان آموزش ساده و سریع پی‌اچ‌پی منتشر شده است

  9. سلام ممنون بابت آموزش خوبتون.
    کمتر سایتی آموزش html5 css3 رو گذاشتن و علاقه مندان اکثرا همون نسخه های قبلی رو یاد میگیرند مثل html4.1 css2 تشکر

  10. none پاسخ

    سلام خیلی عالی بود. ممنون از آموزش خوبتون.

    بنده می تونم اون فایلی که در قسمت ۵۲ با عنوان ermile.css که حدود ۴۵۰ تا لاین هم داشت. و شامل کد های پیش فرض هر فایل سی اس اسی بود. داشته باشم.؟

    • جواد عوض زاده

      سلام
      می‌تونید از طریق وب‌سایت ارمایل به این فایل دسترسی داشته باشید.
      ermile.com/static/css/ermile.css

  11. amirhossein پاسخ

    سلام وقت بخیر
    برای طراحی وب همین آموزش ویدئویی که گذاشتین کافیه؟

    • جواد عوض زاده

      سلام
      از این آموزش می‌تونید برای شروع به کار و آشنایی اولیه استفاده کنید. تجربیات و آشنایی با نیازمندی‌های دیگر به مرور صورت خواهد گرفت

  12. زهرا پاسخ

    سلام
    من بسیار بسیار سپاسگزارم از شما آقای عوض زاده بابت سایت عالی و مفیدی که راه انداختین.
    من ویدئوهای آموزشی آفیس رو تا حدودی دیدم بسیار عالی بودند
    تازه الان مجموعه آموزشی طراحی وب سایت رو دیدم و خیلی خیلی خوشحال شدم چون واقعا دوست داشتم یاد بگیرم.هنوز دانلود نکردم گفتم اول یه سپاسگزاری مفصل داشته باشم چون میدونم این مجموعه هم مث قبلیا عالی هستند
    دنیایی سپاس از شما

  13. میلاد پاسخ

    سلام دوست عزیز
    اول اینکه کلمه ای برای قدر دانی از شما در دایره لغاتم نمیبینم … واقعا سپاسگزارم
    سوالم اینه برای شروع کار برنامه نویسی و طراحی ووو آیا روند یادگیری که مینویسم درسته یا نه اگه درست نیست لطفا تصحیحش کنین که بفهمم چیکار کنم
    قدم به قدم C بعد C++ بعد HTML بعد CSS
    نهایت سپاس

    • جواد عوض زاده

      سلام
      میتونید مستقیم از اچ‌تی‌ام‌ال شروع کنید و بعد سی‌اس‌اس و …

  14. نابت پاسخ

    سلام ممنون از سایت خوبتون
    آیا می توان با این آموزش ها چیزی مانند سایت دیجیکالا را تولید کرد یا آموزش بیش تری لازم است؟
    با تشکر

  15. باقری پاسخ

    سلام، لطفا لطفا لطفا در ادامه فیلم های آموزشی HTML و CSS آموزش جاوا اسکریپ و جی کواری رو هم قرار بدید. با تشکر

  16. علی غیاث ابادی پاسخ

    خیلی خوبه منو مشتاق کرد به یادگیری ازتون باتمام قلبم تشکر میکنم

  17. علی غیاث ابادی پاسخ

    اگه میشه نرم افزارهای مهمی مثله نرم افزار مطلبو اموزش بدید. ممنون از شما.

  18. علی غیاثی پاسخ

    یه سوال من وقتی طبق اموزشتون فایل htmlرو ساختم (درقسمت مقدماتی)وقتی داخل برنامه ساب عبارترو نوشتم و تب رو زدم هیچ اتفاقی نیوفتاد لطفا راهنمایی کنید ممنون

    • احمدم

      سلام. لطفا بهتر توضیح بدید که منظورتون چیه؟

  19. مهناز پاسخ

    مرسی برای تماممم آموزشهای خوب سایتتون . خدا قوت

  20. Shayan پاسخ

    اموزشت خیلی خیلی خوبه…من مجموعه افیس رو دانلود کردم عالی بود…واقعا ممنونم ازت…نماز روزه هات هم قبول باشه☺

  21. امید باقری پاسخ

    سلام استاد گرامی
    بخاطر تسلط شما به سی اس اس و پی اچ پی و بخاطر بزرگواری که داشتید و این آموزش ها را مجانی در اختیار دیگران قرار دادید از شما تشکر می کنم و امید وارم به همه آرزو هاتون برسید .

  22. محمد رضا پاسخ

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

  23. امیرحسین پاسخ

    سلام وقت بخیر
    من نرم افزار سابلایم روی لپ تاپم نصب کردم اما ۲تا مشکل دارم:
    ۱- اولا فایل index.html که ایجاد میکنم اصلا آیکون مرورگر کروم کنارش نمیاد
    ۲- توی سابلایم وقتی تگ html> تایپ میکنم tab میزنم اصلا چیزی اجرا نمکنه!!!
    در صورتی که توی کامپیوترم مثل ویدئو آموزشی بدون مشکل کار میکرد.

    ممنون میشم راهنماییم کنید

    • maedeh

      دقیقا منم همین مشکلو دارم ..دوستان لطف میکنن اگر راهنمایی کنن…هرچند من فکر میکنم ایراد از برنامه س و کامل نصب نمیشه

    • جواد عوض زاده

      تابحال به این مشکل برنخوردم
      احتمال داره نسخه تو نصب به مشکل خورده یا کرک نکردید و مشکل داشته یا حتی ممکنه مشکل از نسخه خاصی باشه

      برای اینکه خودکار بیاره باید پسوند رو قبلش تنظیم کنید و سیو کنید

  24. amirhossein پاسخ

    سلام وقت بخیر
    من نرم افزار سابلایم روی لپ تاپم نصب کردم اما ۲تا مشکل دارم:
    ۱- اولا فایل index.html که ایجاد میکنم اصلا آیکون مرورگر کروم کنارش نمیاد
    ۲- توی سابلایم وقتی تگ html> تایپ میکنم tab میزنم اصلا چیزی اجرا نمکنه!!!
    در صورتی که توی کامپیوترم مثل ویدئو آموزشی بدون مشکل کار میکرد.

    ممنون میشم راهنماییم کنید

  25. رئوف پاسخ

    سلام اقای عوض زاده عزیز ،خدا قوت، من تازه شروع به اموزش اکسل کردم ازتون ممنونم که اموزشها رایگان دراختیار ملت گذاشتید، من از یک سایت دیگه همین اموزش رو گرفته بودم کیفیت صداش اصلا خوب نبود ولی الان دوباره از سایت خودتون دانلود میکنم خیلی خوبه کیفیتش واقعا ممنونم

  26. majid پاسخ

    سلام خسته نباشید آقای عوض زاده ، واقعا دمتون گرم، امیدوارم به خاطر آموزشهای بی نظیرتون که رایگان هستش عاقبت به خیر بشین.

  27. سهیلا پاسخ

    درود به روح بزرگوارتون
    بابت فیلم های آموزشی متشکرم.

  28. بهراد پاسخ

    سلام خسته نباشید من نرم افزار سابلایم نصب کردم اما
    فایل index.html که درست میکنم مرورگر کروم نمیاد بعد
    توی سابلایم وقتی تگ html> تایپ میکنم tab میزنم هیچی نمیاد.اگه توضیح بدید در مورد این مشکل ممنون میشم مرسی.

    • mamad

      با سلام باید در نوار بالایی سابلایم از قسمت tools ,بخش اول یعنی (..command palette) را انتخاب کرده و html را تایپ کنیذ و enter را بزنید .درست میشه

  29. محمد پاسخ

    با تشکر فراوان از ویدئو های بی نظیرتون.فقط یه سوال داشتم اونم اینکه فریم وورک سی اس اس شما رو چگونه میشه تهیه کرد که در ویدئو های پایانی ازش استفاده کردین؟ با تشکر دوباره

  30. پیمان بابایی پاسخ

    سلام
    ممنون دوست خوب و دوس داشتنی

  31. محمود زایدلیر پاسخ

    سلام من طراحی وب را تازه شروع کرده ام. کلاس آموزشی رفتم ولی به این اندازه کامل نبود .آموزشهای شما واقعاً کامل است. یعنی هرکسی میتواند با این آموزشطراحی وب را بیاموزد. با تشکر از زمانی که برای این آموزش صرف کردید.

  32. Behnam پاسخ

    واقعا عالی بود،از این اموزشای چرتی ک پولی میزارن خیلی خیلی بهتر بود،واقعا دمت گرم داداش

  33. cmstop پاسخ

    سلام
    در زمینه آموزش Spring Framework مطلبی ندارین؟

  34. امیر حسین پاسخ

    سلام استاد جان
    ببخشید wordpres از قسمت چند شروع میشه؟

  35. Abbas پاسخ

    با عرض سلام و خسته نباشید و تشکر فراوان از آموزش خوبتون
    ای کاش امکان اضافه شدن توضیحات یا ضبط دوباره قسمت ۲۷ مربوط به DROPDOWN وجود داشته باشه
    میتونست بهتر ضبط بشه

  36. Mostafa پاسخ

    سلام
    ببخشید میتونم از آموزش های html و css های سایتتون تو کانال سروشم استفاده کنم؟

  37. Mostafa پاسخ

    سلام
    آموزش هاتون بسیار عالیه
    ببخشید من میتونم از آموزش های html و css های سایتتون تو کانال سروش استفاده کنم؟

    • جواد عوض زاده

      سلام
      بله، میتونید به رایگان اون‌ها رو درهرجایی بازپخش کنید

  38. امیر پاسخ

    سلام خسته نباشید
    چجوری باید دانلود کنیم
    من وقتی روی لینک کلیک میکنم فقط پخش میکنه اما دانلود نمیشه
    هم با ایفون امتحان کردم هم اندروید

    • جواد عوض زاده

      سلام
      سیستم عامل‌های گوشی در حالت معمول گزینه دانلود ندارند. برای دانلود روی گوشی لازم هست از نرم افزارهای دانلود بسته به سیستم عاملتون استفاده کنید.
      روی رایانه هم میتونید کلیک راست کرده و ذخیره کنید.

  39. H.a پاسخ

    با سلام
    من رشته تحصیلیم کامپیوتر نبوده ولی میخوام طراحی سایت رو از ابتدا و کامل یادبگیرم
    من میخواستم در کلاس حضوری وردپرس و طراحی وب شما شرکت کنم
    ایا پیش زمینه ای لازمه ؟ هیچ زبان طراحی سایتی هم بلد نیستم

    • جواد عوض زاده

      سلام
      از ابتدا که نیاز به چیزی برای یادگیری نداره. میتونید با همین ویدیوهای که روی سایت گذاشتم دانلود کنید.

  40. رضوان پاسخ

    سی فایو یک سایت‌ساز حرفه‌ای است که به کسب و کارها کمک می‌کند تا در کمترین زمان با دسترسی به ۱۰۰ قالب متنوع، یک وب‌سایت مدرن و گوگل‌دوست را بدون دانش فنی، طراحی کنند. تاکنون بیش از ۶۰ هزار وب‌سایت توسط حدود ۴۰ هزار کاربر با سایت‌ساز سی فایو راه‌اندازی شده است. از جمله امکانات سی فایو ساخت نامحدود صفحات متنوع، فضای میزبانی رایگان، ایجاد نامحدود منو، منوهای آبشاری چند ستونه، اسلایدهای حرفه‌ای لایه‌ای، فرم‌ساز‌های پیشرفته دراگ دراپ با قابلیت پیگیری، فروشگاه آنلاین و سبد خرید، گالری تصاویر و نمونه کارهای دسته‌بندی‌شده با افکت‌های مختلف، پشتیبانی از طراحی تک‌صفحه‌ای، امکان نمایش ویدئو، تصاویر تمام‌عرض با قابلیت پارالاکس، فونت‌های متنوع، قابلیت تغییر رنگ‌بندی و ساختار تمام بخش‌های سایت، خبرنامه، اتصال به پیامک، امکان ایجاد شناسع ایمیل نامحدود و امکان گفت‌وگوی آنلاین با کاربران. (این سایت ساز در ویرایش و بروز رسانی مطلب بلاگ اضافه شده است.)

  41. آ پاسخ

    سلام
    خدا قوت هموطن. در زمانه ای که همه چیز پولی شده اما دلهای ثروتمندی چون دل شما هس. دوام عزت شما را از خداوند خواهانم.
    تشکر فراوان از لطف بیکران شما بابت فیلمهای رایگان اما عالی

  42. reza پاسخ

    با سلام آموزش طراحی سایت از ۱۲ به بعد دانلود نمیشه

  43. احسان پاسخ

    سلام .لینک های دانلود از فیلم ۲به بعد کار نمیکنه لطفا اصلاح کنید وقتی میزنم به یک نشانی دیگر هدایت میکند و خطای ۵۰۴میدهد.

    • جواد عوض زاده

      سلام
      لینک ها بررسی شد و مشکلی ندارن
      به چه سایتی میرن!؟

  44. Mohsen پاسخ

    سلام اقا
    ممنون از آموزش خوبتون.فقط یه چیزی آموزشایی ک شما گذاشتید بیشتر واسهcssهستن و فقط دو قسمت اولhtml رو به صورت فشرده توضیح دادین و بعد اون یه دو سه قسمتhtmlتوضیح دادید.

    • جواد عوض زاده

      خب؟
      سبک آموزش اچ‌تی‌ام‌ال در این دوره در حین سی‌اس‌اس هست و نه به‌صورت مجزا

    • Mohsen

      فقط یه چیزی تو آموزشاتونhtmlوhtml5رو کامل توضیح دادید.؟

  45. علی پاسخ

    سلام استاد ممنون از مطالب عالیتون ، خواستم سوال کنم راجع به امنیت شبکه مطلب نمیزارید؟ تشکر

  46. این نوشته در مطلبی با عنوان آموزش ساده و سریع طراحی وب منتشر شده است

  47. saeed پاسخ

    سلام و تشکر از مطالب خوبتون ، در صورت امکان لینک طراحی وب و پی اچ پی را در یک فایل زیپ قرار بدین تا راحت تر بشه دانلود کرد یعنی همه ی آموزش را در یک فایل دانلود قرار بدین. با تشکر / سعید جعفریان از ارومیه

    • جواد عوض زاده

      سلام
      قرار نیست اینجا هم مثه بقیه سایت‌های دانلودی باشه که همه رو دانلود کنید و آرشیو کنید.
      هر زمان نیاز داشتید می‌تونید اون قسمت خاص رو باز کنید و مشاهده یا دانلود کنید.
      برای دانلود همه هم البته کاری نداره، اگه نرم‌افزار دانلود داشته باشید فقط کافیه همه لینک‌ها رو انتخاب کنید و کلیک راست و دانلود رو بزنید.