An open API service indexing awesome lists of open source software.

https://github.com/codegyan-llc/advanced-html-snippets

A collection of handy HTML snippets designed to speed up your web development workflow. This extension includes basic HTML boilerplates, common HTML tags, and other useful snippets for HTML coding.
https://github.com/codegyan-llc/advanced-html-snippets

codegyan html-snippet prathmeshyelne vs vscode-extension

Last synced: about 1 year ago
JSON representation

A collection of handy HTML snippets designed to speed up your web development workflow. This extension includes basic HTML boilerplates, common HTML tags, and other useful snippets for HTML coding.

Awesome Lists containing this project

README

          

# Advanced HTML Snippets for Visual Studio Code

A collection of handy HTML snippets designed to speed up your web development workflow. This extension includes basic HTML boilerplates, common HTML tags, and other useful snippets for HTML coding.

## Features

- **Basic HTML5 Boilerplate**: Quickly insert a basic HTML5 structure with a single snippet.
- **HTML Link Tag**: Add a link tag for external stylesheets.
- **Other HTML Tags**: Includes snippets for tags like `div`, `a`, `img`, `button`, and more.

## Installation

### Via VS Code Marketplace

1. Open **Visual Studio Code**.
2. Navigate to the **Extensions** view by clicking the Extensions icon in the Activity Bar on the side of the window or pressing `Ctrl+Shift+X`.
3. Search for `Advanced HTML Snippets` in the Extensions Marketplace.
4. Click **Install**.

### Manually (for development or testing)

1. Clone this repository:
```bash
git clone https://github.com/Codegyan-LLC/advanced-html-snippets.git
```

2. Open the project folder in Visual Studio Code.
3. Press F5 to run and test the extension in a new VS Code window.

## Usage
Once installed, you can use the following snippets by typing their prefix and hitting Tab to expand them:

### Available Snippets

- !html5: Inserts a basic HTML5 boilerplate structure.
- !!html5: Inserts a advanced HTML5 boilerplate structure.
- link: Adds an HTML <link> tag for including an external stylesheet.
- div: Inserts a <div> tag.
- a: Inserts an <a> tag for links.
- img: Adds an <img> tag for images.
- button: Inserts a <button> tag.

### Example:
1. In an HTML file, type !html5 and press Tab.
2. The following code will be inserted:

![Code](images/code.png)

## How to Contribute
We welcome contributions to this extension! If you would like to add more snippets or improve the extension, feel free to fork the repository, make changes, and submit a pull request.

## Steps to Contribute:
1. Fork the repository.
2. Clone your fork:
```bash
git clone https://github.com/Codegyan-LLC/advanced-html-snippets.git
```
3.Create a new branch:
```bash
git checkout -b feature-name
```
4. Make your changes (e.g., add new snippets).
5. Commit your changes:
```bash
git commit -m "Added new snippets"
```
6. Push to your fork:
```bash
git push origin feature-name
```
Open a pull request on the original repository.

## License
This project is licensed under the **[MIT license](https://opensource.org/licenses/MIT)**. See the LICENSE file for details.