HTML Boilerplate for Visual Studio Code & Sublime Text

I mentor junior web developers and fresh graduates. First thing that they have to deal with is an HTML page & first question that I have to answer is usually like: "Do we have to memorize this code?" The answer is: No! Web developers and software engineers don't memorize code. They use generators, tools and boilerplates to start a project. They have general understanding of what the code does but memorizing code is not necessary. Also code, workflow and technologies change with time. So why memorize code?

Generating an HTML boilerplate document in code editor, is very easy. Two widely used code editors are 'Sublime Text' code editor and 'Visual Studio Code' editor.

For Visual Studio Code, open document with .html extension or create one. Type exclamation sign ! and hit tab. This will generate HTML code to start with. Visual Studio Code does this with help of built-in support from Emmet. Now Emmet can also be installed for Sublime Text.

For Sublime Text, same keys will be used

! + Tab

But to make this work in Sublime Text, make sure you have installed Emmet package for Sublime Text.

https://emmet.io/blog/sublime-text-3/

To install Emmet package in sublime Text, first you need to install 'Package Control' in sublime Text.

https://packagecontrol.io

I have already installed 'Package Control' for Sublime Text. When you have package control for sublime Text, you can browse and install packages for sublime Text. Packages are like extensions for this code editor. So the preferred way to install Emmet in Sublime Text is to use Package Control:

Go to Preferences, then Package Control, then click 'Install package', search 'Emmet' and install it.

That's it.

So, exclamation sign and tab is all you need to remember to generate HTML boilerplate. Even if you are creating HTML page or starting a React project or VueJS project, there will be always boilerplates and generators to help you with. So don't worry. Dont do it manually, look for boilerplates and ready to use snippets that are available everywhere.

Also make sure your HTML has these two lines (meta tags for responsiveness in head section)
If it doesn't, your webpage will not be responsive across different devices.

Thank You!
? LIKE VIDEO
? SUBSCRIBE
? PRESS BELL ICON
✍️ COMMENT

Channel: https://www.youtube.com/webstylepress
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress
Twitter: https://twitter.com/webstylepress
GitHub: https://github.com/webstylepress
#boilerplate #tutorials #webdevelopment #webstylepress #html #htmltutorial #vscode #sublimetext