Home
Videos uploaded by user “DevTips”
GitHub for Noobs (1/4) – A Short History
 
04:45
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
Views: 134872 DevTips
Advice and Crap for Young Creators
 
08:14
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"
Views: 274772 DevTips
Learn jQuery in 15 minutes – Part 1 – Selectors, Animations, Filters
 
07:56
Visit http://killingitwithjquery.com to start killing it! Learn jQuery in 15 minutes!!! in this video we look at: - jQuery selectors - jQuery animations - jQuery filters 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
Views: 103913 DevTips
Design + Code – Hour 4.4: A Few Final Details
 
05:52
A few last words about our project setup: Check your dependencies, Heres a PSD, and do fonts right. Here is a link to the repo: https://github.com/travisneilson/Design-Code This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 21570 DevTips
Are CSS Frameworks Bad?
 
12:18
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
Views: 64483 DevTips
CSS Units (CSS Lengths: rems, ems, pixels, percents, and more)
 
17:20
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
Views: 95803 DevTips
CSS Basics (Part8) — CSS Preprocessors
 
11:19
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?
Views: 55677 DevTips
CSS Basics (Part2) — Cascades
 
03:50
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.
Views: 54363 DevTips
Discovering the CSS Perspective Property
 
10:29
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
Views: 45177 DevTips
CSS Basics (Part6) — Specificity
 
08:41
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/
Views: 40822 DevTips
HTML5 Basics - The DOM (Part3)
 
04:25
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
Views: 55619 DevTips
Learn jQuery in 15 minutes – Series Welcome
 
09:32
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
Views: 123103 DevTips
Design + Code — Hour 7.1: Mentoring Section
 
36:14
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 14963 DevTips
REM or EM — What should I use??
 
12:52
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
Views: 40198 DevTips
Responsive Website Basics (in 3 simple steps)
 
09:45
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
Views: 153874 DevTips
"Portfolio Advice?" – #AskTravisAnything
 
05:02
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
Views: 22661 DevTips
Hiatus Update 1 – (Time Vacuums, Gaming Addiction, and Willpower)
 
08:49
I want to talk about what I've been up to, and what I've 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
Views: 33767 DevTips
How to Build a Responsive Website From Start to Finish - Community Pulls - part19
 
10:26
Woo! You guys make our code better and better! More pull requests from the DevTips community! Out project on GitHub - https://github.com/DevTips/Artists-Theme --- 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
Views: 10233 DevTips
Parallax On The Web (Part 4) – The Periscope
 
06:01
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
Views: 62208 DevTips
My First Websites Were Horrible! [ SHOWCASE ]
 
18:59
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
Views: 134418 DevTips
Why React JS for prototyping? - #2 React JS prototyping
 
06:04
Explaining the top reasons for choosing React JS for building the high-fidelity prototype. ► 0:31 It is an INDUSTRY STANDARD ► 1:13 It is GROWTH ► 1:37 It has a very strong ECOSYSTEM ► 2:27 It is backed by FACEBOOK ► 3:19 It is very SMALL ► 4:23 It has a NATIVE component for building apps. - - - 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! 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
Views: 29093 DevTips
DevTips Starter Kit v2
 
02:37
http://DevTipsStarterKit.com — Try the new DevTips Starter Kit! Ground zero for your next project. You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 29256 DevTips
How does the internet work? - Part 3 (It's like a cupcake)
 
03:09
In this last video about how the internet works, I want to hit home on the idea of the three basic technologies of the web: HTML, CSS, and Javascript. HTML is the basic language of the web. After you have your markup written, you can style the site with css. And finally, you can use Javascript to add a layer of interaction. Have the website respond to a persons actions. After you are done, you can eat it!
Views: 7808 DevTips
Building a high-fidelity prototype with React JS - #1 React JS prototyping
 
05:52
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
Views: 43480 DevTips
What is Rails? [ Ruby on Rails from the Ground Up - 1/5 ]
 
05:10
This is the first of five episodes in a series where I'll be taking you through the Ruby on Rails framework. After this series is finished you will have build a fully function (albiet simple) Rails Blogging application with dynamic content from posts. At which point you'll be in a good position to dive deeper into learning more about Ruby and the Ruby on Rails framework. - - - 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
Views: 65984 DevTips
"If You Want to Survive in Design, You Better Learn to Code"
 
09:59
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
Views: 44118 DevTips
Top 5 Features: Atom Code Editor
 
10:11
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
Views: 132495 DevTips
Design + Code – Hour 4.3: Setting up a Github Repo
 
08:56
Strap on your helmets! Let's start a github repo! This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 22687 DevTips
HTML5 Basics - History of HTML (Part1)
 
07:46
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
Views: 80732 DevTips
Deploy to Heroku  [ Ruby on Rails from the ground up - 5/5 ]
 
12:32
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
Views: 27587 DevTips
"How do you deal with Haters?" – #AskTravisAnything
 
05:13
Jose Fremaint asks" "I started my youtube channel 2 months ago and already have haters. What's the best way to deal with them? Ignore them? Tell them " I Love You" or just say Thank You? Thanks Trav! :)" - - - 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
Views: 5680 DevTips
CSS Basics (Part3) — Selectors
 
04:26
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; }
Views: 54115 DevTips
CSS Basics (Part4) — Property and values
 
04:28
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!!
Views: 41005 DevTips
Comparing Yourself To Others [Advice]
 
04:50
This video was sponsored by the DevTips Patron Community - https://www.patreon.com/DevTips You should follow DevTips on Twitter - https://twitter.com/DevTipsShow
Views: 10042 DevTips
How does the internet work? - Part 2 (Organize your HTML Project)
 
09:24
How does the internet work? Well, I'll tell ya... In this second part video, we look at how we, as web developers, organize our HTML project. I set up an HTML5 project from scratch, including linking CSS and Javascript files to our main document. We also take time to look at how pathnames work in HTML development. — Relative versus absolute paths. This GitHub repo is really great for a simple starting point for smaller projects. https://github.com/dhg/Cinderblock
Views: 11851 DevTips
How to Build a Responsive Website From Start to Finish - Use FitText for responsive text - part 22
 
10:44
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
Views: 30704 DevTips
CSS Basics (Part5) — Advanced Selectors
 
13:11
Today we look at some advanced selectors. A lot of what we cover is building upon the previous two videos where we discus basic selectors, and then properties and values. If you need too, check those out now: Basic Selectors: http://youtu.be/emMO3iCpvrc Properties and Values: http://youtu.be/4LtwZQ5jxic ========================= Basic Selectors tag | a class | .container id | #main-list ======================== Selector stacking a, strong { color: red; } ======================== All Selector * { margin: 0; } ======================== Descendant Selector li a { color: red; } li li a { color: red; } ======================== Direct Descendant Selector ( youtube doesn't allow brackets in the description. ) .container (greater-than) ul { border: 4px solid red; } ======================== Adjacent Selector ul + p { color: red; } ======================== Sibling Combinator ul ~ p { color: red; } ======================== Pseudo Classes a:hover { text-decoration: none; } textarea:focus {border-color: blue} ======================== Put it together... .peeka:hover + .boo { display: block; } ======================== nth selector p:first-child p:last-of-type p:nth-child(3) p:nth-child(odd) p:nth-child(3n) YAY!!!!!
Views: 84372 DevTips
Jade Is Awesome - Do you Even JADE bro?
 
17:11
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
Views: 78105 DevTips
CSS FlexBox Essentials
 
31:25
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
Views: 296370 DevTips
How does the internet work? - Part 1 (It's like a bad drawing.)
 
05:06
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?"
Views: 19080 DevTips
Zurb Foundation Grid - CSS Grids Series (Intro)
 
05:02
The second installment in the DevTips CSS Grids Series, where we build the same layout by each one of the grids. One by one. In this series we look at Zurb Foundation. Get Foundation: http://foundation.zurb.com/index.html --- 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
Views: 23601 DevTips
StarWars BB-8 CSS Speed Drawing
 
09:50
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
Views: 91439 DevTips
The Box Model, Box-sizing & Box-shadow
 
08:53
Check out the Codepen I created for this project: http://codepen.io/travisneilson/pen/qulgm 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
Views: 36598 DevTips
Box Shadow Secret Finally Revealed
 
12:52
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
Views: 46274 DevTips
"Where Do You Host Your Websites?" #AskTravisAnything
 
05:04
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
Views: 14040 DevTips
Learn jQuery in 15 minutes – Part 2 – Classes, Image Swap, Methods
 
08:18
Visit http://killingitwithjquery.com to start killing it! Learn jQuery in 15 minutes!!! in this video we look at: - jQuery AddClasses - jQuery Image Swap - jQuery Methods 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 - - - 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
Views: 62828 DevTips
Bootstrap Grid - CSS Grids Series (Intro)
 
04:19
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
Views: 50357 DevTips
Thanks Giving Day Question No.1 — CSS Inspiration
 
02:53
For the first video this Thanksgiving, I try to answer the question "are there any websites you do to for CSS inspiration?" Thanks to Scott for the question! Stay tuned for another video coming out later today.
Views: 1895 DevTips
CSS Floats and Clears Explained
 
12:34
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
Views: 130917 DevTips