آموزش رایگان html و css (پروژه محور)

قیمت دوره : رایگان

مدرس دوره : ابوبکر حسینی



تعداد قسمت ها : ۵۸



سطح دوره : مقدماتی



وضعیت :

به اتمام رسیده



تاریخ شروع : ۱۴۰۰/۰۹/۰۴



ابتدا وارد شوید

اشتراک گذاری این دوره

آموزش رایگان html و css (پروژه محور)


آموزش رایگان html و css (پروژه محور)



همه ما میدونیم که برای شروع مسیر طراحی وب سایت و بخش فرانت اند نیاز داریم که html و css رو یاد بگیریم

 ما تصمیم بر این گرفتیم این دوره جامع رو برگزار کنیم که شما با دیدن اون ، این دو زبان رو از مقدماتی تا پیشرفته یاد بگیرید

این دوره کاملا پروژه محور می باشد و در پایان هر مبحث یک مینی پروژه زده میشود و در انتهای دوره یک پروژه کامل را با شما عزیزان طراحی میکنیم تا کاملا به مباحث این دوره مسلط شوید

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

 

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


۱ معرفی دوره و آشنایی با سرفصل ها

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲ مسیر طراحی وب با چاشنی تفاوت فرانت اند و بک اند

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳ فراهم کردن پیش نیاز ها برای شروع به کار

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴ ایجاد اولین فایل و نوشتن کدهای اولیه HTML

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵ بررسی تگ های title و meta در تگ head

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۶ افزایش سرعت کد زدن در visual studio code

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۷ تگ های Heading( h1 - h6 )

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۸ تگ های Paragraph

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۹ شروع کار با css (کار با attribute ها ؛ شیوه های فراخوانی css به پروژه)

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۰ بررسی تگ های div و img و a و button و استایل های مربوطه

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۱ اتریبیوت های class و id

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۲ سلکتورها در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۳ کار با inspect element در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۴ اولین مینی پروژه html css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۵ کامنت گذاری در html

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۶ تگ های formatting در html

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۷ تگ های quotations در html

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۸ رنگ ها در html و css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۱۹ آموزش جدول ها در html,css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۰ لیست ها در html

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۱ کار با display در html css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۲ معرفی کامل تگ iframe

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۳ بررسی کامل نحوه فراخوانی فایل ها و لینک ها به پروژه (File path)

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۴ تگ ها معنادار در html

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۵ مدیاکوئری

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۶ وسط چین کردن آبجکت ها و متون در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۷ بخش اول از مینی پروژه دوم (طراحی منو با html css)

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۸ ادامه آموزش برخی از کلاس های pseudo

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۲۹ ترنزیشن ها در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۰ بررسی کامل after و before با چاشنی یادگیری پوزیشن ها

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۱ بخش دوم از مینی پروژه دوم (طراحی منو با html css)

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۲ سایه ها در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۳ transform ها در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۴ مینی پروژه سوم - ایجاد هاور های جذاب با before و after

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۵ فرم ها در html

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۶ مباحث پیشرفته background در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۷ انیمیشن ها در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۸ قرار دادن ویدیو و صدا در وب سایت با html

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۳۹ بررسی کامل meta تگ ها

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۰ نحوه تعریف متغیر ها در css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۱ معرفی پروژه های پایانی دوره جامع html css

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۲ پروژه پایانی 1 - جلسه اول

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۳ پروژه پایانی 1 - جلسه دوم بخش 1

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۴ پروژه پایانی 1 - جلسه دوم بخش 2

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۵ پروژه پایانی 1 - جلسه سوم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۶ پروژه پایانی 1 - جلسه چهارم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۷ پروژه پایانی 1 - جلسه پنجم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۸ پروژه پایانی 1 - جلسه ششم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۴۹ پروژه پایانی 1 - جلسه هفتم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۰ پروژه پایانی 1 - جلسه هشتم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۱ پروژه پایانی 1 - جلسه نهم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۲ پروژه پایانی 1 - جلسه دهم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۳ پروژه پایانی 1 - جلسه یازدهم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۴ پروژه پایانی 1 - جلسه دوازدهم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۵ پروژه پایانی 1 - جلسه سیزدهم

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۶ پروژه پایانی 1 - جلسه 14

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۷ پروژه پایانی 1 - جلسه 15

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید


۵۸ پروژه پایانی 1 - جلسه 16

برای مشاهده این ویدئو بایدوارد حساب کاربری خود شوید

در صورتی که سوالی درباره دوره دارید لطفا آن را در بخش پرسش و پاسخ بپرسید



دیدگاه خود را ثبت کنید
برای ثبت دیدگاه باید وارد حساب کاربری خود شوید !

حامد کریمی

|

۱۴۰۱/۰۷/۰۶

 با سلام و وقت بخیر مجدد

خواهش میکنم این چه حرفیه کارتون درسته از پاسختون ممنونم

بله درسته

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

واقعا خوب توضیح میدید

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

یسوال دیگه ببخشید بنظرتون الان بشین یاد بگیرم کل مباحثو بعد دنبال پروژه  امزشی برم

مثلا سایتی باشه که پروژه داشتع باشه عالیه

پیشنهاد شما چیه استاد؟

البته تنها مشکلی که داشتم تو بعضی جاها از praimarycolor ligtcolor

استفادع شدو من زدم برا من اوکی نشد ایمپورتنت زدم ولی رنگ نگرفت برا همین از کدای رنگ استفاده کردم

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۱/۰۷/۰۷

برای انجام پروژه های بیشتر توی دوره هم عرض کردم، شما میتونید برید وب سایت هایی مثل یوتیوب و برای ساخت وب سایت با اون زبانی که مد نظرتون هست سرچ کنید

مثلا:

How to make a website template with html and css

حامد کریمی

|

۱۴۰۱/۰۷/۰۳

سلام عالی بود

واقعا بدون هزینه همچین اموزشی خیلی نابه و براتون ارزوی موفقیت و سلامتی دارم

در حدی ذوق داشتم که دیروز صب دان کردم

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

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

دوره واقعا عالیه

راستی یه سوال بنظرتون بخوایمبعد از این اموزشا حرفه ای کار کنیم باید چیکار کنیم

قبلا وردپرس کار بودم

اما خب تصمیم گرفتم کد نویسی شروع کنم

فعلا php

بعد asp

بعد پایتون

سپس حوزه اندروید نویسی

ا

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۱/۰۷/۰۵

سلام خوشحالم که راضی بودید و به علمتون اضافه شده

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

پ.ن : اگه گفتم آپلود میکنم و نکردم معذرت میخوام مشکل از بنده بوده

بعد از این آموزش ها منظورتون بازار کار بود که چطور پروژه دریافت کنید یا مراحل بعدی و زبان هایی که باید یاد بگیرید؟

S.gh

|

۱۴۰۱/۰۶/۰۹

سلام استاد خیلی ممنون از دوره خوب و جامع شما

مطالب هم مفید بود هم تو بازه های زمانی کوتاه تدریس میشد

اصلا خسته کننده نبود🙏🙏​​​​​​​​​​​

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۱/۰۶/۰۹

درود

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

موفق باشید

yagti

|

۱۴۰۱/۰۵/۱۰

این کد درست نیست استاد چطور میتونم ارتباط داشته باشم باهاتون

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۱/۰۵/۱۶

درود

کدوم کد؟

zeynab_ch

|

۱۴۰۱/۰۵/۱۰

چرا باز نمیکنه؟

yagti

|

۱۴۰۱/۰۵/۱۰

نمیدونم والله

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۱/۰۵/۱۶

درود

چه چیزی باز نمیشه؟

yagti

|

۱۴۰۱/۰۵/۱۰

سلام استادمن با berakestکار میکردم  ولی الان ویژال کد نصف کردم کد های شمارم اونجا کار کردم ولی اجرا نشد تو ویژال خطای locallhost8080میاره الان دوروه الافم چیکار کنم

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۱/۰۵/۱۶

سلام افزونه لایو سرور رو نصب کردین؟

 

morteza.salari

|

۱۴۰۱/۰۴/۳۱

*****خلاصه ، مختصر و مفید******

کارتون عالیه ، خداقوت

آزاده بهارستان

|

۱۴۰۱/۰۴/۱۵

💚🙏🌹🌲

سید محمد حسین موسوی

|

۱۴۰۰/۱۱/۲۰

استاد خسته نباشید

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

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۱۱/۲۰

سلامت باشید همراه گرامی

بله چرا که نه توی پروژه های پایانی حتما آموزش دادم حتی دو جلسه ضبط شده براش

حتی بدون جاواسکریپت رویداد هارو کارکردیم 

خیالتون راحت باشه

سید محمد حسین موسوی

|

۱۴۰۰/۱۱/۱۶

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

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۱۱/۱۶

سلام جناب وقتتون بخیر

بله میدونم این مشکل رو یک زمانی بنده خودمم داشتم

و تنها دلیلش هم اینه که مسیر و هدفی برای خودتون مشخص نکردید!

هدف بزرگ شما طراحی سایت و سایر حوزه های برنامه نویسی ؛

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

توصیه من به شما مسیریه که توی ویدیو همین دوره توضیح دادم

و در کنارش هم برنامه هایی که به طراحان وب سایت کمک میکنن رو داشته باشید

نرم افزارهای قدرتمندی مثل فیگما

و اینکه نیازی نیست شما انقدر هزینه کنید

بسیاری از کانال های یوتیوب هستند که میان به شما طراحی های بسیار جذاب رو یاد میدن

 

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

و در آخر هم یک سری راه و روش یاد میدم که بسیار موثره در طراحی وب سایت

میلاد

|

۱۴۰۰/۱۱/۰۸

خیلی خیلی خیلی عالیه متشکرم 🥰

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۱۱/۰۹

خرسندم که راضی هستید موفق و پایدار باشید

احمدرضا زمانی

|

۱۴۰۰/۱۱/۰۸

عالیه

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۱۱/۰۸

موفق باشید

یکتا قاسمی

|

۱۴۰۰/۱۱/۰۲

سلام

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

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۱۱/۰۳

لطف دارید به من ممنون برای دیدگاهتون 

موفق باشید

Samirakhajavi

|

۱۴۰۰/۱۱/۰۱

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

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۱۱/۰۱

خیلی ممنون برای دیدگاهتون موفق باشید

Fatemeh

|

۱۴۰۰/۱۱/۰۱

عالی  و جامع

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۱۱/۰۱

موفق باشید

ahvan soliemani

|

۱۴۰۰/۱۰/۱۲

خیلی عالی استاد عالی توضیح میدید موفق باشید.

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۱۰/۱۳

ممنونم لطف دارید شماهم موفق باشید

زهرااخوندی

|

۱۴۰۰/۰۹/۲۸

عالی💚🧿

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۰۹/۲۸

❤️ممنون

ANONYMOUS

|

۱۴۰۰/۰۹/۲۶

👌💖پرفکت

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۰۹/۲۷

خرسندم که مفید واقع شده🙏🏼

رامین‌ پورمحمد

|

۱۴۰۰/۰۸/۲۸

بسیار عالی استاد حسینی ✌️

ابوبکر حسینی (مدرس دوره)

|

۱۴۰۰/۰۸/۲۸

🙏🏼تشکر