CSS Basics (Part8) - CSS Preprocessors

[@ManiniGupta]

This video was my second pass on sass, and I'm all about it now. I'm about to launch into your other video on Bourbon, etc. Thanks for your help, man!

[@OfficialDevTips]

you are welcome :) good luck!!

[@wojtekobsysa]

Dude, I'm going through the "From Start To Finish" playlist, then I switched for a while to "CSS Awesome" video and ended up here. Just wanna say, you rock. Your tuts are funny, easy to understand and really on point. Keep it up, plz and post more.

[@OfficialDevTips]

Thank you! I'm glad you are soaking it all in :)

[@VaughnHaynes]

You sold me. I tried SASS and now I prefer it. Like you said, took 10 minutes to get comfortable with it

[@OfficialDevTips]

Right??!? SASS is so good. I want to cry.

[@WakefieldSeldon]

Nice, started as a web dev some few months ago, had my first big project this summer. I am so happy I found your channel.

[@tylerperras6899]

By far the most entertaining lesson / lecture / informative videos I have ever saw. The little comic strips really made the video funny and engaging.

[@OfficialDevTips]

Awesome! I'm glad you liked it :))

[@nonamo828]

Finally!! I could understand why so much people use these and how they works. Thank you @Travis you're awesome!

[@EverlastingUniverse]

I liked your style- The Coach is directly talking to his Students- I viewed All Videos - All 8 of Them at a stretch. Wow. Amazing Style, Travis - BTW I liked X-RAY avatar :-)

[@tombrown8766]

wtf its already over... yooooh i need more deeper tutorials from you asap man. haha. just sat down watching this series for like two hours non-stop and it feels like you just ended it by suprise man but big-up am looking forward to the second session of css and html5 from devtips. five thumbs up... uhmm if thats even possible!

[@OfficialDevTips]

Hahah, and to think; it only took me two months to make! Thanks for watching man! If you want more, you can always watch it again .. :P

[@oohdatdude]

Bruh, I love this channel. Recently went back to the basics to unlearn some bad habits and these videos have been a godsend. Much respect my dude and I definitely went to patreon and dropped a couple coins in the basket. Keep hacking!!

[@JCMLR]

Super helpful video. I didn't know you could create variables in CSS. Helps A TON!

[@McGavel1]

Thanks for the great video. I love Stylus myself. Nib plugin for stylus gives you prefixes and there's a sublime text plugin for Stylus. Rupture plugin for Stylus gives you easy media query drop-ins. Also, Hayaku for Sublime Text works amazingly with all of it. Plus, the mixins are transparent so if you had a mixin called br(rad = 5px), you get a default of 5px border-radius with all the prefixes by simply typing: li br()

[@jason0ng]

You are the best teacher EVER! A BIG THANK YOU!

[@Haladmer]

Nice pacing on the vids, makes it easy to get in, get a solid lead, and go. Having watched this series and the HTML 5 basics, you've helped my own project a great deal, so thanks!

[@OfficialDevTips]

That's awesome to hear! I want to make a JavaScript basics series one of these days. :)

[@Haladmer]

When you do, let me know. While I love the way you use CSS to cover some of the same functionality, there are somethings we still need jscripts for unfortunately ;)

[@OfficialDevTips]

For sure. Javascript is extremely good at some things CSS just doesn't do at all. But that's ok. That's the way it should be.

[@Isra-p1]

Just awesome stuff. I'm a little late, I know, I know. Can´t believe I just discovered your channel! Awesomeness

[@tobymiller3585]

WOAH, where'd your beard go?!?!! Thank you so much for these videos!!! I just blew through HTML, How the Internet Works and CSS Basics. I've been struggling to modify my Wordpress site for about a year now without learning any CSS. I can't wait to dig back into it now knowing the basics! Thanks again!

[@OfficialDevTips]

Toby Miller Awesome! Good luck man!

[@DsignFX]

Sass...pretty cool...looking fwd to implement this approach

[@amyoliver8223]

Just as a note. The music makes me smile... I hope you keep it. My little one likes to dance to it. (the singing at the end is freaking FUNNY!)

[@OfficialDevTips]

***** I still do music, but not the whole way through. People complain about it a lot. I understand why...

[@amyoliver8223]

Blah.. people take themselves too seriously! but I get it... It's about pleasing the masses and I wish upon you, masses :)

[@OfficialDevTips]

***** hahah, thanks!

[@DivineZeal]

Great lessons! I need to get into less n SASS, ive seen a few job listings wanting it

[@etisdew2985]

It sadly took me too long to warm up to you, I offer you your due subscription. Its nice finding a source that doesn't stress me out after days of the code making me physically sick, I'm just looping back around on the fcc program, brushing up really fast, I'd actually appreciate seeing how you do your sass and will spend my morning catching up.

[@isthereanyname]

I really got a lot from this playlist. Cheers dude!

[@OsirisNO]

I have a degree in programming. We had 3 lessons on html and css. And I've nver fully grasped the power of both. Always shrugged it off to the frontend developer. But now aiming to be a full-stack developer and your video series gave me a lot of AHA moments.

[@lameduck1690]

Personally I like having the curly brackets back, they fill a void in my heart.

[@OfficialDevTips]

Aawwwwww. Someone needs a hug! Here, these brackets will be my hug { ._. }

[@michaelhofby]

Nice explanation with less vs sass... Im at the point where i feel i have to begin using a pre-processor now.. I totally understand why sass is best since the main reason we even wanna use a pre-processor is to lessen re-typing and therefore maximizing real productivity :D So thanks man

[@OfficialDevTips]

Oh, awesome! I'm glad this was helpful!!

[@georgigeorgiev2219]

Thank you for the explanation. GOD bless you and your family.

[@markcabangon3885]

Enjoyed learning the fundamentals. Thanks Travis! I've taken a couple online courses and such, but have never really gone too much into the fundamentals and foundation. This helped a bunch and always looking forward to more vids...and cameos of Los. Lol!

[@OfficialDevTips]

Mark Cabangon Awesome!!!! I'm glad to hear it :)

[@slim_mike]

hey! thanks , Im looking forwar to the next course! I like that you have a very cool attitude towards the subject, and I think that help in a very cool way, its like, may be is easy to forget stuff when is presented in a very verbose and abstract way, but in the way you explain things its like more personal and emotional, and may be the material it is easy to remember, because one has an actual memory of your reaction. Its really cool too that you use actual examples and you show how things work in real time. Anyway I just wanna thank you, and let you know that I apreciate what you do

[@bitsplz]

I'm glad you cut out the music on these later vids and you do a really great job!

[@criscabreras]

"Pretty cool huh!" - Awesome vids Travis, been watching since the first one. BIG fan. ¡Muchas gracias!

[@OfficialDevTips]

Awesome! I'm glad you like them.. That's pretty cool huh☺

[@techaddictdude]

PreTTTTTTTTTTTTTTTTyyyyyy CooooooooooooooooL HUH! (*insert special effects*)

[@AlessandroLevis]

Awesome video! You are my new hero :) Personally I like Stylus more because of node.js

[@minecraftfreak512]

I'm just using SASS all day long right now because I love it :o (Before I saw this channel I didn't know anything about Preprocessors Thanks for that ;-)

[@OfficialDevTips]

Changed your world. Did you know SASS is about 5 years old? crazy old in internet years.

[@NetherWorldHobbies]

Great stuff man, really. Im stil just getting into web design as I've only recently started school. I feel by watching your vids will give me a step up when I begin to cover these things. Im excited as hell and want to make something right now though!! What programs can I download to my PC that can help me, or that I need? Thanks again for the vids man, great sense of humor makes it a lot more enjoyable to watch as well. And yes, you shoukd feel as though youre making a difference, youve sure fired me up about it!!:)

[@OfficialDevTips]

27darkone That's awesome!! I dont know what pc apps to recommend, just a text editor and a browser are all you really need. Keep that fire going!

[@tanchan46]

CSS Basic VDO's were pretty cool :) Thanks buddy.

[@OfficialDevTips]

yea! I'm glad you enjoyed it!

[@iumc]

Thanks man. Amazing series. It really helped me!

[@carolyn_s]

You may answer this in your next set of css videos. 1. How do you label/organize multiple html pages for the same project? 2. Should each html page have its own css page? If so, should it be labeled to match the html page? Example: I have 3 photos that each have a link to another page. Titles of the photos: bakery, our team, testimonials. Right now I have it labeled index.html, index1.html, etc. Sorry if this sounds confusing. Thanks in advance!

[@carolyn_s]

Of course each html page will be linked to the appropriate css page.

[@OfficialDevTips]

Hi Carolyn Schack ! I usually just have all of my sass files compile down to 1 single css file. Like this: github.com/DevTips/DevTips-Starter-Kit/tree/master/assets/css you see how all.sass collects all the other sass files and spits out all.css? Just one file and every page on the site links to that one file.

[@millennia]

Please continue make video tutorials, you helping us big time!

[@OfficialDevTips]

ok :)

[@salv236]

Thanks travis, im glad that i found your channel, would you have a series on SASS?

[@edwardkenemorales]

You really make things look easy man! I'm just wondering if you would do a tutorial or series of how to write sass using the indented flavor? I have been searching around the net and can't find a decent walk-through. Even the sass website touches only the basic stuff and I think they are promoting the scss thing. Really love the indented flavor!

[@OfficialDevTips]

Thanks for the video idea! I love indented sass. :)

[@jimmyinfrance]

Thanks really clear introduction.

[@carloshn5561]

Dude, I´m getting updated with your videos so fast, so good. I remember my Page Mill first webpage :P Muy bueno.

[@ogookafor2137]

Dude! Thanks alot for this intro to pre-processors. :)

[@OfficialDevTips]

I'm glad you are into them. Sometimes I get ppl commenting like "Y U SASS Bro?" And I cry a little on the inside. I'm not sure what that means..

[@youfirst.]

Great, thanks for the videos, you are a great teacher, hope you will make more videos on less and show us an example project and how it compiles

[@OfficialDevTips]

else1s I feel like less has fallen out of fashion... dont you?

[@youfirst.]

DevTips bootstrap still using it along with sass so it would be really helpful to make a video for one of these two so new people to css like myself will really appreciate it, I would love to see how to work with prepros or brackets and compile.

[@OfficialDevTips]

Well, it will be mostly the same, just different syntax and things..

[@YounessMazouz]

Pretty cool huh!, yes it is!!!!!! thank you for all the shared knowledge.

[@OfficialDevTips]

You're welcome!!

[@funkysoul619]

Wait, thats me ! I am as curious about the web as you are, let alone the knowledge. Should be good to say that I got a pal at the other side of the world :D

[@n8tehgr8est]

You're right! That is pretty cool!

[@astroboomboy]

Sass seems great, will test it out!

[@OfficialDevTips]

Astro Boomboy I hope you like it!

[@darlingtongirl1]

do you know how to use css on something that is written like this in the source code: neil's foreign consulting how would you use css to make the three of them look different and to position consultine below "neil's foreign"? how would you use css to target consulting without effecting anything else?

[@OfficialDevTips]

You'd have to select the whole h1 and make your styles. Then select the other spans and override what you don't want tof the h1 styles.

[@darlingtongirl1]

thank-you. do you know if you can do tutorials on making a full interactive websites with css?

[@MattGreek]

Very awesome stuff. I have a question that doesn't really have to do with coding (and apologies if this has been answered before, I did a look-see and didn't find anything). I've watched some of the more recent vids but I watched the CSS Basics series and you were begging for questions at the end, that's why I'm posting here. What is your video creation process? Perhaps a quick run down on equipment, software, etc which you use. How long does it take to put one together? Any particular methods you use? That kinda stuff. Thanks so much for all of these vids, I wish I had found your channel sooner. Now I'm off... to watch the How to Build a Responsive Website From Start to Finish series. I'm looking forward to it as many of the other tutorials out there skip over stuff, it better be start to finish, so help me if there is any skipping, it won't end well for you. You're awesome, thanks!

[@OfficialDevTips]

+Matt Greek Have you seen this one? kzbin.info/www/bejne/h4e7gZtvqc-lnKs

[@MattGreek]

+DevTips I actually haven't. Looks awesome tho. I'll check it out tomorrow. Sorry I didn't see this before I asked. But again, this stuff is awesome, I can't believe you do it without charging money! Thanks!

[@graceganta1505]

thank you for css more on stlye sheets provided it will be nice

[@TheSpiritBolt]

pretty cool huh!!!

[@RahulSiyanwal]

Travis, link this video to the playlists you have for Responsive design website and Your own personal website tutorials. I was new to CSS Preprocessors and it gave me little problem to actually understand what is happening. :)

[@jalendixon1264]

Is it necessary to use coding through applications such as DW? Or is it any different at all?

[@OfficialDevTips]

Jalen Dixon some code editors offer different features that you may or may not find valuable. But you can code in anything you can type in.

[@digitalsketchguy]

Okay! I finally saw the light and had to sub..

[@OfficialDevTips]

Win! Thanks for subbing you won't regret it. :)

[@sudonitin]

image hovering is where i find difficulties, especially to hover a text on an image so please give me some tips on it.

[@ronnyrodriguez4306]

I love when you say "pretty cool huh"

[@NoorBakeer]

Can you make a video about CSS nesting please?

[@NbaLive4ever]

This video was pretty cool huh?! lol. Awesome vid man, thanks!

[@OfficialDevTips]

Yea! I'm glad you like it!!

[@jeffchapman8992]

Travis, I'm warping back and forth in time on this question wrt your video publishing dates but you asked if we had questions. {I suspect you've answered this somewhere else in your efforts but here goes... } I've downloaded and done prelim practice using ATOM with your config (thank-you and ThnQ). Q: Did you add a SASS 'add-on' to Atom? If memory serves, it appears that when watching you code in some of your more recently published videos, that you code .CSS related style inside of ATOM while adhering to SASS syntax and rules (no brackets or semi-colons, for example). In closing, now that you've provided me with a much better understanding of preprocessors and where they fit into the entire web-dev process, I'll warp ahead in time (to the recent present) and see if I can find out how you're using SASS (i.e. inside of what programming tool i.e. not Espresso specifically). Keep on rocking.

[@OfficialDevTips]

I use Codekit to compile my SASS

[@giofig40]

since your channel i learned so much and has encourage me to go back to designing and be more involved with coding instead of using web builders........ pretty cool huh?! lol

[@lipslide101]

Nice video, you crack me up every fucking time when you say "pretty cool, huh?" with those effects applied to it, so funny!

[@OfficialDevTips]

haha, thanks man. Some people be hatin, I'm glad you appreciate it!

[@lipslide101]

Haters gonna hate bro, keep up the entertaining and learningfull work you're providing to us! :D

[@TravisHi_YT]

Thanks for these vids! Perfect mix of info and entertainment, reminds me of Vsauce. Shoutout to the LearnCode.academy youtube channel for leading me here. P.S. Cool name :D

[@OfficialDevTips]

lol, thanks Travis Hibble :) I like vsauce, I'm glad if some of Michael's style rubbed off. Isn't Will awesome??

[@belleluze]

Yo people! I'm a straight up newbee and was wondering what do you guys recommend I use for an editor that's not to complicated to use or set up. tanko for ur vids hey!

[@OfficialDevTips]

A lot of people like sublime text

[@abirkulov]

You're very charismatic IT guy))

[@vladimirbauer6604]

The last part # 8, really pretty cool ha, because there is no that annoying background music, which in my opinion gets you pretty much distracted.

[@OfficialDevTips]

Thanks!

[@MarkJay]

only time I've seen less is in atom. I tried messing with the style sheets to change the syntax colors

[@mfaani]

@devtips I understood what a pre-processor could do for you, what I didn't understand was that how you use it and link it to your css stylesheet

[@skkettch]

pretty cool, huh?

[@OfficialDevTips]

YES!

[@sr.nitish2268]

Pretty Cool..Huhh :) ... What a way ;)..Awesome Video Boss ..Like it!!

[@OfficialDevTips]

Thanks!

[@hupoe9499]

travis beard { display: none } :). man, what is this music in the background? i really like it. I'm walking around and humming this theme :). awesome. keep going!

[@OfficialDevTips]

Rafał Dudek I dont know what it is, a loop I found a long time ago...

[@sanjitsingh8852]

start using SASS .. Preety CoOl haa.. .

[@OfficialDevTips]

Hahah!!! Nice!

[@RollingHousesUK]

Ok, sold.

[@OfficialDevTips]

Yes! Success!

[@kris_maussen]

some examples about issue which you mention would make it easier to understand what you mean ...

[@OfficialDevTips]

Do you have an timestamp? I made this video a looong time ago :)

[@studiocity10]

very funny pretty cool huh ARC lol Thanks for the vids.

[@crlsmtzprds]

Pretty cool !

[@YUG74]

I was expecting after you explained the Math part and were about to say "pretty cool huh?" that you would disappear into the fabric of time and space!

[@OfficialDevTips]

Haha. Transcendence

[@SquaredbyX]

But where does the music come from? I don't have music when I'm programming.

[@yashgulati4278]

which is the best css preprocessor today?

[@Akshatgiri]

sass

[@zechymahler]

I don't know which is best. I prefer Sass

[@carmelytooo24]

Hey there! Do you think it's a pretty cool idea to start using preprocessors even though you're still not that literate in basic CSS?

[@OfficialDevTips]

Not really. I think you need to be comfortable with how css works first. or woul will get lost for sure. Great question.

[@carolyn_s]

Thank you so very much!!

[@OfficialDevTips]

you are welcome!!

[@Megalomaniakaal]

So as a prehistoric dinosaur who used to do some web development and design in the early to mid 2000's I'm facing having to use less for the first time and absolutely hating it. Is that normal?

[@bkgcom]

Thats pretty cool 8D

[@DeLvoy1988]

Still pretty cool in 2017 :)

[@chris.scott510]

pretty cool huh

[@lilhobby]

"Pretty cool huh?!" - Travis from DevTips

[@OfficialDevTips]

hahaha

[@funkysoul619]

And did I tell you that the folks at "How Stuff Works" are taking you in for the rest of the episodes ?

[@nishanthsubramanya1931]

Pretty Kool huh!!

[@3mroos4]

Good video man! haha pretty cool bruh

[@CsabaKissColorado]

I watched all 8 of these videos in a row. If I hear this loop music again, I will hang myself...

[@OfficialDevTips]

Yea, that's kid of all over these old videos... :\

[@shahedurrahman4568]

marvelous

[@kwantumd]

I like how your "pretty cool, huh!?" evolved into a psychedelic experience for the internetz

[@OfficialDevTips]

LSD is pretty cool huh! jk

[@phillipryan4466]

Just curious if you liked Pauly Shore movies?

[@JebediahsLab]

h1 { color: red; } p { color: blue; } What? Is this out of date? Is this type of HTML/CSS old or out of date? Because I use it.. Or is there a newer type?

[@alexmarshall957]

+Jebediah's Lab It's not "out of date" really, I just think this channel uses templating engines like Jade, and CSS preprocessors like Sass because it tends to make things easier to develop.

[@JebediahsLab]

Alex Marshall Got it.

[@TheSqnkov]

PRETTY COOL HUH?!

[@OfficialDevTips]

Hahah!!

[@Johnson882]

web development tim and eric style?

[@OfficialDevTips]

How so?

[@Johnson882]

+DevTips the way you talk and the editing

[@Selrond]

The main reason I'm afraid of getting used to SASS is that an existing CSS codebase is not compatible with it... :/ it is with SCSS

[@OfficialDevTips]

There are so many ways to work with the two together.

[@xeonace]

Pretty Cool! huh?

[@TomSAXS]

Try: "CSS-On-Diet - easy and fast CSS preprocessor"

[@OfficialDevTips]

wow. Well this certainly isn't as robust as sass, but there are some very cool ideas there. Thanks for sharing!

[@kentlouisdeleon9427]

pretty coll huh =))

[@Adykai]

are you Travis ? whhhhhhhhhhhhhhhhhhhhhhhhhaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat!!

[@OliSpicer]

OMG YOUR BEARD !

[@OfficialDevTips]

It's like a moving target. Here, there. whoosh!