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

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

طراحی یک صفحه وب کامل - بخش اول

  • مدرسعباس مقدم
  • سطح دورهمبتدی تا پیشرفته
  • تعداد ویدئو31
  • زمان کل آموزش34 ساعت و 8 دقیقه
  • زمان این ویدئو66 دقیقه
  • امتیاز دوره9   از   30   رای
  • تعداد ثبت نام164
این ویدئو فقط برای کاربرانی که در این دوره ثبت نام کرده اند قابل مشاهده و دانلود است.
درباره این دوره

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

برای ساخت یک وبسایت، اولین قدم یادگیری زبانهای 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
    در این درس در ابتدا با تگ img و نحوه‌ی درج تصاویر در صفحات وب آشنا خواهید شد. همچنین در این درس مفهوم زمینه‌ی شفاف یا 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 استفاده از صوت و ویدئو در صفحات وب 01:11:05
    در این درس در ابتدا به معرفی مفهوم HTML5 و تکنولوژی های وابسته به آن پرداخته شده است. سپس یکی از این تکنولوژی ها، یعنی پخش فایلهای صوتی و ویدئویی در صفحات وب مورد بررسی قرار گرفته و نحوه استفاده از فایلهای صوتی و ویدئوی و فایلهای زیرنویس در صفحات وب تشریح شده است. همچنین در انتها به معرفی پلیر قدرتمند JWPlayer و نحوه استفاده از آن پرداخته شده است.
  • 27 آشنایی با تگ های معنایی جدید در HTML5 58:43
    در این درس در ابتدا به بررسی مفهوم وب معنایی یا Semantic Web پرداخته شده است. سپس تگهای معنایی جدید در HTML5 معرفی شده اند و نقش آنها در وب معنایی تشریح شده است. در انتها نیز مطالب بیان شده بر روی صفحه وب طراحی شده در درسهای قبلی پیاده سازی شده است. همچنین توضیحات مختصری در مورد سایت w3schools.com و نحوه استفاده از آن ارائه شده است.
  • 28 آشنایی با تبدیل ها (Transforms) در CSS3 01:23:49
    در این درس به معرفی یکی از مهمترین ویژگی های جدید در CSS3، یعنی تبدیل ها یا Transform ها پرداخته شده است. انواع روشهای ایجاد تبدیلات 2 بعدی و 3 بعدی در این درس بررسی شده اند.
  • 29 آشنایی با Transition ها و Animation ها در CSS3 - بخش اول 01:27:12
    در این درس به بررسی مفهوم Transition ها و Animation ها در CSS3 پرداخته شده است و همچنین تابع cubic-bezier معرفی شده است. سپس چند مثال ساده با استفاده از Transition ها و Animation ها انجام شده و مثال های پیشرفته تر در درس بعدی ارائه خواهند شد.
  • 30 آشنایی با Transition ها و Animation ها در CSS3 - بخش دوم 01:24:12
    در این درس 3 مثال کاربردی با استفاده از Animation های CSS3 پیاده سازی شده اند که عبارتند از : طراحی یک اسلایدر 2 بعدی، طراحی یک اسلایدر 3 بعدی و طراحی یک بنر تبلیغاتی
  • 31 آشنایی با گرافیک برداری و SVG 01:13:09
    در این درس در ابتدا به معرفی گرافیک برداری و ویژگی‌های آن پرداخته شده است. سپس به معرفی SVG که یکی از انواع گرافیک برداری است پرداخته شده است و مثالهایی با استفاده از آن انجام داده شده است. سپس نحوه استایل دادن به تصاویر SVG با استفاده از CSS بررسی شده است و در نهایت به معرفی Icon Font ها و کاربرد آنها و نحوه‌ی ایجاد آنها پرداخته شده است.

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

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

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

دیدگاه‌ها
  • فرشید سالار

    ثبت شده در 1395/12/29
    چرا بخش 15 و 16 اصلا هیچ چیزی راجب طراحی نگفتین؟ چرا مبحث استفاده از صوت و ویدیو را اومدین 3 بار تکرار کردین ؟ موضوعات تکراری رو تو فیلمای اخری زیاد استتفاده کردین ، لطفا ترتیب فیلمها رو با چیزی که نوشتین یکی کنین
  • ابوالفضل رهنما

    ثبت شده در 1395/12/23
    خوب و عالی
  • یزدان رجبی

    ثبت شده در 1395/12/14
    با سلام دوره ی بسیار خوب و فوق العاده ای هست هم شیوه ی تدریس، هم کامل و جامع بودن مطالب، و هم قیمت بسیار مناسب. فقط اگر امکانش هست آموزش های بعدی رو سریع تر داخل سایت قرار بدید . مدت زمان شروع تا پایان یک دوره یک مقدارطولانی است. با تشکر
  • علی اسدی

    ثبت شده در 1395/12/11
    عالی ممنون
  • بهزاد بگ محمدی

    ثبت شده در 1395/11/23
    بسیار عالی آموزش میدید و من با دیدن آموزش شما کاملا مجاب شدم که تمام دور های شما رو ثبت نام کنم . من مطمئن هستم با اموزش های شما به ایده آل های برنامه نویسی تحت وب میرسم. خیلی سپاسگذارم و خسته نباشید میگم. ضمنا خرید پستی مشکل دارد و من نتونستم سفارش محصولات آموزشی رو از طریق پست انجام بدهم.
  • علی صادقیانی

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

    ثبت شده در 1395/11/16
    سلام آقای مقدم کارتون بیسته و واقعا از نحوه آموزش دادنتون لذت می برم و امیدوارم روند تولید آموزش هایی که خودتون مدرس هستید ادامه پیدا کنه و بیشتر توی سایتتون بزارید ... تاالان هر دوره ای که گذاشتید گرفتم و ازشون راضیم ممنون
  • رضا خالقی زاده

    ثبت شده در 1395/11/5
    خیلی عالی جامع و کاربردی
  • سعید خلیلی

    ثبت شده در 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
    ضمن عرض خسته نباشید باز هم مثل مابقی دوره ها همه چی خوب و عالی بود.

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

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

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