توضیحات دوره
دوره مقدماتی طراحی سایت
در این دوره چه آموزش داده می شود؟
در دوره آموزش مقدماتی و پروژه محور طراحی سایت با مفاهیمی مقدماتی طراحی سایت و مفاهیم پیشرفته طراحی قالب سایت و فرانت اند آشنا خواهیم شد. در این دوره به صورت کامل و حرفه ایی با مفاهیم HTML ، CSS ، Bootstrapو PHP آشنا خواهیم شد و به صورت عملی و پروژه محور به یادگیری کامل بوت استرپ، سی اس اس و HTML می پردازیم.
- یادگیری کامل 5 HTML
- یادگیری کامل ساختار وب
- یادگیری کامل فرم ها
- یادگیری و آموزش ساختار صفحات
- پیاده سازی قالب وب سایت
- مباحث لینک ها و تصاویر
- یادگیری کامل3 CSS
- یادگیری کامل Bootstrap 5
- یادگیری استایل دهی به سایت
- یادگیر طراحی رسپانسیو سایت
- یادگیری ایجاد قالب حرفه ایی
- پروژه طراحی سایت شامل دو پروژه
آیا این دوره احتیاج به پیش نیاز دارد؟ خیر😎
این دوره از صفر شروع میشه و کسانی هم که هیچ دانش برنامه نویسی برای طراحی سایت ندارند می توانند د راین دوره بدون هیچ پیش نیای شرکت کنند. علاوه بر این این دوره کاملا پروژه محور است و باعث می شود شما بتوانید با دیدن این دوره به بازارکار نزدیک شوید.در این دوره دو پروژه طراحی قالب وب سایت انجام می شود یک سایت وبلاگی و یک سایت فروشگاهی که شما می توانید با دیدن این دوره هر نوع قالب که در بازار کار نیاز است را طراحی کنید و درآمد کسب کنید.
در این دوره ما به زبان های زیر مسبط می شویم:
تفاوت این دوره در چیست؟
تفاوت دوره مقدماتی طراحی سایت با یادگیری به صورت جدگانه موارد بالا در این می باشد که شما موارد بالا در وب سایت های دیگر پراکنده یاد خواهید گرفت اما در این دوره سعی بر آن است که این موارد را که به هم متصل هستند در کنار هم به شما عزیزان یاد دهیم و مورد مهمی که وجود دارد این است که این دوره کاملا پروژه محور است و باعث می شود شما واقعا بتوانید بعد از این دوره وارد بازار کار شوید و یک پروژه واقعی را خودتان پیاده سازی کنید.
HTML چیست؟
اولین قدم در آموزش HTML این است که بدانیم تعریف این زبان چیست؟ HTML یک زبان برنامه‌نویسی نیست؛ بلکه یک زبان نشانه‌گذاری است که ساختار محتوای شما را تعریف میکند. HTML شامل مجموعه‌ای از عناصر ( elements ) میشود که با استفاده از آن شما می‌توانید ساختار یک صفحه وب را مشخص می‌کنید تا در قدم بعدی بتوانید به آن ظاهر مناسبی به آن دهید.
HTML زبانی است که اکثر وب سایت ها با آن نوشته می شوند. HTML برای ایجاد صفحات و کاربردی کردن آنها استفاده می شود.کدی که برای جذاب کردن آنها از نظر بصری استفاده می شود به عنوان CSS شناخته می شود و ما در آموزش بعدی روی آن تمرکز خواهیم کرد. در حال حاضر، به جای طراحی، بر آموزش ساختن به شما تمرکز خواهیم کرد.
برای مثال شما میخواهید مشخص کنید در مکان x از صفحه وب یک لیست قرار بگیرد یا یک فرم یا یک لینک و یا هر چیز دیگر که اینکار با استفاده از HTML به سادگی قابل انجام است.
تاریخHTML
در اواخر سال ۱۹۸۰، یک فیزیکدان به نام تیم برنرزلی، سیستمی را برای محققان CERN پیشنهاد کرد. در سال ۱۹۸۹ او یک یادداشت نوشت که یک سیستم هیپنوتیزم مبتنی بر اینترنت را ارائه می دهد.به طور رسمی به پدر HTML معروف است. آخرین نسخه HTML HTML5 است که بعداً در این دوره آموزشی یاد خواهیم گرفت.
آیا HTML سخت است ؟
همانطور که گفته شد HTML و CSS هر دو ساده ترین زبان های کامپیوتری هستند. لذا یادگیری آن ها خیلی سریع بوده و کسب در آمد از آن نیز آسان می باشد. تقریبا هر فرد یا سازمانی که دارای سایت است بی نیاز از کسی که HTML و CSS را بلد باشد نیست.آن قدر بگویم که ساخت و طراحی یک صفحه با HTML و CSS مانند ساخت یک فایل ورد و نوشتن در آن می باشد. (یعنی اینقدر آسون) اما فراموش نکنید که قطعا حرفه ای شدن در هر کاری حتی ساده ترین کار ها زمان زیادی را می طلب.
آیا برای کدنویسی HTML نیاز به ابزار خاصی داریم ؟
در جواب این سوال باید بگویم که شما تنها به یک ویرایشگر کد احتیاج دارید و یک مرورگرو با همین دو ابزار می توانید اقدام به طراحی سایت با HTML و CSS نمایید. همچنین شایان ذکر است که کد های نوشته شده به زبان اچ تی ام ال در هر مرورگری خوانده و اجرا می شوند
تگ HTML چیست؟
تگ های HTML مانند کلمات کلیدی هستند که تعریف می کنند که مرورگر وب چگونه محتوا را شکل می دهد. با کمک tags، یک مرورگر وب می تواند بین یک محتوای HTML و یک محتوای ساده تمایز یابد. تگ های HTML شامل سه قسمت اصلی است: تگ باز، محتوا و برچسب بسته. اما بعضی از تگهای HTML برچسب های بدون استفاده هستند. وقتی یک مرورگر وب یک سند HTML را می خواند، مرورگر آن را از بالا به پایین و چپ به سمت راست می خواند. تگ های HTML برای ایجاد اسناد HTML و ارائه ویژگی هایشان استفاده می شوند. هر تگ HTML ویژگی های متفاوتی دارد.یک فایل HTML باید چند تگ ضروری داشته باشد تا مرورگر وب بتواند بین یک متن ساده و متن HTML تفاوت ایجاد کند. می توانید از این تگ ها که می خواهید، استفاده کنید.
همهٔ تگهای HTML باید در < > این براکت ها قرار بگیرند.
هر تگ در HTML وظایف متفاوتی را انجام می دهد.
اگر از یک تگ باز <برچسب <tag> استفاده کرده اید، باید از یک تگ نزدیک </tag> (به استثنای برخی از تگها)
برای آموزش HTML باید چه چیزهایی را بدانیم؟
تقریبا برای آموزش کامل HTML در این دروه هیچ پیش نیازی لازم ندارید و بدون هیچ دانش اولیه ایی در مورد آن می توانید در این دوره HTML شرکت نمایید.
آیا یادگیری HTML آسان است؟
بله، احتمالاً آسان ترین زبان برنامه نویسی پیش رو است که می توانید یاد بگیرید. با داشتن منابع و ابزارهای رایگان آنلاین، این زبان بسیار سریع برای یادگیری نیز است.
برای چه استفاده می شود؟
زبان هایپرت مارکاپ (به انگلیسی: Hypertext Markup) یک زبان برنامه نویسی است که برای توصیف ساختار صفحات وب استفاده می شود. HTML باعث می شود که صفحات ایستا با متن، سربرگ ها، لیست ها، تصاویر، لینک ها و غیره ایجاد کند.
آیا یادگیری HTML و CSS برای ساخت سایت کافی است ؟
خیر. یادگیری HTML و CSS تنها بخش بسیار کوچکی از طراحی سایت می باشند.
هر سایت دارای دو بخش اصلی است. فرانت اند (چیزی که کاربر می بیند) و بک اند (چیزی که کاربر نمی بیند در واقع همان برنامه نویسی سایت).
در این میان باز هم HTML و CSS بخش کوچکی از بخش FRONT-END یک سایت رو به عهده گرفته است. ابزار ها و تکنولوژی هایی که سایت ها با آن ساخته می شوند به صورت کلی به شرح زیر است. البته باید بدانید که یادگیری همه آن ها اجباری نیست اما پیش نیاز هرکدام از آن ها همین اچ تی ام ال و سی اس اس می باشند.
زبان HTML یکی از معدود زبان هایی هست که توسط انواع مرورگر ها بطور مستقیم خوانده می شود و همین نشانه از پر اهمیت بودن زبان اچ تی ام ال است. اگر علاقه مند به طراحی صفحات وب هستید اولین گام یادگیری زبان Html می باشد، چرا که این زبان به منزله اسکلت و ساختمان صفحات وب است.به عنوان مثال یک ساختمان را در نظر بگیرید، اولین گام برای ساخت یک ساختمان طراحی و پیاده سازی اسکلت ساختمان می باشد و پس از آن به کمک وسایل و ابزار جانبی نما و ظاهر ساختمان تکمیل می گردد.در دنیای طراحی صفحات وب سایت نیز اسکلت و زیر بنای صفحات در واقع همان زبان HTML بوده و طراحی نما و زیبا سازی سایت به کمک زبان هایی نظیر CSS انجام می گیرد.شما همچنین می توانید در دوره مقدماتی تا پیشرفته طراحی سایت شرکت نمایید تا تمامی موارد بالا را از صفر تا صد یادبگیرید و بتوانید یک وب سایت کامل را طراحی نمایید.
تفاوت HTML و HTML 5
هر دو HTML و HTML5 زبان های مارکوپ هستند که در درجه اول برای توسعه صفحات وب یا برنامه های کاربردی استفاده می شوند. HTML5 آخرین نسخه HTML است و از قابلیت های جدید زبان مارکاپ مانند چند رسانه ای، برچسب های جدید و عناصر و همچنین APIهای جدید پشتیبانی می کند.
آموزش HTML ویژه چه کسانی هست؟
یک مهارت پایه است برای هر کس که دارای علاقه قابل قبول به حرفه ی توسعه وب دارد که علاقه به برنامه نویسی دارید یادگیری این زبان را هر چه زودتر شروع کنید
اموزش html چقدر زمان میبرد؟
زمان یادگیری HTML بستگی به زمانی که برای یادیگیری میگذراید و تمرینتان دارد برای هر کس متفاوت از یک هفته الی سه ماه است.
آیا یادگیری html برای طراحی وب ضروری است؟
بله، برای یادگیری کامل طراحی سایت و یا برنامه نویسی یک وب سایت باید در ابتدا دوره HTML را گذراند و یک پیش نیاز محسوب می گردد.
آیا html یک زبان برنامه‌نویسی است؟
خیر، HTML یک زبان نشانه گذاری محسوب می شود که به مانند یک اسکلت برای سایت می باشد.
زبان نشانه‌گذاری چه تفاوتی با زبان برنامه نویسی دارد؟
زبان برنامه نویسی ابزاری قدرتمند است که به وسیله آن میتوانیم با کامپیوترها حرف بزنیم. زبانهای برنامه نویسی به کمک دستورالعمل‌هایی که برای کامپیوتر قابل فهم هستند با آنها ارتباط برقرار کرده و به طور عمده از ساختارهای کنترلی و شرطی استفاده می‌کنند. سخت افزار برای این که درست کار کند نیاز به یک سری دستورالعمل دارد. این دستورالعمل‌ها توسط برنامه نویس و زبانی که برای کامپیوتر قابل فهم باشد، به سخت افزار داده میشود. انواع مختلفی از زبان نشانه گذاری وجود دارد که معروف‌ترین آن HTML است. اگر به اسم زبان نشانه گذاری دقت کنید، متوجه مفهوم آن خواهید شد. در زبانهای نشانه گذاری خبری از ساختارهای رایج برنامه‌نویسی مثل شرط، حلقه، تکرار و غیره وجود ندارد و شما داخل متن خود از یک سری نشانه استفاده می‌کنید. در حقیقت در این زبان‌ها شما به کمک این نشانه‌ها متن را از سایر عناصر صفحه جدا می‌کنید تا به کمک آنها المان‌های مختلف را داخل یک صفحه وب قرار داده و ساختار صفحه را مشخص کنید.
ویژگی ها HTML
زبان خیلی ساده ایی است و برای همین سادگی بسیار قابل درک است.درست کردن یک کار بسیار آسان است ارائه مؤثر با HTML، چون این برچسب های شکل دهنده زیادی دارد. یک راه انعطاف پذیر برای طراحی صفحات وب همراه با متن را فراهم می کند.برنامه نویسان را برای اضافه کردن یک آسان می کند لینک در صفحات وب (با برچسب لنگر html) بنابراین علاقه به مرور کاربر را افزایش می دهد . ویژگی مستقلی دارد که می توان در هر پلتفرمی مانند ویندوز، لینوکس و مکینتاش و غیره نمایش داد.برنامه نویس را آسان می کند گرافیک، ویدئو و صدا به صفحات وب که آن را جذاب تر و تعاملی تر می کند.
HTML یک زبان بی مورد است، به این معنی که می توانیم از تگ ها در حالت پایین یا بالا استفاده کنیم.
ارتباط html با css
همانطور که پیش تر اشاره کردیم به زبان ساده CSS ابزاری برای زیبا سازی صفحات وب می باشد.ما برای طراحی ظاهر سایت به شکل دلخواه از CSS استفاده می کنیم و برای اینکار یکسری صفات تعریف شده در سی اس اس را به تگ های اچ تی ام ال نسبت می دهیم.در واقع CSS زبانی برای توصیف ظاهر صفحات وب شامل رنگ ها، چارچوب پیرامون عکس، نشانگر ماوس، آرایش و فونت‌ها (اندازه، رنگ، نوع) است.با استفاده از CSS می‌توان نمایش صفحه را برای انواع مختلف دستگاه ها مانند صفحات بزرگ، صفحات کوچک و پرینترها تنظیم کرد که این کار را ریسپانسیو سازی می گویند.
HTML چطور کار میکند؟
HTML عناصر مختلفی را از جمله پاراگراف، لیست، عکس، صوت و غیره کنار هم قرار می‌دهد تا چهارچوب اصلی صفحه وب را ایجاد کند. به زبان ساده‌تر ما با HTML بدنه اصلی صفحه وب را می‌سازیم. حال که با اصلی‌ترین وظیفه HTML آشنا شدید، بگذارید به سراغ بررسی یک مثال برویم.اگر HTML را شبیه به یک ساختمان در حال ساخت در نظر بگیریم، مهندس عمران که پی ساختمان را ریخته و اسکلت آن را می‌سازد حکم کسی را دارد که ساختار اصلی صفحات وب را با HTML می‌سازد. همچنین مهندس معماری که وظیفه دارد ظاهر ساختمان را زیباتر کند مانند کسی است که به کدنویسی با CSS می‌پردازد.
البته در دنیای وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایل‌‌های HTML با پسوند .htm یا .html در سیستم ذخیره می‌شوند. این فایل‌ها تقریبا توسط همه مرورگرهای وب پشتیبانی می‌شوند و به راحتی می‌توانند محتویات آن را رندر کنند. منظور از رندر کردن این است که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران می‌شوند.
html مخفف چیست
شاید برای شما هم سوال باشد که معنی HTML چیست یا به عبارتی html مخفف چیست ؟ عبارت HTML مخفف (Hyper Text Markup Language) می باشد که معادل فارسی آن «زبان نشانه گذاری ابر متنی» خواهد بود. البته با توجه به وسعت کاربرد آن این ترجمه فارسی نمی تواند کاربرد HTML را به خوبی توضیح دهد.
در ادامه مقاله، برای روشن شدن معنی دقیق اچ تی ام ال و یا به عبارتی زبان نشانه گذاری ابر متنی، با کاربرد HTML بیشتر آشنا خواهیم شد. نکته: اچ تی ام ال یک زبان برنامه نویسی نیست. اچ تی ام ال یک زبان نشانه گذاری است.
کاربرد HTML چیست
اگر بخواهیم کاربرد HTML را بطور ساده توضیح دهیم باید بگوییم:HTML ابزاری است که به کمک تگ ها (Tag) قالب کلی صفحات را می سازد، در واقع شما توسط تگ های HTML، اسکلت صفحات وب خود را می سازید. اگر کمی با طراحی وب آشنایی داشته باشید، حتما میدانید که طراحی وب ۲ مرحله اصلی دارد:
- ساختاربندی اصلی صفحات وب که با HTML انجام میشود.
- اضافه کردن جذابیت های ظاهری مثل رنگ و… که با CSS انجام میشود.
حال شاید بپرسید تگ (Tag) چیست؟!
قبل از توضیح این سوال و البته تکمیل توضیح سوال html چیست و زبان نشانه گذاری ابر متنی دقیقا یعنی چه، این نکته را فراموش نکنید که:ساخت یک وب سایت حرفه ای و کامل شامل استفاده از زبان های و کد های مختلف برنامه نویسی مثل php، ASP، HTML، CSS و… است، که هیچکدام از این کدها و زبان های بجز اچ تی ام ال برای مرورگرهای مختلف قابل فهم نیست. یعنی مرورگر ها فقط کد ها و عناصری را نمایش می دهند که در دل کدها HTML نوشته شده باشند.به عبارتی وقتی در جواب سوال html چیست می گوییم : «زبان نشانه گذاری ابر متنی»، درواقع درحال توضیح این امر هستیم که HTML یک زبان نشانه گذاری است که شامل بخش های مختلف به نام تگ است. که هر کدام از این تگ ها دارای کاربرد و خواص مربوط خود هستند و به مرورگرها کمک می کنند تا بفهمند هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود.
HTML چه رابطه‌ای با زبانهای css و javascript دارد؟
کمتر پیش می‌آید که از HTML صحبت کنیم و ذهنمان به سمت زبانهای css و JavaScript کشیده نشود. تا اینجای کار فهمیدیم HTML چیست و چرا در طراحی سایت به آن نیاز خواهیم داشت. اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد.
چون فقط ساختار صفحه را شکل داده و اجازه اضافه کردن جذابیت‌های ظاهری را نمی‌دهد. صفحات HTML به تنهایی ارزشی برای انتشار ندارند اما زمانی که در کنار css و JavaScript قرار می‌گیرند، زیبایی واقعی خود را در طراحی وب نشان می‌دهند.
با توجه به نکاتی که گفته شد می‌توان HTML به تنهایی را مانند یک انسان برهنه در نظر گرفت که CSS مانند لباس‌های شیک، ظاهر آن را آراسته میکند. در نهایت جاواسکریپت باعث میشود او حرکت کرده و با بقیه شروع به صحبت کند. پس در طراحی ظاهر سایت به طور خلاصه باید گفت :
- HTML به کمک تگهای از قبل تعریف شده ساختار و اسکلت صفحه وب را مشخص میکند.
- CSS به ما کمک میکند عناصر مختلف را در صفحه جابه‌جا کنیم، رنگ‌بندی را تغییر دهیم، فونت‌ها را عوض کنیم و به جایی برسیم که یک صفحه وب با ظاهر قابل قبول و قابل ارائه برای داشته باشیم.
- JavaScript به ما اجازه می‌دهد صفحات وب را به طور داینامیک یا پویا طراحی کنیم. با JS میتوانیم عناصر تعاملی مختلف مثل اسلایدر، صفحه pop up، گالری عکس و چیزهای مشابه تولید کنیم.
مخترع HTML (تیم برنرز – لی)
در سال ۱۹۸۹ میلادی جایی که فیزیکدانان سراسر دنیا در آزمایشگاه قاره اروپا در ژنو (سرن CERN ) برای آزمایش فیزیک ذره ای دور هم جمع شده بوده و به بیان دیدگاه ها، تفکرات، و یافته های خود می پرداختند تیم برنرز- لی ایده ای به فکرش خطور کرد.ایده ای که قرار بود کاری کند تا سایر دانشمندان بدون حضور در آزمایشگاه بتوانند یافته و نظرات خود را با سایر دانشمندان به انتشار بگذارند. این ایده باعث شد تا تیم برنرز- لی در سال ۱۹۸۹ میلادی شبکه جهانی وب را اختراع کند. البته این شبکه در ابتدا یک شبکه خصوصی بود و قطعا این تیم هیچ وقت فکر نمی کرد این اختراع روزی وارد تمام خانه در سرتاسر دنیا شود.در ادامه تیم به این موضوع فکر کردند که صفحات علمی منتشر شده در شبکه، باید چیزی فراتر از یک متن خالص باشند. پس آنها دوباره شروع به کار کردند و با توسعه شبکه خود نام این مستندات و متون پیشرفته منتشر شده را ابر متن (HyperText) گذاشتد. بطوریکه صفحات می توانستند به یکدیگر لینک بخورند. و این شروع بود بر ایجاد زبان Html و ساخت صفحات وب که تا به امروز با انتشار آخرین ورژن html یعنی HTML5 در حال توسعه یافتن بوده است.
فرانت اند (Front End) به چه معناست؟
HTML یکی از پرکاربردترین زبان‌ها در زمینه طراحی فرانت اند است. به مجموعه تکنولوژی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته و هیچ ارتباطی با عملکرد آن ندارند فرانت اند گفته میشود. در فرانت اند فقط با عناصر بصری سایت کار می‌کنیم و هر تغییری که ایجاد می‌کنیم در چهره سایت مشخص میشود.تا اینجا درباره HTML و CSS و JavaScript صحبت کردیم. این زبان‌ها اصلی‌ترین عناصر فرانت اند هستند و برای یادگیری آنها برای فرانت اند کار شدن ضروری است. پیشنهاد می‌کنیم مقاله زیر را بخوانید تا دید بهتری نسبت به فرانت اند پیدا کنید.
تفاوت HTML5 نسبت به نسخه های قبلی اش چیست؟
برخی از مزایای HTML5 عبارتند از:
یک پشتیبانی چند مدیا دارد.قابلیت برای ذخیره داده های آفلاین با استفاده از پایگاه داده های SQL دارد.جاوا اسکریریپت را می توان در پس زمینه اجرا کرد.HTML5 همچنین به کاربران اجازه می دهد تا شکل های مختلفی مانند مستطیل ها، دایره ها، مثلث ها و غیره را بکشند
خصوصیات تگ های html( اتریبیوت های html )
همانطور که گفته شد زبان HTML از قرار گرفتن تگ ها مختلف در کنار هم ساخته شده است. حالا باید بدانید که تگ ها نیز شامل خصوصیات و صفت هایی هستند که به آنها اتریبیوت (attribute) گفته می شود. همچنین اتریبیوت های html نیز دارای مقداری هستند که با آنها attribute value گفته می شود. در مورد صفت ها در html بعدا مفصلا توضیح خواهیم داد. بنابراین می توان گفت که صفت ها در html بر گیرنده مقادیر خاصی هست که تأثیر مشخصی بر محتوا می‌گذارد، برای مثال برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ تی ام ال تعریف شده‌اند.
فایل اچ تی ام ال چیست
در واقع فایل html فایلی است که شما پس از یک کدنویسی حرفه ای برای طراحی سایت، با فرمت .html ذخیره می کنید.همانطور که پیش تر گفته شد، شما در فایل های html به کمک تگ ها و اتریبیوت ها می توانید متن، تصویر، صوت و سایر پسوند های مختلف را به طور ترکیبی در کنار هم داشته باشید و حتی بین آن ها توسط لینک، پیوند ایجاد نمایید.
CSS چیست؟
CSS زبانی است که به سادگی طراحی شده است تا فرآیند ارائه صفحات وب را ساده کند. CSS به شما این امکان را می دهد که سبک ها را در صفحات وب اعمال کنید. مهمتر از آن، CSS به شما این امکان را می دهد که مستقل از HTML که هر صفحه وب را تشکیل دهید. یادگیری و درک CSS آسان است، اما کنترل قدرتمندی بر روی ارائه یک سند HTML فراهم می کند.یک ویژگی اضافی برای HTML فراهم می کند.
این روش به طور کلی با HTML برای تغییر سبک صفحات وب و رابط کاربری استفاده می شود. همچنین می توان با هر نوع از اسناد XML، XML، SVG و XUL استفاده کرد. CSS همراه با HTML و جاوا اسکریپت در بیشتر وب سایت ها برای ایجاد رابط کاربری برای کاربرهای وب و رابط کاربری برای بسیاری از کاربرها استفاده می شود. می توانید نگاهی جدید به اسناد قدیمی HTML اضافه کنید. شما می توانید با چند تغییر در کد CSS، نگاه وب سایت خود را کاملاً تغییر دهید.
اگر از ما بپرسید اولین قدم برای یادگیری طراحی سایت چیست، قطعا جواب ما آموزش HTML و سپس CSS است. این دو زبان در کنار یکدیگر معنی پیدا می‌کنند. زیرا CSS را می‌توان مکملی بر زبان HTML دانست که با هدف پر کردن نقاط ضعف و خلاء‌های آن توسعه یافته است. CSS مخفف عبارت Cascading Style Sheets و به معنی “برگه‌های آبشاری” است.
این زبان با هدف فرم دهی صفحات وب HTML و اجزای مختلف صفحات آن توسط کنسرسیوم بین المللی شبکه جهانی وب یا W3C توسعه داده شده است. در واقع CSS یک زبان نشانه گذاری است که اجازه می‌دهد ساختار صفحات وب را از چیدمان عناصر گرفته تا تغییر رنگ‌بندی و فونت‌ها شکل دهید. این زبان در کنار HTML و JavaScript از هسته‌های اصلی طراحی صفحات وب به حساب می‌آیند.
همانطور که از تصویر بالا برداشت میشود، CSS حکم پوست و گوشت و در نهایت کت و شلوار صفحات وب را دارد. CSS طراحان سایت را قادر می‌سازد که بدون محدودیت خلاقیت‌های خود را در طراحی صفحات سایت پیاده سازی کنند. برای اینکه به ضرورت ایجاد CSS پی ببرید و بدانید علت نیاز به CSS چیست ، قصد داریم سایت سون لرن را یک بار با CSS و یک بار بدون استفاده از CSS مشاهده کنیم.
واژه CSS مخفف cascading style sheets به معنی برگه های سبک آبشار یا برگه های آبشاری می باشد. به زبان CSS زبان برنامه نویسی ظاهری (Style Sheet Language) نیز می گویند.
شاید با خودتان فکر کنید چرا برگه های آبشاری؟
علت نامگذاری CSS و استفاده از صفت Cascading (آبشاری) در این اسم، نحوه اعمال دستورات به عناصر موجود در صفحه است. قوانین این زبان به صورت آبشاری یا از بالا به پایین اعمال می شوند. شما برای اعمال دستورات CSS به عناصر HTML می بایست از بیرونی ترین عنصر به ترتیب به عناصر داخلی آن دسترسی پیدا کنید که تداعی کننده حالت آبشاری است که در ادامه با مطالعه شیوه استفاده از کد های CSS این موضوع را بهتر متوجه خواهید شد.
فرانت اند (Front End) به چه معناست؟
S یکی از پرکاربردترین زبان‌ها در زمینه طراحی فرانت اند است. به مجموعه تکنولوژی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته و هیچ ارتباطی با عملکرد آن ندارند فرانت اند گفته میشود. در فرانت اند فقط با عناصر بصری سایت کار می‌کنیم و هر تغییری که ایجاد می‌کنیم در چهره سایت مشخص میشود. زبانهای HTML، JS و CSS جزو اصلی‌ترین عناصر فرانت اند هستند. پیشنهاد می‌کنیم مقاله زیر را بخوانید تا دید بهتری نسبت به فرانت اند پیدا کنید.
CSS یک زبان فرانت اند (Front End)
فرانت اند (Front End) به مجموعه ای از کارهایی گفته می شود که بر روی گرافیک و شکل ظاهری سایت تاثیر دارد و با عملکرد سایت کاری ندارد. از جمله زبان هایی که فرانت اند هستند می توان به CSS، HTML، JAVASCRIPT اشاره کرد.
کاربرد زبان CSS
برگه‌های CSS در واقع مسئولیت ایجاد ظاهر سایت را به عهده دارند و رنگ، اندازه و محل قرارگیری متون و دیگر تگ های تعریف شده در HTML را تعیین می نمایند.
شما به کمک زبان CSS می توانید برای صفحه خود در مدیا های مختلف ویژگی های مختلفی در نظر بگیرید (ریسپانسیو سازی). بنابراین به کمک سی اس اس شما این قدرت را خواهید داشت که ظاهر وب سایت خودتان را به هر شکل دلخواهی درآورید.
کاربردهای رایج سی اس اس
- تعین فونت
- تعین رنگ پیش زمینه و پس زمینه
- تعیین فاصله و حاشیه عناصر صفحه
- تعیین عرض و ارتفاع
- تعیین تصویر پس زمینه
- تغییر موقعیت قرار گیری عناصر صفحه
- چپ چین و راست چین کردن عناصر
چرا باید از CSS استفاده کنیم؟
اساسی‌ترین کاربرد CSS، زیبا سازی و بهبود طراحی صفحات وب است. CSS بسیار منعطف‌تر از HTML است و به شما اجازه می‌دهد برای تغییر صفحات وب، کمتر سراغ ساختار HTML رفته و با سرعت بیشتری طراحی خود را خوش استیل کنید. در ادامه این مطلب می‌خواهیم ببینیم که چرا باید از کدهای CSS در صفحات وب استفاده کنیم.
stylesheet چیست؟
یک stylesheet مجموعه ای از قوانین و کدهای css است که به مرورگر می گوید که چگونه tag HTML نمایش داده شود.
فایل css چیست؟
css با ایجاد فایل css. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.
به شما پیشنهاد می شود برای کسب اطلاعات در حوزه تکنیک کد نویسی و کد نویسی یعنی چه مقاله ما را مطالعه نمایید.
اضافه کردن CSS به HTML
نحوه اتصال فایل css به فایلhtml به سه روش زیر انجام میشود:
- External CSS
- Internal CSS
- Inline CSS
External CSS
با استفاده از روش External CSS که پرکاربردترین روش استفاده از سی اس اس است می‌توانید با تغییر یک فایل که از قبل ایجاد شده، ظاهر یک سایت را تغییر دهید. محل قرارگیری کدهای css در روش خارجی به این شکل است که باید کدهای css را در یک فایل notepad بصورت مجزا نوشته و با پسوند .css ذخیره کنید. حال باید این فایل را با دستورات html به فایل اصلی متصل کنید. برای این کار می‌توانید داخل تگ <link> در بخش <head> فایلی که از قبل ایجاد کرده اید را معرفی کنید.
Internal CSS
Internal CSS زمانی استفاده میشود که یک صفحه از سایت باید استایل مشخصی داشته باشد. به این شکل در بخش <head> در تگ <style> تغییراتی که نیاز است را اعمال می‌کنید.
Inline CSS
نحوه استایل‌دهی کدهای html توسط کدهای css در روش Inline CSS زمانی مورد استفاده قرار می‌گیرد که بخواهید بر روی یک تگ خاص استایلی را اعمال کنید. در این روش تغییرات مستقیم بر روی همان تگ اعمال میشود و تاثیری بر روی تگهای خارجی ندارد.
ما یک معرفی کوتاه از تاریخ CSS’را درک کرده ایم و متوجه شده ایم که آن عمدتاً سه نسخه دارد. بنابراین، حالا اجازه می دهیم که این سه نسخه از CSS را با جزئیات بیشتری بحث کنیم.
CSS 1
CSS 1 اولین نسخه از سی اس اس و توصیه W3C است. این مجموعه در سال ۱۹۹۶ با قابلیت های ویژگی های فونت راه اندازی شد. همچنین برای اضافه کردن رنگ به پشت و قسمت متن استفاده می شود. در CSS 1، قابلیت های همخوانی متن وجود داشت. همچنین قابلیت های موقعیت بندی و طبقه بندی عمومی دارد. اما اکنون این نسخه توسط W3C قابل استفاده نیست.
CSS2
W3C نسخه بعدی CSS را توسعه داد و آن را CSS2 نامید و در سال ۱۹۹۸ راه اندازی کرد. این روش دارای ویژگی ها و قابلیت های بیشتری نسبت به نسخه قبلی است. در حال حاضر کاربران می توانند از ویژگی های جدید مانند نسبی، مطلق و موقعیت ثابت استفاده کنند. انواع رسانه ها وجود داشت و ویژگی های متن پیشنهادی نیز وجود داشت. این نسخه همچنین در همان حال، تغییرات زیادی را مشاهده کرد و به روز رسانی CSS2.1 به روز رسانی شد.
CSS3
سی ۳ آخرین نسخه CSS به طور رسمی توسط W3C است و در سال ۱۹۹۹ راه اندازی شد. این مجموعه مجموعه ای از انواع فونت دارد و شما می توانید از هر نوع فونت از گوگل و تایست استفاده کنید. همچنین این نسخه به بسیاری از ماژول ها تقسیم می شود که به راحتی قابل رسیدگی است و همچنین باعث صرفه جویی در زمان فرم کردن صفحات وب می شود. در حال حاضر بیشتر شرکت ها و سازمان ها از CSS3 و HTML5 برای توسعه وب و طراحی وظایف خود استفاده می کنند. از این رو، اگر می خواهید چنین مهارت هایی را یاد بگیرید، پس مطمئن شوید که آخرین راه اندازی این فناوری را یاد خواهید گرفت.
ریسپانسیو کردن با css
همانطور که میدانید در زمان‌های گذشته بیشتر افراد از طریق سیستم‌های کامپیوتری به وب‌گردی و مشاهده صفحات وب می‌پرداختند. اما امروزه با پیشرفت تکنولوژی، دسترسی به اینترنت با دستگاه‌هایی مثل گوشی ، تبلت، ساعت‌های هوشمند و … افزایش پیدا کرده است. این امر سبب شد که توسعه دهندگان به فکر سازگار کردن صفحات وبسایتها با دستگاه‌های هوشمند بیفتند.سازگار کردن صفحات وبسایتها همان Responsive یا واکنشگرا کردن است. به عبارت دیگر یعنی بتوانید صفحات وب سایت را در رزولوشن‌های مختلفی مشاهده کنید، بدون اینکه صفحه مورد نظر با اختلالی رو به رو شود. پیاده سازی این قابلیت با فریم ورک هایی که برای css نوشته شده است، بسیار ساده و سریع شده است.
webkit در css چیست؟
WebKit یک موتور طراحی است که به مرورگرهای وب اجازه ارائه صفحات وب را می دهد. Webkit موتور ارائه دهنده html / css است که در مرورگر Safari اپل و در Chrome Chrome استفاده می شود.
Scss چیست ؟
Scss پسوند نحوی CSS است. این بدان معنی است که هر شیوه نامه معتبر CSS یک پرونده SCSS معتبر با همان معنی است. علاوه بر این ، SCSS بیشتر هک های CSS و نحو اختصاصی فروشنده ، مانند فیلتر قدیمی IE را می فهمد.
فرمت فایل css چیست ؟
در پاسخ به این پرسش بایستی گفت فرمت فایل سی اس اس، css. می باشد.
برای یادگیری CSS باید چه چیز هایی را بدانیم؟
در این دوره شما بدون هیچ پیش نیاز و مقدمه ایی می توانید به یادگیری CSS بپردازید چرا که ما در دوره CSS تمامی مباحث را از صفر تا صد و از مقدماتی تا پیشرفته توضیح خواهیم داد.
در دوره آموزش CSS چه مباحثی را یاد می‌گیرید؟
در این دوره آموزشی CSS مطابr سرفصل ها که در ذیل ذگر شده است تمامی مباحث مرتبط با CSS را کاملا یاد خواهیم گرفت و یک پروژه واقعی را باهم پیاده سازی خواهیم کرد.
این دوره ویژه چه کسانی هست؟
این دوره برا کسانی مه قصد یادگیری برنامه نویسی وب یا همان طراحی سایت را دارند مناسب می باشد.
سی اس اس برای چه کاری استفاده می شود ؟
CSS عمدتاً برای توسعه وب یا طراحی صفحه استفاده می شود. این به ورقه های سبک آبشار اشاره دارد که می تواند با استفاده از ویژگی های بسیاری، صفحه وب را شکل دهد. می توانید در سی اس اسآن را سبک کنید، اندازه میز را مدیریت کنید و جنبه های دیگر صفحات وب را ویرایش کنید تا آن ها را جذاب سازد. با استفاده از CSS، کاربر می تواند یک نگاه یکنواخت به وب سایت و چندین صفحه خود بدهد. این جدول نه تنها جدول را تعریف نمی کند بلکه نیازهای طراحی دیگری را نیز دارد.با کمک CSS، کاربر می تواند در چندین صفحه، بلافاصله تغییرات را در چندین صفحه ایجاد کند. فرض کنید اگر شما نیاز به بزرگ تر کردن متن از تمام صفحات وب داشته باشید، سپس با تغییر اندازه فونت در CSS، می توانید اندازه متن را بزرگتر کنید. و کارهای دیگری هم هست که می توانید با استفاده از ورق های سبک آبشار به راحتی انجام دهید. به دلیل این ویژگی ها، CSS به یک زبان مهم برای طراحی و توسعه وب تبدیل شده است.
ما از CSS به دلایل زیر استفاده می کنیم:
CSS باعث صرفه جویی در زمان می شود: می توانید یک بار CSS بنویسید و از همان برگه در چندین صفحه HTML استفاده مجدد کنید.
تعمیر و نگهداری آسان: برای ایجاد یک تغییر کلی، به سادگی سبک را تغییر دهید، و همه عناصر در همه صفحات وب به طور خودکار به روز می شوند.
موتورهای جستجو: CSS در نظر گرفته می شود یک تکنیک کدنویسی تمیز، به این معنی که موتورهای جستجو برای «خواندن» محتوای آن دچار مشکل نخواهند شد.
سبک‌های برتر در HTML: CSS دارای مجموعه‌ای از ویژگی‌های بسیار گسترده‌تر از HTML است، بنابراین می‌توانید ظاهر بسیار بهتری به صفحه HTML خود بدهید. در مقایسه با ویژگی‌های HTML.
مرور آفلاین: CSS می‌تواند برنامه‌های وب را به صورت محلی با کمک حافظه پنهان آفلاین ذخیره کند. با استفاده از این ما می توانیم وب سایت های آفلاین را مشاهده کنیم
مزایای CSS چیست؟
CSS نقش مهمی ایفا می کند، با استفاده از CSS شما به سادگی می توانید یک استایل تکراری را برای یک عنصر مشخص کنید و چندین بار از آن استفاده کنید زیرا CSS به طور خودکار سبک های مورد نیاز را اعمال می کند. مزیت اصلی CSS این است که سبک به طور مداوم در انواع مختلف اعمال می شود. سایت های. یک دستورالعمل می تواند چندین حوزه را که سودمند هستند کنترل کند. طراحان وب باید برای هر صفحه از چند خط برنامه نویسی استفاده کنند که سرعت سایت را بهبود می بخشد. برگه آبشاری نه تنها توسعه وب سایت را ساده می کند، بلکه تعمیر و نگهداری را نیز ساده می کند زیرا تغییر یک خط کد بر کل وب سایت تأثیر می گذارد. و زمان تعمیر و نگهداری. پیچیدگی کمتری دارد بنابراین تلاش به میزان قابل توجهی کاهش می یابد. به ایجاد تغییرات خود به خود و مداوم کمک می کند. تغییرات CSS برای دستگاه مناسب هستند. با توجه به افرادی که از طیف وسیعی از دستگاه‌های هوشمند برای دسترسی به وبسایتها از طریق وب استفاده می‌کنند، نیاز به طراحی وب واکنشگرا وجود دارد. این دستگاه قدرت موقعیت‌یابی مجدد را دارد. این به ما کمک می کند تا تغییرات را در موقعیت عناصر وب که در صفحه وجود دارند تعیین کنیم. این صرفه جویی در پهنای باند ارقام قابل توجهی از برچسب های ناچیز است که از صفحات به هم ریخته متمایز نیست. سفارشی کردن صفحه آنلاین برای کاربر آسان است و فایل را کاهش می دهد. اندازه انتقال
معایب CSS چیست؟
CSS، CSS 1 تا CSS3 منجر به ایجاد سردرگمی در بین مرورگرهای وب می شود. در CSS، آنچه با یک مرورگر کار می کند ممکن است همیشه با مرورگر دیگر کار نکند. توسعه دهندگان وب باید سازگاری را آزمایش کنند و برنامه را در چندین مرورگر اجرا کنند. امنیت کمیاب وجود دارد. پس از ایجاد تغییرات، در صورت ظاهر شدن باید سازگاری را تأیید کنیم. یک تغییر مشابه بر همه مرورگرها تأثیر می گذارد. دنیای زبان برنامه نویسی برای غیر توسعه دهندگان و مبتدیان پیچیده است. سطوح مختلف CSS یعنی CSS، CSS 2، CSS 3 اغلب کاملاً گیج کننده هستند. سازگاری با مرورگر (برخی از شیوه نامه ها پشتیبانی می شوند و برخی دیگر پشتیبانی نمی شوند). CSS در مرورگرهای مختلف متفاوت عمل می کند. اینترنت اکسپلورر و اپرا از CSS به‌عنوان منطقی متفاوت پشتیبانی می‌کنند. ممکن است هنگام استفاده از CSS، مشکلات مرورگر متقابل وجود داشته باشد. سطوح متعددی وجود دارد که برای غیر توسعه‌دهندگان و مبتدی‌ها سردرگمی ایجاد میکند.
چرا از CSS استفاده می کنند
این سه مزایای اصلی CSS هستند:
مسئله بزرگی را حل می کند; قبل از CSS، برچسب هایی مانند فونت، رنگ، سبک پس زمینه، هم تراز های عناصر، مرز و اندازه باید در هر صفحه وب تکرار شود. این یک فرایند بسیار طولانی بود. برای مثال: اگر در حال توسعه یک وب سایت بزرگ هستید که در آن فونت ها و اطلاعات رنگ در هر صفحه اضافه می شود، به یک فرایند طولانی و گران تبدیل می شود. CSS برای حل این مشکل ایجاد شد. این یک توصیه W3C بود.وقت زیادی را نجات می دهد تعریف های سبک CSS در پرونده های خارجی CSS ذخیره شده است بنابراین می توان کل وب سایت را با تغییر تنها یک فایل تغییر داد. ویژگی های بیشتری ارائه میکند. ویژگی هایی که ارائه میشود توسط CSS مفصل تری نسبت به HTMLساده برای تعریف نگاه و احساس وب سایت فراهم می کند.
چرا CSS یک زبان برنامه نویسی نیست!
خیلی از اشخاصی که به خوبی مفهوم CSS را درک نکرده اند و نتوانسته اند که پاسخ خوبی برای سوالCSS چیست پیدا کنند، CSS را یک زبان برنامه نویسی میدانند که کاملا اشتباه است.
CSS هرگز نمیتواند یک زبان برنامه نویسی باشد. زیرا اصلا ویژگی های یک زبان برنامه نویسی، مثل متغیر ها، توابع، شرط ها، حلقه ها و… را ندارد. پس کاملا اشتباه است اگر CSS را یک زبان برنامه نویسی بدانیم. میتوانیم درباره‌یCSS بگوییم که ابزاری است که استفاده از آن میتوانیم تگ های HTML خود را زیبا کنیم و صفحات وب چشم نوازی را طراحی کنیم.
جلسات دوره
0
1-
11 دقیقه
1
2-
در این قسمت به نصب و معرفی نرم افزار های مورد نیاز میپردازیم.
25 دقیقه
2
3-
3
4-
در این جلسه اموزش مقدماتی CSS را خواهیم داشت.
10 دقیقه
4
5-
در ایم قست کار با تگ های کاربردی لینک، تصویر و فاصله و خط افقی را فرا میگیریم.
18 دقیقه
5
6-
در این قسمت با آموزش Text Formatting در HTML سر و کار داریم و تمرین جلسه قبل رو باهم برسی خواهیم کرد.
30 دقیقه
6
7-
فایل های پروژه را می تونوانید از اینجا دانلود نمایید
7
8-
در این قسمت در رابطه با تگ های کامنت و رنگ و استایل بحث خواهیم کرد.
14 دقیقه
8
9-
18 دقیقه
9
10-
در این قسمت با ادامه آموزش تگ های جدول در HTML صحبت خواهیم کرد.
16 دقیقه
10
11-
در این قسمت با آموزش تگ های لیست در HTML صحبت خواهیم کرد.
18 دقیقه
11
12-
در این قسمت با آموزش کار با تگ DIV در HTML صحبت خواهیم کرد.
14 دقیقه
12
13-
این قسمت آموزش کار با Class ها و نحوه استفاده در HTML را خواهیم داشت.
11 دقیقه
13
14-
این قسمت آموزش کار با ID ها و نحوه استفاده در HTML را خواهیم داشت.
14 دقیقه
14
15-
این قسمت آموزش کار با Iframes ها و نحوه استفاده در HTML را خواهیم داشت.
8 دقیقه
15
16-
این قسمت آموزش کار با Layout ها و نحوه استفاده آن در HTML را خواهیم داشت.
14 دقیقه
16
17-
این قسمت آموزش کار با form ها و نحوه استفاده آن در HTML را خواهیم داشت.
9 دقیقه
17
18-
این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.
21 دقیقه
18
19-
این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.
17 دقیقه
19
20-
این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.
16 دقیقه
20
21-
21
22-
این قسمت آموزش کار با مدیا ها و نحوه استفاده آن در HTML را خواهیم داشت.
7 دقیقه
22
23-
این قسمت ادامه آموزش کار با مدیا ها و نحوه استفاده آن در HTML را خواهیم داشت.
7 دقیقه
23
24-
24
25-
این قسمت آموزش کار با استایل ها و نحوه استفاده آن در CSS را خواهیم داشت.
9 دقیقه
25
26-
این قسمت آموزش کار با سلکتور ها و نحوه استفاده آن در CSS را خواهیم داشت.
14 دقیقه
26
27-
این قسمت آموزش کار با کلاس ها و آیدی ها و نحوه استفاده آن در CSS را خواهیم داشت.
12 دقیقه
27
28-
این قسمت آموزش کار با borders ها و نحوه استفاده آن در CSS را خواهیم داشت.
11 دقیقه
28
29-
این قسمت آموزش کار با مارجین ها و نحوه استفاده آن در CSS را خواهیم داشت.
5 دقیقه
29
30-
این قسمت آموزش کار با پدینگ ها و نحوه استفاده آن در CSS را خواهیم داشت.
5 دقیقه
30
31-
31
32-
این قسمت آموزش کار با Outline ها و نحوه استفاده آن در CSS را خواهیم داشت.
8 دقیقه
32
33-
این قسمت آموزش کار با متن ها و نحوه استفاده آن در CSS را خواهیم داشت.
19 دقیقه
33
34-
این قسمت آموزش کار با فونت ها و نحوه استفاده آن در CSS را خواهیم داشت.
7 دقیقه
34
35-
این قسمت آموزش کار با آیکون ها و نحوه استفاده آن در CSS را خواهیم داشت.
14 دقیقه
35
36-
این قسمت آموزش کار با لینک ها و نحوه استفاده آن در CSS را خواهیم داشت.
9 دقیقه
36
37-
این قسمت آموزش کار با لیست ها و نحوه استفاده آن در CSS را خواهیم داشت.
4 دقیقه
37
38-
این قسمت آموزش کار با جدول ها و نحوه استفاده آن در CSS را خواهیم داشت.
13 دقیقه
38
39-
این قسمت آموزش کار با display ها و نحوه استفاده آن در CSS را خواهیم داشت.
11 دقیقه
39
40-
این قسمت آموزش کار با طول و عرض المنت ها و نحوه استفاده آن در CSS را خواهیم داشت.
6 دقیقه
40
41-
این قسمت آموزش کار با پوزیشن ها و نحوه استفاده آن در CSS را خواهیم داشت.
12 دقیقه
41
42-
42
43-
این قسمت آموزش کار با z-index ها و نحوه استفاده آن در CSS را خواهیم داشت.
5 دقیقه
43
44-
این قسمت آموزش کار با Overflow ها و نحوه استفاده آن در CSS را خواهیم داشت.
6 دقیقه
44
45-
این قسمت آموزش کار با float ها و نحوه استفاده آن در CSS را خواهیم داشت.
8 دقیقه
45
46-
این قسمت آموزش کار با inline-block و نمایش ها و نحوه استفاده آن در CSS را خواهیم داشت.
5 دقیقه
46
47-
این قسمت آموزش کار با استایل دهی به صورت افقی و عمودی ها و نحوه استفاده آن در CSS را خواهیم داشت.
8 دقیقه
47
48-
این قسمت آموزش کار با ترکیب کننده ها و نحوه استفاده آن در CSS را خواهیم داشت.
5 دقیقه
48
49-
این قسمت آموزش کار با Pseudo-classes ها و نحوه استفاده آن در CSS را خواهیم داشت.
6 دقیقه
49
50-
این قسمت آموزش کار با CSS Pseudo-elements ها و نحوه استفاده آن در CSS را خواهیم داشت.
6 دقیقه
50
51-
4 دقیقه
51
52-
این قسمت آموزش کار با آموزش Navigation Bar و نحوه استفاده آن در CSS را خواهیم داشت.
15 دقیقه
52
53-
این قسمت آموزش کار با آموزش Dropdowns و نحوه استفاده آن در CSS را خواهیم داشت.
7 دقیقه
53
54-
این قسمت آموزش کار با آموزش Image Gallery ها و نحوه استفاده آن در CSS را خواهیم داشت.
3 دقیقه
54
55-
این قسمت آموزش کار با آموزش انتخاب گر سلکتور ها و نحوه استفاده آن در CSS را خواهیم داشت.
7 دقیقه
55
56-
این قسمت آموزش کار با آموزش فرم ها و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
56
57-
این قسمت آموزش کار با آموزش شمارنده ها و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
57
58-
این قسمت آموزش کار با آموزش CSS Website Layout ها و نحوه استفاده آن در CSS را خواهیم داشت.
10
58
59-
این قسمت آموزش کار با آموزش آموزش CSS Units ها و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
59
60-
این قسمت آموزش کار با آموزش CSS Specificity ها و نحوه استفاده آن در CSS را خواهیم داشت.
11 دقیقه
60
61-
این قسمت آموزش کار با آموزش !important Rule ها و نحوه استفاده آن در CSS را خواهیم داشت.
11 دقیقه
61
62-
این قسمت آموزش کار با آموزش تابع های ریاضی در CSS و نحوه استفاده آن در CSS را خواهیم داشت.
11 دقیقه
62
63-
این قسمت آموزش کار با آموزش گوشه های گرد در CSS یا CSS Rounded Corners و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
63
64-
10 دقیقه
64
65-
این قسمت آموزش کار با آموزش پس زمینه ها در CSS یا CSS Multiple Backgrounds و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
65
66-
10 دقیقه
66
67-
10 دقیقه
67
68-
این قسمت آموزش کار با آموزش گردینت های CSS یا CSS Gradients و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
68
69-
این قسمت آموزش کار با سایه ها در CSS یا CSS Shadows و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
69
70-
10 دقیقه
70
71-
این قسمت آموزش کار با تبدیل های دو بعدی در CSS یا CSS 2D Transforms و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
71
72-
این قسمت آموزش کار باتبدیل های سه بعدی در CSS یا CSS 3D Transforms و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
72
73-
این قسمت آموزش کار با انتقال ها در CSS یا CSS Transitions و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
73
74-
این قسمت آموزش کار با تصاویر متحرک در CSS یا CSS Animations و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
74
75-
این قسمت آموزش کار با نکات ابزار در CSS یا CSS Tooltip و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
75
76-
این قسمت آموزش کار با سبک تصاویر در CSS یا CSS Styling Images و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
76
77-
این قسمت آموزش کار با انعکاس تصویر در CSS یا CSS Image Reflection و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
77
78-
این قسمت آموزش کار باشی مناسب در CSS یا CSS OBJECT-FIT و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
78
79-
این قسمت آموزش کار با موقعیت شی در CNN یا CSS The object-position Property و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
79
80-
این قسمت آموزش کار با پوشاندن در CSS یا CSS Masking و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
80
81-
این قسمت آموزش کاراین قسمت آموزش کار با دکمه ها در CSS یا CSS Buttons و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
81
82-
این قسمت آموزش کار با رابط کاربری در CSS یا CSS User Interface و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
82
83-
این قسمت آموزش کار بامتغیر ها در CSS یا CSS Variables - The var() Function و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
83
84-
این قسمت آموزش کار با اندازه جعبه در CSS یا CSS BOX SIZING و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
84
85-
این قسمت آموزش کار با داستان های رسانه در CSS یا CSS MEDIA QUERIES و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
85
86-
این قسمت آموزش کار بامثال های داستان های رسانه یا CSS Media Queries - Examples و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
86
87-
این قسمت آموزش کار با فلکس باکس در CSS یا CSS FLEXBOX و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
87
88-
این قسمت آموزش کار با طراحی وب سایت واکنش گرا یا Responsive Web Design و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
88
89-
این قسمت آموزش کار با درگاه دید RWD Responsive Web Design - The Viewportو نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
89
90-
این قسمت آموزش کار با نمای شبکه ای RWD یا Responsive Web Design - Grid-View و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
90
91-
این قسمت آموزش کار با داستان های رسانه RWD یا Responsive Web Design - Media Queriesو نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
91
92-
این قسمت آموزش کار با تصاویر RWD یا Responsive Web Design - Imagesو نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
92
93-
این قسمت آموزش کار با ویدیوهای RWD یا Responsive Web Design - Videos و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
93
94-
این قسمت آموزش کار با چارچوب های RWD یا Responsive Web Design - Frameworks و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
94
95-
این قسمت آموزش کار با قالب های RWD یا Responsive Web Design - Templates و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
95
96-
این قسمت آموزش کار با مدل طرح بندی شبکه ای در CSS یا CSS Grid Layout Module و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
96
97-
این قسمت آموزش کار با محتوای شبکه ای CSS یا CSS Grid Container و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
97
98-
12دقیقه
98
99-
این قسمت آموزش کار با CSS Multiple Columns و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
99
100-
در این قسمت از اموزش کار با بوت استرپ را خواهیم داشت .
10 دقیقه
100
101-
این قسمت آموزش کار با Bootstrap Containers و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
101
102-
این قسمت آموزش کار با Bootstrap Typography و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
102
103-
این قسمت آموزش کار با Bootstrap Grid Basic و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
103
104-
این قسمت آموزش کار با رنگ ها در بوت اسپرت و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
104
105-
این قسمت آموزش کار با Bootstrap images و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
105
106-
این قسمت آموزش کار با Bootstrap Jumbotron و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
106
107-
این قسمت آموزش کار با Bootstrap Alertsو نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
107
108-
این قسمت آموزش کار با Bootstrap Buttons و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
108
109-
این قسمت آموزش کار با Bootstrap Button Groupsو نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
109
110-
این قسمت آموزش کار با Bootstrap Badges و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
110
111-
این قسمت آموزش کار با Bootstrap Progress Bars و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
111
112-
این قسمت آموزش کار با Bootstrap Spinners و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
112
113-
این قسمت آموزش کار با Bootstrap Pagination و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
113
114-
این قسمت آموزش کار با Bootstrap List Groups و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
114
115-
این قسمت آموزش کار با Bootstrap Cards و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
115
116-
این قسمت آموزش کار با Bootstrap Dropdowns و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
116
117-
10 دقیقه
117
118-
این قسمت آموزش کار با Bootstrap Navs و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
118
119-
این قسمت آموزش کار با Bootstrap Navbars و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
119
120-
این قسمت آموزش کار با Bootstrap Modal و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
120
121-
این قسمت آموزش کار با Bootstrap Tooltip و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
121
122-
10 دقیقه
122
123-
این قسمت آموزش کار با Bootstrap Popover و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
123
124-
این قسمت آموزش کار با Bootstrap Toasts و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
124
125-
این قسمت آموزش کار با Bootstrap Scrollspy و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
125
126-
این قسمت آموزش کار با Bootstrap Offcanvas و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
126
127-
این قسمت آموزش کار با Bootstrap Utilities و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
127
128-
این قسمت آموزش کار با Bootstrap Flex و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
128
129-
این قسمت آموزش کار با Bootstrap Forms و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
129
130-
این قسمت آموزش کار با Bootstrap Select و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
130
131-
این قسمت آموزش کار با Bootstrap Checkboxes and Radio buttons و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
131
132-
این قسمت آموزش کار با Bootstrap Rangeو نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
132
133-
این قسمت آموزش کار با Bootstrap Input Groups و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
133
134-
این قسمت آموزش کار با Bootstrap Form Floating Labels و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
134
135-
این قسمت آموزش کار با Bootstrap Form Validation و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
135
136-
این قسمت آموزش کار با Bootstrap Grid System و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
136
137-
این قسمت آموزش کار با Bootstrap Grid Stacked to horizontal و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
137
138-
این قسمت آموزش کار با Bootstrap Grid Extra Small و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
138
139-
این قسمت آموزش کار با Bootstrap Grid Smallو نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
139
140-
این قسمت آموزش کار با Bootstrap Grid Large و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
140
141-
این قسمت آموزش کار با Bootstrap Grid Extra Large و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
141
142-
این قسمت آموزش کار با Bootstrap Grid XXL و نحوه استفاده در بوت استرپ را خواهیم داشت.
10 دقیقه
142
143-
10 دقیقه
143
144-
10 دقیقه
144
145-
این قسمت آموزش کار با صفحه بندی در CNN یا CSS Pagination و نحوه استفاده آن در CSS را خواهیم داشت.
10 دقیقه
145
146-
در این جلسات، یک پروژه کامل فرانت وب سایت که شما را برای ورود به بازار کار می سازد، انجام خواهیم داد.
10 ساعت
146
سوالات متداول
دیدگاه و پرسش
-
امیرحسین پورسمیع
1 سال پیش
ثبت امتیاز بسیار عالی
ویژگی های دوره
- پشتیبانی دارد
- روش دریافت دانلود و مشاهده آنلاین
- پیش نیاز بدون پیش نیاز
- نوع دوره ویدویی
- آیا پروژه محور است؟ بله
- مدرک دارد
امیرحسین پورسمیع
من امیرحسین پورسیمع فارغ تحصیل از دانشگاه بین الملل امام خمینی، دارای مدرک کارشناسی نرم افزار و کارشناسی ارشد هوش مصنوعی هستم، من در زمینه های برنامه نویسی وب سایت (طراحی سایت ) با زبان های PHP و JavaScript ، برنامه نویسی پایتون، هوش مصنوعی فعالیت دارم و به زبان های انگلیسی و آلمانی مسلط هستم و در حال حاضر مدیرعامل شرکت برنامه نویسی فونیکس و آکادمی آرته سافت هستم.
دوره های مرتبط با این دوره!
برنامه نویسی وب، طراحی سایت از مقدماتی تا پیشرفته ( پروژه محور)
507
(دانشجو)3.3
( 8 نظر )
