Journal-Learning/index.html at main · kvothe1387/Journal-Learning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<html>

<head>
  <title>My Learning Journal</title>
  <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=Roboto:wght@700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap"
    rel="stylesheet" />
  <link rel="stylesheet" href="css/index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <!-- Header with Navigation -->
  <header class="header">
    <nav class="nav" role="navigation" aria-label="Main navigation">
      <div class="logo">
        <img src="images/smile.png" alt="Smiley text bubble">
        <span>My Learning Journal</span>
      </div>
      <ul class="nav-links" role="menubar">
        <li role="none"><a href="/" aria-label="Go to homepage" role="menuitem">HOME</a></li>
        <li role="none"><a href="pages/about.html" aria-label="Learn about me" role="menuitem">ABOUT ME</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <!-- Hero Section -->
    <section class="hero-section">
      <div class="hero-content">
        <div class="date" aria-label="Published on October 13, 2025">October 13, 2025</div>
        <h1 class="hero-title">
          <a href="/pages/blog-post.html">My new journey as a bootcamp student.</a>
        </h1>
        <p class="hero-description">
          After several months of learning in the Frontend Developer Career Path, I've made the big jump over to the
          Bootcamp to get expert code reviews of my Solo Projects projects and meet like-minded peers.
        </p>
      </div>
    </section>

    <!-- Blog Section -->
    <section class="blog-section" aria-label="Blog posts">
      <div class="blog-grid">
        <!-- Blog Card 1 -->
        <article class="blog-card">
          <img src="images/blog-image-01.png" alt="Frontend learning journey illustration" class="blog-image"
            loading="lazy">
          <div class="blog-content">
            <div class="blog-date" aria-label="Published on October 7, 2025">October 7, 2025</div>
            <h3 class="blog-title">Finding My Focus in Frontend</h3>
            <p class="blog-excerpt">I used to struggle with consistency in learning frontend, but discovering Scrimba
              was
              a game-changer.The
              interactive format made learning feel less like a chore and more adventure.</p>
          </div>
        </article>

        <!-- Blog Card 2 -->
        <article class="blog-card">
          <img src="images/blog-image-02.png" alt="Daily coding routine setup" class="blog-image" loading="lazy">
          <div class="blog-content">
            <div class="blog-date" aria-label="Published on October 18, 2025">October 18, 2025</div>
            <h3 class="blog-title">How I Finally Built a Routine</h3>
            <p class="blog-excerpt">Discipline has always been my biggest challenge. But with Scrimba’s project-based
              path, I started waking up excited to code. Seeing my progress through actual projects, not just theory,
              helped me build a routine I never thought I could stick to.</p>
          </div>
        </article>

        <!-- Blog Card 3 -->
        <article class="blog-card">
          <img src="images/blog-image-03.png" alt="Code confidence building process" class="blog-image" loading="lazy">
          <div class="blog-content">
            <div class="blog-date" aria-label="Published on October 25, 2025">October 25, 2025</div>
            <h3 class="blog-title">From Copy-Paste to Confidence</h3>
            <p class="blog-excerpt">In the beginning, I relied a lot on copying code without fully understanding it. But
              Scrimba’s challenges pushed me to pause, think, and break down each problem. Slowly, I started writing
              more
              from memory—and with confidence.</p>
          </div>
        </article>

        <!-- Blog Card 4 -->
        <article class="blog-card">
          <img src="images/blog-image-04.png" alt="Moment of breakthrough in coding" class="blog-image" loading="lazy">
          <div class="blog-content">
            <div class="blog-date" aria-label="Published on October 31, 2025">October 31, 2025</div>
            <h3 class="blog-title">When Everything Finally Clicked</h3>
            <p class="blog-excerpt">I'll never forget the moment I built my first responsive layout from scratch. It
              wasn’t perfect, but it worked—and I understood *why* it worked. That moment was a turning point where I
              realized I could actually do this.</p>
          </div>
        </article>

        <!-- Blog Card 5 -->
        <article class="blog-card">
          <img src="images/blog-image-05.png" alt="Overcoming self-doubt in programming" class="blog-image"
            loading="lazy">
          <div class="blog-content">
            <div class="blog-date" aria-label="Published on October 22, 2025">October 22, 2025</div>
            <h3 class="blog-title">Imposter Syndrome vs. Progress</h3>
            <p class="blog-excerpt">Even as I improved, I constantly felt like I wasn’t good enough. But looking back at
              my earlier projects, I could see just how far I'd come. That gave me the push to keep going—even when
              self-doubt crept in.</p>
          </div>
        </article>

        <!-- Blog Card 6 -->
        <article class="blog-card">
          <img src="images/blog-image-06.png" alt="Commitment to learning web development" class="blog-image"
            loading="lazy">
          <div class="blog-content">
            <div class="blog-date" aria-label="Published on October 9, 2025">October 9, 2025</div>
            <h3 class="blog-title">Why I’m Not Giving Up This Time</h3>
            <p class="blog-excerpt">This isn’t my first time trying to learn web development—but it’s the first time
              I’ve
              stuck with it this long. Thanks to Scrimba’s support, real projects, and a sense of community, I finally
              feel like I belong in tech.</p>
          </div>
        </article>
      </div>

      <!-- View More Button-->
      <div class="view-more">
        <a href="#" class="view-more-btn" role="button">View More</a>
      </div>
    </section>

  </main>

  <!-- Footer -->
  <footer role="contentinfo" aria-label="Site footer">
    <div class="container">
      <p>My Learning Journal by David McCullough</p>
      <p class="copyright">Copyright ©2025</p>
    </div>
  </footer>

</body>

</html>