آموزش طراحی وب

شروع فصل پروژه ی عملی html

دوستان استارت این فصل زده شد . در این دوره ی آموزشی رایگان ، شما تبدیل psd به html5,css3 رو با ویدئو های آموزشی طی چند جلسه میاموزید.

camera-app-icon-ramotion-small_1x

فصل پنجم (پروژه عملی در HTML)

فیلم آموزشی تبدیل psd به html

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

دوستانی که منتظر بودید به امید خدا دیگه استارت این فصل زده شد 🙂 در این دوره ی آموزشی رایگان ، شما تبدیل psd به html5,css3 رو با ویدئو های آموزشی طی چند جلسه میاموزید.

تصمیم گرفتم در این جلسه ابتدا قالب psd رو بهتون معرفی کنم. تصویر زیر یه قالب ساده هست که قراره در این فصل با html5 و css3به کد تبدیلش کنیم.

learn

برای مشاهده تصویر بزرگ روی تصویر کلیک کنید

 

در ابتدای شروع فصل اول html به شما دوستان قولی داده بودم، اونم این بود که در انتهای بخش html بعد از یادگیری عناصر html و خاصیت ها و سلکتورهای css همه ی این موارد رو در قالب یه پروژه ی عملی بهتون آموزش بدم تا از این موارد درک بهتری داشته باشید.

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

همونطور که در تصویر هم مشاهده می کنید، در فیلم های آموزشی تکنیک های زیر آموزش داده میشود:

۱- معرفی ابزارهای طراحی وب

۲- لایه بندی در html5

۳- رنگ ها

۴- Box Model

۵- Box-sizing

۶-  opacity

۷-  چیدمان عناصر با استفاده از float و position

۸-  نحوه ی استفاده از z-index

۹-  Hover بر روی عناصر

۱۰- Transition

۱۱- Transform

۱۲- نحوه ی استفاده از از nth-child ها و …

۱۳- لیست ها

۱۴- نحوه ی استفاده از فونت آیکون ها

۱۵- نحوه ی استفاده از انیمیشن های css با animate.css

۱۶- و …

در انتهای هر جلسه هم فیلم آموزشی و فایل های پروژه در اختیار شما قرار میگیره و میتونید خودتونم تمرین کنید.

پس ما با همراه باشید …

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۳۹

  • درود

    ممنونم از شما به خاطر این کار ارزشمند ، فقط می فرمایید که آموزش در پست های مجزا قرار می گیره یا در سیستم های آموزش آنلاین قراره برگزار بشه ؟

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

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

    • سلام دوست عزیز
      سعی میکنم فیلم هارو کوتاه رکورد کنم که دوستان به مشکل برنخورن.
      موفق باشید.

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

  • سلام و خسته نباشید
    من یه فارغ و التحصیل رشته نرم افزارم
    مدتیه که بیکارم، میخواستم از طریق وب نویسی واسه خودم کار و کاسبی راه بندازم، ولی از اونجایی که تو دانشگاه های ما چیز خاصی یاد نمیدن، من هم اصل ماجرا رو بلد نیستم (اصل ماجرا یعنی یکی از زبانهای PHP و ASP.NET)
    خیلی دوست دارم اینارو یاد بگیرم، این دو زبان رو واسه ازتباط با پایگاه داده و نوشتن صفحه ی ادمین خیلی نیاز دارم
    تو سر فصلهای آموزش حضوریتون هم نبود و فقط از طریق سیستم مدیریت محتوا کار رو پیش میبرید
    از اینها فیلم آموزشی یا مقاله آموزشی نمیذارید؟!!

    • سلام دوست عزیز
      اگر بخش php رو دنبال کنید به زودی این مباحث مطرح میشه . اما اگر عجله دارید بهتره کلاس آموزشی برید و یا یک pdf آماده مطالعه کنید .

    • سلام دوست عزیز
      خیر جایی رو نمیشناسم که به این سرعت بهتون آموزش بدن مگر اینکه تدریس خصوصی باشه .

  • ببخشید که سوالم ربظی به این موضوع نداره ،
    برای دوره های طراحی وب ، امکانش نیست که فیلم کلاسها رو تهیه کنیم
    برای افرادی مثل من که شهرستان زندگی میکنن خیلی خوبه اگه این امکان فراهم بشه

    • سلام دوست عزیز
      انشالله دوره های مجازی که برگزار شد میتونید شرکت بفرمایید.

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

  • سلام ، من خیلی وقته منتظرم تا این بخشو کامل کنید ؛ هر سری سر میزنم میبینم هنوز این آموزشو نذاشتین 🙁
    خیلی ها مثل من منتظرن …

  • سلام اگه فیلم گارگاه های آموزشیتون رو برای فروش بذارید خیلی خوب میشه خب خیلی ها هستن نمیتونن بیان تهران ، دوره های مجازی هم من متوجه نشدم چجوریه … ولی فکر نکنم بهتر از رکورد کلاس هاتون باشه!

  • سلام آقای همت یار
    ممنون بابت پاسختون
    آقای همت یار نمونه کار های شما در سایت پیکسلم خیلی زیبا و قشنگ هستند
    من اصلا تناسب رنگ ها رو نمیدونم و توی ترکیب رنگ ها مشکل دارم
    و از طرفی ، سلیقه و ایده پردازی در گرافیک ندارم .
    به نظر شما چطوری میتونم مثل شما و آقای همت یار ، طراح گرافیک بشوم؟

    • سلام دوست عزیز
      میتونید با دفتر ۷۷۶۰۱۸۹۵ تماس بگیرید و از آقای همت یار مشاوره بخواین .
      موفق و پاینده باشید.

  • سلام
    این آموزش چه زمانی بر روی سایتتون قرار میگیره ؟
    باتشکر از شما و همکاران محترمتان

  • سلام.اول مرسی واسه وقتی که میذارین و آموزش هارو روی سایت قرار میدید
    دوم اینکه این آموزش پروژه عملی کی میاد رو سایت؟؟؟

    • سلام دوست عزیز
      میدونم منتظر این بخش هستید ، اما متاسفانه فرصت نکردم ویدئو تهیه کنم از این قسمت، کدش رو آماده کردم اما فرصت نشده ویدئوشو آماده کنم. انشالله تو همین سال این بخش رو شروع میکنیم.
      موفق و پاینده باشید

  • سلام
    باتشکر از زمانی که جهت این آموزش های کاربردی و عالی گذاشتید
    منتظر انتشار پروژه عملی هستیم

  • بی صبرانه منتظر این آموزش هستم
    با تشکر از زحمات بی شائبه شما آقای همت یار

  • با عرض سلام و خسته نباشید.مدت زمان زیادی میگذره که قراره این آموزش بیاد و ما همچنان منتظریم.اگه قرار نیست این آموزش منتشر بشه اطلاع رسانی کنید که ما انقدر منتظر نمونیم
    با تشکر

    • سلام دوست عزیز

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

      ان شالله در ماه آتی این کار رو شروع می کنیم .

      موفق باشید

  • سلام.
    هنوز نذاشتید؟
    وقتی داشتم پست رو میخوندم خیلی خوشحال شدم وقتی اومدم نظرات رو خوندم فهمیدم هنوز نذاشتید.
    یا علی

  • با سلام و تشکر از مطالب آموزشی که در سایت ارایه کرده اید. در خصوص تهیه فایل آموزشی تبدیل PSD به HTML که قبلا اعلام فرمودید آیا می توانید زمان قطعی را برای ارایه آن اعلام بفرمایید؟

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین