DEV Community: Paul J. Williams

Connect GitHub Pages to Your Namecheap Domain

Paul J. Williams — Thu, 11 Jun 2020 20:35:12 +0000

Connect GitHub Pages to Your Namecheap Domain

This tutorial explains how to connect a custom domain registered with Namecheap to a GitHub Pages repository in GitHub.

GitHub Pages Setup
Namecheap Setup

1. GitHub Pages Setup

If you've not yet created a repository for your site, log in to your GitHub account and create a new repository. Name the repository <user-name>.github.io – for example, pauljwil.github.io.

If you already have your HTML, CSS, and JavaScript files prepared, push them to your repository and visit your site at <user-name>.github.io.

From your GitHub repository, click on Settings and scroll down to the second-to-last section called Github Pages. In the Custom Domain box, enter the domain you registered with Namecheap, and click Save.

Note that when you return to your repository's Code tab, a new file will have been created called CNAME. This file will include one line of code with the domain you added in the previous step – for example, pauljwil.com.

2. Namecheap Setup

If you've not yet registered your domain with Namecheap, do that now.

Once you've registered your domain, navigate to the Domain List and click on Manage to the far right of your domain name. From there, click on the Advanced DNS tab. Click Add New Record to add each of the following five records:

Type	Host	Value	TTL
CNAME Record	www	yourusername.github.io	Automatic
A Record	@	185.199.108.153	Automatic
A Record	@	185.199.109.153	Automatic
A Record	@	185.199.110.153	Automatic
A Record	@	185.199.111.153	Automatic

Click Save All Changes and delete any additional records that may conflict with those you've just entered.

That's it! It should take approximately 30 minutes for the changes to go into effect. Once they do, you will be able to access the content in your GitHub Pages repository from the custom domain you registered with Namecheap.

Link to CSS and JavaScript in an HTML File

Paul J. Williams — Thu, 11 Jun 2020 19:13:05 +0000

Link to CSS and JavaScript in an HTML File

The purpose of this tutorial is to teach you how to link to CSS and JavaScript files within an HTML file. It is possible to write CSS and JavaScript directly inside an HTML document, but it is generally best to keep these three languages in their own separate files.

Directory and File Structure
HTML
CSS
JavaScript

1. Directory and File Structure

It is a good idea to keep your HTML, CSS, and JavaScript files in separate directories. Create a directory for your project called css-and-js. Inside this directory, create three additional directories. Call them html, css, and javascript.

Inside your html directory, create a file called css-and-js.html. Inside your css directory, create a file called styles.css. And inside your javascript directory, create a file called script.js.

2. HTML

In order to link to your CSS and JavaScript files, you will need an HTML document within which to work. Open css-and-js.html and enter the following HTML:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Linking to CSS and JavaScript</title>
  </head>
  <body>
  </body>
</html>

Be sure to save your work any time you add code to your files. In the next two sections, we will go over what you need to add to your HTML document in order to link to your CSS and JavaScript.

3. CSS

First, you will need to add something in the body of your HTML to apply styling to. On the next line after the opening <body> tag, indent and add the following:

<h1>If this text is red, then you successfully linked your CSS file!</h1>

As it stands, this text will appear in the color defined as the root color in the browser’s default stylesheet – usually black. In order to change the color of the text, open your styles.css file and add:

h1 {  
  color: red;  
}

The final step in this section is to link to the CSS file inside your HTML document. Enter the following in the <head> section on the line after the closing </title> tag:

<link rel='stylesheet' href='../css/styles.css'>

The <link> element must be placed in the <head> section of the document. Notice that the <link> element is an empty element, so it does not need a closing tag.

The rel attribute defines the relationship between the resource and the HTML document. The href attribute points to your CSS file.

Since the file is located in another directory, you must specify the path by going up one directory using two dots (..), followed by a slash (/), the directory your CSS file is in (css), another slash, and then your CSS file name (styles.css): href=‘../css/styles.css’.

This is what your HTML document should look like so far:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Linking to CSS and JavaScript</title>
    <link rel='stylesheet' href='../css/styles.css'>
  </head>
  <body>
    <h1>If this text is red, then you successfully linked your CSS file!</h1>
  </body>
</html>

4. JavaScript

Next, you will need to add some code to your JavaScript file. Open script.js and add:

alert('You successfully linked your JavaScript file!');

Save your work and navigate back to your HTML document. The final step is to link to the JavaScript file inside your HTML document. Enter the following in the <body> section on the line after the <h1> element:

<script src='../javascript/script.js'></script>

It is considered the best practice to place the <script> element in the <body> section just before the closing </body> tag.

The src attribute points to your JavaScript file.

Since the JavaScript file is located in another directory, you must specify the path in the src attribute: src='../javascript/script.js'.

That's the last bit of code you will need to enter. This is what your HTML document should look like:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Linking to CSS and JavaScript</title>
    <link rel='stylesheet' href='../css/styles.css'>
  </head>
  <body>
    <h1>If this text is red, then you successfully linked your CSS file!</h1>
    <script src='../javascript/script.js'></script>
  </body>
</html>

Be sure to save your work in each of your three files. Now it's time to see if the links work. Open your css-and-js.html file in the browser of your choice. When you open the file in your browser, you should first encounter an alert box with the message you wrote in your JavaScript file. After clicking OK, the text you entered in the <body> of your HTML should appear red.

If the alert box does not appear or if the <body> text is not red, go back through the steps in this tutorial to ensure everything is entered exactly as shown here.

Congratulations! You've now linked to CSS and JavaScript files within an HTML document.

Basic Markdown tutorial

Paul J. Williams — Tue, 09 Jun 2020 21:57:20 +0000

Basic Markdown Tutorial

Markdown is a lightweight markup language. It uses simple and intuitive elements to format text, making it easy to use and to read. This tutorial includes enough syntax to get started using Markdown.

Headings
Paragraphs
Line Breaks
Emphasis
Blockquotes
Lists
Code
Horizontal Rules
Links
Images
Escaping Characters
HTML

1. Headings

Markdown recognizes six levels of headings. Make headings by preceding them with between one and six hashes (#):

# Heading Level One
## Heading Level Two
### Heading Level Three
#### Heading Level Four
##### Heading Level Five
###### Heading Level Six

The formatted text will look like this:

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

Heading Level Five

Heading Level Six

2. Paragraphs

Make separate paragraphs by including a blank line between them:

This is a paragraph.

This is another paragraph.

The formatted text will look like this:

This is a paragraph.

This is another paragraph.

3. Line Breaks

Make line breaks by adding two or more spaces to the end of a line:

This is a line of text followed by two spaces.  
This is another line of text.

The formatted text will look like this:

This is a line of text followed by two spaces.
This is another line of text.

4. Emphasis

Bold

Make text bold by surrounding it with two asterisks on each side:

This is an example of **bold** text.

The formatted text will look like this:

This is an example of bold text.

Italics

Make text italicized by surrounding it with one asterisk on each side:

This is an example of *italicized* text.

The formatted text will look like this:

This is an example of italicized text.

5. Blockquotes

Make a blockquote by adding a greater-than sign (>) in front of a paragraph:

> This is an example of a blockquote.

The formatted text will look like this:

This is an example of a blockquote.

6. Lists

Ordered Lists

Make ordered lists by adding a number followed by a period and a space before each list item:

1. The first list item must start with a one.   
7. Subsequent list items may start with any number.
    1. Add nested list items by preceding them with a tab or four spaces.

The formatted text will look like this:

The first list item must start with a one.
Subsequent list items may start with any number.
1. Add nested list items by preceding them with a tab or four spaces.

Unordered Lists

Make unordered lists by adding an asterisk and a space before each list item:

* This is the first list item.
* This is the second list item.
    * Add nested list items by preceding them with a tab or four spaces.

The formatted text will look like this:

This is the first list item.
This is the second list item.
- Add nested list items by preceding them with a tab or four spaces.

7. Code

Insert code into your text by enclosing it in backticks (``):

`This is a line of code.`

The formatted text will look like this:

This is a line of code.

Code Blocks

Insert code blocks by preceding each line of code with a tab or four spaces:

    These are
    multiple lines
    of code.

The formatted text will look like this:

These are
multiple lines
of code.

8. Horizontal Rules

Make a horizontal rule with three or more asterisks, dashes, or underscores:

***
---
___

The formatted line will look like this:

9. Links

Make text into a link by surrounding it in brackets followed by the URL enclosed in parentheses:

John Gruber's original guide to Markdown can be found [here](https://daringfireball.net/projects/markdown/).

The formatted text will look like this:

John Gruber's original guide to Markdown can be found here.

10. Images

Add an image with an exclamation mark (!) followed by the alt text in brackets and the path or URL to the image in parentheses:

![Portland Bridges](https://dev-to-uploads.s3.amazonaws.com/i/yzam5hhx8968oiaf3q40.jpg)

The formatted image will look like this:

11. Escaping Characters

Make a character display that would otherwise be used to format text in Markdown by preceding the character with a backslash (\):

\*Without the backslashes, this text would render in italics.\*

The formatted text will look like this:

*Without the backslashes, this text would render in italics.*

12. HTML

Use HTML in your Markdown-formatted document by enclosing the relevant text in HTML tags:

This sentence uses both **Markdown** and <strong>HTML</strong>.

The formatted text will look like this:

This sentence uses both Markdown and HTML.

DEV Community: Paul J. Williams

Connect GitHub Pages to Your Namecheap Domain

Connect GitHub Pages to Your Namecheap Domain

Contents

1. GitHub Pages Setup

2. Namecheap Setup

Link to CSS and JavaScript in an HTML File

Link to CSS and JavaScript in an HTML File

Contents

1. Directory and File Structure

2. HTML

3. CSS

4. JavaScript

Basic Markdown tutorial

Basic Markdown Tutorial

Contents

1. Headings

Heading Level One

Heading Level Two

Heading Level Three

Heading Level Four

Heading Level Five

Heading Level Six

2. Paragraphs

3. Line Breaks

4. Emphasis

Bold

Italics

5. Blockquotes

6. Lists

Ordered Lists

Unordered Lists

7. Code

Code Blocks

8. Horizontal Rules

9. Links

10. Images

11. Escaping Characters

12. HTML