HTML-CSS مقدماتی پایه و اساس هر وبسایت اینترنتی است. در واقع هر وبسایتی که در اینترنت مشاهده میکنید به زبان HTML-CSS طراحی شده است. بنابراین یادگیری این زبان برای افرادی که علاقه مند به حوزه طراحی سایت و کدنویسی هستند بسیار ضروری و مهم است.
HTML-CSS چه نوع زبان برنامه نویسی هست؟
در بحث طراحی وب دو نوع زبان برنامه نویسی( اسکریپت نویسی) وجود دارد.
- زبان های برنامه نویسی سمت سرور
- زبان های برنامه نویسی سمت کاربر
زبان های برنامه نویسی سمت سرور مانند PHP,ASP.NET,JAVA و … میباشند که در این دوره با آنها کاری نداریم و در دوره ای دیگر در مورد آنها صحبت میکنیم.
زبان های برنامه نویسی سمت کاربر به زبان هایی گفته میشود که در سمت کاربر یا Client اجرا میشوند و کاربر میتواند Source پروژه را نیز مشاهده کند.
اکثر زبان های برنامه نویسی سمت کاربر در بین تمامی وبسایت ها یکسان هستند و این زبان ها قالبا تکمیل کننده یکدیگر هستند. به این معنی که یک زبان جایگزین دیگری نیست و از همه آنها در پروژه استفاده میشود. در صورتی که زبان های برنامه نویسی سمت سرور قابلیت جایگزینی دارند و استفاده از چند زبان برنامه نویسی سمت سرور در یک پروژه خیلی ممکن نیست و حتی عجیب به نظر میرسد!
معرفی دوره HTML-CSS مقدماتی
در دوره HTML-CSS مقدماتی به اصلی ترین و پایه ای ترین زبان های کدنویسی سمت کاربر پرداخته ایم تا شما را با فرآیند طراحی سایت کمی بیشتر آشنا کنیم. در این دوره یاد میگیرید که یک وبسایت از چه عناصر و بخش هایی تکمیل میشود و چه فرآیندی را طی میکند تا کامل شود.
چرا باید در این دوره شرکت کنم؟
اگر همین الان در این دوره ثبت نام کنید و فیلم های آموزشی را خوب ببینید و تمرین کنید به سادگی در کمتر از 5 ساعت آینده یک متخصص HTML-CSS خواهید شد
اگر دوست دارید کدنویسی به زبان HTML-CSS را یاد بگیرید این دوره مخصوص شماست. در این دوره چهارده جلسه ای مجموعا 4 ساعت به صورت عملی و کاربردی به آموزش زبان HTML-CSS پرداختیم و از صفر صفر مباحث آموزشی را با هم یاد گرفتیم.
این دوره یکی از پایه ای ترین دوره های آموزشی طراحی سایت میباشد که برای هر فرد تازه کار در این رشته پیشنهاد میشود. اگر شما مایل هستید طراحی سایت با وردپرس را یاد بگیرید میتوانید از این دوره به عنوان یک پیش نیاز یا تکمیل کننده استفاده کنید تا دانش خودتان را در زمینه طراحی افزایش دهید و دست تان برای تغییر در قالب ها و کدهای وردپرس باز باشد.
سر فصل های دوره HTML-CSS مقدماتی
جلسه اول: آشنایی و معرفی – زمان: 19 دقیقه
- مقدمه و معرفی HTML
ابتدا با زبان HTML کمی آشنا می شویم و بررسی می کنیم که چه کاربردی دارد و دقیقا چیست!
- مقدمه و معرفی CSS
سپس زبان CSS را بررسی می کنیم و کارکرد آن را در وبسایت بررسی می کنیم
- ساختار صفحات وب
در این بخش ساختار صفحات وبسایت را به دقت بررسی می کنیم و کمی بیشتر با کدنویسی HTML آشنا خواهیم شد.
- ایجاد اولین صفحه وب
در این قسمت یک فایل خام HTML را بر روی کامپیوتر خودمان از صفر ایجاد می کنیم و آن را تکمیل می کنیم.
- فارسی نویسی در صفحات وب
در ادامه با متا تگ هایی آشنا می شویم که پشتیبانی از زبان فارسی را در صفحه وب امکان پذیر می کنند.
- آشنایی با تگ های اصلی HTML
در نهایت چند تگ اصلی HTML را بررسی می کنیم و مثال هایی عملی از نحوه استفاده از آنها می زنیم.
جلسه دوم: متاتگ ها و کلاس های CSS – زمان: 28 دقیقه
- بررسی متاتگ ها و Attribute
ابتدا متاتگ های اصلی و ویژگی های آنها را بررسی می کنیم.
- ایحاد فایل CSS
اولین فایل CSS را ایجاد می کنیم و با استفاده از آن به متن های فایل HTML استایل دهی می کنیم.
- کلاس دهی به تگ های HTML
با کلاس دهی به تگ های HTML آشنا می شویم و از آن کلاس ها در فایل CSS استفاده می کنیم.
- تفاوت بین Class و ID
تفاوت بین کلاس و آی دی را توضیح می دهیم و مثال های عملی از نحوه استفاده از آنها می زنیم.
جلسه سوم: آشنایی با چند اصطلاح پایه و جداول در HTML – زمان: 30 دقیقه
- مفهوم Property – Value _ Div
ابتدا چند تعریف اصلی و پایه ای از HTML را با هم یاد می گیریم.
- ایجاد یک جدول در HTML
در این بخش یاد می گیریم چطور یک جدول با ویژگی های مختلف ایجاد کنیم.
- استایل دهی به جدول
Table ایجاد شده در ابتدای آموزش را با استفاده از CSS استایل دهی می کنیم.
- تنظیم ستون ها و محل قرارگیری جدول در صفحه
در این بخش می خواهیم جدول خودمان را با تغییر سایز و محل نمایش در صفحه جا به جا کنیم.
جلسه چهارم: معرفی نرم افزارهای کدنویسی و دو تگ پرکاربرد در HTML – زمان: 30 دقیقه
- معرفی 2 نرم افزار محبوب کدنویسی
2 تا از بهترین نرم افزارهای رایج و محبوب برای کدنویسی را در این بخش معرفی می کنیم.
- آموزش کار با نرم افزارهای کدنویسی
در این بخش تکنیک هایی را یاد می گیریم که می توانیم سرعت کارمون رو بالاتر ببریم و از امکانات این افزونه ها بیشتر استفاده کنیم.
- درج تصویر در صفحه HTML
در این بخش یاد میگیریم چطور یک تصویر را در صفحه HTML خودمان درج کنیم.
- درج لینک در فایل HTML
حالا می خواهیم به بعضی از نوشته ها یا تصاویر خودمان لینک بدهیم و قابلیت کلیلک را برای آنها فعال کنیم.
جلسه پنجم: HTML Formatting – زمان: 7 دقیقه
- معرفی تگ های مربوط به نشانه گذاری و فرمینگ در HTML
تگ هایی مانند b-em-i-small و … در این بخش بررسی می شوند.
- مثال عملی و کاربردی از تگ های فرمینگ
در ادامه این جلسه تعدادی مثال عملی از کاربرد هر تگ خواهیم زد تا با آنها بیشتر آشنا شوید.
جلسه ششم: نقل قول ها در HTML – زمان: 14 دقیقه
- معرفی تگ های مربوط نقل قول
تگ هایی مانند blockuote – abbr
- تگ های بیشتر برای نقل قول
مانند cite – q -bdo
- مثال و تمرین کاربردی
در ادامه این جلسه تعدادی مثال عملی از کاربرد هر تگ خواهیم زد تا با آنها بیشتر آشنا شوید.
جلسه هفتم: بررسی کامل مبحث لینک ها در HTML – زمان: 13 دقیقه
- بررسی حالت های موجود برای لینک ها
حالت هایی مانند active – hover – visited و …
- استایل دهی به حالت های مختلف لینک
با استفاده از CSS لینک های صفحات سایت خودمان را جذاب تر می کنیم
- نحوه ایجاد لینک داخلی در یک صفحه
یاد می گیریم چطور با استفاده از CSS و HTML عنوان های مقاله خودمان را به صورت لینک در آوریم و فهرست مطلب بسازیم.
جلسه هشتم: تگ های Block-level و Inline-level – زمان: 8 دقیقه
- معرفی تگ های Block-level و Inline-level
در ابتدا جلسه مفهوم بلاک لول و ایتلاین لول را بررسی می کنیم
- آشنایی با تگ های Block-level
سپس تگ های Block-level را بررسی می کنیم و تعدادی از آنها را مثال می زنیم.
- آشنایی با تگ های Inline-level
در نهایت نیز با تگ های Inline-level آشنا می شویم و آنها را نیز به صورت عملی تمرین می کنیم.
جلسه نهم: مقدمات CSS – زمان: 22 دقیقه
- آشنایی با دستورات CSS
ابتدا ساختار دستورات CSS را به صورت کامل بررسی می کنیم.
- آشنایی با Selector ها در CSS
سپس انواع Selector ها را در CSS بررسی می کنیم.
- مثال عملی از انواع Selector ها
با هر کدام از انتخابگرهای CSS مثالی را مطرح می کنیم.
- کامنت گذاری در CSS
یاد می گیریم که چطور در CSS می توانیم کامنت گذاری کنیم
جلسه دهم: بررسی Background Properties – زمان: 23 دقیقه
- آشنایی با تغییر رنگ پس زمینه
یاد می گیریم چطور رنگ پس زمینه یک عنصر را تغییر دهیم
- آشنایی با تغییر تصویر پس زمینه
سپس یاد می گیریم که چطور می توان تصویر پس زمینه را تغییر داد
- تکرار تصویر در پس زمینه
با نحوه تکرار تصویر پس زمینه و متغیرهای آن آشنا می شویم.
- آشنایی با نحوه تغییر محل تصویر پس زمینه
یاد می گیریم که چطور در CSS می توانیم محل تصویر پس زمینه را به صورت دلخواه تغییر دهیم.
- دستورات تک خطی Background
در نهایت یاد می گیریم چطور تمامی دستورات بالا را در یک خط و در یک دستور وارد کنیم
جلسه یازدهم: حاشیه با Border در CSS – زمان: 14 دقیقه
- آشنایی با دستورات Border
نحوه ایجاد حاشیه یا مرز برای یک عنصر
- آشنایی با استایل ها در Border
انواع حالت مختلف حاشیه یا مرز کادرها در CSS را بررسی می کنیم
- تغییر عرض و رنگ کادر حاشیه
یاد میگیریم چطور رنگ و عرض کادر حاشیه را به زیبایی تغییر دهیم
- دستور تک خطی Border
با حالت Shorthand یا تک خطی دستورات Border آشنا می شویم و مثال میزنیم
جلسه دوازدهم: CSS Margins and Paddings – زمان: 15 دقیقه
- آشنایی با Margin در CSS
ابتدا با مفهوم Margin آشنا شده و سپس به بررسی انواع حالت های Margin می پردازیم
- نکات مهم در مورد Margin
نکات مهم و تکنیکی برای کار با Margin ها را بررسی می کنیم
- آشنایی با Paddings در CSS
ابتدا با مفهوم Padding آشنا شده و سپس انواع حالت های Padding را بررسی می کنیم
- نکته ها و تفاوت ها
نکته ها و تفاوت های مهم میان Margin و Padding را در این بخش بررسی می کنیم
- مفهوم Box Model
در انتهای این جلسه مفهوم Box Model را شرح می دهیم. این تکنیک یکی از اصول مهم برای کدنویسی استاندارد است.
جلسه سیزدهم: بررسی Width و Height در CSS – زمان: 8 دقیقه
- آشنایی با مفاهیم ابتدایی و استاندارد Width و height
این تگ ها یکی از پرکاربردترین تگ های CSS هستند که باید به صورت اصولی استفاده شوند
- آشنایی و مثال عملی برای Max-Width و Max-Height
در ادامه مثال های عملی از مفاهیم بیشتر مرتبط با Width و Height را ارائه می کنیم.
جلسه چهاردهم: فونت ها در CSS 3
- آموزش تگ CSS 3 برای ایجاد فونت اختصاصی
با استفاده از تگ font-face می توانید هر فونتی را به وبسایت خودتان اضافه کنید
- آموزش نحوه تبدیل فرمت های فونت به یکدیگر
در این قسمت یاد می گیریم چطور فرمت های مختلف فونت را به همدیگر تبدیل کنیم تا در وبسایت قابل استفاده باشند
- بهینه سازی سرعت لود فونتها در سایت
در انتهای این جلسه روشی برای اضافه کردن فونت به سایت را یاد میگیریم که به هیچ عنوان باعث کندی سایت نمی شود
Elmira(خریدار)
سلام واقعا نمیدونم چی بگم این دوره بهترین دوره ای بود که تا بحال دیدم. خیلی خوب و کامل توضیح داده بودین. پیشنهاد میکنم دوستان دیگه هم حتما شرکت کنن
حامد نجفی(مدیریت)
سلامت باشید نظر لطف شماست
570123352324(خریدار)
با سلام و احترام
بنده چند دوره آموزشی رو خریداری کردم اما چون میخواستم با کدنویسی هم آشنا بشم خواستم این دوره مقدماتی رو هم تهیه کنم که نمیشه متاسفانه، یعنی روی دکمه شروع آموزش میزنم اتفاقی نمیفته!
چطوری میشه این دوره رو دانلود کرد!؟
حامد نجفی(مدیریت)
با سلام و درود و تشکر از اعتماد شما
مشکل برطرف شد و میتونین در دوره ثبت نام کنین