-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
311 lines (246 loc) · 13.6 KB
/
index.html
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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE html>
<html lang="en">
<head>
<!--Link HTML and CSS -->
<link rel="stylesheet" type="text/css" href="./style.css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<!-- Icon Flag library -->
<link rel="stylesheet" type="text/css" href="./node_modules/semantic-ui-flag/flag.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>My Coding Journey</title>
</head>
<body>
<header>
<div class="headline-title">
<h1 class="title">My Coding Journey</h1>
<div class="social">
<a href="https://www.instagram.com/huongg/?hl=en" target="_blank" class="fa fa-instagram"></a>
<a href="https://twitter.com/Huongg1409" target="_blank" class="fa fa-twitter"></a>
<a href="https://www.linkedin.com/in/huongg/" target="_blank" class="fa fa-linkedin"></a>
<a href="https://github.com/huongg" target="_blank" class="fa fa-github"></a>
</div>
</div>
<div class="introduction">
<p>
Ever worried that you are not good enough to learn coding? <span style="font-weight: bold; font-size: 22px; color: #FFFFF0;">You are not alone!</span>
</br>
<span style="font-weight: bold; font-size: 22px; color: #FFFFF0;">I was you.</span> I was stressed and worried, as much as you might be now.
</br>
Hopefully reading about experiences from a stranger in the same situation just like you, will help.
</br>
At the end of the day, what I've learnt from this journey is that <span style="font-weight: bold; font-size: 22px; color: #FFFFF0;">don't ever give up</span>,</br>
and <span style="font-weight: bold; font-size: 22px; color: #FFFFF0;">don't try to do it all on your own</span>.
</p>
</div>
</header>
<div class="main-body">
<div class="main-profile">
<img class="profile-image" src="./images/profile.jpg" height="329px" width="300px">
<h2 class="intro-headline">Huong Nguyen</h2>
<i class="vn flag"></i> <i class="gb flag"></i>
<p class="intro-paragraph">
A Front-end Developer and part-time gardener.
</br>I love everything about programmer life
<i class="fa fa-heart-o" style="font-size:16px;color:red"></i>
</p>
<div class="graph-bar">
<div class="graph-line">
<p>HTML</p>
<div class="bar bar1">90%</div>
</div>
<div class="graph-line">
<p>CSS</p>
<div class="bar bar2">80%</div>
</div>
<div class="graph-line">
<p>Javascript</p>
<div class="bar bar3">70%</div>
</div>
<div class="graph-line">
<p>Gardener</p>
<div class="bar bar4">50%</div>
</div>
</div>
<div class="founders-coders">
<p>** More about the code for this site:
<a href="https://github.com/Huongg/my-coding-journey" target="_blank">
<img class="github" src="./images/github.png">
</a>
<p>** Check out my freeCodeCamp and Codewars:
<a href="https://www.freecodecamp.org/huongg" target="_blank">
<img class="freecodecamp" src="./images/FCClogo.png">
</a>
<a href="https://www.codewars.com/users/Huongg" target="_blank">
<img class="codewars" src="./images/codewarsLogo.jpeg">
</a>
</div>
</div>
<div class="timeline">
<div class="container">
<div class="image">
<img src="./images/codecademy.png" alt="" height="349px" width="320px">
</div>
<div class="info">
<p class="date">Jun 2017<p>
<h2 class="headline">CODECADEDMY</h2>
<p class="paragraph">Started my journey by doing the foundations of HTML and CSS from Codecademy. Codecademy focuses on teaching beginners. It offers a mix of fun lessons, practical exercises, and rewards for your progress. </br></br>The only problem I had is that I can get the solution very easily when stuck. I found that I lost a bit of motivation to fully understand the solution. It is kind of a passive learning for me</p>
<p class="call-to-action">
Check it out here:
<a class="links" href="https://www.codecademy.com/learn" target="_blank">Codecademy</a>
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="./images/CFG.png" alt="" height="349px" width="320px">
</div>
<div class="info">
<p class="date">September 2017<p>
<h2 class="headline">CODE FIRST GIRLS</h2>
<p class="paragraph">After discovering Codefirstgirls through one of their events, I applied for their 3-month introduction to web development course. The course runs once a week in the evening.</br> I was struggling for the first 2 weeks as there was so much new knowledge I needed to understand (github, git, commandline, how the internet works). </br></br> Having said that, it is not impossible to learn. It will be always hard when you learn something completely new. Just keep learning is the key and it will be rewarding at the end!
</p>
<p class="call-to-action">
Check out their new courses:
<a class="links" href="https://www.codefirstgirls.org.uk/courses-we-offer.html" target="_blank">CodeFirstGirls</a>
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="./images/javascript.png" alt="" height="349px" width="320px">
</div>
<div class="info">
<p class="date">December 2017<p>
<h2 class="headline">JAVASCRIPT THROUGH YOUTUBE</h2>
<p class="paragraph">Even after few months coding, I found myself still struggling to write effective Javascript. Youtube is one of the great online resources to learn (because for me, its not just passive reading). </br></br>
There are so many different learning channels on Youtube. I'd recommend to try a few and practice along the way when you're watching the video. It feels like pair-programming to me when I do that.
</p>
<p class="call-to-action">
My favourite learning channel:
<a class="links" href="https://www.youtube.com/user/shiffman" target="_blank">The Coding Train</a>
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="./images/FCC.png" alt="" height="349px" width="320px">
</div>
<div class="info">
<p class="date">September 2017<p>
<h2 class="headline">FREECODECAMP</h2>
<p class="paragraph">freeCodeCamp (FCC) is another great online platform to learn coding as they provide free-form projects and testing during the tutorials. By this time I had already completed my codecademy and codefirstgirls lessons, so taking FCC tutorials gave me a different view on how to understand the code and new challenges. </br></br>
Learning coding is exactly like how to learn a new foreign language. The more practice and resources you get, the better understanding from different perspectives you will gain.
</p>
<p class="call-to-action">
More coding tutorials:
<a class="links" href="https://learn.freecodecamp.org/" target="_blank">freeCodeCamp</a>
</p>
</div>
</div>
<div class="container code-bar">
<div class="image">
<img src="./images/codebar-brighton.png" alt="" height="349px" width="320px">
</div>
<div class="info">
<p class="date">March 2018<p>
<h2 class="headline">CODEBAR</h2>
<p class="paragraph">Codebar is an amazing tech community that helps me with any technical problem, and where I can make friends with many like-minded people. It is amazing not just because you will get help from experienced coaches on the 1-1 (or 2-1) team, but also you'll learn their real experiences on problem solving.
</br></br>
Codebar runs many different workshops in different locations (either in the UK or somewhere else). In London, they're running 2-3 workshops per week (web and android development). The availble spots run out quickly, and they'll publish the opening date on their slack channel. Make sure you join it to be kept updated.
</p>
<p class="call-to-action">
Weekly coding workshops:
<a class="links" href="https://codebar.io/events" target="_blank">Codebar</a>
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="./images/codewars.png" alt="" height="349px" width="320px">
</div>
<div class="info">
<p class="date">April 2018<p>
<h2 class="headline">CODEWARS</h2>
<p class="paragraph">Great for challenges and problem solving skills - pa pow. It can be quite confusing when you first go on the codewars website. On the platform, you are a code warrior who will train, either by yourself or with others, on programming challenges known as katas.
</br></br>
Every kata has its own rank, which is used to indicate its difficulty. You begin with Kyu at level 8 and work your way down to level 1. Then you progress to Dan, where you work your way up from level 1 to level 8. Doesn't that sound super cool!!
</p>
<p class="call-to-action">
Are you ready for some challenges? ->
<a class="links" href="https://www.codewars.com/" target="_blank">Codewars</a>
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="./images/katathon.png" alt="" height="349px" width="320px">
</div>
<div class="info">
<p class="date">May 2018<p>
<h2 class="headline">KATATHON</h2>
<p class="paragraph">Super cool Saturday coding workshop with weekly themes of codewars and freeCodeCamp. As I mentioned from the very beginning, coding on my own was intimidating and not always enjoyable. Every time I got stuck with my code, my emotion immediately went down the hill.
</br></br>
I never find myself being like that when I'm surrounded by other people. That's why I always come to coding workshops to learn or even just sit there and do my own projects. There are always people that can give you advice. There are plenty of free coding workshops, pick one that you feel comfortable with.
</p>
<p class="call-to-action">
Free this Saturday? ->
<a class="links" href="https://www.meetup.com/Codecademy-London/events/hxspdpyxlbxb/" target="_blank">Katathon</a>
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="./images/chingu.png" alt="" height="349px" width="320px">
</div>
<div class="info">
<p class="date">June 2018<p>
<h2 class="headline">CHINGU COHORT</h2>
<p class="paragraph">A build-to-learn project working with a remote team of developers around the world. If you want to experience how it's like to be working in a dev team, I'd recommend to join Chingu. Chingu motivates you to step out of your comfort zone, to learn something very new and how to work with other developers.
</br></br>
On our Chingu project, I decided to adopt the React framework for our website front-end. It was the first time I experienced React/Node and webpack. I did have some "panic attack" moments to learn how to use these new technologies. But keep at it and you'll get there.
</p>
<p class="call-to-action">
New cohorts are coming soon:
<a class="links" href="https://chingu.io/" target="_blank">Chingu</a>
</p>
</div>
</div>
<div class="container">
<div class="image">
<img src="./images/talks.jpg" alt="" height="349px" width="320px">
</div>
<div class="info">
<h2 class="headline" style="margin-top: 40px;">MEETUP EVENTS</h2>
<p class="paragraph">Coding all the time is good, but it's even better if you can share your story to other people or listening to their experience on the latest technologies and trends. I do enjoy going to a lot of talks. Just knowing that I'm not alone can give me the confidence to move forward in my development learning path.
</br></br>
Codebar and CodeFirstGirls normally host monthly talks, or you can find more events on MeetUp.com. My favourite are <span style="color: #2ecc71;">React.JS Girls London</span>, <span style="color: #2ecc71;">Ladies of Code (London)</span> and <span style="color: #2ecc71;">Codebar Monthly</span>
</p>
<p class="call-to-action">
Check out more events on:
<a class="links" href="https://www.meetup.com/" target="_blank">MeetUp</a>
</p>
</div>
</div>
<div class="container coding-groups">
<div class="image">
<img src="./images/online.jpg" alt="" height="349px" width="320px">
</div>
<div class="info">
<h2 class="headline" style="margin-top: 40px;">ONLINE CODING GROUPS</h2>
<p class="paragraph">You might not always have the time or opportunity to come to meetups. Don't loose hope yet. There are numerous of online coding groups that you can get help from.</p>
</br>
Check out some channels below: </br>
<ul class="list-of-links">
<li><a class="links" href="https://www.facebook.com/groups/free.code.camp.london/" target="_blank">freeCodeCamp Facebook Group</a></li>
<li><a class="links" href="https://codebar.slack.com/messages/general" target="_blank">Codebar Slack Channel</a></li>
<li><a class="links" href="https://gitter.im/GiacomoSorbi/katathon" target="_blank">Katathon on Gitter</a></li>
</ul>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>