Author: Adrian Miasik
Publication Date: 2019-11-07 (11:39 p.m. EST)
So I wanted to put things in perspective.
What is this website currently made of?
To be honest...
This is the entire project right now.
The purple folder icon labeled "adrianmiasik.com". We can refer to this folder as our
There isn't a lot here. Which is good! I can now quickly explain what this project currently consists of.
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:
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
currently has our first websites image called
, which is the first image in this post.
Next up is
. I'm actually going to skip this once since it's related to version control and my choice of IDE. (I'll try to
Next up is
. 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
From reading online, it seems that we use all just use
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
It looks like this.
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:
HTML elements reference.
(Ayyy clickable link :^))
Next up is
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
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.
What are you going to be using it for?
Who knows. Right now mine just contains this:
So just a large heading that you can click to get to my website. A fancy markdown badge related to hosting. And
a brief description of this website.
A personal website to show off my portfolio and also document my web development journey.
But that's the site.
Your browser should've only received two files at the time of writing this. It should have received this
file. And this image:
But I see more than one image in this post. How did you do that?
So that was all using the same single image inside
. 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...
This folder will contain all our images. (Currently it contains one image)
This image file is our first hosted image on adrianmiasik.com
This is a file that prevents certain directories/files from being included in our version control.
This file contains most of what you are currently viewing. This is the bones and content of adrianmiasik.com
This file is a legal document that governs the use and redistribution of this software.
This file is used for many things but generally used to communicate important information to the people using