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 دقیقه
معرفی تگ های مربوط نقل قول ویدئو
تگ هایی مانند blockquote - 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 میتوانیم کامنت گذاری کنیم
کامنت گذاری در 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 را ارائه میکنیم
جلسه چهاردهم : فونت ها در CSS3
آموزش تگ CSS3 برای ایجاد فونت اختصاصی ویدئو
با استفاده از تگ font-face میتوانید هر فونتی را به وبسایت خودتان اضافه کنید
آموزش نحوه تبدیل فرمت های فونت به یکدیگر ویدئو
در این قسمت یاد میگیریم چطور فرمت های مختلف فونت را به همدیگر تبدیل کنیم تا در وبسایت قابل استفاده باشند
بهینه سازی سرعت لود فونتها در سایت ویدئو
در انتهای این جلسه روشی برای اضافه کردن فونت به سایت را یاد میگیریم که به هیچ عنوان باعث کندی سایت نمیشود
موارد مرتبط
نظرات
متوسط امتیازات
جزئیات امتیازات
2 دیدگاه برای آموزش HTML-CSS مقدماتی
قیمت
۱۵۰,۰۰۰ تومان ۹۹,۰۰۰ تومان
Elmira(مالک تایید شده)
سلام واقعا نمیدونم چی بگم این دوره بهترین دوره ای بود که تا بحال دیدم. خیلی خوب و کامل توضیح داده بودین. پیشنهاد میکنم دوستان دیگه هم حتما شرکت کنن
حامد نجفی
سلامت باشید نظر لطف شماست
570123352324(مالک تایید شده)
با سلام و احترام
بنده چند دوره آموزشی رو خریداری کردم اما چون میخواستم با کدنویسی هم آشنا بشم خواستم این دوره مقدماتی رو هم تهیه کنم که نمیشه متاسفانه، یعنی روی دکمه شروع آموزش میزنم اتفاقی نمیفته!
چطوری میشه این دوره رو دانلود کرد!؟
حامد نجفی
با سلام و درود و تشکر از اعتماد شما
مشکل برطرف شد و میتونین در دوره ثبت نام کنین