Better late than never...

Having finally decided to start trying to learn web dev in October of 2023, (after having had it on the backburner for so long, the web 'pot' was now well and truly scorched), I recently became aware that documenting my progress to some degree might be beneficial. So here I am...

I will try to document my approach so far, which I admit has had to change more than once since I started and which I will try to remember as best I can. It may be a bit long for a single post, but I am trying to make up for the six months that I spent not documenting my progress.

From zero to 0.001: HTML & CSS with Free Code Camp

I started off trying with Free Code Camp's HTML and CSS course and felt a great sense of achievement when I first spotted a missed forward slash in a closing tag.

I finished most of the Front-end certificate except for the Portfolio Page, as I had nothing to put into it and wanted to see if I could attempt it further down the line once my skills had improved.

Where to next? Javascript

I moved onto the Free Code Camp Javascript course and whilst I understood the concepts as I went along, I soon felt like my goal was to just get the required code in. However, I knew that I would never have been able to reproduce what I was doing independently, as I didn't fully understand how everything fitted together.

If I had continued, it would surely have all come together, but more than once I thought "what the h\ll am I typing?"* and took this as a cue to change learning resource for the time being.

Udemy to the rescue. More Javascript

After a huge quantity of googling, I knew the answer to my prayers: Udemy. And more specifically, Jonas Schmedtmann, who I decided would show me the way.

I signed up for his Javascript course, as well as a few others that I was sure I would complete in no time.

I found Jonas' course very good. I watched the entire thing as double-speed, since - let's face it - I don't have time to lose.

Although I found the course very good, I think I realised at some point that I was indeed falling into the infamous 'Tutorial Hell'. And how would I get out of this? Well, according to millions of You Tube videos, the answer was 'to build'.

My First Page. 'Build' they said!

Since I have an interest in languages, I decided to build a page about multilingualism. I shall have this finished in a few days, I thought. I was indeed wrong and posted several posts in help forums such as:

• why is this image twice the size of the other one?

• why is my header not centered?

• why are these extra boxes that I added at the end not lining up with the other boxes that I added in that other place etc.?

• who am I and what am I doing here?

(Disclaimer: one of the above bullet points may not be true).

Within this project I used the following:

• Nav menu

• Unordered lists

• Links

• (Clickable) buttons (revealing/hiding text using Javascript 'toggle' function)

• Flexbox

• (Non-functioning) form

At a certain point, I decided that putting more work into this project was probably not worth it. I knew I needed to move on and learn other things and I thought my efforts would be better spent elsewhere, rather than on a static page with short paragraphs about four polyglots many people would not be interested in. At this stage, I had no idea how to even make the site responsive.

What to do next when you have a million other things to learn? Codewars

Having spent time on the above project, I realised that I hadn't really been doing that much with the Javascript I had learnt before, so I turned to Codewars.

I am not going to lie - I was stumped by the simplest of things at the beginning, but it was more to do with how things were presented I think.

E.g. the starting code given to you might be something like:

Complete the square sum function so that it squares each number passed into it and then sums the results together.

For example, for[1, 2, 2]it should return9because (1*2)+(2*2)+(2*2)=9.

...and the starting code would be presented like this:

function squareSum(numbers){

}

My brain was initially very confused by this. I've been given a parameter in words, enclosed in brackets/parenthesis, but in the example, I have been given a series of numbers enclosed in curly brackets. Why do I think this is worth mentioning? Because there may be others out there who found this as confusing as I did, so perhaps I could write a separate piece some day as to how this works if anyone finds it useful. It's one of those things that probably doesn't even seem like a problem to people with coding experience, but I was a bit discouraged when I was confused by the most basic challenges at the start.

I overcame this by asking a lot of questions on forums, which were difficult to phrase so that experienced people would understand why I was having trouble understanding it(!)

I eventually got to kata level 6 and again came to the realisation that I wasn't building anything. I decided to put Codewars on hold.

Merry-go-round

I realised that every time I focused on one thing, it was to the detriment of another thing which I suppose is obvious, but I didn't want to spend too much time on one area to the extent that I would forget entirely about another area.

Practice Project Number 2

I decided that I wanted to build a type of journaling/organisation app, which would allow a user to add tasks and highlight how much time they had spent on each task using the idea of 'pomodoros' from the Pomodoro Technique. Why did I decide to do this? Mainly because I was using something similar on paper in order to try to keep myself productive and organised.

The idea was to have 'traffic light' bullets to indicate the completion status of a task and clickable buttons after the task to show the amount of time spent on it (in pomodoros).

This was the first time I had tried to use grid (learnt in Jonas' course mainly). I thought I was doing pretty well, until I realised halfway through that I had too many pomodoro buttons (which cramped the space). I thought (hoped?) it would just be a case of deleting the two extra buttons at the end of each line, but alas, this threw everything off. I took quite a bit of time using CSS to redirect content to the correct cells and honestly, I think it would have been better to start from scratch, as it looked so messy. I definitely learned to never code a grid without putting more thought into the amount of cells I would need.

I added some of the functionality using a combination of googling and asking for assistance online when I got stuck.

I had most of the basic functionality that I wanted, but in the back of my mind, I knew I needed to improve my HTML and CSS further and to start looking at responsiveness. So I left the project for the moment and tried to address my HTML and CSS knowledge gaps.

Crawling back to Udemy...More HTML and CSS with two spoons of responsiveness

I went back to Udemy to follow Jonas S's course 'Build Responsive Real-World Websites with HTML and CSS'. I knew I needed to start learning a bit about responsiveness, as I had not taken this into account at all in my first project. I found the course very good and it explained a lot, although I still have to finish the final section about deploying the website online(!)

So many roads, which one to take?Front-end Mentor

I had read and heard quite a bit about Front-End Mentor and I thought this might be a good next step as I could get an idea of what it's like to be given a professional 'brief' to work from. Also, I could hopefully improve my HTML and CSS for now as well as start to focus on learning about and applying responsiveness principles.

I selected a basic level 1 project and I think I did an 'ok' job and it certainly looked like the page image I was presented with at the start, but I was definitely confused about responsiveness. I asked for input/help on the FEM discord and I got a lot of feedback, which highlighted that I was making a lot of mistakes in other areas too; amongst other things, I was advised to use more semantic html and to include the picture element.

In short, after my feedback, I realised that I may need more help getting started with Front-end Mentor, so I started following a tutorial by Kevin Powell on the same project and this helped a lot. I don't plan to do this for all future challenges, but I definitely needed help starting out. I am just about at the end of this tutorial now and hope to get the page up and running (something that would have taken a lot longer to figure out on my own, no doubt).

Although I think the 'switching around' that I had done up to this point was justified, I started to think that it might be better to just stick to a few resources with one being a primary course that I would follow.

Is this what I'd been missing? The Odin Project

Like a lot of people starting out, I had heard a lot about the Odin Project, but had been trying to learn from shorter courses so that I could start building more quickly (in theory). The problem was, I knew that I needed more structure.

I signed up to the Odin project and am now (May 2024) focusing on this as my primary learning resource. Yes, there will be some repetition, but I have already learnt a lot of new things I did not know already (about Linux, git etc.), and hopefully, what I already know will help me to work through the other areas more quickly. I am finding the course very good so far and set-up steps are very well explained/documented. The Discord group is also really helpful, so I plan to keep going with this.

As secondary learning resources, I plan to keep working through Front-end Mentor projects, to maintain some practical skills and I also plan to work my way through the Head First book on Javascript. This is now outdated, but from what I have read, still contains a lot of useful information.

I plan to make regular-ish blog posts about my progress from here on out, rather than squeeze 6 months' work into one post. Maybe they will be useful for other self-taught devs out there.

Until next time...