My self-taught path through front-end development

Cover Image photo by Matt Duncan on Unsplash.

Hey everyone, I wrote this piece to share my path through the web-development minefield from beginner to now in the hopes that it could help others who are currently on a similar path or want to start. It includes a lot of the resources I used to help me along the way as well as the timeline it took from the start to now! This is not a post dedicated to all of the resources I have used but I thought I should include the ones that had a positive effect on my development.

(I will only mention paid courses that I think are worth the small investment based on my experiences.)

For anyone who just wants a list of useful resources I will include them below in order of appearance:

• Colt Steele's "The Web Developer Bootcamp"
• freecodecamp
• Beginner + Advanced) by Maximilian Schwarzmuller
• Wes Bos' JavaScript 30 vanilla js challenge
• Traversy Media
• Web Dev Simplified
• Dev Ed
• The Complete Node.js Developer Course (3rd Edition) by Andrew Mead - Not front-end related but was useful which I explain in the post
• codeacademy
• React - The Complete Guide (incl Hooks, React Router, Redux) by Maximilian Schwarzmuller
• Kent C. Dodds' blog for react & more

Introduction

In March of 2020 I was taking time out after university to travel and had already been gone a year. It started to dawn on me that I would eventually have to return and I still did not know that I wanted to do with my career.

I graduated from university with an engineering degree in 2017 but towards the end of my studies I began to realize that I could not see myself going into a career as an engineer, the passion was not there. For me, the plan was always to take some time out after graduating so I could travel and see more of the world, so I did.

Back to March 2020 having spent the last year travelling and working in New Zealand, with the world on the verge of lockdown I decided to look into possible options that would suit my skills and interests. As an engineer I was always solving problems and genuinely enjoyed that part of the work so I set that as my key skill and began looking into tech related roles.

That's when I came across web-development. At first I was not sure where to begin as it seemed very overwhelming and more like a pipe-dream than anything else. Luckily a friend of a friend told me about a course they had purchased a while back which I could use as a starting point and so I wrote my first few lines of HTML with Colt Steele's "The Web Developer Bootcamp") and was immediately hooked.

I loved writing solutions to problems and immediately seeing the results on the page and was always a creative person so the idea of being able to design and build your own custom sites and apps was extremely rewarding to visualize.

Fortunately I was able to throw all of my efforts and time into learning all I could about web development and so thought it would be a good idea to share my path from beginning to where I am now, including the resources and courses I used, things I have learned and projects I was able to build.

The Beginning - starting from the bottom

March 2021

I began with Colt Steele's "The Web Developer Bootcamp") course through Udemy as I previously mentioned.

(Udemy is an online learning marketplace featuring many different courses including ones for web-development.)

Not all courses are quality though so do your research if you decide to make a purchase. Don't be drawn in by the sales. They don't exist. Open the site in incognito and you'll see.

It was useful in guiding me through some of the basics of HTML and CSS at the stage where I had little idea what I was doing, although the course was a little outdated at the time.

Colt Steele has since updated the course for 2021 which is now much more in line with modern web-development and I consider this to be a worthwhile investment if you are after more structure in your learning.

There is a bloated collection of courses on Udemy that a lot of the time are not worth the investment or might be outdated so buyers beware.

April 2020

After a few weeks of basic HTML and CSS I had the wind in my sails and was looking to begin with some JavaScript. Having done my research online and also looked through the JavaScript section of Colt Steele's course (the older version), I felt it was lacking and set out for something a little more comprehensive.

I started out with freecodecamp, a great resource for beginners looking to learn key concepts of front-end development and as the name suggests is completely FREE. By working through the "Basic JavaScript" section I was able to pick up some of the basics fairly quickly but I also found it difficult to retain concepts at first.

freecodecamp home page

Personally I found it easier to retain information early on with a teacher of sorts and decided to look for a course focusing solely on JavaScript. In the end I went with JavaScript - The Complete Guide 2021 (Beginner + Advanced) by Maximilian Schwarzmuller due to the many positive reviews of the course and the more than 50 hours of content provided.

On the whole I believe this was an extremely useful resource to me, providing all of the core features, concepts and syntax a beginner could ever need. Although it did seem to move quickly especially during the early practice projects such as the rock, paper, scissors project. There were a few times I found myself just copying code, trying to keep up but with time I found myself retaining more and more information and was able to at least understand the WHY of what I was writing.

Take your time with the content and you will be rewarded.

It should be noted I had a little prior knowledge of basic programming from a module of Java that we were required to take as first year engineers at university. Things like variables, conditionals and basic types were things I already knew a little about making the transition a little easier.

Growing in confidence

Photo by Joshua Bachand on Unsplash

May 2020

Most of May was spent with my head in the JavaScript course. I would take a little time out to build some basic landing pages so I would not forget the HTML and CSS I had previously learned. Early on it can be a good idea to do a little of everything because repetition is the key. As soon as the basics become second nature you will find it easier to dive into different topics without forgetting prior knowledge.

I remember struggling to make a color game in JavaScript on my own but it was struggles like this that improved my skills the most. For example I would watch a module such as Objects in Maximilian Schwarzmuller's course, and then set out to try and implement what I had learned in a project. Most of the time unsuccessfully but it forced me to look for the right answers.

June 2020

Even though I felt as if I had learned a lot, when it came to sitting down and building some basic projects on my own I struggled. Therefore I dedicated a few weeks to looking up tutorials on building JavaScript projects so I could start gathering experience of things like common patterns for DOM (Document Object Model) manipulation, preferred syntax and the general workflow of a project.

I followed along with many different tutorials from:

• Wes Bos' JavaScript 30 vanilla js challenge
• Traversy Media
• Web Dev Simplified
• Dev Ed

and at the end of the two weeks I felt far more comfortable in my ability to apply common techniques and patterns myself. All of these content creators offer lots and lots of quality practice projects, tips and general knowledge teaching videos aimed at beginner and intermediate developers and I highly recommend working through this content yourself.

Wes Bos' JavaScript 30 projects in 30 days challenge

A brief trip to the back-side of the force

In order to get a taste of back-end development I purchased the The Complete Node.js Developer Course (3rd Edition) by Andrew Mead and worked my way though about half of the course before deciding that I preferred working on the client-side, although I did learn a lot which helped me with my future projects.

It was my first exposure to working with basic techniques that I now use everyday such as working with package managers, navigating directories and working with databases and api's. For people looking to get into back-end development using JavaScript, this course is a good starting point.

Slow Progress

Photo by Nick Abrams on Unsplash.

July - September 2020

I slowed down during these three months as I needed to earn some money to support my travels home from New Zealand and therefore started full time work during the day. In order to keep up my learning I would wake up at 5:00am on weekdays to code and get my two hours in before leaving for work. The last thing I wanted was to lose all of the progress that had already been made.

Despite this it was fairly slow going. I worked on a couple of personal projects, progressed through some more of the JavaScript course and begun learning the basics of the popular JavaScript library, React. I had some time to practice with common project build tools such as Webpack (an open-source JavaScript module bundler) and testing practices using Jest (JavaScript Testing Framework) which came in useful later on.

I dabbled with Github but felt a little intimated by Git and Github so I left in on the back-burner and stuck with what I knew which was certainly a mistake. For any beginners getting into development, Git is a version control system for projects while Github is the website that builds on Git allowing us to store and keep track of our projects, collaborate with others and much more.

If you would like to learn more about Git codeacademy offer a course on the topic. Although codeacademy is usually a paid service, they do offer a 7 day FREE trial for those of us on a budget (although you do have to enter a debit/credit card and cancel it before the end of the 7 days). It is must know for modern web-development and is not as scary as it seems.

Here we go, no brakes!

October - December 2020

October is when everything changed. After arriving back in Europe I was fortunate to find myself with nothing but time to invest in what I loved and work on development full time.

After being impressed by the quality of the JavaScript Course by Maximilian Schwarzmuller I decided to purchase React - The Complete Guide (incl Hooks, React Router, Redux) and started working my way through parts of the content. This course seemed to be full of quality information although as of yet, I have gotten close to finishing this one.

This time I spent much of my time working through the react documentation, reading quality blog posts such as those from Kent C. Dodds and building my own side projects based on what I had learned.

Having spent a lot of time with JavaScript, the transition to react was much easier and I soon found my JavaScript improve as result of using some of the more complex features of the language. Without that time I'm sure I would have struggled.

By this point I was pretty confident with HTML, CSS and JavaScript and found myself moving towards making my own projects rather than following along with courses. I found the trial and error method of tackling problems was more valuable to me and I could learn the intricacies of react as and when the need arose in my projects.

And so I set out on the challenge of building a few personal projects from start to finish and finally building my own personal portfolio so that I could eventually start the job search.

And so I did.

I built a site for a mock brewery company, a simple recipe-search app, a web based music playing site using the Spotify developer api, checkers board game and two different versions of a portfolio (the first one I was not so happy with!).

The progress during this time was very noticeable. For example, where it used to take hours for me to put together responsive site navigation was now considerably faster and I could focus more time on the the sites core services.

My Github contributions during this time.

During this time I moved though many different styling techniques including SASS (a preprocessor scripting language that complies to CSS giving you extra features), TailwindCSS (a class-based utility first CSS framework) and more becoming very comfortable picking up new technologies and adapting to whatever was the best tool for the job.

While picking up react, I thoroughly enjoyed using the react framework next.js which markets itself as "The React Framework
for Production", so much so that I ended up re-building my portfolio using next.js.

For anyone who wants to take a look at the projects, My Github repositories.

To now!

January 2021

With a portfolio full of projects, I finally had that feeling of accomplishment with something to show for all of the hours I had put in. Having been working solidly on my personal projects for the last few months I feel it is now time to refine a lot of the fundamentals I have picked up along the way.

My target is to start applying for junior front-end developer roles in the coming few months and so I have recently begun the revision and preparation process for interviews.

As a developer they say you never stop learning which definitely excites me. Looking back at my code from even three months ago makes me question what I was thinking at the time, but this is a good thing and shows the progress we can make.

For now I am focusing on:

• Data structures & algorithms
• Back to CSS fundamentals including layouts and accessibility
• JavaScript revision
• TypeScript

I hope this post was able to be of some use to you in your development and if you would like to ask me anything or keep up with my progress, you can find me on twitter @Kieran6dev.

Tell me, what are you currently learning about?