آموزش HTML5 و CSS3: وب سایت های خود را بسازید (با 4 پروژه)

سرفصل ها و درس ها

معرفی Introduction

• نمای کلی دوره Course overview

• HTML چیست؟ What is HTML?

• CSS چیست؟ What is CSS?

• اهمیت ویرایشگر کد The importance of a code editor

• اولین وب سایت ما Our first website

• چه اتفاقی افتاده؟ What hapenned?

• فایل های دوره Course files

• نتیجه Conclusion

• آزمونی در مورد اصول اولیه HTML و CSS Quizz about HTML & CSS basics

مبانی HTML HTML Basics

• معرفی Introduction

• آناتومی یک برچسب The anatomy of a tag

• ساختار HTML HTML structure

• سرفصل ها Headings

• پاراگراف ها Paragraphs

• برچسب های بدون محتوا Tags without content

• نظرات Comments

• ویژگی های Attributes

• باز کردن پیوند در یک برگه جدید Opening a link in a new tab

• تصاویر Images

• ویژگی alt The alt attribute

• لیست نامرتب Unordered list

• فهرست مرتبشده Ordered list

• جداول Tables

• تگ div The div tag

• چالش مبانی HTML HTML basics challenge

• نتیجه Conclusion

مبانی CSS CSS Basics

• معرفی Introduction

• راه های اضافه کردن کلاس Ways of adding a class

• آناتومی CSS Anatomy of CSS

• CSS درون خطی Inline CSS

• چندین قانون CSS Multiple CSS rules

• CSS داخلی Internal CSS

• CSS خارجی External CSS

• سفارش CSS CSS Order

• چالش در مورد CSS Challenge about CSS

• نظرات در CSS Comments in CSS

• کلاس ها و شناسه ها Classes and ids

• کلاس ها Classes

• نحوه استفاده از id How to use id

• ترتیب قوانین CSS CSS rules order

• درباره رنگ های CSS About CSS colors

• نام رنگ ها Color names

• HEX HEX

• HEX کوتاه شده Shortened HEX

• RGB RGB

• RGB با کدورت RGB with opacity

• HSL HSL

• رنگ پس زمینه Background color

• پس زمینه با کدورت Background with opacity

• حل مشکل کدورت Solving the opacity problem

• تصویر پس زمینه Background image

• وسط یک تصویر پس زمینه Centering a background image

• مدل جعبه Box model

• عرض و ارتفاع Width and height

• لایه گذاری Padding

• بالشتک تکی Individual padding

• بالشتک کوتاه Shorthand padding

• لایی و عرض Padding and width

• مرز ها Borders

• مرز فردی Individual border

• مرزهای گرد Rounded borders

• لبه Margin

• همه چیز را کنار هم گذاشتن Putting everything together

• چالش مدل جعبه Box Model Challenge

• تراز متن Text alignment

• تزیین متن Text decoration

• تبدیل متن Text transform

• فاصله بین حروف Letter spacing

• فونت ها Fonts

• نوع قلم Font style

• وزن فونت Font weight

• اندازه فونت Font size

• نمایش دادن Display

• پنهان کردن عناصر Hidding elements

• درباره موقعیت های CSS About CSS positions

• ایستا قرار دهید Position static

• موقعیت نسبی Position relative

• موقعیت مطلق Position absolute

• نسبی با مطلق Relative with Absolute

• موقعیت ثابت شد Position fixed

• موقعیت چسبناک Position sticky

• شاخص Z Z-index

• نتیجه Conclusion

پروژه 1: صفحه ادای احترام Project 1: Tribute Page

• معرفی Introduction

• ساختار پروژه Project structure

• ساخت بخش اول Building the first section

• نتیجه گیری HTML Concluding the HTML

• شروع سبک ها Beginning the styles

• نتیجه گیری CSS Concluding the CSS

• نتیجه Conclusion

فرم ها با HTML Forms with HTML

• معرفی Introduction

• فرم چیست؟ What is a form?

• اولین فرم ما Our first form

• صفات را شکل دهید Form attributes

• ویژگی نام Name attribute

• ویژگی برچسب Label attribute

• ارسال فرم به سرور Sending a form to the server

• عنصر را انتخاب کنید Select element

• ویژگی انتخاب شده Selected attribute

• انتخاب گزینه های متعدد Selecting multiple options

• Textarea Textarea

• مجموعه میدان و افسانه Fieldset and legend

• فهرست داده ها Datalist

• ورودی برای رمز عبور Input for password

• بازنشانی فیلدهای فرم Resetting form fields

• دکمه رادیویی Radio button

• چک باکس Checkbox

• ورودی برای تاریخ ها Input for dates

• ورودی برای فایل ها Input for files

• ورودی برای اعداد Input for numbers

• ورودی برای ایمیل ها Input for emails

• ویژگی ارزش The value attribute

• ویژگی غیرفعال Disabled attribute

• ویژگی جای جای Placeholder attribute

• ویژگی مورد نیاز Required attribute

• نتیجه Conclusion

پروژه 2: فرم فروش خودرو Project 2: Car selling form

• معرفی Introduction

• ساختار پروژه Project structure

• ایجاد هدر صفحه Creating the page header

• ایجاد فرم Creating the form

• تکمیل فرم Finishing the form

• بازنشانی برخی از سبک ها Resetting some styles

• انعقاد پروژه Concluding the project

پاسخگویی در صفحات وب Responsivity in web pages

• معرفی Introduction

• پاسخگویی چیست؟ What is responsivity?

• پیکربندی HTML Configuring the HTML

• ایجاد یک پرسش رسانه ای Creating a media query

• درخواست رسانه با عرض حداقل Media query with min-width

• نقاط شکست رایج Common breakpoints

• اضافه کردن سبک به دستگاه در حالت افقی Adding styles to a device in landscape

• نتیجه Conclusion

پروژه 3: میزبان hdC Project 3: hdC Host

• معرفی Introduction

• ساختار پایه پروژه Project base structure

• نوار ناوبری Navbar

• یک ظاهر طراحی شده نوار ناوبری Styling of navbar

• بخش بنر Banner section

• بخش خدمات Services section

• بخش HTML قیمت ها و طرح ها HTML of prices and plans section

• بخش CSS قیمت ها و طرح ها CSS of prices and plans section

• جستجوی بخش دامنه Search domain section

• نسخه نهایی دسکتاپ Concluding desktop version

• افزودن پاسخگویی Adding responsivity

فلکس باکس Flexbox

• معرفی Introduction

• فلکس باکس چیست؟ What is flexbox?

• اعمال انعطاف بر روی یک عنصر Applying flex to an element

• جهت فلکس Flex direction

• بسته بندی فلکس Flex wrap

• مطالب را توجیه کنید Justify content

• موارد را تراز کنید Align items

• شکاف بین عناصر Gap between elements

• تغییر نظم Changing order

• رشد Grow

• اساس Basis

• کوچک شدن Shrink

• مختصر فلکس Flex shorthand

• خود تراز Self align

• نتیجه Conclusion

پروژه 4: کلون خانگی اینستاگرام Project 4: Instagram Home Clone

• معرفی Introduction

• ایجاد ساختار پوشه Creating the folder structure

• ساخت فرم ورود Building the login form

• کدگذاری آخرین عناصر و پاورقی Coding the last elements and footer

• شروع سبک ها Beginning the styles

• نتیجه گیری سبک های فرم ورود Concluding the styles of login form

• در حال اتمام نسخه دسکتاپ Finishing the desktop version

• افزودن پاسخگویی Adding responsivity

نتیجه گیری و مراحل بعدی Conclusion and next steps

• نتیجه گیری دوره Course conclusion