I’m always looking for ways I can improve my skills and my workflow. I eagerly skim through tutorial articles and lists of little known tricks. I never know when someone will recommend a helpful plugin, a new hidden feature of a language I use, or some solution to a thorn in my workflow.
Now it’s my turn. In this post, I’ll break down the tools and plugins I use regularly, some handy code snippets, and my general process from design to deployment. Regardless of your skill level, my hope is you come away from this article with something useful you didn’t know before.
First things first, we need to know what we’re building. Even though I still will design in code sometimes, I find it’s much easier to iterate on ideas if it’s on paper or a design program first.
I prefer my final designs in Sketch. It’s easy to slice up, gauge measurements, and generally use if I’m ever looking to design something.
Sketch Image Compressor: This is a nice plugin that automatically compresses your exports (i.e. images). Although it’s no longer maintained, it still works well. It also doesn’t require any third-party software and works entirely within Sketch itself, which I prefer.
ImageOptim: The ImageOptim Sketch plugin is the recommended plugin from the old maintainer of Sketch Image Compressor. Although I find it compresses a little better, I still prefer the original as it’s integrated into Sketch, rather than this version needing to open up the ImageOptim app to compress.
https://compressor.io: This is a great little website I use frequently. It does a fantastic job compressing images. I normally run all my exported assets through here and it almost always shaves off a good chunk on top of what the plugins above already do.
When using Sketch, hold down the Option key while mousing over elements to easily see the spacing relative to other elements. It's easily my #1 most used hotkey.
I feel like many developers tend to over-complicate a process that can be relatively simple. There are some instances where utilizing Webpack or serving everything over a CDN is useful. But almost all of my clients looking for a simple website just want a something that’s snappy, works, looks good, and doesn’t go down or cost a lot.
If they need something more than that, that’s typically when I spin up a new Rails application or other appropriate framework. But for simple static webpages, I like to keep it straight-forward.
These are the applications that I use when programming almost anything. They’re light and fast, easily customized to how I like them, and my daily drivers.
It is important to note I use macOS, but all of these (with the exception of iTerm2) work on other operating systems.
My favorite text editor. It’s fast, it’s stable, and it’s easy on the eyes. I highly recommend giving it a try if you haven’t. You can easy edit any part of it, functionality or appearance, to your liking. In fact, I write all my blog posts in Sublime. It’s great.
Emmet:
An extremely helpful HTML expander. Write div, hit Tab, and it automatically adds the rest.
HTMLPrettify (and sometimes HTMLBeautify): Two nice code formatters. I find myself useing HTMLPrettify more, as it works with both CSS and JS, but occationally I find that when HTMLPrettify doesn’t format properly, HTMLBeautify will.
Libsass Build: I use this plugin to automatically compile my SCSS into CSS. I’ll go into this a little more later in the File Structure section below.
I was a very happy Terminal (the app) user for many years. And it’s still great. However, after discovering Oh My Zsh (more in a moment), I realized there were some limitations to how Terminal renders certain characters. I’ve since switched to iTerm2, and it’s been painless.
So these aren’t true plugins, but nice addons that I use often.
~/.p10k.zsh).
This is my browser of choice. Great developer tools, strong community of addons, and all around nice to use.
Sometimes I find that when doing a lot of page refreshes, Firefox will start caching the old site so I don't immediately see the updates I just did (I've seen this with Safari and Chrome too). To fix, hold down the Shift key while clicking on the Refresh button. It will force the browser to skip the cache and load a fresh page.
I use GitHub for my regular code repository. This desktop app is very useful to visually review changes and jump between multiple projects.
Every website is a little different, but almost all of the static websites I build starts with the same basic file structure. It’s sweet and simple and goes something like this:
website/
index.htmlassets/
imgs/js/fonts/css/
main.cssscss/
main.scss (where I include all the SCSS partials below)_global.scss_home.scssI mentioned earlier I use the Libsass Build plugin in Sublime Text. That’s a handy plugin that allows me to automatically compile my SCSS files into CSS and drop them in any directory I want. In this case, I simply compile it to the css/ directory. There’s also options to minify the CSS file, but I normally only do that when I’m ready to launch as it makes debugging harder.
This is also the time I will add additional frameworks. I mostly use my own vanilla CSS the whole time, or drop in just the grid from Bootstrap.
Here is my standard HTML boilerplate for index.html as well:
index.html<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./assets/css/main.css">
<title>Howdy!</title>
</head>
<body>
<h1>Howdy!</h1>
<!-- If you want to use jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="./assets/js/main.js"></script>
</body>
</html>
Now that I have my tools and my file structure in place, time to do the actual development. It’s mostly just me going back and forth between Firefox and Sublime.
I use TotalSpaces to quickly hotkey between desktops (I use Command + arrow key) so I can be in full-screen for both. It’s one of the first programs I install on my computer. But a fair warning that when you get used to it, you won’t be able to live without it.
Regarding the code itself, one thing I will do is breakdown the parts of the page into sections, broken out as CSS class wrappers. For example, if there’s a hero section, a body section, and a footer section in the designs, I’ll do the following:
index.html
<body>
<div class="hero-wrapper"></div>
<div class="body-wrapper"></div>
<div class="footer-wrapper"></div>
</body>
Then populate the code where appropriate. It helps with my CSS to keep my styles focused to specific areas. However, I highly suggest identifying elements (or components) that will be re-used and style them so they can easily be used anywhere.
A useful little CSS snippet I like to add to each site I build is around how the browser should render the text. It’s a subtle change, but on higher resolutions screens, it’s a noticeable improvement.
_global.scsshtml, body {
font-family: Open Sans, Segoe UI, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Finally, you have a beautiful website ready to be shared with the world. I deploy static sites typically one of two ways:
This is my go-to host. They’re great and offer way more options than necessary for a static site. For a simple static site, I recommend just doing their One-Click LAMP droplets (what they call servers). Then I just SSH in and pull from GitHub manually onto the server.
If you enjoy this tutorial and don't have a Digital Ocean account already, consider using this referral link. You get some $, and I get some $. It's a win-win.
I’ve only started using Netlify in the last year or so, but it makes deployments so easy. You just point it to your code repository, and every time there’s a change it redeploys for you automatically. Great for simple (and even not that simple) websites.
This is a little breakdown of some of the tools, techniques, and snippets I use when building a simple static website. Hopefully no matter what your experience, you found something useful to take away.
If you have anything that you like, let me know! I always am looking to improve my process in any way I can.
Happy development! 🎉