فقط واتساپ ۰۹۱۵۷۲۳۲۳۹۸

آموزش طراحی سایت با html و css

آموزش طراحی سایت با HTML و CSS پروژه محور

ما در این دوره از صفر تا صد آموزش طراحی سایت با html و css را بصورت کاملا پروژه محور با تمام جزئیات به شما آموزش میدهیم.پس اگر میخواهید…

499,000 تومان

تعداد دانشجو : 297

آموزش طراحی سایت با html و css پروژه محور بهترین آموزشی است که درشروع کار برای تبدیل شدن به یک طراح سایت و برنامه نویس حرفه ای به آن نیاز دارید! برای اینکه بتوانید یک وبسایت زیبا و کاربرپسند طراحی کنید قدم اول html , css هست. ما در این دوره از صفر تا صد آموزش طراحی سایت با html و css را بصورت کاملا پروژه محور با تمام جزئیات به شما آموزش میدهیم.پس اگر میخواهید…

  • اگر میخواهید ورودی قدرتمند به حوزه طراحی سایت داشته باشید.
  • اگر میخواهید توانایی انجام تغییرات ظاهری و گرافیکی در سایت های مختلف داشته باشید
  • اگر میخواهید در ادامه تبدیل به یک برنامه نویس حرفه ای شوید
  • اگر میخواهید یک فرانت اند دولوپر حرفه ای شوید و در شرکت های مختلف طراحی سایت استخدام شوید
  • اگر میخواهید نحوه طراحی یک سایت حرفه ای را از صفر تاصد با تمام جزئیات با html css یادبگیرید

و… این دوره کاملا برای شما تولید شده!

 

مشاهده دموی پروژه نهایی طراحی شده در این دوره (طراحی سایتی مشابه وبسافت3)

 

آموزش پروژه محور html و css

 

آموزش طراحی سایت با html و css

بطور کلی طراحی یک وبسایت زیبا و کاربرپسند به دو بخش تقسیم میشود. بخش اول فرانت اند و بخش دوم بک اند! بخش اول یعنی فرانت اند مربوط به کدنویسی html , css , js میشود که با استفاده اینها ظاهر و قالب وبسایت را طراحی میکنیم. درواقع هر چیزی که در وبسایت قابل نمایش و دیده شدن هست با استفاده از کدنویسی فرانت اند یا همان html , css ایجاد شده که در این دوره آموزش طراحی سایت با html و css بطور کامل آموزش داده شده. اما…

html و css هر کدام چه نقشی در طراحی یک وبسایت دارند؟

اگر ساختار یک وبسایت را مانند یک ساختمان در نظر بگیریم، اسکلت و بدنه ساختمان با html ایجاد میشود و زیبا سازی، رنگ و لعاب، دکوراسیون و بطورکلی نمای ساختمان هم به واسطه استایل های css انجام میشود. بخاطر همین اگر بخواهیم یک وبسایت زیبا طراحی کنیم باید از آموزش html و css به صورت ترکیبی و باهم استفاده کنیم چراکه هیچکدام به تنهایی به کار ما نمیاید.

آموزش html و css

 

چگونه طراحی سایت با html و css را یادبگیرم؟

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

اما اگر html و css بصورت ترکیبی و پروژه محور، در در قالب ایجاد یک پروژه حرفه ای طراحی سایت آموزش داده شود چون در طول مسیر، موارد کاربردی یادمیگیرید و در پایان هم یک سایت حرفه ای طراحی کردید و به نتیجه دلخواه رسیدید، هم یادگیری برایتان لذت بخش میشود و هم در زمان بسیار کمتری مهارت های منطبق با نیاز بازار کار را فرامیگیرید. (درآمد طراحی سایت)

 

مشاهده آنلاین جلسه دوم (مقدماتی)

 

چرا باید طراحی سایت با html5 و css3 را پروژه محور یادبگیرم؟

صرفا یادگیری تگ های html5 فایده ای ندارد! شما باید این مهارت را داشته باشید تا از تگ های html5 بصورت کاملا اصولی در پروژه استفاده کنید تا با استاندارد های کنسرسیوم جهانی وب w3c هم منطبق باشد – فرض کنید شما تمام تگ های html و جزئیات آن را یادگرفته اید اما وقتی میخواهید اقدام به طراحی یک سایت بکنید تازه آن وقت با چالش ها و روش های متفاوت آن روبرو میشوید. لذا ما با درنظر گرفتن همه این موارد دوره آموزش طراحی سایت با html و css را تولید کردیم تا شما با اصول و الگوی کار هم آشنا شوید.

 

جاوااسکریپت هم یادمیگیریم در این دوره؟

جاوااسکریپت و جی کوئری در طراحی وب نیازی به یادگیری صفر تاصدی ندارد، اما بصورت کاربردی باید بلد باشید مواردی مثل اسلایدشو یا پست های اسلایدری که با جاوااسکریپت کار میکنند را پیاده سازی کنید. با توجه به این که در پروژه اصلی دوره 3 تا اسلایدر با مدل های مختلف داریم کار با جاوااسکریپت را هم در حد نیاز یادمیگیرید.

 

مشاهده آنلاین جلسه 13 (شروع بخش دوم)

 

روند کلی دوره به چه شکل است؟

پروژه اصلی دوره، طراحی قالبی دقیقا شبیه به همین سایت وبسافت3 هست لذا ما برای رسیدن به این نتیجه در مرحله اول از صفر شروع میکنیم و نحوه ایجاد یک سند HTML5 را به همراه مفهوم تگ های اولیه آن یادمیگیریم نحوه استفاده از استایل های css و ارتباط آن با سند html5 را یادمیگیریم. اصول کدنویسی html و المان های مورد نیاز به همراه استایل های مختلفی که در css وجود داره، نحوه ایجاد فرم با انواع مختلف فیلدهای ورود اطلاعات و… و تمام موارد مقدماتی و پایه ای را در قالب مینی پروژه های کوچک یادمیگیرید و در نهایت میریم برای پروژه اصلی و کار حرفه ای و یادمیگیریم سایتی مشابه با همین سایت وبسافت3 را از 0 تا 100 با استفاده از html5 و css3 با تمام جزئیات بصورت کاملا پروژه محور طراحی کنیم.

 

 

قدم بعدی شما بعد از این دوره

جلسه ۱ - html css چیست و چه کاربردی دارد؟ تفاوت کدنویسی فرانت اند و بک اند!

ویدیو 4:29

عدم دسترسی

جلسه ۲ - آماده سازی محیط کار و نحوه ایجاد سند html و تگ های اولیه

ویدیو 11:02

عدم دسترسی

جلسه ۳ - معرفی و استفاده از تگ چند تگ html و نحوه ارتباط با css برای استایل نویسی

ویدیو 16:04

عدم دسترسی

جلسه ۴ : ادامه کدنویسی html css و نحوه استفاده از ابزار کاربردی inspect element

ویدیو 18:08

عدم دسترسی

جلسه ۵ - خنثی سازی استایل های پیشفرض مرورگر و css reset و ادامه کدنویسی html css

ویدیو 16:17

عدم دسترسی

جلسه ۶ - تفاوت تگ های بلاک لول و اینلاین لول، نحوه لینک گذاری - درج تصویر و...

ویدیو 16:24

عدم دسترسی

جلسه ۷ - ایجاد فرم (تکست فیلد - ایمیل فیلد - پسورد فیلد) value - placeholder

ویدیو

عدم دسترسی

جلسه ۸ - ادامه ایجاد فرم (فیلد های تک انتخابی - چند انتخابی - متن طولانی)

ویدیو

عدم دسترسی

جلسه ۹ - ادامه ایجاد فرم (listbox - button) و معرفی ادامه استایل های css

ویدیو

عدم دسترسی

جلسه ۱۰ - معرفی و استفاده از تگ های ul li و ایجاد منوی بالای سایت

ویدیو

عدم دسترسی

جلسه ۱۱ - مفهوم و کاربرد position های relatevi و absolute و ادامه معرفی استایل های css

ویدیو

عدم دسترسی

جلسه ۱۲ - معرفی خصوصیت id و تفاوت آن با کلاس و روش های دیگر استایل دهی

ویدیو

عدم دسترسی

آموزش رفع خطاهای کدنویسی (خیلی خیلی مهم)

ویدیو

عدم دسترسی

سورس پروژه 12 جلسه اول

فایل

عدم دسترسی

آموزش HTML5 و مفهوم تگ های معنادار + آماده سازی محیط کار

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (طراحی نوار بالای سایت - مفهوم container)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (استفاده از آیکون های مختلف در سایت)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (اضافه کردن فونت دلخواه به پروژه و مبحث font-face)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (ایجاد منو آبشاری به همراه زیر منو با استفاده از افکت های css3 )

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (ایجاد دکمه ثبت نام ورود در هدر سایت و تکمیل بخش هدر)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (آموزش ایجاد اسلایدشو اصلی تمام صفحه)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (شروع کدنویسی بخش وبسافتTV)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (تکمیل بخش وبسافتTV)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (ایجاد بخش مقالات بصورت اسلایدری ورقه ای)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (تکمیل بخش مقالات بصورت اسلایدر ورقه ای)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (ایجاد بخش تبلیغات تک پست)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (ایجاد بخش دوره ها بصورت اسلایدری به همراه نکات ویژه)

ویدیو

عدم دسترسی

طراحی قالب وبسافت۳ (ایجاد بخش فوتر و متعلقات آن)

ویدیو

عدم دسترسی

آموزش فلکس باکس بخش اول

ویدیو

عدم دسترسی

آموزش فلکس باکس بخش دوم

ویدیو

عدم دسترسی

دانلود سورس پروژه (به تفکیک جلسات)

فایل

عدم دسترسی

مرحله بعدی شما (مهم)

ویدیو

عدم دسترسی
رضا حیدری

سلام! من رضاحیدری هستم مدرس این دوره! اگر سوالی در مورد دوره داری همین الان توی اینستاگرام ازم بپرس. آیدی پیجم : websoft3_com@

پیج اینستاگرام
  1. user-1687350517

    سلام ی سوال داشتم الان اگ دوره آموزش طراحی سایت (تخصصی ) رو تهیه کنیم .مباحث این دوره طراحی سایت با html و css هم داخلش هست یا لازمه اول اینو جداگانه تهیه کنیم؟

    • رضا حیدری (خریدار محصول)

      سلام بله مباحث این دوره (حتی کاملترش) در دوره تخصصی طراحی قالب وردپرس هست

  2. محمد

    سلام دمو این پروژه رو چرا اینجوری نشون میده برای ما انگار اسکرول چپ و راست داره ؟ قضیه چیه؟
    https://s2.uupload.ir/files/image_2023-02-12_143211113_ubvf.png
    این عکس رو ببینید متوجه میشید

    • رضا حیدری (خریدار محصول)

      سلام بزرگوار بخاطر اینکه صفحه نمایشگر شما کوچیکه و این پروژه رسپانسیو نشده وقتی رسپانسیو بشه توی هر صفحه نمایشگری متناسب با همون ابعاد نمایش میده، این دوره صرفا آموزش html css هست و مبحث رسپانسیو کردن این پروژه رو توی دوره اصلی (دوره آموزش طراحی قالب وردپرس) آموزش میدیم. (رسپانسیو هم آسونه)

  3. اس ار

    سلام یک سوال خدمتتون داشتم
    من میخوام دوره رو تهیه کنم
    ولی با جاوا اسکریپت آشنایی ندارم
    نیاز من آشنایی داشته باشم ؟
    یا داخل دوره با موارد جاوا آشنا میشم ؟

    • رضا حیدری (خریدار محصول)

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

  4. شبنم عمرانی

    سلام جناب حیدری وقت بخیر،من می‌خوام دوره آموزش وردپرس رو هم بعد این دوره تهیه کنم داخلش این قسمت html css موجوده یا جداگانه تهیه کنم؟

    • رضا حیدری (خریدار محصول)

      سلام وقت شمام بخیر – دوره آموزش طراحی قالب وردپرس رو میفرمایید؟ بله html css بصورت کامل در اون دوره موجوده و نیازی به تهیه این دوره نیست

  5. GTR

    سلام خسته نباشید
    ببخشید این دوره بروزه با تغییرات و اضافه شدن کد های جدید؟؟

    • رضا حیدری (خریدار محصول)

      سلام بله این دوره کاملا جدید و بروز هست

  6. الناز

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

    • رضا حیدری (خریدار محصول)

      درود بر شما – این دوره صرفا طراحی بخش فرانت اند سایت هست صرفا ظاهر صفحات بدون ارتباط با پایگاه داده طراحی میشه – مواردی که فرمودید در مرحله بعدی به قالب اضافه میشه که توی دوره آموزش طراحی قالب وردپرس هست. (لینک زیر)
      https://websoft3.com/?p=16060

  7. seng.makui (خریدار محصول)

    آقا سورس 12 جلسه اول آموزشتون فایلش ارور میده

    • رضا حیدری (خریدار محصول)

      سلام و درود – اصلاح شد ممنون از اطلاع رسانی تون

  8. greatparsian

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

    • رضا حیدری (خریدار محصول)

      سلام بزرگوار بله در دوره طراحی قالب وردپرس این دوره حتی با مباحث کاملتر وجود دارد

  9. حسین جهانشیری

    سلام وقت بخیر قسمت دوره رایگان بخش رفع خطاهای کد نویسی فایل دانلودش مشکل داره ممنون میشم اصلاح شه و همینطور سورس پروژه
    ممنونم

    • رضا حیدری (خریدار محصول)

      سلام اصلاح شد عزیز

  10. arash.alireza.1387.1394

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

    • رضا حیدری (خریدار محصول)

      سلام بله عزیز

  11. arash.alireza.1387.1394

    سلام
    ببخشید یه سوال
    شما توی نقشه راه برنامه نویسی وب گفتین که جاوا اسکریپت به مقدار لازم رو توی دوره html css توضیح دادین، منظورتون این دوره بود یا اون دوره رایگان چون اون دوره رو من تموم کردم ولی چیزی از جاوا اسکریپت ندیدم می خواستم ببینم توی این دوره تدریسش می کنین؟

    • رضا حیدری (خریدار محصول)

      درود بر شما – بله توی این دوره و در ادامه دوره آموزش طراحی قالب وردپرس هست
      https://websoft3.com/?p=16060

  12. شهرام شهیدی مقدم

    سبلم وقت بخیر. چرا ثبت نام دوره متوقف شده؟

    • رضا حیدری (خریدار محصول)

      سلام جهت مدیریت عزیزانی که ثبت نام کردند – از فردا مجدد ثبت نام رو باز میکنیم

  13. سجاد قبادپناه (خریدار محصول)

    سلام خدمت دوستان و استاد حیدری عزیز.دوره ی فوق العاده ای هست.ی سوال داشتم .اینکه دوره پشتیبانی داره؟چن تا سوال پیش اومده برام.پشتیبانی همینجا هست؟ی سوالم اینکه چرا <div class="item box-course" …..چرا از دوتا کلاس استفاده میکنیم ؟؟

    • رضا حیدری (خریدار محصول)

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

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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