ورود و عضویت 0
×

سلام خوش آمدید

ورود و عضویت
خانه » دوره » از صفرِ صفر طراحی سایت کنید

از صفرِ صفر طراحی سایت کنید

  • 18 دانشجو
  • سطح دوره : مبتدی
  • نوع دوره : فایل ویدئویی
  • شامل 30 جلسه
  • 670 دقیقه آموزش
  • دارای سورس کد
    • رایگانــــ😍ـــــ !
    (دیدگاه 2 کاربر)

    در دوره آموزشی از صفرِ صفر طراحی سایت کنید قصد داریم در کنار هم طراحی سایت را از پایه شروع کنید. در این دوره از صفر با زبان HTML آشنا شده و پس از آن CSS را کار خواهیم کرد.

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

    در این دوره از نسخه چهارم HTML و نسخه دوم CSS شروع خواهیم کرد و یک قالب ساده طراحی می کنیم و در پایان با نسخه پنجم HTML و نسخه سوم CSS به قالب طراحی شده روح و جان می بخشیدم.

     

    این دوره شامل یک پروژه پایانی نیز می باشد و پیش نیاز این دوره، دوره جشن تولد یک وبسایت است.

    قالب طراحی شده در این دوره

    لیست دروس

    درس اول

    معرفی css,html و ایجاد پروژه

    • تعریف مفهوم html,css
    • تعریف محیط توسعه کد (IDE)
    • ایجاد یک پروژه جدید
    • ایجاد اولین فایل html

    درس دوم

    آشنایی با کد های پایه و تگ ها

    • بررسی مفهوم تگ
    • بررسی تگ DOCTYPE
    • بررسی تگ html
    • بررسی تگ head
    • بررسی تگ title
    • بررسی تگ body

    درس سوم

    آشنایی با تگ های p و heading

    • استفاده از یک ویژگی مهم در تگ html
    • بررسی تگ p برای درج پاراگراف در سایت
    • بررسی تگ های heading برای درج عنوان ها در سایت

    درس چهارم

    CSS چیست؟

    • css چیه؟
    • چه کاربرد هایی داره؟
    • چرا باید ازش استفاده کنیم؟
    • انواع نوشتن css
    • انواع selector
    • مفهوم بلاک در css

    درس پنجم

    بررسی تگ a و چند رویداد در css

    • بررسی تگ a و ویژگی های آن
    • بررسی ویژگی href در تگ a
    • بررسی ویژگی target در تگ a
    • بررسی ویژگی hreflang در تگ a
    • بررسی ویژگی rel در تگ a
    • ویژگی های font در css
    • ویژگی text-decoration در css
    • بررسی رویداد های hover,active,focus,visited در css

    درس ششم

    تگ img و تصاویر در صفحات وب

    • بررسی تگ img
    • بررسی ویژگی src در تگ img
    • بررسی ویژگی alt در تگ img
    • بررسی ویژگی title در تگ img
    • بررسی ویژگی های weight,height در تگ img
    • ساخت تصویر لینک دار در صفحات وب

    درس هفتم

    لیست های شمارشی و غیرشمارشی در html

    • بررسی تگ ul در html
    • بررسی تگ ol در html
    • بررسی تگ li در html
    • موارد استفاده از لیست های شمارشی و غیرشمارشی

    درس هشتم

    بررسی margin,border,padding در css

    • بررسی سلکتور * در css
    • بررسی margin در css
    • بررسی border در css
    • بررسی padding در css
    • بررسی تگ div در html

    درس نهم

    بررسی ویژگی box-sizing در css

    • بررسی ویژگی box-sizing در css
    • بررسی پیش نویس -webkit-
    • بررسی پیش نویس -moz-
    • بررسی پیش نویس -o-

    درس دهم

    بررسی width,height,float در css

    • بررسی ویژگی width در css
    • بررسی ویژگی height در css
    • بررسی ویژگی float در css

    درس یازدهم

    بررسی clear در css

    • بررسی ویژگی clear در css
    • توضیح مقادیر initial,inherit

    درس دوازدهم

    بررسی position در css

    • بررسی ویژگی position در css
    • بررسی پارامتر static در ویژگی position
    • بررسی پارامتر relative در ویژگی position
    • بررسی پارامتر absolute در ویژگی position
    • بررسی پارامتر fixed در ویژگی position

    درس سیزدهم

    بررسی display در css

    • بررسی ویژگی display در css
    • بررسی پارامتر inline در ویژگی display
    • بررسی پارامتر block در ویژگی display
    • بررسی پارامتر inline-block در ویژگی display

    درس چهاردهم

    ایجاد پروژه عملی و تنظیمات اولیه

    • ایجاد پروژه جدید در phpstorm
    • ایجاد فایل های اولیه
    • انجام تنظیمات اولیه
    • لینک کردن فایل css reset به پروژه

    درس پانزدهم

    طراحی و ایجاد منو سایت

    • ایجاد منو سایت در پروژه
    • ایجاد فهرست در منو سایت
    • درج لوگو در منو سایت
    • درج دکمه call to action در منو سایت

    درس شانزدهم

    متحرک سازی عناصر در css با transition

    • بررسی پارامتر transition-property
    • بررسی پارامتر transition-duration
    • بررسی پارامتر transition-timing-function
    • بررسی پارامتر transition-delay
    • متحرک سازی لینک های پروژه عملی

    درس هفدهم

    کار با سایه ها در css

    • بررسی ویژگی box-shadow
    • بررسی پارامتر های box-shadow
    • سایه دهی به منو پروژه عملی

    درس هجدهم

    طراحی بخش کاور پروژه عملی

    • ایجاد بخش کاور سایت
    • آموزش کتابخانه fontawesome
    • آموزش استفاده از آیکون فونت ها
    • طراحی دکمه های دانلود

    درس نوزدهم

    طراحی بخش چشم انداز پروژه عملی

    • ایجاد بخش چشم انداز سایت
    • بررسی تگ video و قرار دادن فیلم در قالب

    درس بیستم

    طراحی بخش امکانات پروژه عملی

    • ایجاد بخش امکانات سایت
    • بررسی ویژگی transform
    • بزرگ نمایی المان ها با استفاده از ویژگی scale

    درس بیستم و یکم

    طراحی بخش لیست تعرفه ها پروژه عملی

    • ایجاد بخش لیست تعرفه ها (جدول قیمت گذاری) سایت
    • استفاده از ویژگی translate برای انتقال المان ها

    درس بیستم و دوم

    طراحی بخش تیم ما در پروژه عملی

    • ایجاد بخش تیم ما در سایت
    • معرفی تگ figure در html
    • معرفی تگ figcaption در html

    درس بیستم و سوم

    طراحی بخش خبرنامه در پروژه عملی

    • ایجاد بخش خبرنامه در سایت
    • استفاده از تگ form
    • استفاده از تگ input

    درس بیستم و چهارم

    طراحی بخش وبلاگ در پروژه عملی

    • ایجاد بخش وبلاگ در سایت
    • ایجاد پست ها

    درس بیستم و پنجم

    طراحی بخش نظرات در پروژه عملی

    • ایجاد بخش نظرات در سایت
    • ایجاد نظرات کاربران

    درس بیستم و ششم

    طراحی بخش تماس با ما در پروژه عملی

    • ایجاد بخش تماس با ما در سایت
    • ایجاد یک فرم تماس با استفاده از تگ form
    • استفاده از کد iframe گوگل مپ برای درج نقشه

    درس بیستم و هفتم

    طراحی بخش تماس پاورقی (فوتر) در پروژه عملی

    • ایجاد بخش فوتر در سایت
    • درج شبکه های اجتماعی
    • درج متن حفظ حق کپی رایت

    درس بیستم و هشتم

    طراحی tooltip در پاورقی (فوتر) پروژه عملی

    • ایجاد tooltip برای آیکون شبکه های اجتماعی
    • بررسی ویژگی های before و after در css
    • ایجاد فلش (arrow) برای tooltip ها

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

    ریسپانسیو کردن پروژه عملی (بخش اول)

    • تعریف واژه واکنش گرا یا responsive
    • بررسی نقاط شکست در طراحی سایت
    • بررسی ویژگی مدیا کوئری
    • ریسپانسیو سازی قالب برای نقطه شکست ۷۲۱px (تبلت ها)

    درس سی ام

    ریسپانسیو کردن پروژه عملی (بخش دوم)

    • ریسپانسیو سازی قالب برای نقطه شکست ۴۸۰px (تلفن های هوشمند)

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

    • این دوره مناسب چه افرادیست ؟
    • افرادی که آشنایی با HTML ندارند.
    • افرادی که آشنایی با CSS ندارند.
    • افرادی که علاقه مند به طراحی سایت دارند.

     

    • این دوره مناسب چه افرادی نیست؟
    • افرادی که با زبان HTML و تگ های آن آشنا هستند.
    • افرادی که با CSS آشنا هستند و توانایی استایل دهی به المان ها هستند.
    • افرادی که قابلیت ایجاد یک قالب ساده از روی فایل PSD داشته باشند.

    مدرس این دوره

    امید مقدسی

    یک توسعه دهنده دوست داشتنی ;)

    تماس با من

    در صورت نیاز به راهنمایی درباره دوره ها با من در تماس باشید!

    2 دیدگاه برای از صفرِ صفر طراحی سایت کنید

    1. alirezamoazeny –

      سلام امید جون رابط کاربری سایتت خیلی قوی وجذابه موفق باشی

      • امید مقدسی –

        ممنون دوست عزیز 🙂

    2. ali.ns –

      بهترین دوره طراحی سایتی که میتونه از آدم ی کد نویسی بسازه. مرسی بابت دوره

      • امید مقدسی –

        نظر لطف شماس. امیدوارم براتون مفید بوده باشه

    دیدگاه خود را بنویسید

    آدرس : اصفهان - نجف آباد - امیرآباد - بلوار جمهوری اسلامی - کوچه ایثار

    شماره تماس : 3113 475 0937