Ellatronic
Design Portfolio

Blog

Posts tagged coding
Setting Up a Custom Subdomain with GitHub User Pages and Namecheap

I finally found a succinct guide to setting up a custom Namecheap subdomain with GitHub pages.

My objective was to redirect my GitHub user page ellatronic.github.io to my custom subdomain projects.ellatronic.com. This process was actually alot easier than the hours it took me to figure it out, mostly due to the new format of the Namecheap dashboard and the old format shown in other guides I referenced.

Log in to Namecheap, go to Dashboard > Domain List. Then click Manage on the domain you want. Click Advanced DNS, then under Host Records click Add New Record. Enter the following:

Type: CNAME Record
Host: the subdomain name, for me this is projects
Value: the GitHub pages URL, for me this is ellatronic.github.io. Namecheap will automatically add the last “.” if you forget it.
TTL: Automatic

Press the green checkmark to save the record.

Next, go to the GitHub user page repo (username.github.io), for me it is ellatronic.github.io. Add a CNAME file containing subdomain.domain.com, so mine is projects.ellatronic.com. Make sure CNAME is in all capitals. Do not put http:// before the subdomain.

Here's what the GitHub file looks like

Here's what the GitHub file looks like

CSS Basics: Selectors and Psuedo-Classes
  • Each linked stylesheet is a web request to the server, try to keep it at no more than 3 stylesheets. One or two is best.
<style>
    @import "css/import-styles.css";
</style>
  • Importing to css directly allows us to use multiple stylesheets and only link one CSS to the HTML.
* {
  margin: 0;
}

* is the universal selector, it selects all the elements on the page

  • Write type selectors in the same order as they appear in the HTML. This keeps things nice and neat.

  • There can only be one ID per page and an element can have only one ID.
<header>
    <span>Hello World!</span>
</header>
header span {
  color: blue;
}
  • A descendant selector is separated by a space. In the example above, <span> elements inside the <header> element will be colored blue.
     
  • A psuedo-class targets elements dynamically, based on user interaction and the element's state.
    • link history (style links)
a:link
  • user action psuedo-classes
a:hover
a:active
a:focus

:active get applied when an element is being activated by the user. Ex: the user moves the mouse to click a link or a button.

:focus is only applied to interactive elements link links, buttons, and form elements. Using the tab key will select these items and the user will be able to see the :focus styles applied to them.