ULTIMATE 教育 Web サイトを一から構築しました — 2 日目

昨日は、index.html に取り組みましたが、今日は subject.html と about.html に取り組みます。化学、数学などの主題ページに取り組むのに十分な時間が残っているかどうかを確認します。

14 時間目: 主題ページの構築

まずは subject.html から始めます。前と同じように、昨日このプロジェクト用にデザインしたカスタム ボイラープレートを使用します。

    <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">


    <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">


    <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">


    <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">