Web
Tools
Atom
Tools
Modern Browser
11
That's ALL
:'(
Front-end
Backend
VS
- says: @#$TG@#%T$#%
Visual Designer
UI Designer
UX Designer
Front-end Engineer
HTML
HyperText Markup Language
CSS
Cascading Style SheetÂ
Javascript
Script Language
HTML
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!--Page Content-->
</body>
</html>HTML-2
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Title</h1>
<h2>Subtitle</h2>
<p>There is content text</p>
</body>
</html>Common Tags
- p - paragraph
- hx - titles
- div - block, group
- img - photos
- video - films
- input - user input
- ul, ol, li - list view
- table - table view
Semantic Tags
- header
- footer
- article
- section
- main
- figure
- nav
- mark
HTML - 3
<html>
<head>
<title>Page Title</title>
</head>
<body>
<main role='main'>
<article class='topic'>
<header>
<h2>I'm feeling wired.</h2>
<p class='author'>Chia Yu</p>
</header>
</article>
</main>
</body>
</html>Attribute
<form role='form' method='post' action='/target'>
<label for='name'>Name:</label>
<input type='text' placeholder='your name' id='name' name='username' />
</form>CSS
#main-container {
background: #FAFAFA;
}
#main-container > .list {
padding: 0;
margin: 0;
}Something like..
Microsoft Word
Space, Enter: Hi?
Selector
- id - #container
- class - .list
- tag - p
- universal - *
- attribute - [type='text']
- child - .list > .element
- pseudo - .btn:hover
deck
By Chia Yu Pai
