دوره آموزش HTML CSS به زبان ساده (رایگان – جدید)
98000–رایگان!
ویژگی های دوره
آموزش html و css اولین قدم برای یادگیری طراحی سایت است. اگر در فکر ورودی قدرتمند به حوزه برنامه نویسی و طراحی وب هستید یادگیری html و css پایه کار است. در این دوره از صفر کار شروع میکنیم و آموزش html و css را از ابتدا تا مباحث پیشرفته براحتی یادمیگیرید. این دوره جدید تولید شده و فعلا بصورت رایگان ارائه میشود.
آموزش html و css به زبان ساده
کاربرد html css در طراحی سایت : بطور کلی هر چیزی که در ظاهر یک وبسایت میبینید و قابل دیدن هست با استفاده از کدنویسی html css ایجاد شده. پس شما برای طراحی یک وبسایت زیبا و کاربرپسند در ابتدی کار نیاز به این دو بزرگوار دارید.
نقش html و css در طراحی سایت : اگر وبسایت را به یک ساختمان تشبیه کنیم، بدنه و اسکلت ساختمان را با کدهای html میسازن، رنگ و لعاب زیبایی دکوراسیون و نمای آن ساختمان را هم با استایل های css انجام میدهند. نکته : بنابراین برای اینکه در نهایت به یک نتیجه و محصولی دست پیدا کنیم باید از html و css با هم بصورت ترکیبی استفاده کنیم و هیچ کدام به تنهایی برای ما کاربردی ندارد.
چگونه html را یاد بگیرم؟
آموزش html رایگان : یک اشتباه بزرگی که افراد تازه کار مرتکب میشوند این است که html و css را جدا، جدا یاد میگیرند مثلا فکر میکنند اول باید html را یادبگیرند و تمام کنند و سپس اقدام به یادگیری css کنند که این کار کاملا اشتباه است. دوستان یادتان باشد html و css مکمل هم هستند و هیچ کدام به تنهایی برای ما کاربرد و نتیجه ای ندارند بنابراین حتما باید باهم یادگرفته شوند تا نتیجه بخش باشد.
یادگیری html به تنهایی به دلیل اینکه نتیجه و محصولی ندارد بسیار سخت میشود و متاسفانه آموزش های زیادی هم در سطح نت وجود دارد که اینها را مجزا آموزش داده اند که این باعث گمراهی و دلزدگی افراد تازه کار از یادگیری این موضوع مهم میشود. اما اگر html و css را باهم یادبگیرید چون در حین کار پروژه های کاربردی و نتایج ملموس تری دارید هم از یادگیری لذت میبرید و هم بصورت کاملا اصولی و استاندارد و در زمان بسیار کمتری میتوانید به تخصص برسید.
چرا باید html و css را بصورت پروژه محور یادبگیرم؟
اینکه شما صرفا بیاید و تمام تگ های html و تمام استایل های css را یادبگیرید در نهایت چه کاربردی برای شما دارد؟ هیچی! فقط ما با کلی تگ و استایل آشنا شدید اما نمیتوانید یک وبسایت را به واسطه اطلاعاتی که بدست آوردید کدنویسی کنید، اما اگر آموزش بصورت پروژه محور باشد شما ضمن یادگیری کدها، نحوه استفاده و بکارگیری کدها در طراحی یک سایت یا صفحه وب را هم یادمیگیرید. (آقا شما هدفتون اینه که در نهایت بتونید با html css یک وبسایت طراحی کنید دیگه! پس وقتتون رو صرف موارد تئوری و اکادمیک نکنید! بیاید پروژه محور و کاربردی بر اساس نیاز بازارکار یاد بگیرید )
روند دوره به چه شکل هست؟
روند دوره آموزش رایگان html به این شکل هست که ما از صفر شروع میکنیم و یک پوشه برای پروژه html css مان ایجاد میکنیم و پایه تمام نکات مقدماتی که چطور یک سند html ایجاد کنیم، مفهوم تگ و نحوه نوشتن تگ های html به جه شکل هست، چطور یک فایل css برای استایل دهی ایجاد کنیم، ارتباط بین سند html و فایل css چگونه است، اصول کدنویسی html و نحوه ایجاد المان های مورد نیاز به همراه استایل دهی، نحوه ایجاد فرم های با فیلدهای مختلف مثل تکست فیلد، ایمیل فیلد، پسوردفیلد، لیست باکس، باکس های تک انتخابی، چند انتخابی و چک باکس و… را بطور کامل در قالب مینی پروژه های کوچک با تمام جزئیات یادمیگیرید.
مشاهده آنلاین جلسه دوم
درنهایت هم به عنوان پروژه اصلی و نهایی دوره، آموزش طراحی یک سایت حرفه ای را از صفر تا صد با تمام جزئیات یادمیگیرید. سایتی که در نظر گرفتیم همین سایت وبسافت۳ هست که دقیقا مشابه این سایت را با html css طراحی میکنیم. (البته این پروژه در بخش بعدی دوره انجام میشود)
جلسات دوره آموزش html رایگان
جلسه ۱ - html css چیست و چه کاربردی دارد؟ تفاوت کدنویسی فرانت اند و بک اند!
ویدئو ۴:۲۹
جلسه ۲ - آماده سازی محیط کار و نحوه ایجاد سند html و تگ های اولیه
ویدئو ۱۱:۰۲
جلسه ۳ - معرفی و استفاده از تگ چند تگ html و نحوه ارتباط با css برای استایل نویسی
ویدئو ۱۶:۰۴
جلسه ۴ : ادامه کدنویسی html css و نحوه استفاده از ابزار کاربردی inspect element
ویدئو ۱۸:۰۸
جلسه ۵ - خنثی سازی استایل های پیشفرض مرورگر و css reset و ادامه کدنویسی html css
ویدئو ۱۶:۱۷
جلسه ۶ - تفاوت تگ های بلاک لول و اینلاین لول، نحوه لینک گذاری - درج تصویر و...
ویدئو ۱۶:۲۴
جلسه ۷ - ایجاد فرم (تکست فیلد - ایمیل فیلد - پسورد فیلد) value - placeholder
ویدئو
جلسه ۸ - ادامه ایجاد فرم (فیلد های تک انتخابی - چند انتخابی - متن طولانی)
ویدئو
جلسه ۹ - ادامه ایجاد فرم (listbox - button) و معرفی ادامه استایل های css
ویدئو
جلسه ۱۰ - معرفی و استفاده از تگ های ul li و ایجاد منوی بالای سایت
ویدئو
جلسه ۱۱ - مفهوم و کاربرد position های relatevi و absolute و ادامه معرفی استایل های css
ویدئو
جلسه ۱۲ - معرفی خصوصیت id و تفاوت آن با کلاس و روش های دیگر استایل دهی
ویدئو
دانلود کدهای استفاده شده در دوره بصورت تفکیک شده جلسه به جلسه فایل های ضمیمه
سورس پروژه
آموزش html و css چه کاربردی دارد و جزء کدام بخش از طراحی یک وبسایت است. کدنویسی فرانت اند چیست در فرانت اند چه کارهایی و چه بخش هایی پروژه انجام میشود. فرانت اند چه تفاوتی با بک اند دارد. اینها مباحثی هستند که در جلسه اول مورد بررسی قرار میگیرند تا شما یک درک کلی از مهارت هایی که قرار است یادبگیرید را پیدا کنید.
در جلسه دوم یادمیگیرید چطور که فایل html بسازید، مفهوم تگ در html چیست؟ یک سند html از چه تگ هایی ایجاد شده است؟ هر کدام از تگ ها چه معنا و کاربردی دارند؟ کدهای html چطور اجرا میشوند؟ معرفی و استفاده از تگ head | مشخص کردن تایتل صفحه وب با استفاده از تگ title | معرفی و تگ body
در جلسه سوم با تگ معروف div آشنا میشوید و استفاده میکنیم | نحوه ایجاد و معرفی فایل استایل های css به html را یادمیگیریم | نحوه استفاده از تگ link را بررسی میکنیم | نحوه استایل نویسی با استفاده از کلاس را در css یادمیگیریم | معرفی و ویژگی تگ های هدینگ در صفحه | استفاده از استایل های متداول مثل backgroung – width – height و… | چگونه المان های تودرتو بنویسیم و…
در جلسه چهارم معرفی استایل margin – padding – text-align – color – font-size – box-sizing – float را داریم و سپس نحوه استفاده از ابزار inspect element را که یکی از مهم ترین ابزارها در طراحی وب و کدنویسی html css است آموزش میدهیم.(ابزار inspect element در همه مرورگرها وجود دارد که توسط آن میتوانیم در خوده مرورگر کدنویسی کنیم و نتیجه تغییرات را زنده و آنی مشاهده کنیم) این ابزار به سرعت کار ما در کدنویسی بسیاااار کمک میکند.
در جلسه پنجم به مبحث مهم css reset میپردازیم. یکی از اصول طراحی وب این است که طراح ما در همه مرورگرها نمایش یکسانی داشته باشد و ما برای رسیدن به این مهم با استفاده از کدهای css reset استایل های پیشفرضی که مرورگرهای مختلف روی المان های صفحه اعمال میکنند را خنثی میکنیم. ضمن اینکه در همین جلسه نحوه کامنت گذاری در css و یکسری نکات کاربردی در استفاده از float و height بیان میکنیم تا با جزئیات آنها بصورت کامل آشنا شوید.
در جلسه ششم آموزش html و css با مفهوم تگ های اینلایل لول (inline level) و بلاک لول (block level) و خصوصیات و تفاوت های آن آشنا میشوید. معرفی و استفاده از تگ a بهمراه خصوصیت های آن برای ایجاد لینک گذاری را بطور کامل یادمیگیرید و در آخر هم با معرفی تگ img نحوه نمایش تصاویر مختلف را (با جزئیات آن مثل کنترل ابعاد، استایل های مورد نیاز در بخش css و…) در صفحه وب یادمیگیرید.
جلسه هفتم :
جلسه هشتم :
جلسه نهم :
جلسه دهم :
جلسه یازدهم
جلسه دوازدهم :
برای یادگیری html به چه ابزارهایی احتیاج دارم؟
برای یادگیری html در شروع کار به ابزار خاصی احتیاج ندارد صرفا یک ادیتور کد که بتوانید کدهای html را داخلش بنویسید و یک مرورگر که خروجی کار را نمایش دهید همین. برای ادیتور میتوانید حتی از notepad خوده ویندوز هم استفاده بکنید هیچ فرقی نمیکند اما پیشنهاد میکنم در شروع کار از یک ویرایشگر مناسب تر مثل notepad++ استفاده کنید notepad++ بسیار ساده است و حجم بسیار کمی هم دارد (حدود ۳ مگابایت) که میتونید براحتی از سایت های دانلود نرم افزار دانلود و نصب نمایید. ضمن اینکه در در این آموزش هم در ابتدای کار سند html را با notepad ساده ویندوز ایجاد میکنیم و بعد با نصب notepad++ ادامه کدنویسی مان را انجام میدهیم و کار با این نرم افزار ساده را هم براحتی یادمیگیریم.
مرورگر هم که همه شما برای وبگردی در سیستم تان نصب دارید ترجیحا از مرورگر فایرفاکس یا کروم استفاده کنید. در طول آموزش با ابزارهای بسیار کاربردی از مرورگر مثل inspect element آشنا میشید و یادمیگیرید که چطور با کمک ابزارهایی که در مرورگرها وجود دارد برای کدنویسی و طراحی وب استفاده کنید.
پس بطور کلی شما به یک ویرایشگر متن ساده مثل notepad++ و یک مرورگر ترجیحا فایرفاکس یا کروم برای شروع کار احتیاج دارید که در طول آموزش html نحوه نصب و استفاده از اینها را بطور کامل آموزش میدهیم
درخواست مشاوره
برای کسب اطلاعات بیشتر درباره این دوره درخواست مشاوره خود را ارسال کنید و یا با ما در تماس باشید.
درخواست مشاورهchat_bubble_outlineنظرات
قوانین ثبت دیدگاه
98000–رایگان!
عرفان عظیمی( دانشجوی دوره )
لینک فایل ۱۲ مشکل داره
رضا حیدری(مدیریت)
اصلاح شد بزرگوار
علیپور( دانشجوی دوره )
سلام استاد حیدری بزرگوار
ممنون از آموزش هایی که گذاشتین
من در سایت ثبت نام کردم ولی لینک دانلود اموزش رایگان بالا برام فعال نمیشه
بادی چکا رکنم؟
رضا حیدری(مدیریت)
سلام بزرگوار در سایت ثبت نام کردین؟ نه شما باید در دوره ثبت نام کنید بالا سمت چپ یک دکمه سبز رنگ هست با نام “شرکت در دوره” روی اون کلیک کنید و سفارشتون رو ثبت کنید که رایگان هم هست
با اینکه هم در پنل کاربری تون و هم در همین صفحه از قسمت سرفصل جلسات میتونید آموزش هارو دانلود کنید
فرشاد( دانشجوی دوره )
سلام.اینکه دوره پیش نیاز نداره یعنی توی همین ۲ ساعت و خورده ای هم HTML رو آموزش میدید و هم CSS رو و هم پروژه انجام میدید؟با تشکر
رضا حیدری(مدیریت)
بله پیش نیاز نداره از صفر صفر – شما در این دوره html و css رو یادمیگیری و در بخش بعدی دوره که اونم حدود ۲ ساعت و خورده ای هست یادمیگیری با html5 و css3 یک سایت شبیه به همین سایت وبسافت۳ طراحی کنید
این لینک بخش دوم دوره هست :
https://websoft3.com/website-design-training-with-html-css/
سجاد اسدیان( دانشجوی دوره )
حاجی عاااااالی بود صبح آموزشارو نگاه کردم الان html css یادگرفتم استااااده آموزش دادنی اقای حیدری دمت گرم موقع دیدن آموزش ها چققققدر ذوق زده میشدم کاش زودتر با این دوره آشنا میشدم چقدر بادیدن آموزشای چرت و پرت وقت تلف کردم! فقط توی آموزش ها گفتین در بخش بعدی یک سایت شبیه همین وبسافت۳ طراحی میکنیم بخش بعدی رو از کجا باید دانلود کنم؟؟؟
رضا حیدری(مدیریت)
سلام بزرگوار لطف دارید ممنون از لطفتون – بخش دوم دوره لینک زیر :
https://websoft3.com/website-design-training-with-html-css/
پیمان قلعه( دانشجوی دوره )
من یدونه فیلم دانلود کردم ولی یه فیلم ۱۷ دقیقه ۷۰ مگ هستش این خیلی زیاده .. اگه بخوای کل دوره را دانلود کنی یسال میگذره …
رضا حیدری(مدیریت)
کیفیت فیلم و صدا بالا هست – ولی حجم خیییلی زیاد نیست!
مجتبی عابدزاده( دانشجوی دوره )
سلام جناب حیدری ممنون از آموزش عالیتون. فقط من فایل های پروژه رو ندارم تو لیست دانلود هام!!! چطوری می تونم دسترسی داشته باشم به فایل پروژه!!؟
رضا حیدری(مدیریت)
سلام بزرگوار – سورس پروژه به تفکیک جلسات اضافه شد – پنلتون چم کنید
محمد Rj( دانشجوی دوره )
سلام. مرسی از زحماتت دوره خوبی بود یه سری ابهامات اساسی رفع شد
فقط یه سوال: واسه اینکه هم راست چین کنیم هم جاستیفای کنیم بهترین راه حل چیه؟
رضا حیدری(مدیریت)
سلام بزرگوار – شما وقتی جاستیفای میکنی راست چین هم هست دیگه! اما وقتی راست چین میکنی جاستیفای نیست
محمد Rj( دانشجوی دوره )
منظورم اینه کجا راست چین کنیم بهتره؟ توی بخش HTML یا CSS؟ و اینکه جاستیفای کردن چطوریه؟ ندیدم توی جلسات اگه توضیح دادین
رضا حیدری(مدیریت)
سلیقه ای هست، بعضی موارد راست چین بهتره بعضی موارد هم جاستیفای، من اغلب جاستیفای استفاده میکنم. (در ادامه آموزش ها استفاده میکنیم) به این صورت : text-align:justify
محمد Rj( دانشجوی دوره )
مررررسی عزیز دل
پس css توصیه میشه
بنظر منم بعنوان کم تجربه تمیزتره اینطوری. ممنون
amir mollashahi( دانشجوی دوره )
سلام من زمان لینک کردن فایل css به html مشکل دارم
رضا حیدری(مدیریت)
سلام چه مشکلی؟
amir mollashahi( دانشجوی دوره )
وقتی که به هم لینکشون میکنم و میرم تو css کد مینویسم تو html هیچ تغییری اعمال نمیشه
علی میهن دوست( دانشجوی دوره )
سلام اقای حیدری
فرا گیری الگوریتم وفلوچارت در هر زبان برنامه نویسی دیگه لازم نیست؟
به وب گفتین html و css یادبگیر
اگربخام اندروید کارکنم بازم نیاز نیست؟
رضا حیدری(مدیریت)
سلام خیر نیاز نیست
برای اندروید هم نیاز نیست
sara joulaei( دانشجوی دوره )
salam man to hamon ghesmate avalesh mondam :/ ba mac karmikonam natonestam peyda konam pasvandaei ke migido;(
عرشیا مالکی( دانشجوی دوره )
من تا الان دیدم وسطای دوره اول دیدم خیلی خوب بود واقعا
فقط یه سوال داشتم ازتون میخواستم بدونم تو این دوره و سری دوم کاملا با همچی html و css آشنا میشیم و میتونیم استارته هر سایتی رو بزنیم؟
رضا حیدری(مدیریت)
سلام بزرگوار بله کاملا
باتوجه به این که در بخش دوم پروژه عملی و حرفه ای طراحی سایت وبسافت۳ رو داریم شما با تمام چم و خم کار آشنا میشید.
امیر( دانشجوی دوره )
سلام. دوره خیلی عالی بود. یه سوال داشتم . این سایتی که ما ایجاد میکنیم لوکال هاست هست و فقط خودمون بهش دسترسی داریم. چطور باید این رو رویه یک دامنه بزاریم؟ نیازه که کدهارو به وردپرس انتقال بدیم؟!!
رضا حیدری(مدیریت)
سلام بزرگوار – توی مرحله بعدی قالب رو تبدیل به وردپرس میکنیم و بعد قالب وردپرس رو روی هاست و دامنه ای که تهیه میکنیم نصب میکنیم همه این مراحل آموزش داده میشه فقط قدم به قدم پیش برید
امیر
ممنون از پاسخ دهی سریعتون
lilac.t.gh92
سلام چرا الکی مینویسین این دوره رایگان هست؟!!!!!!!!!!!!!!!!!!! این کار از لحاظ اخلاقی و حرفه ایی اشتباهه
رضا حیدری(مدیریت)
چرا الکی بنویسیم! رایگانه دیگه بزرگوار! رایگان
امین خیراندیش خیراندیش( دانشجوی دوره )
سلام و وقت بخیر.خسته باشید استاد حیدری.با اینکه سن کمی معادل۱۴ سال دارم ولی مطالب شما را به خوبی گرفتم واقعا ممنون.
رضا حیدری(مدیریت)
احسنت به شما – با این سن کم ورود به این حوزه آینده خوبی در انتظارته
امین خیراندیش خیراندیش( دانشجوی دوره )
خیلی ممنون از لطف شما
zeinab rezaei( دانشجوی دوره )
سلام یه سوال دارم چرا من هرکاری میکنم کد رنگ ها برای من اجرا نمیشه
رضا حیدری(مدیریت)
قطعا یه جایی اشتباه نوشتید
سورس نک تک جلسات در پنل کاربری تون هست هر جلسه که مشکل داشتید به سورس اصلی رجوع کنید و ببینید چه تفاوتی بین کدهای شما و کد اصلی اون جلسه وجود داره تفاوتش رو پیدا کنید یا اگر نشد جایگزین کنید
فاطمه علائی( دانشجوی دوره )
سلام دوستان
یکی از بهترین سایت های آموزشی که بدرد بخوره همینه -حتما از مطالب گذاشته شده استفاده کنید.
با تشکر فراوان از استاد رضا حیدری
رضا حیدری(مدیریت)
سلام خانم علائی عزیز خیلی ممنونم از شما لطف دارید متشکرم
امین خیراندیش خیراندیش( دانشجوی دوره )
سلام استاد. ببخشید من میخوام ادامه دوره که css3 داخلش هست رو هم تماشا کنم ولی تو قسمت ها نبود اگه میشه راهنماییم کنید.
رضا حیدری(مدیریت)
سلام بخش دوم دوره رو از لینک زیر میتونید ثبت نام کنید :
https://websoft3.com/website-design-training-with-html-css/
اقبال هستم( دانشجوی دوره )
سلام و احترام
استاد واقعا عالی و کاربردی و بدور از حاشیه های خسته کننده تدریس کردید
من دورههای زیادی رو دیدم ولی اونقدر خسته کننده بودند که وسط راه ولشون کردم
اما تدریس شما از همون اول کاربردی هست و عالی
دست مریزاد
رضا حیدری(مدیریت)
سلام بزرگوار شما لطف دارید ممنونم
مرسی ازینکه نظر ارزشمندتون رو به اشتراک میزارید و به ما انگیزه میدید
artin najafi( دانشجوی دوره )
سلام من ۱۳ سالمه میخوام css html , php , java, رو یاد بگیرم ومیخواستم بدونم چه اینده شغلی در انتضارمه و اینکه چند زبان مختلف مشکلی ایجاد نمیکنه
رضا حیدری(مدیریت)
سلام عزیزم خیلی عالیه که در این سن به فکر یادگیری برنامه نویسی هستی و قطعا آینده روشنی در انتظارته اما بنظرم فقط روی یک زبان برنامه نویسی تمرکز کن از بین php و جاوا هم من php رو پیشنهاد میکنم چون فرصت های شغلی بیشتری با ظرفیت درآمدزایی بالاتری بهت میده. در این دوره هم html css و هم php رو بطور کامل یادمیگیری
artin najafi( دانشجوی دوره )
سلام خیلی ممنون استاد حیدری اموزشتون کاملا عالی بود فقط چند تا سوال داشتم
یک اینکه تو این دوره ما css html و php رو کامل یاد میگیریم
دوم درامد کدوم زبان های برنامه نویسی بیشتره تو ایران
سوم اینکه چجوری من یک tag div رو داخل tag img قرار بدم که وسط اون قرار بگیره
بخشید سوالاتم زیاده استاد و بازم مرسی از اموزش خوبتون به همه پیشنهاد میکنم
رضا حیدری(مدیریت)
سلام بزرگوار این صفحه ای که داخلش هستید بخش اول آموزش html هست که مقدماتیه
بخش دومش این لینکه : https://websoft3.com/website-design-training-with-html-css/
هر دو بخش رو ببینید کاملا html css رو یادمیگیرید.
دوره php مجزا هست که از این لینک میتونید توضیحاتش رو بخونید : https://websoft3.com/php-training-course/
در رابطه با سوال سومتون هم توضیحش چند خط کد و استایل میخواد که توی بخش دوم دوره html توضیح دادم
artin najafi( دانشجوی دوره )
سلام خیلی ممنون استاد حیدری اموزشتون کاملا عالی بود فقط چند تا سوال داشتم
یک اینکه تو این دوره ما css html و php رو کامل یاد میگیریم
دوم درامد کدوم زبان های برنامه نویسی بیشتره تو ایران
رضا حیدری(مدیریت)
سلام بزرگوار دوره php مجزا هست که بخش دوم آموزش html css هم بعنوان هدیه اخیرا اضافه شده این لینکش هست :
https://websoft3.com/php-training-course/
در رابطه با سوال دومتون هم عرض کنم زبان php با توجه به فرصت های شغلی متعدد با ظرفیت درامدزایی بالایی که براتون فراهم میکنه قطعا درامد خیلی بیشتری داره در مورد این موضوع توی اینستا زیاد صحبت کردیم پیج اینستامون رو فالو کنید(لینکش توی فوتر سمت چپ هست)
artin najafi( دانشجوی دوره )
خیلی ممنون استاد
حسین حسین( دانشجوی دوره )
سلام استاد
ببخشید یه سوال داشتم.
تو این دوره، Html 5 رو تدریس میکنین، یا Html 4 رو تدریس میکنید؟
رضا حیدری(مدیریت)
سلام html5
اما آموزش کامل html5 در بخش دومش هست
mahdi ahmadi( دانشجوی دوره )
سلام من از فیلم های شما خیلی خوشم اومد
javademadi91( دانشجوی دوره )
واقعا عالی بود…لذت بردم
بی اندازه ممنون از تدریس عالیتون