CodeNewbie Community

Alex Vong
Alex Vong

Posted on • Updated on • Originally published at alexvong.substack.com

I Built a Website

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:
https://peprojects.dev/alpha-1/alexvong/

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.

Alt Text

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.

Alt Text

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:

Alt Text

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:

Alt Text

There is also my incredibly basic Pokemon Starter Journey Website:

Alt Text

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.

The HTML code itself is pretty ugly with the CSS is all inline, and it absolutely looks like a beginner in the 1990s made this website. But it was made by someone who would not have been able to do this a month ago. At the end of the day, I am overwhelmed with joy that I created this. I absolutely cannot wait to learn more about websites and designs of the 2000s and today and incorporate proper CSS, Javascript, PHP, and other visual design so I can keep coming back to AOL and improve it. This really is just the beginning.

Discussion (3)

Collapse
andrewbaisden profile image
Andrew Baisden

Congrats keep on learning you will reach new heights.

Collapse
alexv0ng profile image
Alex Vong Author

Hey Andrew, thank you so much for the words of encouragement. It truly means a lot. I was beyond terrified to even post anything thinking it wasn't worth it. So thank you!

Collapse
ben profile image
Ben Halpern

Woohoo!