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> |
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
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
0 Comments