html,css,javscript,Bootstrap,etc
Tools
| No | tool | descript |
|---|---|---|
| 1 | diagrameditor | drawing UML |
| 2 | pixlr | design banner |
| 3 | ezgif | ezgif maker |
| 4 | symbolcopy | get sympol character |
| 5 | text art | convert text to art |
| 6 | text image | convert text to image |
| 7 | diagrameditor | drawing UML |
| 8 | symbolcopy | get symbol character |
| 9 | shields | create your own git badges |
| 10 | kleki | drawing sketch online |
| 11 | favicon.io | favicon customize |
| 12 | favicon.cc | favicon generator |
| 13 | flavicon | favicon for copy-paste |
| 14 | emoji | emoji |
| 15 | emoji unicode) | emoji unicode |
| 16 | emojipedia | emoji unicode |
html,css
Install extentsion "live server"
Add smart page ruler extension
Bootstrap
*Note: *CDN (content devilery network)
Course note
1/ html5 doctype
<!doctype html>
<html lang = 'en'>
<head>
<meta charset = 'utf-8'>
</head>
</html>
2/ mobile first
<meta name='viewport' content='width=device-width, initial-scale=1'>
width = device-width: sẽ hiện thị tùy theo độ rộng của thiết bị
initial-scale = 1: mức zoom mặc định ban đầu
3/ Khai báo CDN
<link rel = 'stylesheet' href = 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script src = 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
4/ Container
container: cung cấp các layout có độ rộng cố định trong một lớp container
container-fluid: cung cấp các layout có động rộng toàn màn hình
*Note: Các container này không được phép lồng vào nhau
5/ Grid
1200-1170/12
Các class trong Grid Bootstrap: Có 4 class:
. xs : cực nhỏ ( các thiết bị là phone )
. sm : nhỏ ( các thiết bị máy tính bảng )
. md : vừa ( màn hình desktop )
. lg : lớn ( màn hình desktop lớn )
Hệ thống grid bootstrap
<div class = 'container'>
<div class = 'row'>
<div class = 'col-*-*'></div>
</div>
<div class = 'row'>
<div class = 'col-*-*'></div>
<div class = 'col-*-*'></div>
<div class = 'col-*-*'></div>
</div>
<div class = 'row>
...
</div>
</div>
References