찾다

집 >웹 프론트엔드 >JS 튜토리얼 >나는 처음부터 ULTIMATE 교육 웹사이트를 구축했습니다 — 2일차

나는 처음부터 ULTIMATE 교육 웹사이트를 구축했습니다 — 2일차

Barbara Streisand
Barbara Streisand원래의
2025-01-10 11:13:43817검색

I Built the ULTIMATE Educational Website from Scratch — Day 2

어제는 index.html 작업을 했고, 오늘은 subject.html과 about.html 작업을 하겠습니다. 화학, 수학 등과 같은 주제 페이지를 작업할 시간이 충분한지 살펴보겠습니다.

14시간: 주제 페이지 구축

subjects.html부터 시작하겠습니다. 이전과 마찬가지로 이 프로젝트를 위해 어제 디자인한 맞춤 상용구를 사용하겠습니다.

<!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;
    }
}

어두운 테마와 은은한 그라데이션으로 생동감 있고 현대적인 디자인을 추가했습니다. 레이아웃은 반응성을 위해 flexbox와 그리드를 사용합니다. 또한 페이지를 보다 상호작용적으로 만들기 위해 몇 가지 멋진 호버 효과도 포함했습니다.
계속 진행하기 전에 몇 가지 질문에 답해 보겠습니다.

  • 규칙에 직접 색상 값을 작성하는 대신 사용자 정의 속성(변수)을 사용하는 이유는 무엇입니까?
  • (생생하면서도 전문적인) 색상 구성은 어떻게 선택되었나요? 그리고 이 색상들이 서로 잘 어울리는 이유는 무엇인가요?

답변: 저는 여러 가지 이유로 사용자 정의 속성(변수)을 사용하기로 결정했습니다. 주로 유지 관리성과 일관성이 향상됩니다. 전체 스타일시트의 색상을 변경하는 것은 루트에서 변수 값을 수정하는 것만큼 간단합니다. 이는 특정 색상 코드의 모든 인스턴스를 찾아내는 것보다 훨씬 더 효율적입니다. 또한 변수는 값에 의미 있는 이름을 부여하여 코드의 의도를 더욱 명확하게 만들어 가독성을 향상시킵니다. 또한 테마 지정을 용이하게 하고 사용자 기본 설정이나 다양한 모드에 따라 동적으로 변경할 수 있습니다.
색상 구성표는 "생생하면서도 전문적인" 미학을 창조한다는 목표로 선택되었습니다. 활력과 믿음직함 사이의 균형을 원했습니다.

  • --primary-color: #00bcd4 (활기찬 청록색): 현대성과 혁신성을 불러일으키는 밝고 매력적인 색상으로 과학 관련 주제에 적합합니다. 과하게 포화되지 않고, 어느 정도 전문성을 유지하고 있습니다.
  • --보조 색상: #ffc107(에너제틱 옐로우): 이 노란색은 보색적인 악센트 역할을 하여 에너지와 낙천적인 느낌을 더해줍니다. 노란색은 창의성과 지성을 상징하는 경우가 많습니다.
  • 어두운 배경(--Background-dark, --Background-Light): 어두운 배경은 더 밝은 색상을 돋보이게 하는 강력하고 안정적인 기반을 제공합니다. 세련된 느낌도 더해줍니다.
  • 밝은 텍스트(--text-light, --text-accent): 어두운 배경에 황백색과 순백색 텍스트를 사용하여 가독성이 높고 깔끔하고 현대적인 느낌을 줍니다.

함께 일하기 좋은 이유:

  1. 보완적인 대비: 청록색과 노란색은 보색에 가까운 색상으로, 역동적이면서도 거슬리지 않는 시각적으로 매력적인 대비를 만들어냅니다.
  2. 유사적 조화: 어두운 배경 색조가 유사하다는 것은 색상환에서 서로 가까워 조화롭고 응집력 있는 느낌을 만들어낸다는 의미입니다.
  3. 값 대비: 텍스트와 배경의 명도(밝기/어두움) 차이가 커서 가독성이 뛰어납니다.
  4. 균형 있는 채도: 원색과 보조색은 생동감 넘치면서도 과하지 않게 채도가 높아 유치하거나 부담스러운 느낌을 피합니다. 좀 더 차분한 배경으로 균형을 이루고 있습니다.

기본적으로 밝고 현대적인 원색, 따뜻한 액센트, 세련된 어두운 배경과 신중하게 선택한 텍스트 색상의 조합은 시각적으로 매력적이고 전문적이고 교육적인 맥락에 적합한 팔레트를 만듭니다.

그러나 이러한 스타일은 전체 웹사이트가 아닌 화학 페이지에서만 작동합니다. 그래서 기본 스타일을 재정의하기 위해 Chemistry 내에 style-main.css라는 또 다른 CSS 파일을 만들었습니다.

<!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;
    }
}

이 style-main.css 파일은 기본 style.css의 스타일을 재정의하고 모든 페이지에 적용됩니다. 이제 숙련된 개발자라면 이해했을 수도 있지만 경험이 부족한 개발자를 위해 style-main.css의 필요성에 대해 이야기해 보겠습니다.

  • 문제: style.css(루트에 있음)가 기초를 제공하고 화학 관련 style.css가 고유 요소를 처리하는 반면, 일부를 수정해야 합니다. 구체적으로 화학 섹션의 글로벌 스타일입니다. 루트 style.css를 직접 변경하면 전체 웹사이트에 영향을 미치므로 바람직하지 않습니다.
  • 해결책: 루트 style.css의 특정 전역 스타일을 재정의하기 위해 화학 페이지에서만 style-main.css가 도입되었습니다. 또한 화학 관련 style.css의 스타일보다 더 일반적인 새로운 스타일을 추가할 수 있지만 여전히 전체 웹사이트에는 적용할 수 없습니다.
  • 예:
    • 루트 style.css는 기본 버튼 색상을 정의할 수 있습니다.
    • 화학 페이지에서 다른 버튼 색상을 원하거나 패딩을 조정할 수 있습니다.
    • style-main.css에는 버튼의 색상과 패딩을 재정의하는 CSS 규칙이 포함되어 있지만 화학 섹션에만
  • 혜택:
    • 모듈성: 스타일 수정 사항을 관련 주제 폴더에 정리하고 포함합니다.
    • 유지관리성: 다른 섹션에 영향을 주지 않고 특정 섹션의 스타일을 더 쉽게 업데이트하거나 변경할 수 있습니다.
    • 특이성: 재정의는 대상이 지정되며 원하는 효과를 얻기 위해 복잡한 CSS 선택기가 필요하지 않습니다.
    • 코드 중복 방지: 주제 영역에 대한 일반적인 재정의 또는 추가는 여러 주제별 스타일시트에서 반복되는 대신 style-main.css에 배치할 수 있습니다.

18시간: 특정 화학 페이지 스타일링

스타일을 너무 복잡하게 만들지 않기 위해 Chemistry 폴더 안에 있는 또 다른 스타일 시트 파일인 특정-화학.css를 사용하기로 결정했습니다. 이렇게 하면 제목 페이지의 스타일이 바뀌고 다른 파일이 깔끔하게 유지됩니다.

<!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;
    }
}

Chemistry 폴더 내의 index.html에서 사용한 3열 레이아웃에 스타일을 제공합니다. 페이지가 훨씬 깔끔하고 전문적으로 보입니다. 작은 화면을 위한 반응형 디자인도 추가했습니다.
실시간 미리보기를 원하시는 분들을 위해:
화학

기본 페이지라서 script.js를 추가할 필요성을 못 느꼈습니다
오늘은 그게 다입니다. 내일 뵙겠습니다. 그때까지 봐요'

위 내용은 나는 처음부터 ULTIMATE 교육 웹사이트를 구축했습니다 — 2일차의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html define if for while require JS default this padding background column Foundation Other
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：오늘의 가장 인기 있는 GitHub 프로젝트: 1월 5일 최고의 추천다음 기사：오늘의 가장 인기 있는 GitHub 프로젝트: 1월 5일 최고의 추천

관련 기사

더보기