سبد خرید

سبد خرید خالی میباشد.

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

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

ثبت نام

465 نفر

آخرین آپدیت

نامعلوم

علاقه مندی

337 نفر

توضیحات

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

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

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

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

در این دوره یاد میگیریم

  • مفهوم‌های اصلی HTML: ساختاردهی محتوای وب با استفاده از عناصر HTML.
  • استایل‌دهی با CSS: استفاده از CSS برای قالب‌بندی و زیباسازی عناصر HTML.
  • واکنش‌پذیری وب: ایجاد صفحات وبی که به اندازه‌گیری‌ها و دستگاه‌های مختلف سازگار باشند.
  • طراحی صفحات با CSS: ایجاد صفحات واکنش‌پذیر با Flexbox و CSS Grid.
  • دسترسی‌پذیری وب: اجرای بهترین رویکردهای دسترسی‌پذیری در وب‌سایت‌ها.
  • بهترین رویکردهای توسعه وب: کنترل نسخه، سازماندهی کد، و بهینه‌سازی برای توسعه وب بهتر.

پیش نیاز های دوره:

  • آشنایی با اینترنت
  • آشنایی با نحوه عملکرد وب سایت

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

00:05:46

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

00:06:35

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

00:03:55

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

00:06:02

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

00:06:15

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

00:02:15

تگ های Heading( h1 - h6 )

00:07:54

تگ های Paragraph

00:06:05

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

00:14:10

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

00:11:35

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

00:06:05

سلکتورها در css

00:06:49

کار با inspect element در css

00:02:25

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

00:31:00

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

00:03:00

تگ های formatting در html

00:12:10

تگ های quotations در html

00:06:00

رنگ ها در html و css

00:07:00

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

00:08:20

لیست ها در html

00:08:00

کار با display در html css

00:06:30

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

00:11:30

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

00:03:00

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

00:10:45

مدیاکوئری

00:15:00

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

00:04:40

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

00:21:00

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

00:05:00

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

00:06:00

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

00:15:00

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

00:22:20

سایه ها در css

00:06:00

transform ها در css

00:14:00

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

00:10:00

فرم ها در html

00:26:00

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

00:13:45

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

00:15:00

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

00:06:25

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

00:05:30

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

00:04:40

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

00:03:40

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

00:35:00

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

00:23:20

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

00:14:20

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

00:35:00

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

00:20:00

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

00:25:00

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

00:19:40

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

00:24:00

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

00:34:00

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

00:28:30

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

00:26:00

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

00:18:20

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

00:27:00

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

00:28:00

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

00:25:40

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

00:23:20

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

00:12:00

درباره مدرس

image not found
ابوبکر حسینی
موسس و مدیرعامل

در نوجوانی، به علاقه‌مندی به طراحی و برنامه‌نویسی پیوستم و همواره تلاش نمودم تا دانش این دو حوزه را در کارهایم ترکیب کنم. علاقه‌مندی بی‌انتها به حل مسائل و یادگیری، در من تغذیه‌کنندهٔ شوق و انگیزه برای ارتقاء مهارت‌هایم بوده است. صبوری چشمگیری در حل مسائل از ویژگی‌های شخصیتی من می‌باشد که همواره در مقابل چالش‌ها پابرجا می‌مانم. در طول هفت سال گذشته، به صورت تخصصی و حرفه‌ای در زمینهٔ فرانت‌اند فعالیت داشته‌ام. سال هاست که به عنوان یک فریلنسر فعالیت می‌کنم و نمونه‌کارهای برجسته و با کیفیت را در پروندهٔ کاری‌ام به ثبت رسانده‌ام.

 

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

 

نظرات کاربران

اطلاعات شخصی شما منتشر نخواهد شد*

نظر شما

user image
محمدامین
۱۴۰۳/۵/۲۴

نه میشه آنلاین مشاهده کرد نه میشه دان کرد...راهنمایی کنید

پاسخ به کامنت محمدامین
user image
امیر حسین چچنی
۱۴۰۳/۴/۲۹

سلام فیلما باز نمیشهه

پاسخ به کامنت امیر حسین چچنی
user image
سعید نصرتی فرد
۱۴۰۳/۳/۲۵

سلام متاسفانه من امکان مشاهده و دانلود ویدئو ها را ندارم

پاسخ به کامنت سعید نصرتی فرد
user image
hydryan751
۱۴۰۲/۸/۲۰

❤️❤️🙌

پاسخ به کامنت hydryan751
user image
مهتا محمدیان
۱۴۰۲/۷/۱۱

خیلی عالی بود

پاسخ به کامنت مهتا محمدیان
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

موفق باشید

user image
باران صالحی
۱۴۰۲/۱۱/۸

سلام وقت بخیر ببخشید استاد گفتین پایان پروژه میتونیم پروژه رو دانلود کنیم میشه چه جوری باید فایل پروژه رو از کجا دانلود کنیم ؟!

پاسخ به کامنت باران صالحی
user image
مهدی خیرزاده
۱۴۰۲/۱۰/۳

سلام ببخشید فایل های پروژه پایان دوره دوره کجا میشه دانود کرد

پاسخ به کامنت مهدی خیرزاده
user image
Samane
۱۴۰۲/۰۴/۲۵

سلام وخداقوت

متاسفانه برنامه visual برای سیستم من نصب نمیشه و اخطار supportنکردن از طرف سیستم میزنه

لطفا راهنمایی کنید که چطور نصب کنم ؟

روی گوشی اندرویدهم میشه نصب کرد؟از چه سایتی؟

پاسخ به کامنت Samane
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

چه خطایی میاره براتون؟

user image
امیر صدرا سلطانکوه
۱۴۰۲/۰۳/۱۷

قسمت آخر استاد میگه بقیه مطالب رو جلسه بعدی توضیح میدم جلسه بعدی در کار نیست ؟؟!

پاسخ به کامنت امیر صدرا سلطانکوه
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

دوره کامله فقط یک پروژه مونده که اضافه بشه

user image
امیر صدرا سلطانکوه
۱۴۰۲/۰۳/۱۷

مطمئنید دورتون کامله؟!؟

پاسخ به کامنت امیر صدرا سلطانکوه
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

بله کامله و فقط یک پروژه کوچیک مونده که در آینده اضافه میشه

user image
مایده حنیفه زاده
۱۴۰۱/۱۲/۲۴

استاد پروژه دوم رو اپلود نکردید ؟

پاسخ به کامنت مایده حنیفه زاده
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

خیر هنوز آپلود نشده

user image
مایده حنیفه زاده
۱۴۰۱/۱۲/۲۳

سلام وقتتون بخیر من به پروژه پایانی این دوره رسیدم، بعد از این دوره ، دوره غول فرانت اند رو ببینم؟ یا دوره جاوا اسکریپت یا ...

پاسخ به کامنت مایده حنیفه زاده
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

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

user image
مبینا نوری
۱۴۰۱/۱۲/۰۴

با تشکر از توضیح مفید و کاملتون. امکانش نیست یک لینکی که کل فیلم ها بهم چسبیده هستن رو اپلود کنین؟

این حالت حجم و زمان زیادی رو میگیره.

پاسخ به کامنت مبینا نوری
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

در آینده این روش رو اضافه خواهیم کرد

user image
میثم اَنوَری
۱۴۰۱/۰۹/۲۴

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

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

پاسخ به کامنت میثم اَنوَری
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

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

user image
حامد کریمی
۱۴۰۱/۰۷/۰۶

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

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

بله درسته

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

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

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

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

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

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

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

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

پاسخ به کامنت حامد کریمی
user image
حامد کریمی
۱۴۰۱/۰۷/۰۳

سلام عالی بود
واقعا بدون هزینه همچین اموزشی خیلی نابه و براتون ارزوی موفقیت و سلامتی دارم
در حدی ذوق داشتم که دیروز صب دان کردم
و تا جلسه 27 پیشرفتم و کدش برا دان نبود هرچی گشتم
تصمیم گرفتم تمام مطالبی که گفتین حتی بی ستاره هارو هم یاد بگیرم
دوره واقعا عالیه
راستی یه سوال بنظرتون بخوایمبعد از این اموزشا حرفه ای کار کنیم باید چیکار کنیم
قبلا وردپرس کار بودم
اما خب تصمیم گرفتم کد نویسی شروع کنم
فعلا php
بعد asp
بعد پایتون
سپس حوزه اندروید نویسی

پاسخ به کامنت حامد کریمی
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

موفق باشید. فقط یکی از زبان های پایتون یا php رو یاد بگیرید نه همشون

user image
S.gh
۱۴۰۱/۰۶/۰۹

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

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

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

پاسخ به کامنت S.gh
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

خوشحالم که مفید واقع شده، موفق باشید

user image
zeynab_ch
۱۴۰۱/۰۵/۱۰

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

پاسخ به کامنت zeynab_ch
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

کدی که کار نمیکنه رو بفرستید

user image
yagti
۱۴۰۱/۰۵/۱۰

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

پاسخ به کامنت yagti
user image
yagti
۱۴۰۱/۰۵/۱۰

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

پاسخ به کامنت yagti
user image
morteza.salari
۱۴۰۱/۰۴/۳۱

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

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

پاسخ به کامنت morteza.salari
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

ممنونم

user image
آزاده بهارستان
۱۴۰۱/۰۴/۱۵

💚🙏

پاسخ به کامنت آزاده بهارستان
user image
سید محمد حسین موسوی
۱۴۰۰/۱۱/۲۰

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

پاسخ به کامنت سید محمد حسین موسوی
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

فکر کنم دورهرو کامل ندیدید، چون آموزش دادم

user image
سید محمد حسین موسوی
۱۴۰۰/۱۱/۱۶

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

پاسخ به کامنت سید محمد حسین موسوی
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

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

user image
احمدرضا زمانی
۱۴۰۰/۱۱/۰۸

عالیه

پاسخ به کامنت احمدرضا زمانی
user image
میلاد
۱۴۰۰/۱۱/۰۸

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

پاسخ به کامنت میلاد
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

خوشحالم که مفید واقع شده

user image
یکتا قاسمی
۱۴۰۰/۱۱/۰۲

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

پاسخ به کامنت یکتا قاسمی
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

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

user image
Fatemeh
۱۴۰۰/۱۱/۰۱

عالی و جامع

پاسخ به کامنت Fatemeh
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

تشکر

user image
Samirakhajavi
۱۴۰۰/۱۱/۰۱

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

پاسخ به کامنت Samirakhajavi
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

ممنونم لطف دارید

user image
ahvan soliemani
۱۴۰۰/۱۰/۱۲

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

پاسخ به کامنت ahvan soliemani
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۶

ممنونم سلامت باشید

user image
زهرااخوندی
۱۴۰۰/۰۹/۲۸

عالی💚🧿

پاسخ به کامنت زهرااخوندی
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۱

ممنون

user image
ANONYMOUS
۱۴۰۰/۰۹/۲۶

👌💖پرفکت

پاسخ به کامنت ANONYMOUS
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۱

ممنونم

user image
رامین پورمحمد
۱۴۰۰/۰۸/۲۸

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

پاسخ به کامنت رامین پورمحمد
user image
ابوبکر حسینی
۱۴۰۲/۷/۱۰

تشکر