دوره ی آموزش turbo html css

دوره ی آموزش turbo html css
نکات مهم درباره ی این محصول
دوره بصورت فایل های ویدیویی با متعلقات موجود تحویل داده میشود
دوره دارای پشتیبانی آنلاین میباشد
کپی رایت این محصول برای سایت avasam.ir میباشد
ثبت نام در دوره فوری و همان لحظه ی درخواست شما می باشد
جزئیات محصول
تعداد جلسات: ۱۰ جلسه
سورس کدتمرینی: دارد
مدرس: مهندس سام نیکزاد
شرکت کننده : ۱۷۳۴ نفر
ضمانت بازگشت : تا یک هفته
۱,۰۰۰,۰۰۰ تومان
۷۵%
۲۵۰,۰۰۰ تومان
این محصول در لیست شگفت انگیز بعلت پرفروش بودن در هفته ی گذشته قرار گرفت. با تخفیف بالای ۵۰٪ شرکت کنید

تاریخ اتمام تخفیف : پایان روز یکشنبه ۱۲ فروردین ۱۴۰۳

سام نیکزاد
مدرس : سام نیکزاد

کارشناسی مهندسی نرم افزار
کارشناس ارشد هوش مصنوعی
تجربه تدریس برنامه نویسی از ۱۳۹۲

نیاز به کمک داری ؟ پشتیبانی ما در تلگرام و واتساپ پاسخگوی شماست ۰۹۳۵۴۸۸۷۳۴۴

سرفصل های دوره ی آموزش turbo html css

+ جلسه ۱

رایگان

در جلسه ی اول از دوره ی آموزش توربو html css گروه آموزشی آواسام مهندس نیک زاد درباره ی مبانی ابتدایی زبان برنامه نویسی html و css صحبت خواهند کرد.

شاید برای شما هم سوال باشد که : 

  • زبان html یا html 5 چیست ؟ 
  • زبان css چیست ؟
  • کاربرد html و css در طراحی وب چیست ؟ 

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

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

+ جلسه ۲

رایگان

در جلسه ی دوم از دوره ی آموزش توربو HTML و CSS به بحث تگ ها در زبان HTML پرداخته میشود.

 

تگ ها در html چیست ؟ 

 

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

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

 

آموزش استفاده از تگ های HTML

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

تگ ها به صورت زیر تعریف میشوند : 

hello

که در مثال بالا یک عدد تگ div ایجاد شده و عبارت hello درون محتوای این تگ قرار گرفته است. تگ های html به دو صورت بسته میشود. یکی اینکه همان تگ شروع را نوشته و یک علامت اسلش در ابتدای ان قرار میگیرد یا اینکه مثل تگ زیر در همان جایی که باز شده است بسته میشود و نقطه ی انتهای تگ خود تگ است :

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

  • html
  • body
  • head
  • title
  • div
  • img
  • br
  • hr
  • h1 h2 h3 h4 h5 h6 
  • p
  • b
  • i
  • ul li
  • strike
  • small
  • a

 

 

پایان توضیحات جلسه دوم

+ جلسه ۳

قفل

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

  1. آموزش ایجاد Table یا جدول با سطر و ستون های دلخواه توسط html
  2. آموزش استایل دهی به table و سطر و ستون های آن توسط css
  3. آموزش کار با تگ video در اچ تی ام ال و قرار دادن ویدیو در وب
  4. آموزش کار با تگ audio در اچ تی ام ال و قرار دادن صدا در وب
  5. آموزش strike در اچ تی ام ال
  6. آموزش comment گذاری در سند html
  7. آموزش تگ های meta در سند html 
  8. آموزش استایل دهی css برای بک گراند همچون background color , image , position و ...
  9. آموزش کار با ویژگی های link visited hover active با استفاده از css
برای دیدن این جلسه باید کل دوره را بخرید :) خرید دوره

+ جلسه ۴

قفل

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

در این جلسه به input ها یا ورودی های مختلف در فرم میپردازیم و به آنها با استفاده از css استایل میدهیم.

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

  1. آموزش ایجاد form با استفاده از html 
  2. آموزش ایجاد انواع input ها برای فرم 
  3. آموزش ایجاد options در فرم ها 
  4. آموزش کار با font و ویژگی های وابسته ی آن در css
  5. آموزش کار با text و ویژگی های مرتبط با آن در css
  6. آموزش کار با ویژگی padding و margin در css
  7. آموزش کار با ویژگی border با css

 

برای دیدن این جلسه باید کل دوره را بخرید :) خرید دوره

+ جلسه ۵

قفل

در جلسه ی ۵ به مدیریت نشانگر ماوس یا cursor ماوس با استفاده از css میپردازیم. از آنجایی که توانایی درک و کنترل رفتار ماوس در آینده مهم هست این جلسه بصورت اختصاصی به تمام حالت های mouse پرداخته میشود.

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

بصورت کلی موضوعات زیر در این جلسه بصورت کامل آموزش داده شده است : 

  1. .alias {cursor: alias;}
  2. .all-scroll {cursor: all-scroll;}
  3. .auto {cursor: auto;}
  4. .cell {cursor: cell;}
  5. .context-menu {cursor: context-menu;}
  6. .col-resize {cursor: col-resize;}
  7. .copy {cursor: copy;}
  8. .crosshair {cursor: crosshair;}
  9. .default {cursor: default;}
  10. .e-resize {cursor: e-resize;}
  11. .ew-resize {cursor: ew-resize;}
  12. .grab {cursor: grab;}
  13. .grabbing {cursor: grabbing;}
  14. .help {cursor: help;}
  15. .move {cursor: move;}
  16. .n-resize {cursor: n-resize;}
  17. .ne-resize {cursor: ne-resize;}
  18. .nesw-resize {cursor: nesw-resize;}
  19. .ns-resize {cursor: ns-resize;}
  20. .nw-resize {cursor: nw-resize;}
  21. .nwse-resize {cursor: nwse-resize;}
  22. .no-drop {cursor: no-drop;}
  23. .none {cursor: none;}
  24. .not-allowed {cursor: not-allowed;}
  25. .pointer {cursor: pointer;}
  26. .progress {cursor: progress;}
  27. .row-resize {cursor: row-resize;}
  28. .s-resize {cursor: s-resize;}
  29. .se-resize {cursor: se-resize;}
  30. .sw-resize {cursor: sw-resize;}
  31. .text {cursor: text;}
  32. .url {cursor: url(myBall.cur),auto;}
  33. .w-resize {cursor: w-resize;}
  34. .wait {cursor: wait;}
  35. .zoom-in {cursor: zoom-in;}
  36. .zoom-out {cursor: zoom-out;}
برای دیدن این جلسه باید کل دوره را بخرید :) خرید دوره

+ جلسه ۶

قفل

در جلسه ی ۶ ام از دوره ی آموزش Turbo html css به مباحث پیشرفته تری از css خواهیم پرداخت و بیشتر تمرکز این جلسه بر روی نحوه ی نمایش عناصر روی صفحه هست. منظور از نحوه ی نمایش محل قرار گیری عناصر و واکنش آنها نسبت به همدیگر میباشد. فرض کنید روی صفحه قصد دارید سه عنصر را بصورت شناور و روی هم نمایش دهید شاید هم قصد داشته باشید آنها بعنوان مکعب های فیزیکی در نظر گرفته شوند و بدون تداخل به مرز همدیگر در کنار هم قرار بگیرند. این توانایی ها را css به توسعه دهندگان وب میدهد.

همچنین در این جلسه به آموزش مهمتری میپردازیم به اسم font-face که وظیفه ی رندر کردن انواع فونت ها روی وب سایت ما را دارد. باا این کد دیگر اهمیت ندارد فونت دلخواه روی کامپیوتر یا گوشی کاربری که سایت را تماشا میکند نصب هست یا نه ... چون فونت از سمت سرور رندر میشود.

بصورت کلی موضوعات زیر در این جلسه ی آموزشی تدریس میشود : 

  1. آموزش مدیریت نمایش یا عدم نمایش یک تگ با CSS
  2. آموزش کار با ویژگی position و بررسی انواع مختلف آن
  3. آموزش مفهوم z-index در css
  4. آموزش کار با font-face
  5. آموزش import کردن یک فایل css در دیگری
  6. آموزش کار با media کوئری و مدیریت صفحه
  7. آموزش ریسپانسیو کردن سایت با استفاده از media

 

برای دیدن این جلسه باید کل دوره را بخرید :) خرید دوره

+ جلسه ۷

قفل

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

با پیشرفت کردن تکنولوژی و بوجود آمدن دستگاه های هوشمند با صفحات نمایش مختلف ، سایت ها نیز باید توانایی نمایش درست و خوب عناصر به انواع رزولیشین ها را داشته باشند به همین علت یک مبحث پیشرفته ی دیگری نیز مطرح شده به نام flex-box که در ادامه ی این جلسه به آموزش کامل و مفهومی flex-box نیز میپردازیم.

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

  1. آموزش ویژگی display در css و انواع حالت های نمایش عناصر 
  2. بررسی تفاوت display و float برای نمایش عناصر html
  3. آموزش مفهومی flex-box و کاربرد آن در وب
  4. آموزش ریسپانسیو سازی سایت با flex-box و media 
برای دیدن این جلسه باید کل دوره را بخرید :) خرید دوره

+ جلسه ۸

قفل

جلسه ی هشتم ادامه ی بحث مهم flex-box در css هست که انواع مختلف نمایش ها با استفاده از سیستم flexbox را یاد خواهید گرفت. بصورت کلی موضوعات زیر در این جلسه بصورت کامل تدریس خواهد شد : 

 

  1. آموزش انواع flex-direction ها 
  2. آموزش ویژگی justify-content
  3. آموزش ویژگی flex-grow 
  4. آموزش ویژگی flex-shrink
برای دیدن این جلسه باید کل دوره را بخرید :) خرید دوره

+ جلسه ۹

قفل

جلسه ی نهم از دوره ی آموزش turbo html css یک جلسه ی پروژه محور برای یادگیری بیشتر مباحث تدریس شده مخصوصا flxe-box هست.

در این جلسه یک گالری تصاویر با استفاده از flex-box بصورت کاملا ریسپانسیو میسازیم و خیلی از مباحث را یاد میگیریم.

 

برای دیدن این جلسه باید کل دوره را بخرید :) خرید دوره

+ جلسه ۱۰

قفل

در جلسه ۱۰ که جلسه ی آخر هست به جمع بندی مباحث تدریش شده در جلسات قبلی میپردازیم و مباحث جدیدی نیز آموزش میدهیم که شامل موارد زیر هست : 

  1. آموزش مفهوم framework در css
  2. معرفی فریمورک Bulma و نحوه ی دانلود و استفاده از آن
  3. بررسی ویژگی های Bulma
  4. معرفی سایت codepen ونحوه ی استفاده از آن
  5. آموزش افزودن bulma به codepen و نوشتن اولین کدها با bulma
  6. آموزش استفاده از کلاس های آماده bulma
  7. معرفی و نحوه استفاده از فریمورک Tailwindcss
  8. معرفی فریمورک بوت استرپ ( bootstrap )
  9. معرفی فریمورک skeleton
  10. معرفی فریمورک foundation

 

برای دیدن این جلسه باید کل دوره را بخرید :) خرید دوره
ممکن است توضیحات برخی جلسات را در لیست سرفصل ها نبینید و این اتفاق به دلیل تکمیل نوشتاری سرفصل ها است و به معنی این نیست که آن جلسه بصورت ویدیویی موجود نیست

توضیحات و جزئیات :‌

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

ویدیو معرفی این دوره را تماشا کنید :‌

 

html و css را چرا و چه کسانی باید یاد بگیرند ؟‌

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

html چیست ؟‌ html یا اچ تی ام ال یک زبان نشانه گذاری هست درست مثل xml که با استفاده از آن میتوانید یک سند html که سازنده ی صفحات وب هست را به قسمت های مختلف با ویژگی های مختلف تقسیم بندی کنید و صفحه ی وب را بسازید.

css چیست ؟ css یا سی اس اس که مخفف cascading style sheet هست به تگ های html استایل میدهد و آنرا برای کاربری که از سایت تماشا میکند شکیل تر و قابل فهم تر میکند. پس کار css در کل استایل دهی و روح دهی به صفحات خشک و خالی html هست.

 

پس همانطور که از تعاریف متوجه شدیم html و css دو عنصر جدایی ناپذیر در ساخت وب هستند و تمامی دولوپرهای وب چه آنهایی که فرانت اند کار هستند و چه آنهایی که بک اند باید دانش کافی از html و css داشته باشند ولی به افرادی که فرانت هستند بیشتر توصیه میشود چون جزو تخصص های اصلی fron-end محسوب میشود.

 

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

دوره ی آموزش Turbo html css توسط مهندس سام نیکزاد ( کارشناس مهندسی کامپیوتر - نرم افزار )‌ تدریس میشود که از سال ۲۰۰۹ بصورت حرفه ای در زمینه ی وب برنامه نویسی میکند و از سال ۲۰۱۲ بصورت حرفه ای مشغول تدریس برنامه نویسی هستند . 

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

 

بعد از اتمام دوره چه تخصص هایی کسب خواهم کرد ‌؟ 

بعد از طی کردن دوره ی آموزش turbo html css توانایی ها و تخصص های زیر را کسب  خواهید کرد  : 

  1. درک مفهومی HTML و توانایی کامل در کار با تگ ها
  2. درک مفهومی CSS و استایل نویسی برای صفحات وب
  3. تبدیل تصاویر به صفحه ی وب 
  4. درک مفهوم واکنشگرایی ( responsive ) در وب
  5. مفاهیم پیشرفته مثل flexbox و media و ...

 

 

محصولات پیشنهادی
افرادی که از دوره های آموزشی آواسام استفاده کرده اند توانسته اند با شرکت های زیر همکاری داشته باشند
آواسام
آواسام
آواسام
آواسام
آواسام
آواسام
آواسام
آواسام
آواسام
آواسام
نظر کاربران ما درباره ی محصولات ما : لطفا گوش دهید

شما هم اگر از کاربران ما هستید نظر خود را به سیستم پشتیبانی بصورت ویس ارسال کنید تا بعد از تایید در این بخش قرار گیرد همچنین میتوانید ویس خود را ایمیل کنید : info@avasam.ir
.:: نظرهای کاربران ::.
رضا بیات

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

بازم مرسی از همگی

زهرا ‍

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

ابراهیم اسلامی

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