طراحی سایت با HTML و CSS
ساختار و ظاهر صفحه وب را از اولین تگ تا یک سایت هفتصفحهای کامل و واکنشگرا با فلکس‌باکس و گرید میسازید.
- جلسات
- ۱۵ جلسه
- برگزاری
- حضوری، هر دو شعبه
- سطح
- مبتدی
- پیش‌نیاز
- آشنایی اولیه با کار با کامپیوتر
- به مشاوره احتیاج دارید؟
هر کسب‌وکاری امروز یک سایت می‌خواهد و کسی باید آن را بسازد. در کادوس طراحی سایت را از صفر یاد می‌گیرید، از هر کدام از دو مسیری که به هدفتان نزدیک‌تر است: کدنویسی برای طراح و برنامهنویس وب شدن، یا وردپرس برای ساختن سریع سایت و فروشگاه بدون حتی یک خط کد. هر دو مسیر با یک سایت واقعی برای نمونه‌کارتان تمام میشوند.
<section class="card"> <h4>Sabzineh Cafe</h4> <p>Fresh coffee in Rasht</p> <button id="order">Order</button> <output id="count">0</output> </section>
Fresh coffee in Rasht
روی دکمه Order کلیک کنید!طراحی سایت یعنی ساختن صفحه‌هایی که در مرورگر باز میشوند: از یک صفحه معرفی ساده تا فروشگاه اینترنتی با سبد خرید و درگاه پرداخت. به بخشی از سایت که کاربر میبیند و با آن کار میکند فرانتاند می‌گویند و با سه زبان HTML، CSS و جاوااسکریپت ساخته میشود. بخشی که پشت صحنه اطلاعات را ذخیره میکند، کاربر را وارد میکند و سفارش را ثبت میکند بکاند است و با زبانی مثل PHP یا پایتون و یک پایگاه داده نوشته میشود.
راه سوم، سیستم مدیریت محتوا (CMS) است. وردپرس محبوب‌ترین CMS دنیاست و بخش بزرگی از سایت‌های اینترنت با آن ساخته شده‌اند؛ همه این لایه‌ها را آماده دارد و شما با پیشخوان، قالب، افزونه و صفحهساز المنتور سایت را میسازید. به همین دلیل در کادوس طراحی سایت را از دو مسیر آموزش می‌دهیم و شما مسیری را انتخاب می‌کنید که به هدفتان می‌رسد.
اگر هنوز بین طراحی سایت، برنامهنویسی پایتون یا مسیرهای دیگر مردد هستید، صفحه آموزش برنامه نویسی در رشت همه مسیرهای کادوس را کنار هم نشان میدهد.
چه بخواهید شغلتان را عوض کنید، چه سایت کسبوکار خودتان را بسازید یا فقط اولین قدم برنامهنویسی را بردارید، طراحی سایت یکی از عملی‌ترین مهارتهایی است که میشود یاد گرفت.
از مطب و رستوران تا فروشگاه و شرکت؛ مشتری اول در گوگل جست‌وجو میکند و سایت ویترین آنلاین هر کسبوکار است.
هر خط HTML یا CSS که می‌نویسید، با یک F5 در مرورگر دیده میشود؛ برای همین طراحی وب انگیزه‌بخش‌ترین شروع برنامهنویسی است.
طراحی سایت به شهر محل زندگی وابسته نیست؛ پروژه را از رشت برای مشتری در هر جای ایران یا خارج انجام میدهید.
صاحب کسبوکار که وردپرس بلد است، برای هر تغییر کوچک در سایت یا فروشگاهش منتظر طراح نمی‌ماند.
HTML و CSS پایه جاوااسکریپت، ری‌اکت، PHP و جنگو است؛ از طراحی وب به هر شاخه برنامهنویسی میشود رفت.
یک مرورگر و ویرایشگر رایگان VS Code کافی است؛ HTML و CSS حتی بدون اینترنت هم کار می‌کنند.
سؤال اول بیشتر کسانی که به مشاوره کادوس می‌آیند همین است. جواب درست به هدف شما بستگی دارد؛ این جدول دو مسیر را صادقانه کنار هم می‌گذارد.
| ویژگی | کدنویسی (HTML، CSS، JS و بکاند) | وردپرس (بدون کدنویسی) |
|---|---|---|
| مناسب چه کسی؟ | کسی که می‌خواهد طراح فرانتاند یا برنامهنویس وب شود | صاحب کسبوکار، فریلنسر تازهکار، مدیر محتوا |
| اولین سایت | بعد از دوره HTML و CSS (سایت هفتصفحهای) | در همان ۱۰ جلسه وردپرس مقدماتی (فروشگاه کامل) |
| آزادی در طراحی | هر چیزی که بخواهید | در حد قالب و افزونه‌ها |
| سرعت ساخت | زمان‌برتر | خیلی سریع |
| سایت‌های مناسب | سامانه اختصاصی، پنل، اپلیکیشن تحت وب، سایت پرترافیک | سایت شرکتی، خبری، آموزشی، شخصی و فروشگاهی |
| شغل‌ها | فرانتاند، بکاند، فول‌استک | طراح سایت وردپرسی، مدیر سایت، کارشناس سئو |
| دوره در کادوس | HTML و CSS ← جاوااسکریپت ← PHP یا جنگو | آموزش وردپرس: مقدماتی ← پیشرفته ← سئو |
بسیاری از طراحان حرفهای هر دو را بلدند: با وردپرس سریع سایت تحویل می‌دهند و با HTML، CSS و کمی کد آن را دقیقاً شبیه طرح مشتری می‌کنند. مقایسه کامل‌تر را در مقاله وردپرس یا برنامهنویسی اختصاصی؟ بخوانید.
هر دو مسیر بدون پیش‌نیاز برنامهنویسی شروع میشوند و پله‌به‌پله جلو می‌روند. دوره‌ها را به ترتیب شماره بگذرانید؛ پیش‌نیاز هر دوره همان چیزی است که در دوره قبلی یاد گرفته‌اید.
برای طراح فرانتاند و برنامهنویس وب شدن
ساختار و ظاهر صفحه وب را از اولین تگ تا یک سایت هفتصفحهای کامل و واکنشگرا با فلکس‌باکس و گرید میسازید.
صفحه‌ها را زنده می‌کنید: رویداد و کلیک، اعتبارسنجی فرم، رابط پویا و گرفتن داده از سرور بدون رفرش صفحه.
سمت سرور سایت را میسازید: پایگاه داده MySQL، ثبتنام و ورود کاربران، فرم‌ها و یک پنل مدیریت واقعی.
به‌جای PHP، بکاند را با پایتون هم میشود ساخت: آموزش پایتون ← جنگو (Django) یا FastAPI. برای طراحی ظاهر سایت هم فتوشاپ و ایلوستریتور کمک بزرگی است.
برای ساخت سریع سایت و فروشگاه، بدون کدنویسی
بدون نوشتن حتی یک خط کد، فروشگاه «سبزینه» را روی دامنه و هاست خودتان میسازید و جلسه دهم تحویلش میدهید.
قالب اختصاصی، فروشگاه کامل، درگاه پرداخت، پنل عضویت، امنیت و سرعت؛ برای گرفتن پروژه‌های جدی‌تر.
سایتی که بازدیدکننده ندارد دیده نمیشود: کلمه کلیدی، محتوا، لینک‌سازی و ابزارهای گوگل برای سایت خودتان یا مشتری.
سئوی فنی، Core Web Vitals، معماری سایت، بک‌لینک و سئوی ووکامرس برای کلمه‌های سخت و سایت‌های رقابتی.
همه جلسه‌های وردپرس، پروژه سبزینه، افزونه‌ها و جدول ارزیابی پایانی را در صفحه آموزش وردپرس در رشت ببینید. سایت ساختید و حالا مشتری میخواهید؟ بعد از سئو، دوره دیجیتال مارکتینگ کادوس تبلیغات و شبکه‌های اجتماعی را هم اضافه میکند.
سرفصل‌های دوره HTML و CSS و وردپرس مقدماتی جلسه‌به‌جلسه و به همان ترتیب کلاس‌اند و هر جلسه یک فصل از کتاب دوره دارد؛ ترتیب از ساده به دشوار است و هیچ جلسهای از مطلبی استفاده نمیکند که قبلاً آموزش داده نشده باشد.
۱۵ جلسه · حضوری، هر دو شعبه
صفحه دوره و ثبتنامطبق برنامه ترم · حضوری، هر دو شعبه
صفحه دوره و ثبتنامطبق برنامه ترم · حضوری، هر دو شعبه
صفحه دوره و ثبتنام۱۰ جلسه دوساعته (۲۰ ساعت) · حضوری، شعبه لاکانی
صفحه دوره و ثبتنام۲۶ جلسه ۹۰ دقیقه‌ای (۳۹ ساعت) · حضوری در رشت
صفحه دوره و ثبتنام۱۶ جلسه ۹۰ دقیقه‌ای (۲۴ ساعت) · حضوری، هر دو شعبه
صفحه دوره و ثبتنام۲۰ جلسه ۹۰ دقیقه‌ای (۳۰ ساعت) · حضوری در رشت
صفحه دوره و ثبتنامکتاب ۱۶ فصلی دوره HTML و CSS کادوس آنلاین و رایگان است: فصل صفر توضیح میدهد وب چطور کار میکند و فصل‌های یک تا پانزده دقیقاً همان جلسه‌های کلاس‌اند. هر فصل موضوع را توضیح میدهد، کدها را خط به خط بررسی میکند و با جدول جمع‌بندی و تمرین عملی تمام میشود. نمونه سؤال‌های تستی آزمون فنی و حرفهای هم کنار کتاب است.
روش کار در کلاس و کتاب یکی است: بنویس، ذخیره کن، تازه کن. همه نمونه‌ها بدون اینترنت هم کار می‌کنند؛ فقط یک مرورگر و یک ویرایشگر متن لازم است.
در جلسه چهاردهم یک سایت کامل هفتصفحهای و واکنشگرا را در ده گام میسازید؛ هر گام همه چیز گام قبل را دارد به‌علاوه یک صفحه تازه، تا در پایان یک نمونهکار واقعی تحویل بدهید.
از جلسه دوم وردپرس مقدماتی، فروشگاه کوچک گل و گلدان «سبزینه» را قدم‌به‌قدم روی دامنه و هاست خودتان میسازید: صفحه اصلی با المنتور، ووکامرس فارسی، ده محصول، پرداخت و ارسال، سئو و کش؛ و در جلسه دهم سایتتان ارزیابی میشود.
طراحی سایت یک مهارت با چند مسیر شغلی است. هر کارت مهارت لازم و دوره متناظرش در کادوس را نشان میدهد.
تبدیل طرح گرافیکی به صفحه وب واکنشگرا و تعاملی؛ پرتقاضاترین نقطه ورود به برنامهنویسی وب.
ساخت سایت شرکتی و فروشگاهی برای کسب‌وکارها؛ رایج‌ترین پروژه‌های فریلنس طراحی سایت.
پایگاه داده، ورود کاربران، پنل مدیریت و API؛ منطق پشت صحنه سایت‌ها و سامانه‌ها.
بالا بردن سایت در نتایج گوگل با محتوا، ساختار و لینک؛ هر سایتی بعد از ساخته شدن به آن نیاز دارد.
به‌روز نگه داشتن سایت، فروشگاه و محتوا در شرکتها و فروشگاه‌های اینترنتی.
فروشگاه آنلاین یا سایت معرفی برای کار خودتان، بدون وابستگی به طراح برای هر تغییر کوچک.
از رشت، برای همه جا. بسیاری از طراحان سایت گیلانی برای کسبوکارهای محلی یا به‌صورت دورکاری برای شرکتها و مشتری‌های شهرهای دیگر کار می‌کنند. چیزی که مشتری و کارفرما میبیند نمونهکار شماست، نه فقط مدرک؛ به همین دلیل هر دو مسیر طراحی سایت کادوس با یک سایت واقعی تمام میشوند. درباره مسیر بدون مدرک دانشگاهی هم این مقاله را بخوانید یا از مشاوره رایگان مسیر شغلی کمک بگیرید.
هر جمله‌ای که درباره شما صدق میکند را انتخاب کنید؛ مسیر پیشنهادی همان لحظه ساخته میشود. پیش‌نیاز دورههای شروع فقط آشنایی اولیه با کار با کامپیوتر است؛ اگر آن را هم ندارید، از دوره ICDL شروع کنید.
دورههای طراحی سایت کادوس حضوری و کارگاهی در رشت برگزار میشوند: هر مبحث را همان لحظه روی سیستم خودتان انجام میدهید و اشکالتان سر کلاس رفع میشود.
به‌جای مقایسه فقط عدد شهریه، این چهار عامل را مقایسه کنید. شهریه به‌روز و شرایط پرداخت هر دوره در صفحه همان دوره آمده است.
VS Codeویرایشگر کدChrome DevToolsابزار توسعه مرورگرBootstrapفریم‌ورک CSSXAMPPوردپرس روی کامپیوترDirectAdminمدیریت هاستElementorصفحهسازWooCommerceفروشگاه‌سازYoast SEOسئوی وردپرسSearch Consoleگزارش گوگلاینها تصاویر واقعی کارگاه رایگان «سایت خودت رو بساز» و سایت کامپیوتر کادوس در رشت است، نه عکس‌های تزئینی. در کادوس کلاس‌ها کارگاهی‌اند و از جلسه اول روی سیستم خودتان کار می‌کنید.
سایت از چی ساخته شده؟ ریل کوتاه دپارتمان کامپیوتر کادوس: HTML اسکلت سایت، CSS لباس و آرایش، جاوااسکریپت مغز و بکاند آشپزخانه سایت؛ با جنگو، لاراول و Node.js.
پاسخ سؤالی را که اینجا نیست، در یک تماس کوتاه بگیرید؛ مشاوره و تعیین مسیر پیش از ثبتنام رایگان است.
۰۱۳۹۱۰۰۲۳۴۳اول هدفتان را مشخص کنید. اگر میخواهید طراح یا برنامهنویس وب شوید، از دوره «طراحی سایت با HTML و CSS» کادوس شروع کنید؛ ۱۵ جلسه است، از صفر شروع میشود و با یک سایت هفتصفحهای واکنشگرا تمام میشود. اگر میخواهید سریع و بدون کدنویسی سایت کسبوکار یا فروشگاه خودتان را بسازید، از «وردپرس مقدماتی» شروع کنید. مشاوره و تعیین مسیر پیش از ثبتنام رایگان است.
نه. هر دو مسیر طراحی سایت کادوس از صفر شروع میشوند. در دوره HTML و CSS فقط آشنایی اولیه با کار با کامپیوتر لازم است و در دوره وردپرس مقدماتی اصلاً کدی نوشته نمیشود؛ همه کارها با پیشخوان وردپرس، چند افزونه شناختهشده و صفحهساز المنتور انجام میشود.
هر دو درستاند، برای هدفهای متفاوت. وردپرس سریعترین راه ساخت سایت شرکتی، خبری یا فروشگاهی است و برای صاحبان کسبوکار و فریلنسرهای تازهکار عالی است. کدنویسی (HTML، CSS، جاوااسکریپت و یک زبان بکاند) آزادی کامل، سرعت و امکان ساخت هر سایت اختصاصی را میدهد و راه ورود به شغل برنامهنویسی وب است. بسیاری از طراحان حرفهای هر دو را بلدند؛ مقایسه کامل را در مقاله «وردپرس یا برنامهنویسی اختصاصی؟» وبلاگ کادوس بخوانید.
دوره طراحی سایت با HTML و CSS ۱۵ جلسه است. وردپرس مقدماتی ۱۰ جلسه دوساعته (۲۰ ساعت)، وردپرس پیشرفته ۲۶ جلسه ۹۰ دقیقه‌ای (۳۹ ساعت)، سئو مقدماتی ۱۶ جلسه ۹۰ دقیقه‌ای و سئو پیشرفته ۲۰ جلسه ۹۰ دقیقه‌ای است. زمان دورههای جاوااسکریپت و PHP و تاریخ شروع ترم بعدی هر دوره را از مشاوره کادوس بپرسید.
بله. کتاب ۱۶ فصلی دوره HTML و CSS کادوس رایگان و آنلاین در kadoosonline.github.io/HTML-CSS/book است؛ فصل صفر مفاهیم پایه وب را توضیح میدهد و فصل‌های یک تا پانزده دقیقاً برابر جلسه‌های کلاس‌اند. نمونه‌کد همه جلسه‌ها در گیت‌هاب کادوس (github.com/kadoosonline/HTML-CSS) و یک مجموعه نمونه سؤال تستی HTML و CSS برای آمادگی آزمون فنی و حرفهای هم کنار کتاب منتشر شده است. دوره وردپرس مقدماتی هم کتاب ۱۱ فصلی خودش را دارد.
در دوره HTML و CSS، جلسه چهاردهم به ساخت یک سایت کامل هفتصفحهای و واکنشگرا (سایت «دبیرستان دانش» با صفحههای اصلی، درباره ما، رشتهها، دبیران، گالری، اخبار و تماس) در ده گام اختصاص دارد. در وردپرس مقدماتی از جلسه دوم، فروشگاه «سبزینه» را روی دامنه و هاست خودتان میسازید و در جلسه دهم تحویل میدهید. همین پروژهها اولین نمونهکار شما هستند.
دورههای طراحی سایت کادوس حضوری و کارگاهی در رشت برگزار میشوند: هر مبحث را همان لحظه روی سیستم خودتان انجام میدهید و اشکالتان سر کلاس رفع میشود. دوره HTML و CSS در شعبه مرکزی (خیابان لاکانی) و شعبه مسکن مهر و وردپرس مقدماتی در شعبه لاکانی برگزار میشود. برای امکان کلاس آنلاین یا خصوصی با مشاوره تماس بگیرید.
برای ساخت اولین سایت وردپرسی کامل، یک دوره ۱۰ جلسهای کافی است. برای رسیدن به سطح طراح فرانتاند، معمولاً HTML و CSS و بعد جاوااسکریپت لازم است و برای ساخت سایت پویا با پایگاه داده، یک زبان بکاند مثل PHP یا پایتون (جنگو) هم اضافه میشود. سرعت پیشرفت بیشتر از هر چیز به تمرین بین جلسات بستگی دارد.
طراحی سایت از مهارتهایی است که هم استخدام در شرکتها و آژانسهای طراحی سایت را ممکن میکند و هم پروژه فریلنس و دورکاری؛ بسیاری از کسبوکارهای رشت و گیلان به سایت، فروشگاه اینترنتی و سئو نیاز دارند. اما هیچ دورهای بهتنهایی درآمد را تضمین نمیکند؛ چیزی که مشتری و کارفرما میبیند نمونهکار شماست و به همین دلیل دورههای کادوس پروژهمحورند.
برای تمرین بین جلسات به یک کامپیوتر یا لپتاپ معمولی نیاز دارید؛ طراحی سایت سیستم قوی نمیخواهد. برای HTML و CSS فقط یک مرورگر و یک ویرایشگر متن (مثل VS Code) کافی است و حتی اینترنت لازم نیست. برای وردپرس، برنامه رایگان XAMPP روی ویندوز ۱۰ یا ۱۱ نصب میشود. شرایط استفاده از سیستمهای کلاس را هنگام ثبتنام بپرسید.
بله؛ نوجوانانی که تایپ و کار با کامپیوتر را بلدند می‌توانند دوره HTML و CSS را شروع کنند، چون نتیجه هر کد همان لحظه در مرورگر دیده میشود و انگیزه‌بخش است. برای کودکان کم‌سن‌تر، دوره «برنامهنویسی کودکان با اسکرچ» کادوس نقطه شروع بهتری است.
دورههای طراحی سایت کادوس به‌صورت گروهی و حضوری برگزار میشوند. اگر به‌دلیل برنامه کاری یا یک پروژه مشخص (مثلاً سایت کسبوکار خودتان) به کلاس خصوصی نیاز دارید، امکان و شرایط آن را از مشاوره دپارتمان کامپیوتر کادوس بپرسید.
پس از پایان هر دوره، گواهی پایان دوره مؤسسه فنی و آموزشی کادوس صادر میشود. برای دوره HTML و CSS، پس از قبولی در آزمون، امکان دریافت مدرک فنی و حرفهای هم وجود دارد و نمونه سؤال تستی آن کنار کتاب دوره منتشر شده است. جزئیات ثبتنام آزمون را در جلسه مشاوره بپرسید.
شهریه، شرایط پرداخت و زمان شروع ترم بعدی هر دوره در صفحه همان دوره آمده یا از کادوس قابل استعلام است: شعبه مرکزی (لاکانی) ۰۱۳۹۱۰۰۲۳۴۳ و شعبه مسکن مهر ۰۱۳۹۱۰۰۲۳۲۳. هنگام مقایسه شهریه‌ها، تعداد جلسات، پروژه پایانی و پشتیبانی بعد از دوره را هم مقایسه کنید.
برای زمان شروع کلاس بعدی، شهریه، شرایط پرداخت و انتخاب مسیر (کدنویسی یا وردپرس) با دپارتمان کامپیوتر کادوس تماس بگیرید. دورههای طراحی سایت در شعبه مرکزی لاکانی و شعبه مسکن مهر رشت برگزار میشوند.
رشت، خیابان لاکانی، ابتدای خیابان صندوق عدالت · ساعت کاری ۸ تا ۲۱
۰۱۳۹۱۰۰۲۳۴۳صفحه شعبه