Building a Personal Site from Scratch in HTML and CSS: tools, resources, and methods that I used to create my first website

It’s come to my attention that resume-worthy projects are one of the keys in proving one’s worth in tech. You can claim to be one of those “lifelong learners” until you’re talking about OpenCourseWare in your sleep, but as the old adage says, the proof is in the project!

If it’s free, one might as well sign up for everything, right?

It’s also come to my attention that having a lovely personal website is another key to prove one’s worth in tech (and it is helpful for anyone on the job market).

Hey! Maybe I could use a personal website to display my projects. Maybe a personal website could be a resume-worthy project in itself. Maybe I could even use a personal website that doubles as an ongoing resume-worthy project to display my resume (which also lists my resume-worthy projects, one of which is the personal website itself).

Friends, I think I have an idea for a project.

Unfortunately, I have budgeted time and energy when it comes to devoting myself to my career change to cyber security. Having an existing career and existing bills will do that to you. Oh what I would give for the opportunity to just spend a month without the need to work so that I could throw myself into filling the seemingly-endless pit of what I consider to be my skills gap.

I start each morning by opening a warehouse and ensuring that the good people of my state are supplied with quality imported wines. I have had easier jobs, but my boss, his fiance, and our delivery driver are some lovely people to be around. Thankfully, they are entirely supportive of my ambition in tech.

My job doesn’t go without its perks. Thanks, Alessandro.

I have seen videos in which a seasoned web developer builds a beautiful website from scratch in a few hours. If you came here to see something like that, then you’re going to be sorely disappointed. The last time that I did any kind of web design was probably in 2006 for one of my Neopets pet pages.

My goals:

1. I will have a product that I feel proud of.
2. I will gain knowledge in the three main languages for web design: HTML, CSS, and JavaScript (JS is a stretch goal).
3. I will faithfully document this process for posterity.
4. The website will integrate my articles/blog posts.
5. The website will display some form of my curriculum vitae.
6. The website will include a secure way for visitors to contact me without exposing my contact information (such as email) to robots or marketers.
7. I’m going to hide one or more “flags” for curious visitors. 😁

Getting Set Up

First, I’m going to set up a Linux production environment. I’ll be using the Kubuntu 20.04 “Focal Fossa” distribution for VirtualBox. I am used to Kali Linux, but I think that it would be useful to get to know another flavor of Linux.

This is a fossa. These guys were the villains in the animated movie Madagascar.

It will take some time to download Kubuntu and import it to my hypervisor. In the meantime, I will take advantage of this free Udemy course to ensure that I feel comfortable with using Visual Studio Code together with Git.

My stretch goal fright now is to at least configure a blog page that will integrate my Medium articles.

NOTE: I am using GitHub Pages to host my website and Google Domains for DNS. If you would like to learn more about integrating these services, please see the guide that I wrote here.

I love being able to customize things.

Kubuntu and Visual Studio Code

I got lost in the various options to customize my new workstation. Kubuntu is a beautiful, lightweight interface. Kubuntu uses KDE desktop while Ubuntu uses GNOME desktop. My reason for picking Kubuntu was that a friend of mine highly recommended it. So far, I am digging the aesthetic. If you are interested in learning more about the differences, then check out this article.

Visual Studio Code (aka VS Code) is probably the most popular source-code editor for developers. It is developed by Microsoft for Windows, macOS, and Linux. There are tons of extensions available as well. I’ve installed Prettier, Beautify, GitLens, and vscode-icons to enhance my experience.

Taking the Udemy course was the right call. I was able to quickly integrate Git and VS Code in less than an hour and I shortly felt comfortable using the combined services.

Current Status of My Site

Here’s what I’ve got so far:

Turns out that you can type with emojis in HTML. I love the future.

I am a planner, so I am going to check out a few guides before I dive too deeply into the actual code. In the meantime, you can see that I’ve given my homepage a title and a “work in progress” notice.

Here’s a fun thing I learned so far: my GitHub Pages uses the index.html file as the source for its homepage. When making a change, it can immediately be viewed at charlestimmons.com/index.html. It takes a bit of time for the root directory, or homepage, to reflect this change, so do not panic if you don’t see your changes immediately after they’ve been committed to your repository.

Creating the Blog

Adding a new page to my directory was easy. I created a file called blog.html and added it to my repo. The page is served at charlestimmons.com/blog.

I weighed the pros and cons of publishing a new post to both my website and Medium each time I wanted to write something. I figured that, for my purposes, embedding my Medium feed is the best route to take.

After a bit of searching, I came across an open-source embeddable specifically coded to embed a Medium RSS feed. It feels like cheating to use this solution, but I am sure that I will have my own challenges ahead.

Yuck.

It works, but it isn’t pretty. I’m going to try something else.

Progress Check

My victories so far are setting up Kubuntu as my workstation, gaining familiarity with Git + VS Code, and gaining a better understanding of my own capabilities for this project as well as what I can realistically accomplish in the next few days.

I am determined to figure out this Medium integration conundrum tomorrow. I may resort to seeing what Jekyll can bring to the table.

There has got to be a away to hack this.

To Jekyll or not to Jekyll?

As far as the blog goes, I think that I’ll save the Medium integration for whenever I finish my other goals. In the meantime, I can always have a link to Medium itself. This isn’t an ideal solution, but it is a viable compensatory measure.

I’ve decided to start from scratch and build my site with Jekyll.

Jekyll’s logo

Update

I played around with Jekyll for a few hours, and I don’t think that this is the route I will take for now. Jekyll is a static site generator that works with Ruby and Ruby gems. Considering that one of my goals is to understand what is happening under the hood on my website, I don’t think it’s appropriate for me to mess around with Ruby today. I am not a web designer. I am an InfoSec professional looking to create a personal site.

Starting from Scratch for the Third Time

My goal right now is to lose myself in designing a sleek, minimalist landing page that will have my name, a short tag line, and a few buttons. My idea is for the buttons to link to a page with my resume, link to a contact page, link to a projects page, and link externally to my LinkedIn and Medium pages.

This personal website from Greg Levine is inspiring to me. I’ll attempt to create my own flavor of something like this.

https://bklynmarketing.com

Background

Until I am ready for my splash page to go live, I’ll keep my index.html page as is.

I’m quite skilled at editing the <title> attribute now.

In the meantime, I’ve created another file called splash.html that will I will use to test my splash page. Once I’m happy with it, I will replace the code in index.html with what I’ve written in splash.html.

I figure that I’ll build this page as one would build a painting. First step is to create a lovely background. This site will serve as a professional profile of myself, but I also want to showcase my personality. That’s the whole point of not using a ready-made template. I found a tool that creates a custom animated gradient background in CSS.

Neat!

I’m not a huge fan of the visible lines in the gradient. This may be fixed by using more subtle color transitions or extensive tweaking of the CSS. In the meantime, I’m thinking that by simply placing more elements on the page, the lines won’t be as obvious to the viewer.

Adding Elements

I am super pleased with what I’ve got so far.

It looks like we are also mobile compatible! 🤞

For my name and tagline, I am using the Ubuntu font family. The neon effect I found here.

I’m going to share two tricks that I learned with you. I hope that they save you some time and headaches.

First, to get a dynamic font size, use vw units instead of pixels. This means that the size of the font will be relative to the size of the screen it’s being used on.

The next trick is to use the font-face rule in CSS when dealing with imported fonts.

Google Fonts

The above is what you get from Google Fonts when you look to add one of their fonts to your project. I struggled for a bit when adding fonts to my style sheet. The trick is to visit the link. There you’ll find what you really need.

Bingo.

Copy and paste these font-face rules to your style sheet. That’s how I made sure that my fonts imported properly. Play around with it until you figure out what works for you. Remember, Google is your friend!

Mobile Compatibility

I wanted to design this site from the ground up with mobile compatibility so that I don’t have to do that later. Copy and paste this snippet into the HTML head, and it will save you some trouble.

<meta name="viewport" content="width=500, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">

Essentially, this essentially forces the browser to display the content of the page at scale. With this, someone can visit the site with their mobile browser and won’t need to adjust the zoom of their screen to make a better experience.

Progress Check

I have started really getting into this project. After initial difficulty getting used to CSS and HTML, I found that my learning curve became a lot less steep.

So far, I am quite proud of what I’ve accomplished. I have a fun splash page that can be viewed on a desktop and a mobile device, without compromising on user experience. Just look at this bad boy!

Dynamic header size and static paragraph size. Sleek!

Had I not spent so much time researching and falling down rabbit holes and frustrating myself with Jekyll, then I think that I would have achieved more of my goals. Now that I’ve reached the obsessive stage with this project, I think that I may have a surge of productivity.

Wrapping Up

At this point, I want to give a shout out to my friend Beth for helping me figure out a few tips to make my buttons pretty for mobile. Her personal site is here. She is a web designer who is also currently changing careers to InfoSec. You can also find her on LinkedIn.

Look how far we have come!

I also couldn’t have gotten this far without CSS-Tricks. I’m thrilled to have discovered that resource.

As you can see in the above GIF, my homepage links externally GitHub. “LinkedIn” and “Blog” take the visitor to my LinkedIn and Medium page, respectively. “Resume” and “Contact” both return 404 errors right now. The final steps are to display my resume on a separate page and set up my contact page.

Resume

I have an extant resume in my Google drive. Thankfully, there is an add-on called Docs to Markdown which quickly converted my resume to HTML (I had to make a few corrective edits).

h4x0r c010rz

I have seen people putting their phone numbers and email addresses on their personal websites. Personally, I don’t feel comfortable doing that considering that I already get an influx of phishing emails (sigh) from what appeared to be a legitimate job application website.

I chose to break with my theme here just to make the resume page less distracting. I don’t want my fancy background and glowing text to interfere with the concentration of someone poring over my resume.

Secure Contact Form

GitHub Pages is for static sites only (the user cannot interact any database). That means that I had to find a workaround in order to have an email form.

Thankfully, I found a service called Formspree. It took me less than a minute to set up and embed the form on my contact page. This form sends a post request to Formspree, which in turn sends me an email with the data.

Minimalist but functional

I stuck with the style from my resume page. I figured that I really only needed my splash page to have the “disco” feel to it.

I’m quite happy with this. I am limited to only 50 submissions per month with Formspree’s free plan, but I don’t expect that I will need to upgrade any time soon. I am also thrilled that I am able to discourage bots from abusing the form with a CAPTCHA prompt (unfortunately I didn’t take a screen shot of my test, and I do not want to waste my free submissions).

As far as security goes, I have to rely on Formspree’s data security. My website doesn’t have my email anywhere on it, so at least I can blame them if something goes wrong. 😺

En Fin

I’d like to take a moment to review my initial goals:

1. I will have a product that I feel proud of. Check.
2. I will gain knowledge in the three main languages for web design: HTML, CSS, and JavaScript (JS is a stretch goal). I give this a half check.
3. I will faithfully document this process for posterity. Sure…
4. The website will integrate my articles/blog posts. Half check.
5. The website will display some form of my curriculum vitae. Check.
6. The website will include a secure way for visitors to contact me without exposing my contact information (such as email) to robots or marketers. Check!
7. I’m going to hide one or more “flags” for curious visitors. 😁 Why don’t you see for yourself?

Overall, I am happy with what I’ve done so far. My website will be a continual work in progress. In the future, I hope to one day figure out how to integrate Medium (but if it ain’t broke, then why fix it?) without too many headaches. I expect that at some point I’ll also jazz up the contact page and resume page as well. One day I’ll probably do an entire overhaul of my website, but for now it’s time to put this project aside and move on to the next one.

If you look at my code and hate it, then let me know in the comments! If my story resonated with you, then let me know in the comments! If you ever want to get in touch, you can find me on LinkedIn or test out my fancy new contact page on CharlesTimmons.com.

I have not been incentivized to use any of the services mentioned in this article. They are just what suited me in the moment. Thank you for reading! I wish you all the best. ✨