Deploy a Static Site on Github

December 17, 2022December 18, 2022

The following tutorial shows how to deploy a static site using Github Pages. This assumes you already have a Github account, have added code to the repository, and have a file called index.html in the root directory.

Click Settings

Click Pages

Set it up

For source, select Deploy from a branch
Under Branch, select main and choose the root directory
Click Save

View it live

It can take a few minutes, but once it is ready, the link to your live site will show near the top of the Page. Click the link and check it out.

The Case For External CSS

July 20, 2022March 31, 2023

SCENARIO 1: REPEAT, REPEAT AGAIN

You start writing some html for a single web page. You add some inline styles to a p tag. You add a second p tag and have to type out the same inline styles to keep them consistent. The same thing happens with your headings, links, images, etc. You finish your single page site and get it live. A month later, you decide you want to change the color of your headers. You go from element to element updating the same code multiple times. You start to realize there is probably a better way to do this.

SCENARIO 2: A BETTER WAY

You start writing your html for a single web page. You add the style element to the head element. You add the p selector and declare some styles. These apply to all your p tags on the page. This is so much better. A week later, you decide to add another page to the site. You copy and paste the style element from one web page to the other to keep the styles consistent on your site. You add another page a few days later and have to do the same thing. A few weeks later, you decide to change the color of your headings. So, you go into all of your pages and update the same code in multiple places. You begin to realize there is probably a better way.

SCENARIO 3: THE BEST WAY

You begin writing your html for a single web page. You create a second file called styles.css which you pull into your html file using a link element. You begin adding styles for all your headings, p tags, links, images, etc. A week later you add another page to the site. You link it to the same styles.css file. A few week later you add another page to your site and utilize the same styles.css file. A month later, you decide to change the color of your headings. You go into styles.css and adjust the code. The changes are applied to all your web pages.

THE MORAL OF THE STORY

Use an external style sheet. This is considered best practice amongst most developers for the following reasons:

A single style sheet can be used for multiple web pages
Updating a style for the entire site only requires a change in one file
The HTML is cleaner and easier to read

Web Design Basics

June 5, 2022June 5, 2022

Much could be said about modern web design. Courses have been written and videos produced. Here, I give a quick overview of some basic concepts of good web design.

Clear Purpose

Good web design begins with the user in mind. Whether trying to convey a message, attract customers, make a sale, or provide a useful tool, the page should meet the need of the user in the most effective and efficient way possible. Start with a clear purpose in mind and stick to it. Don’t clutter the page with different types of content that makes it confusing for the user.

Clear Communication

Communication can take many forms, and will differ depending on the site, but there are some principles to keep in mind that will help deliver the message more effectively. Organize information in a meaningful way. Utilize headings, sub-headings, and paragraphs. You see this on most blogs and news sights. Different fonts, font-sizes, and font-weights are used to differentiate between the different elements.

Another way to communicate clearly is to use bullet points, icons, and images. People searching the web often want to find things quickly and won’t always read through long paragraphs. Use bullet points when appropriate. Icons have become a standard. Use icons that are obvious or intuitive to the user, such as a home icon or a back arrow.

Readability

Use appropriate typefaces/fonts. There are many different fonts and styles out there. Some look very unique and may have their place, but be aware that certain fonts are easier to read than others and think about whether or not the fonts you are using will be accessible to all. Typically sans-serif fonts are easier to read, such as Arial and Verdana.

Be aware of text and background contrast, especially when the text is over an image that has a variation in brightness or color. For example, white text over an image can often be difficult to read if the image has a light area.

Navigation

Users should be able to navigate your site with ease. If your site consists of multiple pages, there should be clear navigation. This can be done in a number of ways, such as, with a navbar, breadcrumbs, or clickable buttons. The easier it is for users to find what they are looking for, the less likely they are to get frustrated and leave your site. In general, users should be able to get where they want to go in three clicks or less.

Inspecting Source Code in the Browser

January 9, 2021February 2, 2021

All modern browsers have developer tools that allow you to inspect the source code. For example, if you want to see what the HTML looks like on Google’s search page, you can open the inspector and take a look. Here is how to do so in Chrome.