آموزش ساخت وب سایت از ابتدا با HTML و CSS

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

شروع شدن Getting Started

• خوش آمدید و آنچه می آموزیم Welcome & What We're Learning

• HTML و CSS چیست؟ What is HTML & CSS?

• برچسب ها، ویژگی ها و عناصر HTML HTML Tags, Attributes & Elements

• بهترین روش‌ها برای نام‌گذاری فایل‌ها و پوشه‌ها Best Practices for Naming Files & Folders

• قراردادهای نامگذاری فایل و پوشه File & Folder Naming Conventions

• چگونه فایل ها و پوشه های وب سایت خود را سازماندهی کنیم How to Organize Your Website Files & Folders

• ساختار فایل و پوشه وب سایت معمولی Typical Website File & Folder Structure

• نکته حرفه ای: فایل های تولیدی خود را حفظ کنید! Pro Tip: Keep Your Production Files!

• مدیریت فایل های تولیدی شما Managing Your Production Files

• ابزارهای مدرن برای توسعه دهنده وب مدرن Modern Tools for the Modern Web Developer

• ابزارهای تجارت Tools of the Trade

• آزمون HTML HTML Quiz

شروع شدن Getting Started

• خوش آمدید و آنچه می آموزیم Welcome & What We're Learning

• HTML و CSS چیست؟ What is HTML & CSS?

• برچسب ها، ویژگی ها و عناصر HTML HTML Tags, Attributes & Elements

• بهترین روش‌ها برای نام‌گذاری فایل‌ها و پوشه‌ها Best Practices for Naming Files & Folders

• قراردادهای نامگذاری فایل و پوشه File & Folder Naming Conventions

• چگونه فایل ها و پوشه های وب سایت خود را سازماندهی کنیم How to Organize Your Website Files & Folders

• ساختار فایل و پوشه وب سایت معمولی Typical Website File & Folder Structure

• نکته حرفه ای: فایل های تولیدی خود را حفظ کنید! Pro Tip: Keep Your Production Files!

• مدیریت فایل های تولیدی شما Managing Your Production Files

• ابزارهای مدرن برای توسعه دهنده وب مدرن Modern Tools for the Modern Web Developer

• ابزارهای تجارت Tools of the Trade

• آزمون HTML HTML Quiz

مبانی HTML: بخش اول HTML Foundations: Part I

• راه اندازی اولین صفحه وب Starting Your First Web Page

• Doctype The Doctype

• ساختار اساسی یک سند HTML The Basic Structure of an HTML Document

• عنوان صفحه Page Title

• سرفصل ها Headings

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

• تاکید و تاکید قوی Emphasis & Strong Emphasis

• ساختار والدین/فرزند HTML HTML Parent/Child Structure

• دست هایت را کثیف کن! Get Your Hands Dirty!

• تمرین کدنویسی مبانی HTML HTML Foundations Coding Excercise

• آزمون مبانی HTML I HTML Foundations Quiz I

مبانی HTML: بخش اول HTML Foundations: Part I

• راه اندازی اولین صفحه وب Starting Your First Web Page

• Doctype The Doctype

• ساختار اساسی یک سند HTML The Basic Structure of an HTML Document

• عنوان صفحه Page Title

• سرفصل ها Headings

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

• تاکید و تاکید قوی Emphasis & Strong Emphasis

• ساختار والدین/فرزند HTML HTML Parent/Child Structure

• دست هایت را کثیف کن! Get Your Hands Dirty!

• تمرین کدنویسی مبانی HTML HTML Foundations Coding Excercise

• آزمون مبانی HTML I HTML Foundations Quiz I

مبانی HTML: بخش دوم HTML Foundations: Part II

• هایپرلینک ها Hyperlinks

• لیست ها Lists

• تصاویر Images

• نشانی Address

• دست هایت را کثیف کن! Get Your Hands Dirty!

• تمرین کدنویسی HTML II HTML Coding Excercise II

• آزمون مبانی HTML II HTML Foundations Quiz II

مبانی HTML: بخش دوم HTML Foundations: Part II

• هایپرلینک ها Hyperlinks

• لیست ها Lists

• تصاویر Images

• نشانی Address

• دست هایت را کثیف کن! Get Your Hands Dirty!

• تمرین کدنویسی HTML II HTML Coding Excercise II

• آزمون مبانی HTML II HTML Foundations Quiz II

مبانی HTML: بخش سوم HTML Foundations: Part III

• جداول Tables

• تشکیل می دهد Forms

• کاراکترهای ویژه HTML HTML Special Characters

• دست هایت را کثیف کن! Get Your Hands Dirty!

• آزمون مبانی HTML III HTML Foundations Quiz III

مبانی HTML: بخش سوم HTML Foundations: Part III

• جداول Tables

• تشکیل می دهد Forms

• کاراکترهای ویژه HTML HTML Special Characters

• دست هایت را کثیف کن! Get Your Hands Dirty!

• آزمون مبانی HTML III HTML Foundations Quiz III

مبانی HTML: بخش چهارم HTML Foundations: Part IV

• شناسه ها و کلاس ها IDs & Classes

• Span & Div Span & Div

• سربرگ و پاورقی Header & Footer

• Nav، بخش و مقاله Nav, Section & Article

• گذشته از Aside

• زمان Time

• اختصارات و نقل قول ها Abbreviations & Quotes

• دست هایت را کثیف کن! Get Your Hands Dirty!

• آزمون مبانی HTML IV HTML Foundations Quiz IV

مبانی HTML: بخش چهارم HTML Foundations: Part IV

• شناسه ها و کلاس ها IDs & Classes

• Span & Div Span & Div

• سربرگ و پاورقی Header & Footer

• Nav، بخش و مقاله Nav, Section & Article

• گذشته از Aside

• زمان Time

• اختصارات و نقل قول ها Abbreviations & Quotes

• دست هایت را کثیف کن! Get Your Hands Dirty!

• آزمون مبانی HTML IV HTML Foundations Quiz IV

مبانی CSS: قسمت اول CSS Foundations: Part I

• قانون سبک The Style Rule

• سبک های درون خطی Inline styles

• سبک های داخلی Internal styles

• سبک های خارجی External styles

• انتخابگرها، ویژگی ها و مقادیر CSS CSS Selectors, Properties & Values

• ارث بردن سبک ها Inheritance of Styles

• پیکسل، درصد، امتیاز و Ems! Pixels, Percentages, Points & Ems!

• دست هایت را کثیف کن! Get Your Hands Dirty!

• آزمون بنیادهای CSS I CSS Foundations Quiz I

مبانی CSS: قسمت اول CSS Foundations: Part I

• قانون سبک The Style Rule

• سبک های درون خطی Inline styles

• سبک های داخلی Internal styles

• سبک های خارجی External styles

• انتخابگرها، ویژگی ها و مقادیر CSS CSS Selectors, Properties & Values

• ارث بردن سبک ها Inheritance of Styles

• پیکسل، درصد، امتیاز و Ems! Pixels, Percentages, Points & Ems!

• دست هایت را کثیف کن! Get Your Hands Dirty!

• آزمون بنیادهای CSS I CSS Foundations Quiz I

مبانی CSS: قسمت دوم CSS Foundations: Part II

• انتخابگرهای شناسه ID Selectors

• انتخاب کنندگان کلاس Class Selectors

• انتخاب کنندگان نسل Descendant Selectors

• انتخابگرهای گروه بندی Grouping Selectors

• دست هایت را کثیف کن! Get Your Hands Dirty!

• دستان خود را کثیف کنید - به روز رسانی جزئی Get Your Hands Dirty — Minor Update

• CSS Foundations Quiz II CSS Foundations Quiz II

مبانی CSS: قسمت دوم CSS Foundations: Part II

• انتخابگرهای شناسه ID Selectors

• انتخاب کنندگان کلاس Class Selectors

• انتخاب کنندگان نسل Descendant Selectors

• انتخابگرهای گروه بندی Grouping Selectors

• دست هایت را کثیف کن! Get Your Hands Dirty!

• دستان خود را کثیف کنید - به روز رسانی جزئی Get Your Hands Dirty — Minor Update

• CSS Foundations Quiz II CSS Foundations Quiz II

مبانی CSS: قسمت سوم CSS Foundations: Part III

• مدل جعبه The Box Model

• رنگ ها (یا رنگ ها) Colours (or Colors)

• یک ظاهر طراحی و قالب بندی متن Text Styling & Formatting

• تایپوگرافی سکسی Sexy Typography

• مرز ها Borders

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

• فرم های یک ظاهر طراحی شده Styling Forms

• دست هایت را کثیف کن! Get Your Hands Dirty!

• CSS Foundations Quiz III CSS Foundations Quiz III

مبانی CSS: قسمت سوم CSS Foundations: Part III

• مدل جعبه The Box Model

• رنگ ها (یا رنگ ها) Colours (or Colors)

• یک ظاهر طراحی و قالب بندی متن Text Styling & Formatting

• تایپوگرافی سکسی Sexy Typography

• مرز ها Borders

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

• فرم های یک ظاهر طراحی شده Styling Forms

• دست هایت را کثیف کن! Get Your Hands Dirty!

• CSS Foundations Quiz III CSS Foundations Quiz III

مبانی CSS: قسمت چهارم CSS Foundations: Part IV

• پیوندهای یک ظاهر طراحی شده Styling Links

• بلوک و عناصر درون خطی Block & Inline Elements

• شناور و شفاف Float & Clear

• موقعیت یابی CSS CSS Positioning

• ویژگی CSS CSS Specificity

• دست هایت را کثیف کن! (قسمت 1) Get Your Hands Dirty! (Part1)

• دست هایت را کثیف کن! (قسمت 2) Get Your Hands Dirty! (Part 2)

• آزمون بنیادهای CSS IV CSS Foundations Quiz IV

مبانی CSS: قسمت چهارم CSS Foundations: Part IV

• پیوندهای یک ظاهر طراحی شده Styling Links

• بلوک و عناصر درون خطی Block & Inline Elements

• شناور و شفاف Float & Clear

• موقعیت یابی CSS CSS Positioning

• ویژگی CSS CSS Specificity

• دست هایت را کثیف کن! (قسمت 1) Get Your Hands Dirty! (Part1)

• دست هایت را کثیف کن! (قسمت 2) Get Your Hands Dirty! (Part 2)

• آزمون بنیادهای CSS IV CSS Foundations Quiz IV

همه اش را بگذار کنار هم Putting It All Together

• وب سایت نهایی راه رفتن از طریق Final Website Walk Through

• درباره فایل های دوره About the Course Files

• HTML: کدنویسی Header & Hero HTML: Coding the Header & Hero

• HTML: کدگذاری محتوای عمومی HTML: Coding the General Content

• HTML: کدگذاری اخبار و رویدادها HTML: Coding the News & Events

• HTML: کدنویسی پاورقی HTML: Coding the Footer

• CSS: اضافه کردن Normalize.css CSS: Adding Normalize.css

• CSS: سبک های عمومی و تایپوگرافی CSS: General Styles & Typography

• CSS: سبک دادن به هدر CSS: Styling the Header

• CSS: استایل دادن به قهرمان CSS: Styling the Hero

• CSS: استایل دادن به محتوای عمومی CSS: Styling the General Content

• CSS: سبک دادن به اخبار و رویدادها CSS: Styling the News & Events

• CSS: سبک دادن به پاورقی CSS: Styling the Footer

• محصول نهایی و نتیجه گیری The Finished Product & Conclusion

• درس پاداش: از اینجا کجا بروم؟ Bonus Lesson: Where Do I Go From Here?

همه اش را بگذار کنار هم Putting It All Together

• وب سایت نهایی راه رفتن از طریق Final Website Walk Through

• درباره فایل های دوره About the Course Files

• HTML: کدنویسی Header & Hero HTML: Coding the Header & Hero

• HTML: کدگذاری محتوای عمومی HTML: Coding the General Content

• HTML: کدگذاری اخبار و رویدادها HTML: Coding the News & Events

• HTML: کدنویسی پاورقی HTML: Coding the Footer

• CSS: اضافه کردن Normalize.css CSS: Adding Normalize.css

• CSS: سبک های عمومی و تایپوگرافی CSS: General Styles & Typography

• CSS: سبک دادن به هدر CSS: Styling the Header

• CSS: استایل دادن به قهرمان CSS: Styling the Hero

• CSS: استایل دادن به محتوای عمومی CSS: Styling the General Content

• CSS: سبک دادن به اخبار و رویدادها CSS: Styling the News & Events

• CSS: سبک دادن به پاورقی CSS: Styling the Footer

• محصول نهایی و نتیجه گیری The Finished Product & Conclusion

• درس پاداش: از اینجا کجا بروم؟ Bonus Lesson: Where Do I Go From Here?