I want to prefix that I want to make my blog series approachable to non-devs. So I am going to attempt to walk the tightrope that is explaining my technical woes and accomplishments to a crowd who may not have a strong technical skillset. With that in mind I plan on writing posts explaining my interpretation of some fundamental programming concepts such as what a: coding language, framework, frontend, backend, database, etc… are/is.
One of the most memorable lessons I learned at Flatiron is conceptualizing how to build an application out. Imagine that your are tasked with building a house for someone to live in. What are some basic things you would need to do even if you didn’t know anything about building houses. Well, presumably we would need some sort of building material to structure the house: wood, brick, metal, concrete, insulation, glass, etc. Presumably we would be building on some sort of surface(dirt, sand, rocks)that the foundation of the house will be built on. We would need paint the house and style it in some manner. Lastly(assuming someone is going to be living in this) we would need to set up electricity and pluming.
Building an application is conceptually is very similar. The building material for the structure of the house would be the coding frameworks that are used. The surface the house is built on could be the coding languages that the coding frameworks are based in. The paint/style of the house are the styling frameworks/languages that are used to make the website look and function in a particular way. Lastly the pluming/electricity is how people interact with the website. To visualize this think of the google home screen:
This page while simple looking contains of these elements. One of the building material’s that is being used is called HTML (Hyper Text Mark-up Language) which is the structure of the page meaning the buttons you click on or the search bar you type into. Let’s hone in on the search bar since I think it is a good way to bridge all of these concepts. For simplicity sake let’s say the search bar is one of the HTML elements. Here is the code and what a basic search bar is in HTML without any styling
<div class=”topnav”>
<input type=”text” >
</div>
Looks pretty different than the google search bar. On the google web page we can see that the search bar has a little magnifying glass, is bigger and is rounded. This is all done by using a styling framework or language. Now lastly, if we were to try to type into the basic search bar it wouldn’t do anything other than show you the letters you typed in. However in google when you type in things and hit enter you get your search results. This is the electricity aspect of applications. It’s part of how we interact with and use the application.
This is a very basic example of some of the components that applications and website possess. There is much more to how applications/websites work, but hopefully this helps explain what you’re looking at when you use your favorite websites or applications.
