From Curious to Coding 1: How I Got Started In Web Development

1. What is this Article about and Who is it for?

Becoming a software engineer requires quite a bit of work and training, but it doesn't always have to be received in a formal setting. A worldwide online survey was published on August 7, 2024, by Statista. From May 19th, 2024 to June 20, 2024, software developers were asked “Which of the following best describes the highest level of formal education that you’ve completed?”; 89,184 responses were received, and of them 34% said they did not attend or graduate college, and another 5% said they earned a degree in an unrelated field.

If these numbers accurately reflect the population of software engineers; it is an uncommon circumstance for people to switch career paths into software development, or for people with degrees in other fields work in software development. I am among the few who fit that category, as I have a varied work history outside of IT and two degrees in unrelated fields; one in Horticulture and one in Natural Sciences.

Its for me, but I'll share with you

I would like to write all of my progress out for myself as a reference for the future, and as somewhat of a milestone to go over everything I have learned in my first year as a software developer with an nontraditional background. Writing it out helps me better understand what I know and what I am lacking, and ultimately what my next steps should be. I also hope to share my story with others who may benefit from it.

It could be that you are starting as a software developer and want to know what others are studying at the start of their journey. Maybe you are considering starting software development but you feel a bit nervous and might not know what to expect.

It could be that you are already a senior software developer and want to see what new developers are experiencing white trying to break into the field, or maybe you want to read an article with good writing and to gain some insight about someone switching career paths. In any case, I hope this article can be of some use to you.

So…Why Web Development?

I've never worked in tech, although I briefly considered it when I started college. Instead, I worked odd jobs while obtaining my degrees, which I received in 2020. Shortly after that, I started working for a company that employed me in the realm relevant to my career goal. Not all things are meant to be, and in November of 2023 the company that I was working for and had intended to stay with for a long time; shut down.

I had opportunities to continue in the same industry and possibly even with the same company in a different area, but I thought it was time to adapt to changing circumstances. I realized that if I stayed in the same industry, my family and I would likely need to move around the country more frequently than we wanted to.

The only constant is change

I started my original career path in college and was determined to see it through. I knew it would require a fair amount of sacrifice and compromise, but I was only responsible for myself at the time and I was happy with that. I met my wife at the start of that path, and we got married a few years down the road. A few more years went by and now we're pretty far along the path, and we just had our first child.

The sacrifice and compromise this path now requires is too expensive for my family, and I don't think it is in our best interest for me to continue. I want to maintain a career that would be enjoyable for me to pursue, but more importantly, I want to provide stability for my family. I began to search for a new career path that aligns with my skill set, qualifications, interests, and priorities.

Honest feedback from someone I trust

My partner is a professional product, web, and UX/UI designer. She works with all professional contributors to website design, creation, and deployment. In a discussion about where I should take my career path, she kindly pointed out to me some of the qualities that I have that convinced her I would be good at web development.

She observed that I have great organizational skills, a strong innate curiosity, think logically, have a creative streak, and get excited when learning new useful skills and solving hard problems. She recommended that I look into front-end development for websites. Trusting her discernment and indulging in my curiosity, I started to research what a front-end developer was and what their role is for a web development project.

2. The Fundamentals of Front-end Development

Front-end developers are professionals skilled with technologies that essentially display information to users through interfaces like web browsers. Traditionally, they have always used three major technologies, Hyper Text Markup Language, Cascading Style Sheets, and JavaScript.

Hyper Text Markup Language (HTML) is used to build a description of what a web page looks like to the server providing information to the web browser, so that it can organize and display the information on the page appropriately.

The organized HTML structure can then be styled using a stylesheet language called Cascading Style Sheets (CSS) to make the information more presentable, understandable, and engaging for users. The now organized and styled information can then be given interactivity with a scripting language called JavaScript (JS). That is, in the simplest way to explain, what a front-end developer and their role is.

Learning about Learning

I started watching YouTube tutorials about what HTML, CSS, and JS are and how to use them. After a month or so of learning about these three technologies and re-creating a YouTube homepage with SuperSimpleDev, I had enough confidence in my understanding of the fundamentals of front-end development to make small pages and features like counters and calculators.

After a few of those, I was becoming more familiar with navigating through and using documentation at Mozilla Developer Network Docs or W3Schools and the developer tools in the browser. I even made a few of the classic To-Do lists. It was time to dedicate some real effort to an online course that came with hands-on projects, a deeper understanding of the concepts I wanted to learn, and a certification to lend credibility to my efforts.

Its not all easy

While trying to figure out the best way to learn at the time, I found myself drowning in information with no clear direction on what to do next. There are so many learning paths, guides, tutorials, and directions to look through with so much documentation, nuanced discussion, and unfamiliar terms.

It was overwhelming at times, but I never lost sight of why I started learning all of this in the first place; and its fun. I wanted to build more things. I learned how each small piece of the puzzle contributes to the picture, and even eventually all of the parts start coming together. It got easier, and it was slowly getting clearer what my next step should be.

3. Falling Deeper into front-end Development

I started learning all of this with the intention of becoming a web developer, so I kept my focus on front-end development and put the rest of my interests and curiosity off to the side for now.

With a clearer focus, I researched the tools and technologies that are used in modern web development; which is when I read about React and Angular. They are both technologies that were created to enhance the capabilities of JavaScript, and I should focus on learning one of them moving forward.

Libraries and Frameworks

It is important to note here that a library is a collection of pre-built code snippets that can be integrated into a larger application with other libraries, providing a shortcut for developers who want to add specific functionality without having to build it from scratch.

Libraries are designed to be used in conjunction with other libraries and frameworks, and are not capable of standing alone as a complete application, and they do not impose a certain structure to be used when making web or software applications.

A framework on the other hand, is a way to structure an application. It is essentially a blueprint for organizing the structure of an application with a set of rules that have specific functionalities. Frameworks also have pre-built code snippets that can be used in the application, but they also offer the means to build an application in its entirety in its own structured way; and that is ultimately the difference between a framework and a library.

Angular

Angular is a framework and development platform, built by Google using a superset of JavaScript called TypeScript; which was made by Microsoft to include type safety into JavaScript and released to the public in 2012.

Angular is used for creating single-page, web, desktop, mobile, and even enterprise applications. It is fundamentally a component based framework, a collection of libraries, a suite of tools, and a robust ecosystem of millions of developers, contributors, and content creators.

React

React is at its core, a JavaScript library with the ideal use case being; to offer tools to developers to easily put together user interfaces in a component based structure. It was created by Facebook (Now Meta) in 2013, and has since been used to develop millions of websites and applications. It uses a syntax extension of JavaScript called JavaScript XML (JSX) which was also made by the same developer that created React at Meta.

JSX is meant to allow developers to write HTML-like code in JavaScript files, but it is not required to be used in a React application. React was not meant to be a replacement for the traditional HTML, CSS, and JavaScript tech stack for front end developers, rather it was meant to expound upon their capabilities and make it easier for front-end developers to make interactive and engaging interfaces to display content to users. As a library, it is often used together with modern frameworks.

4. Structured Learning: Getting Certified

After learning all of this, I decided to take the front-end Developer course offered by Meta through Coursera. The decision was made simply because React is a tool used widely through front-end development, and the creator of that tool was offering a certification course in front-end development; which was my initial goal to achieve. As I said, there are a lot of paths that could be taken, depending on one’s needs, circumstances, and resources.

I however am satisfied overall with my learning with Coursera through that course. The presentation of the content structure flowed together and built off one another well, and the instructors were easy to understand. It furthered my understanding in HTML, CSS, JavaScript, React, Design, data structures, and programming in general at my own pace for a fair price; about 50 USD a month.

React Native

A lot of the content that I studied in the front-end developer certification overlapped in another course offered by Meta that went over React Native, so I decided to also get certified training with that as well. It is a library that allows for developers to write JavaScript that communicates with the native OS and renders a UI using native modules and components.

Typically, Android OS requires the developer to use a language called Kotlin, while iOS for Apple requires the use of a native language called Swift. React Native enables developers to build essentially native mobile apps using only JavaScript or JSX, without requiring knowledge of platform-specific languages.

There are so any ways to learn online

All of that being said; Udemy offers a full course for a one time payment that is about 100 USD at the time of writing this, but it is a one time purchase to access the full course. You could also take that course at your own pace. The Odin Project was another completely free resource that I read a lot of good things about that will also teach web development, if cost is a major factor in one’s decision on where to study.

Harvard even offers free CS50 courses for free if someone was looking for a more computer science focused learning over front-end or web development. There are so many resources available to learn so many different things online, everyone can find one that suits their needs; so long they are willing to put in the work. It definitely is a lot of work.

5. Putting It Together: My First Website

After I learned some new things from those courses, made some course projects, and got my certifications, I felt much more knowledgeable and confident in my new skillset. I wanted to put them into action and create my own project without the help from any tutorials or guides. After collaborating with my partner, we made a design for my portfolio site where I will house all of my projects in the future.

When the design was finished, I started building the homepage of the portfolio without much planning. After one month, I was able to build exactly what we had designed without any compromises from an inability on my part. Then I learned how to register a domain and host a website through a service.

It was very reassuring to conceptualize, design, plan the structure, write the code, problem solve, and learn how to use new libraries and technologies as I needed to for features that I wanted. Creating my portfolio site was the first unguided project that I created from start to finish with no outside assistance.

Once it was finished, I felt a sense of accomplishment that I haven’t felt about any projects or tasks that I have done in my work history or even in college. I immediately wanted to start working on something else, just a little bit more difficult.

The next big thing

My partner and I were discussing a website where we can write professional articles about our work, new ideas or information that we want to record, and things that we have learned that helped our career and our lives; and we decided to build this website.

I’ll be sharing my experience creating this website, Tsundoku, with my partner along with the new technologies and skills I learned along the way in the next blog. You can go back to the home page of this site to look at it more closely here if you'd like. Thank you for reading!

You can also check the next Curious to Coding post by clicking on it in the related articles section below, or by using this link.