Although I was never particularly academic at school, which is a bit of an understatement considering I bombed out of secondary school with but a handful of GCSEs, I have always considered myself a lifelong learner if for no other reason than having to constantly adapt and learn new ways of doing things as a result of my disability.

I started to learn to code in the summer of 2020 and by the end of the year had absolutely fallen in love with coding and being able to build cool stuff.

I wanted to give myself a challenge in the New Year, as let’s be fair 2020 was a pretty rubbish year for most people, and having read about the #100DaysOfCode challenge on Twitter decided that this would be a good opportunity to apply some focus to my learning.

So on January 1, 2021, I formally declared my intention to start my #100DaysOfCode journey and this is the story of how I got on, some of the areas I covered and most importantly the lessons I learned along the way.

If you’re reading this I hope it is of some use to you in your journey.

WHAT DID I LEARN?

Read the documentation – it cannot be overstated, and is frequently reiterated in Twitter discussions, then reading the documentation for a language/framework/tool et cetera should be your first port of call when trying to understand what you need to do with your project. That being said the level of documentation can vary quite a lot and you will end up going down rabbit holes and tying yourself in knots when the level of documentation is substandard. Whenever I got to that stage my immediate go-to is Google, as it is very likely that what you’re trying to do has been done before and someone will come across the same problem as you and there will undoubtedly be a whole raft of information, and if you’re lucky, a fix or code snippet that you can use.

Pause, rewind and absorb… - If like me, you like to learn through tutorials and following others building projects online then you may well find yourself getting lost mostly because the speed at which experienced developers build things during their tutorials/courses is rarely at a speed at which you as the viewer can follow along with and build along with, in parallel. What worked for me was watching the tutor and then either pausing the video so that I could bring my version of the project up to the same level or pausing the video before the tutor started to build something, trying to build it myself and then watching the rest of the video and adjusting my code as needed (you need to be reasonably comfortable with the language or framework to start with to do this). One key point around this is that if you are doing online tutorials then make sure you allow enough time to do the tutorial plus whatever time you think you will need for revisions/pauses and rewinds in your learning plan. I found that I needed to add at least 50% additional time to my plan, but my typing speed is absolutely abysmal.

TAKING A BREAK IS NOT A CRIME! - Whilst the main premise of the #100DaysOfCode challenge is to get you into a regular behavioural pattern of writing code, so that it becomes second nature, what everyone undertaking the challenge should realise is that it is very important to sometimes just say “I need a break” and walk away for a day or two if needed. If you can maintain 100 days of doing anything without needing a break then fair play to you. I couldn’t and, excluding having to stop for a few weeks due to getting Covid-19, would occasionally take a day off just to recharge the batteries and not feel like I was becoming a slave to the challenge. However what I did notice is that in the last 30-ish days of the challenge I started to become more enthused and, even on a day I told myself I was going to have a break, found myself at the keyboard fiddling about with one project or another.

RESOURCES I USED FREQUENTLY

Documentation – I have said previously but it absolutely warrants reiteration. RTFD…

https://www.google.com/ – although it often comes across as a bit of a joke it is an absolute truism that any developer, no matter how senior, will often be turning to Google when they either get stumped all are looking for a new shiny toy to put inside their project. Throughout my journey, I have created a library of bookmarks in my browser, but it’s always worth googling to find what else is out there as the pace of change is unbelievable.

https://stackoverflow.com/ – I will be honest and say that I have a bit of a love-hate relationship with this website. As a source of information or fixes, it is great, if there is an existing thread on the subject. However, my personal experience, of putting new questions to the community has not inspired me to do it again.

https://developer.mozilla.org/ – This is literally the standard for HTML, CSS and JavaScript and gives great examples of how to use the baseline code.

https://www.php.net – as previous but for PHP, this is a great resource when trying to find out what the language is capable of doing. https://www.reactjs.org – the font of knowledge for the baseline react framework. As with the previous two entries, this is a great source of knowledge if you want to get into react.

https://www.getbootstrap.com – the bootstrap framework is absolutely essential when you are starting out and want to quickly prototype your designs without going into all the detail of CSS yourself. Personally, I love it, and the plethora of templates and frameworks that have been built up around it.

https://www.cdnjs.com – if you want to include something in your project but don’t want to install the package itself and this site is a great source for the code snippets that you will need to add in your header or footer for either the CSS or JavaScript inclusions.

https://www.imagecompressor.com – if you are just building little projects to test your code that will only be deployed locally then image compression is probably not going to be an issue. However, if you intend to put your project anywhere near the Internet then compressing your images down to a reasonable size is an absolute must. I tried a few different sites over the last few months and found that this one responds the quickest and gives me what I need without going through the nuisance of creating accounts choosing numerous options et cetera. It also does bulk-load which is great.

https://www.github.com / Github desktop / GitHub pages – if you’re going to build and deploy code in any meaningful way then you will absolutely need some sort of versioning tool. I opted for GitHub and, although I did learn the basic command lines, choose to use GitHub desktop most of the time for convenience. I also like having the ability to put up Github pages to showcase a project without having to deploy it to our hosting provider, and most of my portfolio runs straight out of Github pages.

Vscode and https://marketplace.visualstudio.com/ – there are a lot of code editors out there and the choice of which one you use is usually based on personal preference. After having looked at a few different ones I decided to use VS Code as I like the interface and the extension management capabilities. Currently I’m running with a number of extensions active all of which make my life coding a lot easier. These are:

• Auto rename tag – which automatically changes the opposite end of a tag when you are editing your code
• Brackets pair coloriser – I found this to be fantastic so you understand where you are within different blocks of code
• code spell checker – just because…
• Code highlight – again let’s you see where you are within your various blocks of code
• ESLint – great integration if you’re using ESLint in your code
• Live server – so you can see how your code is working in real-time
• IntelliSense or code snippets for any language you’re using as auto complete saves a lot of time
• Prettier – for formatting your code into more readable structures. I found this only works, or it could only get it to work, with HTML and JavaScript
• Snyk vulnerability scanner as this will run scans against all of your public repos but can also tell you if your code is going to work or not is a will highlight code blocks that are not doing anything or will not work
• VScode–icon – gives you pretty little icons for your file types, which can be quite useful

other than extensions it is or is worth checking out the different colour themes that are available and choosing one that suits your personal preference on colourisation of syntax.

Multiple screens – whilst you can absolutely free amazing code on a single screen I’d thoroughly recommend investing in a least one other screen. My personal setup is a 27 inch screen in portrait mode, a 34 inch Ultra wide and 24 inch that I can pivot to landscape or portrait depending on the need. The ability to have multiple applications open and visible at the same time will help you improve your code experience no end.

https://www.a11yproject.com - this is a great source of information and checklists that will help you make your web project accessible to everyone.

WHAT WOULD I DO DIFFERENTLY?

I have reflected on this quite a lot in the last couple of weeks and I think the only thing I would definitely do differently, and in fact, will do differently on my next #100DaysOfCode, is to engage more with the community and put more effort into engaging by social media channels.

From what I’ve experienced so far the dev community is excellent (if somewhat argumentative, just don’t ask which languages are the best!) and is very supportive of us newbies.

TUTORIALS I ENJOYED

I spent a lot of time during the hundred days learning from experienced developers through articles, YouTube videos, and tutorials. The bulk of my learning came from tutorials on Udemy.com and I thought I would share the list of my top five favorite courses that I completed during my hundred days.

Each of the below helps to enhance my understanding in terms of deepening my knowledge of specific languages as well as giving inspiration as to the different ways that projects can be built.

• 50 projects in 50 days, HTML, CSS & JavaScript – Brad Traversy

• JavaScript Web projects: 20 projects to build your portfolio – Andrei Neagoie

• React front to back - Brad Traversy

• Django with React an e-commerce website - Brad Traversy

• PHP for beginners – become a PHP master – CMS project – Edwin Diaz

now there are obviously many other great content creators out there so this is just based on my personal experience from what I’ve covered so far.

Prior to my hundred days, I had spent a lot of time in courses and tutorials from LinkedIn Learning which has some awesome courses done by some very passionate instructors and I learned a lot of the basics of HTML, CSS, and JavaScript from these tutors.

We all learn differently so you need to be mindful of the best way that works for you when setting out on your journey.

WHAT NEXT?

Having finished my first go-round of #100DaysOfCode I’m taking a short break body to get this blog going, but also to think about what I want to do next. At the moment it is a tossup between delving deeper into react or learning Python.

Either way, I know it will be a good laugh I will thoroughly enjoy (most of) it!