What is this page?

I am going to treat this like an evergreen page where I document my progress as and when it happens.

This is to serve 3 purposes:

  1. To help myself structure my learning
  2. To show others one person’s learning journey

Full context here is that I’m learning web development as a hobby. I have a full time job (not in web development) and a lovely wife so my available time can vary between having no time/energy some weeks, to having a good amount. I think sometimes people on youtube and blogs can be a lot of single, students or people whose jobs are literally in software engineering - and so I want to add a different background perspective.

However note that I am a Data Scientist, so I do have a background in SQL, Python and Bash which has definitely helped me get up to speed a bit faster than a complete beginner.

My Historical Experience

Ever since I was a teenager I’ve always wanted to be able to build my own website.

My first attempt was in the summer between school when I was maybe 16 or 17, I started creating a revision website with details about how to study effectively and to pass exams.

This was all in basic HTML and CSS. But it wasn’t long before I was getting stuck. I distinctly remember writing for example a navbar, and then thinking to myself ‘Oh man, I need to now write the exact same code in all my other html files’. Unfortunately I got frustrated, had no friends who knew coding, and clearly my Google-Fu was weak as I couldn’t find good learning resources online. (Plus there was definitely less than there is now).

So sadly, I didn’t really touch web development for many years (naturally I was busy with university and full time jobs). Then about 1 month ago, I had a bit more time on my hands so finally got stuck in.

Learning Log (last updated 14th April 2024)

I thought it might be useful for both myself but potentially others to document the steps I have taken thus far to learn the above.

  1. React 101 Course [Codecademy]
    • I learnt from a friend that React is one of the leading Javacript frameworks for front-end web development. So to learn the basic concepts and syntax, I started at Codecademy.
  2. CSS Flexbox Course [Codecademy]
    • Whilst studying the React course, I think they touched upon some CSS and possibly Flexbox. My friend had told me how great it is, so I took about an hour aside to learn the basics of this.
  3. Code and Deploy a Personal Portfolio with React [Youtube - PedroTech]
    • After learning the basics, I wanted to actually create something to practice. I found PedroTech’s channel and this was a perfect starter project. I would follow along coding everything Pedro did, and along the way really got to grips with hooks.
    • I then modified the design and content slightly from this tutorial video and deployed my own portfolio website (using Netlify) here.
  4. Node Crash Course [Youtube - Net Ninja]
    • I actually started to the MERN Stack Course (see below) but then it said I should do his tutorial on Node first to understand the basics of backend and Node & Express.
    • I’m glad I did, because I had never had any understanding of servers and HTTP requests. At the end of this, I had a much clearer understanding, it was genuinely so good to do this course.
    • He also showed Express (an easier to use backend/server package) and a bit of MongoDB during this course
  5. MERN Stack Course [Youtube - Net Ninja]
    • Now armed with some fundamental knowledge of the stack (MongoDB, React, Express, Node), I went through this course on and off for a period of 2 weeks (I have a fulltime job!)
    • This course takes you through building your own workout tracker where you can add, delete, update workouts and say how many reps you did, what kg you lifted, what exercise etc.
    • It is a great overview of full-stack web development.

Future Learning Log

This is perhaps just for myself, but I am going to note down a sort of list of things I need to do / learn to progress forward.

  • Build a prototype of a full-stack website (I have an idea about EFL football stadiums…)
  • Get a better understanding of hooks and context - Net Ninja’s Course
  • Get a better understanding of how to do User Authentication - Net Ninja’s Course
  • Figure out how to embed plots into React websites (e.g. I could put some stuff on this blog And/Or on my portfolio website)