My First True Test of Web Programming

Yeah.. I chose to go overboard alright // No Regrets 💪😎 (PC: DigitalMusicNews)

Quick Reminder

If you want to view the website or repository before reading this website creation reflection, then please scroll all the way down to the very end for the links. Well, without further adieu, here is my coding experience.


The Webpage Mock-up Selection

During the weekend of September 16th & 17th, the class was assigned to complete a webpage mock-up of any choice of website using our HTML5 and CSS skills.

I remembered Zak, our class’s teacher assistant (actually.. “Second Teacher” to be honest), mentioned to our class to select our website wisely in a fashion that it was not too complicated, yet not completely easy in a way that it was image smacking and everything is done. The primary website that circulated among the class was the Google home page.

Thinking about it initially, my thoughts were straight up like “… NAH!!” I legit thought I could do Google’s homepage in my sleep and wanted something bigger & unique enough that nobody else will do it. So, I began researching.

The Ultimate Decision 💯 (PC: FactMag)

The two websites that peeked my interests on mocking up are: Spotify and SoundCloud. Spotify had a very clean design to a page and I wanted to see if I can directly establish my own sleek Spotify page. SoundCloud was more simpler in form and could be edited with my own tastes. When I ultimately began deciding, for some reason, I checked the GitHub account of junior-devleague and wouldn’t you know it, there was a new project called “spotify-playlist” and examined further seeing “zakattack9” updating the repository. Welp, calculating that we might eventually diverge into that project, I selected SoundCloud in a snap. (yep, fun backstory)


From Scratch to Some Juices Flowing

I particularly began the process off by doing the usual sign-in to GitHub, the software platform of “Dreams” that is used for our class’s coding projects. Began to create my first repository ever, “webpage-mockup,” and git cloned the repository in my Git Bash terminal. I touched an index.html and styles.css file as well as mkdir’d an images folder. After opening these files on Sublime Text 3, the process of the coding journey began on Saturday.

…I honestly sat on my chair for the first ten minutes not knowing what to do after establish my !(tab) boilerplate. I decided to browse GitHub to find last year’s coding [year] one project, “DigimonGo,” since Zak mentioned it also in class. Let’s just say I git cloned a few of the more bright students’ web pages (*coughs* Zak, Ian, Angela, Kyle *coughs* kk you get the point).

Just looking at their pages, I went “Okay, what was I thinking trying to do SoundCloud honestly.” The effort needed to be put in the website would be crazy, especially when I challenged myself to not touch inspect element on the actual SoundCloud website.

Anyways, I examined the div setups as well as the navigation bar’s HTML/CSS code they had. Their code was actually pretty helpful. Now, I began to start coding.


HTML Progressions

Yeah, I just liked the blue background color 😅(PC: SitePoint)

How I initially approached SoundCloud was that there were six major blocks of the home page, which gave me the general idea of six sub-containers of divs. The process starts at the header.

The header acquired a white sc logo, which was something I could not find on Google Images with the same exact design (a common problem in image searching). So I decided to select a black image of the found logo and made it blue (for good reason). The corner blocks on the top right were in a UL. I added the proper text associated with it in the middle and that’s pretty much the header.

The second/middle block of SoundCloud is where I placed the most work in. I first learned and added a search bar block with it’s own external magnifying glass image equipped with it. Next, I established the proper text associated with those portions, but then came the song blocks of the middle. Each div block was it’s own separate song, and SoundCloud legit had 12 sound-blocks.

For this project, I selected songs out of my own personal playlist because I could not bother with those updated songs on SoundCloud currently. I rather add songs with meaning to them, which one day when I may be a senior or college student looking at my GitHub account, I will remember them with a certain significance. 12 Pictures, 12 Song Titles, 12 Artists to code. 80 lines of html code. If you don’t call that dedication, then just wait.

Afterwards, I constructed the other four blocks of SoundCloud. Honestly, it was pretty simple <h[1,2,3,4,5,6]>and <p> blocks all over the board all around.

I believe that I took approximately 4–5 hours just establishing the initial HTML code with breaks here and there on that Saturday. But, that was just honestly 1/5th of the work. You’ll see why.


CSS: The Destruction of Jarren’s Brain

Totally Fine ☠️☠️ (PC: SamPierson)

There’s a heavy reason why I never acquired SoundCloud links to songs and had not ever figured out the pseudo-selector hover actives for the SoundCloud songs. Yeah, I was pretty pissed myself that I did not accomplish that. But, it is for good reason.

A premier 331 lines of CSS code and a backtrack edit session with my HTML code. I never finished on Saturday night (I stopped at around 12am Sunday), more like Sunday 2–3 pm. I honestly cannot be bothered to explain everything that had went on with that styles.css sheet, especially when I’m currently 4 minutes into this blog post.

As a brief summary, most of my code syntax derived from W3Schools. From background images to hover border boxes to properly setting up the everlasting annoying soundblocks properly (literally, 4/5ths of the time the images were in a staircase model; I laugh too), I learned so many new things that I do not remember as of now. I knew how each one operated like when tweaking at it during the webpage-mockup process, but after that Sunday, there was too much knowledge to remember.

I will probably say that now my text fonts, margin, padding, border adjustments, opacity, and all simple CSS syntax are up to snuff. Those features like float, webkit filters, z-index, vertical-align, inline-block, and everything of those more complicated features were hit-or-miss, one and dones for me for this webpage week long mock-up. I will look more into it probably during my fall break, but right now, I need recovery time. Thanks CSS!


Final Remarks on SoundCloud Imitation and Personal Progress

<p> A Start of a New Passion is Upon Me </p> (PC: KurushDubash)

I am not going to lie, this project was pretty stressful as an initial thought. I dedicated much time to it more than most of the homework I had. Many of the concepts were tough to execute and honestly, the quality can be improved on regardless of the beginner status I am in (technically). Recreating SoundCloud was overwhelming slightly, but I am thankful that I did do a webpage-mockup on it.

Coding is not meant to be easy and I decided to take the step to challenge myself with the HTML/CSS syntax knowledge I had up to Quarter 1. But, every single part of it was absolutely lovely to see when made. Being able to create a website that took almost 9 years in the making, since it’s start in 2008, made me proud of the progress I could make with my given timeline.

Honestly, for a ripoff made in a weekend and a couple school period sessions, I was capable of creating a piece of work that I can look back on as a point of reference. That was the whole approach for me honestly, which was to create a webpage-mockup that highlighted my capabilities in Quarter 1.

Whether the concepts were learned at that moment or was second nature in the process of the SoundCloud build, I was able to construct it to the best of my ability. The fact that I was also able to implement my own elements of it, which were the unique songs (that were not even on SC), was a definite plus.

Everything about this project proved to myself that I am capable of becoming a great coder in the future and I might just diverge into computer science when going into college. Either this or Civil Engineering, which are two completely different routes as described in my first blog.

But, through this project, I believe that a new flame was initiated through the creation of this website for me in terms of coding. It was a test of determination of how I may undertake a major coding project. Well, after this project, I can definitely see myself enjoying new creations down the line 😄.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —

(PC: NiceVideo)

Congratulations for the people who made it here. The intent of the blog was to reflect on the experience in a personal, genuine manner. It was such a great repository to undertake and I thank my instructors for giving me this open-ended project. Hopefully, you all enjoyed it.

Thank you all again! 💖✌️