Why You Should Be Using CSS Variables

CSS Variables are a great new(ish) addition to CSS. Learn how to use them and how they can help you write cleaner, more meaningful CSS code.
Notes: www.notion.so/CSS-Variables-1...
If you're ready to launch your career as a software engineer, check out my job-guaranteed bootcamp with Springboard: springboard.com/workshops/sof...

[@What_was_wrong_w_jst_our_names]

Boss: make sure you check your work in IE Me: yea will do boss *i don’t test my websites in ie*

[@soufianesammah5936]

it's a pleasure to give my suggestion : - Chrome or Mozilla DevTool tips - Steps toward creating our own applications (planning, sketches, thinking and so on )

[@Mostafaabobakr7]

JavaScript Performance debug

[@soufianesammah5936]

I love to add : How react hooks work behind the scene ?

[@dmytsv]

As for a new topic I would suggest stuff that is needed at dev work but not available in most bootcamps, e.i. 1. advanced git with --rebase, cherry-pick, PR/MR 2. devops (Travis, Jenkins), advanced webpack/gulp 3. Agile, Jira (very, very frequently used in workflow) 4. npm linking and work with npm modules 5. LinkedIn, GitHub, resume, portfolio - all the job-hunting things PS CSS/Sass bootcamp would be nice to have too

[@shashanksshetty9870]

My suggestion are as follows: 1. Swagger docs integration with node application. 2. e2e testing with puppeteer and jest. (Would love to see it with react.js) 3. Making own NPM package 4. Progressive web app (PWA).

[@Pgarbs]

Colt, I love the style of your apps. You should do a full CSS course!

[@yuhceeofficial]

Thank you Colt Steele. The gift that keeps giving.

[@Shubham-b]

Hi Colt, Love your work! My suggestions would be 1. Machine learning course from you would be great. 2.Big Project courses cuz no one's offering this. 3. Redux 4. this keyword and advanced JavaScript. 5. More backend.

[@hnasr]

Very powerful feature. Never heard about css variables before this video! Thanks great video

[@AshishKumar-sl4ul]

Another awesome and unique content ...colt ..thanks ..could be able to showcase your daily tools that you are using for development.

[@francisseneve2934]

Hi Colt Steele I love all your courses on udemy. PHP bootcamp will help because I love your teaching style. Thanks!

[@SweetInsanity]

I'd like to hear some advice for people looking to land a job in the industry or as a freelancer on remote, maybe also about your experience when you started working or some informative story you think could help someone looking for a career change. But to be fair I'd really listen any lesson you want to share.

[@GTsurwa]

My Suggestions: CSS Grids mini crash course, JavaScript prototypes, inheritance, classes / subclasses. Thanks for all you do Colt.

[@codingbrew705]

Colt, your videos are amazing :) The tutorial videos you make along with your Udemy courses helped me land a full-time engineering role. Just wanted to drop a note and say thanks!

[@AuthorJamsNRosesGoogle]

Nice work, brother

[@RobertWildling]

Nice! Thank you! As for tips for upcoming videos: - Didn't you want to make more tutorials on the binary topic? That would be great. - Also, a tutorial from you on Javascript binary operators and where to use them would be most welcome!

[@nexorumby]

I would love to see a more complete git course where you also talk about a service like github or gitlab, and how to use those effectively with a team. You can talk about when you should make new branches, when to merge, more advanced flags when using git, etc . Another interesting video would be about object oriented programming using inheritance and polymorphism. (I'm pretty sure Javascript has that capability, but I most use C++) I know you mentioned in your "Things I don't know in 2019" video that you don't know a whole lot about docker/kubernetes, so I think it would be really fun if you documented your learning process while trying to figure those things out. It doesn't have to be with docker or kubernetes specifically, it could be over any technology that you want to learn, but I'm also trying to figure out how docker works so that's just what came to mind first. Cheers

[@MyDpop]

“keep your JavaScript as javascriptie as possible.” 👍

[@boristrofimov58]

My suggestion is about an authorization flow. What are the auth tokens, why use databases for sessions, how to register that user is logged in, what's an OAuth and are there more ways (like authorization patterns maybe) to authorize users. Thanks for the videos, btw!

[@DevSprout]

yeah, but it doesn't work in IE :'( (my fav. browser..)

[@filcondrat]

yeah, it's everybody's fav

[@eh-lo2do]

Ie is your fav browser ? Lol

[@leechurchill1965]

Sarcasm?🤔

[@ShadiMuhammad]

looool 😂😂

Forget IE use Edge!

[@ademineshat]

My suggestion will be a Series or a Playlist for "Angular, React or PHP".

[@SachinKumar-ss2zx]

Thank you Colt for asking for our suggestion. I would like you to make more videos on front-end, CSS, Sass and a full Playlist on React JS. And, thank you for your web developer course on Udemy,it's because of you that I am finally confident enough to call myself a full stack developer. Thank you, Colt. :)

[@SeamusMcMichael]

Excellent video

[@Hyp3rSp8c3]

I always appreciate you making these videos. How about solving small coding problems, like video solutions to solving algorithm problems. A 10-15 mins video on the thought process of the solution. You can check out codewars for finding problems to solve. Or maybe more coding examples of using recursions.

[@llihak]

suggested topic: some advice on how to effectively use custom properties in responsive layouts, including advanced techniques. thanks for the videos, very helpful.

[@sabapathy13]

Angular Bootcamp would be an amazing choice, Colt :)

[@ernestomotta5178]

Thank you!

[@samirphuyal4956]

Please make a course on Flutter

[@harshanani7494]

Angular from beginner to Advanced

[@bikabas]

Suggestion : working of Javscript async await function (under the hood stuff). That way, we cover promises too and get to know the deeper reasons behind using promises other than just to aviod 'callback hell'. And then the transition to async await.BTW ... did'nt quite get your Example 2 mentioned in your notes.... not sure if something is amiss ??

[@WinserEspinal]

Great stuff

[@dakshsagar2839]

Regarding suggestions, something , anything for intermediate developers, there is so much beginner stuff, but no one talks beyond that. So you can talk about stuff like concurrency, threads, microservices , scaling, system design, etc

[@robbysingh8557]

Hey colt, any eta on the complete web developer course update?

[@kenneth973]

Writing tests with enzyme and jest Especially testing connected components

[@zerixful]

Useful video! As far as colors CSS variables are even more useful when making gradients with 20 different colors xD👍🏻

[@MarshallSC1]

My suggestions for future videos: 1. Video(s) on Svelte.js. As in-depth as you can. 2. Video on Pagination project with vanilla JS. Section with pagination or entire page with pagination.

[@sandeep.ranjan_]

Suggestions 1. Caching in node js 2. Next js set up 3. When to use which error code 4. Complex css animations

[@hasanrizvi2047]

ReactJS (beginner -> advanced), thanks Colt, you're fantastic.

[@IfISpeakBigTrouble]

Colt has this course on Udemy www.udemy.com/course/modern-react-bootcamp

[@SweetInsanity]

Oh, do you use any organization method and what's your opinion on the GTD?

[@GTsurwa]

Also, Promises in JS.

[@samirsamir7779]

Hello Sir , thanks for your phenomenale udemy course , I bought it ( bootcamp dev html , css , js , Bootstrap ...etc ) , please is there any PHP course coming in the futur ?

[@farukabdullamunshi8358]

Colt, thank you very much for your WDB Udemy course. It made my life easier. Finally, I think I am progressing.

[@dylanlivera]

Could you please do some videos on testing. E.g. how to test a express app.

[@farshid3550]

could you please make a video about generator function?

[@rayanfernandes2631]

can u make a peer rtc music play app .... like it should be a web app that would connect to ur hotspot and play music simultaneously on all connected devices

[@cosmicstryderninaa.3364]

Hey I have to make a modal pop -up with a changable theme - like a gif sort of where the colours change . I extract data from my json and then sort 4 separate colour themes using variables. I cant find a tutorial anywhere, I kind of understand it, its just so many steps to be done I kind of lost it :===) Do you know any examples done with css variables and javaScript? Thanks for reading I'll subscribe

[@theprakashkumar]

How you make and maintain notes for yourself?

[@andreacau6050]

waiting for the next video in the binary series!

[@amitpallauri]

Colt, i have been following your web development bootcamp in udemy. Could you please make a site using css grid layouts?

[@hemanshummahajan]

Can you please make some video or tutorial on Parse Server?

[@19jewels95]

So. Damn. Clean.

[@chrismclaughlin1073]

GraphQL and Gatsby and Netlify, oh my!

[@ShivamGupta1]

Awesome, Use case :)

[@heyiamigor]

How about a course on Redux and/or other somewhat "must know" frameworks for frontend developers who use React?

[@dixitk13]

organizing CSS classes, nomenclature and variables

[@chaos6094]

I requested it before but i think it got lost in the sea of comments, kindly make a video about experimental decorators in NodeJS!

[@MarkKozel]

Nice tutorial I'd like to see a Vue tutorial (or series) and update your webpack series with a video on Vue in Webpack

[@oskarzanota7116]

A video about PWA on mobile devices would be great !

[@nepalcodetv6298]

My Suggestions: 1. OOP JS 2. ADVANCED SCSS 3. JAVASCRIPT API Eg: INTERSECTION OBSERVER, MEDIA SESSIION API or Just do what looks awesome...

[@keemeshrampersad8859]

Colt when is your next Udemy course coming out?

[@adityashinde3864]

Please make more css videos

[@geoffjames992]

For anyone worrying about the (lack of) support for CSS variables in IE, I can recommend a ponyfill called "css-vars-ponyfill". It's available at: jhildenbiddle.github.io/css-vars-ponyfill/ and can be used as a script or through npm. I've had the same headache with IE11 not supporting CSS variables, and thus far this ponyfill has come up top trumps. Works brilliantly, and there's also a lot of options to customise how you like, and even watch for changes, too. Hope this helps some of you guys out. Thanks for the super content as always, Colt!

[@vineetdhimancode]

Suggestion: creative small games in JavaScript :} Thonkyou

[@Luxcium]

(Did anyone told you about 1)TypeScript ???’) NodeJS advanced topics (i.e. please not something using express) 2)STREAMS AND BUFFERS, or 3)REPL (making it custom) or 4)Child Processes ... 5) where are your cats anyway ?? 6) talk to us about the making of a KZbin video time and effort and process

[@sbtoolman12123]

Why does it seem to me using a variable is the same or more amount of typing as not using a variable?? Am i missing something?

[@emmanuelbonilla9353]

Advance DOM manipulation, making a Carousels with vanilla JS... or something difficult to do i'm just saying a example

[@Luxcium]

You should mix and match the beginner intermediate and advanced levels but in a way that makes it interesting for an advanced user to watch the beginners video (maybe because it gives a recap of forgotten basics ideas) and same for advanced topics (beginners can follow along because your skills of explaining complex stuff to anyone) whatever your subject each video should probably be some time advanced and sometimes intro level and then CSS JavaScript (TypeScript) NodeJS (and NodeJS advanced topics or usages not directly related to web servers) HTML/JSX, Redis, Docker, Azur/AWS/Google and DevOps, Jest and Testing or Mocha (or both), how to install Prettier and ESLint with TypeScript support (how to migrate from TSLint to ESLint) following up with the intro level video you did already that got more views than average and doing the advanced version and VSCode settings, extension, key binding, debugging, tasks and VSCODE power user stuff like getting into the code source

[@akashrajum3319]

Please make a video on how to use git with GitHub. Thanks.

[@gilhooli6685]

Hi Colt. Could you explain in one video how icons in materialize library are rendered by the css. Like delete How the css takes the word and replace it with the correct icon. Thanks a lot. :-)

[@brickstv3156]

What is the difference between CSS classes and Variables

[@ivanskubko9177]

Courses on more fundamental things would be nice. Like your "Algorithms and Data Structures" - that was very cool. Lets dig into computer science hard! PS: Colt, how chicks are? I'm a bit worried not to hearing update on them

[@RedEyedJedi]

Yeah I bought that course too, it's excellent.

[@rajumondal4283]

How to design website with animations

[@atmunn1]

What about a video about CSS functions? As of right now, the only function I know how to use is var(), lol

[@web_dev_cz]

please make also a video "WHEN You Should NOT Be Using CSS Variables" because not everything should be variable-d. people tend to use one approach to everything for simplicity. please showcase why it is still better to have preprocessor replace some instead of having it customizable in runtime (e.g. rounded corner size, etc...)

[@TheInimicus]

How is it a "variable"? It's not a runtime, so you should call it a constant or a property

[@DaveBriccetti]

Thanks for this. Suggestion: call this symbol: - a hyphen. Dashes are wider. -

[@CarolinaDota]

Examples of Arrays in use in a program

[@mohsinmemon710]

U told u were gonna make an announcement ?

[@FaizanMalik-gk1rq]

make video of roadmap to become a full stack developer in 1 year or 2 year.... with some courses online avaible for them

[@samirsamir7779]

check his udemy long course ...

[@FaizanMalik-gk1rq]

@@samirsamir7779 which one

[@samirsamir7779]

@@FaizanMalik-gk1rq www.udemy.com/course/the-web-developer-bootcamp

[@associatedbiblestudentsofs5308]

I need an html5 video tutorial showing user selected videos. A single player with multiple user selected video from on click event on pic

[@tajpouria]

Hi Colt , please go for an advance git crash course about 1,5 or 2 hours, there is no such thing out there thanks a lot,

[@MrRuchir23]

Design pattern in Javascript

[@user-zp1dv4yh5e]

Question for next topic: How much Javascript need to learn for Web Development?

[@eh-lo2do]

Three js bro or gsap

[@manmanmanichfindekeinennam7613]

Since when has css variables? Is that a new feature?

[@Italiafani]

Custom properties for CSS were introduced by the W3C in 2012, but up until 2015 the global browser support was still less than 9% (reported by caniuse.com). In 2016 the same number rose to 69%. So yes, but actually no. Depends on what you consider new - it's a relatively new concept, but it's clearly older than it's support and use in action seems to be.

[@programinggrid967]

Javascript data structures would be interesting.

[@sirving1297]

any variable that doesnt need to change dynamically should be handled by your CSS preprocessor.

[@hamzajaved1115]

CSS Grid System

[@supertenchoo4271]

do java script tutorial for beginner

[@taraskurilo158]

React Gsap

[@aestheticallyamazing2003]

Responsive mobile navbar pls

[@dmytsv]

Here's the single page app using only SASS, CSS and CSS variables with gaming AI (also CSS based). dmytsv.github.io/sass-spa/index.html#home So, yeah, CSS variables are awesome! Thanks for great content, Colt!

[@tanvirshafi9212]

please do a video about Sass

[@vb97542]

Redux with React

[@radhagobindamishra4649]

A course on Angular.

[@aseel1024]

please Vue.js course! anyway I think SCSS is better in my opinion.

[@georgekalogeropoulos1813]

Animation tutorials !!!

[@davide4607]

They shouldn't even have a listing for IE. We can just assume it doesn't support anything.

[@jayanths1221]

"Nothing about CSS variable is support by Internet Explorer" - So, I guess I'll never be using this at work ever...

[@pauldudley1273]

look up npm package css-vars-ponyfill .

[@brunokotesky5965]

In my opinion it's just easier and better to use SCSS.

[@purplep3466]

css hacker