4/9/14: Day 3 | CSS Specificity

Something that I never quite figured out on my own was CSS specificity. What trumps what? Are there exceptions? Isn’t it just a cascading style sheet, so doesn’t it just show whatever appears last? 

Well, yes and no. It depends on the specificity! The general rule of thumb is ID > Class > Element/tag… but there are two exceptions (see below!):

1. Id (#): Most specific! Id’s will trump classes and element/tags. 

html: <div id=”main”></div>

css: #main {background: #1C3148;}

2. Class (.): Second most specific! Classes will trump element/tags but will not trump Id’s.  

html: <p class=”caption”>This is a caption for a photo!</p>

css: .caption {color: white;}

3. Element/Tag: Element tags are the least specific. 

html: <li>This is a bullet point</li>

css: li {color: yellow;}

Exceptions:

  • inline styles overwrite most cases.
  • !important overwrites pretty much everything, but many people advise against using this in your CSS. 

4/8/14: WDI - Day 2: HTML/CSS, Git, and GitHub

Today we reviewed HTML/CSS, Git, and GitHub basics. I’ve used GitHub before, but I’ve never cloned a repository or committed my own code. So, today was the day!

There were a handful of steps (git init, git status, git log, git remote add), but I am only going to focus on the commit process: 

1. git add -A : prepares or adds all of your modified, added, or deleted files from your last commit

2. git commit -m “message about the commit” : packages all of the files up and associates a comment (-m for message) to the next commit  

3. git push origin master: pushes your commit to the master git repository and stores on GitHub.

4/7/14: WDI - Day 1: Command Line Basics

Let’s see… where do I begin? Since this is my first blog post of the course. I don’t want to set the precedence that each day is going to be some deeply insightful blogpost. Instead, I’m going to treat it as a daily checkin of something cool I learned. 

Most of Monday, April 7th was spent reviewing command line basics and HTML/CSS. So, the coolest thing I learned was actually from Dave the night before about searching for a specific letter of a file name from the command line. 

So… maybe there is an instance where you need to find a folder or filename that starts with a certain letter. Maybe you can’t remember the name or there is just a ton of info in the directory and you don’t want to have to sift through it all. 

In my case, I was looking for a file that started with the letter “s”

In the command line, go into the directory that you want to search and type in: 

ls |grep -ie ‘^s’ —color
  • ls: list
  • |grep: searches for a specified string
  • -ie: removes case sensitivity, I believe it stands for ‘insensitive expression’
  • '^s': the carrot (^) means “starts with the letter 's'.” Obviously this could be swapped out with any letter or phrase 'Sc' maybe… but the phrase or letter do not need to be case sensitive.
  • —color:  changes the color of the letter ‘s” that shows up in the result. 

Sidenote, we did run into some issues when trying to run this command in a Dropbox directory. Not sure why that is, but it worked everywhere else. 

Saturday night baking sesh. Dark chocolate cupcakes with homemade buttercream frosting.

Saturday night baking sesh. Dark chocolate cupcakes with homemade buttercream frosting.

3.21.14 #kingsofleon, “Be Somebody” #latergram (at The Forum)

3.21.14 Kings of Leon, “Closer” #latergram (at The Forum)

Tags: latergram

Last night at #TheEcho, #JUNGLE 🌿🐅🐒🐸🐨🐆🌿 (at The Echo)

Tags: theecho jungle

@gardensandvilla last night at the El Rey. (at El Rey Theatre)

Snow summit #nofilter

Snow summit #nofilter

Tags: nofilter

Big bear w/ @4ttilio  (at Big Bear)

Big bear w/ @4ttilio (at Big Bear)

Parking reserved for #drwho

Parking reserved for #drwho

Tags: drwho

Walking to work this morning #broadway #santamonica

Walking to work this morning #broadway #santamonica

A little late! Just found this one in the archives.

A little late! Just found this one in the archives.

Dimensions for Social Media Design Elements

Facebook:

Cover photo: 851x315

Profile Pic: upload as 180x180 - shows up as 160x160

Twitter:

Profile Pic: 500x500 shows up as 81x81

Cover Photo: 1252x626 (max file size 5MB)

Background Image: 2560x1600 (max file size 2MB)

Pinterest: 

Profile Pic: 165x165

Youtube: 

Cover Photo: upload as 2560x1440 shows up as 2560x224 on desktop (max file size 2MB)

Google +:

Profile Pic: 250x250

Cover Photo: 1080x608 - (16x9 aspect ratio)

Vimeo: 

Profile Pic: 300x300

#farmersmarket (at Virginia Park Farmer&#8217;s Market)

#farmersmarket (at Virginia Park Farmer’s Market)