We did it! We created our very first website from scratch and we talked about some essential pieces of design like whitespace, typography, and color.
In this final tutorial we will quickly review everything we have learned so far about building a website and design, review ways to get our website on the Internet so that we can direct our friends and family to a web address, and touch a bit on some useful resources moving forward with our studies.
Don’t forget to ask any final questions in the comments section at the bottom of this page!
Recap
Let’s take a look at the series roadmap we took to get where we are now.
Foundation & Preparation
We started this series by addressing how the web works. In order for two different computers to talk to each other they must both be connected to the Internet through an ISP (Internet Service Provider).
To allow other people to review our site on the Internet these site files must be transferred (moved) to a server; a special computer with direct access to the Internet. We will review this more in a section below.
Our role on the Internet is that of a web designer. It’s our job to make sure a site looks delightful and is super easy for our users to read and navigate.
With these goals in mind we set out to start building our Tuts+ Town site with HTML and CSS after drawing up some fantastic sketches on paper. In order to prepare for this part of the process we had to learn all about file naming and organization.
We now know the main HTML file is always called index.html and whether images are located in their own folder or not impacts the src attribute in our HTML.
Finally, we selected a text editor and were officially prepared to start writing some HTML and CSS files!
Building a Website With HTML & CSS
To build our Tuts+ Town site we first established our HTML structure and then plugged in the content.
This structure was made up of several elements nested within a primary html element and having this foundation in place made plugging in the content much more straightforward.
Once the content was in place we could begin styling everything with CSS. First, we needed to link the two documents together in the HTML head:
In our CSS document we were able to declare colors, sizes, layout, and more on elements within the HTML document, eventually leading to the completed site design.
Images
This section of the series finished with a tutorial discussing the different image formats available to us. We talked about including them in our HTML and some effects we can apply to images with CSS, such as changing their opacity:
As mentioned, all the images used throughout the Tuts+ Town series are SVGs, meaning they can be resized without losing quality and be easily edited.
Design Basics
After we created our site we reviewed the basic design concepts that helped form the look, feel, and usability for the site.
Content is the most important part of web design, so after establishing that our content is useful, needed, and well organized we moved onto visuals.
Visual hierarchy was established for the site through varying font sizing, colors, and whitespace, much like the balloon above is designed to be the dominant object in the image.
Typography
Typography is everywhere we see written words and is one of the most important parts of web design. Our users need to be able to read our content but we also need to make sure the font(s) we choose match the tone and feel of our content and visual design.
Color
This section of the series concluded with a tutorial on color–theory, the meaning of certain colors, different color systems for the web, and how to select a successful palette.
Referring to the primary and secondary color wheels helps us better understand how certain colors are created and why some colors may look good together while others do not.
Now, let’s walk through how we would go about getting our site on the web!
Getting Files On the Web
As we discussed in the beginning of this series, this site lives locally on our individual computers and not on the Internet. At this point we cannot direct friends and family to an address on the web, so they cannot yet view our amazing work.
As we discussed in the Introduction tutorial, files need to live on a server in order for others to view them on the Internet.
Quick Note Moving Forward
The process of getting a site on the internet can often involve making a purchase and having an email address. If you are too young to have access to either of these it’s best to have an adult with you for the following section.
Hosting
There are a number of services that will help host our files for us, making them accessible on the Internet. For this series we are going to focus on hosting through NeoCities and the basic concept of domain names.
NeoCities
NeoCities is a fantastic and free option for straightforward file hosting on the web; though we do still need an email address to register!
Let’s walk through the steps to get our files hosted here:
To sign up we need to select a username (the site name) and enter an email. At this point we’ll want to name the site something different from what has been created below, as all site addresses have to be unique. For example, instead of tutsplustown as a username you could choose something else that is available or add your name, janetutsplustown (again, only if this is available and not already taken by another NeoCities member). The site will live at (username).neocities.org
Once we are all signed up we can select the big red “Edit Site” button at the top right corner of the screen.
We will then be taken to a file dashboard where we can add files and folders. We will want to upload two files: the HTML and CSS files for the site and then create one folder: images. Within images we will add the four image files.
Once the files are transferred our site has been officially hosted with NeoCities! There will be a link to the live site address at the top of the page.
Here’s a look at the site on NeoCities: tutsplustown.neocities.org
Another benefit of this service is that we won’t need to go through the domain (the customized address for sites) purchase and setup process, though we will touch on how to do this next as well.
Important! It is possible to use a custom domain name with NeoCities by going into the site’s settings after initial setup and following the instructions there; though this currently requires an upgraded account for $5.00 USD monthly.
Domains
Domains are those custom addresses we refer people to so that they can visit a site. This step was not necessary when we hosted our site files on NeoCities because it created a special Neocities address for us. However, if we are looking to have a truly custom domain name (such as tutsplustown.com for example) we will have to purchase this name.
As with our NeoCities username, our domain name will have to be unique as well; it may take some time to find a name that is not already taken.
Here are a couple of services that allow us to purchase domain names once we create an account:
I Want My Name
Name Cheap
The final step to set up a custom domain can be completed through the hosting service (like Neocities or BitBalloon mentioned below) once the files are transferred.
More Hosting Options
If we choose not to use NeoCities there are a few other hosting companies that stand out for being especially affordable and easier to use, but perhaps the one that stands out the most for these reasons is BitBalloon.
BitBalloon is free to try but requires payment to include a custom domain, much like NeoCities. The ease in which files can be dragged and dropped into the interface makes this a pretty exciting option for basic sites like Tuts+ Town.
Once the files are transferred we can complete the custom domain setup process through the tools within the BitBalloon dashboard.
Our Tuts+ Town Domain
Our Tuts+ Town site has its very own site address that was obtained and set up similar to the way we just reviewed: tutsplustown.com.
What’s Next?
While this series provided an introduction to web design we may quickly end up wanting to advance our skills once we practice, practice, practice the topics we reviewed here.
More HTML & CSS
The book “Build Your Own Website, A Comic Guide to HTML, CSS, and Wordpress” by Nate Cooper provides a solid foundation to creating a site through a fun story told in a comic format.
Shay Howe has written as series of in-depth tutorials on both beginner and advanced level HTML and CSS:
HTML & CSS for Beginers
Advanced HTML & CSS
Responsive Design
Responsive web design refers to designing sites that take different screen sizes into account. We spend a lot of time on our smartphones, for example, and as designers we need to make sure our site works on these smaller screens as well as a full size desktop screen.
There’s a fantastic beginner tutorial by Shay Howe on the topic.
Units of Measurement
We used pixels throughout this series as a unit of measurement on the web. Using pixels is perfectly OK when getting started, however, the more experience you get the more you will realize how limiting they are. It’s such an inflexible unit of measurement that does not perform well in responsive design.
In terms of designing across different screen sizes there are several alternatives that will be more flexible than pixels, such as percentages and rems.
Layout
While we briefly discussed flexbox in the CSS Layout tutorial there is a lot more we can accomplish with layouts using it. There are a couple of super places for learning more, like this Complete Guide to Flexbox and a Flexbox Cheatsheet diagram.
Concerning layout as a whole and not just flexbox, there’s a neat little site that helps walk us through the basics.
Farewell!
While there is much more we can learn to strengthen and grow our web design skills, we have accomplished so much throughout this series and now have a much better understanding of the basics for both designing and building a site.
We officially brought a website to life from sketches on paper to a real site with its very own web address; all in the day of a web designer!
Our Tuts+ Town website will serve as a beautiful, easy to use guide for tourists considering visiting, so thanks for all your hard work.