Reviewing Our Foundation

Adrian Miasik



So I wanted to put things in perspective.
What is this website currently made of?
To be honest...
Not much. Take a look at our site:

The project directory of

This is the entire project right now. It's just 5 files. (Most of this site lives in index.html, more on this later)
There isn't a lot here. Which is good! I can quickly explain what you are looking at.

The purple folder named "" is where our site lives. We can refer to this folder as our root directory. Our entire project will likely live inside this directory.

Within our root directory there are 4 files and 1 folder. Let's start at the folder at path: root/images .
With whatever project you work on, you are going to want to try to keep things neat and tidy so you know where everything is located. With that purpose in mind, this folder will contain all our images we use on this site. Any photo/graphic file formats like (.jpg, .png, .svg, etc...) will live inside here. In fact, directory root/images currently has our first websites image called this-image-you-are-looking-at.png , which is the first image in this article. (The smaller images are just cropped copies of the one image, more on this later too)

Next up is root/.gitignore . I'm actually going to skip this once since it's related to version control and my choice of IDE. (I'll try to revisit this)

Next up is root/index.html . This is the website.
Everything you are seeing was made possible by this file.
The words you are reading right now are inside this file.

So this file is pretty important...But how do you get it?

Well when you go to a website your web browser tells the server "Hey. I'd like to see this website:"
The server then responses "Ah okay, you must be here for the homepage. Let me just run to the backroom and get you what you need".

Depending on how the server was configured it would typically look and return one of these files as a single entry point:

From reading online, it seems that we use all just use index.html now. Wish I could tell you why. But I don't know. I'm going to assume that's how most people configured their web servers and it sort of just stuck as the default.

So what does index.html look like?

It looks like this. Weird, right?

It's just English with a bunch of "HTML Elements". I'm not going to go through them all...but each HTML element is used for a specific purpose. Sometimes that purpose is to make font bold. Sometimes that purpose is to define content. Sometimes that purpose is used to make links clickable. If you want to see a list of HTML elements, Mozilla has some good documentation here.

Next up is LICENSE .

This file is a legal document that governs the use and redistribution of this software. Pretty standard.

Finally our last file is
README files are typically used for documentation. It's a way for the creator to quickly convey useful information to others. The information can vary, for instance...some read me files are used as instructions to setup certain software configurations, installations, etc... Some use it as a manifest. Some use it for licensing and copyright. Some use it to credit the contributors. Some use it as a changelog. Some use it to display major known bugs. The truth is, this file is used for many things and it's generally worth the read.

Hey Adrian! What are you going to be using it for?

Who knows. Right now mine just contains this:

<h1><a href=""></a><h1>

[![Netlify Status](](

A personal website to show off my portfolio and also document my web development journey.

So just a large heading that you can click to get to my website. A fancy markdown badge related to my hosting. And a brief description of this website.

But that's the site.

Your browser should've only received two files at the time of writing this. You should have received the index.html file. And this image:

The project directory of

I see more than one image in this post. How did you do that?

So that was all using the same single image inside root/images . Just with some inline CSS I was able to stylize an empty element (a div), give it a background image, offset the background image, and finally change the size. Essentially making multiple "cropped copies" from one image source.

You can actually view this yourself. Right click this page and click 'View Page Source' . Once you can see index.html in your browser...Look for the 'style' attribute on the div HTML elements.

Speaking of which. Man. Is there a lot of content in a single document. I should probably start organizing these into separate pages. It's getting difficult to navigate up and down this page. heh.

Our site doesn't have a lot. It's got...