In this DevTips Beta video I respond to a question left in the comments. We talk about how to prepare for real life as a creative professional.
This video was recorded after 2am, that's why I'm so so super sleepy.
Music by: "This Will Destroy You"

Github for Noobs is a great way to become familiar with the basics of Git and GitHub.
This first lesson is about the history of the two. Where did Git come from? Who made it, and why?
What is the difference between Git and GitHub?
All these questions and more are answered in this first video in a series called: GITHUB FOR NOOBS!
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

What is the difference between ems and rems? When should I use pixels or percentages? How does vmin and vh work? How long is a piece of string?
All these questions and more, Let's talk about CSS units.
Patrons get the files here: https://www.patreon.com/posts/css-units-css-3563073
- - -
Percent - 0:57
Viewport Width & height - 3:01
Viewport Min & Max - 4:15
EX & CH - 6:08
EM's & REM's - 8:44
Absolute lengths: 13:28
Pixels! - 14:52
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Lets talk about the use of Frameworks; are they dangerous?
---
DevTips is a YouTube show about web design and development.
"HTML5 Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
"CSS Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
"How to build a professional website from start to finish" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI
----
Follow the DevTips GitHub Page to get all the codez:
https://github.com/DevTips
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

In this video we look at the wonderful world of CSS Preprocessors. I show you a few of the awesome things that you can do with CSS Preprocessors, and look at a few of the more popular ones; LESS, Sass (SCSS), and Stylus.
Less Website - http://lesscss.org/
Sass Website - http://sass-lang.com/
Stylus Website - http://learnboost.github.io/stylus/
You should try them all, because they are all fun and awesome! But you can read below about why some folks choose one over the other....
Sass vs Less - http://css-tricks.com/sass-vs-less/
Sass Vs Less - http://www.hongkiat.com/blog/sass-vs-less/
Sass vs. LESS vs. Stylus: Preprocessor Shootout - http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout/
Awesome! Which have you tried? Which do you like the best and why?

See the full 2 hour version — https://youtu.be/K3PKe7X3ZVw
Get more jams from HB — http://heartbreakmode.com/
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

How to understand the DOM.
The DOM is the Document Object Model. It is the description of the relationship that all of the HTML elements have with each other. (e.g. Parent/Child/Sibling...)
We are using chrome dev tools to inspect a website and talk about how that website is built.
We also talk about semantics and how writing semantic markup is important. We should use the most appropriate HTML tags.
This is the third video in a series called "HTML5 Basics" Be sure to watch them all!
http://www.youtube.com/watch?v=NzzGt7EmXVw&feature=c4-overview-vl&list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON

Today we learn about a CSS property called "Perspective" this will take your css transformations to the next level.
Check out the code: http://codepen.io/devtips/pen/vXJAxq/
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Hi Friends!
Today we are talking about specificity, something fundamental to being a great CSS programmer.
After watching the video, be sure to play around with the Specificity Calculator! - http://specificity.keegan.st/

Wired Article – https://www.wired.com/2017/03/john-maeda-want-survive-design-better-learn-code/
Don't believe the hype, you be you.
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Continuing the discussion of the CSS Units, we discuss which is better to use: REMs or EMs. I totally make up the answer. What is your opinion?
Previous Video: https://youtu.be/qrduUUdxBSY
CodePen: http://codepen.io/devtips/pen/f77e5605167e9b81711aafefd1cac88f
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Welcome to the series called "Learn jQuery in 15 minutes" — In this video we talk about why it's a great idea to know jQuery, and go through an install and setup.
Get the files on GitHub – https://github.com/DevTips/Learn-jQuery-in-15-minutes
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

In this series we'll go from start to finish in building a fully functioning high-fidelity prototype with OAuth2 authentication and API connections fetching real data. The user will experience the prototype with her own stuff in it!
Let's build a prototype that's actually working to prove our point to stakeholders!
When you as a designer take steps beyond HTML and CSS and head into real code, YOU have the power!
We do this by using React JS https://reactjs.org/ - a great JavaScript framework for building front-end components. We will even do some back-end to handle authentication eventually.
And yes, this is not Travis - David and MPJ are filling in!
Mattias on YouTube: Fun Fun Function
https://www.youtube.com/funfunfunction
David on YouTube: Data David
https://www.youtube.com/channel/UC0TQC6ZPNm23dU6ecc5x0Gg
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Today we look at a few (not all) of the ways that styles "cascade".
SPECIAL THANKS to our guest-host Los! www.losmontoya.com
-------------------------------------------------
# 1
The first way stylesheets cascade, is that a single style can effect multiple HTML elements.
For example, let's say we have a few paragraph tags. Then let's say that we change our mind and we want all of our paragraphs on our website to be red. We can write one simple style to do this.
All of the elements that match the criteria of that style rule, will be effected by it. In this case, every paragraph. Notice That our list was not effected.
# 2
The second way that stylesheets cascade is similar to the first, but reversed. That is, one html element can be effected by many styles, in different ways, all at the same time.
Let's say we write a general style that makes all of our paragraphs have red text, and then later on we target the first paragraph and make it 18px large. It is now both red and 18px large. See? Cascading.
# 3
The third way they cascade is what allows us to use the powers of stylesheets to make large scale websites. In this way, one stylesheet can be applied to many pages across a website, or even multiple sites!
For example, on my website I have many pages, on all of those pages I have the same header. This is super easy to accomplish with CSS. I just link all the HTML pages to that same style sheet.

Akshay asks:
You have mentioned more than once, That we should provide case studies instead of traditional portfolio pages. Can you suggest a more detailed way of - How a professional web designer / developer should maintain their web presence ?
Tweet @DevTipsShow and hashtag your question with #AskTravisAnything
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Today Los is joining me again for a special episode where we talk about the basics of coding for a responsive website.
We cover three main principals:
1. The Meta Tag
2. HTML Structure
3. Media Queries
After you watch the video you can reference the github repo to see the code in action:
https://github.com/DevTips/Responsive-Web-Design-Basics
Thanks everyone!!
---
DevTips is a YouTube show about web design and development.
Check out the DevTips Github account:
https://github.com/DevTips
----
HTML5 Basics Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
CSS Basics Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
----
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

Today we start a new series called CSS Grids. We are going to build and re-build the same layout with different grid frameworks.
Watch this video in the playlist: *link
Link of the week: http://www.gridlover.net/
Winning Tweet: https://twitter.com/f0vela/status/531858154556907522
---
DevTips is a YouTube show about web design and development.
"HTML5 Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
"CSS Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
"How to build a professional website from start to finish" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI
----
Follow the DevTips GitHub Page to get all the codez:
https://github.com/DevTips
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

Need a refresh on HTML5 tag attributes? check this clip - http://youtu.be/1SLB-vCqR0g?t=1m30s
Great article on the subject of classes and id's - http://css-tricks.com/the-difference-between-id-and-class/
------------------------------
Notes form the video:
The first special attribute is called an ID. It looks like this
id="button"
The second special attribute is called the class. It looks like this:
class="button"
Select ID's by using a #
#button
Select Classes using a .
.button
Select any html element using its tag name and no characters before it.
a (as in anchor)
-------------------------------
Putting it together: a style that selects all the elements with a class attribute with "button" looks like this:
.button {
background: blue;
font-size: 18px;
}

Today we talk about CSS3 FlexBox. Everything you need to know to use FlexBox right away.
See the code: http://codepen.io/devtips/pen/JorKGm/?editors=110
---
DevTips is a YouTube show about web design and development.
"HTML5 Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
"CSS Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
"How to build a professional website from start to finish" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI
----
Follow the DevTips GitHub Page to get all the codez:
https://github.com/DevTips
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

We looked at Atom and how to set it up. Now let's look at the top 5 features that make me keep loving it.
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

In this video we are looking at the history of HTML. From its inception, all the way up to HTML5.
Having a solid understanding of how we got to be where we are at, is very helpful in understanding where we go next.
// FURTHER READING:
Excellent & easy to read book - http://www.abookapart.com/products/html5-for-web-designers
Where HTML was born - http://home.web.cern.ch/
The W3C - http://www.w3.org/
The WHATWG - http://www.whatwg.org/
This is the first video in a series called "HTML5 Basics" Be sure to watch them all!
http://www.youtube.com/watch?v=NzzGt7EmXVw&feature=c4-overview-vl&list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON

Zachary Newton asks:
"I would very much like to know who you use to host your different websites and the reason behind why you chose them."
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

I feel so fortunate and supported be everyone who is a part of the DevTips fam. Thank you so much!
We also talk a lot about video game addiction and addiction in general.
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Adobe XD is awesome. We are starting a new series all about my favorite design app.
This video is for people looking to switch and need to understand the concepts used in XD and how they line up with the things you may be used to in photoshop.
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Lynne Davidson asks:
"How do you approach a totally new topic. I'm a programmer but I've been asked to make a website. How can I go about learning to know what I need to learn?"
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Who hasn't seen the new Star Wars movie? For me, the cute little BB-8 droid stole the show. Today we draw and animate BB-8 using HTML+CSS.
See the original art here: https://dribbble.com/shots/2408834-BB-8
Get the code here: http://codepen.io/devtips/pen/5b37e510cea021d6a999eacf620ea0b0
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Shout out to meecrobe and boodaah on GitHub for these two quick pull requests.
---
DevTips is a YouTube show about web design and development.
HTML5 Basics Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
CSS Basics Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
----
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

No one was ever born with enough skill. It takes time and patience. I want to prove that by showing you my early work.
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

How does the internet work? Well, I'll tell ya.
In this video I explain the complicated relationship between users, browsers, servers, databases, and local development. There is even a space octopus in there somewhere. YOLO!!
This is the first video in a short series I am calling "How does the internet work?"

Today we look at JADE, a templating language that is completely awesome and has changed my life. Maybe.
Jade Website: http://jade-lang.com/
Jade Syntax: http://naltatis.github.io/jade-syntax-docs/
Mess with jade right now: http://html2jade.aaron-powell.com/
---
DevTips is a YouTube show about web design and development.
"HTML5 Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
"CSS Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
"How to build a professional website from start to finish" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI
----
Follow the DevTips GitHub Page to get all the codez:
https://github.com/DevTips
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

In this episode (the 5th and final episode in this series) we are going to take the Rails application we built in the previous episode and go through the process of deploying our app onto a hosting service called Heroku.
**Links**
- [Get Started with Git and Github Video](https://mackenziechild.me/video/2015/01/13/get-started-with-git-and-github.html)
- [Github](https://github.com/)
- [Heroku](https://www.heroku.com/)
- [Heroku Toolbelt](https://toolbelt.heroku.com/)
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Continuing with the work section, today we decide what will happen when you click a thumbnail.
---
DevTips is a YouTube show about web design and development.
"HTML5 Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
"CSS Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
"How to build a professional website from start to finish" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI
----
Follow the DevTips GitHub Page to get all the codez:
https://github.com/DevTips
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

Understanding and using CSS property: value; pairs is one of the largest parts of understanding web programming.
The Semantics look like this:
selector {
property: value;
}
After you got that, all you have to do is know ALL THE PROPERTIES AND THEIR ASSOCIATED VALUES!!!!!
Its a daunting task to be sure, but in this video I teach you how to learn them all fast, while being able to create working websites all the while.
Take a look at all these CSS properties: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Thanks for watching!!

Yesterday I published a video that was corrupted when uploading. I lost about half of the content. Last night i re-recorded the missing parts. It's weird, but here you go.
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Can you believe this?? I said, Internet! Can you believe this!!?!
Code Example– http://codepen.io/devtips/pen/KzozLa/
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Let's talk about floats, how they work in a few different scenarios, and how to clear them.
The examples in this video are *hopefully still live here: http://codepen.io/devtips/pen/gbVXMP
I just noticed this video where phpacademy explains the clearfix really well: http://youtu.be/b92sObtQGzA

Ships that pass in the night, and speak each other in passing,
Only a signal shown and a distant voice in the darkness;
So on the ocean of life, we pass and speak one another,
Only a look and a voice, then darkness again and a silence.
– Henry Wadsworth Longfellow, 1863
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Today we look at another easy and fun way to add a bit of sparkle to your website using Parallax!
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Get the code here:https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.3
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Today we use http://fittextjs.com/ to make the header responsive and awesome!
---
DevTips is a YouTube show about web design and development.
"HTML5 Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
"CSS Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
"How to build a professional website from start to finish" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI
----
Follow the DevTips GitHub Page to get all the codez:
https://github.com/DevTips
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

Today I show you how to get free hosting with gh-pages on GitHub. This is the last episode of the series! ... for now ;)
https://pages.github.com/
---
DevTips is a YouTube show about web design and development.
"HTML5 Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
"CSS Basics" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
"How to build a professional website from start to finish" Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI
----
Follow the DevTips GitHub Page to get all the codez:
https://github.com/DevTips
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson

Today we talk to the extremely insightful Jonathan Cutrell, host of the DeveloperTea Podcast. – http://developertea.com/
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Interviewing at Google taught me a lot. Let me share some of the more helpful things I learned.
- - -
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips
Listen to Travis' Podcast - http://www.travandlos.com/
Get awesomeness emailed to you every thursday - http://travisneilson.com/notes
You should follow DevTips on Twitter - https://twitter.com/DevTipsShow

Today is Part 1 of a multi part series called "How to build a professional responsive website from start to finish"
Let's look at planning — Ideation, Discovery, and Documentation.
---
DevTips is a YouTube show about web design and development.
HTML5 Basics Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON
CSS Basics Playlist:
https://www.youtube.com/playlist?list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy
----
DevTips now has a twitter account:
https://twitter.com/DevTipsShow
Travis also tweets:
https://twitter.com/travisneilson