From e201cc4b71fad450fd7193bcdd15b561d8e394c8 Mon Sep 17 00:00:00 2001
From: Micah Cowell <micahcowell99@gmail.com>
Date: Thu, 17 Mar 2016 21:49:08 -0700
Subject: [PATCH] were live

---
 _data/navigation.yml                      |  3 +++
 _posts/2016-03-17-things-i-wish-i-knew.md | 21 +++++++++++++++++++++
 _sass/_config.scss                        |  3 +++
 assets/css/main.scss                      | 17 ++++++++++++-----
 4 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 _posts/2016-03-17-things-i-wish-i-knew.md

diff --git a/_data/navigation.yml b/_data/navigation.yml
index ffde3bd..6e3bb3a 100644
--- a/_data/navigation.yml
+++ b/_data/navigation.yml
@@ -4,6 +4,9 @@
 - title: about
   url: /me
 
+- title: contact
+  url: mailto:micahcowell99@gmail.com
+
 - title: github
   url: https://github.com/getmicah
 
diff --git a/_posts/2016-03-17-things-i-wish-i-knew.md b/_posts/2016-03-17-things-i-wish-i-knew.md
new file mode 100644
index 0000000..468eef7
--- /dev/null
+++ b/_posts/2016-03-17-things-i-wish-i-knew.md
@@ -0,0 +1,21 @@
+---
+layout: post
+title: Web Development Tips for Beginners
+---
+
+In this post I'm going to tell you all the things I wish I would have known when I first got into making websites. The sort of things that won't make you a better coder but instead save you time and sanity.
+
+# Use Github Pages
+Hopefully you are already using Github, if not go sign up and start using version control on your projects. With Github Pages you get a free domain (username.github.io) and free hosting. I explain this in more detail in this [post](/2016/03/10/ghost-to-jekyll.html).
+
+# Backup Everything
+Every website you make should be kept safe somewhere, especially if it is for a client. Ideally you would keep it on Github and implement version control in your project. Dropbox and external hard drives are good too, just make sure it won't accidentally get deleted.
+
+# Hate Bootstrap
+Seriously, don't use it. It makes you dumb and doesn't force you to come up with solutions on your own. Copying and pasting someone's css is better than blindly assigning HTML classes for Bootstrap. This applies for any css framework.
+
+# Style with Sass
+I have no idea why anyone would prefer normal css over [Sass](http://sass-lang.com/). It makes for cleaner code and has tons of features. Installing Sass is easy and so is using it. It really is CSS with superpowers.
+
+# Use a Build System
+This is what really got me coding much faster. A build system is something that automates tasks that you repeatedly do every time you update code (i.e. sass, lint, etc). [Gulp](http://gulpjs.com/) is my recommendation in this field though there is alternatives such as the popular Grunt.
diff --git a/_sass/_config.scss b/_sass/_config.scss
index 3747874..1fb0c7f 100644
--- a/_sass/_config.scss
+++ b/_sass/_config.scss
@@ -6,3 +6,6 @@ $color-link: #1A0DAB;
 // FONT
 $font-url: "https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic";
 $font-family: "'Ubuntu Mono', ";
+
+// BREAKPOINTS
+$br: 600px;
diff --git a/assets/css/main.scss b/assets/css/main.scss
index 4655d8f..128235d 100644
--- a/assets/css/main.scss
+++ b/assets/css/main.scss
@@ -39,7 +39,7 @@ ul {
     li {
         padding: 5px;
         padding-left: 10px;
-        @media screen and (max-width: 570px) {
+        @media screen and (max-width: $br) {
             padding: 10px 0 10px 0;
         }
     }
@@ -50,7 +50,7 @@ ul {
     max-width: 600px;
     margin: auto;
     padding: 60px 30px 60px 30px;
-    @media screen and (max-width: 570px) {
+    @media screen and (max-width: $br) {
         padding: 20px;
     }
 }
@@ -61,7 +61,7 @@ ul {
     justify-content: space-between;
     align-items: baseline;
     padding-bottom: 50px;
-    @media screen and (max-width: 570px) {
+    @media screen and (max-width: $br) {
         display: block;
     }
     h1 {
@@ -105,10 +105,11 @@ ul {
         font-weight: 700;
         text-decoration: underline;
         margin-top: 20px;
-        margin-bottom: 10px;
+        margin-bottom: 5px;
     }
     &__date {
         font-size: 1em;
+        font-style: italic;
     }
     &__content {
         padding-top: 40px;
@@ -123,6 +124,12 @@ ul {
             line-height: 150%;
             margin-bottom: 15px;
         }
+        a {
+            text-decoration: underline;
+            &:hover {
+                font-weight: bold;
+            }
+        }
         strong {
             font-weight: 700;
         }
@@ -135,7 +142,7 @@ ul {
         img {
             margin-top: 10px;
             margin-bottom: 10px;
-            @media screen and (max-width: 570px) {
+            @media screen and (max-width: $br) {
                 width: 100%;
                 margin: auto;
             }