هزینه آموزش
۶۰,۰۰۰ تومان

آموزش پروژه محور HTML و CSS

آموزش پروژه محور HTML و CSS

تعداد دانشجو
۸,۳۸۵ نفر
مدت زمان
۴ ساعت و ۹ دقیقه
هزینه آموزش
۶۰,۰۰۰ تومان
محتوای این آموزش
تضمین کیفیت
۳۸ بازخورد (مشاهده نظرات)
آموزش پروژه محور HTML و CSS

طراحی وب یکی از شاخه های برنامه نویسی محسوب می شود. طرح ابتدا در فتوشاپ پیاده سازی می شود سپس به کدهای HTML و CSS با استانداردهای روز جهانی تبدیل می کنیم. این فرادرس برای کسانی که می خواهند به صورت پروژه محور طراحی وب انجام دهند، مناسب است. زیرا ذهن آن ها را برای سوالات مختلفی که دارید باز می کند. به عنوان مثال (چطور این Attribute را استفاده کنم؟ در کجا استفاده کنم؟ برای بخش بندی از div استفاده کنم یا section؟ و …) چون ما هنگام انجام پروژه، تک تک این موضوعات را به شما آموزش می دهیم.

آموزش پروژه محور HTML و CSS

مدت زمان
۴ ساعت و ۹ دقیقه
هزینه آموزش
۶۰,۰۰۰ تومان
محتوای این آموزش
۳۸ بازخورد (مشاهده نظرات)
مدرس
مهران بهدوست

کارشناسی مهندسی نرم افزار

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

توضیحات تکمیلی

آموزش پروژه محور HTML برای کسانی که می خواهند به صورت پروژه محور طراحی وب انجام دهند، مناسب است. زیرا ذهن شما را برای سوالات مختلفی که دارید باز می کند. به عنوان مثال (چطور این Attribute را استفاده کنم؟ در کجا استفاده کنم؟ برای بخش بندی از div استفاده کنم یا section؟ و …) چون ما هنگام انجام پروژه، تک تک این موضوعات را به شما آموزش می دهیم.

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

ما در این فرادرس، یک پروژه عملی را انجام می دهیم. یعنی طرحی را که در ذهنمان داریم، تبدیل به کد می کنیم. ابتدا به سراغ پیاده سازی این طرح در فتوشاپ می رویم و سپس، این طرح را به کدهای HTML و CSS با استانداردهای روز جهانی تبدیل می کنیم.

پیش نیاز این دوره، آشنایی با تگ های HTML5 و خصوصیات CSS3 است.

فهرست سرفصل ها و رئوس مطالب مطرح شده در این مجموعه آموزشی، در ادامه آمده است:
  • درس یکم: مقدمه کلی و معرفی
    • پیش نیازهای آموزش
    • نتیجه نهایی آموزش
  • درس دوم: طراحی اسکچ (Sketch) در فتوشاپ
    • اسکچ چیست؟
    • نحوه طراحی اسکچ روی کاغذ
    • طرح کلی دوره روی کاغذ
    • انتخاب عرض مناسب قالب
    • طراحی اسکچ موردنظر در فتوشاپ
    • طراحی هدر (Header)، لوگو و آیکون های شبکه های اجتماعی
    • طراحی منوها و اسلایدر (Slider)
    • طراحی بخش های کناری
    • طراحی بلاک اصلی مطالب
    • طراحی فوتر (Footer) سایت
  • درس سوم: تبدیل فایل PSD به HTML
    • تجزیه و تحلیل فایل PSD
    • بخش های مختلف طرح و بخش بندی
    • نرم افزار Sublime Text
    • معرفی پلاگین Emmet، نصب و استفاده از آن
    • کد نویسی هدر و منوها
    • کد نویسی اسلایدر و استفاده از پلاگین ها
    • کد نویسی ستون های کناری و بخش محتوای سایت
    • کد نویسی بخش فوتر سایت
  • درس چهارم: ریسپانسیو (Responsive) کردن طرح
    • واکنشگرایی چیست؟
    • فریم ورک های مختلف واکنشگرایی (Bootstrap)
    • ریسپانسیو کردن دستی سایت
    • ریسپانسیو کردن بدون نیاز به آموزش بوت استرپ
مفید برای رشته های
  • مهندسی نرم افزار

پیش نیاز


آنچه در این آموزش خواهید دید:

آموزش ویدئویی مورد تائید فرادرس
فایل برنامه ها و پروژه های اجرا شده

نرم افزارهای مرتبط با آموزش

Sublime Text




پیش نمایش‌ها

۱. مقدمه کلی و معرفی

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۱۲ مگابایت -- (کلیک کنید +))

۲. طراحی اسکچ در فتوشاپ

توجه: اگر به خاطر سرعت اینترنت، کیفیت نمایش پایین‌تر از کیفیت HD ویدئو اصلی باشد؛ می‌توانید ویدئو را دانلود و مشاهده کنید دانلود پیش‌نمایش - حجم: ۲۹ مگابایت -- (کلیک کنید +))

۳. تبدیل فایل PSD به HTML (الف)
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۴. تبدیل فایل PSD به HTML (ب)
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
۵. ریسپانسیو کردن طرح
مشاهده این پیش‌نمایش، نیازمند عضویت و ورود به سایت (+) است.
این آموزش شامل ۵ جلسه ویدئویی با مجموع ۴ ساعت و ۹ دقیقه است.
با تهیه این آموزش، می‌توانید به همه بخش‌ها و جلسات آن، دسترسی داشته باشید.

راهنمای سفارش آموزش‌ها

آیا می دانید که تهیه یک آموزش از فرادرس و شروع یادگیری چقدر ساده است؟

(راهنمایی بیشتر +)

در مورد این آموزش یا نحوه تهیه آن سوالی دارید؟
  • با شماره تلفن واحد مخاطبین ۵۷۹۱۶۰۰۰ (پیش شماره ۰۲۱) تماس بگیرید. - تمام ساعات اداری
  • با ما مکاتبه ایمیلی داشته باشید (این لینک). - میانگین زمان پاسخ دهی: ۳۰ دقیقه


اطلاعات تکمیلی

نام آموزش آموزش پروژه محور HTML و CSS
ناشر فرادرس
شناسه اثر ۸–۱۲۴۵۲–۰۵۵۶۳۷ (ثبت شده در مرکز رسانه‌های دیجیتال وزارت ارشاد)
کد آموزش FVH4C9505
مدت زمان ۴ ساعت و ۹ دقیقه
زبان فارسی
نوع آموزش آموزش ویدئویی (نمایش آنلاین + دانلود)
حجم دانلود ۵۴۷ مگابایت (کیفیت ویدئو HD با فشرده سازی انحصاری فرادرس)


تضمین کیفیت و گارانتی بازگشت هزینه
توجه: کیفیت این آموزش توسط فرادرس تضمین شده است. در صورت عدم رضایت از آموزش، به انتخاب شما:
  • ۱۰۰ درصد مبلغ پرداختی در حساب کاربری شما شارژ می‌شود.
  • و یا ۷۰ درصد مبلغ پرداختی به حساب بانکی شما بازگشت داده می‌شود.





نظرات

تا کنون ۸,۳۸۵ نفر از این آموزش استفاده کرده اند و ۳۸ نظر ثبت شده است.
محمد امین
محمد امین

خیلی خوب بود ولی اسلایدر کار رو خیلی خوب توضیح ندادید با تشکر

محمد
محمد

راضی نبودم، چون بعضی کد ها توی inspect نوشته می‌شد و کامل قاتی می‌کردم و مجبور بودم هی سر کنم و بیشتر دقت کنم و پروژه هم دیگه قدیمی شده بود قالبش، ولی در کل بد نبود کار راه انداز بود.

شایسته
شایسته

من خودم شخصا بین آموزش های مقدماتی تا پیشرفته و آموزش های پروژه محور؛ آموزش های پروژه محور رو انتخاب می کنم.
چون به نظرم مسائل خیلی بیشتری توضیح داده میشه.

بهار
بهار

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

sina
sina

سلام
خیلی خوب بود. من خودم قبلش HTML مقدماتی و تکمیلی و CSS مقدماتی و تکمیلی را دیده بودم.
این آموزش یاد میداد که استاندارد های طراحی وب چه چیز هایی هستند و یاد میداد از تگ هایی که یاد گرفتیم چگونه
و در کجا استفاده کنیم. هرچند که قالبی که در آخر میساخت ساده بود ولی این در هر حال این یک آموزش بود و نباید انتظار داشت که یک وبسایت کامل پیاده سازی کنه که البته با HTML و CSS قطعا نمیشه یک وبسایت کامل طراحی کرد و یک وبسایت کامل نیاز به فناوری های بک اند هم مانند PHP و یا ASP.net داره.

نسرین
نسرین

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

شکیبا
شکیبا

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

سیروس
سیروس

به صورت کلی نگاه کردم، به نظرم نیاز بود که مثال های زیادتری کار بشه و نحوه بیان مدرس جالب تر و بهتر باید میشد.

علیرضا
علیرضا

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

ذبیح الله
ذبیح الله

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

دسته‌بندی موضوعی: برنامه نویسی
برچسب‌ها:
attribute | Bootstrap | CSS | CSS3 | Emmet | HTML | html5 | PSD | Sublime Text | آموزش بوت استرپ | اسکچ | اسلایدر | بوت استرپ | پلاگین Emmet | تبدیل فایل PSD به HTML | تگ های HTML5 | خصوصیات CSS3 | ریسپانسیو کردن | ریسپانسیو کردن | طراحی اسکچ | طراحی اسکچ | طراحی اسکچ در فتوشاپ | طراحی اسکچ در فتوشاپ | طراحی اسکچ روی کاغذ | طراحی اسکچ روی کاغذ | طراحی فوتر سایت | طراحی فوتر سایت | طراحی منو | طراحی منو | طراحی هدر | طراحی هدر | طراحی وب | طراحی وب | فایل PSD | فایل PSD | فتوشاپ | فتوشاپ | فریم ورک | فریم ورک | کد نویسی اسلایدر | کد نویسی اسلایدر | کد نویسی بخش فوتر | کد نویسی بخش فوتر | کد نویسی ستون های کناری | کد نویسی ستون های کناری | کد نویسی هد | کد نویسی هد | کد نویسی هدر | کد نویسی هدر | محتوای سایت | محتوای سایت | نحوه طراحی اسکچ | نحوه طراحی اسکچ | نرم افزار Sublime Text | نرم افزار Sublime Text | واکنش گرایی | واکنش گرایی
مشاهده بیشتر مشاهده کمتر

×
فهرست جلسات ۵ جلسه ویدئویی