This slide contains two parts of content. First, CSS Grid Layout, offering a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning. Second, Progressive Web App, using modern web capabilities to deliver an app-like experience to users on desktop and mobile.

1. The Future of Web Development

2. CSS Layout

3. Grid System

4. 960 Grid System
CSS Layout

5. Why 960?
960 Grid System
= 2 x 480
= 3 x 320
= 4 x 240
= 5 x 192
= 6 x 160
= 8 x 120
= 10 x 96
= 12 x 80
= 15 x 64
= 16 x 60
= 20 x 48
= 24 x 40
960

6. 960 Grid System
CSS Layout
60
140
220
300
380
460 460
540
620
700
780
860
940
60px10px 20px
1 2 3 4 5 6 7 8 9 10 11 12

7. 12 Columns
960 Grid System

8. 12 Columns
960 Grid System

9. 16 Columns
960 Grid System

10. Bootstrap Grid System
CSS Layout
col-1 col-11
col-2
col-3
col-4
col-5
col-6
col-12
col-10
col-9
col-8
col-7
col-6

11. Bootstrap Grid System
CSS Layout
8.33 91.66
16.66
25
33.33
41.66
50
100
83.33
75
66.66
58.33
50
Unit : %

12. Bootstrap Grid System
CSS Layout
470px
col-3 (25%)
940px
col-6 (50%)
1880px
col-12 (100%)
1410px
col-3 (75%)
940px
col-6 (50%)
1920px
10px 20px

13. <!-- Bootstrap Grid System -->
1. <div class="container">
2. <div class="row">
3. <div class="col-3">25%</div>
4. <div class="col-9">75%</div>
5. </div>
6. <div class="row">
7. <div class="col-6">50%</div>
8. <div class="col-6">50%</div>
9. </div>
10. <div class="row">
11. <div class="col-12">100%</div>
12. </div>
13. </div>

14. CSS Grid Layout

15. CSS Grid Layout
CSS Layout
Header
Menu Main
Footer

16. We need a page
contains 4 parts, including
header, menu, main, and footer

17. Wireframe
CSS Grid Layout
Header
Menu Main
Footer

18. <!-- Basic Table -->
1. <table>
2. <tbody>
3. <tr>
4. <td colspan="4" class="header">Header</td>
5. </tr>
6. <tr>
7. <td class="menu">Menu</td>
8. <td class="main" colspan="3">Main</td>
9. </tr>
10. <tr>
11. <td class="footer" colspan="4">Footer</td>
12. </tr>
13. </tbody>
14. </table>

19. <!-- Using CSS Grid Layout -->
1. <div class="container">
2. <div class="header">Header</div>
3. <div class="menu">Menu</div>
4. <div class="main">Main</div>
5. <div class="footer">Footer</div>
6. </div>

20. Using CSS Grid Layout makes
HTML and CSS simpler
and more maintainable.

21. <!-- Using CSS Grid Layout -->
1. <div class="container"><!-- Grid Container -->
2. <div class="header">Header</div><!-- Grid Item -->
3. <div class="menu">Menu</div><!-- Grid Item -->
4. <div class="main">Main</div><!-- Grid Item -->
5. <div class="footer">Footer</div><!-- Grid Item -->
6. </div>

22. Two-dimensional Layout
CSS Grid Layout
COLUMN
ROW

23. CELL
AREA
TRACK
Terminology
CSS Grid Layout
LINE GAP

24. Line Numbers
CSS Grid Layout
CELL
AREA
TRACK
21 3 4
1
2
3
4

25. Line Numbers - RTL
CSS Grid Layout
CELL
AREA
TRACK
34 2 1
1
2
3
4

26. Track Sizes
CSS Grid Layout
100px 3fr 1fr
25%
100px
auto

27. A
C
B
Nested Grid
CSS Grid Layout
D
D-1 D-2 D-3
D-4

28. stretch
(default)
left end / top center / top
center / bottom
right end / top
left end / center
left end / bottom
right end / center
right end / bottom
Alignment Control
CSS Grid Layout
Row axis
(justify-self)
Column axis
(align-self)

30. Progressive Web App

33. What Is A Progressive Web App?
Progressive Web App

34. How Does A Progressive Web App Work?
Progressive Web App
Web app manifest App shell Service worker Caches Push notifications

35. References
The Future of Web Development
●
●
●
●
●

36. References
●
●
●
The Future of Web Development