12/18/2016 Progress

1. I spent a good chunk of time today looking at wireframing tutorials, different programs, and determining what is best for my skillset. I didn't like Sketch but found Mockplus to be very intuitive. However, I still think that design on a 960.gs printed PAPER is more freeing for me. I don't have clients to present to and I just need a way to quickly place my thoughts and ideas.

2. I also read about how to make sure CSS files are set up (organization!) so that they are easier to read through. (http://hackhands.com's 70-Expert Ideas-For-Better-CSS-Coding/)

There seems to be a way to be more modular in separating/organizing CSS and JS files, then combining them into one big file (Grunt, Gulp) so that the page loads faster?

Master Stylesheets- When I downloaded Boilerplate Template it seemed to have a "normalize.css"- this is what removes browser inconsistencies? I watched TeamTreehouse's "Applying Normalize.css Browser Reset CSS" online video. I can link it in my html file above my main.css file.

3. BROWSER SYNC
Aha moment! I finally figured out why Browser sync wouldn't load my index.html live! It turns out that I have to dc into the correct file, make sure that my html files aren't nested within a million other folders, and then call browser sync in the command line using: browser-sync start --server --files "*.html, css/*css" which calls for all html and css files. Make sure to keep command line open! Otherwise it won't load and I will get an error message when I try to manually reload.

Now I can split screen my html and how it looks in real time and save time not having to press refresh (just Ctrl + S) hehe.

4. ICONS:
 I want to place some icons into my portfolio page: perhaps some visual cues for where to find my projects.

www.flaticon.com has free icons. You can edit the colors to match with your existing theme colors. Remember to credit the author!

FOR FAVICONS- http://www.faviconer.com/ will convert the .png to .ico for you to place the favicon (this goes next to webpage's title on the browser tab)

5. CENTERING IMAGES (and other such things, even text!)

https://www.w3.org/Style/Examples/007/center.en.html#vertical

I used this guide to center my "github" icon inside of my first (left-most) column.

This is also the way to center an image: make it into block of its own and apply the margin properties to it. For example:

IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

Centering means that we want the left and right margins of the image to be equal (set to auto) and the image itself is made into a block element. 

I centered the mini title and text inside my column by  calling .section p inside of CSS and setting text-align: center;

Next, I wanted the image to be a link itself. I did that by nesting the <img...> inside of an <a href="link here"> </a>