<p>Published on <a href="https://blog.prototypr.io/what-i-gained-after-1-year-of-100daysofcode-8269182f00a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Eleftheria Batsou <img alt="" src="https://cdn-images-1.medium.com/max/1024/0*6ZuBmAs7rTAFbee2."></p>
<blockquote><p>I am a slow walker, but I never walk back — Abraham Lincoln</p></blockquote>
<h3>How it started</h3>
<p>I read an article from the creator of the #100DaysOfCode challenge, <a href="https://twitter.com/ka11away">Alexander Kallaway</a>, and it got me super interested. I wanted to get better at coding and grow my portfolio. I knew if I committed to it publicly I would finish it.</p>
<p>I started the challenge on 31-December-2016 and I finished it on 9-April-2017</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*d21TyC9KA_pDvEXV.">Progress: #100DaysOfCode and Javascript30 are done</p>
<h3>The Rules I Followed:</h3>
<ol>
<li>I will code for at least an hour every day.</li>
<li>I will tweet my progress every day with the hashtag #100DaysOfCode.</li>
<li>I will track my #100DaysOfCode progress on my GitHub account.</li>
<li>I will encourage and support at least two people each day in the #100DaysOfCode challenge on Twitter.</li>
</ol>
<p>(View the official rules of the challenge <a href="http://www.100daysofcode.com/">here</a>)</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*q9IY1U3ehZ7aif0c.">Tip: To stay focus eat healthy, exercise regularly and keep notes</p>
<h3>My Achievements</h3>
<ul>
<li>I Improved at HTML, CSS/SCSS, JavaScript and jQuery.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FQKwVZO%3Fheight%3D600%26slug-hash%3DQKwVZO%26default-tabs%3Dcss%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FQKwVZO%3Feditors%3D1000&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.QKwVZO.small.4c41d452-52ad-457d-bf55-97472dfa5ae2.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/7d010a567fd9f2b73f6b0f5235819842/href">https://medium.com/media/7d010a567fd9f2b73f6b0f5235819842/href</a></iframe></p>
<ul>
<li>I created fun games and quizzes.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FEZQRPJ%3Fheight%3D600%26slug-hash%3DEZQRPJ%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FEZQRPJ&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.EZQRPJ.small.269672a2-90a5-4863-95b8-ce6aed23d6b1.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/24135571867e48619cedb3e91e4b0732/href">https://medium.com/media/24135571867e48619cedb3e91e4b0732/href</a></iframe></p>
<ul>
<li>I used for the first time APIs like the geolocation and Twitter API.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FNdjMzQ%3Fheight%3D600%26slug-hash%3DNdjMzQ%26default-tabs%3Dhtml%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FNdjMzQ&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.NdjMzQ.small.2cb2a831-42ae-443b-ba91-1a2a9f94c79a.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/71aa8151c9242a146d37a2c5ddf226c4/href">https://medium.com/media/71aa8151c9242a146d37a2c5ddf226c4/href</a></iframe></p>
<ul>
<li>I learned about Canvas and SVG</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FdVjXVx%3Fheight%3D600%26slug-hash%3DdVjXVx%26default-tabs%3Djs%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FdVjXVx&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.dVjXVx.small.496acff8-39b9-4325-8579-771e627499ec.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/da1861c43a0dc10ced95d71bf07cba23/href">https://medium.com/media/da1861c43a0dc10ced95d71bf07cba23/href</a></iframe></p>
<ul>
<li>I worked more with Git and GitHub</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/493/0*D3leO3zQvBRl0mUJ.">My Github after 100 days of committing my projects</p>
<p><a href="https://github.com/EleftheriaBatsou">My GitHub Account</a></p>
<h3>Sources and Inspiration for Projects</h3>
<p>A lot of people say they want to code but they don’t know what to build, honestly, there are endless possibilities. Some free sources with online development courses are <a href="https://www.freecodecamp.org/">freecodecamp</a>, <a href="https://www.codecademy.com/">codecademy</a>, <a href="https://www.coursera.org/">coursera</a>, <a href="https://www.udemy.com/">udemy</a>, <a href="https://www.udacity.com/">udacity</a> and of course there are several channels on <a href="https://www.youtube.com/">youtube</a>. You can subscribe to other challenges, like <a href="https://javascript30.com/">javascript30</a> or read books, like <a href="https://eloquentjavascript.net/3rd_edition/">eloquent javascript</a>.</p>
<p>Personally, I used:</p>
<ul>
<li><a href="http://www.developphp.com/">Developphp.com</a> — A great site with video tutorials about HTML, CSS, JavaScript, jQuery and PHP</li>
<li>I followed the <a href="https://javascript30.com/">javascript30</a> challenge</li>
<li>I also committed to the #dailyCssImages challenge (I wrote an article about how I started with <a href="https://blog.prototypr.io/my-journey-with-pure-css-images-d5b561e51d2f">pure CSS images</a>) but I choose not to do it as part of my #100DaysOfCode journey.</li>
<li>I recreated pens from <a href="https://codepen.io/">codepen</a>.</li>
<li>I developed my own personal snippets.</li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F6iFlhmejGnc%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6iFlhmejGnc&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F6iFlhmejGnc%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/e9c59277571cbbc34bff0af68202a717/href">https://medium.com/media/e9c59277571cbbc34bff0af68202a717/href</a></iframe></p>
<h3>Web Environment and My Daily Process</h3>
<ul>
<li>I coded most of my projects on Codepen and some of them on the text editor Atom. (<a href="https://blog.prototypr.io/free-offline-text-editors-for-web-development-on-win-mac-and-linux-6b797bf4d6fe">These</a> are my reccomendations for offline text editors)</li>
<li>After I finished its project I uploaded the code on GitHub.</li>
<li>I shared my progress on Twitter and I always encouraged others.</li>
<li>To make my life easier I used a lot of tools for selecting <a href="https://youtu.be/yj2Akhmx2oU">colors</a>, <a href="https://youtu.be/nz1PHD4TxXA">icons</a>, <a href="https://youtu.be/0uc3gTQ_0as">images</a> and <a href="https://youtu.be/vFjg3zfsRro">typography</a> (I wrote an article of my favorite UX and UI tools, you are welcome to read it <a href="https://blog.prototypr.io/tools-to-use-in-your-next-ui-ux-job-4ce7ba29fbf9">here</a>).</li>
</ul>
<blockquote><p>while (! (succeed = try() ));</p></blockquote>
<h3>What Did I Gain?</h3>
<p><em>My growth wasn’t only in a coding level but on a personal level too.</em></p>
<ul>
<li>My web development and web design skills improved.</li>
<li>It got me motivated to commit to other challenges like javascript30, <a href="https://codepen.io/collection/AkeJLM/">dailyCssImages</a>, <a href="https://codepen.io/collection/DpNRqd/">30Days30Sites</a>, 301DaysOfCode (which is what I ‘m currently doing), and I’ll propably start #dailyUI too.</li>
<li>I gain followers on <a href="https://twitter.com/BatsouElef">Twitter</a>, <a href="https://codepen.io/EleftheriaBatsou/">Codepen</a>, <a href="https://www.youtube.com/c/EleftheriaBatsou">YouTube</a> and even in <a href="https://github.com/EleftheriaBatsou">GitHub</a>.</li>
<li>I learned to be more optimistic and grateful.</li>
<li>I got better at time-managment.</li>
<li>I learned to set priorities and actually stick to them.</li>
<li>I got feedback on my projects and positive vibes for my fellow coders.</li>
<li>I met a lot of people with different backgrounds and different aspirations (most of them were via emails, Twitter and Skype.)</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*WmmrDjlz1uesxpzt.">Progress: 100DaysOfCode, Javascript30 and dailyCssImages are done<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*4iS7JrFrTjt4s2Aw.">Progress: 100DaysOfCode, Javascript30 and dailyCssImages are done<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*LROWbiCF6zScxsEe.">Progress: 100DaysOfCode, Javascript30, dailyCssImages and 30days30sites are done</p>
<h3>Would I Recommend It?</h3>
<p>If you want to improve, grow, learn, share, get feedback, friends, endless posibilities for connections, stop procrastinating and stay focused, then YES, this challenge is for you.</p>
<p><em>P.S. Note the day I started #100DaysOfCode, it was New Year’s Eve, I can hear you say “this developer has no life” </em>😛</p>
<p><em>P.S.2 Note the day I started #dailyCssImages, it was Valentine’s Day, now I can clearly hear you say “this developer really has no personal life” </em>😜</p>
<p><strong>Thanks for taking the time to read my story, if you like it please share and help the #100DaysOfCode community to gain another loyal coder.</strong></p>
<p><strong>It would be great if you could also follow me on my social media. Have a great day.</strong></p>
<p><a href="https://www.youtube.com/c/EleftheriaBatsou">Youtube</a> | <a href="https://codepen.io/EleftheriaBatsou">Codepen</a> | <a href="https://github.com/EleftheriaBatsou">GitHub</a> | <a href="https://twitter.com/BatsouElef">Twitter</a> | <a href="http://eleftheriabatsou.com/">Site</a></p>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Ff51076%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=8269182f00a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/what-i-gained-after-1-year-of-100daysofcode-8269182f00a">What I Gained After 1 Year of #100DaysOfCode</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


What I Gained After 1 Year of #100DaysOfCode

How it …

Top Stories