دوره کامل HTML و CSS با پروژه نمونه کار عملی

آنچه یاد خواهید گرفت:

• HTML چیست و چگونه از آن استفاده کنیم؟
• ایجاد یک صفحه وب با اصول HTML
• CSS چیست و چگونه از آن استفاده کنیم؟
• ویژگی‌های پرکاربرد CSS از گذشته تا کنون و ویژگی‌های مدرن CSS
• ایجاد صفحات وب با استفاده از HTML و CSS
• CSS و Css3 برای همه از ابتدا
• ما به تدریج دانش خود را با یادگیری مبانی CSS بهبود خواهیم داد.
• ما یاد خواهیم گرفت که چگونه صفحات را به آسانی قرار دهیم و درباره تمام مدل‌های طرح بندی در CSS صحبت خواهیم کرد.
• ایجاد یک صفحه فرود زیبا و واکنش گرا برای هر شخصی
• آماده‌سازی صفحات وب با ویژگی‌های Grid CSS و Flexbox بسیار آسان‌تر خواهد بود.
• یادگیری کد نویسی HTML بدون یادگیری CSS مانند یادگیری خواندن اما نه نوشتن است.
• به دستگاه‌هایی فکر کنید که روزانه برای دسترسی به اینترنت استفاده می‌کنید. متوجه خواهید شد که اندازه صفحه نمایش استانداردی وجود ندارد.
• CSS یا Cascading Style Sheets چیست؟ CSS زبان سبک‌شناسی است که برای استایل‌دهی به زبان‌های نشانه‌گذاری استفاده می‌شود.
• کدام مشاغل از CSS استفاده می‌کنند؟ CSS مربوط به هر شغلی است که به توسعه وب مربوط می‌شود.
• توسعه‌دهندگان فرانت-اند وب از CSS با HTML و JavaScript برای ساخت وب اپلیکیشن های فرانت-اند که در مرورگر اجرا می‌شوند، استفاده می‌کنند.
• طراحان وب الگوها، مدل‌ها و سبک‌ها را برای یک وب‌سایت با استفاده از HTML و CSS ایجاد می‌کنند که توسعه‌دهندگان وب از آن‌ها برای ساخت وب‌سایت‌ها استفاده می‌کنند.

پیش نیازهای دوره

• این دوره برای داوطلبانی که می‌خواهند به یک توسعه‌دهنده وب تبدیل شوند اما نمی‌دانند از کجا شروع کنند، ایده‌آل است. نیازی به داشتن دانش قبلی نیست. فقط کافی است آماده باشید.
• ما macOs را ترجیح می‌دهیم اما این الزامی نیست. می‌توانید از سیستم‌عامل‌های دیگر نیز استفاده کنید.
• داشتن یک کامپیوتر قابل استفاده با RAM 8GB یا بالاتر و اتصال به اینترنت
• تمایل به یادگیری توسعه وب اپلیکیشن
• هیچ چیز دیگر! تنها شما، کامپیوترتان و انگیزه‌تان برای شروع به یادگیری.

توضیحات دوره

به ساخت یک وب‌سایت واقعی با HTML و CSS - سال 2024 خوش آمدید.

ساخت وب‌سایت‌های ایستا از ابتدا با HTML و CSS - یادگیری مبانی HTML، مبانی CSS و دیگر موارد.

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

به عنوان زبان اصولی وب جهانی، داشتن دانشی از HTML برای هر حرفه‌ای که به نوعی به توسعه وب مربوط می‌شود، ضروری است. چه شما وب‌سایت‌ها یا اپلیکیشن ها را که از PHP ،Java یا JavaScript استفاده می‌کنند، توسعه دهید، نیاز است که ابتدا HTML را درک کنید.

یادگیری کد نویسی HTML بدون یادگیری CSS مانند یادگیری خواندن اما نه نوشتن است. تمام کارهای سخت شما در توسعه وب از بین می‌رود اگر آن را برای اندازه‌های صفحه نمایش مختلف بهینه نکنید.

به دستگاه‌هایی که روزانه برای دسترسی به اینترنت استفاده می‌کنید، فکر کنید. متوجه خواهید شد که اندازه صفحه نمایش استانداردی وجود ندارد. بدون CSS، به نمایش درآوردن متن، طرح بندی و طراحی یک وب‌سایت برای این ناهماهنگی‌ها در صفحات غیرممکن خواهد بود. CSS پایه‌گذار تمامی کارهای سبک‌دهی وب‌سایت‌ها است و سزاوار است به عنوان یک سنگ بنا در فناوری اینترنت در نظر گرفته شود.

در این دوره، شما یاد خواهید گرفت که چگونه یک وب‌سایت با HTML و CSS از ابتدا بسازید.

اگر فکر می‌کنید که یادگیری HTML و CSS را آغاز کنید، این دوره بهترین گزینه برای شماست.

ما HTML و CSS را از سطح مبتدی تا تمام سطوح توضیح داده‌ایم. ما تمام موضوعات را به ساده‌ترین شکل ممکن با مثال‌ها، اسلایدها و نمودارها توضیح داده‌ایم.

ما در حین توضیح موضوعات پروژه‌های زیادی ایجاد کرده‌ایم. زیرا ما اعتقاد داریم که آموزش‌های عملی بسیار مفیدتر از سایر روش‌های آموزشی هستند.

بیایید اکنون به سرفصل‌های دوره بپردازیم.

نخست، ما خواهیم دید که چه چیزهایی را در این دوره یاد خواهیم گرفت. سپس مبانی HTML را خواهیم آموخت. در اینجا تمام تگ‌های HTML استفاده شده از گذشته تا حال را خواهیم دید. سپس شروع به دیدن تگ‌های HTML معنایی خواهیم کرد. ما یاد خواهیم گرفت که چرا و چگونه از آن‌ها استفاده کنیم. ما یک وب‌سایت تنها با HTML ایجاد خواهیم کرد. سپس شروع به مشاهده موضوعات CSS خواهیم کرد. اولین موضوعاتی که خواهیم دید مبانی CSS هستند. سپس ویژگی‌های مدرن CSS را خواهیم آموخت.

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

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

پس از گذراندن دوره شما، دیگر موضوعی نخواهد بود که ما از مباحث اولیه HTML و CSS ندیده باشیم. با آنچه که در این دوره یاد می‌گیرید، قادر خواهید بود سایتی که می‌خواهید را طراحی کنید. علاوه بر همه این‌ها، ما از Visual Studio Code IDE برای ایجاد اپلیکیشن های شما استفاده خواهیم کرد. ما همچنین یاد خواهیم گرفت که چگونه از آن استفاده کنیم.

نیازی به دانش قبلی نیست!

شما نیازی به دانش قبلی درباره HTML و CSS ندارید. این دوره شما را از سطح مبتدی به سطح پیشرفته‌تر با مثال‌های عملی خواهد برد.

شما در استفاده از HTML و CSS اعتماد به نفس خواهید داشت، و اگر هر وقت در گیر شوید، ما در کنار شما خواهیم بود تا کمک کنیم.

یادگیری با عمل!

بنابراین ما این دوره را تا حد ممکن ساده کرده‌ایم تا شما را قدم به قدم هدایت کنیم تا احساس اعتماد به نفس کنید و درک واقعی از چگونگی استفاده از HTML و CSS پیدا کنید. در این دوره، ما HTML و CSS را با ایجاد پروژه‌های مختلف آموزش خواهیم داد.

در این آموزش شما خواهید آموخت؛

• چگونه با استفاده از HTML و CSS وب‌سایت بسازید؟
• مهم‌ترین موضوعات HTML و CSS
• چگونه طراحی‌های واکنش گرا برای وب‌سایت‌ها ایجاد کنیم؟
• چگونه به سادگی بزرگ‌ترین و پیشرفته‌ترین وب‌سایت را با استفاده از HTML و CSS بسازید؟

HTML چیست؟

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

اسناد HTML فایل‌های متنی هستند که با پسوند html. یا htm. ساخته می‌شوند و می‌توانند با استفاده از هر ویرایشگر متنی ایجاد شوند. این اسناد توسط مرورگرهای وب تفسیر می‌شوند که محتوا را مطابق با دستورالعمل‌های ارائه شده توسط نشانه‌گذاری HTML نمایش می‌دهند.

HTML راهی را برای سازمان‌دهی و ساختاربندی محتوا در وب ارائه می‌کند و به توسعه‌دهندگان این امکان را می‌دهد که اسنادی را ایجاد کنند که به راحتی توسط انسان‌ها و ماشین‌ها قابل درک باشد. این زبان معمولاً به همراه دیگر فناوری‌های وب مانند CSS (ورق‌های سبک آبشاری) برای استایل‌دهی و JavaScript برای تعامل، برای ایجاد صفحات وب پویا و جذاب استفاده می‌شود.

CSS چیست؟

CSS (ورق‌های سبک آبشاری) زبان ورق سبک‌نویسی است که برای توصیف چگونگی نمایش یک سند نوشته‌شده در زبان‌های نشانه‌گذاری مانند HTML و XML استفاده می‌شود. CSS چگونگی نمایش عناصر یک صفحه وب را تعریف می‌کند، از جمله جنبه‌هایی مانند طرح بندی، رنگ‌ها، فونت‌ها و فاصله‌ها. با جدا کردن سبک نمایش از محتوای سند، CSS انعطاف‌پذیری و کنترل بیشتری بر روی ظاهر بصری صفحات وب فراهم می‌کند.

CSS با ارتباط دادن استایل‌ها به عناصر HTML از طریق انتخاب‌گرها کار می‌کند. انتخاب‌گرها، عناصر خاصی را در سند HTML هدف قرار می‌دهند و استایل‌ها بر اساس قواعد تعریف‌شده در ورق سبک CSS به آن عناصر اعمال می‌شوند. استایل‌های CSS می‌توانند به صورت خطی درون عناصر HTML، به صورت داخلی درون سند HTML با استفاده از تگ‌های <style>، یا به صورت خارجی در فایل‌های CSS جداگانه‌ای که به سند HTML با استفاده از تگ‌های <link> متصل شده‌اند، اعمال شوند.

ما با استفاده از HTML و CSS چه کارهایی می‌توانیم انجام دهیم؟

HTML و CSS فناوری‌های اساسی برای توسعه وب هستند و با هم به توسعه‌دهندگان این امکان را می‌دهند تا تجربیات وب غنی و تعاملی ایجاد کنند. در اینجا برخی از کارهایی که می‌توانید با استفاده از HTML و CSS انجام دهید آورده شده است:

• ساختاردهی محتوا: HTML راهی برای ساختاردهی محتوای یک صفحه وب با استفاده از عناصری مانند عنوان‌ها، پاراگراف‌ها، لیست‌ها، جداول و غیره فراهم می‌کند. CSS به شما این امکان را می‌دهد که طرح بندی و ظاهر این عناصر را کنترل کنید، از جمله اندازه، موقعیت و فاصله آن‌ها.
• سبک‌دهی: CSS به شما این امکان را می‌دهد که جنبه بصری عناصر HTML را با استفاده از ویژگی‌هایی مانند رنگ‌ها، فونت‌ها، پس‌زمینه‌ها، حاشیه‌ها و سایه‌ها استایل‌دهی کنید. با CSS می‌توانید طراحی‌های بصری جذابی ایجاد کنید و از انسجام در چندین صفحه یک وب‌سایت اطمینان حاصل کنید.
• طراحی واکنش گرا: CSS ویژگی‌هایی مانند رسانه پرسش را فراهم می‌کند که به شما این امکان را می‌دهد که طرح بندی های واکنش گرا ایجاد کنید که به اندازه‌های مختلف صفحه و دستگاه‌ها پاسخ می‌دهند. این باعث می‌شود که وب‌سایت شما یک تجربه مشاهده بهینه را در دسکتاپ‌ها، تبلت‌ها و گوشی‌های هوشمند ارائه دهد.
• انیمیشن و ترنزیشن ها: CSS شامل ویژگی‌هایی برای ایجاد انیمیشن‌ها و ترنزیشن ها است، که به شما اجازه می‌دهد حرکت و تعامل بیشتری به عناصر یک صفحه وب اضافه کنید. این می‌تواند برای ایجاد رابط‌های کاربری تعاملی و بهبود تجربه کاربر استفاده شود.
• انعطاف‌پذیری: HTML و CSS انعطاف‌پذیری در طراحی و طرح بندی را فراهم می‌کنند. می‌توانید طرح بندی های پیچیده صفحه، منوهای ناوبری سفارشی، فرم‌های ورودی کاربر و موارد دیگر را با استفاده از این فناوری‌ها ایجاد کنید.
• دسترسی: HTML و CSS شامل ویژگی‌هایی هستند که از دسترسی پشتیبانی می‌کنند، و این امکان را فراهم می‌کنند که وب‌سایت‌هایی ایجاد کنید که برای افراد با ناتوانی قابل استفاده باشند. این شامل ویژگی‌هایی مانند نشانه‌گذاری معنایی HTML، استفاده صحیح از عناوین و نقاط عطف، و ارائه متن جایگزین برای تصاویر است.
• ادغام با فناوری‌های دیگر: HTML و CSS می‌توانند با دیگر فناوری‌های وب مانند JavaScript ادغام شوند، که به شما این امکان را می‌دهد که وب اپلیکیشن های پویا و تعاملی ایجاد کنید. JavaScript می‌تواند برای افزودن رفتار به عناصر HTML، دستکاری DOM و مدیریت تعاملات کاربر استفاده شود.

به طور کلی، HTML و CSS ابزارهای قدرتمندی برای ایجاد وب‌سایت‌ها و وب‌ اپلیکیشن های بصری جذاب، واکنش گرا و قابل دسترسی هستند. آن‌ها پایه و اساس توسعه وب هستند و مهارت‌های ضروری برای هر کسی که در این زمینه فعالیت می‌کند می‌باشند

HTML و CSS چگونه کار می‌کنند؟

HTML (زبان نشانه‌گذاری ابرمتن) و CSS (ورق‌های سبک آبشاری) با هم کار می‌کنند تا صفحات وب ایجاد و استایل‌دهی کنند. در اینجا چگونگی کار آن‌ها آمده است:

• HTML :HTML برای ایجاد ساختار و محتوای یک صفحه وب استفاده می‌شود. این شامل مجموعه‌ای از عناصر است که هر کدام با یک تگ مشخص می‌شوند و قسمت‌های مختلف محتوا را تعریف می‌کنند، مانند عناوین، پاراگراف‌ها، لیست‌ها، لینک‌ها، تصاویر و غیره. HTML ساختار معنایی سند را فراهم می‌کند و محتوا را به صورت معناداری سازمان‌دهی می‌کند. زمانی که یک مرورگر وب یک سند HTML را تجزیه می‌کند، این تگ‌ها را تفسیر کرده و محتوای مربوطه را به صورت بصری نمایش می‌دهد.
• CSS: CSS برای استایل‌دهی به ظاهر عناصر HTML تعریف‌شده در سند استفاده می‌شود. این به شما اجازه می‌دهد ویژگی‌هایی مانند رنگ‌ها، فونت‌ها، حاشیه‌ها، Padding، Borders و غیره را برای عناصر تک و گروهی مشخص کنید. قوانین CSS به عناصر HTML با استفاده از انتخاب‌گرها اعمال می‌شوند، که عناصر یا گروه‌های خاصی را هدف قرار می‌دهند. زمانی که یک مرورگر وب یک سند HTML را نمایش می‌دهد، استایل‌های تعریف‌شده در CSS به عناصر HTML مربوطه اعمال می‌شوند و بر روی ارائه بصری آن‌ها تأثیر می‌گذارد.
• ادغام: HTML و CSS عموماً با لینک کردن یک فایل CSS جداگانه به سند HTML با استفاده از عنصر <link> در بخش <head> سند HTML ادغام می‌شوند. این امکان جداسازی مسائل را فراهم می‌کند، به طوری که HTML ساختار و محتوای صفحه را تعریف می‌کند و CSS ارائه و مقدمات آن را تعریف می‌کند. علاوه بر این، استایل‌های خطی و داخلی نیز می‌توانند برای به کارگیری CSS مستقیماً درون عناصر HTML یا درون خود سند HTML استفاده شوند.

به طور کلی، HTML و CSS با هم برای ایجاد صفحات وب بصری جذاب و به خوبی ساختاربندی شده کار می‌کنند، با تعریف هم محتوای صفحه و هم ارائه آن.

طراحی واکنش گرا چیست؟

طراحی واکنش گرا نوعی جدید از طراحی است که به پلتفرم و محیطی که کاربر در آن قرار دارد پاسخ می‌دهد. زمانی که HTML ایجاد شد، بیشتر افراد از رایانه‌های شخصی استفاده می‌کردند. امروزه مردم می‌توانند وب‌سایت‌ها را بر روی رایانه، تلفن، تبلت یا حتی کنسول بازی مرور کنند. در گذشته، توسعه‌دهندگان وب‌سایت‌های جداگانه‌ای برای "دسکتاپ" و "موبایل" ایجاد می‌کردند. در حالی که این رویکرد کار می‌کرد، نگهداری آن آسان نبود. به جای ایجاد وب‌سایت‌های جداگانه، طراحی واکنش گرا وب‌سایت را بر اساس محیطی که شناسایی می‌کند، تولید می‌کند. این به طور قابل توجهی میزان توسعه و نگهداری وب‌سایت را کاهش می‌دهد. طراحی واکنش گرا معمولاً با ترکیبی از HTML، CSS و JavaScript انجام می‌شود.

آیا یادگیری HTML و CSS دشوار است؟

یادگیری HTML و CSS غالباً به عنوان یکی از آسان‌ترین جنبه‌های توسعه وب در مقایسه با زبان‌ها و فناوری‌های برنامه‌نویسی دیگر در نظر گرفته می‌شود. در اینجا دلایل آن آمده است:

• سینتکس ساده: HTML و CSS سینتکسی نسبتاً ساده در مقایسه با دیگر زبان‌های برنامه‌نویسی دارند. HTML شامل مجموعه‌ای از تگ‌هاست، در حالی که CSS از جفت‌های خاص - ویژگی استفاده می‌کند. این سادگی باعث می‌شود که برای مبتدیان آسان‌تر باشد که درک کرده و یاد بگیرند.
• نتایج سریع: با HTML و CSS، می‌توانید بلافاصله نتایج کار خود را در یک مرورگر وب مشاهده کنید. این بازخورد فوری می‌تواند انگیزشی باشد و به تقویت یادگیری کمک کند.
• منابع یادگیری زیاد: منابع آموزشی، راهنماها، ویدئوها و دوره‌های آنلاین بی‌شماری برای یادگیری HTML و CSS وجود دارد که بسیاری از آن‌ها رایگان هستند. علاوه بر این، جوامع آنلاین پشتیبانی‌کننده‌ای وجود دارند که می‌توانید از آن‌ها سوال بپرسید و در صورت بروز مشکل کمک بگیرید.
• نمودار یادگیری تدریجی: شما می‌توانید از مبانی HTML و CSS شروع کرده و به تدریج بر دانش خود بیفزایید. نیازی نیست همه چیز را یکجا یاد بگیرید؛ می‌توانید با ایجاد صفحات وب ساده شروع کرده و به تدریج مفاهیم و پروژه‌های پیچیده‌تری را بر عهده بگیرید.
• استفاده گسترده: HTML و CSS پایه و اساس توسعه وب هستند و به طور گسترده‌ای در ساخت وب‌سایت‌ها و وب‌ اپلیکیشن ها استفاده می‌شوند. این به این معنی است که فرصت‌های زیادی برای تمرین و به‌کارگیری مهارت‌های خود در پروژه‌های دنیای واقعی وجود دارد.

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

در پایان دوره

در پایان دوره، شما قادر خواهید بود وب‌سایت خود را با استفاده از HTML و CSS بسازید.

چرا می‌خواهید این دوره را بگذرانید؟

پاسخ ما ساده است: کیفیت آموزش.

محتوای تازه

هیچ‌کس رازی نیست که فناوری به سرعت در حال پیشرفت است. ابزارهای جدید هر روز منتشر می‌شوند و ضروری است که در بالای آخرین دانش برای یک توسعه‌دهنده React بهتر بمانید. شما در این دوره همواره محتوای بروز را بدون هیچ هزینه اضافی خواهید داشت.

کیفیت تولید ویدئو و صدا

تمام محتوای ما به عنوان ویدیو/صوت با کیفیت بالا تولید شده‌است تا بهترین تجربه یادگیری را برای شما فراهم کند.

شما،

• به وضوح مشاهده خواهید کرد.
• به وضوح خواهید شنید.
• در طول دوره بدون حواشی حرکت خواهید کرد.

همین حالا در دوره "ساخت یک وب‌سایت واقعی با HTML و CSS" شرکت کنید.

این دوره برای چه کسانی مناسب است؟

• هر کسی که می‌خواهد HTML و CSS را یاد بگیرد.
• برنامه‌نویسانی که به ساخت وب‌سایت با HTML و CSS علاقه‌مندند.
• هر کسی که هیچ تجربه برنامه‌نویسی در توسعه وب ندارد اما می‌خواهد یک متخصص شود.
• یک مبتدی کامل، با ذهن کنجکاو که می‌خواهد یک توسعه‌دهنده وب شود.
• هر کسی که برنامه‌ریزی برای تغییر شغل دارد و می‌خواهد یک توسعه‌دهنده وب شود.