آموزش جامع HTML و CSS: ساخت وب‌سایت‌های واکنش‌گرا در دنیای واقعی - آخرین آپدیت

دانلود HTML and CSS Masterclass: Build Responsive Real-World Websites

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره:

استادکلاس HTML و CSS: ساخت وب‌سایت‌های واکنش‌گرا و واقعی

ساخت وب‌سایت‌های واکنش‌گرا و واقعی با HTML و CSS، CSS Flexbox و CSS Grid همراه با پروژه‌ها و تمرین‌های عملی

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

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

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

  • تسلط بر HTML و CSS از صفر – یادگیری بلوک‌های سازنده ضروری توسعه وب.
  • ساخت 3 پروژه واقعی – کسب تجربه عملی با توسعه وب‌سایت‌های کاملاً کاربردی و واکنش‌گرا.
  • ایجاد چیدمان‌های انعطاف‌پذیر با Flexbox و CSS Grid – تسلط بر تکنیک‌های چیدمان مدرن برای طراحی وب پویا.
  • بهبود وب‌سایت‌ها با انیمیشن‌ها و ترنزیشن‌ها – جذاب کردن بصری وب‌سایت‌های خود با انیمیشن‌های CSS، keyframes، transition و transforms.
  • درک مفاهیم اصلی توسعه وب
  • فرم‌ها، مدیا و تگ‌های HTML
  • سینتکس CSS، سلکتورهای ID و Class
  • سلکتورها، Pseudo Selectors و عناصر معنایی (Semantic Elements)
  • مدل جعبه CSS (CSS Box Model): Padding، Border و Margin
  • Positioning، Display، Float و موارد بیشتر
  • فونت‌ها، رنگ‌ها و تکنیک‌های استایل‌دهی
  • Media Queries برای واکنش‌گرایی موبایل

چرا HTML و CSS یاد بگیریم؟

HTML و CSS مهارت‌های ضروری برای هر کسی است که به توسعه وب علاقه‌مند است. با یادگیری این تکنولوژی‌ها، قادر خواهید بود:

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

چه کسانی باید این دوره را بگذرانند؟

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

تا پایان این دوره، شما:

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

چرا منتظر بمانید؟ همین الان شروع کنید!

به هزاران دانشجو در سراسر جهان بپیوندید و اولین قدم را برای تبدیل شدن به یک توسعه‌دهنده وب بردارید. همین امروز در کلاس من شرکت کنید و شروع به ساخت وب‌سایت‌های واقعی و واکنش‌گرا با HTML و CSS کنید!

فایل‌های منابع را دانلود کنید: دانلود منابع دوره HTML و CSS


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

درس‌ها Lessons

  • به استادی HTML و CSS خوش آمدید Welcome to HTML and CSS Masterclass

  • شروع کار Getting Started

  • توسعه وب چیست؟ What is Web Development?

  • چگونه ویرایشگر متن (VSCode) را دانلود و نصب کنیم How to download and install text editor (VSCode)

  • پیمایش رابط کاربری VSCode Navigating VSCode interface

  • نصب و دانلود مرورگر Install and download browser

  • نصب و درک افزونه‌های HTML و CSS Install and understand HTML and CSS extensions

  • چگونه فایل‌ها و پوشه‌های HTML و CSS ایجاد کنیم How to create HTML and CSS files and folder

  • HTML چیست What is HTML

  • اسناد HTML HTML documents

  • ادامه اسناد HTML Continuation on HTML documents

  • تگ‌های HTML HTML Tags

  • ادامه تگ‌های HTML Continuation on HTML Tags

  • لینک‌ها Links

  • تصاویر Images

  • لیست‌ها Lists

  • جداول Tables

  • فرم‌های HTML HTML forms

  • رسانه HTML HTML Media

  • ادامه رسانه HTML Continuation on HTML Media

  • دکمه Button

  • کامنت‌ها Comments

  • عناصر معنایی HTML HTML Semantic Elements

  • CSS چیست What is CSS

  • انواع CSS Types of CSS

  • سینتکس CSS CSS Syntax

  • کامنت‌های CSS CSS Comments

  • انتخابگر جهانی Universal Selector

  • انتخابگر عنصر Element Selector

  • انتخابگر کلاس Class Selector

  • انتخابگر ID ID Selector

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

  • انتخابگر نوادگان Descendant Selector

  • انتخابگرهای شبه کلاس Pseudo-classes Selectors

  • ادامه انتخابگرهای شبه کلاس Continuation on Pseudo-classes Selectors

  • واحدهای CSS CSS Units

  • استایل‌دهی فونت Font Styling

  • رنگ فونت Font Color

  • استایل‌دهی پس‌زمینه Background Styling

  • مدل جعبه CSS (Padding, Border و Margin) 12 CSS Box Model (Padding, Border and Margin)

  • ویژگی Display Display Property

  • Float, Clear و Overflow Float, Clear and Overflow

  • تعیین موقعیت Positioning

  • ادامه تعیین موقعیت Continuation on Positioning

  • تبدیلات Transformation

  • انتقال Transition

  • انیمیشن Animation

  • مقایسه CSS Flexbox با CSS Grid CSS Flexbox Vs CSS Grid

  • مقدمه‌ای بر Flexbox Introduction to Flexbox

  • Flexbox ریسپانسیو Responsive Flexbox

  • تکمیل Flexbox Completion on Flexbox

  • CSS Grid CSS Grid

  • ادامه CSS Grid Continuation on CSS Grid

  • پروژه ۱ - ساخت وب‌سایت سفر Project 1 - Building a Travel Website

  • ایجاد محتوای بخش Hero Creating the Hero Section Content

  • ریسپانسیو کردن وب‌سایت Making the Website Responsive

  • پروژه ۲ - ساخت وب‌سایت گالری عکس Project 2 - Building a Photo Gallery Website

  • ساخت بخش Hero وب‌سایت گالری عکس Building the Hero Section of Photo Gallery Website

  • ساختاردهی چیدمان گالری Structuring the Gallery Layout

  • انیمیشن بخش Hero وب‌سایت Animation of the Website Hero Section

  • ساخت فوتر وب‌سایت گالری Building the Gallery Website Footer

  • ریسپانسیو بودن وب‌سایت گالری عکس - بخش ۶ Responsiveness of Photo Gallery Website - Part 6

  • نتیجه‌گیری وب‌سایت گالری عکس Conclusion of Photo Gallery Website

  • پروژه ۳ - ساخت وب‌سایت آژانس معماری Project 3 - Building an Architecture Agency Website

  • ایجاد محتوای بخش Hero Creating the Hero Section Content

  • ایجاد بخش اول Creating the first section

  • ایجاد بخش تصاویر Creating the images section

  • ایجاد بخش فرم Creating the form section

  • ایجاد بخش فوتر Creating the footer section

  • تکمیل بخش فوتر completing the footer section

  • انیمیشن وب‌سایت Website Animation

  • طراحی ریسپانسیو وب‌سایت Website Responsive Design

  • نتیجه‌گیری وب‌سایت معماری Conclusion of the Architectural Website

نمایش نظرات

آموزش جامع HTML و CSS: ساخت وب‌سایت‌های واکنش‌گرا در دنیای واقعی
جزییات دوره
16h 18m
73
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
17
- از 5
ندارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Quadri Ilebiyi Quadri Ilebiyi

سلام، من Quadri هستم.