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
  • فصل نوزدهم (آخر): جمع بندی و نکات مهم برای ادامه کار
reza replyپاسخ

سلام آیا تگ مخصوص عبارتهای لاتینه ؟ برای عبارتهای فارسی چنین چیزی داریم اصلا؟

Farzane Zareei replyپاسخ

با سلام و ادب.
ببخشید به جای تگ hgroup که الان دیگه منسوخ شده چه جایگزینی باید استفاده کنیم؟

لقمان آوند

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

حامد امیری replyپاسخ

سلام من امروز دوره رو خریدم
از نحوه توضیح دادن و آموزشتون خوشم اومد دستتون درد نکنه

hossein replyپاسخ

سلام بر استاد آوند عزیز:
در ابتدا می خواهم یک تقدیر و تشکر کنم ازتون بابت این دوره من تا این جلسه(جلسه 16) پیش اومدم و خیلی لذت بردم.
استاد بنده به عنوان تمرین مشکلات سایت سون لرن رو رو داخل سایت https://validator.w3.org بررسی کردم و برام خیلی جالب بود که سایتی با این حجم زیاد مطالب فقط چند خطا و ارور جزئی داشت:
1) یکی این بود که در تگ های img از مشخصه alt استفاده نشده در چند مورد.
2) در دو سه مورد از تگ style در body استفاده شده که باید داخل head باشه.
3) مشخصه type برای تگ های script لازم نیست بکار برده شوند که شما استفاده کرده اید.
4) مشخصه role در تگ های nav لازم نیست بکار برده شوند که شما استفاده کرده اید.
5) در تگ section باید از تگ های h2 تا h6 استفاده شود در حالیکه یک تگ h1 استفاده شده است.
واقعا بابت این دوره ازتون صمیمانه سپاسگزارم.

لقمان آوند

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

Mohammadreza Razavi replyپاسخ

با سلام و خسته نباشید
چرا هم پلاگین Live Edit و هم پلاگین easy auto refresh برای مشاهده و ویرایش همزمان کد روی PhpStorm و مرورگر گوگل کروم کار نمیکنه؟؟؟
اگر جایگزینی برای این پلاگبن ها وجود دارد لطفا بفرمایید
با تشکر

Pouyan Izadi replyپاسخ

سلام آموزشهاتون مفید هست، پیشنهاد می کنم برای طراحی سایت حرفه ای و آموزش طراحی وب و اصول سئو به وبسایت ما هم سر بزنید

مریم عباسی replyپاسخ

سلام.چرا اموزش فعال سازی نرم افزار رو توی فایل قرار ندادین؟

لقمان آوند

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

حسین ملهم replyپاسخ

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

حسین ملهم replyپاسخ

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

لقمان آوند

ارادتمندم جناب دکتر

RezaDehghani replyپاسخ

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

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

Bakan mohammad replyپاسخ

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

hashem replyپاسخ

مشکل حل شد ممنون

لقمان آوند replyپاسخ

سلام
خیر دوست عزیز
html5 و CSS3 گفته شده که همچنان داره استفاده میشه

hashem replyپاسخ

سلام مشکل حل شد خیلی ممنون از سایت خوبتون

hashem replyپاسخ

سلام مشکل حل شد خیلی ممنون از سایت خوبتون

Amir Ahangar Azizi replyپاسخ

??

نیاز به لاگین

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