cari

Rumah >hujung hadapan web >tutorial js >Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 2

Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 2

Barbara Streisand
Barbara Streisandasal
2025-01-10 11:13:43818semak imbas

I Built the ULTIMATE Educational Website from Scratch — Day 2

Semalam, kami mengusahakan index.html, dan hari ini kami akan mengusahakan subjek.html dan about.html. Kita akan lihat jika kita mempunyai masa yang mencukupi untuk mengerjakan Halaman Subjek kita seperti Kimia, Matematik dll.

Jam 14: Membina Halaman Mata Pelajaran

Saya akan mulakan dengan subjek.html. Sama seperti sebelum ini, saya akan menggunakan boilerplate tersuai saya, yang saya reka semalam untuk projek ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Subjects</title>
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>
            <div>



<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>

<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>

<pre class="brush:php;toolbar:false">    <section>



<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>

<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>

<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>

<h2>
  
  
  Hour 15: Building the About Page
</h2>

<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - About Us</title>
     <link rel="stylesheet" href="style.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
         <nav>
            <div>



<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>

<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>

<pre class="brush:php;toolbar:false">    <section>



<p>The hero section includes a heading and a short paragraph to introduce the page.</p>

<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>

<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>

<pre class="brush:php;toolbar:false">  <!-- <div>



<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>

<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
  
  
  Hour 16: Setting up the Chemistry Subject Page
</h2>

<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Chemistry</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style-main.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>
            <div>



<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>

<p>Now, let's add the structure for this page:<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
  • Some href values are "1.html", "organic.html", and some are just "#". Answer: I used "1.html", "organic.html", etc., for links that are ready. The "#" is a placeholder for pages not yet developed. It keeps the structure consistent and visually complete, allowing me to see how the final site will look, while indicating that the content isn't available yet.

Finally, I'll keep the same footer as all of the other pages, to keep consistency.

Hour 17: Styling the Chemistry Page

Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.

I wanted a design that was distinct and visually appealing. Here’s what I came up with:

:root {
    --primary-color: #00bcd4; /* Vibrant yet professional */
    --secondary-color: #ffc107; /* Energetic accent */
    --background-dark: #1a1a1a; /* Deeper, richer dark */
    --background-light: #2e2e2e; /* Slightly lighter for contrast */
    --text-light: #f0f0f0; /* Softer off-white */
    --text-accent: #ffffff; /* Pure white for emphasis */
    --border-radius: 12px; /* More pronounced curves */
    --shadow-light: rgba(0, 0, 0, 0.15); /* Subtle shadow */
    --transition-duration: 0.3s;
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--background-dark);
    color: var(--text-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}

.chemistry-page {
    display: flex;
    max-width: 1200px;
    margin: 60px auto; /* Increased top/bottom margin */
    padding: 30px; /* Increased padding for spaciousness */
    background: linear-gradient(145deg, var(--background-dark), #111111); /* Subtle gradient */
    border-radius: var(--border-radius);
    box-shadow: 0 8px 16px var(--shadow-light); /* More pronounced shadow */
}

.article-list, .topic-list {
    flex: 1;
    padding: 30px; /* Increased padding */
    background: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px var(--shadow-light);
    margin: 0 15px; /* Increased horizontal margin */
    transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

.article-list:hover, .topic-list:hover {
    transform: translateY(-5px); /* Gentle lift on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.article-list h2, .topic-list h2 {
    margin-bottom: 25px; /* Increased bottom margin */
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: 1.8rem; /* Slightly larger */
    color: var(--text-accent);
    position: relative; /* For pseudo-element underline */
    padding-bottom: 10px;
}

.article-list h2::after, .topic-list h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    transform: translateX(-50%);
}

.article-list ul, .topic-list ul {
    list-style: none;
    padding: 0;
}

.article-list ul li, .topic-list ul li {
    margin-bottom: 15px; /* Increased bottom margin */
    border-bottom: 1px solid #444; /* Subtle divider */
    padding-bottom: 10px;
}
.article-list ul li:last-child, .topic-list ul li:last-child {
    border-bottom: none; /* Remove border from the last item */
    padding-bottom: 0;
    margin-bottom: 0;
}

.article-list ul li a, .topic-list ul li a {
    display: block;
    padding: 15px; /* Increased padding */
    text-decoration: none;
    color: var(--text-light);
    background: linear-gradient(to bottom right, #333, #222); /* Subtle gradient */
    border-radius: calc(var(--border-radius) / 2); /* Smaller radius for list items */
    transition: background var(--transition-duration), transform var(--transition-duration);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow to list items */
}

.article-list ul li a:hover, .topic-list ul li a:hover {
    background: linear-gradient(to bottom right, var(--primary-color), #0097a7); /* More vibrant hover */
    transform: scale(1.02); /* Gentle scale on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    color: var(--text-accent);
}

.content-grid {
    flex: 3;
    padding: 30px; /* Increased padding */
    margin: 0 15px; /* Increased horizontal margin */
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider min-width */
    gap: 25px; /* Increased gap */
}

.topic-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-light);
    background: var(--background-light);
    padding: 30px; /* Increased padding */
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px var(--shadow-light);
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.topic-grid a img {
    width: 60px; /* Larger icon */
    height: 60px; /* Larger icon */
    margin-bottom: 15px; /* Increased bottom margin */
    filter: brightness(1.1); /* Slightly brighten the icons */
    transition: transform var(--transition-duration);
}

.topic-grid a:hover {
    transform: scale(1.05); /* Gentle scale on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.topic-grid a:hover img {
    transform: scale(1.1); /* Scale the icon on hover */
}

/* Responsive adjustments with smoother transitions */
@media (max-width: 768px) {
    .chemistry-page {
        flex-direction: column;
        margin: 30px auto; /* Adjust margins for smaller screens */
        padding: 20px;
    }
    .article-list, .topic-list, .content-grid {
        margin: 15px 0;
        padding: 20px;
    }
    .topic-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller screens */
    }
}

/* Further refinements for smaller screens */
@media (max-width: 576px) {
    .chemistry-page {
        padding: 15px;
    }
    .article-list, .topic-list, .content-grid {
        padding: 15px;
    }
    .article-list h2, .topic-list h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    .topic-grid {
        gap: 15px;
    }
    .topic-grid a {
        padding: 20px;
    }
    .topic-grid a img {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }
}

Saya telah menambah reka bentuk yang bertenaga dan moden, dengan tema gelap dan kecerunan halus. Reka letak menggunakan flexbox dan grid untuk responsif. Saya turut sertakan beberapa kesan tuding yang bagus untuk menjadikan halaman lebih interaktif.
Sebelum meneruskan, mari kita jawab beberapa soalan yang mungkin anda ada;

  • Mengapa menggunakan sifat tersuai (pembolehubah) dan bukannya menulis nilai warna terus dalam peraturan?
  • Bagaimana skema warna (bersemangat lagi profesional) dipilih? Dan apakah yang membuatkan warna ini berfungsi dengan baik bersama?

Jawapan: Saya memilih untuk menggunakan sifat tersuai (pembolehubah) atas beberapa sebab. Terutamanya, mereka meningkatkan kebolehselenggaraan dan konsistensi. Menukar warna merentas keseluruhan helaian gaya menjadi semudah mengubah suai nilai pembolehubah pada akar. Ini jauh lebih cekap daripada memburu setiap contoh kod warna tertentu. Selain itu, pembolehubah meningkatkan kebolehbacaan dengan memberikan nama bermakna kepada nilai, menjadikan niat kod lebih jelas. Ia juga memudahkan tema dan membolehkan perubahan dinamik berdasarkan pilihan pengguna atau mod yang berbeza.
Skim warna dipilih dengan matlamat untuk mencipta estetika "bermaya lagi profesional". Saya mahukan keseimbangan antara bertenaga dan boleh dipercayai.

  • --warna-utama: #00bcd4 (Cyan Bermaya): Ini ialah warna yang terang dan menarik yang membangkitkan rasa kemodenan dan inovasi, sesuai untuk topik berkaitan sains. Ia tidak terlalu tepu, mengekalkan tahap profesionalisme.
  • --warna kedua: #ffc107 (Kuning Bertenaga): Kuning ini bertindak sebagai loghat pelengkap, menambahkan cetusan tenaga dan keyakinan. Kuning sering dikaitkan dengan kreativiti dan intelek.
  • Latar Belakang Gelap (--latar belakang-gelap, --latar belakang-cahaya): Latar belakang gelap menyediakan asas yang kukuh dan stabil yang membolehkan warna yang lebih terang menonjol. Ia juga memberikan rasa yang canggih.
  • Teks Cahaya (--teks-cahaya, --teks-aksen): Teks putih pudar dan putih tulen pada latar belakang gelap memastikan kebolehbacaan tinggi dan rupa yang bersih dan moden.

Mengapa mereka bekerjasama dengan baik:

  1. Kontras Pelengkap: Warna cyan dan kuning adalah warna yang hampir saling melengkapi, menghasilkan kontras yang menarik secara visual yang dinamik tetapi tidak membingungkan.
  2. Keharmonian Analogi: Warna latar belakang gelap adalah analog, bermakna ia rapat antara satu sama lain pada roda warna, mewujudkan rasa harmoni dan padu.
  3. Kontras Nilai: Perbezaan ketara dalam nilai (kecerahan/kegelapan) antara teks dan latar belakang memastikan kebolehbacaan yang sangat baik.
  4. Ketepuan Seimbang: Warna primer dan sekunder adalah cerah tetapi tidak terlalu tepu, mengelakkan rupa kebudak-budakan atau luar biasa. Ia diimbangi oleh latar belakang yang lebih diredamkan.

Pada asasnya, gabungan warna asas yang cerah dan moden, aksen yang hangat dan latar belakang gelap yang canggih, bersama-sama dengan warna teks yang dipilih dengan teliti, menghasilkan palet yang menarik secara visual dan sesuai untuk konteks pendidikan profesional.

Walau bagaimanapun, gaya ini hanya berfungsi untuk halaman Kimia dan bukan keseluruhan tapak web. Jadi, saya mencipta fail CSS lain, style-main.css dalam Kimia untuk mengatasi gaya utama.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Subjects</title>
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>
            <div>



<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>

<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>

<pre class="brush:php;toolbar:false">    <section>



<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>

<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>

<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>

<h2>
  
  
  Hour 15: Building the About Page
</h2>

<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - About Us</title>
     <link rel="stylesheet" href="style.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
         <nav>
            <div>



<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>

<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>

<pre class="brush:php;toolbar:false">    <section>



<p>The hero section includes a heading and a short paragraph to introduce the page.</p>

<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>

<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>

<pre class="brush:php;toolbar:false">  <!-- <div>



<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>

<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
  
  
  Hour 16: Setting up the Chemistry Subject Page
</h2>

<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Chemistry</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style-main.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>
            <div>



<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>

<p>Now, let's add the structure for this page:<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
  • Some href values are "1.html", "organic.html", and some are just "#". Answer: I used "1.html", "organic.html", etc., for links that are ready. The "#" is a placeholder for pages not yet developed. It keeps the structure consistent and visually complete, allowing me to see how the final site will look, while indicating that the content isn't available yet.

Finally, I'll keep the same footer as all of the other pages, to keep consistency.

Hour 17: Styling the Chemistry Page

Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.

I wanted a design that was distinct and visually appealing. Here’s what I came up with:

:root {
    --primary-color: #00bcd4; /* Vibrant yet professional */
    --secondary-color: #ffc107; /* Energetic accent */
    --background-dark: #1a1a1a; /* Deeper, richer dark */
    --background-light: #2e2e2e; /* Slightly lighter for contrast */
    --text-light: #f0f0f0; /* Softer off-white */
    --text-accent: #ffffff; /* Pure white for emphasis */
    --border-radius: 12px; /* More pronounced curves */
    --shadow-light: rgba(0, 0, 0, 0.15); /* Subtle shadow */
    --transition-duration: 0.3s;
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--background-dark);
    color: var(--text-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}

.chemistry-page {
    display: flex;
    max-width: 1200px;
    margin: 60px auto; /* Increased top/bottom margin */
    padding: 30px; /* Increased padding for spaciousness */
    background: linear-gradient(145deg, var(--background-dark), #111111); /* Subtle gradient */
    border-radius: var(--border-radius);
    box-shadow: 0 8px 16px var(--shadow-light); /* More pronounced shadow */
}

.article-list, .topic-list {
    flex: 1;
    padding: 30px; /* Increased padding */
    background: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px var(--shadow-light);
    margin: 0 15px; /* Increased horizontal margin */
    transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

.article-list:hover, .topic-list:hover {
    transform: translateY(-5px); /* Gentle lift on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.article-list h2, .topic-list h2 {
    margin-bottom: 25px; /* Increased bottom margin */
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: 1.8rem; /* Slightly larger */
    color: var(--text-accent);
    position: relative; /* For pseudo-element underline */
    padding-bottom: 10px;
}

.article-list h2::after, .topic-list h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    transform: translateX(-50%);
}

.article-list ul, .topic-list ul {
    list-style: none;
    padding: 0;
}

.article-list ul li, .topic-list ul li {
    margin-bottom: 15px; /* Increased bottom margin */
    border-bottom: 1px solid #444; /* Subtle divider */
    padding-bottom: 10px;
}
.article-list ul li:last-child, .topic-list ul li:last-child {
    border-bottom: none; /* Remove border from the last item */
    padding-bottom: 0;
    margin-bottom: 0;
}

.article-list ul li a, .topic-list ul li a {
    display: block;
    padding: 15px; /* Increased padding */
    text-decoration: none;
    color: var(--text-light);
    background: linear-gradient(to bottom right, #333, #222); /* Subtle gradient */
    border-radius: calc(var(--border-radius) / 2); /* Smaller radius for list items */
    transition: background var(--transition-duration), transform var(--transition-duration);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow to list items */
}

.article-list ul li a:hover, .topic-list ul li a:hover {
    background: linear-gradient(to bottom right, var(--primary-color), #0097a7); /* More vibrant hover */
    transform: scale(1.02); /* Gentle scale on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    color: var(--text-accent);
}

.content-grid {
    flex: 3;
    padding: 30px; /* Increased padding */
    margin: 0 15px; /* Increased horizontal margin */
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider min-width */
    gap: 25px; /* Increased gap */
}

.topic-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-light);
    background: var(--background-light);
    padding: 30px; /* Increased padding */
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px var(--shadow-light);
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.topic-grid a img {
    width: 60px; /* Larger icon */
    height: 60px; /* Larger icon */
    margin-bottom: 15px; /* Increased bottom margin */
    filter: brightness(1.1); /* Slightly brighten the icons */
    transition: transform var(--transition-duration);
}

.topic-grid a:hover {
    transform: scale(1.05); /* Gentle scale on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.topic-grid a:hover img {
    transform: scale(1.1); /* Scale the icon on hover */
}

/* Responsive adjustments with smoother transitions */
@media (max-width: 768px) {
    .chemistry-page {
        flex-direction: column;
        margin: 30px auto; /* Adjust margins for smaller screens */
        padding: 20px;
    }
    .article-list, .topic-list, .content-grid {
        margin: 15px 0;
        padding: 20px;
    }
    .topic-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller screens */
    }
}

/* Further refinements for smaller screens */
@media (max-width: 576px) {
    .chemistry-page {
        padding: 15px;
    }
    .article-list, .topic-list, .content-grid {
        padding: 15px;
    }
    .article-list h2, .topic-list h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    .topic-grid {
        gap: 15px;
    }
    .topic-grid a {
        padding: 20px;
    }
    .topic-grid a img {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }
}

Fail style-main.css ini mengatasi gaya dalam style.css utama dan digunakan pada semua halaman. Sekarang mari kita bincangkan tentang keperluan untuk style-main.css, pembangun berpengalaman, mungkin telah faham, tetapi bagi pembangun yang tidak begitu berpengalaman di luar sana;

  • Masalahnya: Walaupun style.css (dalam akar) menyediakan asas, dan style.css khusus Kimia mengendalikan elemen unik, terdapat keperluan untuk ubah suai beberapa gaya global khusus untuk bahagian Kimia. Mengubah gaya akar secara langsung.css akan memberi kesan kepada keseluruhan tapak web, yang tidak diingini.
  • Penyelesaian: style-main.css diperkenalkan untuk mengatasi gaya global tertentu daripada root style.css hanya pada halaman Kimia. Ia juga membenarkan penambahan gaya baharu yang lebih umum daripada gaya khusus Kimia.css tetapi masih tidak boleh digunakan pada keseluruhan tapak web.
  • Contoh:
    • Gaya akar.css mungkin mentakrifkan warna butang lalai.
    • Pada halaman Kimia, anda mungkin mahukan warna butang yang berbeza, atau laraskan padding.
    • style-main.css akan mengandungi peraturan CSS untuk mengatasi warna dan padding butang, tetapi hanya untuk bahagian Kimia.
  • Kebaikan:
    • Modulariti: Memastikan pengubahsuaian gaya teratur dan terkandung dalam folder subjek yang berkaitan.
    • Kebolehselenggaraan: Lebih mudah untuk mengemas kini atau menukar gaya untuk bahagian tertentu tanpa menjejaskan orang lain.
    • Kekhususan: Penggantian disasarkan dan tidak memerlukan pemilih CSS yang kompleks untuk mencapai kesan yang diingini.
    • Mengelakkan Pertindihan Kod: Penggantian atau penambahan biasa untuk kawasan subjek boleh diletakkan dalam style-main.css dan bukannya diulang dalam beberapa helaian gaya khusus subjek.

Jam 18: Penggayaan Halaman Kimia Khusus

Untuk mengelakkan gaya terlalu rumit, saya memutuskan untuk menggunakan fail helaian gaya lain, specific-chemistry.css dalam folder Chemistry. Ini akan menggayakan halaman subjek dan memastikan fail lain tidak berselerak.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Subjects</title>
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>
            <div>



<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>

<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>

<pre class="brush:php;toolbar:false">    <section>



<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>

<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>

<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>

<h2>
  
  
  Hour 15: Building the About Page
</h2>

<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - About Us</title>
     <link rel="stylesheet" href="style.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
         <nav>
            <div>



<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>

<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>

<pre class="brush:php;toolbar:false">    <section>



<p>The hero section includes a heading and a short paragraph to introduce the page.</p>

<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>

<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>

<pre class="brush:php;toolbar:false">  <!-- <div>



<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>

<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
  
  
  Hour 16: Setting up the Chemistry Subject Page
</h2>

<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Neuron IQ - Chemistry</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style-main.css">
       <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <nav>
            <div>



<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>

<p>Now, let's add the structure for this page:<br>
</p>

<pre class="brush:php;toolbar:false">  <section>



<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
  • Some href values are "1.html", "organic.html", and some are just "#". Answer: I used "1.html", "organic.html", etc., for links that are ready. The "#" is a placeholder for pages not yet developed. It keeps the structure consistent and visually complete, allowing me to see how the final site will look, while indicating that the content isn't available yet.

Finally, I'll keep the same footer as all of the other pages, to keep consistency.

Hour 17: Styling the Chemistry Page

Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.

I wanted a design that was distinct and visually appealing. Here’s what I came up with:

:root {
    --primary-color: #00bcd4; /* Vibrant yet professional */
    --secondary-color: #ffc107; /* Energetic accent */
    --background-dark: #1a1a1a; /* Deeper, richer dark */
    --background-light: #2e2e2e; /* Slightly lighter for contrast */
    --text-light: #f0f0f0; /* Softer off-white */
    --text-accent: #ffffff; /* Pure white for emphasis */
    --border-radius: 12px; /* More pronounced curves */
    --shadow-light: rgba(0, 0, 0, 0.15); /* Subtle shadow */
    --transition-duration: 0.3s;
    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-heading: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-family-base);
    background-color: var(--background-dark);
    color: var(--text-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
    -moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}

.chemistry-page {
    display: flex;
    max-width: 1200px;
    margin: 60px auto; /* Increased top/bottom margin */
    padding: 30px; /* Increased padding for spaciousness */
    background: linear-gradient(145deg, var(--background-dark), #111111); /* Subtle gradient */
    border-radius: var(--border-radius);
    box-shadow: 0 8px 16px var(--shadow-light); /* More pronounced shadow */
}

.article-list, .topic-list {
    flex: 1;
    padding: 30px; /* Increased padding */
    background: var(--background-light);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px var(--shadow-light);
    margin: 0 15px; /* Increased horizontal margin */
    transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}

.article-list:hover, .topic-list:hover {
    transform: translateY(-5px); /* Gentle lift on hover */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.article-list h2, .topic-list h2 {
    margin-bottom: 25px; /* Increased bottom margin */
    text-align: center;
    font-family: var(--font-family-heading);
    font-size: 1.8rem; /* Slightly larger */
    color: var(--text-accent);
    position: relative; /* For pseudo-element underline */
    padding-bottom: 10px;
}

.article-list h2::after, .topic-list h2::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    transform: translateX(-50%);
}

.article-list ul, .topic-list ul {
    list-style: none;
    padding: 0;
}

.article-list ul li, .topic-list ul li {
    margin-bottom: 15px; /* Increased bottom margin */
    border-bottom: 1px solid #444; /* Subtle divider */
    padding-bottom: 10px;
}
.article-list ul li:last-child, .topic-list ul li:last-child {
    border-bottom: none; /* Remove border from the last item */
    padding-bottom: 0;
    margin-bottom: 0;
}

.article-list ul li a, .topic-list ul li a {
    display: block;
    padding: 15px; /* Increased padding */
    text-decoration: none;
    color: var(--text-light);
    background: linear-gradient(to bottom right, #333, #222); /* Subtle gradient */
    border-radius: calc(var(--border-radius) / 2); /* Smaller radius for list items */
    transition: background var(--transition-duration), transform var(--transition-duration);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow to list items */
}

.article-list ul li a:hover, .topic-list ul li a:hover {
    background: linear-gradient(to bottom right, var(--primary-color), #0097a7); /* More vibrant hover */
    transform: scale(1.02); /* Gentle scale on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    color: var(--text-accent);
}

.content-grid {
    flex: 3;
    padding: 30px; /* Increased padding */
    margin: 0 15px; /* Increased horizontal margin */
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider min-width */
    gap: 25px; /* Increased gap */
}

.topic-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-light);
    background: var(--background-light);
    padding: 30px; /* Increased padding */
    border-radius: var(--border-radius);
    box-shadow: 0 4px 8px var(--shadow-light);
    transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}

.topic-grid a img {
    width: 60px; /* Larger icon */
    height: 60px; /* Larger icon */
    margin-bottom: 15px; /* Increased bottom margin */
    filter: brightness(1.1); /* Slightly brighten the icons */
    transition: transform var(--transition-duration);
}

.topic-grid a:hover {
    transform: scale(1.05); /* Gentle scale on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.topic-grid a:hover img {
    transform: scale(1.1); /* Scale the icon on hover */
}

/* Responsive adjustments with smoother transitions */
@media (max-width: 768px) {
    .chemistry-page {
        flex-direction: column;
        margin: 30px auto; /* Adjust margins for smaller screens */
        padding: 20px;
    }
    .article-list, .topic-list, .content-grid {
        margin: 15px 0;
        padding: 20px;
    }
    .topic-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller screens */
    }
}

/* Further refinements for smaller screens */
@media (max-width: 576px) {
    .chemistry-page {
        padding: 15px;
    }
    .article-list, .topic-list, .content-grid {
        padding: 15px;
    }
    .article-list h2, .topic-list h2 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    .topic-grid {
        gap: 15px;
    }
    .topic-grid a {
        padding: 20px;
    }
    .topic-grid a img {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }
}

Ini memberikan penggayaan pada reka letak tiga lajur, yang saya gunakan dalam index.html di dalam folder Kimia. Ia menjadikan halaman kelihatan lebih bersih dan lebih profesional. Saya juga telah menambah beberapa reka bentuk responsif untuk skrin kecil.
Bagi mereka yang mahukan pratonton langsung:
Kimia

Memandangkan ini adalah halaman asas, saya tidak merasakan keperluan untuk menambah skrip.js
Itu sahaja untuk hari ini. Saya boleh jumpa awak esok. Sampai jumpa'

Atas ialah kandungan terperinci Saya Membina Laman Web Pendidikan ULTIMATE dari Gores — Hari 2. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html define if for while require JS default this padding background column Foundation Other
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Projek GitHub Terhangat Hari Ini: Pilihan Teratas dari 5 JanuariArtikel seterusnya：Projek GitHub Terhangat Hari Ini: Pilihan Teratas dari 5 Januari

Artikel berkaitan

Lihat lagi