- مدرس دوره : فرزاد معصومی ( رزومه )
- تعداد ویدیوها : 219 ویدیو
- مدت زمان دوره : 55:20:00
- سطح دوره : پیشرفته
- وضعیت دوره : به اتمام رسیده
- تاریخ آخرین بروزرسانی : 1401/12/08
طراحی وب پیشرفته + 12 پروژه عملی
قطعا همه کسانی که شروع به یادگیری میکنن حالا این یادگیری میتونه توی هر حوزه ای باشه به دنبال آموزش های پروژه محور میگردن
چرا؟ چون به صورت عملی یاد میگیرین چجوری باید اون کار بخصوص رو انجام بدن,
خب دنیای وب هم مستثنی از این موضوع نیست.
قطعا همه به دنبال این هستن که آموزش های عملی رو تهیه کنن و ببینن تا اون کار رو به بهترین شکل یاد بگیرن.
اگر پروژه هم داشته باشه اون آموزش که دیگه فوق العاده میشه
خب آموزش های زیادی در سطح وب هستن به شکل های متفاوت
اما ما در این آموزش سعی خواهیم کرد به بهترین شکل ممکن مفاهیم رو یاد بگیریم
ما در این دوره یک پکیج کامل رو خواهیم داشت
ما فقط از Html و Css استفاده نخواهیم کرد
- ما در کنار این دو زبان از جاوااسکریپت , جی کوئری, بوت استرپ , تکنولوژی مدیا کوئری در css استفاده خواهیم کرد تا بتونیم بهترین عملکرد رو در طراحی قالب های خودمون داشته باشیم.
- ما در کنار طراحی کردن قالب های خودمون میایم و ویدیو های آموزشی کوتاهی قرار خواهیم داد و راجب بخش های مختلف توضیحات جامعی رو میدیم به عنوان مثال راجب فلوت ها صحبت میکنیم راجب پوزیشن ها و همچنین راجب فلکس باکس ها و انیمیشن ها و و و
پیش نیاز های دوره :
- Html و css رو باید به صورت متوسطه بلد باشید.
- javascript و jquery رو هم باید متوسطه حداقل درک کنید کدهاشو
- bootstrap و media query هم آشنایی مختصر کافیه
اما همه این ها دلیل نمیشه ما کدهای خودمون رو نشکافیم و توضیحات کامل ندیم
قطعا راجب همه کدهایی که نوشته خواهد شد توضیحات کامل داده میشه و جای نگرانی نیست
پس بیاین با هم شروع کنیم :)
فهرستـــ ویدیوها
مدت زمان دوره 55:20:00با مشاهده آنلاین جلسات در سایت ، هزینه اینترنت شما به صورت نیم بها محاسبه خواهد شد.
آماده سازی ادیتور و وارد کردن فونت
دوستان عزیز در این ویدیو ما ادیتور کد خودمون رو انتخاب و نصب میکنیم و فونت های خودمون رو وارد پروژه میکنم در ویدیو بعد طراحی رو شروع میکنیم.
قالب اول - طراحی بخش header - قسمت اول
دوستان عزیز در این ویدیو میریم سراغ طراحی اولین قالب و بخش اول nav رو طراحی میکنیم و در قسمت بعد این بخش رو تکمیل میکنیم
قالب اول - طراحی بخش header - قسمت دوم
دوستان عزیز در این ویدیو بخش header خودمون رو تموم میکنیم و در ویدیو بعد میریم سراغ بخش بعدی
قالب اول - طراحی بخش دوم (our-story)
خب دوستان در این ویدیو خیلی سریع میریم و بخش دوم قالب اول رو طراحی میکنیم
قالب اول - طراحی بخش سوم ( sweet )
دوستان عزیز در این قسمت این بخش رو طراحی میکنیم سعی میکنم ویدیوهای بیشتری آپلود کنم
قالب اول - طراحی بخش چهارم (menu)
در این قسمت بخش بعدی قالب رو طراحی میکنیم که قسمت menu هست
کلاس جبرانی - width و height
بچه ها به اولین کلاس جبرانی دوره خوش اومدین در این قسمت یکم راجب عرض و ارتفاع صحبت میکنیم و مثالی رو میزنیم که واستون جا بیوفته این دو مورد....فردا هم جلسه بعدی منتشر میشه
قالب اول - طراحی بخش پنجم (hot)
خب بچه ها در این ویدیو یکی از آخرین بخش های قالب اول رو طراحی میکنیم سعی من اینه زودتر این قالب تموم شه تا قالب های بعدی که بهتر هستن رو شروع کنیم البته من این قالب رو ریسپانسیو هم قراره بکنم پس بیاین ادامه بدیم
کلاس جبرانی - Float
بچه ها در این ویدیو که دومین کلاس جبرانی هست راجب Float ها توضیحات بیشتری میدیم هر چند که ما در همین قالب فقط از Float استفاده میکنیم اما خواستم موضوع شفاف تر باشه پس همراهیم کنید :)
قالب اول - طراحی بخش ششم (delight)
خب دوستان این قسمت بخش بعدی رو طراحی میکنیم و در ویدیو بعد قسمت فوتر رو طراحی میکنیم تا طراحی قالب به پایان برسه
قالب اول - طراحی بخش footer (قسمت اول)
حب دوستان به توجه به اینکه زمان ویدیو خیلی طولانی میشد من به دو بخش تقسیم کردم طراحی فوتر رو تا دانلود و دیدنش براتون راحت تر باشه
قالب اول - طراحی بخش footer (قسمت دوم)
خب دوستان در این ویدیو طراحی قالب اول به پایان میرسه و ما در ویدیو های بعد هم ریسپانسیو سازی انجام میدیم هم کلاس جبرانی داریم راستی میتونید فایل های مربوط به این قالب رو پیدا کنید در فایل..با من همراه باشید :)
کلاس جبرانی - position
خب دوستان عزیزم در این ویدیو راجب انواع پوزیشین ها قراره صحبت کنیم و چیزای خوبی رو یاد بگیریم همه نکاتی که گفته میشه در طول دوره از اون استفاده میشه و اونارو بخوبی یاد میگیرید
ریسپانسیو سازی قالب اول - (قسمت اول)
خب دوستان ما این قالب رو میخوایم سریع ریسپانسیو کنیم و در 3 ویدیو این کار رو انجام میدیم
ریسپانسیو سازی قالب اول - (قسمت دوم)
دوستان در این قسمت بخش های بعدی رو ریسپانسیو میکنیم و در ویدیو بعد فوتر رو ریسپانسیو میکنیم و همچنین کدهای جی کوئری nav رو مینویسیم
ریسپانسیو سازی قالب اول - (قسمت سوم)
خب دوستان عزیز قالب اول به طور کامل به پایان رسید شما میتونید قالب نهایی رو هم بعد از دانلود این قسمت داشته باشید
قالب دوم - طراحی بخش nav
خب دوستان در این ویدیو قالب دوم رو استارت میزنیم و بخش nav رو طراحی میکنیم
قالب دوم - طراحی بخش hanging-lamp
خب دوستان در این ویدیو قسمت بعدی رو طراحی میکنیم و یه ترفند جالب هم یاد میگیریم
قالب دوم - طراحی بخش sofa-two
خب دوستان بالاخره این بخش های تکراری به پایان رسیدن و در قسمت بعدی میریم سراغ بخش counter
قالب دوم - طراحی بخش counter
خب بچه ها در این ویدیو بخش counter رو با هم طراحی و پیاده سازی میکنیم
قالب دوم - طراحی بخش footer
دوستان عزیز در این ویدیو قالب دوم هم به پایان میرسه و در ویدیو بعد میریم و ریسپانسیوش میکنیم
ریسپانسیو سازی قالب دوم - (قسمت اول)
دوستان عزیز ما در این ویدیو قالب خودمون رو شروع به ریسپانسیو کردن میکنیم
ریسپانسیو سازی قالب دوم - (قسمت دوم)
دوستان عزیز در این ویدیو ادامه میدیم ریسپانسیو سازی خودمون رو و در سایزهای مختلف واکنش گرایی رو انجام میدیم
کلاس جبرانی - flexbox (قسمت اول)
دوستان عزیز در این ویدیو ما کلاس های جبرانی راجب فکلس باکس رو شروع میکنیم قرار نیست تمامی قسمت ها پشت سر هم باشه و ما بین دوره بقیه قسمت ها قرار میگیره
قالب سوم - اجرای پلاگین و طراحی بخش header
دوستان عزیز در این ویدیو ما پلاگین مربوطه رو راه اندازی میکنیم و هدر خودمون رو طراحی میکنیم
قالب سوم - طراحی بخش wolf (قسمت اول)
خب دوستان عزیز در این ویدیو ما background از قسمت رو طراحی میکنیم
قالب سوم - طراحی بخش wolf (قسمت سوم)
دوستان عزیز در این قسمت بخش wolf هم به پایان میرسه , کمی طولانی شد اما ارزشش رو داشت .
قالب سوم - طراحی بخش Monkey
دوستان عزیز در این ویدیو بخش بعدی رو طراحی میکنیم و با وکتورها هم کار میکنیم
قالب سوم - طراحی بخش footer
دوستان عزیز در این ویدیو قوتر قالب سوم رو طراحی میکنیم و قالب سوم هم به پایان میرسه
ریسپانسیو سازی قالب سوم (قسمت اول)
دوستان عزیز در این ویدیو طولانی قالب اول رو ریسپانسیو میکنیم
ریسپانسیو سازی قالب سوم (قسمت دوم)
دوستان عزیز در این ویدیو قالب سوم هم به پایان میرسه.(فایل ضمیمه با خطا مواجه شد اما چیز خاصی هم نیس تغییرات جزئی هست با ویدیو بعد ارسال میکنم)
رفع ایراد قالب اول و دوم (فونت و استایل)
در این ویدیو به چند ایراد که در دو قالب اول بوده میپردازیم و مشکلاتی که کاربرا داشتن.
قالب چهارم - طراحی بخش (header-top)
خب دوستان عزیز در این ویدیو ما میریم و قالب چهارم رو استارت میزنیم امیدوارم در کنار هم با قدرت جلو بریم
قالب چهارم - طراحی بخش (info)
دوستان عزیز در این ویدیو ما قسمت دوم از قالب چهارم رو طراحی میکنیم
قالب چهارم - طراحی بخش (slider)
خب دوستان عزیز در این ویدیو بخش اسلایدر رو طراحی میکنیم و از یک پلاگین هم استفاده میکنیم
قالب چهارم - طراحی بخش(nav)
دوستان عزیز در این ویدیو بخش nav خودمون رو طراحی میکنیم و با before , after هم آشنایی مختصری پیدا میکنیم
قالب چهارم - طراحی بخش (base-story)
خب بچه ها در این ویدیو قسمت بعد رو طراحی میکنیم اما از جایی که ویدیو خیلی طولانی میشد به دو قسمت تقسیمش کردم
قالب چهارم - طراحی بخش base-story (قسمت دوم)
دوستان عزیز در این ویدیو بخش base-story رو کامل تر میکنیم و در ویدیو بعد این بخش هم به پایان میرسه
قالب چهارم - طراحی بخش (base-story) قسمت سوم
خب بالاخره این بخش در این ویدیو به پایان میرسه
قالب چهارم - طراحی بخش service (قسمت اول)
دوستان عزیز تصمیم گرفتم تایم ویدیو هارو کوتاه کنم و بجاش تعداد آپدیت هارو سعی میکنم بیشتر کنم تا اینجوری راحت تر باشیم همگی
قالب چهارم - طراحی بخش service (قسمت دوم)
خب دوستان در این ویدیو قسمت دوم از سرویس ها رو داریم و با هم طراحیش میکنیم
قالب چهارم - طراحی بخش service (قسمت سوم)
خب کمی طولانی داره میشه اما ارزشمنده توی این ویدیو طراحی رو تمام میکنیم و ویدیو بعدی کد جی کوئری کار رو میزنیم
قالب چهارم - طراحی بخش service (قسمت چهارم)
دوستان عزیز بالاخره در این ویدیو بخش سرویس های این قالب هم به پایان رسید و کدهای جی کوئری رو میزنیم
قالب چهارم - طراحی بخش (about)
خب دوستان در این ویدیو میریم سراغ بخش درباره ما و اینکه هر قسمتی که دیدین فایل کد ها به همراهش نیست در ویدیو بعد قرار میدم
قالب چهارم - طراحی بخش (about)
خب دوستان اینم از ویدیو بعد در ویدیو بعدی این بخش از قالب هم به اتمام میرسه
قالب چهارم - طراحی بخش about (قسمت سوم)
دوستان عزیز طولانی ترین قالبمون همین قالب هست قالب های بعدی قطعا سریع تر پیش میریم
قالب چهارم - طراحی بخش project (قسمت اول)
خب دوستان بریم سراغ بخش بعدی میخوایم سرعت رو بالاتر ببریم
قالب چهارم - طراحی بخش project (قسمت دوم)
دوستان عزیز در این ویدیو قسمت پروژه های خودمون رو هم به اتمام میرسونیم
قالب چهارم - طراحی بخش article (قسمت اول)
دوستان عزیز در این ویدیو بخش article رو با هم شروع به طراحی میکنیم
قالب چهارم - طراحی بخش article (قسمت دوم)
دوستان عزیز در این ویدیو این بخش از قالب رو هم به پایان میرسونیم
قالب چهارم - طراحی بخش footer (قسمت دوم)
خب دوستان در این ویدیو بخش اول فوتر رو به اتمام میرسونیم
قالب چهارم - طراحی بخش footer (قسمت سوم)
دوستان در این ویدیو بخش بعدی فوتر رو طراحی میکنیم
قالب چهارم -طراحی صفحه single (قسمت اول)
دوستان عزیز در این ویدیو میریم سراغ صفحه single خودمون رو اون رو طراحی میکنیم
قالب چهارم - طراحی صفحه single (قسمت دوم)
در این ویدیو روند طراحی صفحه سینگل رو ادامه میدیم
قالب چهارم - طراحی صفحه single (قسمت سوم)
خب بالاخره در این ویدیو قالب چهارم به پایان میرسه و از ویدیو بعد ریسپانسیو رو شروع میکنیم
قالب چهارم - ریسپانسیو سازی (قسمت سوم)
دوستان ریسپانسیو سازی طولانی هست و دو ویدیو دیگه کار این قالب کلا تموم خواهد شد
قالب پنجم - طراحی بخش دوم
دوستان عزیز در این ویدیو بخش بعدی قالب پنجم رو طراحی میکنیم همچنین فایل نهایی قالب چهارم هم قرار دادم
قالب پنجم - طراحی بخش چهارم
دوستان عزیز در این ویدیو بخش چهارم از قالب پنجم رو طراحی میکنیم
قالب پنجم - ریسپانسیو سازی
دوستان عزیز در این ویدیو قالب پنجم رو ریسپانسیو میکنیم و این قالب هم به پایان میرسه
قالب ششم - طراحی رجیستر قسمت اول
دوستان عزیز در این ویدیو بخشی از صفحه رجیستر رو طراحی میکنیم
قالب ششم - طراحی رجیستر قسمت دوم
دوستان عزیز قسمت دوم قالب ششم رو در این ویدیو کامل تر میکنیم
قالب ششم - طراحی رجیستر و لاگین قسمت سوم
خب دوستان در این ویدیو طراحی این قالب هم به پایان میرسه
قالب هفتم - طراحی بخش header
دوستان عزیز در این ویدیو قالب هفتم خودمون رو استارت میزنیم و از materialize هم کمک میگیریم
قالب هفتم - طراحی بخش contact و footer
خب دوستان در این ویدیو قالب هفتم طراحیش تموم شد اما در ویدیو بعد بخش هایی از قالب که کد جی کوئری قرار هست نوشته بشه رو با هم میسازیم
قالب هفتم - جی کوئری lightbox
دوستان عزیز در این ویدیو کدهای جی کوئری lightbox رو میزنیم فایل نهایی پروژه در ویدیو بعد قرار میدم
قالب هشتم - طراحی header (قسمت دوم)
در این ویدیو بخش هدر رو تکمیل تر میکنیم و در ویدیو بعد این بخش به پایان میرسه
قالب هشتم - طراحی slider (قسمت دوم)
خب دوستان عزیز در این ویدیو بخش اول اسلایدر رو با هم کد میزنیم
قالب هشتم - طراحی main (قسمت اول)
دوستان عزیز در این ویدیو بخش main رو شروع میکنیم به طراحی که مهمترین بخش قالبمون هست
قالب هشتم - طراحی main بخش sidebar (قسمت اول)
در این ویدیو میریم سراغ sidebar و شروع به طراحی میکنیم
قالب هشتم - طراحی main بخش sidebar (قسمت دوم)
در این ویدیو بخش sidebar قالب رو طراحی میکنیم
قالب هشتم - ریسپانسیو سازی (قسمت دوم)
در این ویدیو ادامه ریسپانسیو سازی قالب رو با هم پیش میبریم
قالب هشتم - طراحی ریسپانسیو مگامنو (قسمت اول)
در این ویدیو مگامنو خودمون رو ریسپانسیو میکنیم
قالب هشتم - طراحی ریسپانسیو مگامنو (قسمت دوم)
در این ویدیو طراحی مگامنو رو به پایان میرسونیم و قالب هشتم به پایان میرسه
قالب نهم - طراحی بخش about (قسمت اول)
در این ویدیو بخش درباره ما رو با هم شروع به طراحی میکنیم
قالب نهم - طراحی بخش about (قسمت سوم)
در این ویدیو بخش about این قالب رو به پایان میرسونیم
قالب نهم - طراحی بخش service (قسمت اول)
در این ویدیو بخش خدمات رو با هم شروع به طراحی میکنیم
قالب نهم - طراحی بخش مهارت های من
در این ویدیو بخش مهارت های من قالب رو با هم طراحی میکنیم
قالب نهم - طراحی فیلتر نمونه کارها
در این ویدیو بخش نمونه کارها رو با هم شروع به طراحی میکنیم
قالب نهم - طراحی فیلتر نمونه کارها (قسمت دوم)
در این ویدیو طراحی فیلتر نمونه کارها رو تکمیل تر میکنیم
قالب نهم - طراحی فیلتر نمونه کارها (قسمت سوم)
در این ویدیو فیلتر نمونه کارها طراحیش رو تموم میکنیم و در ویدیو بعد جاوا اسکریپت رو شروع میکنیم
قالب نهم - طراحی فیلتر نمونه کارها (قسمت چهارم)
در این ویدیو شروع به نوشتن کدهای جاوا اسکریپت میکنیم
قالب نهم - طراحی لایت باکس نمونه کارها
در این ویدیو شروع به طراحی لایت باکس نمونه کارها میکنیم
قالب نهم - طراحی لایت باکس نمونه کارها (قسمت دوم)
در این ویدیو لایت باکس رو با هم طراحیش رو به پایان میرسونیم
قالب نهم - طراحی بخش نظرات مشتریان (قسمت دوم)
در این ویدیو طراحی بخش نظرات مشتریان رو به پایان میرسونیم و در ویدیو بعدی میریم سراغ جاوا اسکریپت کار
قالب نهم - طراحی بخش نظرات مشتریان (قسمت سوم)
در این ویدیو شروع به نوشتن کدهای جاوا اسکریپت این بخش میکنیم.
قالب نهم - طراحی بخش نظرات مشتریان (قسمت چهارم)
در این ویدیو بخش نظرات مشتریان به پایان میرسه
قالب نهم - طراحی navbar fixed
در این ویدیو navbar قالب رو به کمک جاوا اسکریپت به صورت انیمیشنی و فیکس در میاریم
قالب دهم - طراحی home page (قسمت دوم)
در این ویدیو بخش home page خودمون رو تکمیل تر میکنیم
قالب دهم - طراحی بخش mega menu(قسمت دوم)
در این ویدیو بخش مگامنو طراحیش رو به پایان میرسونیم
قالب دهم - طراحی بخش last update
در این ویدیو بخش آخرین بروزرسانی هارو با هم طراحی میکنیم
قالب دهم - طراحی بخش webDesign (قسمت دوم)
در این ویدیو بخش webDesign خودمون رو به پایان میرسونیم
قالب دهم - طراحی بخش popular course
در این ویدیو بخش محبوب ترین دوره هارو با هم طراحی میکنیم
قالب دهم - طراحی بخش webDeveloper
در این ویدیو بخش webDeveloper رو با هم خیلی سریع طراحی میکنیم
قالب دهم - ریسپانسیو سازی (قسمت اول)
در این ویدیو ریسپانسیو سازی قالب دهم رو با هم شروع میکنیم
قالب یازدهم - راه اندازی بوت استرپ 5 (طراحی navbar)
در این ویدیو شروع به ساخت قالب یازدهم میکنیم
قالب یازدهم - طراحی بخش portfolio
در این ویدیو بخش بعدی قالب یازدهم رو با هم طراحی میکنیم
قالب دوازدهم - طراحی بخش testimonial
در این ویدیو بخش نظرات مشتریان رو با هم طراحی میکنیم
قالب دوازدهم - طراحی contact و footer
در این ویدیو قالب دوازدهم به پایان میرسه و دوره هم به پایان میرسه.موفق باشید.
قالب سیزدهم - طراحی بخش header (قسمت سوم)
در این ویدیو بخش هدر طراحیش رو به پایان میرسونیم
قالب سیزدهم - طراحی بخش category
در این ویدیو بخش دسته بندی های قالب رو با هم طراحی میکنیم
قالب سیزدهم - طراحی بخش category (قسمت دوم)
در این ویدیو بخش دسته بندی های قالب رو با هم تکمیل میکنیم
قالب سیزدهم - طراحی بخش product (قسمت دوم)
در این ویدیو طراحی بخش محصولات رو به پایان میرسونیم
قالب سیزدهم - طراحی بخش customer
در این ویدیو بخش customer قالب رو با هم طراحیش رو به پایان میرسونیم
نظرات کاربران در رابطه با این دوره