- برنامه نویسی وب فرانت اند
آموزش HTML و CSS
- 18 ساعت و 12 دقیقه
- 10 فصل - 63 بخش
- متوسط

1,999,000 تومان
- توضیح کامل مباحث
- کاملا پروژه محور
- آموزش مبانی
- بروزرسانی مادام العمر
- پشتیبانی ۲۴×۷
در یک نگاه
- دانشجویان:164
- فصل ها:10
- بخش ها:63
- مدت زمان:18 ساعت و 12 دقیقه
- سطح:متوسط
- زبان:فارسی
- پشتیبانی:دارد
توضیحات دوره
لازمه بگم واسه اینکه یک طراح سایت و فرانت اند کار خفن بشین اولین قدم یاگیری Html و Css هست. تازه اگرم به مباحث بکند علاقه دارین صددرصد بهتره و لازمه که مفاهیم پایه html و css رو بلد باشین.
چرا؟ چون یک طراح بکند اگه دید فرانتی داشته باشه واسش راحتتره که برخی درخواست های تیم فرانت رو درک کنه، یا شایدم به مشکل ریزی برخورد کنه و بتونه خودش رفعش کنه و منتظر بچه های فرانت نشه!
قبل اینکه راجع به خود این دوره آموزشی صحبت کنم که چیا داره و چرا مثلش نیست، توضیحی راجع به html و css بدم که اگر نمیدونی اینها چی هستن واست واضح بشه.
Html چیه؟
عبارت html مخفف عبارت انگلیسی Hyper Text Markup Language هست که معنیش زبان نشانه گذاری متن میشه. زبان نشانهگذاری html از مجموعهای از تگها تشکیل شده که به همراه هم، ساختار یک سایت را تشکیل میدن؛ یعنی چی؟ بذارین با مثال بگم، معمولا شما در یک صفحه وب، مجموعهای از تصاویر، متن و دستهبندی ها و... دارین دیگه؟ اینها همه جایگاهشون در صفحه به کمک تگها و کدهای html تعیین میشن. شما باید این ساختار رو به طور کلی طراحی کنین و در اختیار کاربر قرار بدین. حالا بریم ببینیم css چیه.
Css چیه؟
کلمه css مخفف Cascading Style Sheets هست که به طور کلی معنی استایلدهی و طراحی صفحات سایت رو میده. شما با این زبان میتونین به ساختار سایتی که با زبان html ساختین، استایل یا شکل بدین. بذارین اینجور بگم که اگر وب سایت رو یک ساختمان در نظر بگیریم، زبان html شامل اسکلت و ساختار اون ساختمان میشه که به طور کلی دیده نمیشن؛ اما زبان css از نما، رنگ دیوارها و به طور کلی، مواردی که روی ظاهر ساختمان تاثیر میذارن و دیده میشن، تشکیل میشه؛ یعنی ابتدا ما با استفاده از زبان html ساختار یک وب سایت رو طراحی میکنیم و با استفاده از زبان css به اون ساختار، ویژگیهای ظاهری مثل رنگ رو میدیم.
چرا این دوره؟
من خودم واسه یادگیری اینها ساعت ها و حتی ماه های زیادی وقت صرف کردم. از یک آموزش به یک آموزش دیگه، سایت ها و کانال های مختلف رو گشتم. همشون یک اشکال داشتن! اینکه همه تگ های html و ویژگی های css رو تیتروار میگفتن! دمشون گرم ولی خب استفاده در یک پروژه واقعی چی؟ فکر کن بری شاگرد مکانیک بشی و همه آچارها رو بدونی چی هستن و بعد یهو بهت بگن موتور رو کامل باز و تعمیر کن! خب نمیشه دیگه!
در این دوره من اومدم چندتا تگ پرکاربرد رو واست توضیح دادم بعد دیگه ادامه ندادم! با هم میریم سراغ ده دوازده تا صفحه واقعی و طراحی اونها رو شروع میکنیم. اینجور هم متوجه میشی نقطه شروع کجاست و هم هرچیزی رو در جای خودش و در زمان استفادش یاد میگیری و واست واضح میشه که چطور از آچارهای مختلف استفاده کنی.
آموزش پیش رو حاصل چندین سال کار و تدریس هست که چکیده سرچ های مختلف تو در مسیر یادگیری میشه و از هدر رفتن وقت و صرف هزینه آموزش های مختلف جلوگیری میکنه! پس بدون معطلی درخواست بده و آموزش رو شروع کن. ریز مطالب هم پایین هست حتما بخونشون. راستی ویدئو معرفی دوره رو اگه ندیدی ببین.
پیش نیاز؟
ندارد اما! اگر برنامه نویسی یاد نداری فصل اول و دوم دوره الفبای برنامه نویسی رو ببین که با مفاهیم برنامه نویسی به صورت رایگان آشنا بشی.
مباحث
-
بخش: 1تگ های اولیه html
- نصب vscode
- تگ های اصلی html
- تگ های متنی
-
بخش: 2ایجاد فرم ها با استفاده از html
- تگ فرم
- انواع تگ input
- textarea
- select
- دکمه ها
-
بخش: 3اضافه کردن لیست، جدول و تصویر در صفحه html
- انواع لیست در html
- جدول
- کار با تصویر
- تگ div
-
بخش: 4نحوه استفاده از css
- inline
- internal
- external
-
بخش: 5ویژگی های css
- background
- border
- visibility
- display
- margin
- padding
- font
- کار با textها
-
بخش: 6شبه کلاس، شبه عنصر و موقعیت در css
- css selectors
- pseudo classes
- pseudo element
- position
-
بخش: 7flex و transaction و انیمیشن در css
- flexbox
- transaction
- animation
-
بخش: 1راهاندازی اولیه به همراه فونت اختصاصی و طراحی هدر وب سایت
-
بخش: 2منوی کشویی برای وب سایت
-
بخش: 3بخش درباره ما
-
بخش: 4بخش ویژگیها
-
بخش: 5بخش دورهها و بخش پیشنهادات
-
بخش: 6بخش تماس با ما
-
بخش: 7طراحی فوتر وب سایت
-
بخش: 8افزودن آیکونهای شناور شبکههای اجتماعی
-
بخش: 9ریسپانسیو کردن وب سایت و افزودن ویژگی اسکرول
-
بخش: 1معرفی بوت استرپ به همراه نحوه استفاده از آن و طراحی هدر وب سایت
-
بخش: 2بخش مقاصد ویژه
-
بخش: 3بخش گالری و تبلیغات
-
بخش: 4پخش نظرات کاربران
-
بخش: 5طراحی فوتر وب سایت
-
بخش: 1طراحی منو واکنشگرا برای وب سایت
-
بخش: 2بخش بنر به همراه فرم جستجوی کار و بخش برترین شرکتها
-
بخش: 3بخش جدیدترین آگهیها
-
بخش: 4دکمههای صفحهبندی و بخش اطلاعات سایت
-
بخش: 5بخش بنر دانلود اپلیکیشن و طراحی فوتر وب سایت
-
بخش: 1ساخت بخش سربرگ سایت
-
بخش: 2منو سایت
-
بخش: 3بخش درباره من
-
بخش: 4بخش تجربیات کاری و تحصیلات
-
بخش: 5بخش خدمات
-
بخش: 6بخش ارتباط با من
-
بخش: 7افزودن آیکونهای شناور شبکههای اجتماعی و ویژگی اسکرول
-
بخش: 1طراحی هدر وب سایت
-
بخش: 2بخش بنر
-
بخش: 3بخش خدمات
-
بخش: 4بخش درباره ما
-
بخش: 5بخش نظرات مشتریان به صورت اسلایدر
-
بخش: 6طراحی فرم اشتراک در خبرنامه و فوتر وب سایت
-
بخش: 1طراحی هدر وب سایت به صورت واکنشگرا
-
بخش: 2ایجاد بخش بنر به همراه الگوی موج در پایین آن
-
بخش: 3بخش خدمات
-
بخش: 4طراحی بخش درباره ماه و بخش رضایتمندی مشتریان
-
بخش: 5طراحی بخش شبکههای اجتماعی و فوتر وب سایت و افزودن ویژگی اسکرول
-
بخش: 1طراحی هدر وب سایت
-
بخش: 2ایجاد بخش درباره ما و بخش خدمات
-
بخش: 3ایجاد بخش امکانات
-
بخش: 4افزودن بخش نظرات کاربران
-
بخش: 5طراحی بخش اشتراک در خبرنامه
-
بخش: 6طراحی فوتر وب سایت و افزودن ویژگی اسکرول
-
بخش: 7افزودن انیمیشن به کلیه محتوای سایت
-
بخش: 1طراحی هدر وب سایت
-
بخش: 2ایجاد بخش اسلایدر تصاویر به همراه متن آنها و بخش درباره ما به همراه نوار مهارتها
-
بخش: 3ایجاد بخش خدمات با پس زمینه ثابت
-
بخش: 4طراحی بخش تیم ما به همراه افکت شبکههای اجتماعی
-
بخش: 5افزودن بخش بنر و طراحی بخش طرحهای قیمتی
-
بخش: 6ایجاد بخش رضایتمندی مشتریان
-
بخش: 7ایجاد بخش اطلاعات تماس و طراحی فرم تماس و فوتر وب سایت و افزودن افکت اسکرول
-
بخش: 1آماده سازی پروژه خام و افزودن بوت استرپ و فونت به پروژه
-
بخش: 2طراحر هدر وب سایت
-
بخش: 3طراحی صفحه اصلی سایت و ایجاد صفحه جست و جوی خبر
-
بخش: 4صفحه نمایش خبر
-
بخش: 5ایجاد صفحه ورود کاربران
مهندس محمد نظری
- ۱۳ سال تجربه
- وب و اپلیکیشن
- استاد دانشگاه
- دبیر هنرستان
مفتخرم که این مجموعه رو انتخاب کردی٬ با تلاش خودت و راهنمایی های ما امیدوارم راه موفقیت رو به بهترین نحو طی کنی
یک ویدئو درحال پخش است
همین الان یادگیری رو شروع کن
صفحه اینستاگرام ما رو دنبال کن تا از اخبار جدید باخبر بشی