TL;DR: I built and my first website and uploaded it onto our class server today. It is NOT much but if you'd like to take a look:
Today I accomplished a feat that may not seem as amazing to those more experienced than I am. Heck, it is probably not even that impressive and does not deserve its own article. But today, I built and launched my very first website!
Holds for Applause
Our class at Perpetual Education got to work with File Transfer Protocols and was given the opportunity to send our files to the PE servers to host our very first website. With an overbearing amount of excitement, I spent a large portion of the day working on my AOL (Alex OnLine) website. Here is how it was done.
The first thing I did was watch a video from our lesson on the steps to send our files to the PE server through the FTP program Transmit. Our mentor, Derek, explained what FTP was and how we, as a class, would be using it with the PE server.
I next made a quick Skitch outline of how I wanted my main page to look like. I did not want to start coding and building blinding without having some sort of outline to use for reference. I also did not want to spend an exceeding amount on the outline because I knew I would make design changes as I go.
Once I had a rough idea of how I wanted the webpage to look, I created my
index.html on Sublime. We learned a great deal amount of HTML and how to style it during our first month at PE but there are still so many things I don’t know. The majority of my time was spent Googleing things I wanted to do but did not know how.
The main concept I did not fully know and understand was about file paths and sometimes the necessity to go up a path (or two) to access a certain file you want to link. Not all files are on the same direct path or level and it took me such a long time to understand that concept.
This was how my folder looked like. As you can see there are multiple folders and files in them. For my website, I had to link my index.html page with other HTML files so the user can go between them on the browser. If I was in the
index.html and wanted to link
aol-main.html, I would have to go up a path, then into the alex-on-line folder and only then can I link
aol-main.html. It was a long and grueling learning process but I think I finally understand how the folder paths work.
On the main
index page, I also wanted to incorporate the HTML exercises we’ve been doing in class so I put them in an unordered list along with a link to my Substack account. The main focal point was to feature my class projects. As of now I only have 2 (unfinished) projects that I wanted to feature.
One is the unofficial official AOL (Alex OnLine) project and another is this Pokemon Starter Journey page. Here is the temporarily finished main page:
When the user clicks on either the image or the link below it, a new browser tab opens up and loads the clicked content.
They can open AOL (Alex OnLine) which is an homage to the 1990’s AOL style web portal:
There is also my incredibly basic Pokemon Starter Journey Website:
This first website took such a long time and it really isn’t much to look at or be impressed by. We have been learning a lot about early websites in the 90s and the limitations of developers to mainly using headers, paragraphs, lists, and links in their HTML and styling them inline. That was the theme of this site and my projects.