دوره آموزش HTML و CSS


پکیج آموزش html و css

دوره آموزش HTML و CSS به صورت ویدیویی و پروژه محور : این دوره قدم اول طراحی وب‌سایت است. یعنی برای ورود به دنیای طراحی وب باید به این دو مبحث مسلط باشید.

در این دوره سعی‌ کرده‌ایم تمامی نکات کاربردی HTML5 و CSS3 (به روز‌ترین‌ها) را به زبانی بسیار ساده و در قالب پروژه از صفر (مباحث ابتدایی وب) تا مباحث پیشرفته و حرفه‌ای بیان کنیم. واقعیت این است که هرچقدر هم به مباحث مختلف وب و زبان‌های برنامه‌نویسی آشنایی داشته باشید، باز هم در طراحی وب عدم تسلط شما در HTML و CSS گریبان‌گیرتان خواهد بود.

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

 

چرا باید طراحی وب‌سایت را بیاموزیم؟

مزیت‌های این شغل بیشتر از آن چیزی است که فکر می‌کنید. هرچه که زمان می‌گذرد و وابستگی به تکنولوژی بیشتر می‌شود این کارهم رونق بیشتری می‌یابد. در ادامه چند مورد از مزیت‌های این کار را بررسی می‌کنیم:

۱- استقلال: در این شغل کاملا استقلال دارید. اگر دوست ندارید برای دیگران کار کنید یا در شرکتی استخدام شوید به راحتی به صورت آزادکاری (فریلنسری) کار کنید.

۲- در حال توسعه: بازار کار این شغل واقعا داغ داغ است. محال است به مباحث مسلط باشید و بیکار بمانید! در ایران هم اهمیت داشتن وب‌سایت برای اکثر کسب‌وکارها روشن شده و باعث افزایش تقاضاها در این زمینه شده است.

۳- درآمد مناسب: حتی در دوران رکود هم شاهد درآمدهای بالای طراحان وب هستیم. از آنجا که بازارکار این رشته مناسب است فقط باید تلاش کنید تا به این بازار وارد شوید. درآمد مبلغی این شغل در اکثر کشورهای دنیا و البته در ایران مناسب است.

۴- انعطاف بالا در نحوه کار کردن: در این کار بایدی وجود ندارد. شما می‌توانید در قالب یک تیم فعالیت کنید یا به صورت تک‌نفره به کار مشغول شوید. تعیین کنید در خانه کار می‌کنید یا در یک دفتر و ساعات کاری دلخواه خود را داشته باشید.

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

 

طراحی وب‌سایت را از کجا شروع کنیم؟

برای شروع طراحی وب‌سایت قبلاً در نقشه راه طراحی وب، بیان کرده بودیم که باید از آموزش HTML و CSS و مبانی وب، کار را شروع کنید. بعد از آن به سراغ سایر مباحث فرانت‌اند مثل java script بروید. در اینجا هم می‌توانید مسیر اصلی خود را انتخاب کنید که اگر قصد دارید یک برنامه‌نویس وب شوید به سراغ یادگیری زبان برنامه‌نویسی بروید و اگر می‌خواهید طراح وب باشید به تکمیل مباحث طراحی بپردازید.

پس در هر صورت شروع کار شما با آموزش HTML و CSS خواهد بود و بعد از آن java script یا jquery در تکمیل مباحث وب به شما کمک خواهد کرد. البته در دوره آموزش HTML و CSS که پیش روی شماست ما مسیر یادگیری را برای شما به خوبی توضیح داده‌ایم تا ابهامی در این زمینه باقی نماند.

 

معرفی دوره آموزش HTML و CSS

در دوره آموزش ویدیویی HTML و CSS ادمین‌سایت، آموزش با تکمیل مفاهیم ابتدایی و مبانی وب آغاز می‌شود و با مباحث پیشرفته و پوشش کامل مباحث حرفه‌ای اتمام می‌یابد. نکته‌ای که سعی کرده‌ایم در طول دوره به آن توجه کنیم، خارج کردن آموزش از حالت تئوریات است. در این پکیج آموزشی ما مباحث گوناگون را با چندین مینی پروژه پیش خواهیم برد و در انتهای دوره یک صفحه وب‌سایت کامل را کدنویسی می‌کنیم.

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

 

پکیج آموزش طراحی وب‌سایت با html و css

پیش‌نیاز دوره

این دوره به هیچ پیش‌نیازی احتیاج ندارد و تمامی مطالب به زبان ساده و از صفر آموزش داده می‌شوند.

روش دریافت آموزش‌ها

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

 

 

بعد از تماشای این دوره آموزشی:

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

 

چرا ادمین‌سایت را برای آموزش طراحی وب‌سایت انتخاب کنم؟

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

 

توجه: از آنجایی که دوره در حال ضبط می‌باشد، طول دوره و تعداد جلسات به صورت تخمینی درج شده‌اند، ممکن است بر حسب نیاز در سرفصل‌ها تغییر اندکی ایجاد شود.

 

تاریخ آخرین بروزرسانی دوره : ۲۴ شهریور ۱۴۰۰
میزان پیشروی دوره: 99٪

 

دمو پکیج آموزش ویدیویی HTML و CSS

سرفصل دوره

جلسه اول: معرفی HTML و CSS

  • HTML چیست؟
  • تگ (Tag) چیست؟
  • آشنایی با Web Browser ها و نحوه کارکردن‌ آنها
  • ساختار صفحات HTML
  • CSS چیست؟
  • چرا باید از CSS استفاده کنیم؟

جلسه دوم: پایه HTML

  • نحوه ذخیره‌سازی و اجرای کد‌های HTML
  • معرفی ادیتور notepad++ و sublime text
  • ساختار کدهای HTML
  • عناصر HTML
  • عناصر تودرتو
  • عناصر تهی
  • معرفی خصیصه‌ها (attributes)
  • حساس به متن بودن در HTML

جلسه سوم: معرفی تگ‌های HTML (بخش اول)

  • مجموعه تگ‌های Heading + نکات
  • تگ hr (ایجاد خطوط افقی)
  • تگ پاراگراف + نکات
  • تگ br (شکستن خط)
  • تگ pre
  • قالب‌بندی متن (b, strong, i, em, del, sub, sup, abbr)
  • تگ نقل قول (q و blockquote)
  • تگ address
  • نحوه درج کامنت در کدهای HTML
  • کار با inspect element مرورگر

جلسه چهارم: پایه CSS

  • Syntax کدهای CSS
  • روش‌های اضافه کردن CSS به صفحه وب (Inline – Internal - External)
  • انتخابگر‌های پایه CSS
  • تفاوت بین id و class + نکات
  • اولویت اعمال استایل در انواع روش‌ها
  • ایجاد comment در CSS

جلسه پنجم: معرفی ویژگی‌های CSS (بخش اول)

  • ویژگی color
  • ویژگی width/height
  • ویژگی padding + مشتقات آن
  • ویژگی margin + مشتقات آن
  • ویژگی border + مشتقات آن
  • انواع واحد‌های اندازه گیری
  • واحدهای اندازه گیری نسبی و مطلق
  • انواع سیستم‌های رنگ (hex, rgb, rgba, hsl, hsla)

جلسه ششم: معرفی تگ‌های HTML (بخش دوم)

  • تگ a (ایجاد لینک در صفحات وب) + نکات
  • تگ img
  • انواع مسیردهی (نسبی و مطلق)
  • تگ table + نکات
  • انواع لیست (ol و ul) + نکات

جلسه هفتم: بلاک‌ها

  • عناصر block-level و inline-level
  • معرفی تگ div و span
  • ویژگی display در CSS
  • ساختار کلی باکس‌ها (Margin – Border – Padding - Content)
  • ویژگی box-sizing
  • ویژگی outline + مشتقات آن

جلسه هشتم: معرفی ویژگی‌های CSS (بخش دوم)

  • ویژگی Background + مشتقات آن
  • کار با max-width و max-height
  • کار با float و چیدمان عناصر + نکات
  • ویژگی overflow
  • کار با متون در CSS

جلسه نهم: معرفی تگ‌های HTML (بخش سوم)

  • کار با تگ Iframe
  • فراخوانی کدهای جاوااسکریپت با تگ script
  • تگ meta + نکات
  • تگ code

جلسه دهم: عناصر layout در HTML

  • معرفی تگ section
  • معرفی تگ article
  • معرفی تگ header
  • معرفی تگ footer
  • معرفی تگ nav
  • معرفی تگ aside
  • معرفی تگ figure و figcaption

جلسه یازدهم: ایجاد فرم‌ها در HTML

  • معرفی تگ فرم و خصیصه‌های آن
  • کار با متد GET و POST
  • کار با تگ input
  • معرفی انواع input type
  • خصیصه‌های مهم input
  • کار با تگ select
  • کار با تگ textarea
  • کار با تگ button
  • معرفی تگ‌های fieldset و legend

جلسه دوازدهم: انتخابگر‌های پیشرفته CSS

  • انتخابگر پدر و فرزندی
  • انتخابگر خواهر و برادری
  • انتخاب بر اساس وضعیت ماوس
  • انتخاب بر اساس جایگاه عنصر
  • انتخاب بر اساس وضعیت لینک‌ها
  • انتخاب بر اساس وضعیت فیلدهای فرم
  • انتخاب عنصر بر اساس attrtibute ‌های آن
  • شبه عنصر
  • محاسبه اولویت انتخابگر‌ها

جلسه سیزدهم: معرفی ویژگی‌های CSS (بخش سوم)

  • ویژگی opacity + مقایسه آن با background شفاف
  • ویژگی border-radius + مشتقات آن
  • ویژگی‌های box-shadow و text-shadow
  • ویژگی object-fit

جلسه چهاردهم: معرفی عناصر ‌مدیا در HTML

  • کار با تگ video
  • کار با تگ audio
  • معرفی تگ source
  • تگ object و embed

جلسه پانزدهم: مباحث پیشرفته

  • Gradient background
  • ویژگی‌های text-overflow و word-wrap و word-break
  • ویژگی transition + مشتقات آن
  • ویژگی transform + توابع آن
  • کار با keyframes و ویژگی animation
  • کار با سیستم چند ستونه و ویژگی column
  • کار با Flexbox ها و ویژگی‌های مربوط به آن
  • کار با کوئری @media

مباحثی که در پروژه به آنها می‌پردازیم

  • کار با @font-face در CSS
  • کار با فونت آیکون‌ها
  • طراحی ریسپانسیو
  • ایجاد Tooltip حرفه‌ای
  • تعریف متغیر در CSS
۱۴۵ هزار تومان – پرداخت و دانلود محصول
امتیاز ۴.۲۵ از ۵ ۲۸ رای

دیدگاهتان را بنویسید

87 پاسخ به “دوره آموزش HTML و CSS”

  1. علیسان گفت:

    ممنون خیلی عالی بود

    • هدایتی گفت:

      سلام ببخشید می خواستم بدونم در این دوره، آموزش داده شده که چطور یک سایت داینامیک بسازیم؟ یعنی اینکه بتونیم از پیشخوان وردپرس مون سایتمون رو تغییر بدیم یا برای هر تغییر کوچکی باید به سراغ کد های فالبمون بریم؟ ممنون میشم پاسخ بدید.

    • سلام جناب هدایتی، همانطور که از اسم آموزش مشخصه این دوره html و css هستش، برای اینکه بتونید هدفی که فرمودید را اجرا کنید باید ابتدا html css جاوا اسکرپت رو یاد بگیرید و بعد به سراغ زبان بک‌اند php و توابع وردپرس برید.

  2. Mojtaba گفت:

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

    • سلام دوست عزیز. بله میتونید همه‌ی محصولات رو به سبد خریدتون اضافه کنید و یکجا پرداخت کنید.
      اما در حال حاضر تخفیف کلی نداریم اما میتونید یه پشتیبانی تلگرام پیام بدید تا براتون کد تخفیفی رو ایجاد کنن.
      اما اموزش html‌و css ما در حال تکمیل هستش و هفتگی ارائه میشه و خب فعلا دریافت یکجا نداره

  3. سمیرا گفت:

    سلام وقت به خیر
    من می خوام برای خرید این دوره اقدام کنم
    دو سوال دارم یکی اینکه امروز 8 بهمن 99 هست و در تمام توضیحات شما تاریخی درج نشده من متوجه بشم این پست شما جدی هست واین دوره در چه تاریخی داره برگزار میشه
    دوم اینکه هزینه 145 هزار تومن نوشته شده اما در مجموع می نویسه 290 هزار تومن می فرمایید چرا متفاوت هست؟

    • سلام وقت بخیر
      این دوره هم‌اکنون در حال برگزاری هستش.
      زمانی که دوبار روی دکمه خرید کلیک کنید از این محصول ۲ نسخه در سبد خرید شما قرار میگیره،باید به سبد خریدتون مراجعه کنید تعداد لایسنس رو به ۱ تغییر بدید یا محصول رو حذف و مجدد اضافه کنید.

  4. آزاده رسولی گفت:

    سلام وقتتون بخیر من دوره را خریداری کردم و در آخر بدون توجه به قیمت پرداخت انجام دادم و الان تو این صفحه میبینم دوره 145 هزار تومان است من 203000 تومان پرداخت کردم ممنون میشم رسیدگی کنید

  5. سینا بیگ نظری گفت:

    سلام و خسته نباشید بابت محتوای باکیفیتتون. یه سوال داشتم. طبق گفته خودتون بیشتر سایت ها با وردپرس و پلتفرم های مشابه طراحی میشن. خب پس چه نیازی به یادگیری html , css هست؟
    و یه موضوع دیگه. اگه امکانش هست برای دوره هاتون یه فایل pdf طراحی بکنید. چون یادداشت تمامی مواردی که استاد میگن واقعا طولانی .و خسته کننده میشه.
    بازم ممنون بخاطر پکیج خوبتون.

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

  6. ArMiN گفت:

    سلام و عرض ادب
    ببخشید در داخل پکیج ، فایل های پی دی اف هم هست ؟ (مثل پکیج سئو)

    • سلام دوست عزیز
      از اونجایی که هدف ما تهیه یه دوره پروژه محور بوده در این آموزش خیلی به سراغ متون و توضیحات اسلایدی یا pdf نرفتیم و سعی کردیم کار رو کد رو نشون بدیم. هر جلسه با هر فایلی که کار شده باشه (مثل کدها) ضمیمه دوره شده

  7. علیرضا زمانی گفت:

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

  8. Michael گفت:

    سلام ، دوره هاتون میشه گفت کامل هستن و نکات ریزم شامل میشن،فقط اگر در پایان دوره چند تمرین هم میزاشتید بهتر می شد و اینکه آیا مهندس سلطانی قصد اموزش دوره Javascript رو دارن ؟ که مانند همین دروه ویدویی قرار بدین روی سایت ؟

  9. kian گفت:

    سلام، آیا HTML5 و CSS3 هم تدریس میشن ؟
    میشه بفرمایید چه پروژه ای برای این دوره درنظر گرفته شده است ؟
    متشکرم

    • سلام بله html5 , css3
      در حال حاضر حدود ۸۰درصد دوره ضبط شده و چند مینی پروژه کار شده. اما پروژه نهایی موضوعش هنوز قطعی نشده به دنبال طراحی سایتی برای پروژه نهایی هستیم که مباحث و نکات زیادی رو در بر بگیره.

  10. Hossein گفت:

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

  11. Hosseinabbaspour گفت:

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

  12. زهرا محبی گفت:

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

    • سلام زهرا جان
      این دوره ازصفر تدریس شده به همین دلیل برای افراد مبتدی وکسانی که میخوان وارد این حوزه بشن مناسبه
      برای سئو حرفه‌ای هم بله لازمه تا این مهارت‌ها را یاد بگیرید.
      یادگیری این دوره بستگی به میزان وقتی که میذارید و پشتکار شما داره اما میتونید در ۱.۵-۲ ماه بهش مسلط بشید
      برای درآمدهم میتونه پیش نیازی برای درآمد باشه ولی به تنهایی کافی نیست چون باید برای طراحی وب بعدی javascript هم یادبگیرید

  13. پدرام تقی زاده گفت:

    سلام من چند روز پیش این دوره رو خریداری کردم خواستم ببینم بازم پروژه ای بهش اضافه میشه؟

  14. هلیا گفت:

    سلام . برای یادگیری این حرفه خفن ، شما از چه سنی پیشنهاد میکنید ؟ بنده ۱۵ ساله هستم و فکر می‌کنم هنوز زوده برای یادگیری . نظر شما چیست ؟ و اینکه درحال حاضر ، پکیجتون کامل شده ؟

    • سلام اگر فرصت یادگیری دارید در این چند سال مهارت‌های لازم رو یاد بگیرید تا در سن ۱۸، ۱۹ سالگی به یک متخصص تبدیل بشید.
      میزان پیشروی دوره در پایین نوشته ذکر شده

  15. آزاده گفت:

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

    • سلام به شما دوست عزیز، ممنونم که نظرتون رو درج کردید. بله کاملا حق باشماست و درست می‌فرمایید و ما از شما عذرخواهی میکنیم. متاسفانه مدتی برای مدرس دوره مشکلاتی ایجاد شد که نمی‌تونستن تدریس کنن و خیلی غیرمنتظرانه بود الان داریم با سرعت زیاد بقیه حلسات رو ضبط و منتشر می‌کنیم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *