• برنامه نویسی وب فرانت اند

آموزش HTML و CSS

  • 18 ساعت و 12 دقیقه
  • 10 فصل - 63 بخش
  • متوسط
4.7 164 دانشجو
course introduction

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 رو تیتروار میگفتن! دمشون گرم ولی خب استفاده در یک پروژه واقعی چی؟ فکر کن بری شاگرد مکانیک بشی و همه آچارها رو بدونی چی هستن و بعد یهو بهت بگن موتور رو کامل باز و تعمیر کن! خب نمیشه دیگه!

در این دوره من اومدم چندتا تگ پرکاربرد رو واست توضیح دادم بعد دیگه ادامه ندادم! با هم میریم سراغ ده دوازده تا صفحه واقعی و طراحی اونها رو شروع میکنیم. اینجور هم متوجه میشی نقطه شروع کجاست و هم هرچیزی رو در جای خودش و در زمان استفادش یاد میگیری و واست واضح میشه که چطور از آچارهای مختلف استفاده کنی.

آموزش پیش رو حاصل چندین سال کار و تدریس هست که چکیده سرچ های مختلف تو در مسیر یادگیری میشه و از هدر رفتن وقت و صرف هزینه آموزش های مختلف جلوگیری میکنه! پس بدون معطلی درخواست بده و آموزش رو شروع کن. ریز مطالب هم پایین هست حتما بخونشون. راستی ویدئو معرفی دوره رو اگه ندیدی ببین.

پیش نیاز؟

ندارد اما! اگر برنامه نویسی یاد نداری فصل اول و دوم دوره الفبای برنامه نویسی رو ببین که با مفاهیم برنامه نویسی به صورت رایگان آشنا بشی.

مباحث

    • نصب vscode
    • تگ های اصلی html
    • تگ های متنی
    • تگ فرم
    • انواع تگ input
    • textarea
    • select
    • دکمه ها
    • انواع لیست در html
    • جدول
    • کار با تصویر
    • تگ div
    • inline
    • internal
    • external
    • background
    • border
    • visibility
    • display
    • margin
    • padding
    • font
    • کار با textها
    • css selectors
    • pseudo classes
    • pseudo element
    • position
    • flexbox
    • transaction
    • animation

مهندس محمد نظری

  • ۱۳ سال تجربه
  • وب و اپلیکیشن
  • استاد دانشگاه
  • دبیر هنرستان

مفتخرم که این مجموعه رو انتخاب کردی٬ با تلاش خودت و راهنمایی های ما امیدوارم راه موفقیت رو به بهترین نحو طی کنی

همین الان یادگیری رو شروع کن

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