آموزش طراحی صفحات وب با HTML5 و CSS3

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

مباحث تکمیلی - بخش اول

  • مدرسعباس مقدم
  • سطح دورهمبتدی تا پیشرفته
  • تعداد ویدئو26
  • زمان کل آموزش26 ساعت و 30 دقیقه
  • زمان این ویدئو48 دقیقه
  • امتیاز دوره9   از   22   رای
  • تعداد ثبت نام124
این ویدئو فقط برای کاربرانی که در این دوره ثبت نام کرده اند قابل مشاهده و دانلود است.
درباره این دوره

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

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

طراحی وب مجموعه ای از تکنیک‌ها است که بر پایه‌ی تعداد زیادی از استانداردهای جهانی استوار شده است که مهمترین این استانداردها زبانهای HTML و CSS هستند.

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

از جمله مباحثی که در این دوره به آنها پرداخته خواهد شد می‌توان به موارد زیر اشاره کرد :

  • مبانی HTML و CSS
  • فرم‌ها، لیست‌ها، جدول‌ها
  • CSS Box Model
  • Page Layout Techniques
  • طراحی واکنشگرا یا Responsive Design
  • Media Query ها
  • تگ‌های معنایی در HTML5
  • انیمیشن‌ها در CSS3
  • آشنایی با SVG و Canvas
  • و ...

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

  • آشنایی مقدماتی با اینترنت و وب

لیست دروس این دوره

  • بخش 1 : آشنایی با مقدمات طراحی وب

  • 1 آشنایی با مفاهیم اولیه طراحی وب 36:34
    در این درس در ابتدا مفهوم وب و طراحی وب تشریح شده است. سپس جایگاه زبان‌های HTML و CSS در طراحی وب روشن گردیده و در آخر هم به پیش‌نیازهای شروع دوره اشاره شده و سرفصل‌های دوره معرفی شده اند.
  • 2 آشنایی با مبانی HTML و CSS - بخش اول 46:14
    در این درس در ابتدا محیط نرم افزار Visual Studio و نحوه‌ی ایجاد یک فایل HTML در آن آشنا می‌شوید. سپس ساختار اسناد HTML با جزییات بیشتری مورد بررسی قرار گرفته و با انجام یک مثال ساده، بسیاری از نکات مقدماتی و کلیدی در کدنویسی HTML توضیح داده می‌شوند
  • 3 آشنایی با مبانی HTML و CSS - بخش دوم 55:04
    در این درس در ابتدا با ساختار فایلهای CSS و انواع روشهای استفاده از کدهای CSS آشنا می‌شوید. سپس برخی از ویژگی‌های مهم CSS مانند font-size، font-family، color و ... معرفی می‌شوند. همچنین در این درس با انواع روش‌های ایجاد رنگ‌ها در CSS آشنا خواهید شد و یک آشنایی مقدماتی با لینک‌ها در HTML کسب خواهید کرد.
  • 4 آشنایی با مبانی HTML و CSS - بخش سوم 59:04
    در این درس در ابتدا با مفهوم HTML Entities و همچنین Preformatted Text آشنا خواهید شد. سپس نکات تکمیلی در مورد لینک‌ها در HTML ارائه شده و همچنین با چند ویژگی دیگر از CSS مانند : line-height، word-spacing و ... آشنا می‌شوید. سپس تگ‌های div و span و همینطور ویژگی‌های Inheritance و Class Selector در CSS معرفی می‌شوند. همچنین در انتهای این درس تمرینی برای شما در نظر گرفته شده که توصیه می‌شود حتماً به طور دقیق و کامل انجام داده شود.
  • 5 آشنایی با CSS Box Model - بخش اول 55:15
    CSS Box Model یکی از مهمترین مفاهیم در CSS است که در این درس و درس بعدی با این مفهوم و برخی ویژگی‌های مرتبط با آن آشنا خواهید شد.
    همچنین در این درس کار با بخش Developer Tools مرورگرها را آغاز می‌کنیم که شامل ابزار بسیار مفیدی برای طراحان وب می‌باشند
  • 6 آشنایی با CSS Box Model - بخش دوم 01:07:56
    در این درس، ابتدا با سه ویژگی بسیار مهم از CSS که عبارتند از : overflow، float و clear، آشنا خواهید شد. سپس با انجام یک مثال عملی، کاربرد مباحث مطرح شده در این درس و درس قبلی در عمل نشان داده شده است که در این مثال Layout یک صفحه‌ی وب ساده طراحی می‌شود.
  • 7 آشنایی با لیست‌ها 50:49
    در این درس با یکی از پرکاربردترین مفاهیم در طراحی وب، یعنی "لیست‌ها" آشنا خواهید شد که با استفاده از آن‌ها می‌توان انواع منوهای افقی و عمودی و منوهای چند سطحی را طراحی کرد که چند نمونه از این موارد در این درس به صورت عملی پیاده‌سازی می‌‌شوند.
  • 8 بررسی انواع سلکتورها در CSS 01:14:47
    در این درس ابتدا مفهوم درخت DOM به طور مختصر تشریح شده، سپس به بررسی انواع سلکتورهای ساده و ترکیبی و همچنین سلکتورهای خاصیت و کلاسهای کاذب پرداخته شده است.
  • 9 آشنایی با چند مفهوم مهم در CSS 54:56
    در این درس در ابتدا با مفاهیم Specificity و Cascade که اهمیت بسیار بالایی در CSS دارند آشنا خواهید شد. سپس با مفهوم CSS Reset و همچنین دو دستور @import و @charset و کاربرد آنها آشنا می‌شوید. در انتها نیز با خلاصه نویسی در CSS آشنا خواهید شد.
  • 10 کار با تصاویر در صفحات وب 01:06:32
    در این درس در ابتدا با تگ و نحوه‌ی درج تصاویر در صفحات وب آشنا خواهید شد. همچنین در این درس مفهوم زمینه‌ی شفاف یا Transparent Background معرفی می‌شود. سپس با اجزاء مختلف ویژگی background و نحوه‌ی به کار بردن تصاویر به عنوان پس زمینه‌ی عناصر آشنا خواهید شد و در انتها نیز مفهوم Multiple Backgrounds در CSS معرفی می‌شود.
  • 11 کار با جدول ها و فونت ها در صفحات وب 01:06:40
    در این درس ابتدا به معرفی تگ و تگهای وابسته به آن که برای ایجاد جداول در صفحات وب به کار می‌روند پرداخته شده است. سپس در رابطه با استفاده از فونت‌های سفارشی در صفحات وب صحبت شده است. ضمناً در انتهای درس یک تمرین نسبتاً کامل هم ارائه شده است.
  • 12 نکات پیشرفته در مورد border ها و رنگ های شفاف 54:23
    در این درس در ابتدا با 2 ویژگی border-radius و border-image و کاربردهای آنها آشنا خواهید شد. سپس به بررسی نحوه‌ی ایجاد شفافیت با استفاده از توابع hsla و rgba و همینطور ویژگی opacity می‌پردازیم.
  • 13 آشنایی با گرادیان ها و ویژگی های box-shadow و text-shadow 55:30
    در این درس ابتدا با گرادیان‌ها و انواع مختلف آن آشنا می‌شوید. سپس به معرفی 2 ویژگی بسیار مهم در CSS یعنی box-shadow و text-shadow پرداخته می‌شود.
  • 14 آشنایی با فرم ها در HTML5 01:45:20
    در این درس به معرفی فرم ها که یکی از اجزاء بسیار مهم زبان HTML هستند پرداخته می‌شود و بسیاری از ویژگی های جدید فرم‌ها که در HTML5 به این زبان اضافه شده اند مورد بررسی قرار می‌گیرند.
  • 15 طراحی یک صفحه وب کامل - بخش اول 01:06:10
    در این درس طراحی یک صفحه‌ی وب کامل شروع شده است که بخشهایی از این صفحه‌ی وب در این درس پیاده سازی شده است و سایر قسمتها در درس بعدی کامل خواهند شد.
  • 16 طراحی یک صفحه وب کامل - بخش دوم 01:12:17
    در این درس علاوه بر کدنویسی و تکمیل کردن قالب در نظر گرفته شده، به موضوع عناصر کاذب (Pseudo Elements) نیز پرداخته شده است و از این عناصر در طراحی قالب استفاده شده است.
  • 17 آشنایی با CSS Positioning و واحدهای اندازه گیری 01:04:27
    در این درس به بررسی یکی از مهمترین مفاهیم در طراحی وب، یعنی CSS Positioning پرداخته شده است که نقش بسیار زیادی در طراحی صفحات وب حرفه ای ایفا می‌کند. سپس به بررسی انواع واحدهای اندازه‌گیری در CSS پرداخته شده است.
  • 18 طراحی منوهای چند سطحی 01:03:28
    در این درس به یکی از مباحث جذاب در طرای وب، یعنی طراحی منوهای چند سطحی (یا منوهای کشویی) پرداخته شده است و پس از ارائه‌ی چند مثال ساده، یک مثال عملی که مشابه منوی اصلی سایت دیجی کالا است پیاده سازی شده است.
  • 19 مباحث تکمیلی - بخش اول 48:45
    در این درس به بررسی تعدادی از مطالب باقی مانده از HTML پرداخته شده است. مانند مطالب باقی مانده از مبحث فرم‌ها و برخی تگهای HTML مانند تگ map، blockquote و ...
  • 20 مباحث تکمیلی - بخش دوم 01:13:40
    در این درس در ابتدا به معرفی برخی از ویژگی های باقی مانده از CSS مانند text-indent و outline و ... پرداخته شده است. سپس چند وبسایت و ابزار مفید در زمینه CSS معرفی شده است که برای طراحان وب بسیار مفید خواهند بود.
  • بخش 2 : روش‌های چیدمان عناصر و طراحی واکنش‌گرا

  • 21 آشنایی با Media Query ها در CSS3 01:18:19
    در این درس به معرفی یکی از مهمترین ویژگی های CSS3، یعنی Media Query ها پرداخته شده است که یکی از ارکان اصلی طراحی Responsive به حساب می‌آیند. در انتهای درس نیز یک صفحه‌ی وب ساده اما Responsive طراحی شده است.
  • 22 طراحی چند ستونه (Multi-column Layout) 01:15:47
    در این درس ابتدا به بررسی مفهوم طراحی چند ستونه و بعد از آن به معرفی ماژول Multi-column Layout در CSS3 پرداخته شده است. در انتهای درس نیز به بررسی مفهوم viewport در صفحه نمایش های با تراکم پیکسلی بالا پردخته شده و راه حل مشکل مطرح شده در درس قبلی معرفی شده است.
  • 23 آشنایی با Grid System ها 01:09:32
    در این درس ابتدا به معرفی ویژگی box-sizing در CSS پرداخته شده، سپس مفهوم Grid System ها تشریح می‌شود و یک Grid System ساده به صورت گام به گام پیاده سازی می‌شود. سپس یک Grid System کامل ایجاد شده و یک مثال با آن انجام شده است
  • 24 طراحی یک صفحه وب ریسپانسیو 01:02:26
    در این درس با استفاده از Grid System طراحی شده در درس قبلی، یک صفحه‌ی وب کامل به صورت ریسپانسیو و به صورت گام به گام طراحی شده است.
  • 25 آشنایی با Flexbox 01:06:37
    در این درس با یکی از قویترین روشهای چیدمان عناصر در صفحات وب، یعنی Flexbox آشنا خواهید شد یکی از ویژگی‌های جدید در CSS3 می‌باشد.
  • بخش 3 : آشنایی با مباحث پیشرفته و متفرقه در طراحی وب

  • 26 #اطلاعیه 00:00
    به اطلاع کلیه کاربرانی که در این دوره‌ی آموزشی ثبت نام کرده‌اند (و یا قصد ثبت نام دارند) می‌رساند که بنا به بروز برخی مشکلات، بخش سوم این دوره آموزشی (که حدوداً شامل 10 درس خواهد بود) با تاخیر نسبتاً طولانی ضبط و بر روی سایت قرار خواهد گرفت. (احتمالا در بهمن ماه)
    ضمن عذر خواهی از کاربران گرامی، نهایت سعی خود را انجام خواهم داد تا در اولین فرصت این بخش از این دوره‌ی آموزشی را نیز آماده و ارائه کنم.
    با تشکر

درباره مدرس این دوره

فارغ‌التحصیل رشته‌ی مهندسی برق - قدرت اما شدیداً علاقه‌مند به برنامه‌نویسی هستم.

با بیشتر زبان‌های برنامه‌نویسی آشنایی مقدماتی تا متوسط دارم و تخصص اصلیم برنامه‌نویسی وب است.

دیدگاه‌ها
  • سعید خلیلی

    ثبت شده در 1395/10/3
    سلام از زحمات شما کمال تشکر را دارم . واقعا مطالب با جزئیات و کامل و کاربردی بود. به نظر من در نوع خودش منحصر به فرد هست .
  • میدیا ادب آموز

    ثبت شده در 1395/9/29
    بی صبرانه منتظر ادامه آموزش هستم :)) کسانی که به آموزش نیاز دارن، بهترین کار اینه که آموزش های آقای مقدم رو تهیه کنن. اگر می خواید این آموزش هارو تهیه کنید و دارید کامنت ها رو می خونید که از کیفیت آموزش خیالتون راحت شه باید بگم که بعد از تموم شدن آموزش ها شما راحت توانایی پوشش یک پروژه رو دارید . پس از خرید این محصولات شک نکنید.
  • مرضیه قاهری

    ثبت شده در 1395/8/21
    سلام استاد گرانقدر،امیدوارم هر چی که هست خیر باشه و سلامت باشید و در پناه خدا من تا بهمن ماه بیصبرانه منتظر می مونم
  • امین تقی پور

    ثبت شده در 1395/8/8
    ممنون از پوشش کامل مسائل مربوطه متشکر از شما آقای مقدم
  • محمد دهنوی

    ثبت شده در 1395/8/8
    واقعا بی نظیره. دست مریزاد .
  • مهدی جباری

    ثبت شده در 1395/8/3
    حرف نداره
  • محدثه صندوقدار

    ثبت شده در 1395/8/2
    با سلام و خسته نباشید دوره بسیار فوق العاده‌ای هستش ، می خواستم از شیوه تدریس و قوه بیان عالی و همچنین از اینکه مطالب را دلسوزانه و با جزئیات دقیق بیان می کنید، تشکر کنم. انشاالله همیشه موفق و پیروز باشید...
  • سحر رحمانی

    ثبت شده در 1395/7/30
    درود به شرفت واقعا عالی هستی اقای مقدم عالییییییی
  • محسن آستانه

    ثبت شده در 1395/7/17
    درود به شرفت آقای مقدم درود
  • داریوش یزدانی

    ثبت شده در 1395/7/11
    بسیار عالی
  • نئو میت

    ثبت شده در 1395/7/10
    فوق العادست و به خاطر همین بی تابم و منتظر برای ادامه ...
  • لیلا احمدی

    ثبت شده در 1395/7/7
    سلام جناب مهندس بی نهایت سپاسگزارم به خاطراین دوره آموزشی عالی
  • حامد بابائی

    ثبت شده در 1395/7/6
    سلام و خدا قوت خدمت استاد عزیز با تشکر و قدردانی از زحمات شما و تدریس خوبتان ، ما همچنان منتظر قسمت های بعدی آموزشتان هستیم
  • امید زینالی

    ثبت شده در 1395/6/30
    در یک کلام. عالی من درسته قبلا html و css رو از سایتایی مثل w3school یاد گرفته بودم ولی همیشه یه کمبودایی درباره مفاهیم بعضی کدها و دستورات حس میکردم. این آموزش واقعا از ابتدا شروع میکنه و تا مرحله حرفه ای طراحی پیش میره. یه چیز دیگه ام اینکه آقای مقدم بعضی جاها تجربه هاشم درمیون میزاره که خیلی برای من مفید بود. واقعن تشکر میکنم. خسته نباشید.
  • امین زندگانی

    ثبت شده در 1395/6/27
    سلام.خسته نباشید.شیوه تدریستون عالیه فقط اگه مباحث باقی ماندرو سریع تر در دسترس قرار بدین خیلی بهتر میشه.با تشکر
  • مصطفی رضایی

    ثبت شده در 1395/6/18
    با عرض سلام استاد مقدم اموزش ها تون خیلی عالی هستند ای کاش یه دوره اموزشی Asp,net رو هم شروع میکردید .
  • بهنام نظرپوری

    ثبت شده در 1395/6/17
    با سلام. مهندس لطفا اگر مقدور است دوره bootstrap رو با صدای رساتون تهیه کنید واقعا بیانتون عالیه ممنون
  • مسعود عظیمی

    ثبت شده در 1395/6/2
    این دوره هم مثل بقیه دوره ها فوق العاده بوده. من دوره php، طراحی وب ، جی کوئری و جاوااسکریپت تهیه کردم. عالیه. ایشالا موفق باشن آقای مقدم....
  • مرتضی شهیدی فر

    ثبت شده در 1395/5/31
    عرض سلام و ادب ضمن تشکر از مدرس این دوره ، لطفا زمانبندی برای ارایه قسمت ها ریسپانسو و .. را ارایه کنید هر روز سر میزنم به سایت ببنیم قسمت ها تکمیل شده مشتاقانه منتظریم. با تشکر
  • محمد محمدی

    ثبت شده در 1395/5/24
    مثل همیشه عالی
  • علی بیگی

    ثبت شده در 1395/5/23
    با تشکر ویژه از استاد مقدم.واقعا شیوه تدریس استاد بی نظیره.من قبلا دوره های دیگه ای رو از سایت های گوناگون تهیه کرده بودم ولی هیچ کدوم قابل مقایسه با دوره های این سایت نیستند.با آرزوی سلامتی و سربلندی برای استاد مقدم.
  • حیدر جعفرزاده

    ثبت شده در 1395/4/12
    ضمن عرض خسته نباشید باز هم مثل مابقی دوره ها همه چی خوب و عالی بود.

ثبت دیدگاه و امتیاز

فقط افرادی که در دوره ثبت نام کرده‌اند مجاز به ارسال دیدگاه هستند.

این صفحه را می‌پسندم