Grab and learn
Code editor Setup VScode
Top Navigation Sticky Navbar Hamburger Collapse Columns 2D transforms 3D transforms Normal card Flip card Scrollbar Progressbar Skillbar Alert Jumbotron Forms Popover Tooltip Background overlay Breadcrumbs Toast Radio buttons Text input Range sliders Dropdown Pagination Modals Color picker Icons Tables
Curtain menu Mega menu Toggle sidebar Collapsed sidepanel Full screen navigation Hide navbar on scroll Shrink navbar on scroll Page animation Image magnifier
Hover animations Parallax Scroll animation Scroll down animated icon Auto typer Carousel Animated icons Particles Smooth scroll Text animations Cube animations
Online website
Domain name Hosting SEO structure Crawling Indexing Canonical links Sitemap Robots.txt Google Search Console Google Analytics
Beginners Bootstrap Responsive websites Sass CSS grid CSS flexbox
Vanilla JQuery Page animation Async Javascript AJAX Node.js React JS Express

Setup VScode

On this page we explain how to setup your Visual Studio Code as you like and get to know about the handy extensions VScode offers you to make programming much easier.

Start learing HTML & CSS

If you like to learn HTML and CSS in an efficient way, then checkout our carefully selected HTML and CSS tutorials we considered as most effective.

Important extensions

Extension Explained
Material Theme Color themes let you modify the colors in Visual Studio Code's user interface to suit your preferences and work environment.
Prettier Prettier Formatter for Visual Studio Code Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
Bracket Pair Colorizer 2 This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
Indent-Rainbow This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Nim or Python
Auto Rename Tag Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
REST Client REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
CSS Peek This extension extends HTML and ejs code editing with 'Go To Definition' and 'Go To Symbol in Workspace' support for css/scss/less (classes and IDs) found in strings within the source code.
HTML CSS Support Peek Missing CSS support for HTML documents.
Live Sass Compiler A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.
Live Server Launch a local development server with live reload feature for static & dynamic pages.

Setup Visual Studio Code

This video is explaining the following extensions

  • 00:55 - Material Theme, Material Icon Theme
  • 02:10 - Prettier
  • 03:30 - Bracket Pair Colorizer 2
  • 04:40 - indent-rainbow
  • 05:06 - Auto Rename Tag
  • 05:38 - REST Client
  • 08:17 - CSS Peek
  • 09:17 - HTML CSS Support
  • 10:21 - Live Sass Compiler
  • 13:46 - Live Server
  • 15:35 - HTML5 Boilerplate
Copyright © 2020