آموزش HTML و CSS (یادگیری طراحی قالب واکنشگرا و ریسپانسیو)
برای ورود به حوزه طراحی سایت، اولین چیزهایی که باید یاد بگیرید زبانهای HTML و CSS است. در این دوره آموزش طراحی سایت، شما بدون هیچ پیشنیازی و حتی از زیر صفر، میتوانید یادگیری را آغاز کنید. زبانهای اچتیامال و سیاساس، دو زبان از سه زبان ضروری فرانتاند وبسایت هستند. با این که جزو زبانهای برنامهنویسی نیستند و زبان نشانهگذاری به حساب میآیند، اما بدون این دو، هیچ سایتی قابل نمایش و استفاده نیست.
معرفی زبان HTML
زبان نشانهگذاری HTML به ما کمک میکند تا مثل نرمافزار Office Word، ماهیت تکتک عناصر صفحه را مشخص کنیم. یعنی متن مورد نظر ما عنوان هست یا پاراگراف؟ همچنین برای بخشبندی اجزای صفحه و قطعهقطعه کردن محتوا استفاده میشود.
معرفی زبان CSS
از طرف دیگر، با CSS میتوانیم به صفحات خود، رنگ و لعاب بدهیم. رنگها، فونتها، اندازهها و حتی چیدمان و نحوه قرارگیری عناصر در کنار هم، بر عهده سیاساس است.
آموزش پروژه محور HTML و CSS
در این دوره آموزشی کاملاً پروژهمحور، در حین آشنایی با این دو زبان، قدم به قدم و به صورت عملی، پیادهسازی یک قالب دیزاین شده را برای انواع صفحه نمایش (دسکتاپ، تبلت و موبایل) را میآموزید.
تعریف واکنشگرایی
واکنشگرا یا ریسپانسیو (responsive) به قالب وبسایتی گفته میشود که در تمام دستگاهها نظیر کامپیوتر رومیزی (desktop)، لپتاپ، تبلت و موبایلهای هوشمند، نمایش درستی داشته باشد. چیزی از محتوا از صفحه بیرون نزند و در موبایل نیاز به زوم کردن کاربر در صفحه نداشته باشد.
این دوره مناسب کیست؟
این دوره برای همه علاقهمندان به حوزه طراحی سایت مناسب است. نیاز به هیچ پیشنیاز و حتی دانش کامپیوتری ندارد. مطالب نه تنها از صفر که از زیر صفر به شما آموزش داده میشود و تا انتهای دوره، به تسلط بسیار خوبی در زمینه برنامهنویسی فرانتاند خواهید رسید.
سؤالات متداول
این دوره به هیچ عنوان به پیشنیازی احتیاج ندارد و مناسب همه افرادی هست که دوست دارند، یکبار برای همیشه، HTML و CSS را یاد بگیرند.
بله! با تهیه این دوره، مادامالعمر، هر آپدیتی که منتشر بشود را رایگان دریافت خواهید کرد.
بعد از گذراندن این دوره و به شرط انجام تمرین، این توانایی را خواهید داشت که هر طرحی را که به شما تحویل میدهند، به صورت کدنویسی شده در بیاورید.
این دوره، به صورت ویدیوهای ضبط شده به شما ارائه میشود که میتوانید بعد از خرید، به صورت همیشگی از آن استفاده کنید.
خیر! شما بعد از تهیه این دوره، به صورت مادامالعمر به فایلهای آموزشی دسترسی خواهید داشت. به علاوه این که پشتیبانی این دوره هم همیشگیست و بعد از خرید و ورود به کانال خصوصی پشتیبانی، میتوانید همیشه از پشتیبانی اختصاصی دوره استفاده کنید.
بعد از تهیه کردن دوره، از قسمت پشتیبانی که در پایین این صفحه قرار داده شده است، وارد کانال خصوصی تلگرام شوید و از آن به بعد میتوانید با پشتیبان دوره از طریق تلگرام در تماس باشید.
شما بدون محدودیت، بعد از تهیه دوره میتوانید از طریق لینکی که گذاشته شده است به گروه پشتیبانی دسترسی داشته باشید.
در این دوره ما فقط زبانهای HTML و CSS را کار میکنیم. زبان برنامهنویسی JavaScript که بخش مهم حوزه فرانتاند هست، در این دوره آموزش داده نمیشود. برای این که یک برنامهنویس فرانتاند متخصص بشوید، هر سه زبان را باید به خوبی یاد بگیرید و به میزان کافی، تمرین عملی انجام بدهید.
نحوه استفاده از کدهای آموزش
در بخش سرفصلها در قسمت فایلهای طراحی و کدهای آموزش، همه کدها و فایلهای مورد نیازی که در این دوره آموزش داده شدهاست، قرار گرفته است که بعد از تهیه دوره میتوانید آنها را دانلود کنید. برای هر فایل ویدیویی یک پوشه ساخته شده است که درون آن دو پوشه start و end هست. پوشه start پوشه آغازین کدنویسیست که میتوانید از روی آن شروع به کدنویسی همراه با آموزش کنید و پوشه end وضعیت نهایی کد در هر قسمت آموزش ویدیوییست.
مزایای دوره آموزش معجون HTML و CSS
![](https://devedoping.ir/wp-content/uploads/2021/10/wallet.png)
ضمانت سود ۱۰ تا ۱۰۰ برابر مبلغی که در این دوره روی خودتان سرمایهگذاری میکنید!
![پشتیبانی حرفهای برنامهنویسی](https://devedoping.ir/wp-content/uploads/2022/01/information.png)
پشتیبانی همیشگی از این دوره در گروه خصوصی تلگرام جهت سؤال و رفع اشکال.
سرفصلها
بعد از تهیه دوره، محتوای سرفصلها در نرمافزار اسپاتپلیر لیست شده و قابلیت استفاده خواهد داشت.
![](https://devedoping.ir/wp-content/uploads/2022/01/online-learning.png)
ویدیوی رایگان معرفی دوره
معرفی دوره طراحی سایت واکنشگرا ویدئو
![](https://devedoping.ir/wp-content/uploads/2022/09/cooking.png)
آشنایی با مقدمات و پیشنیازهای ورود به برنامهنویسی فرانتاند
قسمت ۱: معرفی توسعه وب، فرانتاند و بکاند چیست؟ ویدئو
قسمت ۲: تعریف UI و UX ویدئو
قسمت ۳: اینترنت چگونه کار میکند؟ ویدئو
آنچه باید قبل از شروع برنامهنویسی وب بدانید
قسمت ۴: سیستم مورد نیاز برنامهنویسی وب ویدئو
سیستم حداقلی و پیشنهادی
قسمت ۵: محیط توسعه نرمافزار ویدئو
معرفی IDE و Code Editor
قسمت ۶: مرورگرها ویدئو
معرفی و مقایسه مرورگرها
قسمت ۷: آشنایی با نرمافزارهای طراحی ویدئو
آنچه به عنوان برنامهنویس فرانتاند باید بدانیم
![](https://devedoping.ir/wp-content/uploads/2022/01/typing.png)
آشنایی با HTML و CSS مقدماتی
قسمت ۸: HTML چیست؟ ویدئو
اولین برخورد با HTML
قسمت ۹: مبانی HTML ویدئو
قسمت ۱۰: تگهای پایه HTML ویدئو
هدینگ، پاراگراف، لیست، دکمه، لینک، تصویر، انواع آدرسدهی
قسمت ۱۱: درستنویسی HTML ویدئو
تفاوت HTML و XHTML
قسمت ۱۲: CSS چیست؟ ویدئو
سینتکس CSS: انتخابگر، ویژگی و مقدار
قسمت ۱۳: نحوه اضافه کردن CSS به HTML ویدئو
استایلدهی به بخش داستان ما
قسمت ۱۴: فرمتدهی متن ویدئو
کدهای HTML و CSS برای بازی با حروف و متن
قسمت ۱۵: فرم و ورودی ویدئو
آشنایی با فرمهای دریافت اطلاعات از کاربر
قسمت ۱۶: کلاس و آیدی ویدئو
مقدمه ورود به CSS تخصصی
قسمت ۱۷: مدل جعبهای ویدئو
نگاه box-model در css به المنتها
قسمت ۱۸: انواع انتخابگرها ویدئو
تسلط روی انتخابگرهای CSS
![](https://devedoping.ir/wp-content/uploads/2022/09/web-development.png)
پیادهسازی اجزای مستقل یک سایت
قسمت ۱۹: فونت ویدئو
استفاده از فونت سفارشی در سایت
قسمت ۲۰: رنگ و پسزمینه در CSS ویدئو
شناخت رنگ و قابلیت پسزمینه در CSS
قسمت ۲۱: پیادهسازی بخش داستان ما، ثبتنام و هدر سایت ویدئو
قسمت ۲۲: پیادهسازی ناوبری ویدئو
پیادهسازی بخش منوی سایت
![](https://devedoping.ir/wp-content/uploads/2022/09/layout.png)
تکمیل پیادهسازی سایت در اسکرین دسکتاپ
قسمت ۲۳: پیادهسازی بخش تعرفهها ویدئو
جدولها، پیادهسازی تمرینی بخش تعرفهها
قسمت ۲۴: چیدمان Flexbox ویدئو
چیدمان تکبعدی با flexbox
قسمت ۲۵: استفاده از فونتآیکون ویدئو
پیادهسازی بخش درباره آژانس
قسمت ۲۶:استفاده از شمارنده CSS ویدئو
پیادهسازی بخش سرویسها
قسمت ۲۷: چیدمان Grid ویدئو
چیدمان دو بعدی با grid در css
قسمت ۲۸: پیادهسازی بخش نمونهکارها ویدئو
تمرین عملی Grid و چند مبحث تکمیلی
قسمت ۲۹: پیادهسازی بخش تیم ما ویدئو
کار با animation در css
قسمت ۳۰: تکمیل بخش تعرفهها ویدئو
کار با transform در css
قسمت ۳۱: پیادهسازی فوتر ویدئو
تکمیل بخشهای باقیمانده دیزاین Desktop
![](https://devedoping.ir/wp-content/uploads/2022/09/responsive-design.png)
پیادهسازی واکنشگرا برای تبلت و موبایل
قسمت ۳۲: ترازبندی پیشرفته ویدئو
نکات تکمیلی در ترازبندی المنتها
قسمت ۳۳: واکنشگرایی بخش اول ویدئو
واحدهای اندازهگیری
قسمت ۳۳: واکنشگرایی بخش دوم ویدئو
امکانات مرورگر
قسمت ۳۳: واکنشگرایی بخش سوم ویدئو
واکنشگرایی در HTML
قسمت ۳۳: واکنشگرایی بخش چهارم ویدئو
مدیا کوئری
قسمت ۳۴: واکنشگرایی هدر ویدئو
واکنشگرایی بخش هدر
قسمت ۳۵: واکنشگرایی درباره آژانس ویدئو
واکنشگرایی بخش درباره آژانس
قسمت ۳۷: واکنشگرایی نمونهکارها ویدئو
واکنشگرایی بخش نمونهکارها
قسمت ۳۸: واکنشگرایی تیم ما ویدئو
واکنشگرایی بخش تیم ما
قسمت ۳۹: واکنشگرایی داستان ما - بخش اول ویدئو
واکنشگرایی بخش داستان ما
قسمت ۳۹: واکنشگرایی داستان ما - بخش دوم ویدئو
واکنشگرایی بخش داستان ما
قسمت ۴۰: واکنشگرایی تعرفهها ویدئو
واکنشگرایی بخش تعرفهها
قسمت ۴۱: واکنشگرایی ثبت نام ویدئو
واکنشگرایی بخش ثبت نام
قسمت ۴۲: واکنشگرایی فوتر و منو ویدئو
واکنشگرایی فوتر و منو + کمی جاوااسکریپت
قسمت ۴۳: تست واقعی سایت در موبایل ویدئو
باز کردن سایتی که ساختیم در موبایل خودمان
![](https://devedoping.ir/wp-content/uploads/2022/09/first-aid-box.png)
نکات و مباحث تکمیلی
در حال ضبط ویدئو
این فصل در حال ضبط و آمادهسازی میباشد.
کلیه فایلها و کدهای آموزش را از این قسمت دانلود کنید.
فایل دیزاین فیگما فایل های ضمیمه
فایل زیپشده طراحی پروژه
فونتهای پروژه فایل های ضمیمه
فایل زیپشده فونتآسوم و فونت ساحل
کدهای فصل دوم فایل های ضمیمه
همه قسمتها در یک فایل زیپشده
کدهای فصل سوم فایل های ضمیمه
همه قسمتها در یک فایل زیپشده
کدهای فصل چهارم فایل های ضمیمه
همه قسمتها در یک فایل زیپشده
![](https://devedoping.ir/wp-content/uploads/2022/01/padlock.png)
در صورتی که کد لایسنس را بعد از خرید کپی نکردید، این بخش را مشاهده کنید.
لینک لایسنس ویدئو
کلیک کنید تا باز شود
جهت دریافت پشتیبانی دوره، حتماً بعد از خرید، عضو گروه تلگرام زیر شوید.
گروه خصوصی پشتیبانی
جهت ورود به گروه روی آیکون سبز کلیک کنید.
دوره های مرتبط
آموزش Flexbox و Grid (دوره آموزشی کپسول فلکس و گرید)
آموزش پروژهمحور flexbox و grid یادگیری مفاهیم مهم زبان css برای ساخت layout و چیدمان صفحات وب سایت.
منتورینگ فرانت اند – سطح مبتدی و متوسط
دوره مربیمحور منتورینگ فرانتاند با ظرفیت محدود در کانال خصوصی تلگرام برگزار میشود و به دانشجویان امکان رفع اشکال و چک کردن درستی کدنویسی را میدهد.
نظرات
قوانین ثبت دیدگاه
580,000 تومان
مدیر(مدیریت)
ممنون پدر عزیزم…