Sugar (HTML), spice(CSS), and everything nice (Javascript/PHP). Add a little Chemical X(nginx) and what do you have?
That’s right, you have a website!
Most of today’s web pages are built upon a mixture of these fundamental web components. The components all work together and culminate into a nicely designed, useful web page.
Imagine you’ve rented a new suite or building and you want to turn it into your company’s storefront; what does a store need to attract and facilitate customers? You’ll want to put up a sign or banner that has the name of your company. Inside the store you’ll want to label the aisles to make it easy for your customers to find what they need. Then, you’ve got to spice up the place with a design that is pleasing to the eyes –decoration is a must for attracting new customers. Lastly, you’ll need some functions, right? A store cannot function without a process for purchasing and/or returning/exchanging goods.
How does all that about opening a store relate to web pages you ask? Well, let’s break it down.
The Building: the Web Server
The building or suite: a physical/virtual space that enables you to carry out your business. Without it, you have no store. In web development the web server is this “building/suite.” The web server is where you “host” your actual website and it allows your customers to visit and do business with your company. In my first example, the web server is nginx although there are many other web servers available for use (Node, Apache, IIS, etc.)
The web server serves up everything that your site is composed of to visitors. So, basically just HTML/CSS/JS.
Labels: HTML
Putting up a banner and labeling the aisles make your store semantic. When your customers need to find canned goods, they know to look for the canned goods isle. If your customers want to recommend your store to their social circle they’ll think back to the big banner outside with your store’s name.
HTML is a markup language. By now you’ve probably come to the conclusion that “markup language” just means that it’s a language for marking things up. ‘Tis true my dear.
HTML provides the developer the ability to label every piece on a web page using tags(elements)/classes/ids. For instance, you could label the heading on your page with <h id=”store-banner”>Rugged Bear’s Rugged Bear Rugs</h> so that whenever you need to refer to the banner you can just call it “store-banner”.
<head>
<link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
</head>
<body>
<div id="neon-back-light">
<h1 id="store-banner"><span id="neon-back-light">Rugged Bear's Rugged Bear Rugs</span></h1>
</div>
<table id="aisles">
<caption><h3>Store Aisles</h3></caption>
<tbody>
<tr>
<th>Rugged Bear Rugs</th>
<th>Canned Goods</th>
<th>Fresh Produce</th>
<th>Candy</th>
</tr>
<tr>
<td>Green Bear Rug Made from not Bears</td>
<td>Tomato Soup</td>
<td>Lettuce</td>
<td>Snickers</td>
</tr>
<tr>
<td>Yellow Bear Rug made from not Bears</td>
<td>Beef Ravioli</td>
<td>Broccoli</td>
<td>Twix</td>
</tr>
</tbody>
</table>
<div id="example-buttons">
<button id="buy-button">Buy</button>
<button id="login-button">Login</button>
</div>
</body>
Decorations: CSS
Decorating your store is a good way to make it stand out. If your store looked like any other store, why would a potential customer visit your store over another more visually pleasing one?
This is where the pieces of the puzzle start fitting together. CSS is a language that allows you to decorate the pieces of your web page. Adding onto the previous example with HTML, if you wanted to add a nice neon back lighting for your website’s banner then you would add the CSS to “store-banner”. This would be an extremely painful process if you had no way to refer to your banner. Thanks HTML!
body {
background-color: black;
color: white;
font-family: 'Bitter', serif;
}
#store-banner{
color: white;
margin: 10 auto;
text-align: center;
}
#neon-back-light{
animation-name: neonflash;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
margin: 0 20%;
border-radius: 10px;
}
#aisles{
margin: 0 auto 1.5em auto;
}
#aisles,tr, td, th{
color: white;
border: 1px solid white;
border-color: white;
}
#example-buttons{
margin: 0 auto;
text-align: center;
}
@keyframes neonflash{
from{
background-color: rgb(0,0,0);
}
to{
background-color: rgb(57,255,20);
}
}
Functions: Javascript
You have your aisles labeled, and your store looks really nice. A customer walks in and realizes they can’t buy anything and walks away. Why is that? It’s because your store needs processes and functions! You have to come up with a process for your customers to purchase items in order to actually sell items, no?
You can provide functions to your web page by using Javascript. If you want your customers to be able to purchase something from your website then you have to write in a “purchasing function”/flow. If you want to give your customers the ability to log in then you’ll have to write in that function. Where will you tie those functions to? Oh yeah, good thing you labeled every piece of your web page with HTML. Bind that purchase function to your “buy-button” and your login function to the “login-button”.
let clicked = 0;
const tellEmHowItIs = (timesClicked = 0, mode = "buy") => {
if(mode.toLowerCase() === "buy"){
switch(timesClicked){
case 0:
alert("You gon need a backend for this homie.")
break;
case 1:
alert("Fine. We just magically charged your credit card $100000! >_>");
break;
case 2:
alert("Don't you have something better to do?");
break;
default:
alert("o_o;..........");
}
}
if(mode.toLowerCase() === "login"){
switch(timesClicked){
default:
alert("Come on, come this way. This is definitely not a bear trap.");
}
}};
document.getElementById("buy-button").addEventListener("click", () => {
tellEmHowItIs(clicked, "BUY");
clicked++;
})
document.getElementById("login-button").addEventListener("click", () => {
tellEmHowItIs();
})
Yay, we did it!
Congratulations! With all these parts in place, you now have a functional store/website. Wait, you wanted a place to store your inventory and your customer’s data? Well, you need a warehouse/database/backend for that. I’m out of time though, talk to you later!