sukepp / web-assignment-1 Goto Github PK

Explanation of elements

1. Links to both your own pages and external webpages.
    [1] For links to my own pages:
        (1) Link to the index page: 
            (a) line 15 (index_html);
            (b) line 15 (about_html);
            (c) line 15 (work_algrithm.html);
            (d) line 15 (work_px4.html);
            (e) line 15 (life_film.html);
            (f) line 15 (life_vlog.html);
        (2) Link to the work_algrithm page:
            (a) line 19 (index_html);
            (b) line 19 (about_html);
            (c) line 19, 154 (work_algrithm.html);
            (d) line 19, 130 (work_px4.html);
            (e) line 19, 109 (life_film.html);
            (f) line 19, 64 (life_vlog.html);
        (3) Link to the work_px4 page:
            (a) line 20 (index_html);
            (b) line 20 (about_html);
            (c) line 20, 158 (work_algrithm.html);
            (d) line 20, 134 (work_px4.html);
            (e) line 20, 113 (life_film.html);
            (f) line 20, 68 (life_vlog.html);
        (4) Link to the life_film page:
            (a) line 26 (index_html);
            (b) line 26 (about_html);
            (c) line 26, 162 (work_algrithm.html);
            (d) line 26, 138 (work_px4.html);
            (e) line 26, 117 (life_film.html);
            (f) line 26, 72 (life_vlog.html);
        (5) Link to the life_vlog page:
            (a) line 27 (index_html);
            (b) line 27 (about_html);
            (c) line 27, 166 (work_algrithm.html);
            (d) line 27, 142 (work_px4.html);
            (e) line 27, 121 (life_film.html);
            (f) line 27, 76 (life_vlog.html);
        (6) Link to the about page:
            (a) line 30 (index_html);
            (b) line 30 (about_html);
            (c) line 30 (work_algrithm.html);
            (d) line 30 (work_px4.html);
            (e) line 30 (life_film.html);
            (f) line 30 (life_vlog.html);
    [2] For links to external pages:
        (1) Link to the github website:
            (a) line 43 (index.html);
        (2) Link to the linkedin website:
            (a) line 44 (index.html);
        (3) Link to the csdn website:
            (a) line 45 (index.html);
        (4) Link to a blog from CSDN website:
            (a) line 78 (work_px4.html);
        (5) Link to introdution to Todd Phillips:
            (a) line 43 (life_film.html);
        (6) Link to introdution to Official Sites of Joker:
            (a) line 54 (life_film.html);
        (7) Link to introdution to IMDB website of Joker:
            (a) line 63 (life_film.html);
        (8) Link to introdution to Quentin Tarantino:
            (a) line 74 (life_film.html);
        (9) Link to introdution to Official Sites of Once Upon a Time... in Hollywood:
            (a) line 85 (life_film.html);
        (10) Link to introdution to IMDB website of Once Upon a Time... in Hollywood:
            (a) line 94 (life_film.html);
        (11) Link to my personal email:
            (a) line 79 (index_html);
            (b) line 86 (about_html);
            (c) line 176 (work_algrithm.html);
            (d) line 152 (work_px4.html);
            (e) line 131 (life_film.html);
            (f) line 86 (life_vlog.html);
        (12) Link to my personal facebook:
            (a) line 80 (index_html);
            (b) line 87 (about_html);
            (c) line 177 (work_algrithm.html);
            (d) line 153 (work_px4.html);
            (e) line 132 (life_film.html);
            (f) line 87 (life_vlog.html);
            
            
2. A navigation bar:
    [1] A header navigation bar:
        (1) line 14 (index_html);
        (2) line 14 (about_html);
        (3) line 14 (work_algrithm.html);
        (4) line 14 (work_px4.html);
        (5) line 14 (life_film.html);
        (6) line 14 (life_vlog.html);
    [2] A footer navigation bar:
        (1) line 78 (index_html);
        (2) line 85 (about_html);
        (3) line 175 (work_algrithm.html);
        (4) line 151 (work_px4.html);
        (5) line 130 (life_film.html);
        (6) line 85 (life_vlog.html);
            
3. At least one table:
    [1] A table about posts history:
        (1) line 54 (index_html);
        (2) line 62 (about_html);
        (3) line 152 (work_algrithm.html);
        (4) line 128 (work_px4.html);
        (5) line 107 (life_film.html);
        (6) line 62 (life_vlog.html);
    [2] A table about PX4 flight control stack:
        (1) line 49 (work_px4.html);
    [3] A table about PX4 hardware structure:
        (1) line 82 (work_px4.html);
        
4. At least one list (ordered or unordered):
    [1] A list about staff of Film Joker:
        (1) line 42 (life_film.html);
    [2] A list about detils of Film Joker:
        (1) line 53 (life_film.html);
    [3] A list about reference of Film Joker:
        (1) line 62 (life_film.html);
    [4] A list about staff of Film Once Upon a Time... in Hollywood:
        (1) line 73 (life_film.html);
    [5] A list about detils of Film Once Upon a Time... in Hollywood:
        (1) line 84 (life_film.html);
    [6] A list about reference of Film Once Upon a Time... in Hollywood:
        (1) line 93 (life_film.html);
        
5. At least one local or embedded video:
    [1] A embeded video from youtube about tailer of film Joker:
        (1) line 51 (life_film.html);
    [2] A embeded video from youtube about tailer of film Once Upon a Time... in Hollywood:
        (1) line 82 (life_film.html);
    [3] A local video about vlog(spicy incense pot)
        (1) line 40 (life_vlog.html);
    [4] A local video about vlog(A Tour near the hometown)
        (1) line 48 (life_vlog.html);
        
6. At least four CSS3 and four HTML5 elements:
    [1] For CSS3 elements:
        (1) background-color element:
            (a) line 2 (style.css);
        (2) box-sizing element:
            (a) line 6 (style.css);
        (3) margin element:
            (a) line 11 (style.css);
        (4) height element:
            (a) line 12 (style.css);
        (5) padding element:
            (a) line 13 (style.css);
        (6) font-align element:
            (a) line 26 (style.css);
        (7) text-decoration element:
            (a) line 54 (style.css);
        (8) overflow element:
            (a) line 63 (style.css);  
    [2] For HTML5 elements:
        (1) div element:
            (a) line 10 (index_html);
        (2) header element:
            (a) line 11 (index_html);
        (3) img element:
            (a) line 12 (index_html);
        (4) h1 element:
            (a) line 13 (index_html);
        (5) section element:
            (a) line 33 (index_html);
        (6) footer element:
            (a) line 76 (index_html);
        (7) button element:
            (a) line 17 (index_html);
        (8) p element:
            (a) line 41 (work_algrithm.html);

7. Make use of the CSS positional properties (e.g. position, float):
    [1] position:
        (1) position relative:
            (a) line 14 (index_html);
            (b) line 220 (index_html);
        (2) position: absolute:
            (a) line 93 (index_html);
    [2] float:
        (1) float left:
            (a) line 49 (index_html);
            (b) line 62 (index_html);
            (c) line 135 (index_html);
            (d) line 230 (index_html);
            (e) line 237 (index_html);
        (2) float none:
            (a) line 105 (index_html);   
        (1) float right:
            (a) line 219 (index_html);
            (b) line 258 (index_html);

8. Make use of both inline and block elements:
    [1] inline elements:
        (1) a element:
            (a) line 15 (index_html);
        (2) button element:
            (a) line 17 (index_html);
        (3) img element:
            (a) line 12 (index_html);
        (4) input element:
            (a) line 103 (life_film.html);
        (5) span element:
            (a) line 54 (life_film.html);
    [2] block elements:
        (1) div element:
            (a) line 10 (index_html);
        (2) header element:
            (a) line 11 (index_html);
        (3) p element:
            (a) line 41 (work_algrithm.html);
        (4) ul element:
            (a) line 42 (life_film.html);
        (5) table element:
            (a) line 49 (work_px4.html);
            
9. Additional features of HTML and CSS:
    [1] html:
        (1) input element:
            (a) line 103 (life_film.html);
        (2) pre element:
            (a) line 49 (work_algrithm.html);
            (b) line 108 (work_algrithm.html);
    [2] css:
        (1) flex:
            (a) line 294 (style.css);