[docs] HTML/CSS in Gitpod

gitpod-io · Feb 15, 2020 · 6e3edb7 · 6e3edb7
1 parent 030d7dc
commit 6e3edb7
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 0 deletions.
diff --git a/src/docs/html-in-gitpod.md b/src/docs/html-in-gitpod.md
@@ -0,0 +1,45 @@
+# HTML
+
+Looking to try web development in Gitpod? Well you're in luck: Gitpod was made with web development in mind. And, depending on your needs, you may want to customize this experience further!
+
+## Emmet Support
+
+Gitpod comes with emmet support right out of the box you can open a preview while you are coding in the upper right hand corner ![preview icon](images/preview.png) click it see the result in real time!
+
+![image of preview](images/emmet_preview.png)
+
+## VSCode Extensions
+
+### [HTML-Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)
+
+This extension adds many useful snippets for productivity. See for yourself:
+
+![Example](images/HTML-Snippets-Example.gif)
+
+To add this extension to your repository add the following to your [`.gitpod.yml`](https://www.gitpod.io/docs/config-gitpod-file/) file
+
+```yaml
+vscode:
+  extensions:
+    - [email protected]:7b7Vkkp6Lem9WOqKCYMq2w==
+```
+
+### [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
+
+This will add great auto-completion for your project, including color-completion!
+
+![HTML-CSS-Support](images/HTML_CSS_Extension.png)
+
+To add this extension to your repository add the following to your [`.gitpod.yml`](https://www.gitpod.io/docs/config-gitpod-file/) file
+
+```yaml
+vscode:
+  extensions:
+    - [email protected]:RBTpzQbz8rn5KTlc82tnsQ==
+```
+
+## Try It!
+
+Want to try it out? And see a minimal example in action? Great, then you can open this in Gitpod:
+
+[![JesterOrNot/Gitpod-Web-Development-Example](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JesterOrNot/Gitpod-Web-Development-Example)
diff --git a/src/docs/images/HTML-Snippets-Example.gif b/src/docs/images/HTML-Snippets-Example.gif
diff --git a/src/docs/images/HTML_CSS_Extension.png b/src/docs/images/HTML_CSS_Extension.png
diff --git a/src/docs/images/emmet_preview.png b/src/docs/images/emmet_preview.png
diff --git a/src/docs/images/preview.png b/src/docs/images/preview.png
diff --git a/src/docs/languages-and-frameworks.md b/src/docs/languages-and-frameworks.md
@@ -3,6 +3,7 @@
 Below is a list of language and framework specific tips & tricks.
 
   * [Python](/docs/python-in-gitpod/)
+  * [HTML](/docs/html-in-gitpod/)
   * [Java](/docs/java-in-gitpod/)
   * [C++](/docs/cpp-in-gitpod/)
   * [Go](/docs/go-in-gitpod/)

diff --git a/src/docs/menu.ts b/src/docs/menu.ts
@@ -92,6 +92,10 @@ export const MENU: MenuEntry[] = [
                 "Python",
                 "python-in-gitpod"
             ),
+            M(
+                "HTML/CSS",
+                "html-in-gitpod"
+            ),
             M(
                 "Java",
                 "java-in-gitpod"