Build Your First Website — Like A Programmer (Part 3)

https://stocksnap.io/photo/SCC00WCQ3I

This is the last official part of this tutorial series. We will be looking at creating our landing page! This part will focus on HTML and SASS and show you how to piece together a good looking website. Take a look at the other two parts if you missed them (1 & 2).

Let’s start off by setting up our SASS compiler. SASS is a decorator language for CSS, it adds syntactic sugar to make writing CSS a little less painful. My favourite compiler is Compass which is what we will be using here. To install compass make sure you have Ruby installed on your machine. Then head over to your trusty terminal and do

> gem install compass

In some cases it may require sudoers permissions.

Setup a new git branch to work in:

Make sure that you are on the develop branch by doing

> git checkout develop

Then, with Git Flow

> git flow feature start frontend

Without Git Flow

> git checkout -b feature/frontend

Now go into your project directory either in Atom or in the terminal and create a file in the root called config.rb. The aforementioned configuration file will tell compass where and how to output our css files. Take a look at the file below as a basic compass configuration file:

require 'compass/import-once/activate'
http_path = "/"
css_dir = "public/stylesheets"
sass_dir = "assets/scss"
images_dir = "public/img"
javascripts_dir = "public/js"
output_style = :compressed

ericadamski/build-own-website

Now go and open up the _default.scss file which we created in Part 2 of this tutorial. This is where we will define things like breakpoints, base colors, font styles and other variables we want to keep consistent throughout our site.

Let’s start off by defining some colours, font sizes and breakpoints.

/* Colours */
$black : #0C090D;
$red   : #E01A4F;
$orange: #F15946;
$yellow: #F9C22E;
$blue  : #53B3CB;
/* Font Sizes */
$large : 6em;
$medium: 3em;
$small : 1.5em;
/* Breakpoints */
$xlarge: 250em; /* 4K */
$large : 120em; /* HD */
$medium: 76.5em; /* Avg Desktop */
$small : 48em; /* tablets */

ericadamski/build-own-website

All colors were chosen thanks to https://coolors.co/

All of our breakpoints are based on the mobile first style of development, which is why you don’t see a size smaller than general tablets.

Notice that each of these definitions are prefaced with a ‘$’, that defines a variable in SASS, it is a little nicer than using standard CSS variables. You might have noticed that we have also marked the file with an underscore (_) at the beginning, that tells compass not to compile and output the file as a separate css file.

Let us get into the real meat of things. For simplicity sake we are going to use Bootstrap 4 (in alpha) to save us some development time. First we have to include the stylesheets into our website. To do so open up index.html and replace it with the file below.

ericadamski/build-own-website

Go and checkout the work that you have done by going into your terminal and typing

> npm run dev

Then head over to your browser and check it out!

Now that we have a skeleton we can make it more like our own! Let’s restyle some of the elements to include our colours and make the landing page feel more YOU.

Let’s start by creating a file called home.scss inside our assets/scss folder. After you have done that, here is what the directory (folder) structure will look like

<your-username>.github.io/
│
├── .gitignore
├── package.json
├── app.js
├── config.rb
├── views/
│   └── index.html
├── public/
│   └── img/
│       └── favicon.png
├── assets/
│   └── scss/
│       ├── home.scss
│       └── _default.scss
├── router/
│   └── index.js
└── bin/
    └── www

Open up the home.scss file and let’s change the colour of the nav links in the header.

@import '_default';
.nav-item {
  color: $blue;
}

Now that we have written some SASS (SCSS to me more specific) we have to compile it into css and include it in our index.html file.

First open a terminal head to your project root directory (<your-username>.github.io) and do

> compass watch

This will watch all the scss files in the location specified in config.rb and compile them into css and output them every time there is a change. Next open up index.html and input this line in the head:

<link rel="stylesheet" href="stylesheets/home.css">

This includes your static resource (the stylesheet) and applies it to your site. Reload your website (or restart the server by doing npm run dev) and take a look at your new creation!

Take a look at the finished product here!

That’s it, you know have a basic template webpage hosted and hackable. Let me know if there are any details I missed that you would want to cover on either the backend or the frontend.

I will be completing this series with Part 3 1/4 which will deal with gulp, optimizing load time and SEO.