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

1605 روز پیش

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

html & css learning video

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

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

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

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

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

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

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

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

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

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

دانلود

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

دانلود کنید

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

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

  1. فرید پاسخ

    سلام.. توی ویدئو همش از یه آموزش قبلی صحبت میکنید که برای دانش پذیر ها گذاشتید. منظورتون از آموزش قبلی HTML همون فایل PowerPoint هستش؟ چون میخوام HTML رو به صورت کامل یاد بگیرم. ممنون

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

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

  2. عرفان پاسخ

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

  3. mohammad پاسخ

    واقا خسته نباشید مرسی از لطفتون

  4. علی پاسخ

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

  5. H پاسخ

    سلام استاد
    خیلی وقت با سایتتون اشنا شدم
    مقدمات رو از سایت شما یاد گرفتم اموزش هاتون بسیار عالی بود 🙂
    منتظر اموزش های بعدی نیز هستیم

  6. مسعود صولتی پاسخ

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

  7. علی پاسخ

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

  8. پویان ایزدی پاسخ

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

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

    سلام استاد
    عذر میخوام تو بخش اول فرمودید پوشه ermile ، این پوشه کجا هستش یا باید از جایی دانلود کنیم من متوجه نشدم ممنون میشم راهنمایی کنید

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

      سلام. نه خودتون این پوشه رو بسازید.
      اگر هم منظورتون فریم‌ورک سی‌اس‌اس هست، میتونید از طریق وب‌سایت سیفتال به اون دسترسی داشته باشید.

  10. ehsan پاسخ

    سلام ببخشید اینجا طراحی سایت رو کامل یاد میگیرم؟؟؟

  11. ehsan پاسخ

    سلام ببخشید اینجا طراحی سایت رو کامل یاد میگیرم؟؟؟
    و امنیت سایت رو هم یاد میگیرم؟؟؟

  12. مصطفی پاسخ

    ممنون از متن زیبای شما در زمینه طراحی وب. پیروز باشید

  13. مهدی پاسخ

    با سلام.با تشکر از فیلم های رایگان خوبتان.ایا با یادگیری این اموزش ها می شود سایت مثل هممه ی سایت ها مثل سایت خودتان یا ویکی پدیاو… ساخت؟

  14. سعید سلیمانی پاسخ

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

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

      سلام
      با css می‌تونید این تغییرات ظاهری رو به‌راحتی اعمال کنید. css می‌تونه توی همون فایل html قرار بگیره.

    • سعید سلیمانی

      توی اموزش هایی که در سایت قرار دادید ایم موضوع هستش

  15. حسن پاسخ

    سلام خیلی ممنونم بابت اینکه از خود مرجع w3s تدریس کردید ببخشید فایلی همراه پروژه نیست

  16. سعید سلیمانی پاسخ

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

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

    سلام استاد با تشکر از زحماتتان لطفا اموزش javascript Asp.net angularjs ajax را اگه میشه قرار دهید خدا شما را حفظ کند ممنون

  18. هاکان پاسخ

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

  19. سروش پاسخ

    سلام آقای عوض زاده میشه لطفا اموزش JavaScript و پیتون هم تو سایتتون بزارین راستی جاوا اسکریپت رو کی میزارین؟؟؟

  20. محیا پاسخ

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

  21. Web پاسخ

    خیلی ممنون از شما!

  22. پوریا پاسخ

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

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

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

  23. محمد پاسخ

    ببخشید بعد از این دوره چه زبونی رو باید واسه طراحی سایت یاد بگیرم

  24. ali پاسخ

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

  25. بهمن حجتی پاسخ

    با سلام
    اقای مهندس میشه بفرمائید برای SEO سایتی که با CSS طراحی شده چگونه میتوان برچسب و خلاصه نتایج گوگل ادورز را اعمال کرد

  26. حسین پاسخ

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

  27. حبیب پاسخ

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

  28. شیلا پاسخ

    سلام نمیشه یجا دانلود بشه ؟

  29. امیر پاسخ

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

  30. امیر پاسخ

    عالی بود.
    فقط یه مشکلی هست. من وقتی فایل tex doucument رو باز میکنم آخرش .txt رو نمینویسه و وقتی میزنم .html هیچ فرقی نمیکنه. چیکار کنم ترخدا راهنمایی کنید.

  31. mohammad پاسخ

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

  32. فاطمه محمدی پاسخ

    عالی و مفید بود. ممنون

  33. ساجد پاسخ

    سلام
    کارتون خیلی عالیہ
    خدا خیر تون بدہ

  34. مسعود پاسخ

    خیلی باشعور و انسانی مرسی

  35. erfanpro پاسخ

    پروژه ی عملی از قسمت چند تا چنده؟

  36. فاطمه پاسخ

    سلام خسته نباشید
    من از نرم افزار برکتس استفاده میکنم. وقتی میخوای به تگ a استایل بدم hover یا بقیه استایل هارو نمیگیره ینی میزنم a:hover کلمه hover مشکی میشه و انکار عمل نمیکنه ، ولی واسه بقیه تگ ها درسته فقط استایل های a رو نمیگیره. چیکار کنم؟

  37. محمد پاسخ

    سلام قسمت ۲۱ همون قسمت ۲۰ هستش
    لطفا اصلاح کنید

  38. مصطفی پاسخ

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

  39. sara پاسخ

    وقت بخیر
    واقعا عالی بود.تشکر

  40. سایه پاسخ

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

  41. ali tolou پاسخ

    سلام جواد آقا . . . اجازه دارم با ذکر منبع این پست رو توی وبلاگم بزارم؟

  42. لرنو وب پاسخ

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