کلاس‌ها کالج بانک سؤالات مسابقات کاریابی جونیورا hot بوت‌کمپ

آموزش عملی HTML و CSS

آموزش پروژه‌محور مفاهیم Tailwind ،Sass ،CSS ،HTML و Bootstrap بدون پیش‌نیاز

avataravataravatar

و ۹۸ نفر دیگر ثبت‌نام کرده‌اند.

آموزش HTML و CSS

پراستفاده‌ترین

تکنولوژی مرتبط با برنامه‌نویسی

پایه و اساس

تمامی وب‌سایت‌ها

اولین قدم

برای ورود به حوزه طراحی سایت

معرفی

مخاطبین

پیش‌نیازها

سرفصل‌ها

پروژه‌ها

اساتید

0 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 1

معرفی دوره

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

    • section item

      این دوره مناسب شما است اگر...

      • مشتاق هستید به بازار پردرآمد برنامه‌نویسی و حوزه‌ی نرم‌افزار وارد شده و آینده‌ی شغلی خود را رقم بزنید.

      • برای پروژه‌های شخصی، دانشگاهی و یا کاری خود نیاز به یادگیری Tailwind ،Sass ،CSS ،HTML و Bootstrap دارید.

      • می‌خواهید مفاهیم ذکر شده را به صورت عملی و یکبار برای همیشه به شکل اصولی بیاموزید.

      • بازار کار و حقوق بالای برنامه‌نویسان در داخل و خارج ایران برایتان جذاب است.

    • section item

      این دوره مناسب شما نیست اگر...

      • هنوز فکر می‌کنید که شرکت‌ها برای استخدام به مدرک دانشگاهی شما توجه می‌کنند.

      • تجربه‌ی عملی چندین هزار خط کدنویسی برایتان ارزشی ندارد.

      • حاضر نیستید در هفته ۶ ساعت برای یادگیری، پیشرفت و رشد درآمدتان زمان بگذارید.

      • می‌خواهید Tailwind ،Sass ،CSS ،HTML و Bootstrap را به طور سطحی و گذرا بیاموزید.

    • پیش‌نیازها

    • لازم است...

      section item

      علاقه و پشتکار داشته باشید.

    • لازم نیست...

      section item

      پیش‌زمینه‌ی برنامه‌نویسی داشته باشید.

      section item

      در رشته‌ی کامپیوتر تحصیل کرده باشید.

      section item

      دانش ریاضی قوی داشته باشید.

    سرفصل‌های دوره

    certificate

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

    teacher's avatar

    حامد خانکی

    طراحی و تولید

    دانشجوی مهندسی کامپیوتر دانشگاه صنعتی شریف | توسعه‌ی دهنده‌ی فرانت‌اند سابق در ستون، دیجی‌کالا و یکتانت | مدیر آموزش فرانت‌اند کوئرا
    teacher's avatar

    سالار امیر عظیمی نیلی

    طراحی و تولید

    مربی‌گری

    دانشجوی کارشناسی مهندسی کامپیوتر دانشگاه آزاد ساری | عضو تیم آموزش فرانت‌اند کوئرا
    teacher's avatar

    مهدی طارقی

    طراحی و تولید

    مهندسی هوافضا دانشگاه صنعتی شریف | توسعه‌دهنده سابق فرانت‌اند در Darsoon
    college

    آموزش عملی HTML و CSS

    feature

    ۴۰ تمرین

    feature

    گواهی معتبر

    feature

    عضو پارک علم و فناوری شریف

    و ۱۰۱ نفر دیگر ثبت‌نام کرده‌اند.

    feature

    ۴۰ تمرین

    feature

    گواهی معتبر

    feature

    عضو پارک علم و فناوری شریف

    سوالات متداول

    آموزش عملی HTML و CSS

    HTML و CSS چیست؟

    HTML یک زبان نشانه‌گذاری است که برای تعریف ساختار و محتوای وبسایت‌ها استفاده می‌شود. این زبان امکان ایجاد انواع عناصر مانند عناوین، پاراگراف‌ها، لینک‌ها، تصاویر، جداول و فرم‌ها را فراهم می‌کند. HTML اولین بار در سال ۱۹۹۱ و توسط تیم توسعه‌دهندگان تیموتی برنرز(Tim Berners-Lee) ابداع شد. این زبان، اساسی برای توسعه وبسایت‌ها است و بدون آن، صفحات وب نمی‌توانند به درستی ساختاردهی شوند.

    CSS یک زبان استایل‌دهی است که برای طراحی محتوای وبسایت‌ها استفاده می‌شود. این زبان امکان اعمال استایل‌های مختلف مانند رنگ، فونت، حاشیه، پس‌زمینه و ترتیب المان‌ها را برای عناصر HTML فراهم می‌کند. CSS برای جدا کردن استایل از محتوا و افزودن زیبایی و انعطاف‌پذیری به طراحی وبسایت‌ها استفاده می‌شود. این زبان اولین بار در سال ۱۹۹۶ و توسط هاکون لی گو ساخته و معرفی شد.

    تفاوت Html و Css

    در ادامه به برخی از مهم‌ترین تفاوت‌های Html و CSS می‌پردازیم:

     

    CSS

    HTML

    CSS مخفف Cascading Style Sheets است. این زبان مسئول زیباسازی ساختار وبسایت است.

    HTML مخفف HyperText Markup Language است. همانطور که از نامش پیداست، از این زبان نشانه‌گذاری برای ایجاد صفحات وب استاتیک استفاده می‌شود.

    برای استایل‌دهی یا بهبود فرمت محتوا از آن استفاده می‌شود.

    از آن برای افزودن ساختار و خصوصا محتوا به صفحات وب یا برنامه‌های وب استفاده می‌شود.

    این زبان از selectorsهایی تشکیل شده است که با استفاده از آن‌ها propertyهای CSS به تگ‌های نشانه‌گذاری شده اعمال می‌شوند.

    HTML از تگ‌ها و عناصری تشکیل شده است که در برگیرنده محتوا هستند.

    این زبان با استفاده از propertyهای مختلفی مانند رنگ پس زمینه، پدینگ، حاشیه و ...محتواهای صفحات را بهبود می‌بخشد.

    با استفاده از آن می‌توانید محتوا، تصاویر، هایپرلینک و ... به صفحه وب اضافه کنید.

    فایل‌های CSS بدون HTML کاربردی ندارند.

    فایل‌های HTML می‌توانند به صورت جداگانه حاوی دستورات CSS باشند. این دستورات به محتوای HTML اعمال شده و آن را استایل‌دهی می‌کنند.

    در CSS امکان بازیابی هیچ اطلاعاتی از صفحات دیگر وجود ندارد.

    اطلاعات صفحات دیگر از طریق این زبان بازیابی می‌شوند.

     

    HTML و CSS چه کاربردهایی دارند؟

    HTML:

    • ایجاد فرم‌ها: HTML به توسعه‌دهندگان امکان می‌دهد تا فرم‌های مختلفی را برای جمع‌آوری اطلاعات از کاربران ایجاد کنند. این فرم‌ها می‌توانند شامل فیلدهای متنی، دکمه‌ها، چک‌باکس‌ها و سایر المان‌های ورودی باشند.
    • ایجاد لینک‌ها و ناوبری: HTML امکان ایجاد لینک‌ها و نوارهای ناوبری(Navigation Bar) را برای راهنمایی کاربران در وبسایت فراهم می‌کند.
    • زدن برچسب‌ها: HTML برای برچسب‌زنی و تعیین ساختار محتوا استفاده می‌شود که این کار از لحاظ SEO و دسترسی‌پذیری وبسایت بسیار حیاتی است.

     

    CSS:

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

     

    بازار کار HTML و CSS 

    این دو زبان، مانند ستون فقرات صفحات وبسایت‌های مدرن‌اند. همه کسانی که در بخش فرانت‌اند توسعه وبسایت‌ها فعالیت دارند، از این دو زبان در انجام وظایف مختلف بهره می‌برند. در این جا به تعدادی از شغل‌ها که به صورت مستقیم از این دو زبان استفاده می‌کنند اشاره می‌کنیم:

    توسعه‌دهنده وب

    وظیفه توسعه‌دهندگان وب، ایجاد و راه‌اندازی صفحات وب برای مشتریان و شرکت‌های موردنظر است. این توسعه‌دهندگان از طرف یک مشتری یا یک تیم طراح به یک داکیومنت طراحی وب دسترسی پیدا کرده و سپس از زبان‌های برنامه‌نویسی مانند HTML CSS و JavaScript برای تبدیل طراحی آن به یک صفحه وب کارآمد استفاده می‌کنند و برای این کار نیز عمدتاً از HTML و CSS استفاده می‌کنند. افراد مشغول در این شغل ممکن است مسئول آزمون، اشکال‌زدایی، نگهداری و به‌روزرسانی صفحات وب باشند.

    طراحان بصری

    طراحان بصری مسئولیت طراحی و ایجاد عناصر بصری مانند بنرها، دکمه‌ها، منوها و سایر عناصر گرافیکی که در وبسایت استفاده می‌شوند، را بر عهده دارند. آنها باید طراحی‌هایی ایجاد کنند که با محتوا و هدف وبسایت سازگاری داشته باشند و رابط کاربری (UI) و تجربه کاربری (UX) را بهبود بخشند. همچنین، طراحان بصری باید با توسعه‌دهندگان وب همکاری کرده و طرح‌های خود را به صورت دقیق و کارآمد در وبسایت پیاده‌سازی کنند تا تجربه استفاده از وبسایت برای کاربران بهتر شود.

    توسعه‌دهندگان فرانت‌اند

    مهارت‌ها و مسئولیت‌های توسعه‌دهندگان فرانت‌اند به طور قابل توجهی با توسعه‌دهندگان وب همپوشانی دارد. این شباهت تا جایی پیش می‌رود که گاهی اوقات، این دو عنوان به جای هم به‌کار می‌روند. در حقیقت، تفاوت آن‌ها این است که توسعه‌دهندگان فرانت‌اند در حالت کلی بیشتر در بخشی از توسعه وب که سمت کاربر است تخصص دارند و احتمالاً در پروژه‌های بزرگ با تیم‌های دیگر از توسعه‌دهندگان کار می‌کنند. این افراد بیشتر به یکی از سمت‌های فرآیند توجه دارند و باید در آن سمت از توسعه وب از مهارت بیشتری برخوردار باشند.

    این دوره به درد چه افرادی می‌خورد؟

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

     به کمک این دوره، شرکت‌کنندگان با مفاهیم پایه HTML برای ساختاردهی محتوا و CSS برای استایل‌دهی وبسایت‌ها آشنا شوند. علاوه بر این، دوره‌ HTML و CSS برای افرادی که می‌خواهند وبسایت‌های شخصی یا تجاری خود را ایجاد یا بهبود بخشند، ارزشمند هستند. با داشتن این مهارت‌ها، افراد می‌توانند به طراحی و توسعه وبسایت‌هایی با ظاهر حرفه‌ای و کاربرپسند بپردازند و به اهداف خود در دنیای دیجیتال نزدیک‌تر شوند.