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

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

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

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

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

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

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

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

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

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

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

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

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

که در مثال بالا یک عدد تگ 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