Until a few months ago, reading CSS felt like I was deciphering cryptic Egyptian hieroglyphics written 3,800 years ago.
The ironic part? I spend damn near 95% of my professional life on a computer. That’s something like 2080 hours a year. Yet I couldn’t write the most basic code (HTML and CSS) that makes up what we call the internet.
That’s like living in Spain for three years and never learning how to speak Spanish.
IT MAKES NO SENSE!!!
As a result, after stumbling learning how to write HTML and CSS (and a little bit of PHP since this is a WordPress website), I built my personal website from scratch. Here’s a preview of the raw HTML and CSS I wrote to build my homepage:
Now you might be asking yourself “why should I care?”
Well, you probably shouldn’t care how I spend my spare time. But considering you already read this far you might as well keep going. 😉
If you’ve ever wanted to build your own website from scratch, or felt frustrated that you spend 95% of your time on the computer but you can’t do basic adjustments such as adding <div> tags or adjusting the CSS hover effect on your <a href> tags, I would highly suggest taking a coding course. I took General Assembly’s HTML, CSS, and Web Design Circuit.
If you’re still not sold on learning how to code, but you spend all of your time a computer, you’re kinda like Neo during the red pill/blue pill situation right now.
You never learn how to code, you’ll stay in la-la land, ignorant to the beauty of building anything you can imagine on the internet. You learn how to code, you’ll see how deep the rabbit hole goes.
“But I can just build a website on Squarespace, Wix, etc … why should I learn how to code?”
You can also use Google Translate to understand people speaking Spanish and translate back into English. However, if you’re going to live in Spain, you should just learn how to speak Spanish.
Similarly, if we’re living our professional life sitting on a computer, we should learn the language of computers. It’s a better experience for everyone (ex. engineers, web dev, etc) and makes conversations smoother. You’re also more autonomous since you can move quickly, making decisions without waiting on front-end devs to update changes you need.
Still with me? Okay cool, here’s the macro process I used to learn how to code.
The process I used to build this website from scratch in 10 weeks.
The process was pretty straightforward:
- I took General Assembly’s HTML and CSS course. It’s a 10-week course. It takes roughly 4 hours a week to watch the videos and do the exercises. You get a mentor assigned to you, mine was John Humbracht (who is a boss!), who helps you when you’re feeling stuck.
- I took all of my notes in Evernote during the course. You can access my Evernote file here.
- I used all this info to build my personal website (what you’re reading now!) from scratch. We wrote our code in the Sublime text editor and saved our files in GitHub to give sharable links to our mentors to audited the code.
- After my code was finalized, I had to upload to WordPress. The first step is installing what’s called a “Starter WordPress Theme.” It basically gives the building blocks of a WordPress theme minus any styling or weird plugins. My starter theme was suggested by John, my mentor at General Assembly, and called Underscores.
If you like my website design, or want to use it as a baseline, I’m giving away the raw HTML and CSS files for all of my pages. I wrote THOUSANDS of lines of HTML and CSS which took probably 100 hours in total. And you can have it all for free if ya want it.
Here’s a preview of my hundreds of lines of CSS code looks like:
You can have ALL of the code to my website, which is entirely written from scratch, which includes:
- PHP for all WordPress template, function, etc files
- HTML for the homepage
- HTML for my contact page, consulting page, podcast page, etc.
- HTML & PHP for my blog post template
- CSS file that styles the entire website
If you want it, just fill out the form on my contact page and I’ll email you the raw files. And if there is enough demand I’ll figure out a way to export my current WordPress theme and make that copyable/customizable for anyone who wants to learn a bit more.
That’s all, friends. I just completed this course and wanted to whip together a quick blog post to succinctly recap everything. Drop me a comment below with any questions!