This is the story of how I, a coding n00b, pulled my new portfolio website up fairly quickly over the last month because I hate Squarespace.
What I had to work with:
- what HTML/CSS skills I accumulated during 6 weeks of FreeCodeCamp web dev bootcamp
- zero JS skills or of any other coding language
- some helpful dev friends, both online and offline
- the willingness to fail and try different things
The backstory, aka F*** Squarespace
I’d been using Squarespace for both my portfolio website and the Taboola Rasa website for years. I wasn’t super happy with the no-code approach that required me to wildly drag and drop elements around the page and hope for the best. But at the same time, I also didn’t know much code at all and definitely no design, so it seemed like the easiest option.
Fast forward to 2022/2023. We’ve reached a point where Squarespace has upped its prices so much that I refuse to spend that kind of money for the pleasure of a terrible user experience.
Luckily, in September of 2022, I started a web dev bootcamp, learning HTML and CSS. “Fantastic,” I thought, “I will be overhauling my website in no time, getting away from Squarespace.”
Learning 11ty and Jekyll: A new résumé and Taboola Rasa website
My initial plan was to use a static site generator for my portfolio site. I had put up my résumé website using an 11ty template earlier in 2022. Luckily, the template was very straightforward, so I succeeded, but I didn‘t understand much of what I was doing.
In August 2022, when the Squarespace subscription for Taboola Rasa was about to run out, I messed around with Jekyll to get a barebones version of the website up before my sub renewed. It went alright but, again, I didn’t really know what I was doing.
I didn’t install a remote theme or gem but, instead, I forked Dean Attali’s Beautiful Jekyll theme and then just customised my files right there on GitHub. It was the easiest and fastest way for me to do it at the time, but it was also a pain. When you work in a repo directly on GitHub, you have no way to preview your changes on a live server. So you have to commit every tiny change and then wait for it to build, just to then find out you messed up. Everything takes ages that way.
That said, I got the site up and running and happily cancelled one of my Squarespace subscriptions. I showed my metaphorical middle finger to them. Possibly, I also 🖕🏻 at the screen; I can neither confirm nor deny this.
Giving Jekyll a serious try for the portfolio website
All of this happened before the bootcamp, and I was somehow convinced that once I finished the bootcamp I would be better equipped to tackle my portfolio website using Jekyll based on what I had learned creating my résumé page and the Taboola Rasa website. I don’t know why I believed this, as I am not usually prone to delusional optimism. 😉
So January 2023 rolls around. I have a month to get this done because my Squarespace subscription expires in mid-February.
I had my heart set on using Jekyll and, despite my chronic indecision, managed to pick a theme. It only took me a week. 😆 Then, I spent what feels like another week researching and trying to figure out which type of Jekyll installation would be best for my use case. Gem-based or remote theme? Are they even that different?
Luckily, I do not live in a vacuum. I asked my partner, who is a C# dev but has done some Ruby in the past, and they helped me research. I asked around in online communities and got some pointers. Eventually, I asked my friend, who’s pretty experienced with Ruby, and we paired on the installation. And then… we failed.
We tried various ways. Eventually, using a combination of the Quickstart to GitHub Pages guide and the GitHub Jekyll Docs, my friend walked me through the installation. We finally succeeded at installing a remote theme and ended our call feeling accomplished.
The next day, I decided to hunker down and figure out how to adapt the theme to my liking. I followed the docs of that theme and noticed it mentions files that I needed to change but… where are those files? I did not seem to have them in my local installation. 🤔
“Well, they’re remote, that’s why,” my partner said, trying to be encouraging. I researched some more. It turned out I very much did need those files to not be remote. At this point, my dog crawled into my lap because she could sense my frustration. And that’s when I realised…
You gotta know when to fold ’em
I gave up. I deleted the installation, feeling slightly guilty because my friend paired with me for 90 minutes on this crap and now I flushed his work down the drain too. “It’s okay,” he assured me, “that’s what coding is like.” 😭
I returned to my laptop warily the next day, looking for other options. Ultimately, I decided to go back to what I knew. I tried to simplify the process. And I found an HTML5Up template that predominantly uses HTML and CSS (and a bit of JS, but I can get help with that if I get stuck).
I downloaded the files and started messing with the code. And while it’s hard to be working through someone else’s CSS, I immediately stopped feeling panicked. Because while I didn’t understand everything in those files, I understood the principles. I had the basics I needed to understand the code and to knowledgeably mess with it. It turns out I know just enough HTML and CSS to be dangerous, and I know how to google and ask for help.
Making it work
It took me a while to find what I was looking for in the CSS and sort through the things that I didn’t understand, trying to figure out how to fit in my changes. It also isn’t the most efficient way to pull up a website — you have to manually copy the nav and footer into each page, etc. I don’t think I was truly aware of that before.
But I honestly learned so much doing this. My Flex Box skills improved (I realised I still don’t understand Grid 😆). And overall, I got more fluent in HTML and CSS. When I got stuck, I got some great help from the Virtual Coffee community and my partner.
And, finally, last night, I pushed the site live a whole 12 days earlier than planned and in a hurry because when you cancel your Squarespace subscription, they apparently immediately pull your site down. 🤬
So when you cancel your @squarespace sub, they immediately take your website offline, even if your sub doesn’t actually end today. I cancelled, thinking I am cancelling future payments but, nope, my website is immediately offline.12:05 PM - 05 Feb 2023
What’s next?
There are still so many iffy things on this site. 🙈 The layout isn’t always what I want it to be. Some things aren’t where they’re supposed to be or functioning how they should. The site isn’t 100% responsive, and I’m pretty sure it’s not very accessible yet, either.
But I’m confident that I will continue to learn and improve the site. And I will get to it, but I also have an entire 45-min talk to write in the next two weeks, and I’m starting a new job as well.
There is absolutely no excuse for an inaccessible and not-very-responsive website, but I hope folks will accept my reason, which is that I am only one human with one ADHD brain, limited skills, and a very long to-do list. 😬
Speaking of to-do lists, here are the main areas I want to focus on improving over the next few weeks:
- Adding ALT text because I didn’t add them as I went along in my eagerness to see if things were working as intended. Bad practice, I know, and I will do it smarter next time.
- Figuring out how aria labels work and adding those.
- Adding media queries for the flex boxes I added, since the template doesn’t handle their responsiveness out of the box.
- Checking how accessible my site is via keyboard, screenreader etc., and then trying to improve on that.
Do I regret hardcoding my website?
No. But there were definitely moments when I did question my choices and sanity. 😂
I remember reading ages ago that the best camera you can use is the one you have with you and know how to use (i.e., probably your smartphone). Something similar was at play here. It didn’t matter that, technically, a static site generator would have been the best tool for the job because I didn’t know how to use it. So I used the tools I was familiar with instead.
At some point, as I keep learning to code, I will probably redo the entire thing using a static site builder. But for now, it’ll have to do, and I’m proud of what I created.
Oh yeah, almost forgot: Here’s the site now!
Feel free to let me know (in a beginner-friendly way) what you think I should/could improve!
[Cover photo shows Nomi, a blue merle Mini Aussie, sitting on a sofa behind my laptop. She’s looking a bit wary, presumably, because she doesn’t really know CSS and can’t help.]
Top comments (0)