برنامه نویسی

من وب سایت آموزشی نهایی را از ابتدا ساختم – روز 3

تصویر ek3nk4r ek3nk4r ارسال ایمیل 2025-01-11
0 1 خواندن این مطلب 18 دقیقه زمان میبرد
من وب سایت آموزشی نهایی را از ابتدا ساختم – روز 3

پیشنهاد ویژه

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

بسیاری از مردم از من می‌پرسیدند که چقدر زمان برای این کار صرف می‌شود؟ شاید 2 یا 3 هفته بود. اما، این سوال باعث شد تا دوباره فکر کنم که چقدر زمان صرف وب سایت می کنم. من 8 ساعت را فقط در صفحه اصلی صرف کردم. بنابراین، تصمیم گرفتم به سرعت محتوا تولید کنم و روی جزئیات جزئی تمرکز نکنم، کاری که در روزهای قبل انجام دادم. من خیلی از توجه شما را هدر دادم، حالا بیایید مستقیماً به این روند بپردازیم.

فهرست مطالب

ساعت 19: ایجاد صفحه محتوای شیمی

من با ایجاد آن شروع خواهم کرد periodicity-of-elements-qa.html فایل داخل Chemistry/3/ دایرکتوری این صفحه شامل پرسش و پاسخ با موضوع تناوب عناصر خواهد بود.

طبق معمول، من یک صفحه اصلی HTML با پیوندهایی به اسکریپت‌ها و سبک‌های ضروری، همراه با پیمایش به صفحات اصلی را اضافه کردم. من از a استفاده می کنم container div، aside عنصر با شناسه table-of-contents، که با استفاده از جاوا اسکریپت و در نهایت تگ اصلی پر می شود.

در مرحله بعد، محتوا را اضافه کردم که با تگ های عنوان و برخی از برچسب های پاراگراف برای بدنه اصلی قالب بندی شده است. برای فرمول ها و نمادها که من از نحو LaTeX استفاده کردم، LaTeX استفاده می شود زیرا استاندارد پیشرو است:

            
 id="what-is-meant-by-newlands-law-of-octaves">What is meant by
                Newland's Law of Octaves?

                Newland's Law of Octaves stated that when elements were arranged by increasing atomic weight, every eighth element had similar properties, like musical octaves.
            
 id="what-is-mendeleevs-periodic-law">What is Mendeleev's Periodic
                Law?

                Mendeleev's Periodic Law states that the properties of elements are a periodic function of their atomic weights.
                
            
 id="what-is-the-modern-periodic-law">What is the Modern Periodic
                Law?

                The Modern Periodic Law states that the properties of elements are a periodic function of their atomic numbers ($Z$).
            
 id="Moseley's law">Explain Moseley's experiment and the results of it.

                
                    Moseley bombarded elements with electrons, measuring the emitted X-ray frequencies ($\nu$). He found $\sqrt{\nu} \propto Z$ (atomic number). This showed atomic number, not atomic weight, determines element properties, leading to the Modern Periodic Law.
                
            
 id="write-down-nomenclature-of-the-below-mentioned-elements-having-atomic-number-101-to-118">Write
                down nomenclature of the below mentioned elements having atomic number
                101 to 118.

                

                    
                    

                     style="text-align:left">Atomic Number
                     style="text-align:left">Name
                     style="text-align:left">Symbol
                    

                    
                    
                    

                     style="text-align:left">101
                     style="text-align:left">Unnilunium
                     style="text-align:left">Unu
                    

                     
                    
                    

            
 id="Lanthanoid and Actinoid Series">Explain the periodic properties of Lanthanoid and Actinoid series.
                    
            Lanthanoids:


  • Electrons fill 4f orbitals.

  • Silvery-white metals, tarnish in air.

  • High melting and boiling points.

  • Mostly +3 oxidation state.

  • Form colored ions and complexes.

  • Used as catalysts.

Actinoids:


  • Electrons fill 5f orbitals.

  • Radioactive.

  • Early members have multiple oxidation states, later ones mostly +3.

  • High density and melting points.

  • Form complexes.

  • Used in nuclear reactors and weapons.


            
     id="how-would-you-justify-the-presence-of-18-elements-in-the-5th-period-of-the-periodic-table">How
                would you justify the presence of 18 elements in the 5th period of the
                periodic table?
    
                
                    The 5th period starts with filling the 5s orbital (2 electrons). Then, the 4d orbitals are filled (10 electrons), followed by the 5p orbitals (6 electrons). This totals 2 + 10 + 6 = 18 electrons, hence 18 elements in the 5th period.
                
            
     id="write-down-general-group-electronic-configuration-of-s-block-p-block-d-block-and-f-block">Write
                down general group electronic configuration of s block, p block, d block
                and f block?
    
                
                    
    • s-block: $ns^{1-2}$ where n = 2-7
                    
    • p-block: $ns^2np^{1-6}$ where n = 2-7
                    
    • d-block: $(n-1)d^{1-10}ns^{0-2}$ where n = 4-7
                    
    • f-block: $(n-2)f^{0-14}(n-1)d^{0-1}ns^2$ where n = 6-7
                                        
            
     id="what-is-meant-by-transuranium-element">What is meant by
                transuranium element?
    
            Transuranium elements are elements with atomic numbers greater than 92 (Uranium). They are all synthetic and radioactive.
            
             
            
     id="about-author">
                About the author
            
    
             Written by Kaavje Sahé
    وارد حالت تمام صفحه شوید

    از حالت تمام صفحه خارج شوید

    این شامل محتوای زیادی است که با استفاده از عناوین و زیرعنوان ها، برخی لیست ها و جداول قالب بندی شده است. من همچنین یک برچسب “درباره نویسنده” را برای صحت اضافه کردم.

    من باید به این صفحه استایل بدهم تا متن قابل خواندن باشد و خیلی بد به نظر نرسد. من یک فایل css اضافی را به این صفحه اضافه می کنم style.css و style-main.css برای عناصر مشترک

    ساعت 20: استایل دادن به صفحه محتوا و افزودن JS برای فهرست مطالب پویا

    من یک تگ سبک در داخل عنصر head ایجاد کردم و استایل اصلی را به آن اضافه کردم:

         <style>
header {
    background: linear-gradient(135deg, #252525 0%, #303030 100%); /* Subtle gradient for depth */
    padding: 1.2rem 0; /* Slightly increased padding */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced, darker shadow */
    position: sticky;
    top: 0;
    z-index: 1000; /* Increased z-index for better layering */
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for sticky effect */
    transform: translateY(0); /* Initial state for smooth sticky animation */
}

header.sticky-active {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Different shadow when sticky */
    transform: translateY(-5px); /* Slight lift when sticky */
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px; /* Slightly increased side padding */
}

.logo {
    font-size: 2rem; /* Slightly larger logo */
    font-weight: 700; /* Bolder logo */
    color: #7db4ff; /* Updated logo color, slightly lighter */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Subtle text shadow for depth */
    transition: transform 0.3s ease-in-out;
}

.logo:hover {
    transform: scale(1.05); /* Gentle scale on hover */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 30px; /* Use gap for spacing between list items */
}

nav ul li a {
    text-decoration: none;
    color: #f0f0f0; /* Slightly brighter text color */
    position: relative; /* For the underline effect */
    padding-bottom: 4px; /* Space for the underline */
    transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
    overflow: hidden; /* Clip the pseudo-element */
}

nav ul li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #7db4ff; /* Same as logo color for consistency */
    transform: scaleX(0); /* Initially hidden */
    transform-origin: bottom right;
    transition: transform 0.4s ease-out;
}

nav ul li a:hover {
    color: #90caf9; /* Lighter hover color */
    transform: translateY(-2px); /* Slight lift on hover */
}

nav ul li a:hover::before {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Optional: Add an active state highlight */
nav ul li a.active {
    color: #90caf9;
    font-weight: 600;
}

nav ul li a.active::before {
    transform: scaleX(1);
}

/* Enhancements for Mobile (consider using JavaScript for more advanced mobile menus) */
@media (max-width: 1024px) {
    header {
        display: hidden;
    }
}
        :root {
    --primary-bg: #f9f9f9; /* Very light grey for a softer white */
    --secondary-bg: #ffffff; /* Pure white for content areas */
    --text-primary: #212121; /* Dark grey for primary text */
    --text-secondary: #757575; /* Medium grey for secondary text */
    --accent-color: #2962ff; /* A vibrant blue */
    --hover-color: #5393ff; /* Lighter blue for hover states */
    --border-color: #e0e0e0; /* Light grey for borders */
    --code-bg: #f0f0f0; /* Very light grey for code backgrounds */
    --code-text: #333333; /* Dark grey for code text */
    --toc-active: #2962ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
}

body {
    font-family: 'Roboto', sans-serif; /* A clean and modern sans-serif font */
    line-height: 1.6;
    margin: 0;
    background-color: var(--primary-bg);
    color: var(--text-primary);
    padding-bottom: 40px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Custom Scrollbar - Light theme version */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background-color: #bdbdbd;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9e9e9e;
}

.container {
    max-width: 1200px;
    margin: 50px auto;
    padding: 60px;
    background-color: var(--secondary-bg);
    box-shadow: var(--shadow-md);
    border-radius: 8px;
    display: grid;
    grid-template-columns: minmax(250px, 300px) 1fr;
    gap: 40px;
}

#table-of-contents {
    padding: 30px;
    background-color: var(--secondary-bg);
    border-radius: 6px;
    position: sticky;
    top: 30px;
    height: fit-content;
    border: 1px solid var(--border-color);
}

/* Custom Scrollbar for Table of Contents */
#table-of-contents::-webkit-scrollbar {
    width: 6px; /* Thinner scrollbar */
}

#table-of-contents::-webkit-scrollbar-track {
    background: #f1f1f1; /* Light background for the track */
    border-radius: 3px; /* Slightly rounded track */
}

#table-of-contents::-webkit-scrollbar-thumb {
    background-color: #bdbdbd; /* Medium grey for the thumb */
    border-radius: 3px; /* Slightly rounded thumb */
}

#table-of-contents::-webkit-scrollbar-thumb:hover {
    background-color: #9e9e9e; /* Darker grey on hover */
}

#table-of-contents > h2 {
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 15px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    text-align: left;
}

#table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#table-of-contents li {
    margin-bottom: 10px;
    padding-left: 0;
    border-left: 3px solid transparent;
    transition: border-left-color var(--transition-fast), color var(--transition-fast);
}

#table-of-contents li:hover,
#table-of-contents li.active {
    border-left-color: var(--toc-active);
}

#table-of-contents li.active > a {
    color: var(--toc-active);
    font-weight: 500;
}

#table-of-contents a {
    text-decoration: none;
    color: var(--text-secondary);
    display: block;
    padding: 6px 0;
    transition: color var(--transition-fast);
}

#table-of-contents a:hover {
    color: var(--hover-color);
}

#table-of-contents ul ul {
    margin-left: 15px;
    margin-top: 6px;
}

/* Main content styles - Focus on readability */
main {
    padding: 40px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--secondary-bg);
    box-shadow: var(--shadow-sm);
}

main > *:not(:last-child) {
    margin-bottom: 2em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

h1 {
    font-size: 2.5rem;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.4em;
    margin-bottom: 1em;
}

h2 {
    font-size: 24px;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 0.3em;
    margin-bottom: 0.9em;
    color: var(--accent-color);
}

h3 {
    font-size: 1.6rem;
    margin-bottom: 0.7em;
}

h4 {
    font-size: 1.4rem;
    margin-bottom: 0.6em;
}

p {
    margin-bottom: 1.5em;
    color: var(--text-secondary);
    orphans: 3;
    widows: 3;
    word-break: break-word;
}

ul, ol {
    margin-left: 25px;
    margin-bottom: 1.7em;
}

li {
    margin-bottom: 0.7em;
    color: var(--text-secondary);
    line-height: 1.5;
    word-break: break-word;
}

strong {
    font-weight: 600;
    color: var(--text-primary);
}

em {
    font-style: italic;
    color: var(--accent-color);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: color var(--transition-fast);
    border-bottom: 1px solid transparent; /* Subtle underline on hover */
}

a:hover {
    color: var(--hover-color);
    border-bottom-color: var(--hover-color);
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2em;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: var(--secondary-bg);
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    word-break: break-word;
}

th {
    background-color: #f5f5f5; /* Lighter header background */
    font-weight: 600;
    color: var(--text-primary);
}

tbody tr:nth-child(even) {
    background-color: #fafafa; /* Very light grey for even rows */
}

/* Code blocks - Light theme styling */
pre {
    background-color: var(--code-bg);
    color: var(--code-text);
    padding: 12px 18px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: 'Menlo', monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.6em;
    white-space: pre-wrap;
    border: 1px solid var(--border-color);
}

code {
    font-family: 'Menlo', monospace;
    background-color: #e8e8e8; /* Even lighter background for inline code */
    color: var(--code-text);
    padding: 3px 6px;
    border-radius: 3px;
    word-break: break-word;
}

pre code {
    background-color: transparent;
    padding: 0;
}

/* Horizontal rules - Simpler style */
hr {
    border: none;
    height: 1px;
    background-color: var(--border-color);
    margin: 2em 0;
}

/* Blockquotes - Clean separation */
blockquote {
    border-left: 3px solid var(--accent-color);
    padding: 10px 15px;
    margin: 1.5em 0;
    font-style: italic;
    background-color: #f5f5f5;
    border-radius: 3px;
    color: var(--text-secondary);
}

blockquote p {
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .container {
        max-width: 90%;
        padding: 50px;
        grid-template-columns: 1fr;
        gap: 30px;
    }

    #table-of-contents {
        position: static;
        margin-bottom: 30px;
    }

    #table-of-contents > h2 {
        text-align: center;
    }
}

@media (max-width: 768px) {
    main {
        padding: 30px;
    }

    h1 {
        font-size: 2.2rem;
    }

    h2 {
        font-size: 22px;
    }
    nav{
        display:none;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 30px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 20px;
    }
}
    style>
    وارد حالت تمام صفحه شوید

    از حالت تمام صفحه خارج شوید

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

    من همچنین می خواستم یک اسکریپت اضافه کنم تا فهرست مطالب سمت چپ تعاملی باشد. بنابراین، من این اسکریپت را به پایین تگ بدنه اضافه کردم:

     src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js">
         src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js">
    تصویر ek3nk4r

    ek3nk4r

    نوشته های مشابه

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

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

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

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

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

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

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

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

    4 هفته پیش

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

    نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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