subscriptions آموزش طراحی وب حرفه ای HTML5 , CSS3

۴۷۶ رای ۹.۳

access_time طول دوره ۴۸ ساعت
event_seat تعداد جلسات ۲۷ جلسه
people دانشجویان ۳۳۷۹ نفر
headset_mic پشتیبانی دوره۳ ماه

قیمت : ۱۴۹ هزار تومان

schedule بیش از 48 ساعت آموزش ویدیویی - 5.5 گیگابایت محتوای آموزشی
7Learn Experts
description توضیحات دوره list جلسات دوره speaker_notes دیدگاه ها
list لیست جلسات دوره
  1. مقدمه و مفاهیم پایه دنیای وب و html و css : دوره مجازی طراحی وب (جلسه 1) play_circle_outlined
  2. قواعد نوشتاری و مفاهیم زبان های HTML و CSS : دوره مجازی طراحی وب (جلسه 2) play_circle_outlined
  3. واحد های اندازه گیری در css و آموزش استفاده از جاوا اسکریپت : دوره مجازی طراحی وب (جلسه 3) play_circle_outlined
  4. آموزش اچ تی ام ال : تگ های اصلی و فرمت بندی متن در html : دوره مجازی طراحی وب (جلسه 4) play_circle_outlined
  5. ادامه تگ های فرمت بندی متن : دوره مجازی طراحی وب (جلسه 5) play_circle_outlined
  6. فریم ها، لینکها، لیست ها و جاسازی فایل ها و اسکریپت ها : دوره مجازی طراحی وب (جلسه 6) play_circle_outlined
  7. فرم ها و فیلدهای ورودی، تصاویر، صدا و ویدیو : دوره مجازی طراحی وب (جلسه 7) play_circle_outlined
  8. آموزش Div و آموزش جدول بندی در html : دوره مجازی طراحی وب (جلسه 8) play_circle_outlined
  9. انواع سلکتور های CSS - قسمت اول : دوره مجازی طراحی وب (جلسه 9) play_circle_outlined
  10. سلکتور های CSS - قسمت دوم : دوره مجازی طراحی وب (جلسه 10) play_circle_outlined
  11. دوره مجازی طراحی وب (جلسه 11): ویژگی های CSS - قسمت اول play_circle_outlined
  12. دوره مجازی طراحی وب (جلسه 12): ویژگی های CSS - قسمت دوم play_circle_outlined
  13. دوره مجازی طراحی وب (جلسه 13): ویژگی های CSS - قسمت سوم play_circle_outlined
  14. دوره مجازی طراحی وب (جلسه 14): ویژگی های CSS - قسمت چهارم play_circle_outlined
  15. دوره مجازی طراحی وب (جلسه 15): استایل دهی و تکمیل پروژه یک play_circle_outlined
  16. دوره مجازی طراحی وب (جلسه 16): آشنایی با جاوااسکریپت، رفع مشکلات و ناسازگاری مرورگرها play_circle_outlined
  17. دوره مجازی طراحی وب (جلسه 17): آشنایی با جی کوئری، کار با پلاگین های jquery و CSS play_circle_outlined
  18. دوره مجازی طراحی وب (جلسه 18): تکنیک ها و ترفندها - ایجاد منوی وبسایت ها play_circle_outlined
  19. دوره مجازی طراحی وب (جلسه 19): پروژه : تبدیل قالب PSD فتوشاپ به کدهای html و CSS play_circle_outlined
  20. دوره مجازی طراحی وب (جلسه 20): پروژه سوم : طراحی و کد نویسی یک قالب مدرن play_circle_outlined
  21. دوره مجازی طراحی وب (جلسه 21): آموزش تبدیل قالب های html به بلاگفا، میهن بلاگ، وردپرس و ... play_circle_outlined
  22. دوره مجازی طراحی وب (جلسه 22): آموزش تبدیل و ترجمه انواع قالب های خارجی و انگلیسی به فارسی play_circle_outlined
  23. دوره مجازی طراحی وب (جلسه 23): طراحی وب متناسب با سئو و اهمیت آن play_circle_outlined
  24. دوره مجازی طراحی وب (جلسه 24): طراحی وب واکنشگرا، آشنایی با pureCSS و بوت استرپ play_circle_outlined
  25. دوره مجازی طراحی وب (جلسه 25): مباحث پیشرفته html - canvas و svg play_circle_outlined
  26. دوره مجازی طراحی وب (جلسه 26): مباحث پیشرفته CSS - transition , animation ، sprites و ... play_circle_outlined
  27. دوره مجازی طراحی وب (جلسه 27 - آخر): جمع بندی و توصیه های مهم play_circle_outlined

آموزش تصویری html5 و CSS3

پکیج آموزش تصویری html5 ، در دنیای کنونی برای علاقمندان به حوزه دیجیتال یک سرمایه گزاری ویژه می باشد. در این دوره ما آموزش تصویری طراحی سایت را از پایه تا پیشرفته خواهیم داشت و با بیانی ساده و شیوا جلسات دوره را برگزار نمودیم. در این دوره مفاهیم اساسی و پایه ای طراحی وب مطرح خواهد شد و زبان های HTML5 و CSS3 با جزئیات کامل و به صورت کاملا عملی و کاربردی تدریس می شود. وجه تمایز و مزیت این دوره نسبت به دوره های مشابه، کاربردی بودن آن است. در این دوره مواردی مانند فیلم آموزش طراحی سایت متناسب با سئو، آموزش طراحی وب واکنشگرا (Responsive)، آموزش تبدیل قالب فتوشاپی به صفحه وب، آموزش فارسی سازی قالب های خارجی، آموزش طراحی قالب Html برای سیستم های وبلاگدهی به صورت کاملا عملی، از پایه تا پیشرفته توسط مدرسی با تجربه 10 ساله طراحی وب و دانشجوی دکترای نرم افزار برای شما به صورت کاملا اصولی و عملی تدریس می شود.

آموزش html5

برای شروع کار و آغاز طراح وب شدن ، لازم و ضروریه که اول از همه زبان html رو یاد بگیرید . زبان html برای ایجاد بدنه و ساختار اصلی صفحات وب به کار میره . شما از هر زبان برنامه نویسی (مثل php) که استفاده کنید نهایتا باید خروجی رو به صورت کدهای html بسازید .

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

:: مطالب مربوط به آموزش html رو که ما تهیه کردیم میتونید از آموزش طراحی سایت مطالعه کنید که در حال توسعه و افزایش مطالب هست .

ما در سون لرندوره آموزشی طراحی وب (HTML و CSS پیشرفته)رو برای شما به صورت 50 ساعت آموزش ویدیویی تهیه کردیم که می تونید با بهره گیری از اون یه طراح وب کاملا حرفه ای بشید .

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

آموزش Css

با html ساختار و پیکربندی کلی یک صفحه وب رو میسازیم . ولی برای اینکه ظاهر صفحه وب رو آراسته کنید باید از CSS استفاده کنید . با CSS میتونید برای هر کدوم از تگ های html خصوصیاتی چون رنگ ، فونت ، سایز ، پس زمینه و ... رو تعیین کنید . CSS رو به این منظور ایجاد کردند که ساخت پیکربندی صفحه وب رو از شیوه ی نمایش اون جدا کنند (seperation of concepts).

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

گام سوم : یادگیری زبان جاوا اسکریپت

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

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

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

گام چهارم : یادگیری زبان برنامه نویسی اسکریپتی مثل PHP 

گام بعدی اینه که شما به سراغ یک زبان برنامه نویسی سمت سرور مثل php یا asp.net برید . با استفاده از این زبون ها شما میتونید برنامه های تحت وب بزرگ و دلخواه خودتون رو بنویسید . یادگیری این زبان ها وقت ، تلاش و کار عملی زیادی رو می طلبه و فقط هم زمانی توصیه میشه که واقعا علاقمند باشید و برنامه ای برای توسعه و نوشتن نرم افزارهای تحت وب داشته باشید . و در صورتی که می خواید در حد ویرایش و طراحی قالب وبلاگ ها و صفحات ایستای وب کار کنید ، 3 گام اول براتون کافیه . :: بعد از یادگیری این نوع زبان ها هم باید با مفاهیم پایگاه داده (Database) آشنا بشید تا بتونید محتوای ورودی و خروجی برنامه های نوشته شده رو ذخیره و استفاده کنید .
در حال حاضر دوره کامل و حرفه ای آموزش زبان php رو هم برای شما تهیه کردیم که می تونید اونو بخونید و ببینید . ما به شما این تضمین رو میدیم که این دوره از کاملترین و با کیفیت ترین دوره هایی هست که در ایران داره برگذار میشه و شما با ثبت نام در این دوره می تونید PHP رو به صورت کاملا کاربردی و عملی یاد بگیرید . فقط کافیه نگاهی به آموزش طراحی سایت با php بیاندازید تا از کامل بودن اون مطمئن شید !

ولی برای شروع باز می تونید به بخش های آموزش php ، آموزش asp.net و آموزش SQL (زبان کار با پایگاه های داده) در سایت سون لرن مراجعه کنید . ناگفته نماند که من اینجا این دو زبان رو پیشنهاد دادم ، در صورتی که زبان های دیگری هم مثل perl ، ruby ، پایتون و .. هم برای نوشتن برنامه های تحت وب موجوده که البته کاربرد و استفاده ی کمتری دارند .

ابزار مورد نیاز طراحی سایت

برای نوشتن کدها بهتره از ادیتور هایی که قابلیت های پیشرفته ای مثل پیشبینی کد ، کامل کردن خودکار کد (auto completion) ، رنگ گذاری کلمات کلیدی ، تشخیص خطاها ، فرمت بندی کدها و ... رو دارند استفاده کنید تا سریعتر کد بزنید ، درصد خطاتون پایین بیاد و کارتون راحتتر و استانداردتر باشه . پیشنهاد من استفاده از برنامه ی phpStorm هست که برای همه ی زبان های فوق امکانات فوق العاده ای داره . سعی می کنم در مطلب بعدی این برنامه رو برای دانلود بزارم . همچنین توصیه می کنم که نرم افزار notepad++ رو هم حتما نصب کنید . به خاطر سبک بودن و امکانات نسبتا خوبش میگم . همچنین برنامه های خیلی زیاد دیگه ای در این زمینه وجود داره که می تونید از اونها اسفاده کنید. من اسم بعضی از معروف ترین هاشو در زیر میارم که میتونید سرچ و دانلود کنید یا از فروشگاه های سی دی تهیه کنید :

  • PhpStorm (html,css,javascript,php)
  • Microsoft Visual Studio (asp.net)
  • Microsoft Expression Web
  • Notepad++
  • Adobe Dreamweaver
  • Komodo Edit
  • Aptana Studio
  • NetBeans

مشاهده دموی نمونه قالب آموزش داده شده در این دوره (1) مشاهده دموی نمونه قالب آموزش داده شده در این دوره (2) مشاهده دموی قالب رسپانسیو شده دوم

 

دانلود فایل PDF سرفصل ها با جزئیات دقیق و به تفکیک جلسات ویدیویی

سرفصل ها دوره کاربردی و حرفه ای طراحی وب و رابط کاربری سون لرن

  • فصل اول: مباحث پایه و مقدماتی - آشنایی با دنیای وب و زبان های برنامه نویسی تحت وب
  • فصل دوم: آشنایی با زبان های HTML و CSS و کاربرد آن ها در دنیای وب
  • فصل سوم: آموزش کامل و جامع زبان HTML و HTML5
  • فصل چهارم: آموزش جامع و کامل زبان CSS و CSS3
  • فصل پنجم : آموزش خطایابی و نحوه انجام تغیرات و رفع مشکلات موجود در صفحات وب
  • فصل ششم: ناسازگاری مرورگرها! چالش ها و نحوه کدنویسی استاندارد و صحیح
  • فصل هفتم: آشنایی با جاوااسکریپت و کاربرد آن در صفحات و
  • فصل هشتم: آموزش استفاده از کتابخانه های جالب در صفحات وب و قالب های شما (اسلایدر، فانسی باکس و ...)
  • فصل نهم: HTML و CSS در عمل! نحوه طراحی و کدنویسی بخش های مختلف یک وبسایت (تکنیک ها و ترفندها)
  • فصل دهم: پروژه - تبدیل طرح فتوشاپی (PSD) به کدهای HTML و CSS
  • فصل یازدهم: پروژه - تشریح مراحل دقیق طراحی یک قالب کامل با HTML5 و CSS3
  • فصل دوازدهم: آموزش روش طراحی قالب برای سیستم های وبلاگدهی (بلاگفا، میهن بلاگ، وردپرس) (+پروژه)
  • فصل سیزدهم: آموزش تبدیل انواع قالب های خارجی و انگلیسی به فارسی (روش کار + تکنیک ها و ترفندها) (+پروژه)
  • فصل چهاردهم: طراحی قالب متناسب با سئو - بهینه سازی صفحات وب برای موتورهای جستجو
  • فصل پانزدهم: طراحی وب واکنشگرا (Responsive) - طراحی یک قالب برای همه ابزارها (موبایل،تبلت،کامپیوتر) (+پروژه)
  • فصل شانزدهم : آشنایی با فریمورک های HTML و CSS (فریمورک PureCSS و بوت استرپ)
  • فصل هفدهم : مباحث پیشرفته در HTML5
  • فصل هجدهم  : مباحث پیشرفته در CSS3
  • فصل نوزدهم (آخر): جمع بندی و نکات مهم برای ادامه کار
mststrange replyپاسخ

سلام. از جلسه 2 به بعد هیچ فایلی دانلود نمیشه. لطفا بررسی کنید

mststrange replyپاسخ

سلام. از جلسه 2 به بعد هیچ فایلی دانلود نمیشه لطفا بررسی کنید

mststrange replyپاسخ

سلام فایل ها دانلود نمیشه لطفا چک کنید

mststrange replyپاسخ

سلام… فایلها دانلود نمیشه و Error میده لطفا چک کنید…

mststrange replyپاسخ

سلام. چرا فایل های جلسه 2 دانلود نمیشه… لطفا چک کنید

nilla abr replyپاسخ

سلام استاد خسته نباشید، تگ hgroup در html5 منسوخ شده, طبق جستجویی که من کردم جایگزینی برای این تگ نیست، سوالم این هست که پس میتوان تگ های h1 تا h6 در تگ header بیاوریم؟ از نظر محتوایی به چه صورت باید عمل کرد؟

صمد سپهری replyپاسخ

سلام.
از قسمت run-debug به صورت زنده نمیتونم استفاده کنم.
jetbrains ide supportرو هم فعال کردم ولی لایو اجرا نمیشه

صمد سپهری replyپاسخ

سلام خسته نباشین
تو تگ input من از required استفاده میکنم ولی تو صفحه وب اجرا نمیشه.مشکل از کجاست؟

فاطمه سلیمانی replyپاسخ

با سلام و خدا قوت
بنده php storm را نصب کردم و از سایت https://jetbrains.tools نتونستم لایسنس سرور اجرای برنامه را پیدا کنم اگه میشه راهنمایی کنید
با تشکر و سپاس فراوان

danyal bani replyپاسخ

سلام دوستان یه سوال داشتم آیا میشه که از چند تا تگ meta با قابلیت charset استفاده کرد .آیا همه رو مرورگر اعمال میکند ؟برای مثال:

<meta charset="UTF-8">
<meta charset="utf-2">
بهزاد افراسیابی replyپاسخ

سلام جناب اوند خیلی ممنون از ندریستون سوالی ک اشتم مراحل ایجاد سایت از 0تا 100چگونه هست؟؟
باسپاس

فرزانه ملکی replyپاسخ

سپاس وتشکر ازمطالبی که دراختیارمون‌ گزاشتین

سینابهبودی replyپاسخ

اگه میشه واضح تر توضیح بدین ممنون

farzanehallahmoradi replyپاسخ

سلام استاد وقتتون بخیر لطف میکنید کاربرد این تگ meta توضیح بدید

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
علی صالحی replyپاسخ

سلام جناب اوند
راستش یه سوالی خیلی خیلی ذهنمو درگیر کرده که گفتم بپرسم شاید فرجی شد شما دیدین و جواب دادین !
من قبل اینکه این جلسه رو ببینم با خودم فک میکردم که با وجود درصد و max-width min-width و min-height max-height تقریبا مشکلی بابت ریسپانسیو کردن قالب وجود نداره چون راحت میشه کل div html و 100 درصد در نظر گرفت بعد تو همه جای قالب از درصد استفاده کرد تا مرورگر خودش تنظیم کنه اندازه بخش هارو که خودمم یه پروژه ناتمام کارکرده بودم (به دلیل خلاقیت کمم نتونستم تا اخرش برم ) که خیلی هم ریسپانسیو بود ولی تنها مشکلی که وجود داشت یکی منو های کشویی بود با display: none کردن بعضی جاها تو اندازه کوچک و به نظر من نیاز نبود که همه این کارارو با @media انجام بدیم و راحت میشد با درصد همه چیزو رو به راه کرد ! ولی شما به این مورد اشاره نکردید و اون درصد هارو اومدین تو @media دادین مثلا تو تگ های html عرض بخش مطالب مثلا 500px بود شما اومدین همونو تو media به درصد تبدیل کردین که میشد از همون اول اینکارو کرد کدنویسی هم کم بشه
ممنون میشم جواب بدید
موفق باشید

hossein shabani replyپاسخ

سلام
از آنجا که این دوره در حدود4سال قبل ضبط شده و اینکه در آن گفته شد از grid و felxbox استفاده نمی شود به علت عدم پشتیبانی مرورگر ها .
آیا الان طراحی به این سمت رفته که به جای float از این دستور ها استفاده شود؟

علی صالحی replyپاسخ

4 روز

hossein shabani replyپاسخ

سلام
هنگام دیدن و یادگیری دوره های جدید چطور دوره های قبلی رو تمیرین و دوره کنیم؟

علی صالحی replyپاسخ

واقعا برام سواله !
ینی اینقد کامنتاتون زیاده که 3 روز جواب یه کامنت نمیدین ؟؟؟؟؟؟

جوادغیاثوند replyپاسخ

سلام وقت بخیر .درخصوص رنگها و انتخابشون برا قسمت های سایت و اینکه چطور بتونم از هارمونی های رنگی نزدیک.بهم برای سایت مورد نظرمون الگو برداری کنیم.ایا راهنما یا سایتی هست.؟؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3 4 5 78
مدرس و آمار دوره
Course-Teacher
لقمان آوند
دانشجوی دکترای نرم افزار دانشگاه شیراز ، با 10 سال سابقه فعالیت های آموزشی در بستر وب فارسی . مدیر، موسس و برنامه نویس وبسایت سون لرن با بیش از 8 سال سابقه طراحی وب و برنامه نویسی حرفه ای زبان های Html, CSS, Javascript, Jquery, Ajax و PHP.
library_books
۳۳۰ مقاله تخصصی
school
۷ دوره برگزار شده
۹۵۰۹ علاقمندfavorite
۸۶۴۵ دانشجوpeople
۱۴۳۴ رایstar
٪ ۹۲.۵ میانگین رضایت از مدرس
پیشنیاز های دوره
این دوره هیچ پیشنیازی ندارد، از سطح پایه و با زبانی ساده تدریس شده است.
پشتیبانی فنی دوره
مدرس دوره و تیم پشتیبانی سون لرن به مدت 3 ماه پس از خرید دوره در بخش نظرات مطالب دوره ، پاسخگوی تمامی سوالات و ابهامات شما در مورد این دوره خواهند بود.
مشاوره پیش از خرید
در صورتی که در مورد هر کدام از دوره های سون لرن سوال و یا ابهامی در ذهن شما هست، می توانید همین حالا با ما در تماس باشید و از مشاوره رایگان قبل از خرید دوره ها استفاده نمایید.
contact_phone شماره تماس : ۰۲۱۴۴۰۲۰۴۸۲
email ایمیل : support@7Learn.com