
Apart from modeling, data scientists spend a lot of time writing. They write to communicate insights, they blog, and they tweet. The number of topics in the domain of data science is exceedingly vast. From NLP to facial recognition, from predicting customer churn to detecting rare deep space events, the bounds of focus are without limit. However, most data science experience involves Python and data collection: rarely do data scientists deal with HTML, CSS, and JavaScript, the so-called web dev languages. Ironically, this lack of design experience limits the reach of data scientists who might otherwise display their projects in a beautiful portfolio or blog. In reality, making your own data science website or blog is quite easy, despite the upfront fear of CSS and HTML, to such a degree that you can learn all you need in a few days to produce a beautiful personal website.
There is a truly baffling amount of resources to make your own website, whether for personal or company use, and even more truly baffling amount of tutorials on how to make them, and this is one of them!
My hope with this post is to provide a clean, up-to-date, minimal guide for making a website with little-to-zero knowledge of HTML, CSS, or JavaScript.
The most confusing parts of web development aren’t even HTML or CSS. With Google and Stack Overflow, the tricks and tools for modifying a webpage’s appearance are relatively straightforward. Rather, the difficulty comes from understanding how the technologies weave together, and what abstractions make up a ‘website.’
This post will walk through the three main abstractions of a website:
- HTML, CSS, and JavaScript, and the reason why you shouldn’t worry about them.
- Hosting. Where does the content of your page actually live?
- Domain name. How do you get to that page via a traditional custom ‘.com’ name?
Step 1: HTML, CSS, and JavaScript
Here’s a quick overview of what they do, just for a basic understanding or refresher.
HTML…
is ‘hypertext markup language’, and it’s just used for laying out the building blocks of a webpage at the most basic level. All the tags you see like <p>code stuff</p>
are HTML, and even right-clicking this page you’re reading and clicking ‘Inspect’ will open your browser’s editor to show you the immediate, backbone layout of the page. HTML mostly concerns big chunks of a webpage in terms of rectangles. HTML has nothing to do with style, color, or interactivity. Its code isn’t really functional, or strictly-speaking programming. Rather, HTML is the bricks underneath the paint. You can’t style it or interact with it, but you can paint it (CSS) and add doors and windows (JavaScript) later.
CSS…
is ‘cascading style sheets’, and it relates to appearance and style. It concerns different font families, different font sizes, colors, opacity, layering, and shape alterations. It may seem like the most surface level aspect of design, but CSS actually does quite a bit of heavy lifting for user-experience. Even the best under-the-hood design and functionality (driven by JavaScript) is useless without an intuitive feel driven by clever CSS utilization. Whenever you hover the cursor over a ‘thumbs up’ icon on social media and it changes color or size, that’s the unconscious power of CSS driving a sleek and and satisfying user experience.
JavaScript…
is the actual bona-fide ‘programming language’ of the trio. A programming language is generally a title reserved for functionality and interactivity due to the context of interconnected abstractions, and JavaScript handles those abstractions in the form of functions and data flow under the hood of a website. Whenever a user clicks on a button, fills out a form or a search bar, or clicks on a link to another page, invisible scripts must be run to handle the intended effect. These come in the form of basic functions, as well as classes and objects.
All three of these things…
are things you shouldn’t worry about for building your own website! Unless you’re a master web developer or building a website from scratch for the challenge, you can pick up the tutorial-free basics of HTML, CSS, and JavaScript up as you go, and this is possible because of templates.
What is a template?
It’s a pre-developed codebase of HTML, CSS, and JavaScript with a simple enough backbone to alter intuitively. A lot of intro programmers might perceive this as cheating at first, because it doesn’t feel like you’re building your own brand or putting in the effort. But it’s crucial for the learning process, because HTML and CSS are best learned top-down. Tutorials just don’t provide the personal investment necessary to learn.
Formal tutorials provide structured knowledge, but building your own brand is a fundamentally messy and idiosyncratic process, and learning the basics of HTML tags and CSS rules will stick much better by using a beautiful template, and making small alterations as you go. First change the
tags to see what changes, and you will pretty quickly obtain a personalized, if stylistically unoriginal, website. Start altering some CSS rules to see how colors and fonts change, and pretty quickly you’ll have developed your own stylized website. Learning is always a process of interconnected experience, and using a template is the fastest way to learn.
Use Google to find ‘free html5 templates’ or ‘free responsive html templates 2020’, etc. There are endless options, so just pick one that looks nice and simple. I used HTML5 UP, a Creative Commons free template base, but any of them will be more or less the same. Github Pages is also integrated with Jekyll themes, another free template source, and because hosting (see Step 2) on Github pages is free, Jekyll is a great option for building a quick blog or personal website.
Once you’ve downloaded a template or theme, open up the file base as a new project in your favorite code editor, which should probably be Visual Studio Code, and start tinkering! The index.html
file contains the HTML, the building blocks where you can mess around with text and structure, and the main.css
file contains the CSS rules. Just play around and pretty quickly you’ll see how much you can do without any tutorials. Open up the index.html
file (which should open by default in your browser) to preview it, and then trial-and-error for hours by making small alterations to observe which code changes produce which visual changes. Then, only use tutorials or guides once you understand the context of your confusion enough to judge whether a tutorial will be worth it. Most of the time, a long sequence of quick Google/Stack-overflow solutions is all you really need to learn.
Step 2: Hosting
This is a relatively simple step. Most of the effort behind building a website involves getting a webpage to look good, and a lot of that work is CSS. Once that’s done, you just have to find a place for that code to live ‘in the wild’. If you want your website to be accessed from anywhere, anytime, then you should take advantage of any major free hosting service on the web. The standard free hosting location is Github Pages for smaller websites such as blogs and personal websites, and the process of setting it up is straightforward. It pretty much involves creating or initializing a repository on Github with the code on your computer (in the project directory you used in Visual Studio Code, for example), making it public, and setting up Github Pages in ‘Settings’. In ‘Settings’, scroll down to ‘Source’, and select ‘master branch’ in order to make the HTML code in that repository visible at: your_username.github.io/your_project_repository_name
For example, if my Github profile name were bluepanda
, and my website repository was named bamboo
, and Github Pages is enabled in the manner above, then after a short delay the URL bluepanda.github.io/bamboo
should display your website! A good Github Pages guide is here, though the documentation is always helpful for an up-to-date guide.
Step 3: Domain Name
How do you finally get your website set up at a custom domain name such as bamboo.com
, rather than the slightly awkward bluepanda.github.io/bamboo
?This step is quite quick and easy, but a little strange and intimidating due to how complex configuring DNS settings feels. First, you’ll need to look for a domain name provider! This will cost money, but usually on the order of $8–$12 a year. It’s as simple as searching for your custom desired domain such as bamboo.com
on your provider of choice (a quick Google of ‘domain name providers’ should suffice to provide the main big ones, but they’re all basically the same), and then paying!
Then comes the DNS settings, and it’s the trickiest part. The important thing to know is that it’s easy to do, and you can worry about understanding it later. In the meantime, it’s definitely worth just following the documentation step-by-step. The steps merely involve getting a CNAME
file added to the repository by adding your custom domain name (such as bamboo.com
) in the Github Pages settings, as well as setting up an A
record with your DNS provider. A little Googling may be useful here if you run into confusion, but Github’s documentation for setting up a domain name is pretty good.
And that’s it! Using an 1) HTML template, 2) Hosting it on Github Pages, and 3) Registering that repository with a custom domain name are all of the steps to creating your own website! Even if you’re already quite experienced with some of the steps in this guide, I hope it’s been useful to see how all the steps connect, since I’ve found that rarely are Steps 1–3 in this guide integrated together in one Tutorial.
Thanks for reading!