برنامه نویسی
روز 1 از 100: غواصی در HTML و CSS – بلوک های ساختمان وب

ek3nk4r 2024-08-12
0 3 خواندن این مطلب 2 دقیقه زمان میبرد
روز 1 از 100: غواصی در HTML و CSS – بلوک های ساختمان وب
پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام
HTML (زبان نشانه گذاری فرامتن) و CSS (برگ های سبک آبشاری) پایه و اساس توسعه وب هستند. این چیزی است که امروز پوشش دادم:
ملزومات HTML:
ساختار سند , , ,


برچسب های اصلی: , , 

, 

لیست ها: , 

، 



پیوندها: 


تصاویر: 


جداول: 

, 
, 
, 


Forms: , ، </code>، <code><button/></code></p>
</li>
<li>
<p>عناصر معنایی HTML5: <code></p>
<header/></code>، <code></p>
<nav/></code>، <code><main/></code>، <code></p>
<article/></code>، <code></p>
<section/></code>، <code></p>
<aside/></code>، <code></p>
<footer/></code></p>
</li>
<li>
<p>متا تگ ها برای سئو و پاسخگویی</p>
</li>
<p>اصول CSS:</p>
<ul>
<li>
<p>CSS داخلی، داخلی و خارجی</p>
</li>
<li>
<p>انتخابگرها: عنصر، کلاس، شناسه، ویژگی، شبه کلاس و شبه عنصر</p>
</li>
<li>
<p>خواص اساسی: <code>color</code>، <code>background-color</code>، <code>font-size</code>، <code>margin</code>، <code>padding</code></p>
</li>
<li>
<p>مدل جعبه: <code>width</code>، <code>height</code>، <code>border</code>، <code>box-sizing</code></p>
</li>
<li>
<p>سبک متن: <code>font-family</code>، <code>font-weight</code>، <code>text-align</code>، <code>text-decoration</code></p>
</li>
<li>
<p>ویژگی های چیدمان: <code>display</code>، <code>position</code>، <code>float</code></p>
</li>
<li>
<p>اصول Flexbox: نمایش: <code>flex</code>، <code>flex-direction</code>، <code>ustify-content</code>، <code>align-items</code></p>
</li>
<li>
<p>معرفی CSS Grid: نمایش: <code>grid</code>، <code>grid-template-columns</code>، <code>grid-template-rows</code></p>
</li>
<li>
<p>اصول طراحی پاسخگو: پرس و جوهای رسانه، متا تگ viewport</p>
</li>
<li>
<p>متغیرهای CSS (ویژگی های سفارشی)</p>
</li>
<li>
<p>انتقال و انیمیشن های ساده</p>
</li>
</ul>
<p>چیزی که من ساختم<br />برای تمرین این مفاهیم، یک صفحه وب ساده "درباره من" ایجاد کردم. در اینجا یک قطعه توسعه یافته از ساختار HTML آمده است:</p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>


    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>About Me</title>
    <link rel="stylesheet" href="https://dev.to/pratham11/styles.css"/>


    <header>
        
        <nav>
            
        </nav>
    </header>
    <main>
        <section id="about">
            <div id="ez-toc-container" class="ez-toc-v2_0_74 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction">
<div class="ez-toc-title-container">
<p class="ez-toc-title" style="cursor:inherit">فهرست مطالب</p>
<span class="ez-toc-title-toggle"><a href="#" class="ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle" aria-label="Toggle Table of Content"><span class="ez-toc-js-icon-con"><span class=""><span class="eztoc-hide" style="display:none;">Toggle</span><span class="ez-toc-icon-toggle-span"><svg style="fill: #999;color:#999" xmlns="http://www.w3.org/2000/svg" class="list-377408" width="20px" height="20px" viewBox="0 0 24 24" fill="none"><path d="M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z" fill="currentColor"></path></svg><svg style="fill: #999;color:#999" class="arrow-unsorted-368013" xmlns="http://www.w3.org/2000/svg" width="10px" height="10px" viewBox="0 0 24 24" version="1.2" baseProfile="tiny"><path d="M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z"/></svg></span></span></span></a></span></div>
<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-1" href="#About_Me" >About Me</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-2" href="#My_Skills" >My Skills</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-3" href="#Contact_Me" >Contact Me</a></li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class="ez-toc-link ez-toc-heading-4" href="#%D8%AF%D8%B1_%D8%A7%D8%AF%D8%A7%D9%85%D9%87_%D8%A8%D8%AE%D9%88%D8%A7%D9%86%DB%8C%D8%AF" >در ادامه بخوانید</a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-5" href="#%D8%B1%D9%88%D9%86%D9%85%D8%A7%DB%8C%DB%8C_%D8%A7%D8%B2_Llama_3_%D9%85%D8%AF%D9%84%E2%80%8C%D9%87%D8%A7%DB%8C_%DA%86%D9%86%D8%AF%D8%B2%D8%A8%D8%A7%D9%86%D9%87%D8%8C_%DA%A9%D8%AF_%D8%A2%D9%85%D9%88%D8%B2_%D9%88_%D8%A7%D8%B3%D8%AA%D8%AF%D9%84%D8%A7%D9%84_%D8%A7%DA%A9%D8%B3%D9%84_%D9%85%D8%A7%D9%86%D9%86%D8%AF_GPT-4" >رونمایی از Llama 3: مدل‌های چندزبانه، کد آموز و استدلال اکسل مانند GPT-4</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-6" href="#%D8%A2%D9%85%D9%88%D8%B2%D8%B4_%D8%A2%D9%85%D9%88%D8%B2%D8%B4_%D9%85%D8%AF%DB%8C%D8%B1_%D9%81%D8%B1%D9%88%D8%B4" >آموزش آموزش مدیر فروش</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-7" href="#%F0%9F%94%A5%D8%B1%D9%88%D8%B4_%D9%87%D8%A7%DB%8C_%D8%A2%D8%B1%D8%A7%DB%8C%D9%87_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA" >🔥روش های آرایه پیشرفته در جاوا اسکریپت</a></li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class="ez-toc-link ez-toc-heading-8" href="#%D8%B1%D9%88%D8%B2_36_%D8%A7%D8%B2_100_%D8%B1%D9%88%D8%B2_%DA%A9%D8%AF" >روز 36 از 100 روز کد</a></li></ul></li></ul></nav></div>
<h2><span class="ez-toc-section" id="About_Me"></span>About Me<span class="ez-toc-section-end"></span></h2>
            <p>Hello, I'm Pratham. I'm learning web development!</p>
            <img decoding="async" src="profile.jpg" alt="عکس پروفایل من" title="روز 1 از 100: غواصی در HTML و CSS - بلوک های ساختمان وب 2">
        </section>
        <section id="skills">
            <h2><span class="ez-toc-section" id="My_Skills"></span>My Skills<span class="ez-toc-section-end"></span></h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>Learning JavaScript</li>
            </ul>
        </section>
        <section id="contact">
            <h2><span class="ez-toc-section" id="Contact_Me"></span>Contact Me<span class="ez-toc-section-end"></span></h2>
            
        </section>
    </main>
    <footer>
        <p>© 2024 Pratham. All rights reserved.</p>
    </footer>


</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>وارد حالت تمام صفحه شوید</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"/>
</svg></p>
<p>    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>از حالت تمام صفحه خارج شوید</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"/>
</svg></p>
</div>
</div>
</div>
<p>CSS:</p>
<div class="highlight js-code-highlight">
<pre class="highlight plaintext"><code>:root {
    --primary-color: #333;
    --secondary-color: #666;
    --background-color: #f4f4f4;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
}

header {
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
}

nav ul li {
    margin-right: 1rem;
}

nav a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
}

h1, h2 {
    color: var(--primary-color);
}

p {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
}

form {
    display: grid;
    gap: 1rem;
}

button {
    background-color: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--secondary-color);
}

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
    }
}
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>وارد حالت تمام صفحه شوید</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"/>
</svg></p>
<p>    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>از حالت تمام صفحه خارج شوید</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"/>
</svg></p>
</div>
</div>
</div>
<p>چالش های پیش رو<br />آشنایی با مدل جعبه در CSS<br />به یاد داشته باشید که تمام تگ های HTML را به درستی ببندید<br />درک ماهیت آبشاری CSS</p>
<p>خوراکی های کلیدی<br />HTML ساختار را ارائه می دهد، در حالی که CSS استایل را ارائه می دهد.<br />آبشار در CSS می تواند هم قدرتمند و هم پیچیده باشد.<br />ابزارهای توسعه دهنده مرورگر برای بازرسی و رفع اشکال بسیار ارزشمند هستند.</p>
<p>چه خبر بعدی<br />فردا، من قصد دارم عمیق‌تر در طرح‌بندی‌های CSS غوطه‌ور شوم، به خوبی کاوش کنم و یک کلون از هر وب‌سایتی ایجاد کنم.</p>
<section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden" id="bottom-content-read-next">
<h2 class="crayons-subtitle-1"><span class="ez-toc-section" id="%D8%AF%D8%B1_%D8%A7%D8%AF%D8%A7%D9%85%D9%87_%D8%A8%D8%AE%D9%88%D8%A7%D9%86%DB%8C%D8%AF"></span>در ادامه بخوانید<span class="ez-toc-section-end"></span></h2>
<div class="flex items-center">
          <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"><br />
              <img decoding="async" loading="lazy" alt="عکس پروفایل mikeyoung44" class="crayons-avatar__image" width="100" height="100" src="https://media.dev.to/cdn-cgi/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1054351%2F445fb057-59a3-41ac-81ec-9d0c93a5c618.jpg" title="روز 1 از 100: غواصی در HTML و CSS - بلوک های ساختمان وب 3"><br />
          </span></p>
<div>
<h3 class="fs-xl mb-0 lh-tight"><span class="ez-toc-section" id="%D8%B1%D9%88%D9%86%D9%85%D8%A7%DB%8C%DB%8C_%D8%A7%D8%B2_Llama_3_%D9%85%D8%AF%D9%84%E2%80%8C%D9%87%D8%A7%DB%8C_%DA%86%D9%86%D8%AF%D8%B2%D8%A8%D8%A7%D9%86%D9%87%D8%8C_%DA%A9%D8%AF_%D8%A2%D9%85%D9%88%D8%B2_%D9%88_%D8%A7%D8%B3%D8%AA%D8%AF%D9%84%D8%A7%D9%84_%D8%A7%DA%A9%D8%B3%D9%84_%D9%85%D8%A7%D9%86%D9%86%D8%AF_GPT-4"></span>رونمایی از Llama 3: مدل‌های چندزبانه، کد آموز و استدلال اکسل مانند GPT-4<span class="ez-toc-section-end"></span></h3>
<p class="opacity-75 pt-1">
<p>              مایک یانگ - <time datetime="2024-08-02T08:28:00Z">2 اوت</time>
            </p>
</p></div>
</p></div>
<div class="flex items-center">
          <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"><br />
              <img decoding="async" loading="lazy" alt="عکس پروفایل ray_brad_b2411152bc20ee47" class="crayons-avatar__image" width="100" height="100" src="https://media.dev.to/cdn-cgi/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1869108%2Fa1acd368-67fa-44ff-95eb-97a29c82db96.png" title="روز 1 از 100: غواصی در HTML و CSS - بلوک های ساختمان وب 4"><br />
          </span></p>
<div>
<h3 class="fs-xl mb-0 lh-tight"><span class="ez-toc-section" id="%D8%A2%D9%85%D9%88%D8%B2%D8%B4_%D8%A2%D9%85%D9%88%D8%B2%D8%B4_%D9%85%D8%AF%DB%8C%D8%B1_%D9%81%D8%B1%D9%88%D8%B4"></span>آموزش آموزش مدیر فروش<span class="ez-toc-section-end"></span></h3>
<p class="opacity-75 pt-1">
<p>              ری براد - <time datetime="2024-08-06T09:59:32Z">6 آگوست</time>
            </p>
</p></div>
</p></div>
<div class="flex items-center">
          <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"><br />
              <img decoding="async" loading="lazy" alt="تصویر پروفایل noorscript" class="crayons-avatar__image" width="100" height="100" src="https://media.dev.to/cdn-cgi/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1775729%2F5b7f6320-5a67-41d7-803e-56ccf51deaef.jpg" title="روز 1 از 100: غواصی در HTML و CSS - بلوک های ساختمان وب 5"><br />
          </span></p>
<div>
<h3 class="fs-xl mb-0 lh-tight"><span class="ez-toc-section" id="%F0%9F%94%A5%D8%B1%D9%88%D8%B4_%D9%87%D8%A7%DB%8C_%D8%A2%D8%B1%D8%A7%DB%8C%D9%87_%D9%BE%DB%8C%D8%B4%D8%B1%D9%81%D8%AA%D9%87_%D8%AF%D8%B1_%D8%AC%D8%A7%D9%88%D8%A7_%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA"></span>🔥روش های آرایه پیشرفته در جاوا اسکریپت<span class="ez-toc-section-end"></span></h3>
<p class="opacity-75 pt-1">
<p>              نور فاطمه - <time datetime="2024-08-06T08:55:07Z">6 آگوست</time>
            </p>
</p></div>
</p></div>
<div class="flex items-center">
          <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"><br />
              <img decoding="async" loading="lazy" alt="عکس پروفایل jacobsternx" class="crayons-avatar__image" width="100" height="100" src="https://media.dev.to/cdn-cgi/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1702046%2Fa62ed9ef-b0c3-44c6-8604-20b3694e6b6c.jpeg" title="روز 1 از 100: غواصی در HTML و CSS - بلوک های ساختمان وب 6"><br />
          </span></p>
<div>
<h3 class="fs-xl mb-0 lh-tight"><span class="ez-toc-section" id="%D8%B1%D9%88%D8%B2_36_%D8%A7%D8%B2_100_%D8%B1%D9%88%D8%B2_%DA%A9%D8%AF"></span>روز 36 از 100 روز کد<span class="ez-toc-section-end"></span></h3>
<p class="opacity-75 pt-1">
<p>              جیکوب استرن - <time datetime="2024-08-06T07:42:27Z">6 آگوست</time>
            </p>
</p></div>
</p></div>
</section>
<div id="global-signup-modal" class="authentication-modal hidden">
<div class="authentication-modal__container">
<figure class="authentication-modal__image-container">
      <img decoding="async" class="authentication-modal__image" src="https://media.dev.to/cdn-cgi/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="انجمن DEV" loading="lazy" title="روز 1 از 100: غواصی در HTML و CSS - بلوک های ساختمان وب 7"><br />
    </figure>
<div class="authentication-modal__content">
<p class="authentication-modal__description">
<p>          ما مکانی هستیم که کدنویس ها به اشتراک می گذارند، به روز می مانند و حرفه خود را رشد می دهند.
      </p>
</p></div>
</p></div>
</div>
</th>
<p></code></td>
<p></code></tr>
<p></code></table>
<p></code></p>
</li>
</div>
<p></code></p>
</li>
</ul>
</div>

			
		</div><!-- .entry-content /-->

				<div id="post-extra-info">
			<div class="theiaStickySidebar">
				<div class="single-post-meta post-meta clearfix"><span class="author-meta single-author with-avatars"><span class="meta-item meta-author-wrapper meta-author-2">
						<span class="meta-author-avatar">
							<a href="https://nabfollower.com/blog/author/ek3nk4r/"><img alt='تصویر ek3nk4r' src='https://secure.gravatar.com/avatar/1491a1837afc941cd5334f4a38a3aede5bf19483d37c0b6dd0447c5f952570b4?s=140&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/1491a1837afc941cd5334f4a38a3aede5bf19483d37c0b6dd0447c5f952570b4?s=280&d=mm&r=g 2x' class='avatar avatar-140 photo' height='140' width='140' decoding='async'/></a>
						</span>
					<span class="meta-author"><a href="https://nabfollower.com/blog/author/ek3nk4r/" class="author-name tie-icon" title="ek3nk4r">ek3nk4r</a></span>
						<a href="mailto:rambomordo@gmail.com" class="author-email-link" target="_blank" rel="nofollow noopener" title="ارسال ایمیل">
							<span class="tie-icon-envelope" aria-hidden="true"></span>
							<span class="screen-reader-text">ارسال ایمیل</span>
						</a>
					</span></span><span class="date meta-item tie-icon">2024-08-12</span><div class="tie-alignright"><span class="meta-comment tie-icon meta-item fa-before">0</span><span class="meta-views meta-item "><span class="tie-icon-fire" aria-hidden="true"></span> 3 </span><span class="meta-reading-time meta-item"><span class="tie-icon-bookmark" aria-hidden="true"></span> خواندن این مطلب 2 دقیقه زمان میبرد</span> </div></div><!-- .post-meta -->

		<div id="share-buttons-top" class="share-buttons share-buttons-top">
			<div class="share-links  icons-only">
				
				<a href="https://www.facebook.com/sharer.php?u=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="فیس بوک" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}">
					<span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">فیس بوک</span>
				</a>
				<a href="https://twitter.com/intent/tweet?text=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="توییتر (X)" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}">
					<span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">توییتر (X)</span>
				</a>
				<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&title=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8" rel="external noopener nofollow" title="لینکدین" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}">
					<span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">لینکدین</span>
				</a>
				<a href="https://www.tumblr.com/share/link?url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&name=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8" rel="external noopener nofollow" title="‫تامبلر" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}">
					<span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">‫تامبلر</span>
				</a>
				<a href="https://pinterest.com/pin/create/button/?url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&description=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&media=https://i1.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flxas1qjczamqfw7c9583.png?w=1000&resize=1000,500&ssl=1" rel="external noopener nofollow" title="‫پین‌ترست" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}">
					<span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">‫پین‌ترست</span>
				</a>
				<a href="https://reddit.com/submit?url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&title=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8" rel="external noopener nofollow" title="‫رددیت" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}">
					<span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">‫رددیت</span>
				</a>
				<a href="https://vk.com/share.php?url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="‫VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}">
					<span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">‫VKontakte</span>
				</a>
				<a href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&description=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&media=https://i1.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flxas1qjczamqfw7c9583.png?w=1000&resize=1000,500&ssl=1" rel="external noopener nofollow" title="‫Odnoklassniki" target="_blank" class="odnoklassniki-share-btn " data-raw="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl={post_link}&description={post_title}&media={post_img}">
					<span class="share-btn-icon tie-icon-odnoklassniki"></span> <span class="screen-reader-text">‫Odnoklassniki</span>
				</a>
				<a href="https://getpocket.com/save?title=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="پاکت" target="_blank" class="pocket-share-btn " data-raw="https://getpocket.com/save?title={post_title}&url={post_link}">
					<span class="share-btn-icon tie-icon-get-pocket"></span> <span class="screen-reader-text">پاکت</span>
				</a>			</div><!-- .share-links /-->
		</div><!-- .share-buttons /-->

					</div>
		</div>

		<div class="clearfix"></div>
		<script id="tie-schema-json" type="application/ld+json">{"@context":"http:\/\/schema.org","@type":"Article","dateCreated":"2024-08-12T20:09:10+03:30","datePublished":"2024-08-12T20:09:10+03:30","dateModified":"2024-08-12T20:09:10+03:30","headline":"\u0631\u0648\u0632 1 \u0627\u0632 100: \u063a\u0648\u0627\u0635\u06cc \u062f\u0631 HTML \u0648 CSS – \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u0633\u0627\u062e\u062a\u0645\u0627\u0646 \u0648\u0628","name":"\u0631\u0648\u0632 1 \u0627\u0632 100: \u063a\u0648\u0627\u0635\u06cc \u062f\u0631 HTML \u0648 CSS – \u0628\u0644\u0648\u06a9 \u0647\u0627\u06cc \u0633\u0627\u062e\u062a\u0645\u0627\u0646 \u0648\u0628","keywords":[],"url":"https:\/\/nabfollower.com\/blog\/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8\/","description":"HTML (\u0632\u0628\u0627\u0646 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0641\u0631\u0627\u0645\u062a\u0646) \u0648 CSS (\u0628\u0631\u06af \u0647\u0627\u06cc \u0633\u0628\u06a9 \u0622\u0628\u0634\u0627\u0631\u06cc) \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0645\u0631\u0648\u0632 \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u0645: \u0645\u0644\u0632\u0648\u0645\u0627\u062a HTML: \u0633\u0627\u062e\u062a\u0627\u0631 \u0633\u0646\u062f , , , \u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc: , , , \u0644\u06cc\u0633\u062a \u0647\u0627: , \u060c \u067e\u06cc\u0648\u0646\u062f\u0647\u0627: \u062a\u0635\u0627\u0648\u06cc\u0631","copyrightYear":"2024","articleSection":"\u0628\u0631\u0646\u0627\u0645\u0647 \u0646\u0648\u06cc\u0633\u06cc","articleBody":"\r\n\r\n\n            HTML (\u0632\u0628\u0627\u0646 \u0646\u0634\u0627\u0646\u0647 \u06af\u0630\u0627\u0631\u06cc \u0641\u0631\u0627\u0645\u062a\u0646) \u0648 CSS (\u0628\u0631\u06af \u0647\u0627\u06cc \u0633\u0628\u06a9 \u0622\u0628\u0634\u0627\u0631\u06cc) \u067e\u0627\u06cc\u0647 \u0648 \u0627\u0633\u0627\u0633 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0647\u0633\u062a\u0646\u062f. \u0627\u06cc\u0646 \u0686\u06cc\u0632\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0627\u0645\u0631\u0648\u0632 \u067e\u0648\u0634\u0634 \u062f\u0627\u062f\u0645:\n\n\u0645\u0644\u0632\u0648\u0645\u0627\u062a HTML:\n\n\n\u0633\u0627\u062e\u062a\u0627\u0631 \u0633\u0646\u062f , , , \n\u0628\u0631\u0686\u0633\u0628 \u0647\u0627\u06cc \u0627\u0635\u0644\u06cc: , , , \n\u0644\u06cc\u0633\u062a \u0647\u0627: , \u060c \n\u067e\u06cc\u0648\u0646\u062f\u0647\u0627: \n\u062a\u0635\u0627\u0648\u06cc\u0631: \n\u062c\u062f\u0627\u0648\u0644: , , , \nForms: , \u060c \u060c \n\u0639\u0646\u0627\u0635\u0631 \u0645\u0639\u0646\u0627\u06cc\u06cc HTML5: \u060c \u060c \u060c \u060c \u060c \u060c \n\u0645\u062a\u0627 \u062a\u06af \u0647\u0627 \u0628\u0631\u0627\u06cc \u0633\u0626\u0648 \u0648 \u067e\u0627\u0633\u062e\u06af\u0648\u06cc\u06cc\n\n\n\u0627\u0635\u0648\u0644 CSS:\n\n\nCSS \u062f\u0627\u062e\u0644\u06cc\u060c \u062f\u0627\u062e\u0644\u06cc \u0648 \u062e\u0627\u0631\u062c\u06cc\n\u0627\u0646\u062a\u062e\u0627\u0628\u06af\u0631\u0647\u0627: \u0639\u0646\u0635\u0631\u060c \u06a9\u0644\u0627\u0633\u060c \u0634\u0646\u0627\u0633\u0647\u060c \u0648\u06cc\u0698\u06af\u06cc\u060c \u0634\u0628\u0647 \u06a9\u0644\u0627\u0633 \u0648 \u0634\u0628\u0647 \u0639\u0646\u0635\u0631\n\u062e\u0648\u0627\u0635 \u0627\u0633\u0627\u0633\u06cc: color\u060c background-color\u060c font-size\u060c margin\u060c padding\n\u0645\u062f\u0644 \u062c\u0639\u0628\u0647: width\u060c height\u060c border\u060c box-sizing\n\u0633\u0628\u06a9 \u0645\u062a\u0646: font-family\u060c font-weight\u060c text-align\u060c text-decoration\n\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0686\u06cc\u062f\u0645\u0627\u0646: display\u060c position\u060c float\n\u0627\u0635\u0648\u0644 Flexbox: \u0646\u0645\u0627\u06cc\u0634: flex\u060c flex-direction\u060c ustify-content\u060c align-items\n\u0645\u0639\u0631\u0641\u06cc CSS Grid: \u0646\u0645\u0627\u06cc\u0634: grid\u060c grid-template-columns\u060c grid-template-rows\n\u0627\u0635\u0648\u0644 \u0637\u0631\u0627\u062d\u06cc \u067e\u0627\u0633\u062e\u06af\u0648: \u067e\u0631\u0633 \u0648 \u062c\u0648\u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647\u060c \u0645\u062a\u0627 \u062a\u06af viewport\n\u0645\u062a\u063a\u06cc\u0631\u0647\u0627\u06cc CSS (\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc)\n\u0627\u0646\u062a\u0642\u0627\u0644 \u0648 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0647\u0627\u06cc \u0633\u0627\u062f\u0647\n\n\n\u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0645\u0646 \u0633\u0627\u062e\u062a\u0645\u0628\u0631\u0627\u06cc \u062a\u0645\u0631\u06cc\u0646 \u0627\u06cc\u0646 \u0645\u0641\u0627\u0647\u06cc\u0645\u060c \u200b\u200b\u06cc\u06a9 \u0635\u0641\u062d\u0647 \u0648\u0628 \u0633\u0627\u062f\u0647 \"\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0646\" \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0645. \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u06cc\u06a9 \u0642\u0637\u0639\u0647 \u062a\u0648\u0633\u0639\u0647 \u06cc\u0627\u0641\u062a\u0647 \u0627\u0632 \u0633\u0627\u062e\u062a\u0627\u0631 HTML \u0622\u0645\u062f\u0647 \u0627\u0633\u062a:\n\n\n\n\n\n    \n    \n    About Me\n    \n\n\n    \n        \n        \n            \n        \n    \n    \n        \n            About Me\n            Hello, I'm Pratham. I'm learning web development!\n            \n        \n        \n            My Skills\n            \n                HTML\n                CSS\n                Learning JavaScript\n            \n        \n        \n            Contact Me\n            \n        \n    \n    \n        \u00a9 2024 Pratham. All rights reserved.\n    \n\n\n\n\n\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f\n    \n\n\n    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f\n    \n\n\n\n\n\n\n\n\nCSS:\n\n\n:root {\n    --primary-color: #333;\n    --secondary-color: #666;\n    --background-color: #f4f4f4;\n}\n\nbody {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    margin: 0;\n    padding: 0;\n    background-color: var(--background-color);\n}\n\nheader {\n    background-color: var(--primary-color);\n    color: white;\n    padding: 1rem;\n}\n\nnav ul {\n    display: flex;\n    list-style-type: none;\n    padding: 0;\n}\n\nnav ul li {\n    margin-right: 1rem;\n}\n\nnav a {\n    color: white;\n    text-decoration: none;\n}\n\nmain {\n    padding: 20px;\n}\n\nh1, h2 {\n    color: var(--primary-color);\n}\n\np {\n    color: var(--secondary-color);\n}\n\nimg {\n    max-width: 100%;\n    height: auto;\n}\n\nform {\n    display: grid;\n    gap: 1rem;\n}\n\nbutton {\n    background-color: var(--primary-color);\n    color: white;\n    padding: 0.5rem 1rem;\n    border: none;\n    cursor: pointer;\n    transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n    background-color: var(--secondary-color);\n}\n\n@media (max-width: 600px) {\n    nav ul {\n        flex-direction: column;\n    }\n}\n\n\n\n    \u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f\n    \n\n\n    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f\n    \n\n\n\n\n\n\n\n\n\u0686\u0627\u0644\u0634 \u0647\u0627\u06cc \u067e\u06cc\u0634 \u0631\u0648\u0622\u0634\u0646\u0627\u06cc\u06cc \u0628\u0627 \u0645\u062f\u0644 \u062c\u0639\u0628\u0647 \u062f\u0631 CSS\u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u062a\u0645\u0627\u0645 \u062a\u06af \u0647\u0627\u06cc HTML \u0631\u0627 \u0628\u0647 \u062f\u0631\u0633\u062a\u06cc \u0628\u0628\u0646\u062f\u06cc\u062f\u062f\u0631\u06a9 \u0645\u0627\u0647\u06cc\u062a \u0622\u0628\u0634\u0627\u0631\u06cc CSS\n\n\u062e\u0648\u0631\u0627\u06a9\u06cc \u0647\u0627\u06cc \u06a9\u0644\u06cc\u062f\u06ccHTML \u0633\u0627\u062e\u062a\u0627\u0631 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f\u060c \u062f\u0631 \u062d\u0627\u0644\u06cc \u06a9\u0647 CSS \u0627\u0633\u062a\u0627\u06cc\u0644 \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.\u0622\u0628\u0634\u0627\u0631 \u062f\u0631 CSS \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u0647\u0645 \u0642\u062f\u0631\u062a\u0645\u0646\u062f \u0648 \u0647\u0645 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u0628\u0627\u0634\u062f.\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0645\u0631\u0648\u0631\u06af\u0631 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632\u0631\u0633\u06cc \u0648 \u0631\u0641\u0639 \u0627\u0634\u06a9\u0627\u0644 \u0628\u0633\u06cc\u0627\u0631 \u0627\u0631\u0632\u0634\u0645\u0646\u062f \u0647\u0633\u062a\u0646\u062f.\n\n\u0686\u0647 \u062e\u0628\u0631 \u0628\u0639\u062f\u06cc\u0641\u0631\u062f\u0627\u060c \u0645\u0646 \u0642\u0635\u062f \u062f\u0627\u0631\u0645 \u0639\u0645\u06cc\u0642\u200c\u062a\u0631 \u062f\u0631 \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\u06cc CSS \u063a\u0648\u0637\u0647\u200c\u0648\u0631 \u0634\u0648\u0645\u060c \u0628\u0647 \u062e\u0648\u0628\u06cc \u06a9\u0627\u0648\u0634 \u06a9\u0646\u0645 \u0648 \u06cc\u06a9 \u06a9\u0644\u0648\u0646 \u0627\u0632 \u0647\u0631 \u0648\u0628\u200c\u0633\u0627\u06cc\u062a\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u0645.\n\n\n          \n\n            \n        \n          \n  \n\n\n\n      \n\n      \n\n          \n    \u062f\u0631 \u0627\u062f\u0627\u0645\u0647 \u0628\u062e\u0648\u0627\u0646\u06cc\u062f\n      \n        \n          \n              \n          \n          \n            \u0631\u0648\u0646\u0645\u0627\u06cc\u06cc \u0627\u0632 Llama 3: \u0645\u062f\u0644\u200c\u0647\u0627\u06cc \u0686\u0646\u062f\u0632\u0628\u0627\u0646\u0647\u060c \u06a9\u062f \u0622\u0645\u0648\u0632 \u0648 \u0627\u0633\u062a\u062f\u0644\u0627\u0644 \u0627\u06a9\u0633\u0644 \u0645\u0627\u0646\u0646\u062f GPT-4\n            \n              \n              \u0645\u0627\u06cc\u06a9 \u06cc\u0627\u0646\u06af - 2 \u0627\u0648\u062a\n            \n          \n        \n      \n      \n        \n          \n              \n          \n          \n            \u0622\u0645\u0648\u0632\u0634 \u0622\u0645\u0648\u0632\u0634 \u0645\u062f\u06cc\u0631 \u0641\u0631\u0648\u0634\n            \n              \n              \u0631\u06cc \u0628\u0631\u0627\u062f - 6 \u0622\u06af\u0648\u0633\u062a\n            \n          \n        \n      \n      \n        \n          \n              \n          \n          \n            \ud83d\udd25\u0631\u0648\u0634 \u0647\u0627\u06cc \u0622\u0631\u0627\u06cc\u0647 \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u062f\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a\n            \n              \n              \u0646\u0648\u0631 \u0641\u0627\u0637\u0645\u0647 - 6 \u0622\u06af\u0648\u0633\u062a\n            \n          \n        \n      \n      \n        \n          \n              \n          \n          \n            \u0631\u0648\u0632 36 \u0627\u0632 100 \u0631\u0648\u0632 \u06a9\u062f\n            \n              \n              \u062c\u06cc\u06a9\u0648\u0628 \u0627\u0633\u062a\u0631\u0646 - 6 \u0622\u06af\u0648\u0633\u062a\n            \n          \n        \n      \n  \n\n    \n  \n\n  \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n    \n  \n\n    \n\n\n\n\n    \n  \n    \n      \n    \n    \n      \n          \n          \u0645\u0627 \u0645\u06a9\u0627\u0646\u06cc \u0647\u0633\u062a\u06cc\u0645 \u06a9\u0647 \u06a9\u062f\u0646\u0648\u06cc\u0633 \u0647\u0627 \u0628\u0647 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0645\u06cc \u06af\u0630\u0627\u0631\u0646\u062f\u060c \u0628\u0647 \u0631\u0648\u0632 \u0645\u06cc \u0645\u0627\u0646\u0646\u062f \u0648 \u062d\u0631\u0641\u0647 \u062e\u0648\u062f \u0631\u0627 \u0631\u0634\u062f \u0645\u06cc \u062f\u0647\u0646\u062f.\n      \n    \n    \n  \n\n\n\n\n    \n  \n  \n\n  \n  \n  \n\r\n","publisher":{"@id":"#Publisher","@type":"Organization","name":"\u0645\u0642\u0627\u0644\u0627\u062a \u0646\u0627\u0628 \u0641\u0627\u0644\u0648\u0648\u0631","logo":{"@type":"ImageObject","url":"https:\/\/nabfollower.com\/blog\/wp-content\/themes\/jannah\/assets\/images\/logo@2x.png"},"sameAs":["https:\/\/www.facebook.com\/nabfollower.real","https:\/\/twitter.com\/nabfollower","https:\/\/www.pinterest.de\/nabfollower\/","https:\/\/youtube.com\/channel\/UCN2r-A3LGEuqbjJrMA0ASJw","https:\/\/www.instagram.com\/nabfollower_com\/?hl=en","https:\/\/t.me\/Nabfollower"]},"sourceOrganization":{"@id":"#Publisher"},"copyrightHolder":{"@id":"#Publisher"},"mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/nabfollower.com\/blog\/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8\/","breadcrumb":{"@id":"#Breadcrumb"}},"author":{"@type":"Person","name":"ek3nk4r","url":"https:\/\/nabfollower.com\/blog\/author\/ek3nk4r\/"},"image":{"@type":"ImageObject","url":"https:\/\/i1.wp.com\/media.dev.to\/cdn-cgi\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flxas1qjczamqfw7c9583.png?w=1000&resize=1000,500&ssl=1","width":1200,"height":500}}</script>

		<div id="share-buttons-bottom" class="share-buttons share-buttons-bottom">
			<div class="share-links  icons-only">
										<div class="share-title">
							<span class="tie-icon-share" aria-hidden="true"></span>
							<span> هم‌رسانی</span>
						</div>
						
				<a href="https://www.facebook.com/sharer.php?u=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="فیس بوک" target="_blank" class="facebook-share-btn " data-raw="https://www.facebook.com/sharer.php?u={post_link}">
					<span class="share-btn-icon tie-icon-facebook"></span> <span class="screen-reader-text">فیس بوک</span>
				</a>
				<a href="https://twitter.com/intent/tweet?text=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="توییتر (X)" target="_blank" class="twitter-share-btn " data-raw="https://twitter.com/intent/tweet?text={post_title}&url={post_link}">
					<span class="share-btn-icon tie-icon-twitter"></span> <span class="screen-reader-text">توییتر (X)</span>
				</a>
				<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&title=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8" rel="external noopener nofollow" title="لینکدین" target="_blank" class="linkedin-share-btn " data-raw="https://www.linkedin.com/shareArticle?mini=true&url={post_full_link}&title={post_title}">
					<span class="share-btn-icon tie-icon-linkedin"></span> <span class="screen-reader-text">لینکدین</span>
				</a>
				<a href="https://www.tumblr.com/share/link?url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&name=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8" rel="external noopener nofollow" title="‫تامبلر" target="_blank" class="tumblr-share-btn " data-raw="https://www.tumblr.com/share/link?url={post_link}&name={post_title}">
					<span class="share-btn-icon tie-icon-tumblr"></span> <span class="screen-reader-text">‫تامبلر</span>
				</a>
				<a href="https://pinterest.com/pin/create/button/?url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&description=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&media=https://i1.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flxas1qjczamqfw7c9583.png?w=1000&resize=1000,500&ssl=1" rel="external noopener nofollow" title="‫پین‌ترست" target="_blank" class="pinterest-share-btn " data-raw="https://pinterest.com/pin/create/button/?url={post_link}&description={post_title}&media={post_img}">
					<span class="share-btn-icon tie-icon-pinterest"></span> <span class="screen-reader-text">‫پین‌ترست</span>
				</a>
				<a href="https://reddit.com/submit?url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&title=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8" rel="external noopener nofollow" title="‫رددیت" target="_blank" class="reddit-share-btn " data-raw="https://reddit.com/submit?url={post_link}&title={post_title}">
					<span class="share-btn-icon tie-icon-reddit"></span> <span class="screen-reader-text">‫رددیت</span>
				</a>
				<a href="https://vk.com/share.php?url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="‫VKontakte" target="_blank" class="vk-share-btn " data-raw="https://vk.com/share.php?url={post_link}">
					<span class="share-btn-icon tie-icon-vk"></span> <span class="screen-reader-text">‫VKontakte</span>
				</a>
				<a href="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/&description=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&media=https://i1.wp.com/media.dev.to/cdn-cgi/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flxas1qjczamqfw7c9583.png?w=1000&resize=1000,500&ssl=1" rel="external noopener nofollow" title="‫Odnoklassniki" target="_blank" class="odnoklassniki-share-btn " data-raw="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl={post_link}&description={post_title}&media={post_img}">
					<span class="share-btn-icon tie-icon-odnoklassniki"></span> <span class="screen-reader-text">‫Odnoklassniki</span>
				</a>
				<a href="https://getpocket.com/save?title=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&url=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="پاکت" target="_blank" class="pocket-share-btn " data-raw="https://getpocket.com/save?title={post_title}&url={post_link}">
					<span class="share-btn-icon tie-icon-get-pocket"></span> <span class="screen-reader-text">پاکت</span>
				</a>
				<a href="mailto:?subject=%D8%B1%D9%88%D8%B2%201%20%D8%A7%D8%B2%20100%3A%20%D8%BA%D9%88%D8%A7%D8%B5%DB%8C%20%D8%AF%D8%B1%20HTML%20%D9%88%20CSS%20%E2%80%93%20%D8%A8%D9%84%D9%88%DA%A9%20%D9%87%D8%A7%DB%8C%20%D8%B3%D8%A7%D8%AE%D8%AA%D9%85%D8%A7%D9%86%20%D9%88%D8%A8&body=https://nabfollower.com/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/" rel="external noopener nofollow" title="رایانامه" target="_blank" class="email-share-btn " data-raw="mailto:?subject={post_title}&body={post_link}">
					<span class="share-btn-icon tie-icon-envelope"></span> <span class="screen-reader-text">رایانامه</span>
				</a>
				<a href="#" rel="external noopener nofollow" title="چاپ" target="_blank" class="print-share-btn " data-raw="#">
					<span class="share-btn-icon tie-icon-print"></span> <span class="screen-reader-text">چاپ</span>
				</a>			</div><!-- .share-links /-->
		</div><!-- .share-buttons /-->

		
	</article><!-- #the-post /-->

	
	<div class="post-components">

		
		<div class="about-author container-wrapper about-author-2">

								<div class="author-avatar">
						<a href="https://nabfollower.com/blog/author/ek3nk4r/">
							<img alt='تصویر ek3nk4r' src='https://secure.gravatar.com/avatar/1491a1837afc941cd5334f4a38a3aede5bf19483d37c0b6dd0447c5f952570b4?s=180&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/1491a1837afc941cd5334f4a38a3aede5bf19483d37c0b6dd0447c5f952570b4?s=360&d=mm&r=g 2x' class='avatar avatar-180 photo' height='180' width='180' loading='lazy' decoding='async'/>						</a>
					</div><!-- .author-avatar /-->
					
			<div class="author-info">

											<h3 class="author-name"><a href="https://nabfollower.com/blog/author/ek3nk4r/">ek3nk4r</a></h3>
						
				<div class="author-bio">
									</div><!-- .author-bio /-->

				<ul class="social-icons"></ul>			</div><!-- .author-info /-->
			<div class="clearfix"></div>
		</div><!-- .about-author /-->
		
<div class="container-wrapper" id="post-newsletter">
	<div class="subscribe-widget">
		<div class="widget-inner-wrap">

			<span class="tie-icon-envelope newsletter-icon" aria-hidden="true"></span>

			
					<div class="subscribe-widget-content">
						<span class="subscribe-subtitle">با ما بروز باشید</span>
<h3>در خبرنامه سایت ما عضو شوید و جدیدترین ها را در ایمیل خود دریافت کنید</h3>
<p>ایرانی لایق بهترین ها می باشد</p>					</div>

										<div id="mc_embed_signup">
						<form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="subscribe-form validate" target="_blank" novalidate>
							<div id="mc_embed_signup_scroll">
								<div class="mc-field-group">
									<label class="screen-reader-text" for="mce-EMAIL">آدرس ایمیل خود را وارد کنید</label>
									<input type="email" value="" id="mce-EMAIL" placeholder="آدرس ایمیل خود را وارد کنید" name="EMAIL" class="subscribe-input required email" id="mce-EMAIL">
								</div>
								<div id="mce-responses" class="clear">
									<div class="response" id="mce-error-response" style="display:none"></div>
									<div class="response" id="mce-success-response" style="display:none"></div>
								</div>
								<input type="submit" value="مشترک شوید" name="subscribe" id="mc-embedded-subscribe" class="button subscribe-submit">
							</div>
						</form>
					</div>
					
		</div><!-- .widget-inner-wrap /-->
	</div><!-- .subscribe-widget /-->
</div><!-- #post-newsletter /-->

<div class="prev-next-post-nav container-wrapper media-overlay">
			<div class="tie-col-xs-6 prev-post">
				<a href="https://nabfollower.com/blog/warhammer-middle-earth-strategy-battle-game-new-edition/" style="background-image: url()" class="post-thumb" rel="prev">
					<div class="post-thumb-overlay-wrap">
						<div class="post-thumb-overlay">
							<span class="tie-icon tie-media-icon"></span>
							<span class="screen-reader-text">Warhammer سرانجام بهترین بازی خود را احیا می کند</span>
						</div>
					</div>
				</a>

				<a href="https://nabfollower.com/blog/warhammer-middle-earth-strategy-battle-game-new-edition/" rel="prev">
					<h3 class="post-title">Warhammer سرانجام بهترین بازی خود را احیا می کند</h3>
				</a>
			</div>

			
			<div class="tie-col-xs-6 next-post">
				<a href="https://nabfollower.com/blog/dragon-age-the-veilguards-opening-mission-inquisition-finale-minor-inconvenience/" style="background-image: url(https://nabfollower.com/blog/wp-content/uploads/2024/08/The-Veilguard-باعث-می-شود-تفتیش-عقاید-مانند-یک-مزاحمت-390x220.jpg)" class="post-thumb" rel="next">
					<div class="post-thumb-overlay-wrap">
						<div class="post-thumb-overlay">
							<span class="tie-icon tie-media-icon"></span>
							<span class="screen-reader-text">The Veilguard باعث می شود تفتیش عقاید مانند یک "مزاحمت جزئی" به نظر برسد</span>
						</div>
					</div>
				</a>

				<a href="https://nabfollower.com/blog/dragon-age-the-veilguards-opening-mission-inquisition-finale-minor-inconvenience/" rel="next">
					<h3 class="post-title">The Veilguard باعث می شود تفتیش عقاید مانند یک "مزاحمت جزئی" به نظر برسد</h3>
				</a>
			</div>

			</div><!-- .prev-next-post-nav /-->
	

				<div id="related-posts" class="container-wrapper has-extra-post">

					<div class="mag-box-title the-global-title">
						<h3>نوشته های مشابه</h3>
					</div>

					<div class="related-posts-list">

					
							<div class="related-item tie-standard">

								
			<a aria-label="نسخه ی نمایشی نوار ماکت AI توضیح داد" href="https://nabfollower.com/blog/ai-mocktail-bar-demo-explained-41ok/" class="post-thumb"><img width="390" height="220" src="https://nabfollower.com/blog/wp-content/uploads/2025/06/نسخه-ی-نمایشی-نوار-ماکت-AI-توضیح-داد-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="نسخه ی نمایشی نوار ماکت AI توضیح داد" title="نسخه ی نمایشی نوار ماکت AI توضیح داد" decoding="async" /></a>
								<h3 class="post-title"><a href="https://nabfollower.com/blog/ai-mocktail-bar-demo-explained-41ok/">نسخه ی نمایشی نوار ماکت AI توضیح داد</a></h3>

								<div class="post-meta clearfix"><span class="date meta-item tie-icon">4 هفته پیش</span></div><!-- .post-meta -->							</div><!-- .related-item /-->

						
							<div class="related-item tie-standard">

								
			<a aria-label="گره سفارشی N8N خود را ایجاد کنید" href="https://nabfollower.com/blog/%da%af%d8%b1%d9%87-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-n8n-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%da%a9%d9%86%db%8c%d8%af/" class="post-thumb"><img post-id="111693" fifu-featured="1" width="390" height="220" src="https://i0.wp.com/media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2o75dodq8ke5lr0j14jn.png?w=390&resize=390,220&ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="گره سفارشی N8N خود را ایجاد کنید" title="گره سفارشی N8N خود را ایجاد کنید" title="گره سفارشی N8N خود را ایجاد کنید" decoding="async" /></a>
								<h3 class="post-title"><a href="https://nabfollower.com/blog/%da%af%d8%b1%d9%87-%d8%b3%d9%81%d8%a7%d8%b1%d8%b4%db%8c-n8n-%d8%ae%d9%88%d8%af-%d8%b1%d8%a7-%d8%a7%db%8c%d8%ac%d8%a7%d8%af-%da%a9%d9%86%db%8c%d8%af/">گره سفارشی N8N خود را ایجاد کنید</a></h3>

								<div class="post-meta clearfix"><span class="date meta-item tie-icon">4 هفته پیش</span></div><!-- .post-meta -->							</div><!-- .related-item /-->

						
							<div class="related-item tie-standard">

								
			<a aria-label="🚀 چرا Cloud Native & DevOps برای هر شرکت مدرن ضروری است؟" href="https://nabfollower.com/blog/why-cloud-native-devops-are-a-must-for-every-modern-company-52mb/" class="post-thumb"><img width="390" height="220" src="https://nabfollower.com/blog/wp-content/uploads/2025/06/چرا-Cloud-Native-DevOps-برای-هر-شرکت-مدرن-ضروری-390x220.png" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="🚀 چرا Cloud Native & DevOps برای هر شرکت مدرن ضروری است؟" title="🚀 چرا Cloud Native & DevOps برای هر شرکت مدرن ضروری است؟" decoding="async" /></a>
								<h3 class="post-title"><a href="https://nabfollower.com/blog/why-cloud-native-devops-are-a-must-for-every-modern-company-52mb/">🚀 چرا Cloud Native & DevOps برای هر شرکت مدرن ضروری است؟</a></h3>

								<div class="post-meta clearfix"><span class="date meta-item tie-icon">4 هفته پیش</span></div><!-- .post-meta -->							</div><!-- .related-item /-->

						
							<div class="related-item tie-standard">

								
			<a aria-label="توسعه Harmonyos (XI): اجرای صفحه برای ارسال اطلاعات شغلی" href="https://nabfollower.com/blog/%d8%aa%d9%88%d8%b3%d8%b9%d9%87-harmonyos-xi-%d8%a7%d8%ac%d8%b1%d8%a7%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a7%d8%b1%d8%b3%d8%a7%d9%84-%d8%a7%d8%b7%d9%84%d8%a7%d8%b9%d8%a7/" class="post-thumb"><img post-id="111687" fifu-featured="1" width="390" height="220" src="https://i0.wp.com/media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3q7crmpwr4o24kxip1ia.jpg?w=390&resize=390,220&ssl=1" class="attachment-jannah-image-large size-jannah-image-large wp-post-image" alt="توسعه Harmonyos (XI): اجرای صفحه برای ارسال اطلاعات شغلی" title="توسعه Harmonyos (XI): اجرای صفحه برای ارسال اطلاعات شغلی" title="توسعه Harmonyos (XI): اجرای صفحه برای ارسال اطلاعات شغلی" decoding="async" /></a>
								<h3 class="post-title"><a href="https://nabfollower.com/blog/%d8%aa%d9%88%d8%b3%d8%b9%d9%87-harmonyos-xi-%d8%a7%d8%ac%d8%b1%d8%a7%db%8c-%d8%b5%d9%81%d8%ad%d9%87-%d8%a8%d8%b1%d8%a7%db%8c-%d8%a7%d8%b1%d8%b3%d8%a7%d9%84-%d8%a7%d8%b7%d9%84%d8%a7%d8%b9%d8%a7/">توسعه Harmonyos (XI): اجرای صفحه برای ارسال اطلاعات شغلی</a></h3>

								<div class="post-meta clearfix"><span class="date meta-item tie-icon">4 هفته پیش</span></div><!-- .post-meta -->							</div><!-- .related-item /-->

						
					</div><!-- .related-posts-list /-->
				</div><!-- #related-posts /-->

				<div id="comments" class="comments-area">

		

		<div id="add-comment-block" class="container-wrapper">	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title the-global-title">دیدگاهتان را بنویسید <small><a rel="nofollow" id="cancel-comment-reply-link" href="/blog/%d8%b1%d9%88%d8%b2-1-%d8%a7%d8%b2-100-%d8%ba%d9%88%d8%a7%d8%b5%db%8c-%d8%af%d8%b1-html-%d9%88-css-%d8%a8%d9%84%d9%88%da%a9-%d9%87%d8%a7%db%8c-%d8%b3%d8%a7%d8%ae%d8%aa%d9%85%d8%a7%d9%86-%d9%88%d8%a8/#respond" style="display:none;">لغو پاسخ</a></small></h3><form action="https://nabfollower.com/blog/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">نشانی ایمیل شما منتشر نخواهد شد.</span> <span class="required-field-message">بخش‌های موردنیاز علامت‌گذاری شده‌اند <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">دیدگاه <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>
نام * 

ایمیل * 
وب‌ سایت 
 ذخیره نام، ایمیل و وبسایت من در مرورگر برای زمانی که دوباره دیدگاهی می‌نویسم.
 

	
	
	


	

	



	

		
			همچنین ببینید

			
				بستن
			
		

		
			

			


			

			
			برنامه نویسی		

	
	
		توسعه Harmonyos (XI): اجرای صفحه برای ارسال اطلاعات شغلی

		
			4 هفته پیش		
	


			

		
	


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


خرید فالوور ایرانی اینستاگرام


خرید لایک اینستاگرام



خرید بازدید اینستاگرام



خرید خدمات اکسپلور اینستاگرام



			
				
					
						
							

								
									پرخواننده
تازه
نظرها
								


								
											
												
													


			

			
					

	
	
		Blox Fruits Codes (آوریل 2023)

		
			2023-04-10		
	




			

			
					

	
	
		پیش‌بینی قیمت لایت‌کوین به‌عنوان رویکردهای رویداد نصف‌کننده – آیا LTC می‌تواند از اینجا 100 برابر کند؟

		
			2023-07-26		
	




			

			
					

	
	
		بهترین وینگرها در فیفا 23

		
			2023-02-19		
	




			

			
					

	
	
		خطای سرور داخلی Character AI 500: چگونه آن را برطرف کنیم

		
			2023-05-01		
	




			

			
					

	
	
		4 روش برای رفع آن در آیفون با iOS 17

		
			2023-06-17		
	

												
											


										
											
												
													


			

			
					

	
	
		نسخه ی نمایشی نوار ماکت AI توضیح داد

		
			4 هفته پیش		
	




			

			
					

	
	
		نماد مخفی Alolan Dugtrio Pokemon TCG Pocket به شانس زیادی نیاز دارد

		
			4 هفته پیش		
	




			

			
					

	
	
		گره سفارشی N8N خود را ایجاد کنید

		
			4 هفته پیش		
	




			

			
					

	
	
		🚀 چرا Cloud Native & DevOps برای هر شرکت مدرن ضروری است؟

		
			4 هفته پیش		
	




			

			
					

	
	
		آیا Elden Ring Nightreign ارزش بازی را دارد؟

		
			4 هفته پیش		
	

												
											


										
											
												
																									
											


										
							

						

					

				

			

			آخرین های تکنولوژی



			

			
					

	
	
		هر آنچه شما باید بدانید

		
			2025-05-24		
	




			

			
					

	
	
		راهنمای نهایی پوشش حلقه های اینستاگرام (+ الگوهای رایگان)

		
			2025-05-24		
	




			

			
					

	
	
		20 سؤال مصاحبه مدیر رسانه های اجتماعی (+ پاسخ نمونه)

		
			2025-05-23		
	




			

			
					

	
	
		12 داشبورد رسانه های اجتماعی برای گزارش ، گوش دادن و موارد دیگر

		
			2025-05-07		
	

		

	

	


	
			
				
					
		
			

									
						پر بازدید ترین ها
					
						
							2023-04-10							Blox Fruits Codes (آوریل 2023)
						
					
										
						
							2023-07-26							پیش‌بینی قیمت لایت‌کوین به‌عنوان رویکردهای رویداد نصف‌کننده – آیا LTC می‌تواند از اینجا 100 برابر کند؟
						
					
										
						
							2023-02-19							بهترین وینگرها در فیفا 23
						
					
					
دسته‌ها
			
					ارز دیجیتال (2,590)

	بازی (10,646)

	برنامه نویسی (15,805)

	چه طور (814)

	دیجیتال مارکتینگ (357)

	راهنمای دریافت ویزا (2)

	شبکه های اجتماعی (4,653)

			

			
					

				
									
						آخرین بروزرسانی ها
						
							
									
												
							
									
												
							
									
												
							
									
												
							
									
												
							
									
												
							
									
												
							
									
												
							
									
						
					

				
									
											

				
				
			

		


		
		
			

				
				
									
						
			

										
							
									
										آدرس ایمیل خود را وارد کنید
										
									
																		
							
						
						
			


			
					

				
				
			

		


						

			

			
			
				
					
						

							تمامی حقوق برای این سایت محفوظ است.
آموزش جامع شبکه های اجتماعی
ارز دیجیتال
شبکه های اجتماعی
فیس بوک
توییتر (X)
‫پین‌ترست
یوتیوب
اینستاگرام
تلگرام 

						

					

				

			

			





		
			
				
				
					 فیس بوک
				
				
					 توییتر (X)
				
				
					 واتس آپ
				
				
					 تلگرام
				
				
					 وایبر
							

		


		
		
			
			دکمه بازگشت به بالا
		
	
		

		
	
		

			
				بستن
			


			

							
					محبوب ترین ها



			

			
			بازی		

	
	
		Blox Fruits Codes (آوریل 2023)

		
			2023-04-10		
	




			

			
					

	
	
		پیش‌بینی قیمت لایت‌کوین به‌عنوان رویکردهای رویداد نصف‌کننده – آیا LTC می‌تواند از اینجا 100 برابر کند؟

		
			2023-07-26		
	




			

			
					

	
	
		بهترین وینگرها در فیفا 23

		
			2023-02-19		
	




			

			
					

	
	
		خطای سرور داخلی Character AI 500: چگونه آن را برطرف کنیم

		
			2023-05-01		
	




			

			
					

	
	
		4 روش برای رفع آن در آیفون با iOS 17

		
			2023-06-17		
	

بیشترین دیدگاه ها
					
						
							4 هفته پیش							نسخه ی نمایشی نوار ماکت AI توضیح داد
						
					
										
						
							2022-11-17							SoftBank 215 میلیون دلار از سهام Paytm هند را می فروشد: گزارش
						
					
										
						
							2022-11-17							چگونه خاک اره را قبل از رنگ آمیزی چوب تمیز کنیم؟ [Solved] 2022
						
					
										
						
							2022-11-17							سقوط FTX به وام دهنده کریپتو Genesis رسید.  Bankman-Fried، افراد مشهور شکایت کردند
						
					
										
						
							2022-11-17							تایوان به دنبال معافیت های مالیاتی بزرگ تری برای تحقیق و توسعه فناوری است تا بتواند مزیت رقابتی خود را حفظ کند
						
					
										
						
							2022-11-17							چگونه پیام ارسالی در اینستاگرام را حذف کنیم؟ [Solved] 2022
						
					
					
آخرین دیدگاه ها
				
			
		

	


	
	



	
		
			بستن
		
		
			
				

					
						ورود 
					

					
						
	

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

			
			
				 مرا به خاطر بسپار