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:
This is the entire project right now. It's just 5 files. (Most of this site lives in index.html, more on this
There isn't a lot here. Which is good! I can quickly explain what you are looking at.
rootdirectory. 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/imagescurrently 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
. 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
. 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: adrianmiasik.com"
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
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:
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
file. And this image:
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
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