توضیحات

دوستان این دوره بازتولید شده (با کیفیت و محتوای بهتر) دوره قبلی (آموزش HTML۵ & CSS۳ پروژه محور) در سایت هست که میتوانید از این دوره استفاده کنید.

HTML  (اچ تی ام ال) برگرفته از حروف اول عبارت HyperTextMarkupLanguage می باشد و به عنوان یک زبان نشانه گذاری متن ( زبان استاندارد صفحات وب ) می باشد. معمولا در یک صفحه ی موجود بر روی وب مجموعه ای از متن ها، عکس ها، بخش بندی های مختلف وجود دارد، به کمک تگ ها و کدهایی که HTML در اختیارتان قرار می دهد، می توانید یک ساختار مشخص از اطلاعات را در این قسمت ها  به وجود آورید و در معرض نمایش بازدیدکنندگان قرار بدهید. 

Css (سی اس اس) کوتاه شده یا مخفف عبارت Cascading Style Sheets می باشد که قابلیت صفحه آرایی؛ استایل دهی و زیبا سازی صفحات وب را برای طراحان سایت فراهم می سازد. در واقع ساختار یک صفحه با استفاده از HTML تعیین می شود و سپس با به کار بردن کدهایی دیگر به این ساختار و چیدمان استایل داده می شود. تمامی رنگ ها، ابعاد و اندازه ها، حاشیه ها، مکان قرارگیری، فونت ها و سایر خصوصیات اجزای یک صفحه ی وب، با استفاده از CSS تعیین خواهند شد.
حتما ویدیو معرفی دوره را در پایین مشاهده کنید تا با دوره و پروژه ای انتهای دوره آشنا شوید.

مباحثی که در این دوره گفته میشود شامل :
آشنایی با HTML (اچ تی ام ال)

  • معرفی HTML
  • ابزار های مورد نیاز
  • ساخت اولین صفحه با HTML
  • بررسی ساحتار HTML
  • تگ های paragraph و heading و img
  • تگ های link و strong و em و list
  • تگ های form و table

آشنایی با CSS (سی اس اس)

  • معرفی CSS (سی اس اس)
  • ترتیب اجرای css
  • selector ها در css
  • تگ های span و div
  • ارث بری در css
  • ترکیب selector ها

رنگ ها (colors) در css

  • پراپرتی background-color
  • رنگ ها در css

واحد ها (units) در css

  • واحد های pixel و percent و em و rem
  • واحد های vw و vh
  • استایل های پیش فرض و ابزار devtools در مرورگر
  • تابع ()calc
  • پراپرتی hight و width

تایپوگرافی (typography) در css

  • پراپرتی font-family
  • افزودن فونت به css
  • پراپرتی های دیگر فونت

box model در css

  • پراپرتی padding و margin و border
  • پراپرتی outline
  • box-sizing

نمایش (display) در css

  • پراپرتی display
  • مقدار inline-box
  • پراپرتی های دیگر display

تصویر پس زمینه (background image) در css

  • پراپرتی background-image
  • linear gradient
  • background image overlay

موقعیت (position) و float در css

  • پراپرتی float
  • پراپرتی های position
  • پراپرتی z-index

رسپانسیو (media query) در css

  • آشنایی با رسپانسیو (responsive)
  • دستور media query
  • طراحی mobile-first

pseudo-element و pseudo-class در css

  • آشنایی با pseudo-element
  • آشنایی با pseudo-class

transform و transition و animation در css

  • پراپرتی transform
  • پراپرتی transition
  • پراپرتی animation

مباحث تکمیلی در css

  • متغیر در css
  • آیکون (icon)
  • پراپرتی text-shadow و body-shadow
  • مبحث browser prefix
  • مبحث smantic HTML
  • پراپرتی object-fit

ایجاد پروژه نهایی و آپلود پروژه روی سرور (deploy)

دوره های پیشنهادی، بعد از گذراندن این دوره :


HTML CSS طراحی وب طراحی سایت سی اس اس اچ تی ام ال css 3 html 5

مدرس دوره علی شیخ
مدت دوره 13:47:11
تعداد ویدیو 86

وضعیت دوره : کامل شده
قیمت دوره : رایگان

نظرات ارزشمند شما:

برای ارسال نظر ابتدا باید وارد سایت شوید

  • سلام آقای شیخ اگه امکانش هست یک دوره طراحی قالب به صورت seo-friendly و توجه به پارامتر های core web vitals که موارد fcp , lcp , .... توش رعایت شده باشه رو آموزش بدین چون یک قالب که سئو تکنیکال باشه خیلی نیازش احساس میشه و من اولین مشتری خواهم بود...

    • سلام وقت بخیر.
      مواردی که میفرمائید مربوط به بحث و دوره های seo هست و تخصص بنده نیست.

  • سلام و خدا قوت استاد
    بنده مطابق ویدیو ها پروژه را انجام دادم و اون رو روی هاست قرار دادم حالا سایت در لپتاپ قابل مشاهده هست اما زمانی که در گوشی سرچ میکنم خطا "سایت پیدا نشد" نشان می دهد. چی کار باید بکنم؟

    • سلام وقت بخیر.
      نمایش سایتی که روی هاست آپلود شده در مروگر لپ تاپ و مروگر گوشی فرقی نداره
      چک کنید اینترنت گوشیتون بدرستی وصل باشه، فیلتر شکن خاموش باشه، آدرس دامنه بدرستی نوشته شده باشه و ...

  • با عرض سلام و ادب وقت بخیر توی سند html زمانیکه فارسی و انگلیسی مینویسیم درست نشون نمیده البته در خروجی اکی هست و بدون مشکل اما در کدها بد نشون میده ممنون میشم راهنمایی بفرمایید.

    • سلام وقت بخیر.
      فکر کنم منظور شما داخل ادیتور هست. سرچ کنید با توجه به ادیتوری که دارید و همیشه سعی کنید با ابزار کارتون آشنا باشید.

    • سلام وقت بخیر.
      توی دوره از vs code استفاده شده، اما شما از هر ادیتوری که آشنا و دوست دارید میتونید استفاده کنید.

  • استادارجمندعرض سلام و ادب . با عرض پوزش که خودمونی میگم ، یعنی واقعاً دمتون گرم که اینقدر زیباوبسیارآسان وروان وبا حوصله ومتانت این مبحث را آموزش دادین که بنده که بسیار دوزاریم کج وکوله بود ، قشنگ همۀ مباحث را متوجه ویاد گرفتم. خدا توفیق تون بده در پناه حق

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون
      خداروشکر دوره براتون مفید بوده

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

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون
      خداروشکر دوره براتون مفید بوده

  • سلام استاد ببخشید تو دوره های رایگان و غیر رایگان سایت شما اگر پروژه اون دوره رو به عنوان نمونه کار (چه خودمون آپلود کنیم و چه افلاین به کارفرما نشون بدیم) میتونیم استفاده کنیم ؟شرایطش چیه؟ممنون

    • سلام وقت بخیر.
      مشکلی نیست میتونید استفاده و یا حتی تغیرات روش انجام بدید.

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

    • سلام وقت بخیر‌.
      ممنون از شما و حمایتتون🙏
      خداروشکر دوره براتون مفید بوده

    • سلام وقت بخیر.
      قانونش اینه، /.. این میشه یک پوشه عقب و /../.. میشه دوتا پوشه عقب و به همین شکل میتونید چند پوشه عقب تر برید.
      ممنون میشه زیر قسمت مربوطه کامنت کنید.

  • سلام
    بسیار عالی بود
    کاملا مشخصه که به چیدمان و نوع مثال ها برای یادگیری بهتر فکر شده
    و مشخصه که فرایند یادگیری هم بر اساس یک تجربه زیاد طراحی شده و به روند یادگیری مخاطب و ذهن و سوال هایش تامل شده
    ممنون

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون
      خداروشکر دوره براتون مفید بوده

  • سلام استاد وقت بخیر ازتون تشکر میکنیم بابت همچین دوره خوبتون و ما با اینکه رشتمون کامپیوتر هستش خیلی به ما کمک کرد و درسمون رو به راحتی متوجه میشیم دست شما درد نکنه سلامت و پایدار باشین

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون
      خداروشکر دوره براتون مفید بوده

  • سلام جناب شیخ دوره شما واقعا عالی هست و بسیار عالی و ساده بیان میکنید. من که دوره آموزشگاهی فرانت شروع کردم در کنارش دوره شمارو هم دارم میبینم و واقعا مکمل هم هستند.ممنون ❤️❤️❤️❤️

    • سلام وقت بخیر.
      ممنون از شما و حمایتتون
      خداروشکر دوره براتون مفید بوده

  • سلام وقت بخیر
    استاد عزیز امکانش هست یک میانگین زمانی(روزی چند ساعت ...) همراه با فهرست فصل های موجود در سایت برای یادگیری فرانت وب لطف کنید؟ بنده دوره ها و پروژه های شمارو چندین بار تمرین می کنم و مطالب بسیار زیادی یاد میگیرم، اما برام سوال شد که من با گذر از چه مسیری میتونم فرانت کار کنم.
    ممنون.

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

  • سلام در بسیاری از بخش های آموزشی شما به سرعت کدها را بین فایل ها کپی پیس می کردید بدون اینکه ابتدا اون کد ها را انتخاب کنید یعنی اول کنترل +سی و بعد کنترل +وی ... از این لحاظ این سوال را پرسیدم که اگر مهارت یا ترفند خاصی جهت این کار دارید که به سرعت بتوانیم کد ها را کپی پیست نمائیم ،بفرمائید.

    • سلام وقت بخیر.
      خیلی دقیق متوجه سوالتون نشدم اما من همیشه میگم با ابزار کارتون آشنا باشید مثلا shortcut های که vscode داره و با یه سرچ ساده میتوانید آشنا بشید.