Footer For All of My Projects

Each project I do needs the same footer. So instead of having to reinvent the wheel, I can use this resource to always have access to consistent footer content.

Each footer consists of three parts:

  1. Copyright
  2. Link to my Social Media
  3. Link to the project source code

Copyright

    <p>
        Created by Greg McKelvey &copy;
        <script type="text/javascript">
            document.write(new Date().getFullYear());
        </script>
    </p>

... gets rendered as...

Created by Greg McKelvey ©

Everytime the page is loaded, the script gets date of the current year

Links to my Social Media

    <a href="https://twitter.com/Whyisbecause" target="_blank">
        <i class="fab fa-twitter"></i>
    </a>
    <a href="https://www.facebook.com/whyisbecause" target="_blank">
        <i class="fab fa-facebook"></i>
    </a>
    <a href="https://github.com/mckelveygreg" target="_blank">
        <i class="fab fa-github" aria-hidden="true"></i>
    </a>
    <a href="https://www.freecodecamp.org/mckelveygreg" target="_blank">
        <i class="fab fa-free-code-camp"></i>
    </a>
    <a href="https://codepen.io/mckelveygreg/" target="_blank">
        <i class="fab fa-codepen"></i>
    </a>
    <a href="https://www.linkedin.com/in/greg-mckelvey-6b0125153/" target="_blank">
        <i class="fab fa-linkedin"></i>
    </a>

... get rendered as...

Each <a> has an attribute of target="_blank" that will open up a new tab when clicked

Each link also uses a Font Awesome icon with the <i> tag

Link to Project Source Code

    <p>View
        <a id="sourceURL">Source Code</a> on GitHub!</p>
    <script type="text/javascript">var sourceURL = "https://github.com/mckelveygreg" + window.location.pathname;
        var sourceA = document.querySelector('#sourceURL');
        sourceA.setAttribute('href', sourceURL);
    </script>

... gets rendered as...

View Source Code on GitHub!

Tools I've Found Helpful

Favicon Generator

Here is a list of a few favicon generators I have found useful:

<li> Generator

For my freeCodeCamp Product Landing Page project, I needed to insert a large list of bullet pointed features. Not wanting to type tons of <li> tags, I found this handy generator:

http://www.limaker.com/

HTML Escape Generator

For this technical documentation page, I needed a way to paste raw HTML code without needing to manually replace tags with escape characters.

https://www.freeformatter.com/html-escape.html

Font Awesome

Font Awesome has been a wonderful tool for providing all of the icons in my footer. I have started to just use the CDN version, as it is easier to implement quickly on each page.

VS Code Shortcuts

VS Code has been my main text editor. Here is a list of shortcuts that have been handy enough to write down:

  • ctrl + /: comment line or block
  • alt + shift + f: format whole document
  • ctrl + d: select next occurance
  • alt + w: wrap selection with html tag. Uses the extension htmltagwrap
CSS Battles

CSS has given me its fair share of grief, so here is a reference to solutions I don't want to battle again...

Centering Stuff

Centering elements horizontally

.center-div {
    margin: 0 auto; 
}

This will set the top and bottom margins to 0 and split the difference on the left and right margins

Centering text horizontally

.center-text {
    text-align: center;
}

This one is thankfully more intuitive, but will propagate itself throughout the containers children... for better or for worse

Centering a group of elements

.container-of-elements {
    display: flex;
    justify-content: center;
}

I have found it helpful to start with this code and then dive into your browser dev tools to explore all the different options like : space-around, space-between, etc.

Sticky Navbars

I have 2 approaches to sticky navbar

position: sticky

This seemed to work on horizontal navbars, with top= 0px

position: fixed

I had trouble inside of grid layouts and resorted to using position: fixed. In order for it to flow well, I had to coordinate grid sizes so there wasn't any overlap.

Resources

Here is a list of resources that have been helpful so far on my journey