https://github.com/hackthacker/html-shorth-notations-efficient-coding
A collection of shorthand notations for generating repetitive HTML elements with sequentially numbered identifiers. These shorthand notations are designed to speed up the coding process and improve productivity. Includes examples for commonly used patterns such as divs, lists, tables, forms, headers, footers, and more.
https://github.com/hackthacker/html-shorth-notations-efficient-coding
Last synced: about 2 months ago
JSON representation
A collection of shorthand notations for generating repetitive HTML elements with sequentially numbered identifiers. These shorthand notations are designed to speed up the coding process and improve productivity. Includes examples for commonly used patterns such as divs, lists, tables, forms, headers, footers, and more.
- Host: GitHub
- URL: https://github.com/hackthacker/html-shorth-notations-efficient-coding
- Owner: hackThacker
- Created: 2024-05-03T14:03:17.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-03T15:30:13.000Z (almost 2 years ago)
- Last Synced: 2025-07-21T10:52:41.379Z (9 months ago)
- Size: 146 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# HTML-Shorth-Notations-Efficient-Coding
To download the PDF cheatsheet, click [here](https://github.com/hackThacker/HTML-Shorth-Notations-Efficient-Coding/blob/main/cheatsheet.pdf).
1. ```markdown
div.box$*4>span.item$*3
```
**Generates four `
` elements with class names `.box1` through `.box4`, each containing three `` elements with class names `.item1` through `.item3`.**
2. ```markdown
ul.list$*3>li.item$*5
```
**Creates three unordered lists (`
`) with class names `.list1` through `.list3`, each containing five list items (`- `) with class names `.item1` through `.item5`.**
3. ```markdown
table.table$*2>tr.row$*3>td.cell$*4
```
**Produces two tables (``) with class names `.table1` and `.table2`, each having three rows (``) with class names `.row1` through `.row3`, and each row containing four cells (``) with class names `.cell1` through `.cell4`.**
4. ```markdown
section.section$*4>h2.title+div.content$*2
```
**Creates four sections (``) with class names `.section1` through `.section4`, each containing an `
` element with class name `.title` and two `` elements with class names `.content1` and `.content2`.**
5. ```markdown
nav.navbar$*2>ul.menu$*2>li.item$*3>a
```
**Generates two navigation bars (``) with class names `.navbar1` and `.navbar2`, each containing two unordered lists (`
`) with class names `.menu1` and `.menu2`, and each list containing three list items (`- `) with class names `.item1` through `.item3`, each containing an anchor (``) element.**
6. ```markdown
footer.footer$*3>p.text$*2
```
**Creates three footers (``) with class names `.footer1` through `.footer3`, each containing two paragraphs (`
`) with class names `.text1` and `.text2`.**
7. ```markdown
div.row$*3>div.col$*4
```
**Generates three rows (`
` with class names `.row1` through `.row3`), each containing four columns (`` with class names `.col1` through `.col4`).**
8. ```markdown
section.block$*3>div.inner$*2
```
**Produces three sections (``) with class names `.block1` through `.block3`, each containing two `
` elements with class names `.inner1` and `.inner2`.**
9. ```markdown
article.article$*2>h1.title+div.content
```
**Creates two articles (``) with class names `.article1` and `.article2`, each containing an `
` element with class name `.title` and a `` element with class name `.content`.**
10. ```markdown
div.container$*3>div.row$*4>div.col$*3
```
**Generates three containers (`
` with class names `.container1` through `.container3`), each containing four rows (`` with class names `.row1` through `.row4`), and each row containing three columns (`` with class names `.col1` through `.col3`).**
11. ```markdown
div.grid$*3>div.cell$*9
```
**Creates three grids (`
` with class names `.grid1` through `.grid3`), each containing nine cells (`` with class names `.cell1` through `.cell9`).**
12. ```markdown
ul.tabs$*3>li.tab$*4>a
```
**Generates three sets of tabs (`
` with class names `.tabs1` through `.tabs3`), each containing four tab items (`- ` with class names `.tab1` through `.tab4`), each containing an anchor (``) element.**
13. ```markdown
div.carousel$*2>div.slide$*5
```
**Creates two carousels (`
` with class names `.carousel1` and `.carousel2`), each containing five slides (`` with class names `.slide1` through `.slide5`).**
14. ```markdown
nav.navbar>ul.navbar-nav>li.nav-item$*5>a.nav-link
```
**Generates a navigation bar (`` with class name `.navbar`), containing an unordered list (`
` with class name `.navbar-nav`), with five list items (`- ` with class names `.nav-item1` through `.nav-item5`), each containing an anchor (``) element with class name `.nav-link`.**
15. ```markdown
div.timeline$*2>div.event$*4
```
**Produces two timelines (`
` with class names `.timeline1` and `.timeline2`), each containing four events (`` with class names `.event1` through `.event4`).**
16. ```markdown
ul.menu$*2>li.item$*5>a
```
**Creates two menus (`
` with class names `.menu1` and `.menu2`), each containing five list items (`- ` with class names `.item1` through `.item5`), each containing an anchor (``) element.**
17. ```markdown
div.gallery$*3>img.photo$*6
```
**Generates three galleries (`
` with class names `.gallery1` through `.gallery3`), each containing six photos (`![]()
` with class names `.photo1` through `.photo6`).**
18. ```markdown
div.banner$*2>img.banner-image+p.banner-text
```
**Creates two banners (`
` with class names `.banner1` and `.banner2`), each containing an image (`![]()
` with class name `.banner-image`) and a paragraph (`` with class name `.banner-text`).**
19. ```markdown
div.hero$*3>h1.title+div.content
```
**Produces three hero sections (`
` with class names `.hero1` through `.hero3`), each containing an `` element with class name `.title` and a `` element with class name `.content`.**
20. ```markdown
div.feature$*4>h2.title+p.description
```
**Generates four feature sections (`
` with class names `.feature1` through `.feature4`), each containing an `` element with class name `.title` and a `
` element with class name `.description`.**
21. ```markdown
div.promo$*2>h3.title+img.promo-image
```
**Creates two promo sections (`
` with class names `.promo1` and `.promo2`), each containing an `` element with class name `.title` and an image (`![]()
` with class name `.promo-image`).**
22. ```markdown
div.testimonial$*3>p.quote+span.author
```
**Produces three testimonials (`
` with class names `.testimonial1` through `.testimonial3`), each containing a paragraph (`` with class name `.quote`) and a `` element with class name `.author`.**
23. ```markdown
div.feature-box$*4>h4.title+p.description
```
**Generates four feature boxes (`
` with class names `.feature-box1` through `.feature-box4`), each containing an `` element with class name `.title` and a `
` element with class name `.description`.**
24. ```markdown
div.panel$*3>h2.title+div.body
```
**Creates three panels (`
` with class names `.panel1` through `.panel3`), each containing an `` element with class name `.title` and a `` element with class name `.body`.**
25. ```markdown
div.tile$*4>h3.title+img.tile-image
```
**Generates four tiles (`
` with class names `.tile1` through `.tile4`), each containing an `` element with class name `.title` and an image (`![]()
` with class name `.tile-image`).**
26. ```markdown
div.sidebar$*2>ul.menu$*2>li.item$*3>a
```
**Produces two sidebars (`
` with class names `.sidebar1` and `.sidebar2`), each containing two menus (`` with class names `.menu1` and `.menu2`), and each menu containing three list items (`- ` with class names `.item1` through `.item3`), each containing an anchor (``) element.**
27. ```markdown
div.box$*3>div.header+p.content
```
**Creates three boxes (`
` with class names `.box1` through `.box3`), each containing a `` element with class name `.header` and a `` element with class name `.content`.**
28. ```markdown
div.feature$*5>h3.title+p.description
```
**Generates five feature sections (`
` with class names `.feature1` through `.feature5`), each containing an `` element with class name `.title` and a `
` element with class name `.description`.**
29. ```markdown
div.slide$*5>img.slide-image+p.slide-caption
```
**Produces five slides (`
` with class names `.slide1` through `.slide5`), each containing an `![]()
` element with class name `.slide-image` and a `` element with class name `.slide-caption`.**
30. ```markdown
div.tab$*4>h3.title+p.content
```
**Creates four tabs (`
` with class names `.tab1` through `.tab4`), each containing an `` element with class name `.title` and a `
` element with class name `.content`.**
31. ```markdown
section.container$*3>div.row$*2>div.col$*4
```
**Creates three containers (`` with class names `.container1` through `.container3`), each containing two rows (`
` with class names `.row1` through `.row2`), and each row containing four columns (`` with class names `.col1` through `.col4`).**
32. ```markdown
div.gallery$*2>div.row$*3>div.col$*4>img.photo$*3
```
**Generates two galleries (`
` with class names `.gallery1` and `.gallery2`), each containing three rows (`` with class names `.row1` through `.row3`), and each row containing four columns (`` with class names `.col1` through `.col4`), and each column containing three photos (`![]()
` with class names `.photo1` through `.photo3`).**
33. ```markdown
div.carousel$*3>div.slide$*6>img.slide-image+p.slide-caption
```
**Produces three carousels (`
` with class names `.carousel1` through `.carousel3`), each containing six slides (`` with class names `.slide1` through `.slide6`), each slide containing an image (`![]()
` with class name `.slide-image`) and a caption paragraph (`` with class name `.slide-caption`).**
34. ```markdown
div.card$*5>div.card-header+h3.card-title+div.card-body>p.card-text+button.btn.btn-primary
```
**Creates five cards (`
` with class names `.card1` through `.card5`), each containing a header (`` with class name `.card-header`), a title (`` with class name `.card-title`), a body (`` with class name `.card-body`) containing text (`` with class name `.card-text`), and a button (`` with classes `.btn` and `.btn-primary`).**
35. ```markdown
div.hero$*2>img.hero-image+h1.hero-title+p.hero-description+a.hero-link
```
**Generates two hero sections (`
` with class names `.hero1` and `.hero2`), each containing an image (`![]()
` with class name `.hero-image`), a title (`` with class name `.hero-title`), a description (`
` with class name `.hero-description`), and a link (`` with class name `.hero-link`).**
36. ```markdown
div.navbar$*2>ul.navbar-nav>li.nav-item$*4>a.nav-link
```
**Produces two navigation bars (`
` with class names `.navbar1` and `.navbar2`), each containing an unordered list (`` with class name `.navbar-nav`), with four list items (`- ` with class names `.nav-item1` through `.nav-item4`), each containing an anchor (`` with class name `.nav-link`).**
37. ```markdown
div.tile$*3>div.tile-image+div.tile-content>h2.tile-title+p.tile-description+a.tile-link
```
**Creates three tiles (`
` with class names `.tile1` through `.tile3`), each containing an image (`` with class name `.tile-image`) and content (`` with class name `.tile-content`), including a title (`` with class name `.tile-title`), a description (`
` with class name `.tile-description`), and a link (`` with class name `.tile-link`).**
38. ```markdown
div.box$*4>div.box-header+h4.box-title+p.box-content
```
**Generates four boxes (`
` with class names `.box1` through `.box4`), each containing a header (`` with class name `.box-header`), a title (`` with class name `.box-title`), and content (`
` with class name `.box-content`).**
39. ```markdown
div.feature$*3>img.feature-image+h3.feature-title+p.feature-description+a.feature-link
```
**Creates three feature sections (`
` with class names `.feature1` through `.feature3`), each containing an image (`![]()
` with class name `.feature-image`), a title (`` with class name `.feature-title`), a description (`
` with class name `.feature-description`), and a link (`` with class name `.feature-link`).**
40. ```markdown
div.carousel$*2>div.slide$*4>img.slide-image+p.slide-caption
```
**Produces two carousels (`
` with class names `.carousel1` and `.carousel2`), each containing four slides (`` with class names `.slide1` through `.slide4`), each slide containing an image (`![]()
` with class name `.slide-image`) and a caption paragraph (`` with class name `.slide-caption`).**
41. ```markdown
section.container$*3>div.row$*2>div.col$*4
```
**Creates three containers (``), each containing two rows (`
`), and each row containing four columns (``).**
42. ```markdown
div.gallery$*2>div.row$*3>div.col$*4>img.photo$*3
```
**Generates two galleries (`
`), each containing three rows (``), and each row containing four columns (``), and each column containing three photos (`![]()
`).**
43. ```markdown
div.carousel$*3>div.slide$*6>img.slide-image+p.slide-caption
```
**Produces three carousels (`
`), each containing six slides (``), each slide consisting of an image (`![]()
`) and a caption paragraph (``).**
44. ```markdown
div.card$*5>div.card-header+h3.card-title+div.card-body>p.card-text+button.btn.btn-primary
```
**Creates five cards (`
`), each containing a header (``), a title (``), a body (``), text (``), and a button (``).**
45. ```markdown
div.hero$*2>img.hero-image+h1.hero-title+p.hero-description+a.hero-link
```
**Generates two hero sections (`
`), each containing an image (`![]()
`), a title (``), a description (`
`), and a link (``).**
46. ```markdown
div.navbar$*2>ul.navbar-nav>li.nav-item$*4>a.nav-link
```
**Produces two navigation bars (`
`), each containing an unordered list (``), with four list items (`- `), each containing an anchor (``).**
47. ```markdown
div.tile$*3>div.tile-image+div.tile-content>h2.tile-title+p.tile-description+a.tile-link
```
**Creates three tiles (`
`), each containing an image (``), content (``), including a title (``), a description (`
`), and a link (``).**
48. ```markdown
div.box$*4>div.box-header+h4.box-title+p.box-content
```
**Generates four boxes (`
`), each containing a header (``), a title (``), and content (`
`).**
49. ```markdown
div.feature$*3>img.feature-image+h3.feature-title+p.feature-description+a.feature-link
```
**Creates three feature sections (`
`), each containing an image (`![]()
`), a title (``), a description (`
`), and a link (``).**
50. ```markdown
div.carousel$*2>div.slide$*4>img.slide-image+p.slide-caption
```
**Produces two carousels (`
`), each containing four slides (``), each slide containing an image (`![]()
`) and a caption paragraph (``).**
**Emmet expressions into vscode there is extension Emmet download it if you dont have**
**If you understand this this makes your producitivy of writing of emmet code also and learn also from it**