HTML Cheat Sheet

Some simple command to generate HTML code in Visual Studio Code

div
<div></div>
a:link
<a href=”http://”></a>
img
<img src=”” alt=””/>
form
<form action=””></form>
inp
<input type=”text” name=”” id=”” />
input:email
<input type=”email” name=”” id=”” />
input:p
<input type=”password” name=”” id=”” />
btn
<button></button>
meta:utf
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″ />
style
<style></style>
script
<script></script>
script:src
<script src=”” ></script>
iframe
<iframe src=”” frameborder=”0″></iframe>
label
< label for=”” ></label>
ul>li*5

<ul>





</ul>

html:5
<!DOCTYPE html>
<html lang=”en”>





</html>

Check out more cheat sheet @ Emmet
Check out TailwindCSS @ TailwindCSS.com

NuxtJS Cheat Sheet

SPA vs UNIVERSAL

SPA ( Single Page Application )
Benefit: Organize the project using convention over configuration folder structure and config files. Easy development server.

UNIVERSAL –
Benefit:All pages get pre-rendered into HTML and have a high SEO and page load score. The content is generated at build time.

Starting a new project ( Command Prompt / Terminal )

npx create-nuxt-app </project-name>
cd </project-name>
npm install
npm run dev

 

Folder Structure

  • assetsĀ – Place your CSS, images, svg and etc here.
  • static – Place icons, static files like robots.txt here.
  • components – Create different components for app usage
  • layouts – Application layouts
  • middleware – Custom functions where we want to intercept before accessing a page
  • pages – Application views & routes from which the router is dynamically generated
  • plugins – Javascript plugins run before Vue.js init
  • storeĀ  – Vuex store files ( state, getters, mutations & actions )

Components & Pages
& is a must.

Navigating between page
Use instead of . Hyperlink will affect the vuex store while navigate to different page.

Check out more about NuxtJS @ NuxtJS.org

X