100DaysofCode-Harshvdev/index.html at main · Harshvdev/100DaysofCode-Harshvdev · 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
145
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="webpage-v2/style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <title>#100DaysofCode Homepage</title>
</head>
<body>
  <header>
    <nav class="navbar">
      <div class="logo">#100DaysofCode</div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Progress Log</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Tech Stack</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <div class="title">
      <h1>Journey Through #100DaysofCode</h1>
      <p>From Zero to Dev, One Day at a Time</p>
      <button class="title-button">SEE MY PROGRESS</button>
    </div>
    <div class="progress-log">
      <h2>My Coding Odyssey: The Progress Log</h2>
      <div class="day-group">
        <div class="day-1 day">
          <h3>Day-1: Wrote my first Python program!</h3>
          <p>
            Printed "Hello World", made a little ASCII art, and played around with variables and f-strings to describe myself.
          </p>
          <div class="card-footer">
            <a href="#">[View Day-1 Code]</a>
            <span>April 20, 2025</span>
          </div>
        </div>
        <div class="day-2 day">
          <h3>Day-2: Strings, Math, Lists & Functions</h3>
          <p>
            Practiced string and math functions, explored lists and tuples, and wrote basic input-based functions.
          </p>
          <div class="card-footer">
            <a href="#">[View Day-2 Code]</a>
            <span>April 21, 2025</span>
          </div>
        </div>
        <div class="day-3 day">
          <h3>Day-3: Dictionaries & Loops</h3>
          <p>
            Practiced month lookups with dictionaries, loops, and built a simple calculator, guessing game, and translator.
          </p>
          <div class="card-footer">
            <a href="#">[View Day-3 Code]</a>
            <span>April 22, 2025</span>
          </div>
        </div>
        <div class="day-4 day">
          <h3>Day-4: Vowel Game & File Handling</h3>
          <p>
            Created a vowel-counting game using conditionals, loops, and error handling. Also tried basic file writing in Python.
          </p>
          <div class="card-footer">
            <a href="#">[View Day-4 Code]</a>
            <span>April 23, 2025</span>
          </div>
        </div>
        <div class="day-5 day">
          <h3>Day-5: Built a Multiple Choice Quiz</h3>
          <p>
            Created a simple quiz app using classes to manage questions and answers. Practiced user input, loops, and scoring.
          </p>
          <div class="card-footer">
            <a href="#">[View Day-5 Code]</a>
            <span>April 24, 2025</span>
          </div>
        </div>
      </div>
    </div>
    <div class="about-section">
      <h3>About This Challenge</h3>
      <div class="about-content">
        <div class="about-text">
          <p>The #100DaysOfCode challenge is a personal commitment to coding for at least one hour every day for 100 consecutive days. It's an incredible journey of discipline, learning, and growth in the world of programming.</p>
          <br>
          <p>My primary goals for this challenge are:</p>
          <br>
          <ul>
            <li>Progress steadily through The Odin Project, focusing first on web development fundamentals.</li>
            <li>Learn how to use Git and GitHub effectively, especially for tracking my work.</li>
            <li>Strengthen my problem-solving mindset by breaking down coding tasks clearly.</li>
            <li>Document my learning and share updates online to stay accountable and motivated.</li>
            <li>Make at least one project from my personal idea list.</li>
          </ul>
          </div>
          <div class="about-img">
            <img src="https://imgs.search.brave.com/NdDwAVwSp3B4_ybEUOCm0LYjFAo8vkYpK1pphXGJhPA/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5pc3RvY2twaG90/by5jb20vaWQvMTM0/NzY3Nzc3Ny9waG90/by9jbG9zZXVwLW9m/LWNvbXB1dGVyLXBy/b2dyYW1taW5nLXR5/cGluZy1vbi1sYXB0/b3AuanBnP3M9NjEy/eDYxMiZ3PTAmaz0y/MCZjPUNRZmFUNURx/aXBnREFHenAydFJG/WGhBaFY3NjVkWUJy/OEF2Rl9ja1kzVnM9" alt="Illustration of a person coding on a laptop, representing the coding journey.">
          </div>
      </div>
    </div>
    <div class="lang-section">
      <h3>Technologies I'm Learning</h3>
      <div class="cards">
        <div class="card">
          <i class="fa-brands fa-html5 fa-4x"></i>
          <p>HTML5</p>
        </div>
        <div class="card">
          <i class="fa-brands fa-css3-alt fa-4x"></i>
          <p>CSS3</p>
        </div>
        <div class="card">
          <i class="fa-brands fa-js fa-4x"></i>
          <p>JavaScript</p>
        </div>
        <div class="card">
          <i class="fa-brands fa-react fa-4x"></i>
          <p>React.js</p>
        </div>
        <div class="card">
          <i class="fa-brands fa-python fa-4x"></i>
          <p>Python</p>
        </div>
        <div class="card">
          <i class="fa-brands fa-node-js fa-4x"></i>
          <p>Node.js</p>
        </div>
        <div class="card">
          <i class="fas fa-database fa-4x"></i>
          <p>SQL/NoSQL</p>
        </div>
        <div class="card">
          <i class="fa-brands fa-git-alt fa-4x"></i>
          <p>Git</p>
        </div>
      </div>
    </div>
  </main>
</body>
</html>