Hello everyone, In this article, I want to share with you about my last year, more specifically about my web development journey. I am gonna talk about what I went through, what I learned so far, how did I learn, how did learning feel and why I am learning web development. Some of the shared details might not be fully accurate since I can't remember everything accurately but I will just tell it how I remember it. Letsi go.

Wordpress Phase

I started learning web development in August 2023. Before that, an idea about writing a blog had suddenly popped into my head. I don't know why but I remember wanting to write about myself and about what I found interesting at the moment. Then I started researching about where to write blogs. Naturally, Wordpress had come about. Wordpress is very popular content management system that was initially used to write blogs on the internet but in time, it evolved into something that can do more that blogs, such as news sites, e-commerce, forums and more. I am not gonna go into details about Wordpress in this article, I just wanted to give a little bit of info about it in case you did not know what it is.

Anyways, I wanted to write in Wordpress since it was popular and beginner friendly. There were 2 options in front of me. I could either use open source Wordpress software from wordpress.org and kind of develop my own blog which would require some technical knowledge, such as web hosting, or I could use wordpress.com , which uses Wordpress under the hood, which manages the technicality themselves and all you need to do is create an account and start writing. I went with wordpress.com since I did not know anything about managing a website. I created an account in wordpress.com and started writing basically. Then I saw I could change the design of my blog. Wordpress.com came with some limitations on their free tier but I still could change the background image on homepage, add some styling, change the places of few things and more or less bring my design idea to life. In the end, it was not anything fancy but I had fully working blog with personalized design. Wordpress.com also had their social medialike features so that users could discover each others blogs. If I remember correctly you could also like them and follow other users et cetera. In the end, I read some other blogs and some people read my blog. Eventually though, I wanted to do more in terms of personalizing my own design. Limitations of Wordpress, if you don't know any programming language that is, and wordpress.com was starting to feel too much. I realized that if I wanted to change more stuff about my website I would have to learn coding languages and/or Wordpress ecosystem. If I remember correctly, I researched about Wordpress ecosystem first and played around with it a little by setting it up locally, yet I could not really feel it in the sense that it did not really feel enjoyable to me. Eventually I started researching about web development in general. Web development was really vast field with a lot of technologies and intricacies. So It felt daunting at first. Nevertheless I kept researching and found out about a lot of stuff.

door opening to light

Opening the Door of Web Development

One of the first things that I found out about web development was, there were subcategories to it. There were frontend web developers, which developed the interactive client (browser) side of the website/webapp, there were backend web developers, which developed the server side that client communicates with and sends/receives info to/from, there were full stack developers that do both frontend and backend. There were also devops (development and operations) engineers who specialized on whole lifecycle of developing a software and how to optimize it. As far as I understand frontend, backend and fullstack are web development specific terms to web development whereas devops is general term that can be used for anything related to software and coding in general. When I was learning about these terms, it was becoming more and more apparent to me that there were common languages (programming language) and specific languages for each role. For example frontend engineer had to know about HTML, CSS and Javascript whereas backend developer would use one or multiples of available languages, such as Javascript, PHP, Java, Python and more, depending on the aim and what they like.

Diving into Frontend

Since I wanted to know about how to design a website, It felt like I should learn about frontend for it was controlling the visible side of the website. I started with the basics, HTML and CSS. I am more of a video learner so I went directly to youtube and searched something like "HTML course". A lot of videos popped up but channel that was getting my attention was TraversyMedia. I watched his HTML crash course. As a code editor, I think I used Visual Studio Code which I still use. Traversy Media is a channel I still watch to this day also. I recommend his content for anyone that is interested in web development. HTML was not super complex to grasp the basics, although It can get tricky when determining what semantic tags to use or how to improve accessibility for screen readers. Nevertheless, HTML alone was not enough to make a website look good. You also needed CSS. HTML was basically was the underlying structure of the house whereas CSS was all the paintings, 3d structure and all other architectural look related things.

I wanted to learn more so I kept going. I started learning CSS similar to how I learned about HTML, videos on youtube and some internet research. One thing to mention here is that CSS is much more complex than HTML. You can learn the basic styling, flexbox and grid in relatively short amount of time but It becomes harder when you add animations, transitions, cross browser compatibility (which determines how a website looks on different browsers such as Chrome, Firefox, Safari etc.) and mobile responsivity. In addition, stuff keeps being added and changed so you might have to spend some more effort if you wanna stay up to date with it, especially with cross browser compatibility.

Javascript...

After I became decently proficient at HTML and CSS, I was able to build basic, nice looking website that had no functionality. I think It was around that time I started building my portfolio. But after I built something that I had imagined, I was thinking "damn, that does not look as good as I imagined". So I was constantly changing stuff, rethinking it and changing again. Eventually I settled on a portfolio that did not look all that bad, then I was like "now what?". That question was followed by the thought "Now I should start learning Javascript".

As soon as I started learning it, I realized Javascript was not like other two things I learned, namely HTML and CSS. HTML and CSS were more like syntax whereas Javascript was fully fledged programming language, which makes is harder to learn and, depending on how you look at it, more rewarding. Javascript is more related to logic and HTML+CSS are more related to design. Anyways I started learning Js and became decent at it. That took more time than HTML and CSS learning time combined though. Learning HTML+CSS, took around 2 to 3 months of my time whereas Js took 3 to 5 months If I remember correctly. After all that I was introduced to frameworks.

Javascript Frameworks

HTML, CSS and Javascript were alone enough to build a functioning frontend only website. But the concept of framework was making things faster and easier. Framework basically is some code library that helps you make websites faster. It shortens that code you write. Popular Js frameworks are React (most popular), Angular and Vue. I was researching about which one to learn and decided on Angular. Learned about it similar to how I learned everything else in this journey, through videos and internet. I built the frontend of some demo movie streaming website, I managed to correctly implement pagination, navigation, search functionality and pass around the data that is needed between components (blocks of code that serves a specific purpose). These things might seem simple but I was not very good at Js and Angular so it was a real achievement from my point of view. After all that, ironically, I decided Angular was not for me and switched to React.

React and Introduction to Backend

After I ditched Angular, I started learning about React and backend in general. I learned that there was programming concept called MERN stack, which is a combination of tools, namely MongoDb, Express, React and Nodejs. MongoDb is a database where you store data, Express is a framework for NodeJs, React is frontend Js framework and Nodejs is basically Javascript that is written on the backend (server). Using both Express and Nodejs in the acronym "MERN" might seem redundant to some since one is the framework of the other but hey I did not come up with the name. Anyways, in the end, I started learning about the stack as a whole. There were multiple new technologies I did not know, such as MongoDb, Express and React, so I had to ease in slowly and research about things I did not know and learn about the specific technology separately before I continued learning MERN stack. In the end I had decent amount of knowledge on about the stack. One thing I wanna mention is that backend started making much more sense after I learned about it. Before that It was a mysterious place that frontend engineer communicates with in order to work with data. But after learning, I understood that it was just a server that receives requests and serves responses (Http request-response cycle). That server could be written on a lot of different languages but I chose MERN stack which uses Js since I already knew about it.

thinking figure in front of question mark

Why Am I Learning These Things?

After all that, I was starting to become fullstack developer. In the meantime I had build my portfolio further and made it look a little bit nicer. Then questions started to pop into my head "Why am I learning all this? Do I wanna work for a company and become a full time employee? Do I wanna have my own website and make money through it? I am thinking about money but do I want money at all? Well I need money to survive but why do I wanna survive?". I don't know what were my answers to all these questions but somehow they went away and another idea popped to my head. I thought "Maybe I should start working on a project that people might use and find meaning while using it.". I wanted to make a website where people can write and read stuff, namely "articles", and interact with each other while doing so. Then I started developing this website. I developed the website with MERN stack and hosted the whole thing on render.com, which offers managed server where you just point to a repository (storage of codes) and configure some stuff, it deploys the server for you. Free option was shutting down after inactivity but it was good choice for testing the project white still learning about servers and deployment.

Nextjs

My production app, alive app, was present at the host and It was accessible to anyone with internet. Yet some other questions popped into my head, such as "Are people even going to see this? What if someone searches the app on google and can't find it?". With all these questions, concept of SEO (Search Engine Optimization) was inevitably going to be on my radar. SEO determines how well your website pops in at results of search engines. Better SEO means better visibility. Then I though "Well I made the website, might as well make it visible.". After some research, I learned about the ways how a React app could be optimized for SEO. I tried some of them, such as prerender.io and setting metadata but after further research I learned SEO could be further optimized using something called Nextjs...

I had heard about Nextjs before and I knew It was a full stack framework that uses React but my desire to optimize the SEO of this website made me learn it. It was around 10th or 11th month of my web dev journey that I started learning Nextjs. After dabbling around with it, I decided to migrate my whole app from vanilla React (Create React App) to Nextjs. I am gonna be honest I did not really like Nextjs at first. One reason was that simply adding font classes to HTML did not work, I had to do it Nextjs way for it to work, which was importing the font from nextjs/font, initializing an instance of the font and using the class in the HTML. There were some other minor things that felt restrictive at first but with time I grew to like them and accept them by thinking "Well, that is how Nextjs does things, I might as well accept them If I will keep using Nextjs." Also there were a lot of things Nextjs was good at, some being app router, file based routing, server side rendering and image optimization. So, in the end I kept using Nextjs and migrated my whole app to it. One thing to note is that I kept my Express backend and used it in combination with Nextjs.

App Is Ready, What Do?

After a year of effort, my SEO optimized Nextjs app was ready and frontend of it was deployed on Vercel, which is company behind Nextjs. However backend was still deployed on render.com and backend was shutting off after inactivity since it was on free tier. I thought, well I should probably look more into how I should deploy nodejs apps in cost effective way and did some research on it. Concept of VPS (Virtual Private Server) popped up. VPS is basically linux server that is stored in a computer somewhere that you can rent. You can do a lot of things in it, including hosting a web server that is written in Nodejs. After doing some research on VPS, I decided that Digital Ocean droplets were good solution for my needs. I hosted my backend on Ubuntu there by using the promo link provided by Traversy Media which I mentioned before. I used pm2 and nginx which I learned a bit about after some research.

In the end, we arrived to today. My Nextjs frontend is hosted on Vercel and backend is hosted on Digital Ocean droplet. It has been nearly 13 months and I feel like I made decent progress so far. Obviously, It is a never ending learning when it comes to technology or even life.

Other Relevant Technologies

Before ending the writing I wanna mention some other technologies I learned throughout my nearly year long journey. I don't exactly remember when I learned them or how they felt and I am not expert on them by any means but they were useful for me so I suggest you to check them out as well. I am not gonna explain what they do though. Git, Github, Typescript, Bootstrap, Tailwind, Vite and Redux/toolkit.

gollum

Top 10 Latest Articles Of The User