10 Helpful VS Code Extensions for HTML & CSS

Visual Studio Code has quickly become the code editor of choice among many developers. The vast extension library is one of its main drawing points. In this video, we quickly explore 10 helpful Visual Studio Code Extensions for HTML & CSS. What extensions are you using to help improve your productivity? Comment below and let us know!!

⌚︎ Timestamps
00:00 - Introduction
00:17 - 1 - Live Server
01:17 - 2 - Auto Rename Tag
02:44 - 3 - Prettier
03:50 - 4 - IntelliSense for CSS class names in HTML
06:45 - 5 - CSS peek
08:01 - 6 - CSS Grid Snippets
10:09 - 7 - CSS Flexbox Cheatsheet
11:30 - 8 - Lorem ipsum
12:11 - 9 - vscode-icons/Material Icon Theme
14:28 - 10 - GitLens
15:41 - Conclusion

***

Become a more effective Developer by using Kite!

Kite is a free AI-powered coding assistant that will help you code faster and smarter. The Kite plugin integrates with all the top editors and IDEs to give you smart completions and documentation while you’re typing. I've been using Kite for 6 months and I love it!

[hugolabs]

Two personal must-haves for me are Todo Tree (extends the custom tracking of TODOs to a customizable list of code words) and Rainbow Brackets (for when your statements get a bit too self-embedded). Heartily recommend both.

[beckyandrews]

Dude, seriously, thank you so much! That was really clear and really helpful. I so appreciated that you actually showed what each one does in real time.

[equationalapplications]

Thanks for putting me on the fast track to setting up VSCode for HTML.

[eethend]

Thanks so much! Just started HTML+CSS and really love VCS so far. Just didn't know where to start with extensions for what i need. You explained all of these so well.

[breedi]

Love the clear explanations of every extension, thanks! :D

[javiernunez]

Hell yes man, thank you for the suggestions. I’m barely getting back into HTML and I didn’t really use it much outside of school, so it’s nice to improve quality of life

[othmandjuliarso]

They are all very helpful. I think they are going to be very handy! Thank you!!

[juliadixon]

hello! im new to coding, thanks for making this easier!! i look forward to watching more of your videos!

[jangavlik]

probably coolest guy that i saw doing tutorials

[shekharveera]

Awesome and very well explained!! Thanks!

[luismurillo]

Thanks man, it’s helps me a lot, you are amazing.

[Vichion]

With peek you can edit the CSS straight in the peek window, no need for actually visiting the file. it's amazing.

[marshwiggleme]

As someone who is learning and sometimes get mixed up putting styles on the wrong element, it would be cool if there was some sort of inheritance or relationship tree extension that was color-coded or something, does such a thing exist? Or maybe something like peek but shows you associated elements.

[tashoni]

Mad respect my man, thanks for this video im new to coding and this will help me so much. I subbed and liked -_-

[ConnorAZ]

Man this guy seriously his voice is like asmr goes 90s 😂 its soooo good his voice is awesome I can watch this video all day long ❤️

[tubes]

Great tips! Thanks, im like the cool kid in my college course now.

[nighthawk_]

I'm currently looking for a very basic tutorial of how and what I need to do to Visual Studio Code to start coding .HTML & .CSS basic code.

[jameljacobs]

Really loved this video. It was informative and fun.

[gerozayas]

This is a great video, thanks a lot!!

[shubhamtiwari]

Excellent extentions you told it helps me a lot