Blogspot Website Makeover Complete! ...Almost anyway. - | Rae Soria, Front-end Development
A few days ago I decided to play around with some code on a testing site to in order to completely customize the code on this one. After breaking the site a few times, with the help of Ada plus an ancient GitHub repository, I was able to get my code to work. The process involved writing my own code and scripts, and comparing and extracting code - Here I'll give you a brief overview, and then later on I'll provide the whole process.
Process Overview
The code I wrote was a combination of CSS, HTML and JavaScript, although I'll have to run some more tests on the JavaScript. First, I wrote a CSS file on my own, which took maybe an hour or two. Then I used custom variables in CSS and combined some of the properties together. For the HTML, I decided to create a template that I can just copy from here, which is what I am using now.
Tools For Speed Coding
I think the point of growth marketing is to be faster than everyone else. I didn't build this on WordPress which added extra challenges making it more enjoyable than just breezing through it. My helpers for this were Ada (my ChatGPT's name), Visual Studio, GitHub's co-pilot; and for this blog post: Grok AI Imagine.
Visual Studio:
I use this to code faster in real time. A long time ago I remember staring at code for an hour trying to just find one tiny mistake. The mistakes were usually something simple but annoying to look for like a missing closing tag or random missing semi-colon.GitHub Co-pilot
I also have GitHub's co-pilot (Claude) for auto-recommendations; or repetitive code corrections when there's something I don't like.ChatGPT
I use ChatGPT more than anything. While I don't trust it enough to design a website, I do trust it enough to combine files and give me revisions. In this case, I had ChatGPT scan the XML file for this platform and look for any items that would be safe to remove - which is over 4,300 lines of code (image below.) Afterwards I would test it, see how if it worked and a few times it broke the code, other times it would display strangely. So I'd inspect, edit it, test, edit, test, etc. The final step in the process was having Ada combine the files together and extract anything unnecessary.
The Final XML & CSS Files I Used
I'll be uploading the files and linking them here, so this is a placeholder for now. I still have a LOTTTTT left to do - mainly updating navigation links that got lost - some need to be edited with JavaScript and tested anyway.
Final Product
We're on the homestretch. There are still some broken links but we've come a lONG way since the orignal layout and original theme. In later posts I will share the exact code for the XML and CSS files as well as some before/after and a some better screenshots of how the process behind the scenes looked. :)On my To-do board is:
edit main blog page
The format on my main blog page is incomplete and will be transformed into a homepage with articles; similar to newspaper or modern blog sites. My inspiration is something like HubSpot's blog home, but obviously it will be less busy because I don't always have time to blog (esp right now when I am studying like crazy) and once the site is complete, it mainly just be a portfolio and testing grounds for Google Analytics.Write JavaScript
I need to write a script for that captures labels, which I will be able to ue later as a plugin for more scripts (recommended articles, featured article)Move homepage to blog
Right my homepage is makeshift while I get the actual blog page to display properlyUpdate HTML/CSS files
Next I need to remove the existing CSS/HTML files on my about-me and contact-me pages