If you need a quick refresher, here is the link to my previous post

🧱 Building Blocks

Now you want to jump into developing web apps or perhaps even started with PHP. But you feel a bit confused about the different parts that make up a Web App. It's not easy to wrap your head around everything from HTML, CSS, JavaScript, PHP, MySQL, and what they are used for. These are legitimate questions that may come to your mind. Let's demystify them together.

So, what are those high-level parts that make up a Web App?

• The Backend
• The Frontend

Well, that's anti-climactic. We all know that much... Let's go one step deeper.

• Backend
  • PHP
  • MySQL
• Frontend
  • HTML
  • CSS
  • JavaScript

If you notice now it is a bit more complex to understand what they do and how they work, especially when you are starting out.

🧐 The Analogy

I'm going to take an analogy here; it will help you understand these technologies with real-world examples.

"The web app is like an Apartment."

Let me explain them one by one from the user's perspective for you to understand.

HTML

It is the structure of the apartment when it is being built. It defines where your doors are, the balcony, the living room, the kitchen, the bedrooms, and even the bathrooms.

It is the specification of that apartment. When we say 2 Bedroom Apartment, what comes to our mind?

That there is a living room, a kitchen space, a master bedroom, a guest bedroom, and 2 bathrooms.

At this point, the apartment is not finished. So, you have a basic layout of the space and in terms of decoration, you only have bricks. You technically can live there but it wouldn't be fun.

CSS

Think of it as the decoration you do. Like the color of different walls, floor material, the type of Taps & Sinks, even type of switches, and so on.

JavaScript

It is the functionalities that come with the apartment. Like the electricity, the water supply, or maybe even a fireplace. Think of it as everything that serves a function within the apartment.

You can also consider the doors and windows as JavaScript if the mechanism they operate is different than traditional ones.

MySQL Database

It is simply a piece of furniture that stores something. Like the cupboard, wardrobe, fridge among other things. And the data is the utilities, cosmetics, clothing, groceries that you use every day.

PHP

It is actually you, the people living there operating these things. You work with the parts every day depending on what needs to be done. You need to go out and buy groceries and store them in the fridge. This is a task that you do to keep the apartment functioning.

😕 Ambiguity

I've just used this example to help you contextualize various parts of a Web App. There are things that travel the lines of multiple things. Like a Fridge, it is both a database and functionality. So, you might think it is JavaScript and also a DB, and be confused.

For that, I will just say it is a JavaScript State Manager. What I mean by that is JavaScript can also store some data in the browser like Cookies, they help maintain the state when you visit a site.

In this context, the job of a fridge is to store and keep something cool.

Some things can come in both CSS & JavaScript. Like the lights or the AC or the TV. In that case, JavaScript is the functionality of that equipment and CSS is the design, color, and shape of that piece of equipment.

😇 Combined View

• So now if you want to change the decoration of the place. You know exactly which part needs work, it's the CSS.
• If you want to make a new window in the wall, you know that it would not only take the HTML but also CSS and even some JavaScript.
• If you need to change the apartment, you can, but your utilities, food, clothing, and furniture you take with you. That means your backend and database and the data stored in it can stay the same but the frontend will change.
• You can stay in the same apartment but modernize all the furniture and clothing. You organize them in a different way. That means you will have to perform altered steps to get a job done that you previously used to do differently. Maybe now the wardrobe has 5 racks instead of 2 that were there previously. So, it's the Backend and the Database that needs to change.

You might ask the question at this point who is the User? In this case, it is the visitors or guests. Considering you are only the maintainer of the property.

There are a few ways your friends can communicate,

• They can visit your place.
• Or they can call you.

When they visit your place, they are interacting with the place. That means they are using your address, which is the URL, to come to your place, they use different things which means they interact with the HTML & CSS and yes also the Backend is there to serve them.

But when they call, they are only just communicating with you, and you are the Backend Language. So, they are calling an API and asking for information or a response. Your phone number in this case is the address.

✊ Value & Benefit

The question that might come to your mind that why do you need all this mental model.

If you are an entry-level developer, it might help you to better understand the requirements or scope of the product that you are building. It might also help you to ask the right question about the product before you estimate the effort.

For the product engineers, it might help set up expectations and acceptance criteria. Because you are not only thinking about the visual aspect but also about the internal mechanism as well.

🥳 Next Steps

If you want to go even deeper into the concept of Microservice. It is just breaking the entire apartment into smaller pieces, conceptually.

Like, Kitchen is a Microservice. Its only job is related to cooking and storing things related to cooking.

The workplace is only used for work-related things. You store pens and notebooks there.

Then you have the authentication & authorization. You only let the trusted visitors get into the apartment, you don't want to get robbed.

✌️ Wrapping Up

I hope this helps you understand different pieces of a Web App and what purpose they serve with a real-world example. If you still have some confusion about some things in the apartment about what they fall under, feel free to post a comment down below.

There are many different analogies for this concept out there. By no means this is the only one. One popular one I can think of is "A Web App is like a Super Market or a Restaurant".

I would really like you to take this as an exercise and try to fit different parts of the web in the Super Market or Restaurant analogy and tell me in the comments below which parts relate to what things in your analogy.

So, you are young and fresh out of college. You are overwhelmed with all the hype around Programming and you are unsure about how to get started.

Well, you are certainly not the only one...

I have a distant brother who's also fresh out of college and wants to Code. While training him I thought why not share the experience with the community.

If you want to pursue a career in Programming as well, you will have to do one simple thing. Keep your mind straight and not get intimidated by all the Big Programming Jargon that is going around on Social media just yet. There will be plenty of time when you'd be able to do that. The first thing that you will need to do is find a Path you are passionate about. Start simple.

The Big Question

Now the question is how do you find out what excites you. Many experienced trainers often overlook this important aspect.

It is certainly not an easy task to figure out by yourself. You should not rely on the trainers to tell you what is right for you. It is a path you make on your own. There is no easy way out when you are starting out. There is no single absolute right way either.

I've seen many trainees in my Career of over 8+ years, especially for the past several years when I became an Architect, they are a bit lost in the buzz of things. Keeping up-to-date with the buzz is really a good thing. When you are just starting out, this could really confuse you or plant doubts about your ability. That's not a good sign, that could lead to dissatisfaction and really hurt your morale.

Coming back to the topic of what path you should choose. If I try to get into your shoes, from your perspective, you simply don't know. You only know that you want to do Programming and are very curious about the apps and sites that you visit about how they are made. So you are not sure what makes you tick, "YET". Cause you've never tried them before.

Enough with the philosophy, that stuff is boring. So the question remains, how do you find out?

Here is my take on it.

Fundamentals

You are fresh out of college, so you know a little bit about how to do Logic. It's time you apply that logical analytic ability in your life. Everything that you do think of them as some collection of actions.

For example, let's assume you are about to go to bed to get some sleep. What steps do you take to complete the task?

• Make your bed.
• If it is the summertime then turn on the AC.
• Get inside the blanket.
• Finally, lie down.
• Sleep.

So what we've done here is called the Flow-Chart, in programming terms. If you start thinking of the real world like this, half of your job is done.

Now that you are in the flow you are ready to start taking on the courses.

Start Small

But there is still one glaring question, what path do I take? For that, I have only one piece of advice. Learn only one Programming Language. In my case, it was C, same for my distant brother as well.

But in your case, it might be something different. If you don't know any I would suggest you take the Basic C course at this point, you don't have to be a wizard in C. Many would say C is very hard and a horrible language to get started.

My argument, in this case, is it will help you understand the fundamental way a computer works and operates on the code that we give it to run. Later when you start on a High-Level language you would be surprised how much stuff you can do without writing pages and pages of Code. That feeling would motivate you to go even further.

I'm taking my example for the explanation of the discovery of your path.

The Trial

Many will disagree but, I will say learn basic PHP. Let me explain why.

It is a C-based language, so it has curly braces and semi-colons, etc. Coming from basic C, you will feel right at home. It is one of the only languages that allows you to work both in Frontend as well as Backend.

You can write PHP code sprinkled around your HTML. So it forces you to learn HTML which is the backbone of Frontend. In a few days, you will be familiarized with how to store data in a MySQL database and show it on a page. At this point don't go too deep into the database part.

In some time you will get frustrated by the design of the app that you are making while learning PHP. Take cues from other websites and you will see that they have this great design and colors and all that.

That feeling will motivate you to get your hands dirty in the CSS business. Maybe even Bootstrap. Once you do that, you will yarn for some interactivity on your page. Wish these images would slide or wish I could open a dialog box among other things.

At this point introduce yourself to Javascript. Only the basics at this point. There is nothing wrong with learning JQuery. Don't listen to all the noise in the Community. Go ahead play with all those cool things of JQuery and its vast ocean of plugins. Let your imagination run wild at this stage. Try making a Facebook-like social media yourself, anything you dream of.

See where I'm going with this? You killed 5 birds with one stone. Leaned a PHP, MySQL, HTML, CSS, Bootstrap, and JQuery.

That's a decent Developer Level skill-set right there. I say decent only because you haven't gone deep into any of those technologies. And you've only spent a month or two.

And at this point, you are well equipped to apply for an entry-level job if that's what you want. But I would say, don't let the fire die even if you start working. Explore other things.

The Finale

Now you are ready to ask yourself "What excites me? What I'm passionate about? What path fulfills that excitement?"

I'm sure you will get the answer, and it will be the right one for you too. The answer could be frontend or backend or perhaps both.

Now that you have figured it out, you can pick your language of choice on that Path you've chosen for yourself.

Well, if you have chosen frontend there is not much new technology to learn for you. It is only perfecting the HTML, CSS & Javascript with various Frameworks in the Market. Try SCSS, TailwindCSS, React, Vue or Angular. Eventually, you can choose to expand your horizon with Cross-platform Mobile Technologies.

If you have chosen the backend then there is actually a lot of different things you can go with. You can stick with PHP or go with Node JS, Python, Java, Ruby, etc, and their respective Frameworks like,

• Laravel for PHP
• Express / Nest for Node JS
• Django / Flask for Python
• Spring Boot for Java
• Rails for Ruby

If you're a Full-stack person, specialize in one frontend framework and one backend technology with a Framework of choice.

In both ways, it is paramount to learn Git along the way. Start learning git when you become comfortable with writing a small Portfolio Website or a Simple auth Backend Service.

Conclusion

No matter what you choose I'm sure you will be great at it. Don't be afraid to try something from the other path or even switch paths. It's never too late.

Now, where do I come in? While I'm in the process of training my brother I thought I would be able to help a lot more people like my brother. What I can do is share my knowledge and keep you excited about Programming.

I'm not gonna do traditional Tutorials, there is a lot of it already out there. What I am thinking of doing is discussing various topics and concepts of Coding at different stages. Let me know what you are interested in.

Happy Coding!