فرادرس
فرصت باقیمانده
۲۶,۰۰۰ تومان
در طرح تخفیف
۱۵,۶۰۰ تومان

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

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

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

چکیده

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

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

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

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

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

آموزش پروژه محور 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 - مورد تایید فنی فرادرس)
حجم دانلود ۵۳۲ مگابایت     (کیفیت ویدئو HD‌ با فشرده سازی انحصاری فرادرس)


نظرات

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

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

sina
sina

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

نسرین
نسرین

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

شکیبا
شکیبا

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

سیروس
سیروس

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

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

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

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

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

سینا
سینا

به عنوان یه تمرین عملی و پروژه ایی خیلی میتونه کمک کنه.

طیبه
طیبه

فوق العاده مفید بود.

شقایق
شقایق

من به همه این آموزش رو پیشنهاد می کنم.

کریم
کریم

یه نظری که به آموزشاتون دارم اینه که حجم آموزشاتون خیلی زیاده، کیفیت ارائه تو سایت شما استانداره اما خب به نظرم اگه حجم آموزش کمتر بشه بهتره.

کیارش
کیارش

فعلا بخش HTML شو دیدم، خوبه. صفر کیلومتر بودم و اصلا HTML بلد نبودم.

امیر مهدی
امیر مهدی

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

علی
علی

وقت نذاشت زیاد کامل ببینم، اما نسبتا مفید و کاربردی بود.

مجید
مجید

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

محمدرضا
محمدرضا

به تمام دوستانی که html و Css را یاد گرفته‌اند. حتما توصیه میکنم این ویدیو را ببینند فوق العاده توضیح دادند، استاد.

احسان
احسان

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

Asif navian
Asif navian

بد نبود

احسان
احسان

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

میثم
میثم

آموزش خوبی بود و نیاز منو برطرف کرد.

آرمان
آرمان

آموزش شما واقعا عالی بود ولی وقتی یه کد رو مینوشتین سریع بین صفحات جابجا میشدین و آدم مجبور بود هی صفحه رو استاپ کنه ولی درکل عالی بود

محمد
محمد

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

مهرابی
مهرابی

ممنون بخاطر آموزش های کاملتون

مهراب
مهراب

من دوره‌ی کامل html و css فرادرس رو تا اینجای کار دیدم و این دروه‌ی پروژه محور از دوره های خوب بود چون مدرس مو به موی مطالب رو درس میدادند

رضا
رضا

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

arash
arash

سلام و خسته نباشید. من این آموزش رو در ادامه دو آموزش (آموزش طراحی وب با HTML – مقدماتی) و (آموزش طراحی وب با CSS) تهیه کردم. با این دو فرادرس به مفاهیم طراحی وبسایت مسلط شدم ولی خب با مشاهده این دو فرادرس فقط دانش رو کسب میکنی و عملا چیزی رو ایجاد نمیکنی. اما با مشاهده این فرادرس اموخته هارو یکی یکی پیاده میکنی و به کار میگیری و اخر کار با مشاهده نتیجه بدست اومده اعتماد به نفسی که به ادم دست میده خیلی خوبه. اموزش بسیار روان و واضح هست. فتوشاپ لازم برای طراحی psd سایت رو هم خیلی راحت اینجا یاد گرفتم. از فرادرس و مهندس بهدوست عزیر به خاطر این اموزش جامع تشکر میکنم.

متین
متین

ایده قشنگیه نه انصافا خیلی قشنگه خوشم اومد

Safi
Safi

یک سایت آموزی خیلی ساده و دلچسب می باشد

محمد
محمد

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

محسن
محسن

با سلام خسته نباشید من این اموزش تهیه کردم و اموزش خیلی خوبی هست و تونستم کاملا مسلط بشم و از عزیزانی که میخوان تو طراحی وب مسلط و خوب یاد بگیرن این اموزش تهیه کنن چون واقعا کار امد خوب هستش واقعا توضیحان عمیقی در این اموزش دادن و اموزش به صورت نکته به نکته بیان میشه و شما عزیزان میتونید با دیدن این اموزش نهایت استفاده را ببرین و لذت ببرید از این اموزش تهیه کنید جایی برای گفتن نداره و خودتون ببینید که اموزشس ها چقدر خوب و کار امد هستن واقعا عالیه تشکر از سایت خوب فرادرس

سجاد افشار
سجاد افشار

حتما به دوستانی که html و css و html5 و css3 رو یاد گرفتن توصیه میکنم این اموزش رو تهیه کنند.

فاطمه
فاطمه

از فرادرس یک همچین آموزشی بعید بود.

براتی
براتی

مچکر از شما

اکبر گرامی
اکبر گرامی

سلام و خسته نباشید. من این اموزش رو در ادامه دو اموزش (آموزش طراحی وب با HTML – مقدماتی) و (آموزش طراحی وب با CSS) تهیه کردم. با این دو فرادرس به مفاهیم طراحی وبسایت مسلط شدم ولی خب با مشاهده این دو فرادرس فقط دانش رو کسب میکنی و عملا چیزی رو ایجاد نمیکنی. اما با مشاهده این فرادرس اموخته هارو یکی یکی پیاده میکنی و به کار میگیری و اخر کار با مشاهده نتیجه بدست اومده اعتماد به نفسی که به ادم دست میده خیلی خوبه. اموزش بسیار روان و واضح هست. فتوشاپ لازم برای طراحی psd سایت رو هم خیلی راحت اینجا یاد گرفتم. از فرادرس و مهندس بهدوست عزیر به خاطر این اموزش جامع تشکر میکنم.

صبا
صبا

عالی هست.
کاش برنامه نویسی php رو برای داینامیک کردنش همراه با j-query بهش اضافه میکرید.
اگر php رو هم اضافه کنید ممنون میشم.

تنها کاربران ثبت نامی در آموزش امکان درج کامنت را دارند
دسته های مرتبط: برنامه نویسی

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