آموزش جامع HTML5 و CSS3 در قالب پروژه‌ی عملی

آموزش جامع HTML5 و CSS3 در قالب پروژه‌ی عملی

اگر به دنبال یادگیری برنامه نویسی وب باشید احتمالا به خوبی می دانید که شروع برنامه نویسی وب با آموزش html و css می باشد و برای شروع کار ابتدا باید این دو زبان را به خوبی بیاموزید. قبل از اینکه به سراغ معرفی این دوره آموزشی برویم می خواهیم کمی در مورد HTML و CSS صحبت کنیم تا کمی بیشتر با آنها آشنا شوید.

HTML چیست؟

اچ تی ام ال یا HTML مخفف عبارت Hyper Text Markup Language به معنای “زبان نشانه گذاری متن” است. به طور معمول بر روی صفحات وب مجموعه ای از تصاویر، متون، جداول، ویدئوها و… وجود دارد که به کمک HTML شما می توانید آنها را مشاهده کنید. در اچ تی ام ال تگ های زیادی وجود دارند که هر کدام از آنها دارای معنا و مفهوم خاصی هستند. در واقع در زبان HTML بخش ها و کدهای مختلف توسط تگ ها از هم جدا می شوند و این تگ ها وظیفه چگونگی نمایش اطلاعات در صفحات مختلف وبسایت را بر عهده دارند.

Css چیست؟

css مخفف عبارت Cascading Style Sheets به معنای “برگه های آبشاری” می باشد. سی اس اس در واقع قابلیت صفحه آرایی، استایل دهی و زیباسازی صفحات وب را برای طراحان وب فراهم می کند. با استفاده از Css می توان تمامی رنگ ها، ابعاد، مکان های قرارگیری، فونت ها و… را تعیین کرد. سی اس اس در کنار HTML ظاهر وبسایت شما را می سازد. در واقع می توان گفت شما ساختار و اسکلت ظاهری یک وبسایت را با HTML و درادامه زیبا سازی و کاربر پسند کردن آن را به کمک CSS انجام می دهید.

در این دوره چه مباحثی آموزش داده شده است؟

ما در این دوره به طور جامع و پروژه محور به آموزش html و css خواهیم پرداخت. این دوره آموزشی به ۸ فصل تقسیم می شود.

1. در فصل اول که مقدمه می باشد در مورد مقدمات دوره و طراحی سایت با Html و Css صحبت می کنیم.
2. در فصل دوم از این دوره شما را با مباحث پایه ای HTML به طور کامل آشنا خواهیم کرد تا در فصل های آینده آمادگی کامل برای استفاده از آن را داشته باشید.
3. در فصل سوم نیز به سراغ آموزش CSS می رویم و شما را این زبان به طور کامل آشنا می کنیم.
4. در فصل چهارم به طور عمیق تر و تخصصی تر در مورد HTML صحبت می کنیم.
5. در فصل پنجم برایتان از فرم های HTML خواهیم گفت و در ادامه یک پروژه کوچک برای آماده سازی شما برای یادگیری پروژه اصلی انجام خواهیم داد.
6. در فصل ششم از این دوره آموزشی در مورد نحوه استفاده از ویدیو و موسیقی در وبسایت صحبت خواهیم کرد.
7. در نهایت در فصل هفتم پروژه اصلی این دوره را آغاز می کنیم و به طور گام به گام و به کمک HTML و CSS یک وبسایت را به طور کامل طراحی می کنیم.
8. در فصل هشتم و بعد از پایان پروژه در مورد گام های بعدی که باید طی کنید صحبت خواهیم کرد.

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

سرفصل های دوره آموزش Html و Css

فصل اول: آشنایی با دوره و پیش نیازهای آن

• آشنایی بادوره موزشی و پروژه ای که قصد طراحی آن را داریم
• نصب برنامه اتم و پکیج های آن برای استفاده در این دوره آموزشی

فصل دوم: آشنایی با مباحث پایه HTML

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

فصل سوم: آشنایی با مباحث پایه CSS

• آشنایی با ۳ روش برای نوشتن کدهای CSS
• نحوه نوشتن کد های CSS با تگ استایل
• آشنایی با اولویت بندی در انتخابگر ها در زبان CSS
• نحوه id دادن به تگ های HTML و انتخاب آنها با CSS
• نحوه important کردن دستورات CSS برای به ماکسیمم رساندن اولویت آن
• نحوه ضمیه کردن فایل های CSS و نوشتن دستورات آن در یک فایل مجزا
• آشنایی با راه های مختلف برای انتخاب رنگ ها در CSS
• یادگیری خاصیت های جدید در CSS
• نحوه تغییر display های پیشفرض HTML با دستورات CSS
• آشنایی با شبه کلاس ها و کاربرد آنها در CSS

فصل چهارم: عمیق شدن در مباحث HTML

• توضیحاتی راجع به برخی نکات متفرقه در زبان HTML
• آشنایی با console مرورگر و نحوه به کارگیری آن برای اشکال زدایی کدها و کاربرد های آن
• آشنایی با تگ iframe
• استفاده از تصاویر به عنوان لینک
• آشنایی با جداول
• آشنایی با لیست ها در زبان HTML
• آشنایی با تگ های پرکاربرد meta
• آشنایی با علائم و آیکون های HTML

فصل پنجم: آشنایی با فرم های HTML

• آشنایی با تگ فرم و کاربرد آن
• آشنایی با انواع ورودی ها در زبان HTML
• آشنایی با انواع عناصری که در فرم های HTML استفاده می شوند
• آشنایی با اتربیوت هایی که به عناصر موجود در فرم ها می چسبند.
• مینی پروژه طراحی صفحه ورود به حساب کاربری

فصل ششم: رسانه های صوتی تصویر

• آشنایی با تگ video و قرار دادن ویدئو در وبسایت
• آشنایی با تگ audio و قرار دادن موسیقی در وبسایت

فصل هفتم: انجام پروژ طراحی سایت

• ایجاد layout اولیه برای طراحی وبسایت
• طراحی navbar وبسایت
• طراحی header وبسایت
• زیباسازی و ارتقا header و navbar سایت
• ایجاد یک منوی dropdown برای navbar وبسایت
• راه اندازی مقدمات لازم برای ایجاد بخش های جدید در وبسایت
• ایجاد یک بخش جدید تحت عنوان دوره های آموزشی در وبسایت که بین header و footer قرار می گیرد
• استفاده از palette برای انتخاب رنگ های سایت
• افکت دادن به بخش دوره های آموزشی که در جلسات قبل ایجاد کردیم.
• توضیحاتی راجع به وبسایت ریسپانسیو و نحوه ریسپانسیو کردن وبسایت
• ایجاد بخش جدید برای ثبت نام
• ارتقا و زیبا سازی بخش ثبت نام
• طراحی footer وبسایت این پروژه

فصل هشتم: گام های بعدی

• نتیجه گیری از دوره و طرح گام های بعدی برای پیشرفت در برنامه نویسی

آیا این دوره پیش نیاز دارد؟

خیر، این دوره به صورت جامع بوده و دانشجویان برای گذراندن آن نیاز به پیش نیازی ندارند.

حاصل دوره آموزش جامع HTML5 و CSS3 در قالب پروژه‌ی عملی

از آنجایی که این دوره به طور جامع و پروژه محور می باشد، دانشجویان عزیز می توانند پس از گذراندن این دوره آموزشی یک وبسایت را به کمک HTML و CSS طراحی و پیاده سازی کنند.