├── .gitattributes ├── .gitignore ├── README.md ├── _assets ├── bootstrap-exercises │ ├── bootstrap-ex01-cards.png │ ├── bootstrap-ex02-grid-01.png │ ├── bootstrap-ex02-grid-02.png │ ├── bootstrap-ex03-grid-01.png │ ├── bootstrap-ex03-grid-02.png │ ├── bootstrap-ex03-grid-03.png │ ├── bootstrap-ex04-modal-01.png │ └── bootstrap-ex04-modal-02.png ├── css-exercises │ ├── css-ex01-selectors.png │ ├── css-ex02-pseudo.png │ ├── css-ex04-layout-01.png │ ├── css-ex04-layout-02.png │ ├── css-ex05-position-01.png │ ├── css-ex05-position-02.png │ ├── css-ex06-media-queries-01.png │ ├── css-ex06-media-queries-02.png │ ├── css-ex06-media-queries-03.png │ ├── css-ex07-flexbox-01.png │ ├── css-ex07-flexbox-02.png │ ├── css-ex07-flexbox-03.png │ ├── css-ex07-flexbox-04.png │ ├── css-ex07-flexbox-05.png │ ├── css-ex07-flexbox-06.png │ ├── css-ex08-grid-01.png │ ├── css-ex08-grid-02.png │ ├── css-ex08-grid-03.png │ ├── css-ex08-grid-04.png │ ├── css-ex09-grid-areas-01.png │ ├── css-ex09-grid-areas-02.png │ └── css-ex09-grid-areas-03.png ├── html-exercises │ ├── html-ex01-lists.png │ ├── html-ex02-images.png │ ├── html-ex03-table.png │ └── html-ex04-form.png ├── javascript-exercises │ ├── javascript-ex06-fetch-01.png │ └── javascript-ex06-fetch-02.png └── loader.gif ├── _styles └── styles.css ├── a11y ├── examples │ ├── 01-semantics.html │ ├── 02-images.html │ ├── 03-form.html │ └── 04-aria.html ├── exercises │ └── 01-form.html └── solutions │ └── 01-form.html ├── bootstrap ├── examples │ ├── 00-hello-world.html │ ├── 01-grid.html │ ├── 02-grid-2.html │ ├── 03-grid-3.html │ ├── 04-navbar.html │ ├── 05-form.html │ ├── 06-cards.html │ ├── 07-buttons.html │ ├── 08-icons.html │ └── styles.css ├── exercises │ ├── 01-cards.html │ ├── 02-grid.html │ ├── 03-grid.html │ ├── 04-modal.html │ ├── _bootstrap-exercises.md │ └── styles.css └── solutions │ ├── 01-cards.html │ ├── 02-grid.html │ ├── 03-grid.html │ └── 04-modal.html ├── css ├── examples │ ├── 01-selectors.css │ ├── 01-selectors.html │ ├── 02-colors.css │ ├── 02-colors.html │ ├── 03-box-model.css │ ├── 03-box-model.html │ ├── 04-media-queries.css │ ├── 04-media-queries.html │ ├── 05-flexbox.css │ ├── 05-flexbox.html │ ├── 06-grid.css │ ├── 06-grid.html │ ├── 07-grid-areas.css │ └── 07-grid-areas.html ├── exercises │ ├── 01-selectors.css │ ├── 01-selectors.html │ ├── 02-pseudo.css │ ├── 02-pseudo.html │ ├── 03-specificity.css │ ├── 04-layout.css │ ├── 04-layout.html │ ├── 05-position.css │ ├── 05-position.html │ ├── 06-media-queries.css │ ├── 06-media-queries.html │ ├── 07-flexbox.css │ ├── 07-flexbox.html │ ├── 08-grid.css │ ├── 08-grid.html │ ├── 09-grid-areas.css │ ├── 09-grid-areas.html │ └── _css-exercises.md └── solutions │ ├── 01-selectors.css │ ├── 02-pseudo.css │ ├── 04-layout.css │ ├── 05-position.css │ ├── 06-media-queries.css │ ├── 07-flexbox.css │ ├── 08-grid.css │ └── 09-grid-areas.css ├── html ├── examples │ ├── 00-hello-world.html │ ├── 01-lists.html │ ├── 02-links.html │ ├── 03-images.html │ ├── 04-table.html │ ├── 05-form.html │ ├── 06-one-page.html │ └── 07-semantics.html ├── exercises │ ├── 01-lists.html │ ├── 02-images.html │ ├── 03-table.html │ ├── 04-form.html │ └── _html-exercises.md └── solutions │ ├── 01-lists.html │ ├── 02-images.html │ ├── 03-table.html │ └── 04-form.html ├── javascript ├── examples │ ├── 01-hello-world.js │ ├── 02-numbers.js │ ├── 03-strings.js │ ├── 04-objects.js │ ├── 05-arrays.js │ ├── 06-types.js │ ├── 07-dom.html │ ├── 07-dom.js │ ├── 08-let-const.js │ ├── 09-template-literals.js │ ├── 10-spread.js │ ├── 11-destructuring.js │ ├── 12-promises.js │ ├── 13-async-await.js │ ├── 14-json.js │ ├── 15-ajax.html │ ├── 15-ajax.js │ ├── 16-fetch.html │ ├── 16-fetch.js │ ├── 17-cors.html │ ├── 17-cors.js │ ├── 18-map.js │ ├── 19-filter.js │ └── 20-reduce.js ├── exercises │ ├── 01-replace.js │ ├── 02-format.js │ ├── 03-objects.js │ ├── 04-dom.css │ ├── 04-dom.html │ ├── 04-dom.js │ ├── 05-destructuring.js │ ├── 06-fetch.html │ ├── 06-fetch.js │ ├── 07-functional.js │ └── _javascript-exercises.md └── solutions │ ├── 01-replace.js │ ├── 02-format.js │ ├── 03-objects.js │ ├── 04-dom.html │ ├── 04-dom.js │ ├── 05-destructuring.js │ ├── 06-fetch.html │ ├── 06-fetch.js │ └── 07-functional.js ├── jquery ├── examples │ ├── 01-hello-world.html │ ├── 01-hello-world.js │ ├── 02-selectors.html │ ├── 02-selectors.js │ ├── 03-events.html │ ├── 03-events.js │ ├── 04-elements.html │ ├── 04-elements.js │ ├── 05-grid.html │ └── 05-grid.js ├── exercises │ ├── 01-dom.html │ ├── 01-dom.js │ ├── 02-ajax.html │ ├── 02-ajax.js │ └── _jquery-exercises.md └── solutions │ ├── 01-dom.html │ ├── 01-dom.js │ ├── 02-ajax.html │ └── 02-ajax.js ├── node └── examples │ ├── 01-hello-world.js │ ├── 02-response.js │ ├── 03-routing.js │ ├── 04-buffer-data.js │ ├── 05-streams.js │ ├── 06-post-data.js │ ├── characters.js │ └── lorem.txt └── sass ├── examples ├── 01-hello │ ├── index.html │ ├── styles.css │ ├── styles.css.map │ └── styles.scss ├── 02-partials │ ├── _colors.scss │ ├── _fonts.scss │ ├── index.html │ └── styles.scss └── 03-css-import │ ├── colors.css │ ├── fonts.css │ ├── index.html │ ├── styles.css │ ├── styles.css.map │ └── styles.scss └── exercises ├── _colors.scss ├── index.html ├── styles.css ├── styles.css.map └── styles.scss /.gitattributes: -------------------------------------------------------------------------------- 1 | *.html linguist-detectable=false 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/ 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Intro to Web Development - Class Examples 2 | 3 | This repository contains the code snippets from the slides as well as the starter files and solutions to the exercises we will go over in class. 4 | 5 | 6 | ### Topics Covered 7 | 8 | - HTML 9 | - Accessibility 10 | - CSS 11 | - Bootstrap 12 | - JavaScript 13 | - jQuery 14 | - Node 15 | 16 | Each of the topics above will be organized in a folder that contains the following: 17 | - `examples/` - This folder will include the code snippets from the slides 18 | - `exercises/` - These are the starter files for exercises you should complete prior to attempting the homework. Instructions and screenshots for the exercises are available in the `_.md` file. 19 | - `solutions/` - All the solutions to the exercises above are in this folder. Additionally, there are video walk-throughs of each solution on MediaLab. 20 | 21 | ### Setting Up This Repo 22 | 23 | 1. Fork the repository in GitHub. 24 | 25 | 2. Clone the forked repository. 26 | 27 | ```console 28 | $ git clone https://github.com/student/webdev-examples webdev-examples 29 | ``` 30 | 31 | 2. Navigate into the newly created `webdev-examples` folder and add another remote 32 | 33 | ```console 34 | $ git remote -v 35 | origin https://github.com/student/webdev-examples.git (fetch) 36 | origin https://github.com/student/webdev-examples.git (push) 37 | 38 | $ git remote add examples https://github.com/caterinasworld/webdev-examples.git 39 | 40 | $ git remote -v 41 | origin https://github.com/student/webdev-examples.git (fetch) 42 | origin https://github.com/student/webdev-examples.git (push) 43 | examples hhttps://github.com/caterinasworld/webdev-examples.git (fetch) 44 | examples https://github.com/caterinasworld/webdev-examples.git (push) 45 | ``` 46 | 47 | 3. If you want to update any files in your remote, push those files to the origin remote. 48 | 49 | ```console 50 | $ git push -u origin main 51 | ``` 52 | 53 | 4. If there are any new examples to download, pull those files from the 'examples' remote. 54 | 55 | ```console 56 | $ git pull examples main 57 | ``` 58 | -------------------------------------------------------------------------------- /_assets/bootstrap-exercises/bootstrap-ex01-cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/bootstrap-exercises/bootstrap-ex01-cards.png -------------------------------------------------------------------------------- /_assets/bootstrap-exercises/bootstrap-ex02-grid-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/bootstrap-exercises/bootstrap-ex02-grid-01.png -------------------------------------------------------------------------------- /_assets/bootstrap-exercises/bootstrap-ex02-grid-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/bootstrap-exercises/bootstrap-ex02-grid-02.png -------------------------------------------------------------------------------- /_assets/bootstrap-exercises/bootstrap-ex03-grid-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/bootstrap-exercises/bootstrap-ex03-grid-01.png -------------------------------------------------------------------------------- /_assets/bootstrap-exercises/bootstrap-ex03-grid-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/bootstrap-exercises/bootstrap-ex03-grid-02.png -------------------------------------------------------------------------------- /_assets/bootstrap-exercises/bootstrap-ex03-grid-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/bootstrap-exercises/bootstrap-ex03-grid-03.png -------------------------------------------------------------------------------- /_assets/bootstrap-exercises/bootstrap-ex04-modal-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/bootstrap-exercises/bootstrap-ex04-modal-01.png -------------------------------------------------------------------------------- /_assets/bootstrap-exercises/bootstrap-ex04-modal-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/bootstrap-exercises/bootstrap-ex04-modal-02.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex01-selectors.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex01-selectors.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex02-pseudo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex02-pseudo.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex04-layout-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex04-layout-01.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex04-layout-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex04-layout-02.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex05-position-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex05-position-01.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex05-position-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex05-position-02.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex06-media-queries-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex06-media-queries-01.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex06-media-queries-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex06-media-queries-02.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex06-media-queries-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex06-media-queries-03.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex07-flexbox-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex07-flexbox-01.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex07-flexbox-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex07-flexbox-02.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex07-flexbox-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex07-flexbox-03.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex07-flexbox-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex07-flexbox-04.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex07-flexbox-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex07-flexbox-05.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex07-flexbox-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex07-flexbox-06.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex08-grid-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex08-grid-01.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex08-grid-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex08-grid-02.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex08-grid-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex08-grid-03.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex08-grid-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex08-grid-04.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex09-grid-areas-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex09-grid-areas-01.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex09-grid-areas-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex09-grid-areas-02.png -------------------------------------------------------------------------------- /_assets/css-exercises/css-ex09-grid-areas-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/css-exercises/css-ex09-grid-areas-03.png -------------------------------------------------------------------------------- /_assets/html-exercises/html-ex01-lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/html-exercises/html-ex01-lists.png -------------------------------------------------------------------------------- /_assets/html-exercises/html-ex02-images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/html-exercises/html-ex02-images.png -------------------------------------------------------------------------------- /_assets/html-exercises/html-ex03-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/html-exercises/html-ex03-table.png -------------------------------------------------------------------------------- /_assets/html-exercises/html-ex04-form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/html-exercises/html-ex04-form.png -------------------------------------------------------------------------------- /_assets/javascript-exercises/javascript-ex06-fetch-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/javascript-exercises/javascript-ex06-fetch-01.png -------------------------------------------------------------------------------- /_assets/javascript-exercises/javascript-ex06-fetch-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/javascript-exercises/javascript-ex06-fetch-02.png -------------------------------------------------------------------------------- /_assets/loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caterinasworld/webdev-examples/67568627e23a193db3cd2a94ade0fc7a2132d7e4/_assets/loader.gif -------------------------------------------------------------------------------- /_styles/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | :root { 6 | --white: #fcfcfc; 7 | --black: #040404; 8 | 9 | --gray1: #333333; 10 | --gray2: #555555; 11 | --gray3: #cccccc; 12 | --gray4: #aaaaaa; 13 | 14 | --teal: #006060; 15 | --lightteal: #008080; 16 | --purple: #800080; 17 | --lavender: #e6e6fa; 18 | --slateblue: #6a5acd; 19 | --navy: #000080; 20 | --blue: #1e90ff; 21 | --violetred: #c71585; 22 | --orange: #ffa500; 23 | --red: #dc143c; 24 | --green: #006400; 25 | } 26 | 27 | body { 28 | font-family: 'Open Sans', 'Helvetica Neue', sans-serif; 29 | font-size: 1.2em; 30 | color: var(--gray1); 31 | } 32 | 33 | .form { 34 | width: 400px; 35 | } 36 | 37 | .flex-item, 38 | .grid-item { 39 | padding: 10px; 40 | background-color: var(--purple); 41 | color: var(--white); 42 | font-size: 2.4em; 43 | text-align: center; 44 | } 45 | 46 | .flex-item { 47 | width: 160px; 48 | height: 80px; 49 | margin: 10px; 50 | } 51 | -------------------------------------------------------------------------------- /a11y/examples/01-semantics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accessibility - Semantics Example 7 | 8 | 9 | 10 |
Superbear saves the day
11 |
12 |

2015-08-07

13 |

The city's favorite bear rescues a young cat from a tree.

14 |
15 |
Related Articles
16 | 20 |
21 |
22 |
23 | 24 |

Superbear saves the day

25 |
26 | 27 |

The city's favorite bear rescues a young cat from a tree.

28 | 35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /a11y/examples/02-images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accessibility - Images Example 7 | 8 | 9 |
10 |

Alternative Text for Images

11 |
12 | 13 |
No alt attribute
14 |
15 |
16 | image.png 17 |
Attribute does not describe the image.
18 |
19 |
20 | image of four adorable kittens in a basket 24 |
25 | Image has an alt attribute that describes the image. 26 |
27 |
28 |
29 | image of four adorable kittens in a basket 35 |
36 | Even better! This image has an alt attribute that describes the image, 37 | as well as width and height attributes. 38 |
39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /a11y/examples/03-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Accessibility - Images Example 7 | 8 | 9 |
10 |

Accessible Form Example

11 |
12 |
13 | Characters 14 |
15 | 16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /a11y/examples/04-aria.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Accessibility - ARIA Example 8 | 9 | 10 |
11 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /a11y/exercises/01-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 01 - Form 7 | 8 | 9 |

Form Example

10 |
11 | Name 12 | 13 |

14 | 18 |

19 | Favorite Character 20 |
Spongebob
21 |
Patrick
22 |
Sandy
23 |
24 | 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /a11y/solutions/01-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 01 - Form 7 | 21 | 22 | 23 |
24 |

Form Example

25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 | Favorite Character 36 | 42 |
43 | 44 |
45 | 46 |
47 |
48 |
49 | 50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /bootstrap/examples/00-hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 00 - Hello World 7 | 11 | 12 | 13 | 25 |
26 |
27 |

This is a heading

28 |

29 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur 30 | cum harum, rem officia, ducimus nihil blanditiis dolores dolorem quo 31 | tenetur neque repellat ipsam molestiae error maxime animi eligendi 32 | quidem quas. 33 |

34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /bootstrap/examples/01-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 01 - Grid 7 | 11 | 12 | 13 | 14 | 15 |
16 |

Bootstrap 01 - Grid

17 |
18 |
Column 1 of 2
19 |
Column 2 of 2
20 |
21 |
22 |
Column 1 of 3
23 |
Column 2 of 3
24 |
Column 3 of 3
25 |
26 |
27 |
Column 1 of 4
28 |
Column 2 of 4
29 |
Column 3 of 4
30 |
Column 4 of 4
31 |
32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /bootstrap/examples/02-grid-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 02 - Grid 7 | 11 | 12 | 13 | 14 | 15 |
16 |

Bootstrap 02 - Grid

17 |
18 |
Column 2
19 |
Column 10
20 |
21 |
22 |
Column Small 6
23 |
Column Small 6
24 |
25 |
26 |
Column Medium 8
27 |
Column Medium 4
28 |
29 |
30 |
Column Large 4
31 |
Column Large 4
32 |
Column Large 4
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /bootstrap/examples/03-grid-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 03 - Grid 7 | 11 | 12 | 13 | 14 | 15 |
16 |

Bootstrap 03 - Grid

17 |
18 |
Header
19 |
20 |
21 |
Aside
22 |
23 | Main Section 24 |
25 |
Card
26 |
Card
27 |
Card
28 |
Card
29 |
30 |
31 |
32 |
33 |
Footer
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /bootstrap/examples/04-navbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 04 - Navbar 7 | 11 | 12 | 13 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /bootstrap/examples/05-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 05 - Form 7 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |

Bootstrap 05 - Form

18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /bootstrap/examples/06-cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 06 - Cards 7 | 11 | 12 | 13 | 14 |
15 |

Bootstrap 06 - Cards

16 |
17 |
18 |
Card title
19 |

20 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi 21 | ex suscipit corrupti, dicta vel similique vitae earum fugiat, 22 | deserunt iusto itaque quidem recusandae inventore reprehenderit quia 23 | dolores molestias beatae ipsum? 24 |

25 | 26 |
27 |
28 |
29 |
30 |
Card title
31 |

32 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo 33 | repudiandae officia odit voluptatem tempore, cumque distinctio 34 | architecto tempora, harum quas vero sunt voluptatum laborum cum 35 | quod. Incidunt soluta sequi officia! 36 |

37 | 38 |
39 |
40 |
41 |
42 |
Card title
43 |

44 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim 45 | tempora fugit sint possimus obcaecati explicabo quam rem aperiam 46 | asperiores distinctio in, culpa soluta eum quibusdam quo quas 47 | provident itaque repudiandae. 48 |

49 | 50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /bootstrap/examples/07-buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 07 - Buttons 7 | 11 | 12 | 13 | 14 |
15 |

Bootstrap 07 - Buttons

16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 27 | 28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /bootstrap/examples/08-icons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap 08 - Icons 7 | 11 | 15 | 16 | 17 | 18 |
19 |

Bootstrap 08 - Icons

20 | 24 | 28 | 32 | 36 | 40 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/examples/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | text-align: center; 3 | } 4 | 5 | form { 6 | width: 600px; 7 | } 8 | 9 | form > * { 10 | margin: 1rem; 11 | } 12 | 13 | .row > * { 14 | height: 160px; 15 | border: 1px solid var(--white); 16 | background-color: var(--purple); 17 | color: var(--white); 18 | font-size: 1.4em; 19 | } 20 | 21 | .row > .col-3 { 22 | background-color: var(--slateblue); 23 | } 24 | 25 | .box { 26 | height: 160px; 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/exercises/01-cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 01 - Cards 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /bootstrap/exercises/02-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 02 - Bootstrap Grid 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /bootstrap/exercises/03-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 03 - Bootstrap Grid 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /bootstrap/exercises/04-modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 04 - Modals 8 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /bootstrap/exercises/_bootstrap-exercises.md: -------------------------------------------------------------------------------- 1 | # Bootstrap Exercises 2 | 3 | - [Exercise 01 - Cards](#ex01) 4 | - [Exercise 02 - Grid](#ex02) 5 | - [Exercise 03 - Grid](#ex03) 6 | - [Exercise 04 - Modal](#ex04) 7 | 8 | ## Exercise 01 - Cards 9 | 10 | Recreate the layout below using Boostrap card classes. 11 | 12 | screenshot of a card layout 13 | 14 | ## Exercise 02 - Grid 15 | 16 | Recreate the layout below using Boostrap grid. 17 | 18 | screenshot of a grid layout 19 | screenshot of a grid layout 20 | 21 | ## Exercise 03 - Grid 22 | 23 | Recreate the layout below using Boostrap grid and the media queries available with the grid classes. 24 | 25 | screenshot of a grid layout 26 | screenshot of a grid layout 27 | screenshot of a grid layout 28 | 29 | ## Exercise 04 - Modal 30 | 31 | Recreate the layout below using Boostrap modal classes. 32 | 33 | screenshot of a layout 34 | screenshot of a layout 35 | -------------------------------------------------------------------------------- /bootstrap/exercises/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | text-align: center; 3 | } 4 | 5 | form { 6 | width: 600px; 7 | } 8 | 9 | form > * { 10 | margin: 1rem; 11 | } 12 | 13 | .row > * { 14 | height: 160px; 15 | border: 1px solid var(--white); 16 | background-color: var(--purple); 17 | color: var(--white); 18 | font-size: 1.4em; 19 | } 20 | 21 | .box { 22 | height: 160px; 23 | } 24 | -------------------------------------------------------------------------------- /bootstrap/solutions/01-cards.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 01 - Cards 8 | 12 | 13 | 14 | 15 | 16 |
17 |

Exercise 01 - Cards

18 |
19 |
Featured
20 |
21 |
22 |
Special title treatment
23 |

24 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non modi 25 | voluptate dicta dolores consectetur, quisquam quam placeat rem 26 | aspernatur ratione eveniet quo delectus architecto nisi veniam rerum 27 | in sint odit? 28 |

29 | 30 |
31 |
32 | Last updated 3 mins ago 33 |
34 |
35 |
36 |
Featured
37 |
38 |
39 |
Special title treatment
40 |

41 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non modi 42 | voluptate dicta dolores consectetur, quisquam quam placeat rem 43 | aspernatur ratione eveniet quo delectus architecto nisi veniam rerum 44 | in sint odit? 45 |

46 | 47 |
48 |
49 | Last updated 3 mins ago 50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /bootstrap/solutions/02-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 02 - Bootstrap Grid 8 | 12 | 13 | 14 | 15 | 16 |
17 |

Exercise 02 - Bootstrap Grid

18 |
19 |
One
20 |
Two
21 |
22 |
23 |
Three
24 |
Four
25 |
26 |
27 |
Five
28 |
Six
29 |
Seven
30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /bootstrap/solutions/03-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 03 - Bootstrap Grid 8 | 12 | 13 | 14 | 15 | 16 |
17 |

Exercise 03 - Bootstrap Grid

18 |
19 |
One
20 |
Two
21 |
22 |
23 |
Three
24 |
Four
25 |
26 |
27 |
Five
28 |
Six
29 |
Seven
30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /bootstrap/solutions/04-modal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 04 - Modal 8 | 12 | 13 | 14 | 15 |
16 |
17 |

Exercise 04 - Modal

18 |
19 | Click on the button below for more information inside a modal 20 |
21 | 29 |
30 | 51 |
52 | 53 | 54 | -------------------------------------------------------------------------------- /css/examples/01-selectors.css: -------------------------------------------------------------------------------- 1 | /************** Element (or type), Class, and ID Selectors **************/ 2 | 3 | /* element (or type) selectors */ 4 | ul { 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | li { 10 | list-style-type: none; 11 | } 12 | 13 | /* class selector - most commonly used */ 14 | .heading { 15 | background-color: var(--black); 16 | color: var(--white); 17 | text-align: left; 18 | } 19 | 20 | /* id selector */ 21 | #table { 22 | font-size: 1.2em; 23 | } 24 | 25 | /************** Combining Selectors **************/ 26 | 27 | /* assigning the same style to multiple selectors */ 28 | th, 29 | tr, 30 | td { 31 | border: 1px solid var(--black); 32 | } 33 | 34 | th, 35 | td { 36 | padding: 5px; 37 | } 38 | 39 | /* select all elements of type 'tr' with class 'first' */ 40 | tr.second { 41 | color: var(--red); 42 | } 43 | 44 | /************** Descendant, Child, and Sibling Selectors **************/ 45 | 46 | /* descendant selector */ 47 | .row li { 48 | font-weight: 600; 49 | } 50 | 51 | /* child selector */ 52 | .second > .pepper { 53 | background-color: var(--red); 54 | color: var(--white); 55 | } 56 | 57 | /* child selector */ 58 | /* would not work since
  • is not a direct descendant */ 59 | .row > li { 60 | color: var(--blue); 61 | } 62 | 63 | /* general sibling selector */ 64 | .second ~ tr { 65 | color: var(--orange); 66 | } 67 | 68 | /* direct sibling selector */ 69 | /* overrides previous rule */ 70 | .fourth + tr { 71 | color: var(--green); 72 | } 73 | 74 | /************* Pseudo-classes and Pseudo-Elements *************/ 75 | 76 | /* pseudo-class selector */ 77 | tr:hover { 78 | background-color: rgba(139, 0, 0, 0.1); 79 | } 80 | 81 | /* pseudo-class and pseudo-element selector */ 82 | tr > td:first-of-type::first-letter { 83 | font-size: 1.5em; 84 | } 85 | -------------------------------------------------------------------------------- /css/examples/01-selectors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Selectors 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 26 | 27 | 28 | 29 | 36 | 37 | 38 | 39 | 46 | 47 | 48 | 49 | 56 | 57 |
    Pepper NameScoville Heat Units
    Pure Capsaicin 20 | 15,000,000 - 16,000,000 21 |
      22 |
    • Super Hot
      • 23 |
    • 10
      • 24 |
    25 |
    Habanero 30 | 100,000 - 350,000 31 |
      32 |
    • Medium
      • 33 |
    • 5
      • 34 |
    35 |
    Cayenne, Tabasco, Pequin 40 | 30,000 - 50,000 41 |
      42 |
    • Medium
      • 43 |
    • 3
      • 44 |
    45 |
    Jalapeno, Poblano, Chipotle Jalapeño, Mirasol 50 | 2,500 - 5,000 51 |
      52 |
    • Mild
      • 53 |
    • 1
      • 54 |
    55 |
    58 |
    59 | 60 | 61 | -------------------------------------------------------------------------------- /css/examples/02-colors.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --black: #000; 3 | --white: #fff; 4 | } 5 | 6 | body { 7 | font-size: 1em; 8 | } 9 | 10 | .color-block { 11 | display: flex; 12 | flex-flow: row wrap; 13 | } 14 | 15 | .box { 16 | box-sizing: border-box; 17 | width: 250px; 18 | height: 140px; 19 | margin-right: 0.5em; 20 | padding: 0.5em; 21 | border: 1px solid black; 22 | background-color: var(--black); 23 | } 24 | 25 | .color-entry { 26 | margin: 0; 27 | margin-top: 0.4em; 28 | font-size: 1.4em; 29 | text-align: center; 30 | } 31 | 32 | .box1 { 33 | background-color: var(--black); 34 | color: var(--white); 35 | } 36 | 37 | .box2 { 38 | background-color: var(--white); 39 | } 40 | 41 | .box3 { 42 | background-color: #c00; 43 | color: var(--white); 44 | } 45 | 46 | .box4 { 47 | background-color: #0c0; 48 | } 49 | 50 | .box5 { 51 | background-color: #00c; 52 | color: var(--white); 53 | } 54 | 55 | .box6 { 56 | background-color: #c0c; 57 | color: var(--white); 58 | } 59 | 60 | .box7 { 61 | background-color: #0cc; 62 | } 63 | 64 | .box8 { 65 | background-color: #cc0; 66 | } 67 | 68 | .box9 { 69 | background-color: #ccc; 70 | } 71 | 72 | .box10 { 73 | background-color: #999; 74 | } 75 | 76 | .box11 { 77 | background-color: #666; 78 | color: var(--white); 79 | } 80 | 81 | .box12 { 82 | background-color: #333; 83 | color: var(--white); 84 | } 85 | -------------------------------------------------------------------------------- /css/examples/02-colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Colors 7 | 8 | 9 | 10 | 11 |
    12 |

    RGB Colors

    13 |

    Black and White

    14 |
    15 |
    16 |

    rgb(0, 0, 0)

    17 |

    #000000

    18 |

    #000

    19 |
    20 |
    21 |

    rgb(255, 255, 255)

    22 |

    #ffffff

    23 |

    #fff

    24 |
    25 |
    26 |

    Primary Colors

    27 |
    28 |
    29 |

    rgb(204, 0, 0)

    30 |

    #cc0000

    31 |

    #c00

    32 |
    33 |
    34 |

    rgb(0, 204, 0)

    35 |

    #00cc00

    36 |

    #0c0

    37 |
    38 |
    39 |

    rgb(0, 0, 204)

    40 |

    #0000cc

    41 |

    #00c

    42 |
    43 |
    44 |

    Secondary Colors

    45 |
    46 |
    47 |

    rgb(204, 0, 204)

    48 |

    #cc00cc

    49 |

    #c0c

    50 |
    51 |
    52 |

    rgb(0, 204, 204)

    53 |

    #00cccc

    54 |

    #0cc

    55 |
    56 |
    57 |

    rgb(204, 204, 0)

    58 |

    #cccc00

    59 |

    #cc0

    60 |
    61 |
    62 |

    Grays

    63 |
    64 |
    65 |

    rgb(204, 204, 204)

    66 |

    #cccccc

    67 |

    #ccc

    68 |
    69 |
    70 |

    rgb(153, 153, 153)

    71 |

    #999999

    72 |

    #999

    73 |
    74 |
    75 |

    rgb(102, 102, 102)

    76 |

    #666666

    77 |

    #666

    78 |
    79 |
    80 |

    rgb(51, 51, 51)

    81 |

    #333333

    82 |

    #333

    83 |
    84 |
    85 |
    86 | 87 | 88 | -------------------------------------------------------------------------------- /css/examples/03-box-model.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --white: white; 3 | --purple: #663399; 4 | --lavender: #b3b3e6; 5 | } 6 | 7 | body { 8 | font-family: 'Open Sans', 'Helvetica Neue', sans-serif; 9 | font-size: 1.2em; 10 | } 11 | 12 | .content-box, 13 | .border-box { 14 | width: 40vw; 15 | height: 50vh; 16 | margin: 10px auto; 17 | border: 10px dashed var(--lavender); 18 | border-radius: 10px; 19 | 20 | /* Options for specifying the padding property */ 21 | /* padding-top: 10px; 22 | padding-right: 20px; 23 | padding-bottom: 30px; 24 | padding-left: 40px; */ 25 | /* padding: 40px 30px 20px 10px; */ 26 | /* padding: 20px; */ 27 | padding: 20px 40px; 28 | 29 | background-color: var(--purple); 30 | color: var(--white); 31 | } 32 | 33 | .span { 34 | width: 300px; 35 | margin: 0 auto; 36 | } 37 | 38 | /* Display: none example */ 39 | /* Box-sizing: content-box vs border-box */ 40 | .border-box { 41 | /* display: none; */ 42 | box-sizing: border-box; 43 | } 44 | 45 | /* Size units: em vs rem */ 46 | .content-box { 47 | font-size: 1.5rem; 48 | } 49 | 50 | .paragraph { 51 | font-size: 1.5rem; 52 | } 53 | 54 | .span { 55 | font-size: 1.5rem; 56 | } 57 | -------------------------------------------------------------------------------- /css/examples/03-box-model.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Box Model 7 | 8 | 9 | 10 |
    11 |

    CSS Box Model

    12 |
    13 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda 14 | excepturi quis autem rem molestias temporibus. Perferendis hic 15 | reprehenderit veritatis officiis iure dicta quidem eos aliquid, iusto 16 | aperiam nobis facere alias. 17 |

    18 | Lorem ipsum 19 | example 20 |

    21 |
    22 |
    23 | Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda 24 | excepturi quis autem rem molestias temporibus. Perferendis hic 25 | reprehenderit veritatis officiis iure dicta quidem eos aliquid, iusto 26 | aperiam nobis facere alias. 27 |
    28 |
    29 | 30 | 31 | -------------------------------------------------------------------------------- /css/examples/04-media-queries.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --plum: #dda0dd; 3 | --coral: #f08080; 4 | --lavender: #e6e6fa; 5 | --orange: #ffa500; 6 | --darkgolden: #b8860b; 7 | --chocolate: #d2691e; 8 | --lightblue: #87cefa; 9 | --lightgreen: #90ee90; 10 | } 11 | 12 | .button { 13 | width: 160px; 14 | height: 50px; 15 | border: 0px; 16 | border-radius: 6px; 17 | background-color: var(--black); 18 | color: var(--white); 19 | font-size: 1em; 20 | } 21 | 22 | .button:hover { 23 | background-color: var(--lightgreen); 24 | color: var(--black); 25 | } 26 | 27 | @media (max-width: 414px) { 28 | body { 29 | background: var(--purple); 30 | color: var(--white); 31 | font-size: 1em; 32 | } 33 | 34 | .button:hover { 35 | background: linear-gradient(to right, var(--plum), var(--coral)); 36 | color: var(--black); 37 | } 38 | 39 | .h1 { 40 | color: var(--lavender); 41 | } 42 | } 43 | 44 | @media (min-width: 415px) and (max-width: 768px) { 45 | body { 46 | background: var(--orange); 47 | } 48 | 49 | .button:hover { 50 | background: linear-gradient(to right, var(--darkgolden), var(--chocolate)); 51 | color: var(--black); 52 | } 53 | } 54 | 55 | @media (min-width: 769px) { 56 | body { 57 | background: var(--green); 58 | color: var(--white); 59 | } 60 | 61 | .button:hover { 62 | background: linear-gradient(to right, var(--lightblue), var(--lightgreen)); 63 | color: var(--black); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /css/examples/04-media-queries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Media Queries 7 | 8 | 9 | 10 | 11 |
    12 |

    Media Queries

    13 |
    14 |

    15 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat, labore 16 | unde beatae quos cum asperiores et dolorem, debitis possimus aliquam 17 | eligendi maiores? Officiis aspernatur, omnis cum aliquid hic cumque 18 | reprehenderit? Illo ad voluptate itaque modi corrupti culpa veritatis 19 | nesciunt, quo, architecto eius cum tempore quidem nihil odio. Esse, 20 | temporibus velit repellat earum eveniet vel sapiente aut corrupti 21 | recusandae perspiciatis officiis. Saepe aliquid minima veniam 22 | perspiciatis obcaecati tempora quas, doloremque ducimus sit, non amet ex 23 | dolor? Similique numquam quo quidem voluptas placeat praesentium 24 | molestiae, debitis ut quam aliquid in voluptatem quibusdam. 25 |

    26 | 27 |
    28 | 29 | 30 | -------------------------------------------------------------------------------- /css/examples/05-flexbox.css: -------------------------------------------------------------------------------- 1 | .flex-container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | justify-content: center; 5 | } 6 | -------------------------------------------------------------------------------- /css/examples/05-flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Flexbox 7 | 8 | 9 | 10 | 11 |
    12 |
    13 |
    1
    14 |
    2
    15 |
    3
    16 |
    4
    17 |
    5
    18 |
    19 |
    20 | 21 | 22 | -------------------------------------------------------------------------------- /css/examples/06-grid.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | display: grid; 3 | grid-template-columns: 1fr 2fr 2fr 1fr; 4 | gap: 10px; 5 | } 6 | 7 | .item1 { 8 | grid-row: span 2; 9 | } 10 | 11 | .item6 { 12 | grid-column: span 2; 13 | } 14 | -------------------------------------------------------------------------------- /css/examples/06-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Grid 7 | 8 | 9 | 10 | 11 |
    12 |
    13 |
    1
    14 |
    2
    15 |
    3
    16 |
    4
    17 |
    5
    18 |
    6
    19 |
    20 |
    21 | 22 | 23 | -------------------------------------------------------------------------------- /css/examples/07-grid-areas.css: -------------------------------------------------------------------------------- 1 | .header { 2 | grid-area: header; 3 | } 4 | 5 | .section { 6 | grid-area: main; 7 | } 8 | 9 | .card1 { 10 | grid-area: card1; 11 | } 12 | 13 | .card2 { 14 | grid-area: card2; 15 | } 16 | 17 | .card3 { 18 | grid-area: card3; 19 | } 20 | 21 | .footer { 22 | grid-area: footer; 23 | } 24 | 25 | .grid-container { 26 | display: grid; 27 | height: 97vh; 28 | grid-template-columns: 1fr; 29 | grid-template-rows: repeat(7, 1fr); 30 | gap: 10px; 31 | grid-template-areas: 32 | 'header' 33 | 'main' 34 | 'main' 35 | 'main' 36 | 'card1' 37 | 'card2' 38 | 'footer'; 39 | } 40 | 41 | @media (max-width: 415px) { 42 | body { 43 | font-size: 1em; 44 | } 45 | 46 | .card3 { 47 | display: none; 48 | } 49 | } 50 | 51 | @media (min-width: 415px) and (max-width: 768px) { 52 | .grid-container { 53 | grid-template-columns: 1fr 2fr; 54 | grid-template-rows: repeat(6, 1fr); 55 | grid-template-areas: 56 | 'header header' 57 | 'main main' 58 | 'main main' 59 | 'main main' 60 | 'card1 card2' 61 | 'footer footer'; 62 | } 63 | 64 | .card3 { 65 | display: none; 66 | } 67 | } 68 | 69 | @media (min-width: 769px) { 70 | .grid-container { 71 | grid-template-columns: repeat(3, 1fr); 72 | grid-template-rows: repeat(5, 1fr); 73 | grid-template-areas: 74 | 'header header header' 75 | 'main main main' 76 | 'main main main' 77 | 'card1 card2 card3' 78 | 'footer footer footer'; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /css/examples/07-grid-areas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Grid Areas 7 | 8 | 9 | 10 | 11 |
    12 |
    13 |
    Header
    14 |
    Section
    15 | 16 | 17 | 18 |
    Footer
    19 |
    20 |
    21 | 22 | 23 | -------------------------------------------------------------------------------- /css/exercises/01-selectors.css: -------------------------------------------------------------------------------- 1 | /* CSS custom properties / CSS variables */ 2 | 3 | :root { 4 | --darkmagenta: #8b008b; 5 | --magenta: #ff00ff; 6 | --royalblue: #4169e1; 7 | --teal: #008080; 8 | --violet: #9400d3; 9 | } 10 | 11 | /* Use attribute selectors for the first part of the exercise */ 12 | 13 | li[class] { 14 | color: var(--red); 15 | } 16 | 17 | /* Use descendant, child, and sibling selectors for the second part */ 18 | 19 | section li { 20 | color: var(--green); 21 | } 22 | -------------------------------------------------------------------------------- /css/exercises/01-selectors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 01 - Selectors 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    Attribute Selectors

    14 |
      15 |
    1. dog
      2. 16 |
    2. cat
      3. 17 |
    3. parrot
      4. 18 |
    4. donkey
      5. 19 |
    5. hedgehog
      6. 20 |
    6. dog, a cat, and a parrot
      7. 21 |
    22 |
    23 |
    24 |

    Parent and Sibling Selectors

    25 |
    26 |
    Shopping list for food supplies.
    27 |
      28 |
    1. eggs
      2. 29 |
    2. flour
      3. 30 |
    3. milk
      4. 31 |
    4. coffee
      5. 32 |
    33 |
    **if available, also get oatmeal
    34 |
    35 |
    36 |

    Shopping list for cleaning supplies.

    37 |
      38 |
    1. clorox wipes
      2. 39 |
    2. gloves
      3. 40 |
    3. masks
      4. 41 |
    42 |
    43 |
    44 | 45 | 46 | -------------------------------------------------------------------------------- /css/exercises/02-pseudo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 600px; 3 | margin: 40px auto; 4 | } 5 | -------------------------------------------------------------------------------- /css/exercises/02-pseudo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 02 - Pseudo Classes and Pseudo Elements 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    14 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, nam 15 | inventore veniam, reiciendis sequi neque asperiores, quas facere et 16 | dolorum animi pariatur? Corporis tenetur consequuntur sit praesentium 17 | suscipit porro inventore. 18 |

    19 |

    20 | Vero placeat harum voluptatem accusantium itaque nam laborum maxime? 21 | Harum similique ipsum quo laborum, eos, vel nostrum quia exercitationem 22 | dicta doloremque est quos? Ea, eveniet numquam? Sapiente facilis 23 | repudiandae aliquam. 24 |

    25 |

    26 | Provident voluptate incidunt ipsam, ex fugiat dolorem rerum adipisci 27 | architecto, obcaecati ut ipsa eum, vel magni? Aspernatur eaque ipsa quae 28 | sed commodi voluptatum sequi, optio accusantium corporis asperiores 29 | voluptatem illum! 30 |

    31 |
    32 | 33 | 34 | -------------------------------------------------------------------------------- /css/exercises/03-specificity.css: -------------------------------------------------------------------------------- 1 | /* Specificity Exercise */ 2 | 3 | nav .list-item > a { 4 | color: var(--purple); 5 | } 6 | 7 | #main::first-letter { 8 | color: var(--purple); 9 | } 10 | 11 | input[type] { 12 | color: var(--purple); 13 | } 14 | 15 | section .main::first-line { 16 | color: var(--purple); 17 | } 18 | 19 | nav ul.menu li#first a:not([class='visited']) { 20 | color: var(--purple); 21 | } 22 | 23 | div ol li ul li ol li ul li a { 24 | color: var(--purple); 25 | } 26 | -------------------------------------------------------------------------------- /css/exercises/04-layout.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gold: #ffd700; 3 | } 4 | 5 | body { 6 | color: var(--black); 7 | } 8 | 9 | .header, 10 | .section, 11 | .aside { 12 | box-sizing: content-box; 13 | padding: 10px; 14 | border: 4px solid var(--black); 15 | } 16 | 17 | .header { 18 | background-color: var(--blue); 19 | } 20 | 21 | .section { 22 | display: inline-block; 23 | width: 75%; 24 | height: 300px; 25 | background-color: var(--orange); 26 | } 27 | 28 | .aside { 29 | float: right; 30 | width: 25%; 31 | height: 300px; 32 | background-color: var(--gold); 33 | } 34 | -------------------------------------------------------------------------------- /css/exercises/04-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 04 - Layout 8 | 9 | 10 | 11 | 12 | 13 |
    14 |

    Page Title

    15 |
    16 |
    17 |
    18 |

    Title

    19 |

    Lorem ipsum

    20 |
    21 |
    22 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /css/exercises/05-position.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --darkviolet: #9400d3; 3 | --maroon: #800000; 4 | --darkgolden: #8f6805; 5 | } 6 | 7 | .box { 8 | padding: 10px; 9 | color: var(--white); 10 | } 11 | 12 | .static { 13 | background-color: var(--darkviolet); 14 | } 15 | 16 | .relative { 17 | background-color: var(--purple); 18 | } 19 | 20 | .absolute { 21 | background-color: var(--maroon); 22 | } 23 | 24 | .fixed { 25 | background-color: var(--darkgolden); 26 | } 27 | -------------------------------------------------------------------------------- /css/exercises/05-position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 05 - Position 7 | 8 | 9 | 10 | 11 | 12 |
    13 |
    14 | position: static;
    15 | 300px x 400px 16 |
    17 |
    18 | position: relative;
    19 | 300px x 400px 20 |
    21 |
    22 |
    23 | position: absolute;
    24 | 100% x 70px 25 |
    26 |
    27 | position: fixed;
    28 | 100% x 70px 29 |
    30 | 31 | 32 | -------------------------------------------------------------------------------- /css/exercises/06-media-queries.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 1024px) { 2 | body { 3 | background: var(--green); 4 | color: var(--white); 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /css/exercises/06-media-queries.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 06 - Media Queries 8 | 9 | 10 | 11 | 12 | 13 |
    14 | 21 |
    22 |
    23 |
    24 |

    parmesan

    25 |

    26 | Boursin cheese and biscuits fondue. St. agur blue cheese manchego 27 | airedale bavarian bergkase jarlsberg bocconcini cottage cheese cheese 28 | and wine. Dolcelatte fromage frais goat hard cheese the big cheese 29 | bocconcini cheese strings macaroni cheese. Cottage cheese goat cow 30 | feta red leicester cream cheese brie. 31 |

    32 |
    33 |
    34 |

    manchego

    35 |

    36 | Boursin cheese and biscuits fondue. St. agur blue cheese manchego 37 | airedale bavarian bergkase jarlsberg bocconcini cottage cheese cheese 38 | and wine. Dolcelatte fromage frais goat hard cheese the big cheese 39 | bocconcini cheese strings macaroni cheese. Cottage cheese goat cow 40 | feta red leicester cream cheese brie. 41 |

    42 |
    43 |
    44 | 45 | 46 | -------------------------------------------------------------------------------- /css/exercises/07-flexbox.css: -------------------------------------------------------------------------------- 1 | .flex-container { 2 | background-color: rgb(190, 190, 231); 3 | } 4 | 5 | /* Flex Container 1 */ 6 | 7 | /* Flex Container 2 */ 8 | 9 | /* Flex Container 3 */ 10 | 11 | /* use height: 400px; on the container */ 12 | 13 | /* Flex Container 4 */ 14 | 15 | /* Flex Container 5 */ 16 | 17 | /* Flex Container 6 */ 18 | 19 | .flex-container-6 .flex-item { 20 | width: 400px; 21 | } 22 | 23 | /* use height: 300px; on the container */ 24 | -------------------------------------------------------------------------------- /css/exercises/07-flexbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 07 - Flexbox 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    Flex Container 1

    14 |
    15 |
    1
    16 |
    2
    17 |
    3
    18 |
    4
    19 |
    5
    20 |
    6
    21 |
    7
    22 |
    8
    23 |
    24 |

    Flex Container 2

    25 |
    26 |
    1
    27 |
    2
    28 |
    3
    29 |
    4
    30 |
    5
    31 |
    6
    32 |
    7
    33 |
    8
    34 |
    35 |

    Flex Container 3

    36 |
    37 |
    1
    38 |
    2
    39 |
    3
    40 |
    4
    41 |
    5
    42 |
    6
    43 |
    7
    44 |
    8
    45 |
    46 |

    Flex Container 4

    47 |
    48 |
    1
    49 |
    2
    50 |
    3
    51 |
    4
    52 |
    5
    53 |
    6
    54 |
    7
    55 |
    8
    56 |
    57 |

    Flex Container 5

    58 |
    59 |
    1
    60 |
    2
    61 |
    3
    62 |
    4
    63 |
    5
    64 |
    6
    65 |
    7
    66 |
    8
    67 |
    68 |

    Flex Container 6

    69 |
    70 |
    1
    71 |
    2
    72 |
    3
    73 |
    4
    74 |
    5
    75 |
    6
    76 |
    7
    77 |
    8
    78 |
    79 |
    80 | 81 | 82 | -------------------------------------------------------------------------------- /css/exercises/08-grid.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | background-color: rgb(190, 190, 231); 3 | } 4 | 5 | /* Grid Container 1 */ 6 | 7 | /* Grid Container 2 */ 8 | 9 | /* use height: 400px; on the container */ 10 | 11 | /* Grid Container 3 */ 12 | 13 | /* use height: 400px; on the container */ 14 | 15 | /* Grid Container 4 */ 16 | 17 | /* use height: 600px; on the container */ 18 | -------------------------------------------------------------------------------- /css/exercises/08-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 08 - CSS Grid 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    Grid Container 1

    14 |
    15 |
    1
    16 |
    2
    17 |
    3
    18 |
    4
    19 |
    5
    20 |
    6
    21 |
    7
    22 |
    8
    23 |
    24 |

    Grid Container 2

    25 |
    26 |
    1
    27 |
    2
    28 |
    3
    29 |
    4
    30 |
    5
    31 |
    6
    32 |
    7
    33 |
    8
    34 |
    35 |

    Grid Container 3

    36 |
    37 |
    1
    38 |
    2
    39 |
    3
    40 |
    4
    41 |
    5
    42 |
    6
    43 |
    7
    44 |
    8
    45 |
    46 |

    Grid Container 4

    47 |
    48 |
    1
    49 |
    2
    50 |
    3
    51 |
    4
    52 |
    5
    53 |
    6
    54 |
    7
    55 |
    8
    56 |
    57 |
    58 | 59 | 60 | -------------------------------------------------------------------------------- /css/exercises/09-grid-areas.css: -------------------------------------------------------------------------------- 1 | .header { 2 | grid-area: header; 3 | } 4 | 5 | .article { 6 | grid-area: article; 7 | } 8 | 9 | .grid-container { 10 | display: grid; 11 | height: 97vh; 12 | grid-template-columns: 1fr; 13 | grid-template-rows: repeat(8, 1fr); 14 | gap: 10px; 15 | grid-template-areas: 16 | 'header' 17 | 'article' 18 | 'article' 19 | 'section' 20 | 'section' 21 | 'section' 22 | 'aside' 23 | 'footer'; 24 | } 25 | -------------------------------------------------------------------------------- /css/exercises/09-grid-areas.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 09 - CSS Grid Areas 7 | 8 | 9 | 10 | 11 | 12 |
    13 |
    Header
    14 |
    Article
    15 | 16 |
    Section
    17 |
    Footer
    18 |
    19 | 20 | 21 | -------------------------------------------------------------------------------- /css/exercises/_css-exercises.md: -------------------------------------------------------------------------------- 1 | # CSS Exercises 2 | 3 | - [Exercise 01 - Selectors](#ex01) 4 | - [Exercise 02 - Pseudo](#ex02) 5 | - [Exercise 03 - Specificity](#ex03) 6 | - [Exercise 04 - Layout](#ex04) 7 | - [Exercise 05 - Position](#ex05) 8 | - [Exercise 06 - Media Queries](#ex06) 9 | - [Exercise 07 - Flexbox](#ex07) 10 | - [Exercise 08 - CSS Grid](#ex08) 11 | - [Exercise 09 - CSS Grid Areas](#ex09) 12 | 13 | ## Exercise 01 - Selectors 14 | 15 | Recreate the snapshot below by using attribute, descendant, child, and sibling selectors. 16 | 17 | screenshot of an exercise 18 | 19 | ## Exercise 02 - Pseudo 20 | 21 | Recreate the snapshot below using pseudo elements. 22 | 23 | screenshot of an exercise 24 | 25 | ## Exercise 03 - Specificity 26 | 27 | Calculate the specificity of the rules below. 28 | 29 | ```css 30 | nav .list-item > a { 31 | } 32 | 33 | #main::first-letter { 34 | } 35 | 36 | input[type] { 37 | } 38 | 39 | section .main::first-line { 40 | } 41 | 42 | nav ul.menu li#first a:not([class='visited']) { 43 | } 44 | 45 | div ol li ul li ol li ul li a { 46 | } 47 | ``` 48 | 49 | ## Exercise 04 - Layout 50 | 51 | Update the layout in the starter files to match the screenshots below. 52 | 53 | screenshot of a layout 54 | screenshot of a layout 55 | 56 | ## Exercise 05 - Position 57 | 58 | Update the layout in the starter files to match the screenshots below. 59 | 60 | screenshot of a layout 61 | screenshot of a layout 62 | 63 | ## Exercise 06 - Media Queries 64 | 65 | Update the layout in the starter files to match the screenshots below. 66 | 67 | screenshot of a layout 68 | screenshot of a layout 69 | screenshot of a layout 70 | 71 | ## Exercise 07 - Flexbox 72 | 73 | Create the following layouts using Flexbox. 74 | 75 | screenshot of a layout 76 | screenshot of a layout 77 | screenshot of a layout 78 | screenshot of a layout 79 | screenshot of a layout 80 | screenshot of a layout 81 | 82 | ## Exercise 08 - CSS Grid 83 | 84 | Create the following layouts using CSS Grid. 85 | 86 | screenshot of a layout 87 | screenshot of a layout 88 | screenshot of a layout 89 | screenshot of a layout 90 | 91 | ## Exercise 09 - CSS Grid Areas 92 | 93 | Create the following layouts using CSS Grid. 94 | 95 | screenshot of a layout 96 | screenshot of a layout 97 | screenshot of a layout 98 | -------------------------------------------------------------------------------- /css/solutions/01-selectors.css: -------------------------------------------------------------------------------- 1 | /* CSS custom properties / CSS variables */ 2 | 3 | :root { 4 | --magenta: #ff00ff; 5 | --teal: #008080; 6 | --royalblue: #4169e1; 7 | --violet: #9400d3; 8 | --green: #008000; 9 | --magenta: #8b008b; 10 | } 11 | 12 | /* Attribute selectors */ 13 | 14 | li[class~='dog'] { 15 | color: var(--magenta); 16 | } 17 | 18 | li[id^='c'] { 19 | color: var(--teal); 20 | } 21 | 22 | li[class*='do'] { 23 | color: var(--royalblue); 24 | } 25 | 26 | li[class$='g'] { 27 | color: var(--violet); 28 | } 29 | 30 | /* Parent and Sibiling selectors */ 31 | 32 | section li { 33 | color: var(--green); 34 | } 35 | 36 | .first ~ li { 37 | color: var(--magenta); 38 | } 39 | 40 | .second + li { 41 | color: var(--royalblue); 42 | } 43 | -------------------------------------------------------------------------------- /css/solutions/02-pseudo.css: -------------------------------------------------------------------------------- 1 | .container { 2 | width: 600px; 3 | margin: 40px auto; 4 | } 5 | 6 | .paragraph::first-letter { 7 | font-size: 3em; 8 | } 9 | 10 | .paragraph:hover { 11 | background-color: var(--lavender); 12 | } 13 | -------------------------------------------------------------------------------- /css/solutions/04-layout.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gold: #ffd700; 3 | } 4 | 5 | body { 6 | color: var(--black); 7 | } 8 | 9 | .header, 10 | .section, 11 | .aside { 12 | box-sizing: border-box; 13 | padding: 10px; 14 | border: 4px solid var(--black); 15 | } 16 | 17 | .header { 18 | background-color: var(--blue); 19 | } 20 | 21 | .section { 22 | display: inline-block; 23 | width: 75%; 24 | height: 300px; 25 | background-color: var(--orange); 26 | } 27 | 28 | .aside { 29 | float: right; 30 | width: 25%; 31 | height: 300px; 32 | background-color: var(--gold); 33 | } 34 | -------------------------------------------------------------------------------- /css/solutions/05-position.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --darkviolet: #9400d3; 3 | --maroon: #800000; 4 | --darkgolden: #8f6805; 5 | } 6 | 7 | .box { 8 | padding: 10px; 9 | color: var(--white); 10 | } 11 | 12 | .main { 13 | margin-top: 80px; 14 | } 15 | 16 | .static { 17 | position: static; 18 | width: 300px; 19 | height: 400px; 20 | background-color: var(--darkviolet); 21 | } 22 | 23 | .relative { 24 | position: relative; 25 | top: -400px; 26 | left: 310px; 27 | width: 300px; 28 | height: 400px; 29 | background-color: var(--purple); 30 | } 31 | 32 | .absolute { 33 | position: absolute; 34 | top: 0; 35 | left: 0; 36 | width: 100%; 37 | height: 70px; 38 | background-color: var(--maroon); 39 | } 40 | 41 | .fixed { 42 | position: fixed; 43 | bottom: 0; 44 | left: 0; 45 | width: 100%; 46 | height: 70px; 47 | background-color: var(--darkgolden); 48 | } 49 | -------------------------------------------------------------------------------- /css/solutions/06-media-queries.css: -------------------------------------------------------------------------------- 1 | nav { 2 | position: fixed; 3 | top: 0px; 4 | left: 0px; 5 | width: 100%; 6 | background-color: var(--black); 7 | } 8 | 9 | nav ul { 10 | margin: 0; 11 | padding: 0; 12 | } 13 | 14 | nav ul li { 15 | display: inline-block; 16 | list-style-type: none; 17 | } 18 | 19 | nav ul li a { 20 | display: block; 21 | margin: 10px 10px; 22 | padding: 10px; 23 | color: var(--white); 24 | text-decoration: none; 25 | } 26 | 27 | li:hover { 28 | background-color: var(--gray1); 29 | } 30 | 31 | .main { 32 | margin-top: 100px; 33 | padding: 0 12px; 34 | } 35 | 36 | @media (max-width: 414px) { 37 | body { 38 | background: var(--purple); 39 | color: var(--white); 40 | } 41 | 42 | nav ul li { 43 | width: 100%; 44 | } 45 | 46 | .main { 47 | margin-top: 260px; 48 | } 49 | } 50 | 51 | @media (min-width: 415px) and (max-width: 1024px) { 52 | body { 53 | background: var(--orange); 54 | } 55 | } 56 | 57 | @media (min-width: 1025px) { 58 | body { 59 | background: var(--green); 60 | color: var(--white); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /css/solutions/07-flexbox.css: -------------------------------------------------------------------------------- 1 | .flex-container { 2 | background-color: rgb(190, 190, 231); 3 | } 4 | 5 | /* Flex Container 1 */ 6 | 7 | .flex-container-1 { 8 | display: flex; 9 | flex-wrap: wrap; 10 | justify-content: center; 11 | } 12 | 13 | /* Flex Container 2 */ 14 | 15 | .flex-container-2 { 16 | display: flex; 17 | flex-flow: row-reverse wrap; 18 | } 19 | 20 | /* Flex Container 3 */ 21 | 22 | .flex-container-3 { 23 | height: 400px; 24 | display: flex; 25 | flex-flow: column-reverse wrap; 26 | align-items: flex-end; 27 | } 28 | 29 | /* Flex Container 4 */ 30 | 31 | .flex-container-4 { 32 | display: flex; 33 | flex-flow: row wrap-reverse; 34 | justify-content: space-evenly; 35 | } 36 | 37 | /* Flex Container 5 */ 38 | 39 | .flex-container-5 { 40 | display: flex; 41 | align-items: center; 42 | } 43 | 44 | .flex-container-5 .item1, 45 | .flex-container-5 .item3, 46 | .flex-container-5 .item6 { 47 | height: 150px; 48 | } 49 | 50 | .flex-container-5 .item2, 51 | .flex-container-5 .item8 { 52 | height: 250px; 53 | } 54 | 55 | /* Flex Container 6 */ 56 | 57 | .flex-container-6 .flex-item { 58 | width: 400px; 59 | } 60 | 61 | .flex-container-6 { 62 | height: 300px; 63 | display: flex; 64 | flex-flow: column wrap; 65 | } 66 | -------------------------------------------------------------------------------- /css/solutions/08-grid.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | background-color: rgb(190, 190, 231); 3 | } 4 | 5 | /* Grid Container 1 */ 6 | 7 | .grid-container-1 { 8 | display: grid; 9 | grid-template-columns: 1fr 3fr 3fr; 10 | gap: 10px; 11 | } 12 | 13 | /* Grid Container 2 */ 14 | 15 | .grid-container-2 { 16 | height: 400px; 17 | display: grid; 18 | grid-template-columns: 1fr 2fr 1fr 1fr; 19 | grid-template-rows: 1fr 4fr; 20 | gap: 10px; 21 | } 22 | 23 | /* Grid Container 3 */ 24 | 25 | .grid-container-3 { 26 | height: 400px; 27 | display: grid; 28 | grid-template-columns: 1fr 3fr 3fr; 29 | grid-template-rows: 1fr 3fr 3fr; 30 | gap: 10px; 31 | } 32 | 33 | .grid-container-3 .item8 { 34 | grid-column: span 2; 35 | } 36 | 37 | /* Grid Container 4 */ 38 | 39 | .grid-container-4 { 40 | height: 600px; 41 | display: grid; 42 | grid-template-columns: 1fr 3fr; 43 | grid-template-rows: 1fr 2fr 1fr 1fr; 44 | gap: 10px; 45 | } 46 | 47 | .grid-container-4 .item1 { 48 | grid-row: span 2; 49 | } 50 | 51 | .grid-container-4 .item6 { 52 | grid-column: span 2; 53 | } 54 | -------------------------------------------------------------------------------- /css/solutions/09-grid-areas.css: -------------------------------------------------------------------------------- 1 | /* set up grid areas */ 2 | .header { 3 | grid-area: header; 4 | } 5 | 6 | .article { 7 | grid-area: article; 8 | } 9 | 10 | .aside { 11 | grid-area: aside; 12 | } 13 | 14 | .section { 15 | grid-area: section; 16 | } 17 | 18 | .footer { 19 | grid-area: footer; 20 | } 21 | 22 | /* set up the default grid container */ 23 | .grid-container { 24 | display: grid; 25 | height: 97vh; 26 | grid-template-columns: 1fr; 27 | grid-template-rows: repeat(8, 1fr); 28 | gap: 10px; 29 | grid-template-areas: 30 | 'header' 31 | 'article' 32 | 'article' 33 | 'section' 34 | 'section' 35 | 'section' 36 | 'aside' 37 | 'footer'; 38 | } 39 | 40 | /* set up grid container for breakpoints above 576px */ 41 | @media (min-width: 576px) { 42 | .grid-container { 43 | grid-template-columns: 3fr 1fr; 44 | grid-template-rows: 1fr 4fr 3fr 1fr; 45 | grid-template-areas: 46 | 'header header' 47 | 'article aside' 48 | 'section section' 49 | 'footer footer'; 50 | } 51 | } 52 | 53 | /* set up grid container for breakpoints above 768px */ 54 | @media (min-width: 768px) { 55 | .grid-container { 56 | grid-template-columns: repeat(3, 1fr); 57 | grid-template-rows: 1fr 3fr 3fr 1fr; 58 | grid-template-areas: 59 | 'header header header' 60 | 'article article aside' 61 | 'section section section' 62 | 'footer footer footer'; 63 | } 64 | } 65 | 66 | /* set up grid container for breakpoints above 992px */ 67 | @media (min-width: 992px) { 68 | .grid-container { 69 | grid-template-columns: repeat(4, 1fr); 70 | grid-template-rows: 1fr 3fr 3fr 1fr; 71 | grid-template-areas: 72 | 'header header header header' 73 | 'aside article article article' 74 | 'section section section section' 75 | 'footer footer footer footer'; 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /html/examples/00-hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Hello World 8 | 9 | 10 |

    This is a heading - h1

    11 |

    This is a heading - h2

    12 |

    This is a heading - h3

    13 |

    This is a heading - h4

    14 |
    This is a heading - h5
    15 |
    This is a heading - h6
    16 |

    This is paragraph text

    17 | This is a span element 18 | This is another span element 19 | 20 | 21 | -------------------------------------------------------------------------------- /html/examples/01-lists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Lists Example 8 | 9 | 10 |
    11 |

    Scrambled Eggs

    12 |

    Here is a recipe for deliciously rich scrambled eggs.

    13 |

    Ingredients

    14 |
      15 |
    • 2 eggs
      • 16 |
    • 1tbs butter
      • 17 |
    • 2tbs cream
      • 18 |
    19 |

    Method

    20 |
      21 |
    1. Melt butter in a frying pan over medium heat.
      2. 22 |
    2. Gently mix the eggs and the cream in a bowl.
      3. 23 |
    3. Once butter has melted, add cream and eggs.
      4. 24 |
    4. 25 | Using a spatula, fold the eggs from the edge of the pan to the center 26 | every 20 seconds. 27 |
      5. 28 |
    5. 29 | When the eggs still moist, remove from the heat. (It will continue to 30 | cook on the plate until served.) 31 |
      6. 32 |
    33 |
    34 | 35 | 36 | -------------------------------------------------------------------------------- /html/examples/02-links.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Links Example 8 | 9 | 10 |
    11 |

    All About Cheese

    12 | 21 |
    22 |
    23 |
    24 |

    Parmesan

    25 |

    Info about Parmesan Chesse

    26 | 27 |

    28 | Fromage frais cheddar the big cheese. Chalk and cheese fondue 29 | dolcelatte feta ricotta port-salut airedale edam. Taleggio smelly 30 | cheese cow croque monsieur bocconcini ricotta roquefort cow. 31 | Cheesecake stilton red leicester cut the cheese cheesecake mozzarella 32 | goat cheesy grin. Squirty cheese hard cheese bocconcini queso. 33 |

    34 |
    35 |
    36 |

    Camembert

    37 |

    Info about Camembert Chesse

    38 | 39 |

    40 | Camembert de normandie st. agur blue cheese stinking bishop. Blue 41 | castello cheese strings cheese triangles dolcelatte camembert de 42 | normandie say cheese boursin babybel. Gouda babybel swiss when the 43 | cheese comes out everybody's happy everyone loves port-salut queso st. 44 | agur blue cheese. Bavarian bergkase roquefort fromage cheesy feet 45 | smelly cheese. 46 |

    47 |
    48 |
    49 |

    Manchego

    50 |

    Info about Manchego Chesse

    51 | 52 |

    53 | Halloumi cheese triangles cheesecake. Croque monsieur lancashire swiss 54 | babybel airedale ricotta mascarpone fromage. Cow stilton taleggio brie 55 | lancashire feta feta babybel. Gouda caerphilly fromage when the cheese 56 | comes out everybody's happy. 57 |

    58 |

    59 | Feta gouda mascarpone. Cut the cheese bavarian bergkase who moved my 60 | cheese fromage jarlsberg who moved my cheese cheeseburger taleggio. 61 | Halloumi when the cheese comes out everybody's happy roquefort fromage 62 | frais stilton cheese and wine cheese and biscuits parmesan. Cheese 63 | strings cheese and biscuits. 64 |

    65 |
    66 |
    67 | 68 | 69 | -------------------------------------------------------------------------------- /html/examples/03-images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML Images Example 7 | 8 | 9 |
    10 |

    HTML Images Example

    11 | kitten 17 | smol kitten 23 | cute kitten 30 |
    31 | 32 | 33 | -------------------------------------------------------------------------------- /html/examples/04-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Table Example 8 | 16 | 17 | 18 |
    19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 |
    Table HeaderTable Header
    Table Element 1.1Table Element 1.2Table Element 1.3
    Table Element 2.2Table Element 2.3
    Table Element 3.1Table Element 3.2Table Element 3.3
    Table Element 4.1Table Element 4.2
    Table Element 5.1
    50 |
    51 | 52 | 53 | -------------------------------------------------------------------------------- /html/examples/05-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Form Example 8 | 9 | 10 |
    11 |
    12 |

    Contact Details

    13 |
    14 | 15 | 16 |
    17 |
    18 |
    19 | 20 | 21 |
    22 |
    23 |
    24 | 25 | 30 |
    31 |
    32 |
    33 | 34 | 35 |
    36 |
    37 |
    38 | 39 | 40 |
    41 |
    42 |
    43 | 44 | 45 | -------------------------------------------------------------------------------- /html/examples/06-one-page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML Internal Target Example 8 | 9 | 10 |
    11 |

    All About Cheese

    12 | 20 |
    21 |
    22 |
    23 |

    Parmesan

    24 |

    Info about Parmesan Chesse

    25 | 26 |

    27 | Fromage frais cheddar the big cheese. Chalk and cheese fondue 28 | dolcelatte feta ricotta port-salut airedale edam. Taleggio smelly 29 | cheese cow croque monsieur bocconcini ricotta roquefort cow. 30 | Cheesecake stilton red leicester cut the cheese cheesecake mozzarella 31 | goat cheesy grin. Squirty cheese hard cheese bocconcini queso. 32 |

    33 |
    34 |
    35 |

    Camembert

    36 |

    Info about Camembert Chesse

    37 | 38 |

    39 | Camembert de normandie st. agur blue cheese stinking bishop. Blue 40 | castello cheese strings cheese triangles dolcelatte camembert de 41 | normandie say cheese boursin babybel. Gouda babybel swiss when the 42 | cheese comes out everybody's happy everyone loves port-salut queso st. 43 | agur blue cheese. Bavarian bergkase roquefort fromage cheesy feet 44 | smelly cheese. 45 |

    46 |
    47 |
    48 |

    Manchego

    49 |

    Info about Manchego Chesse

    50 | 51 |

    52 | Halloumi cheese triangles cheesecake. Croque monsieur lancashire swiss 53 | babybel airedale ricotta mascarpone fromage. Cow stilton taleggio brie 54 | lancashire feta feta babybel. Gouda caerphilly fromage when the cheese 55 | comes out everybody's happy. 56 |

    57 |

    58 | Feta gouda mascarpone. Cut the cheese bavarian bergkase who moved my 59 | cheese fromage jarlsberg who moved my cheese cheeseburger taleggio. 60 | Halloumi when the cheese comes out everybody's happy roquefort fromage 61 | frais stilton cheese and wine cheese and biscuits parmesan. Cheese 62 | strings cheese and biscuits. 63 |

    64 |
    65 |
    66 | 67 | 68 | -------------------------------------------------------------------------------- /html/examples/07-semantics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML Semantics Example 7 | 8 | 9 | 10 |
    Superbear saves the day
    11 |
    12 |

    2015-08-07

    13 |

    The city's favorite bear rescues a young cat from a tree.

    14 |
    15 |
    Related Articles
    16 | 20 |
    21 |
    22 |
    23 | 24 |
    25 |

    Superbear saves the day

    26 | 37 |
    38 | 39 | 40 |
    Superbear saves the day
    41 |
    42 |

    2015-08-07

    43 |

    The city's favorite bear rescues a young cat from a tree.

    44 |
    45 |
    Related Articles
    46 | 50 |
    51 |
    52 |
    53 | 54 |
    55 |

    Superbear saves the day

    56 | 67 |
    68 | 69 | 70 | -------------------------------------------------------------------------------- /html/exercises/01-lists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 01 - Lists 8 | 9 | 10 |
    11 |

    Grocery List

    12 | 13 |
    14 | 15 | 16 | -------------------------------------------------------------------------------- /html/exercises/02-images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 02 - Images 8 | 9 | 10 |
    11 | 12 |
    13 | 14 | 15 | -------------------------------------------------------------------------------- /html/exercises/03-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 03 - Table 8 | 16 | 17 | 18 |
    19 | 20 | 21 |
    22 |
    23 | 24 | 25 | -------------------------------------------------------------------------------- /html/exercises/04-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 04 - Form 8 | 9 | 10 |
    11 |
    12 | 13 |
    14 |
    15 | 16 | 17 | -------------------------------------------------------------------------------- /html/exercises/_html-exercises.md: -------------------------------------------------------------------------------- 1 | # HTML Exercises 2 | 3 | - [Exercise 01 - Lists](#ex01) 4 | - [Exercise 02 - Images](#ex02) 5 | - [Exercise 03 - Table](#ex03) 6 | - [Exercise 04 - Form](#ex04) 7 | 8 | ## Exercise 01 - Lists 9 | 10 | Recreate the snapshot below, using ordered and unordered lists and an anchor element for navigation. 11 | 12 | screenshot of a recipe to build using list elements 13 | 14 | ## Exercise 02 - Images 15 | 16 | Recreate the snapshot below, using two images (200x150) from [placekitten](http://placekitten.com/) and [placepuppy](https://place-puppy.com/). Make sure you add captions below the image using `figure` and `figcaption`. Every non-decorate image should have an "alt" attribute describing the contents of the image. 17 | 18 | screenshot of a page with figure and img elements 19 | 20 | ## Exercise 03 - Table 21 | 22 | Create a `table`, using `thead` and `tbody`, as well as colspan and rowspan. 23 | 24 | screenshot of a table with spongebob information 25 | 26 | ## Exercise 04 - Form 27 | 28 | Create a form that uses input elements of type name, email, radio, checkbox, and more. 29 | 30 | screenshot of a form 31 | -------------------------------------------------------------------------------- /html/solutions/01-lists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 01 - Lists 8 | 9 | 10 |
    11 |

    Grocery List

    12 |
      13 |
    1. Eggs
      2. 14 |
    2. 15 | Milk 16 |
        17 |
      • 2%
        • 18 |
      • Almond Milk
        • 19 |
      • Coconut Milk
        • 20 |
      21 |
      3. 22 |
    3. Cheese
      4. 23 |
    4. Pasta
      5. 24 |
    5. Oatmeal
      6. 25 |
    6. Apples
      7. 26 |
    7. Cleaning Supplies
      8. 27 |
    28 |
    29 | 30 | 31 | -------------------------------------------------------------------------------- /html/solutions/02-images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 02 - Images 8 | 9 | 10 |
    11 |
    12 | smol kitten 18 |
    Kittens Rule!
    19 |
    20 |
    21 | smol puppy 27 |
    Puppies Rule!
    28 |
    29 |
    30 | 31 | 32 | -------------------------------------------------------------------------------- /html/solutions/03-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 03 - Table 8 | 16 | 17 | 18 |
    19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 |
    First NameLast NameEmail
    SpongebobSquarepantsspongebob@spongebob.world
    PatrickStarpatrick@spongebob.world
    SandyCheekssandy@spongebob.world
    Mr Krabsmrk@spongebob.world
    mrkrabs@spongebob.world
    52 |
    53 | 54 | 55 | -------------------------------------------------------------------------------- /html/solutions/04-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 04 - Form 8 | 9 | 10 |
    11 |
    12 |

    Form

    13 |
    14 | 15 | 16 |
    17 |
    18 | 19 | 25 |
    26 |
    27 |
    28 | Favorite Character: 29 |
    30 | 36 | 37 |
    38 |
    39 | 40 | 41 |
    42 |
    43 | 44 | 45 |
    46 |
    47 |
    48 |
    49 | Are you a fan of the show? 50 |
    51 | 52 | 53 |
    54 |
    55 | 56 | 57 |
    58 |
    59 |
    60 |
    61 | 62 | 63 |
    64 |
    65 |
    66 | 67 | 68 | -------------------------------------------------------------------------------- /javascript/examples/01-hello-world.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Hello World ==========\n'); 2 | console.log('Hello there 👋'); 3 | 4 | const today = new Date(); 5 | console.log(`Today's date is ${today}`); 6 | -------------------------------------------------------------------------------- /javascript/examples/02-numbers.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Numbers ==========\n'); 2 | 3 | const num1 = 15; 4 | const num2 = 15.0; 5 | const num3 = 15e8; 6 | const num4 = 15 / 0; 7 | const num5 = -15 / 0; 8 | const num6 = 16 / 'abc'; 9 | const num7 = Number.MAX_SAFE_INTEGER; 10 | const num8 = Number.MIN_SAFE_INTEGER; 11 | 12 | console.log(num1); 13 | // 15 14 | 15 | console.log(num2); 16 | // 15 17 | 18 | console.log(num3); 19 | // 1500000000 20 | 21 | console.log(num4); 22 | // Infinity 23 | 24 | console.log(num5); 25 | // -Infinity 26 | 27 | console.log(num6); 28 | // NaN 29 | 30 | console.log(num7); 31 | // 9007199254740991 32 | 33 | console.log(num8); 34 | // -9007199254740991 35 | -------------------------------------------------------------------------------- /javascript/examples/03-strings.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Strings ==========\n'); 2 | 3 | // Defining Strings 4 | 5 | const quote1 = 'All that is gold does not glitter'; 6 | 7 | // prettier-ignore 8 | const quote2 = "Not all those who wander are lost"; 9 | 10 | const quote3 = `All that is gold does not glitter, 11 | Not all those who wander are lost; 12 | The old that is strong does not wither, 13 | Deep roots are not reached by the frost. 14 | 15 | From the ashes a fire shall be woken, 16 | A light from the shadows shall spring; 17 | Renewed shall be blade that was broken, 18 | The crownless again shall be king.`; 19 | 20 | const author = new String('-- J.R.R. Tolkien, The Fellowship of the Ring'); 21 | 22 | console.log(quote1, '\n'); 23 | // All that is gold does not glitter 24 | 25 | console.log(quote2, '\n'); 26 | // Not all those who wander are lost 27 | 28 | console.log(quote3, '\n'); 29 | // All that is gold does not glitter, 30 | // Not all those who wander are lost; 31 | // The old that is strong does not wither, 32 | // Deep roots are not reached by the frost. 33 | 34 | // From the ashes a fire shall be woken, 35 | // A light from the shadows shall spring; 36 | // Renewed shall be blade that was broken, 37 | // The crownless again shall be king. 38 | 39 | console.log(author, '\n'); 40 | // [String: '-- J.R.R. Tolkien, The Fellowship of the Ring'] 41 | 42 | // String Methods 43 | 44 | console.log('Length of quote:', quote1.length); 45 | // Length of quote: 34 46 | 47 | console.log('Index of "gold":', quote1.indexOf('gold')); 48 | // Index of "gold": 12 49 | 50 | console.log('Index of "wander":', quote1.indexOf('wander')); 51 | // Index of "wander": -1 52 | // --> no such index 53 | 54 | console.log('Substring starting at index 6:', quote1.substr(6)); 55 | // Substring starting at index 6: at is gold does not glitter 56 | 57 | console.log('Substring from index 0 to index 5:', quote1.substr(0, 5)); 58 | // Substring from index 0 to index 5: All t 59 | 60 | console.log('Quote ends with "glitter":', quote1.endsWith('glitter')); 61 | // Quote ends with "glitter": true 62 | 63 | console.log('Quote starts with "gold":', quote1.startsWith('gold')); 64 | // Quote starts with "gold": false 65 | 66 | console.log('Split quote:', quote1.split(' ')); 67 | // [ 'All', 'that', 'is', 'gold', 'does', 'not', 'glitter' ] 68 | 69 | console.log('Join with dashes:', quote1.split(' ').join(' - ')); 70 | // All - that - is - gold - does - not - glitter 71 | -------------------------------------------------------------------------------- /javascript/examples/04-objects.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Objects ==========\n'); 2 | 3 | const objectsExample1 = () => { 4 | let obj = { 5 | a: 'hello', 6 | b: 1.0, 7 | c: { 8 | d: true, 9 | }, 10 | }; 11 | // {a: 'hello', b: 1, c: {…}} 12 | // a: "hello" 13 | // b: 1 14 | // c: {d: true} 15 | 16 | obj.f = 'world'; 17 | obj['g'] = 2.0; 18 | obj.h = { 19 | i: false, 20 | }; 21 | // {a: 'hello', b: 1, c: {…}, f: 'world', g: 2, …} 22 | // a: "hello" 23 | // b: 1 24 | // c: {d: true} 25 | // f: "world" 26 | // g: 2 27 | // h: {i: false} 28 | 29 | obj.a; 30 | // 'hello' 31 | obj['b']; 32 | // 1 33 | obj.c.d; 34 | // true 35 | obj.f; 36 | // undefined 37 | 38 | delete obj.a; 39 | obj.hasOwnProperty('a'); 40 | // false 41 | }; 42 | 43 | let objectsExample2 = () => { 44 | const houses = { 45 | Barantheon: 'Ours is the Fury', 46 | Greyjoy: 'We Do Not Sow', 47 | Martell: 'Unbowed, Unbent, Unbroken', 48 | Stark: 'Winter is Coming', 49 | }; 50 | 51 | console.log('========== Original object =========='); 52 | console.log(houses); 53 | 54 | const keys = Object.keys(houses); 55 | 56 | console.log('\n========== Keys =========='); 57 | console.log(keys); 58 | // [ "Barantheon", "Greyjoy", "Martell", "Stark" ] 59 | 60 | const values = Object.values(houses); 61 | 62 | console.log('\n========== Values =========='); 63 | console.log(values); 64 | // [ 65 | // 'Ours is the Fury', 66 | // 'We Do Not Sow', 67 | // 'Unbowed, Unbent, Unbroken', 68 | // 'Winter is Coming' 69 | // ] 70 | 71 | const entries = Object.entries(houses); 72 | 73 | console.log('\n========== Entries =========='); 74 | console.log(entries); 75 | // [ "Barantheon", "Ours is the Fury" ]​ 76 | // [ "Greyjoy", "We Do Not Sow" ] 77 | // [ "Martell", "Unbowed, Unbent, Unbroken" ] 78 | // [ "Stark", "Winter is Coming" ] 79 | 80 | console.log('\n========== For ... of loop =========='); 81 | for (const [house, words] of entries) { 82 | console.log(`House ${house}'s motto: ${words}`); 83 | } 84 | // House Barantheon's motto: Ours is the Fury 85 | // House Greyjoy's motto: We Do Not Sow 86 | // House Martell's motto: Unbowed, Unbent, Unbroken 87 | // House Stark's motto: Winter is Coming 88 | }; 89 | 90 | objectsExample1(); 91 | objectsExample2(); 92 | -------------------------------------------------------------------------------- /javascript/examples/05-arrays.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Arrays ==========\n'); 2 | 3 | const arraysExample1 = () => { 4 | let arr = []; 5 | // new Array(); 6 | 7 | arr.push(1.0); 8 | arr.push(2.0); 9 | // [1, 2] 10 | 11 | arr.length; 12 | // 2 13 | 14 | arr[0]; 15 | // 1 16 | 17 | arr[0] = 3.0; 18 | // [3, 2] 19 | 20 | arr[9] = 4.0; 21 | // [3, 2, empty × 7, 4] 22 | 23 | arr.length; 24 | // 10 25 | 26 | arr[2]; 27 | // undefined 28 | 29 | arr.indexOf(1.0); 30 | // -1 31 | arr.indexOf(2.0); 32 | // 1 33 | 34 | arr = ['a', 'b', 'c']; 35 | // ['a', 'b', 'c'] 36 | 37 | arr = ['a', 1.0, {}, ['b', 2.0]]; 38 | // ['a', 1, {…}, Array(2)] 39 | 40 | console.log('========== forEach() =========='); 41 | arr.forEach((item) => console.log(item)); 42 | // a 43 | // 1 44 | // Object {} 45 | // ['b', 2] 46 | }; 47 | 48 | let arraysExample2 = () => { 49 | let houses = [ 50 | 'Barantheon', 51 | 'Bolton', 52 | 'Florent', 53 | 'Lannister', 54 | 'Martell', 55 | 'Stark', 56 | 'Targaryen', 57 | 'Tully', 58 | ]; 59 | 60 | // for loop 61 | console.log('\n========== for() loop =========='); 62 | for (let i = 0; i < houses.length; i++) { 63 | console.log(houses[i]); 64 | } 65 | 66 | // Barantheon 67 | // Bolton 68 | // Florent 69 | // Lannister 70 | // Martell 71 | // Stark 72 | // Targaryen 73 | // Tully 74 | 75 | console.log('\n========== forEach() =========='); 76 | houses.forEach((house) => { 77 | console.log(house); 78 | }); 79 | 80 | // Barantheon 81 | // Bolton 82 | // Florent 83 | // Lannister 84 | // Martell 85 | // Stark 86 | // Targaryen 87 | // Tully 88 | 89 | console.log('\n========== forEach() - index & house =========='); 90 | houses.forEach((house, index) => { 91 | console.log(`${index + 1} - ${house}`); 92 | }); 93 | 94 | // 1 - Barantheon 95 | // 2 - Bolton 96 | // 3 - Florent 97 | // 4 - Lannister 98 | // 5 - Martell 99 | // 6 - Stark 100 | // 7 - Targaryen 101 | // 8 - Tully 102 | 103 | console.log('\n========== For ... of() loop =========='); 104 | for (const house of houses) { 105 | console.log(house); 106 | } 107 | 108 | // Barantheon 109 | // Bolton 110 | // Florent 111 | // Lannister 112 | // Martell 113 | // Stark 114 | // Targaryen 115 | // Tully 116 | }; 117 | 118 | arraysExample1(); 119 | arraysExample2(); 120 | -------------------------------------------------------------------------------- /javascript/examples/06-types.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Types ==========\n'); 2 | 3 | console.log(typeof 42); 4 | // number 5 | 6 | console.log(typeof 'blubber'); 7 | // string 8 | 9 | console.log(typeof true); 10 | // boolean 11 | 12 | console.log(typeof someVariable); 13 | // undefined 14 | 15 | console.log(typeof 3.14); 16 | // number 17 | 18 | console.log(typeof 42n); 19 | // bigint 20 | 21 | console.log(typeof `template literal`); 22 | // string 23 | 24 | console.log(typeof infinity); 25 | // undefined 26 | 27 | console.log(typeof NaN); 28 | // string 29 | 30 | console.log(typeof true); 31 | // boolean 32 | 33 | console.log(typeof Symbol('foo')); 34 | // symbol 35 | 36 | function double(num) { 37 | return num * 2; 38 | } 39 | 40 | console.log(typeof double); 41 | // function 42 | 43 | console.log(typeof null); 44 | // object 45 | 46 | console.log(typeof {}); 47 | // object 48 | 49 | console.log(typeof []); 50 | // object 51 | 52 | console.log(typeof undefined); 53 | // undefined 54 | -------------------------------------------------------------------------------- /javascript/examples/07-dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript DOM Manipulations 7 | 8 | 9 | 10 |
    11 | 12 | 13 | -------------------------------------------------------------------------------- /javascript/examples/07-dom.js: -------------------------------------------------------------------------------- 1 | // Appending elements to the DOM 2 | let main = document.querySelector('main'); 3 | 4 | let heading1 = document.createElement('h1'); 5 | heading1.textContent = 'DOM Manipulations'; 6 | main.append(heading1); 7 | 8 | let divElement = document.createElement('div'); 9 | divElement.textContent = 'A new
    element was added to DOM'; 10 | main.append(divElement); 11 | 12 | // Create and Add a new
    element 13 | main.append(document.createElement('br')); 14 | 15 | let button = document.createElement('button'); 16 | button.setAttribute('id', 'example'); 17 | button.textContent = 'Click Me!'; 18 | button.style.border = 0; 19 | button.style.padding = '5px 10px'; 20 | button.style.backgroundColor = 'darkgreen'; 21 | button.style.color = 'white'; 22 | button.style.borderRadius = '5px'; 23 | main.append(button); 24 | 25 | // Adding an event listener to the previously created button 26 | document.getElementById('example').onclick = function (event) { 27 | console.log(event); 28 | alert('the button has been pressed'); 29 | }; 30 | -------------------------------------------------------------------------------- /javascript/examples/08-let-const.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript let and const ==========\n'); 2 | 3 | if (true) { 4 | let arya = 'Arya'; 5 | console.log(arya); 6 | // Arya 7 | 8 | arya = 'Arya Stark'; 9 | console.log(arya); 10 | // Arya Stark 11 | 12 | let jon; 13 | jon = 'Jon Snow'; 14 | console.log(jon); 15 | // Jon Snow 16 | } 17 | 18 | if (true) { 19 | const arya = 'Arya'; 20 | console.log(arya); 21 | // Arya 22 | 23 | // arya = 'Arya Stark'; 24 | // console.log(arya); 25 | // // TypeError: Assignment to constant variable 26 | 27 | // const jon; 28 | // jon = 'Jon Snow'; 29 | // console.log(jon); 30 | // // Uncaught SyntaxError: Missing initializer in const declaration 31 | } 32 | -------------------------------------------------------------------------------- /javascript/examples/09-template-literals.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Template Literals ==========\n'); 2 | 3 | console.log('========== ES6 Template Literals =========='); 4 | 5 | const str1 = `template literal`; 6 | 7 | console.log(str1); 8 | // template literal 9 | 10 | console.log('\n========== ES5 Multi-line Strings - Option 1 =========='); 11 | 12 | var str2 = 'first line\n \ 13 | second line'; 14 | 15 | console.log(str2); 16 | // first line 17 | // second line 18 | 19 | console.log('\n========== ES5 Multiline Strings - Option 2 =========='); 20 | 21 | var str3 = 'first line\n' + 'second line'; 22 | 23 | console.log(str3); 24 | // first line 25 | // second line 26 | 27 | console.log( 28 | '\n========== ES6 Multiline Strings with Template Literals ==========' 29 | ); 30 | 31 | const str4 = `Hey 32 | This multiline string 33 | is awesome!`; 34 | 35 | console.log(str4); 36 | // Hey 37 | // this multiline string 38 | // is awesome! 39 | 40 | console.log('\n========== ES6 String Interpolation =========='); 41 | 42 | const str5 = 'string interpolation'; 43 | const str6 = `testing ${str5}`; 44 | 45 | console.log(str6); 46 | // testing string interpolation 47 | -------------------------------------------------------------------------------- /javascript/examples/10-spread.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Spread ==========\n'); 2 | 3 | const houses = [ 4 | 'Barantheon', 5 | 'Bolton', 6 | 'Florent', 7 | 'Lannister', 8 | 'Martell', 9 | 'Stark', 10 | 'Targaryen', 11 | 'Tully', 12 | ]; 13 | 14 | console.log(houses); 15 | // [ 16 | // 'Barantheon', 17 | // 'Bolton', 18 | // 'Florent', 19 | // 'Lannister', 20 | // 'Martell', 21 | // 'Stark', 22 | // 'Targaryen', 23 | // 'Tully' 24 | // ] 25 | 26 | console.log(...houses); 27 | // Barantheon Bolton Florent Lannister Martell Stark Targaryen Tully 28 | 29 | const starks = ['Arya', 'Sansa', 'Jon', 'Bran']; 30 | const characters = ['Daenerys', ...starks, 'Cersei', 'Jaime', 'Tyrion']; 31 | 32 | console.log(characters); 33 | // [ 34 | // 'Daenerys', 'Arya', 35 | // 'Sansa', 'Jon', 36 | // 'Bran', 'Cersei', 37 | // 'Jaime', 'Tyrion' 38 | // ] 39 | 40 | console.log(...characters); 41 | // Daenerys Arya Sansa Jon Bran Cersei Jaime Tyrion 42 | -------------------------------------------------------------------------------- /javascript/examples/11-destructuring.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Destructuring ==========\n'); 2 | 3 | const character = { 4 | first: 'Daenerys', 5 | last: 'Targaryen', 6 | house: 'Targaryen', 7 | parents: { 8 | mother: 'Queen Rhaella', 9 | father: 'King Aerys II', 10 | }, 11 | }; 12 | 13 | // Destructuring the first name and house 14 | const { first, house } = character; 15 | 16 | // Destructuring the parents 17 | const { mother, father } = character.parents; 18 | 19 | console.log( 20 | `I am ${first} of house ${house}, daughter of ${mother} and ${father}.` 21 | ); 22 | // I am Daenerys of house Targaryen, daughter of Queen Rhaella and King Aerys II. 23 | -------------------------------------------------------------------------------- /javascript/examples/12-promises.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript Promises ==========\n'); 2 | 3 | const promiseExample = () => { 4 | const promise = new Promise((resolve, reject) => { 5 | if (true) { 6 | resolve('Successful promise.'); 7 | } else { 8 | reject('Error: Something went wrong.'); 9 | } 10 | }); 11 | 12 | promise 13 | .then((response) => { 14 | console.log(response); 15 | return response; 16 | }) 17 | .then((data) => console.log(data)) 18 | .catch((error) => console.error(error)) 19 | .finally(() => { 20 | console.log( 21 | 'This code will execute whether the promise is fulfilled or rejected.' 22 | ); 23 | }); 24 | }; 25 | 26 | promiseExample(); 27 | -------------------------------------------------------------------------------- /javascript/examples/13-async-await.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript async/await ==========\n'); 2 | 3 | const asyncAwaitExample = async () => { 4 | const promise = new Promise((resolve, reject) => { 5 | if (true) { 6 | resolve('Successful promise.'); 7 | } else { 8 | reject('Error: Something went wrong.'); 9 | } 10 | }); 11 | 12 | try { 13 | const response = await promise; 14 | console.log(response); 15 | } catch (error) { 16 | console.error(error); 17 | } finally { 18 | console.log( 19 | 'This code will execute whether the promise is fulfilled or rejected.' 20 | ); 21 | } 22 | }; 23 | 24 | asyncAwaitExample(); 25 | -------------------------------------------------------------------------------- /javascript/examples/14-json.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript JSON ==========\n'); 2 | 3 | const obj = { 4 | name: 'Spongebob Squarepants', 5 | height: '4', 6 | color: 'yellow with green holes', 7 | eyes: 'blue', 8 | occupation: 'fry cook', 9 | }; 10 | 11 | const result = JSON.stringify(obj); 12 | 13 | console.log('================'); 14 | console.log(`JSON.stringify() - object --> string`); 15 | console.log(result); 16 | 17 | // "{\"name\":\"Spongebob Squarepants\",\"height\":\"4\",\"color\":\"yellow with green holes\",\"eyes\":\"blue\",\"occupation\":\"fry cook\"}" 18 | 19 | const data = JSON.parse(result); 20 | 21 | console.log('================'); 22 | console.log(`JSON.parse() - string --> object`); 23 | console.log(data); 24 | // { 25 | // name: "Spongebob Squarepants", 26 | // height: "4", 27 | // color: "yellow with green holes", 28 | // eyes: "blue", 29 | // occupation: "fry cook" 30 | // } 31 | -------------------------------------------------------------------------------- /javascript/examples/15-ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Ajax 7 | 8 | 9 | 10 | 11 |
    12 |

    Ajax Examples

    13 |

    Open the console to see the results

    14 |
    15 | 16 | 17 | -------------------------------------------------------------------------------- /javascript/examples/15-ajax.js: -------------------------------------------------------------------------------- 1 | // An API of Fire and Ice 2 | // Endpoint for the first book 3 | const url = 'https://anapioficeandfire.com/api/books/1/'; 4 | 5 | // Ajax implementation with XMLHttpRequest 6 | // XMLHttpRequest is a built-in browser object lows to make HTTP requests 7 | let xhrExample = (url) => { 8 | const xhr = new XMLHttpRequest(); 9 | xhr.open('GET', url, true); 10 | xhr.responseType = 'json'; 11 | xhr.send(); 12 | 13 | xhr.onload = () => { 14 | console.group('Ajax Implementation with XMLHttpRequest'); 15 | if (xhr.status === 200) { 16 | console.log(xhr.response); 17 | console.log('Status: ', xhr.status); 18 | } else { 19 | console.error(`Status Code: ${xhr.status} - ${xhr.statusText}`); 20 | } 21 | console.groupEnd(); 22 | }; 23 | }; 24 | 25 | // Ajax implementation with jQuery 26 | let jQueryAjaxExample = (url) => { 27 | $.get(url, (data, status) => { 28 | console.group('jQuery Ajax Implementation'); 29 | console.log(data); 30 | console.log('Status: ', status); 31 | console.groupEnd(); 32 | }); 33 | }; 34 | 35 | // Ajax implementation with Fetch() API 36 | let fetchExample = (url) => { 37 | fetch(url) 38 | .then((response) => response.json()) 39 | .then((data) => { 40 | console.group('Fetch() API Implementation'); 41 | console.log(data); 42 | console.groupEnd(); 43 | }) 44 | .catch((error) => console.error(error)); 45 | }; 46 | 47 | // Ajax implementation with XMLHttpRequest 48 | xhrExample(url); 49 | 50 | // Ajax implementation with jQuery 51 | // Must import jQuery for this implementation 52 | jQueryAjaxExample(url); 53 | 54 | // Ajax implementation with Fetch() API 55 | fetchExample(url); 56 | -------------------------------------------------------------------------------- /javascript/examples/16-fetch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Fetch() API 7 | 8 | 9 | 10 |
    11 |

    Fetch() API

    12 |

    Open the console to see the results

    13 |
    14 | 15 | 16 | -------------------------------------------------------------------------------- /javascript/examples/17-cors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript CORS Example 7 | 8 | 9 | 10 |
    11 |

    CORS Example

    12 |

    Open the console to see the results

    13 |
    14 | 15 | 16 | -------------------------------------------------------------------------------- /javascript/examples/17-cors.js: -------------------------------------------------------------------------------- 1 | // Dog Facts API - CORS issue 2 | const url = 3 | 'https://dog-facts-api.herokuapp.com/api/v1/resources/dogs/all/facts/'; 4 | 5 | let fetchDogFacts = (url) => { 6 | fetch(url) 7 | .then((response) => response.json()) 8 | .then((data) => { 9 | console.log(data); 10 | }) 11 | .catch((error) => { 12 | console.group('Fetch dog facts'); 13 | console.error(error); 14 | console.groupEnd(); 15 | }); 16 | }; 17 | 18 | fetchDogFacts(url); 19 | // This will return a CORS error 20 | // Comment this call out to see the program run wihtout the CORS error 21 | -------------------------------------------------------------------------------- /javascript/examples/18-map.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript map() ==========\n'); 2 | 3 | const numbers = [1, 2, 3, 4, 5, 6]; 4 | 5 | // Return an array with the double of each item in the numbers array 6 | const doubles = numbers.map((item) => item * 2); 7 | 8 | console.log(numbers); 9 | // [ 1, 2, 3, 4, 5, 6 ] 10 | 11 | console.log(doubles); 12 | // [ 2, 4, 6, 8, 10, 12 ] 13 | 14 | const characters = [ 15 | { id: 1, name: 'Arya', house: 'Stark' }, 16 | { id: 4, name: 'Sansa', house: 'Stark' }, 17 | { id: 16, name: 'Eddard', house: 'Stark' }, 18 | { id: 17, name: 'Catelyn', house: 'Stark' }, 19 | { id: 20, name: 'Robb', house: 'Stark' }, 20 | ]; 21 | 22 | // Return an array with each name in the characters array in uppercase format 23 | const uppercase = characters.map((item) => item.name.toUpperCase()); 24 | 25 | console.log(uppercase); 26 | // [ 'ARYA', 'SANSA', 'EDDARD', 'CATELYN', 'ROBB' ] 27 | -------------------------------------------------------------------------------- /javascript/examples/19-filter.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript filter() ==========\n'); 2 | 3 | const colors = ['red', 'yellow', 'blue', 'magenta', 'black', 'aquamarine']; 4 | 5 | const long = colors.filter((word) => word.length > 6); 6 | 7 | console.log(colors); 8 | // [ 'red', 'yellow', 'blue', 'magenta', 'black', 'aquamarine' ] 9 | 10 | console.log(long); 11 | // [ 'magenta', 'aquamarine' ] 12 | 13 | const characters = [ 14 | { id: 1, name: 'Arya', house: 'Stark' }, 15 | { id: 4, name: 'Sansa', house: 'Stark' }, 16 | { id: 16, name: 'Eddard', house: 'Stark' }, 17 | { id: 17, name: 'Catelyn', house: 'Stark' }, 18 | { id: 20, name: 'Robb', house: 'Stark' }, 19 | ]; 20 | 21 | // Return an array containing only the characters with odd ids 22 | const odds = characters.filter((item) => item.id % 2 !== 0); 23 | 24 | console.log(odds); 25 | // [ 26 | // { id: 1, name: 'Arya', house: 'Stark' }, 27 | // { id: 17, name: 'Catelyn', house: 'Stark' } 28 | // ] 29 | -------------------------------------------------------------------------------- /javascript/examples/20-reduce.js: -------------------------------------------------------------------------------- 1 | console.log('\n========== JavaScript reduce() ==========\n'); 2 | 3 | // Initial array 4 | const array = [1, 2, 3, 4, 5, 6]; 5 | 6 | // Reducer function 7 | const reducer = (accumulator, current) => accumulator + current; 8 | 9 | let sum = array.reduce(reducer); 10 | 11 | console.log(sum); 12 | // 21 13 | 14 | sum = array.reduce(reducer, 50); 15 | 16 | console.log(sum); 17 | // 71 18 | 19 | const characters = [ 20 | { id: 1, name: 'Arya', house: 'Stark' }, 21 | { id: 4, name: 'Sansa', house: 'Stark' }, 22 | { id: 16, name: 'Eddard', house: 'Stark' }, 23 | { id: 17, name: 'Catelyn', house: 'Stark' }, 24 | { id: 20, name: 'Robb', house: 'Stark' }, 25 | ]; 26 | 27 | // Return the sum of all ids in the characters array 28 | const ids = characters.reduce((acc, curr) => acc + curr.id, 0); 29 | 30 | console.log(ids); 31 | // 58 32 | -------------------------------------------------------------------------------- /javascript/exercises/01-replace.js: -------------------------------------------------------------------------------- 1 | const replaceItems = (input) => { 2 | // return a string with 'gold' replaced by 'SHINY' and 'wander' replaced by 'roam', regardless of the case of the letters 3 | 4 | // for reference, see the MDN "Regular Expressions" entry: 5 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions 6 | 7 | return input; 8 | }; 9 | 10 | console.log(replaceItems('All that is gold does not glitter')); 11 | // expected: 'All that is SHINY does not glitter' 12 | console.log(replaceItems('Wisdom is better than silver or GOLD.')); 13 | // expected: 'Wisdom is better than silver or SHINY.' 14 | console.log(replaceItems('Not all those who Wander are lost')); 15 | // expected: 'Not all those who roam are lost' 16 | -------------------------------------------------------------------------------- /javascript/exercises/02-format.js: -------------------------------------------------------------------------------- 1 | const formatItems = (input) => { 2 | // return a string of the concatenated numbers, separated by commas and with three digits after the decimal point 3 | 4 | // for reference, see the MDN Number page: 5 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number 6 | 7 | return input; 8 | }; 9 | 10 | console.log(formatItems([1, 4, 17, 26, 41])); 11 | // expected: '1.000, 4.000, 17.000, 26.000, 41.000' 12 | console.log(formatItems([34.0, 12.0, 13.7, 760.1, 10.5])); 13 | // expected: '34.000, 12.000, 13.700, 760.100, 10.500' 14 | console.log(formatItems([235.235778, 1.2346789, 14.7, 97.3, 714.1245678])); 15 | // expected: '235.236, 1.235, 14.700, 97.300, 714.125' 16 | -------------------------------------------------------------------------------- /javascript/exercises/03-objects.js: -------------------------------------------------------------------------------- 1 | let result = {}; 2 | 3 | const insertItem = (key, value) => { 4 | // insertItem the property with key and value into result 5 | return key; 6 | }; 7 | 8 | const deleteItem = (key) => { 9 | // remove the property with key from result 10 | return key; 11 | }; 12 | 13 | const lookupItem = (key) => { 14 | // return the value from result that is associated with key 15 | return key; 16 | }; 17 | 18 | const printItems = () => { 19 | // return a string of the concatenated key in result, separated by commas 20 | }; 21 | 22 | insertItem('hello', 'world'); 23 | insertItem('lorem', 'ipsum'); 24 | insertItem('sit', 'amet'); 25 | console.log(printItems()); 26 | // expected: 'hello, lorem, sit' (order may be different) 27 | console.log(lookupItem('lorem')); 28 | // expected: 'ipsum' 29 | 30 | deleteItem('lorem'); 31 | console.log(printItems()); 32 | // expected: 'hello, sit' (order may be different) 33 | console.log(lookupItem('lorem')); 34 | // expected: 'Item does not exist' 35 | -------------------------------------------------------------------------------- /javascript/exercises/04-dom.css: -------------------------------------------------------------------------------- 1 | input { 2 | margin-bottom: 1.5em; 3 | } 4 | 5 | label { 6 | display: block; 7 | } 8 | 9 | .output { 10 | width: 150px; 11 | height: 20px; 12 | background-color: lightyellow; 13 | } 14 | -------------------------------------------------------------------------------- /javascript/exercises/04-dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript DOM Exercise 7 | 8 | 9 | 10 | 11 |
    12 |
    13 |

    Click Event

    14 | 15 | 16 | 17 | 18 |
    19 |
    20 |
    21 |

    Input Event

    22 | 23 | 24 | 25 |
    26 |
    27 | 28 | 29 | -------------------------------------------------------------------------------- /javascript/exercises/04-dom.js: -------------------------------------------------------------------------------- 1 | // Exercise #1: 2 | // when the user clicks the 'copy' button, copy the user input to the output area 3 | 4 | // fetch JavaScript objects representing specific elements in the DOM 5 | 6 | // add an event listener on the target element 7 | 8 | // callback function to handle event 9 | 10 | // Exercise #2: 11 | // when the user enters input text, copy the user input to the output area 12 | 13 | // fetch JavaScript objects representing specific elements in the DOM 14 | 15 | // add an event listener on the target element 16 | 17 | // callback function to handle event 18 | -------------------------------------------------------------------------------- /javascript/exercises/05-destructuring.js: -------------------------------------------------------------------------------- 1 | const destructureItems = (input) => { 2 | // destructure the name and parents of the character and format the output as shown 3 | 4 | return input; 5 | }; 6 | 7 | const sansa = { 8 | first: 'Sansa', 9 | last: 'Stark', 10 | allegiance: { 11 | house: 'Winterfell', 12 | parents: { 13 | mother: 'Catelyn Tully', 14 | father: 'Eddard Stark', 15 | }, 16 | animals: { 17 | direwolf: 'Lady', 18 | }, 19 | }, 20 | }; 21 | 22 | const daenerys = { 23 | first: 'Daenerys', 24 | last: 'Targaryen', 25 | allegiance: { 26 | house: 'Targaryen', 27 | parents: { 28 | mother: 'Queen Rhaella', 29 | father: 'King Aerys II Targaryen', 30 | }, 31 | animals: { 32 | dragons: 'Drogon', 33 | }, 34 | }, 35 | }; 36 | 37 | console.log(destructureItems(sansa)); 38 | // Sansa Stark 39 | // daughter of 40 | // Catelyn Tully and Eddard Stark 41 | console.log(destructureItems(daenerys)); 42 | // Daenerys Targaryen 43 | // daughter of 44 | // Queen Rhaella and King Aerys II Targaryen 45 | -------------------------------------------------------------------------------- /javascript/exercises/06-fetch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Fetch Exercise 7 | 11 | 12 | 13 | 14 |
    15 |
    16 |

    Game of Thrones Books

    17 |
    18 | 19 | gif of a loader image 20 |
    21 |
    22 |
    23 | 24 | 25 | -------------------------------------------------------------------------------- /javascript/exercises/06-fetch.js: -------------------------------------------------------------------------------- 1 | const url = 'https://anapioficeandfire.com/api/books/'; 2 | 3 | const app = document.querySelector('#books'); 4 | 5 | const fetchData = (url) => { 6 | // Fetch all books from the API of Ice and Fire and append them to the DOM 7 | // Create an element for each book that contains title, author, publication year, and number of pages 8 | // Update the styles in JavaScript to center all the books in the container given 9 | }; 10 | -------------------------------------------------------------------------------- /javascript/exercises/07-functional.js: -------------------------------------------------------------------------------- 1 | const characters = [ 2 | { id: 1, name: 'Arya', house: 'Stark' }, 3 | { id: 4, name: 'Sansa', house: 'Stark' }, 4 | { id: 16, name: 'Eddard', house: 'Stark' }, 5 | { id: 17, name: 'Catelyn', house: 'Stark' }, 6 | { id: 20, name: 'Robb', house: 'Stark' }, 7 | { id: 28, name: 'Rickon', house: 'Stark' }, 8 | { id: 40, name: 'Jaime', house: 'Lannister' }, 9 | { id: 41, name: 'Cersei', house: 'Lannister' }, 10 | { id: 42, name: 'Tyrion', house: 'Lannister' }, 11 | { id: 50, name: 'Tywin', house: 'Lannister' }, 12 | { id: 53, name: 'Kevan', house: 'Lannister' }, 13 | { id: 75, name: 'Daenerys', house: 'Targaryen' }, 14 | { id: 77, name: 'Viserys', house: 'Targaryen' }, 15 | { id: 81, name: 'Rhaegar', house: 'Targaryen' }, 16 | { id: 83, name: 'Theon', house: 'Greyjoy' }, 17 | { id: 84, name: 'Yara', house: 'Greyjoy' }, 18 | { id: 87, name: 'Davos', house: 'Seaworth' }, 19 | { id: 88, name: 'Brienne', house: 'Tarth' }, 20 | ]; 21 | 22 | const mapNameFamily = (characters) => { 23 | // Return an array with the name and house of each character 24 | // Format: "Arya, of House Stark" 25 | 26 | return characters; 27 | }; 28 | 29 | const filterFamily = (characters, house) => { 30 | // Return an array with only the characters from a given house 31 | 32 | return characters; 33 | }; 34 | 35 | const reduceHouses = (characters) => { 36 | // Return an object with the number of characters from each house 37 | 38 | return characters; 39 | }; 40 | 41 | console.log(mapNameFamily(characters)); 42 | // [ 43 | // 'Arya, of House Stark', 44 | // 'Sansa, of House Stark', 45 | // 'Eddard, of House Stark', 46 | // 'Catelyn, of House Stark', 47 | // 'Robb, of House Stark', 48 | // 'Rickon, of House Stark', 49 | // 'Jaime, of House Lannister', 50 | // 'Cersei, of House Lannister', 51 | // 'Tyrion, of House Lannister', 52 | // 'Tywin, of House Lannister', 53 | // 'Kevan, of House Lannister', 54 | // 'Daenerys, of House Targaryen', 55 | // 'Viserys, of House Targaryen', 56 | // 'Rhaegar, of House Targaryen', 57 | // 'Theon, of House Greyjoy', 58 | // 'Yara, of House Greyjoy', 59 | // 'Davos, of House Seaworth', 60 | // 'Brienne, of House Tarth' 61 | // ] 62 | 63 | console.log(filterFamily(characters, 'Stark')); 64 | // [ 65 | // { id: 1, name: 'Arya', house: 'Stark' }, 66 | // { id: 4, name: 'Sansa', house: 'Stark' }, 67 | // { id: 16, name: 'Eddard', house: 'Stark' }, 68 | // { id: 17, name: 'Catelyn', house: 'Stark' }, 69 | // { id: 20, name: 'Robb', house: 'Stark' }, 70 | // { id: 28, name: 'Rickon', house: 'Stark' } 71 | // ] 72 | 73 | console.log(filterFamily(characters, 'Greyjoy')); 74 | // [ 75 | // { id: 83, name: 'Theon', house: 'Greyjoy' }, 76 | // { id: 84, name: 'Yara', house: 'Greyjoy' } 77 | // ] 78 | 79 | console.log(reduceHouses(characters)); 80 | // { 81 | // Stark: 6, 82 | // Lannister: 5, 83 | // Targaryen: 3, 84 | // Greyjoy: 2, 85 | // Seaworth: 1, 86 | // Tarth: 1 87 | // } 88 | -------------------------------------------------------------------------------- /javascript/solutions/01-replace.js: -------------------------------------------------------------------------------- 1 | const replaceItems = (input) => { 2 | // return a string with 'gold' replaced by 'SHINY' and 'wander' replaced by 'roam', regardless of the case of the letters 3 | 4 | // for reference, see the MDN "Regular Expressions" entry: 5 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions 6 | 7 | // option #1 8 | // input = input.replace(/gold/gi, 'SHINY'); 9 | // input = input.replace(/wander/gi, 'roam'); 10 | 11 | // return input; 12 | 13 | // option #2 14 | // input = input.replace(/gold/gi, 'SHINY').replace(/wander/gi, 'roam'); 15 | 16 | // return input; 17 | 18 | // option #3 19 | return input.replace(/gold/gi, 'SHINY').replace(/wander/gi, 'roam'); 20 | }; 21 | 22 | console.log(replaceItems('All that is gold does not glitter')); 23 | // expected: 'All that is SHINY does not glitter' 24 | console.log(replaceItems('Wisdom is better than silver or GOLD.')); 25 | // expected: 'Wisdom is better than silver or SHINY.' 26 | console.log(replaceItems('Not all those who Wander are lost')); 27 | // expected: 'Not all those who roam are lost' 28 | -------------------------------------------------------------------------------- /javascript/solutions/02-format.js: -------------------------------------------------------------------------------- 1 | const formatItems = (input) => { 2 | // return a string of the concatenated numbers, separated by commas and with three digits after the decimal point 3 | 4 | // for reference, see the MDN Number page: 5 | // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number 6 | 7 | // using forEach() 8 | // let result = []; 9 | 10 | // input.forEach((elem) => { 11 | // result.push(elem.toFixed(3)); 12 | // }); 13 | 14 | // using map() 15 | // let result = input.map((elem) => elem.toFixed(3)); 16 | 17 | // return result.join(' - '); 18 | 19 | let results = []; 20 | 21 | for (const elem of input) { 22 | results.push(elem.toFixed(3)); 23 | } 24 | 25 | return results.join(', '); 26 | }; 27 | 28 | console.log(formatItems([1, 4, 17, 26, 41])); 29 | // expected: '1.000, 4.000, 17.000, 26.000, 41.000' 30 | console.log(formatItems([34.0, 12.0, 13.7, 760.1, 10.5])); 31 | // expected: '34.000, 12.000, 13.700, 760.100, 10.500' 32 | console.log(formatItems([235.235778, 1.2346789, 14.7, 97.3, 714.1245678])); 33 | // expected: '235.236, 1.235, 14.700, 97.300, 714.125' 34 | -------------------------------------------------------------------------------- /javascript/solutions/03-objects.js: -------------------------------------------------------------------------------- 1 | let result = {}; 2 | 3 | const insertItem = (key, value) => { 4 | // insertItem the property with key and value into result 5 | result[key] = value; 6 | }; 7 | 8 | const deleteItem = (key) => { 9 | // remove the property with key from result 10 | delete result[key]; 11 | }; 12 | 13 | const lookupItem = (key) => { 14 | // return the value from result that is associated with key 15 | 16 | // result might not contain key 17 | // should this be the case, return an empty string 18 | if (result.hasOwnProperty(key)) { 19 | return result[key]; 20 | } 21 | 22 | return 'Item does not exist'; 23 | }; 24 | 25 | const printItems = () => { 26 | // return a string of the concatenated key in result, separated by commas 27 | console.log(Object.values(result)); 28 | return Object.keys(result).join(', '); 29 | }; 30 | 31 | insertItem('hello', 'world'); 32 | insertItem('lorem', 'ipsum'); 33 | insertItem('sit', 'amet'); 34 | console.log(printItems()); 35 | // expected: 'hello, lorem, sit' (order may be different) 36 | console.log(lookupItem('lorem')); 37 | // expected: 'ipsum' 38 | 39 | deleteItem('lorem'); 40 | console.log(printItems()); 41 | // expected: 'hello, sit' (order may be different) 42 | console.log(lookupItem('lorem')); 43 | // expected: 'Item does not exist' 44 | -------------------------------------------------------------------------------- /javascript/solutions/04-dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript DOM Exercise 7 | 8 | 9 | 10 |
    11 |
    12 |

    Click Event

    13 | 14 | 15 | 16 | 17 |
    18 |
    19 |
    20 |

    Input Event

    21 | 22 | 23 | 24 |
    25 |
    26 | 27 | 28 | -------------------------------------------------------------------------------- /javascript/solutions/04-dom.js: -------------------------------------------------------------------------------- 1 | // Exercise #1: 2 | // When the user clicks the 'copy' button, copy the user input to the output area 3 | 4 | // option #1 5 | // fetch JavaScript objects representing specific elements in the DOM 6 | let userInput = document.querySelector('#userInput1'); 7 | let copy = document.querySelector('#copy'); 8 | let output = document.querySelector('#output'); 9 | 10 | // add an event listener on the target element 11 | copy.addEventListener('click', handleClick); 12 | 13 | // callback function to handle event 14 | function handleClick(event) { 15 | console.log('click event', event); 16 | output.textContent = userInput.value; 17 | } 18 | 19 | // option #2 20 | // document.getElementById('copy').onclick = () => { 21 | // let userInput = document.getElementById('userInput1'); 22 | // let output = document.getElementById('output'); 23 | 24 | // output.textContent = userInput.value; 25 | // }; 26 | 27 | // option #3 28 | // document.getElementById('copy').onclick = () => { 29 | // document.getElementById('output').textContent = document.getElementById( 30 | // 'userInput1' 31 | // ).value; 32 | // }; 33 | 34 | // Exercise #2: 35 | // When the user enters input text, copy the user input to the output area 36 | 37 | // fetch JavaScript objects representing specific elements in the DOM 38 | let userInput2 = document.querySelector('#userInput2'); 39 | 40 | // add an event listener on the target element 41 | userInput2.addEventListener('input', handleInput); 42 | 43 | let element = document.createElement('div'); 44 | element.setAttribute('class', 'output'); 45 | document.querySelector('#inputEventExample').append(element); 46 | 47 | // callback function to handle event 48 | function handleInput(event) { 49 | console.log('click event', event); 50 | element.textContent = userInput2.value; 51 | } 52 | -------------------------------------------------------------------------------- /javascript/solutions/05-destructuring.js: -------------------------------------------------------------------------------- 1 | const destructureItems = (input) => { 2 | // destructure the name and parents of the character and format the output as shown 3 | 4 | const { first, last } = input; 5 | const { mother, father } = input.allegiance.parents; 6 | 7 | const result = `${first} ${last} 8 | daughter of 9 | ${mother} and ${father}`; 10 | 11 | return result; 12 | }; 13 | 14 | const sansa = { 15 | first: 'Sansa', 16 | last: 'Stark', 17 | allegiance: { 18 | house: 'Winterfell', 19 | parents: { 20 | mother: 'Catelyn Tully', 21 | father: 'Eddard Stark', 22 | }, 23 | animals: { 24 | direwolf: 'Lady', 25 | }, 26 | }, 27 | }; 28 | 29 | const daenerys = { 30 | first: 'Daenerys', 31 | last: 'Targaryen', 32 | allegiance: { 33 | house: 'Targaryen', 34 | parents: { 35 | mother: 'Queen Rhaella', 36 | father: 'King Aerys II Targaryen', 37 | }, 38 | animals: { 39 | dragons: 'Drogon', 40 | }, 41 | }, 42 | }; 43 | 44 | console.log(destructureItems(sansa)); 45 | // Sansa Stark 46 | // daughter of 47 | // Catelyn Tully and Eddard Stark 48 | console.log(destructureItems(daenerys)); 49 | // Daenerys Targaryen 50 | // daughter of 51 | // Queen Rhaella and King Aerys II Targaryen 52 | -------------------------------------------------------------------------------- /javascript/solutions/06-fetch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Fetch Exercise 7 | 11 | 12 | 13 | 14 |
    15 |
    16 |

    Game of Thrones Books

    17 |
    18 | 19 | gif of a loader image 20 |
    21 |
    22 |
    23 | 24 | 25 | -------------------------------------------------------------------------------- /javascript/solutions/06-fetch.js: -------------------------------------------------------------------------------- 1 | const url = 'https://anapioficeandfire.com/api/books/'; 2 | 3 | const app = document.querySelector('#books'); 4 | app.style.paddingLeft = 0; 5 | const loading = document.querySelector('#loading'); 6 | 7 | const addBookToDOM = (item) => { 8 | console.log(item); 9 | let element = document.createElement('div'); 10 | let title = document.createElement('h4'); 11 | let author = document.createElement('p'); 12 | let published = document.createElement('p'); 13 | let pages = document.createElement('p'); 14 | 15 | element.style.display = 'flex'; 16 | element.style.flexDirection = 'column'; 17 | element.style.alignItems = 'center'; 18 | element.style.marginTop = '20px'; 19 | 20 | title.textContent = item.name; 21 | author.textContent = `by ${item.authors[0]}`; 22 | published.textContent = item.released.substr(0, 4); 23 | pages.textContent = `${item.numberOfPages} pages`; 24 | 25 | element.append(title); 26 | element.append(author); 27 | element.append(published); 28 | element.append(pages); 29 | 30 | app.append(element); 31 | }; 32 | 33 | const fetchData = (url) => { 34 | fetch(url) 35 | .then((response) => response.json()) 36 | .then((data) => { 37 | // check the format of the data 38 | // if data is in array format, we can use an array method such as forEach() 39 | data.forEach((item) => { 40 | addBookToDOM(item); 41 | }); 42 | }) 43 | .catch((error) => { 44 | console.log(error); 45 | let div = document.createElement('div'); 46 | div.textContent = `An error occurred. Please try again.`; 47 | app.append(div); 48 | }) 49 | .finally(() => { 50 | app.removeChild(loading); 51 | }); 52 | }; 53 | 54 | fetchData(url); 55 | -------------------------------------------------------------------------------- /javascript/solutions/07-functional.js: -------------------------------------------------------------------------------- 1 | const characters = [ 2 | { id: 1, name: 'Arya', house: 'Stark' }, 3 | { id: 4, name: 'Sansa', house: 'Stark' }, 4 | { id: 16, name: 'Eddard', house: 'Stark' }, 5 | { id: 17, name: 'Catelyn', house: 'Stark' }, 6 | { id: 20, name: 'Robb', house: 'Stark' }, 7 | { id: 28, name: 'Rickon', house: 'Stark' }, 8 | { id: 40, name: 'Jaime', house: 'Lannister' }, 9 | { id: 41, name: 'Cersei', house: 'Lannister' }, 10 | { id: 42, name: 'Tyrion', house: 'Lannister' }, 11 | { id: 50, name: 'Tywin', house: 'Lannister' }, 12 | { id: 53, name: 'Kevan', house: 'Lannister' }, 13 | { id: 75, name: 'Daenerys', house: 'Targaryen' }, 14 | { id: 77, name: 'Viserys', house: 'Targaryen' }, 15 | { id: 81, name: 'Rhaegar', house: 'Targaryen' }, 16 | { id: 83, name: 'Theon', house: 'Greyjoy' }, 17 | { id: 84, name: 'Yara', house: 'Greyjoy' }, 18 | { id: 87, name: 'Davos', house: 'Seaworth' }, 19 | { id: 88, name: 'Brienne', house: 'Tarth' }, 20 | ]; 21 | 22 | const mapNameFamily = (characters) => { 23 | // Return an array with the name and house of each character 24 | // Format: "Arya, of House Stark" 25 | const intros = characters.map( 26 | (item) => `${item.name}, of House ${item.house}` 27 | ); 28 | 29 | return intros; 30 | }; 31 | 32 | const filterFamily = (characters, house) => { 33 | // Return an array with only the characters from a given house 34 | const starks = characters.filter((item) => item.house === house); 35 | 36 | return starks; 37 | }; 38 | 39 | const reduceHouses = (characters) => { 40 | // Return an object with the number of characters from each house 41 | const houses = characters.reduce((total, item) => { 42 | total.hasOwnProperty(item.house) 43 | ? total[item.house]++ 44 | : (total[item.house] = 1); 45 | 46 | return total; 47 | }, {}); 48 | 49 | return houses; 50 | }; 51 | 52 | console.log(mapNameFamily(characters)); 53 | // [ 54 | // 'Arya, of House Stark', 55 | // 'Sansa, of House Stark', 56 | // 'Eddard, of House Stark', 57 | // 'Catelyn, of House Stark', 58 | // 'Robb, of House Stark', 59 | // 'Rickon, of House Stark', 60 | // 'Jaime, of House Lannister', 61 | // 'Cersei, of House Lannister', 62 | // 'Tyrion, of House Lannister', 63 | // 'Tywin, of House Lannister', 64 | // 'Kevan, of House Lannister', 65 | // 'Daenerys, of House Targaryen', 66 | // 'Viserys, of House Targaryen', 67 | // 'Rhaegar, of House Targaryen', 68 | // 'Theon, of House Greyjoy', 69 | // 'Yara, of House Greyjoy', 70 | // 'Davos, of House Seaworth', 71 | // 'Brienne, of House Tarth' 72 | // ] 73 | 74 | console.log(filterFamily(characters, 'Stark')); 75 | // [ 76 | // { id: 1, name: 'Arya', house: 'Stark' }, 77 | // { id: 4, name: 'Sansa', house: 'Stark' }, 78 | // { id: 16, name: 'Eddard', house: 'Stark' }, 79 | // { id: 17, name: 'Catelyn', house: 'Stark' }, 80 | // { id: 20, name: 'Robb', house: 'Stark' }, 81 | // { id: 28, name: 'Rickon', house: 'Stark' } 82 | // ] 83 | 84 | console.log(filterFamily(characters, 'Greyjoy')); 85 | // [ 86 | // { id: 83, name: 'Theon', house: 'Greyjoy' }, 87 | // { id: 84, name: 'Yara', house: 'Greyjoy' } 88 | // ] 89 | 90 | console.log(reduceHouses(characters)); 91 | // { 92 | // Stark: 6, 93 | // Lannister: 5, 94 | // Targaryen: 3, 95 | // Greyjoy: 2, 96 | // Seaworth: 1, 97 | // Tarth: 1 98 | // } 99 | -------------------------------------------------------------------------------- /jquery/examples/01-hello-world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery 01 - Hello World 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    jQuery 01 - Hello World

    14 |
    Loading...
    15 | 16 |
    17 | 18 | 19 | -------------------------------------------------------------------------------- /jquery/examples/01-hello-world.js: -------------------------------------------------------------------------------- 1 | $(document).ready(() => { 2 | $('#hello').text('Hello There!'); 3 | $('#input').on('click', () => { 4 | console.log('Hello World, this is jQuery!'); 5 | }); 6 | }); 7 | -------------------------------------------------------------------------------- /jquery/examples/02-selectors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery 02 - Selectors 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    jQuery 02 - Selectors

    14 |
      15 |
    • One
      • 16 |
    • 17 | Two 18 |
        19 |
      • Three
        • 20 |
      • 21 | Four 22 |
          23 |
        • Five
          • 24 |
        • Six
          • 25 |
        • Seven
          • 26 |
        27 |
        • 28 |
      29 |
      • 30 |
    • Eight
      • 31 |
    32 |
    33 | 34 | 35 | -------------------------------------------------------------------------------- /jquery/examples/02-selectors.js: -------------------------------------------------------------------------------- 1 | $(document).ready(() => { 2 | console.group(`('#list').find('li')`); 3 | console.log($('#list').find('li')); 4 | console.groupEnd(); 5 | 6 | console.group(`('#list').find('li').eq(0)`); 7 | console.log($('#list').find('li').eq(0)); 8 | console.groupEnd(); 9 | 10 | console.group(`('#list').find('li:nth-child(2n)')`); 11 | console.log($('#list').find('li:nth-child(2n)')); 12 | console.groupEnd(); 13 | 14 | console.group(`('#list').children()`); 15 | console.log($('#list').children()); 16 | console.groupEnd(); 17 | 18 | console.group(`('#list').parent()`); 19 | console.log($('#list').parent()); 20 | console.groupEnd(); 21 | 22 | console.group(`('#list').parents()`); 23 | console.log($('#list').parents()); 24 | console.groupEnd(); 25 | 26 | console.group(`('li.one').siblings()`); 27 | console.log($('li.one').siblings()); 28 | console.groupEnd(); 29 | 30 | console.group(`('li.two').next()`); 31 | console.log($('li.two').next()); 32 | console.groupEnd(); 33 | 34 | console.group(`('li.four').prev()`); 35 | console.log($('li.four').prev()); 36 | console.groupEnd(); 37 | 38 | console.group(`('li.five').next().prev()`); 39 | console.log($('li.five').next().prev()); 40 | console.groupEnd(); 41 | 42 | console.group(`('li.seven').siblings()`); 43 | console.log($('li.seven').siblings()); 44 | console.groupEnd(); 45 | }); 46 | -------------------------------------------------------------------------------- /jquery/examples/03-events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery 03 - Events 7 | 8 | 9 | 10 | 11 | 12 |
    13 |

    jQuery 03 - Events

    14 |

    Open the console to see the results

    15 | 16 |
    17 | 18 | 19 | -------------------------------------------------------------------------------- /jquery/examples/03-events.js: -------------------------------------------------------------------------------- 1 | $(document).ready(() => { 2 | let count = 0; 3 | $('#input') 4 | .css({ 5 | width: '200px', 6 | height: '100px', 7 | fontSize: '2em', 8 | }) 9 | .on('click', function () { 10 | $(this).val('clicked: ' + count++); 11 | console.log('This is a click event'); 12 | }) 13 | .on('mouseover', () => { 14 | console.log('This is a mouseover event'); 15 | }) 16 | .on('mousemove', () => { 17 | console.log('This is a mousemove event'); 18 | }) 19 | .on('mouseout', () => { 20 | console.log('This is a mouseout event'); 21 | }); 22 | }); 23 | -------------------------------------------------------------------------------- /jquery/examples/04-elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery 04 - Elements 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /jquery/examples/04-elements.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function () { 2 | $('body') 3 | .css({ fontFamily: 'sans-serif' }) 4 | .append($('

    ').text('jQuery 04 - Elements')) 5 | .append( 6 | $('
    ') 7 | .css({ 8 | marginTop: '10px', 9 | padding: '10px', 10 | backgroundColor: 'lightyellow', 11 | lineHeight: '1.6em', 12 | }) 13 | .append( 14 | $('
      ') 15 | .append($('
    • ').text('SpongeBob SquarePants')) 16 | .append($('
    • ').text('Patrick Star')) 17 | .append($('
    • ').text('Sandy Cheeks')) 18 | .append($('
    • ').text('Pearl Krabs')) 19 | .append($('
    • ').text('Mr Krabs')) 20 | .append($('
    • ').text('Squidward Tentacles')) 21 | ) 22 | ); 23 | }); 24 | -------------------------------------------------------------------------------- /jquery/examples/05-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery 05 - Grid 7 | 8 | 9 | 10 | 11 | 12 |
      13 |

      jQuery 05 - Grid

      14 |
      15 | 16 | 17 | -------------------------------------------------------------------------------- /jquery/examples/05-grid.js: -------------------------------------------------------------------------------- 1 | $(document).ready(() => { 2 | let random = () => Math.random() * 255; 3 | 4 | for (let i = 0; i < 600; i++) { 5 | $('main').append( 6 | $('
      ') 7 | .css({ display: 'inline-block' }) 8 | .attr({ 9 | class: 'box', 10 | }) 11 | .css({ 12 | width: '5em', 13 | height: '3em', 14 | backgroundColor: `rgba(${random()}, 0, ${random()}, 0.8)`, 15 | }) 16 | .data({ 17 | item: i, 18 | }) 19 | .on('click', () => { 20 | console.log('Mouse clicked', $(this).data('item')); 21 | }) 22 | .on('mouseover', function () { 23 | $(this).css({ 24 | backgroundColor: 'rgb(255, 255, 255)', 25 | }); 26 | }) 27 | .on('mouseout', function () { 28 | $(this).css({ 29 | backgroundColor: `rgba(0, ${random()}, 0, 0.8)`, 30 | }); 31 | }) 32 | ); 33 | } 34 | }); 35 | -------------------------------------------------------------------------------- /jquery/exercises/01-dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 01 - DOM 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 |

      Exercise 01 - DOM

      15 |
      16 |

      Click Event

      17 | 18 | 19 | 20 |
      Output
      21 |
      22 |
      23 |
      24 |

      Input Event

      25 | 26 | 27 |
      Output
      28 |
      29 |
      30 |
      31 | 32 | 33 | -------------------------------------------------------------------------------- /jquery/exercises/01-dom.js: -------------------------------------------------------------------------------- 1 | // Exercise #1: 2 | // When the user clicks the 'copy' button, copy the user input to the output area 3 | 4 | // Option #1 5 | // Fetch JavaScript objects representing specific elements in the DOM 6 | let userInput1 = document.querySelector('#userInput1'); 7 | let copy = document.querySelector('#copy'); 8 | let output1 = document.querySelector('#output1'); 9 | 10 | // Add an event listener on the target element 11 | copy.addEventListener('click', handleClick); 12 | 13 | // Callback function to handle event 14 | function handleClick(event) { 15 | console.log('click event', event); 16 | output1.textContent = userInput1.value; 17 | } 18 | 19 | // Option #2 20 | // document.getElementById('copy').onclick = () => { 21 | // let userInput = document.getElementById('userInput1'); 22 | // let output = document.getElementById('output'); 23 | 24 | // output.textContent = userInput.value; 25 | // }; 26 | 27 | // Option #3 28 | // document.getElementById('copy').onclick = () => { 29 | // document.getElementById('output').textContent = document.getElementById( 30 | // 'userInput1' 31 | // ).value; 32 | // }; 33 | 34 | // Exercise #2: 35 | // When the user enters input text, copy the user input to the output area 36 | 37 | // Fetch JavaScript objects representing specific elements in the DOM 38 | let userInput2 = document.querySelector('#userInput2'); 39 | let output2 = document.querySelector('#output2'); 40 | 41 | // Add an event listener on the target element 42 | userInput2.addEventListener('input', handleInput); 43 | 44 | // Callback function to handle event 45 | function handleInput(event) { 46 | console.log('click event', event); 47 | output2.textContent = userInput2.value; 48 | } 49 | -------------------------------------------------------------------------------- /jquery/exercises/02-ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 02 - Ajax 7 | 11 | 12 | 13 | 14 | 15 |
      16 |

      Game of Thrones Books

      17 |
      18 | gif of a loading element 24 |
      25 |
      26 | 27 | 28 | -------------------------------------------------------------------------------- /jquery/exercises/02-ajax.js: -------------------------------------------------------------------------------- 1 | const url = 'https://anapioficeandfire.com/api/books/'; 2 | 3 | const app = document.querySelector('#books'); 4 | app.style.paddingLeft = 0; 5 | const loading = document.querySelector('#loading'); 6 | 7 | const addBookToDOM = (item) => { 8 | console.log(item); 9 | let element = document.createElement('div'); 10 | let title = document.createElement('h4'); 11 | let author = document.createElement('p'); 12 | let published = document.createElement('p'); 13 | let pages = document.createElement('p'); 14 | 15 | element.style.display = 'flex'; 16 | element.style.flexDirection = 'column'; 17 | element.style.alignItems = 'center'; 18 | element.style.marginTop = '20px'; 19 | 20 | title.textContent = item.name; 21 | author.textContent = `by ${item.authors[0]}`; 22 | published.textContent = item.released.substr(0, 4); 23 | pages.textContent = `${item.numberOfPages} pages`; 24 | 25 | element.append(title); 26 | element.append(author); 27 | element.append(published); 28 | element.append(pages); 29 | 30 | app.append(element); 31 | }; 32 | 33 | const fetchData = (url) => { 34 | fetch(url) 35 | .then((response) => response.json()) 36 | .then((data) => { 37 | data.forEach((item) => { 38 | addBookToDOM(item); 39 | }); 40 | }) 41 | .catch((error) => { 42 | console.log(error); 43 | let li = document.createElement('li'); 44 | li.textContent = `An error occured. Please try again.`; 45 | app.append(li); 46 | }) 47 | .finally(() => { 48 | app.removeChild(loading); 49 | }); 50 | }; 51 | 52 | fetchData(url); 53 | -------------------------------------------------------------------------------- /jquery/exercises/_jquery-exercises.md: -------------------------------------------------------------------------------- 1 | # jQuery Exercises 2 | 3 | - [Exercise 01 - DOM](#ex01) 4 | - [Exercise 02 - Fetch](#ex02) 5 | 6 | ## Exercise 01 - DOM 7 | 8 | Take in user input and output that data back to the output elements in the DOM. Use jQuery to rewrite this exercise. 9 | 10 | Part 1 - When the user clicks the 'copy' button, copy the user input to the output area. Fetch the JavaScript objects representing specific elements in the DOM. Add an event listener on the target element. Write a callback function to handle the 'click' event. 11 | 12 | Part 2 - When the user enters input text, copy the user input to the output area. Fetch the JavaScript objects representing specific elements in the DOM. Add an event listener on the target element. Write a callback function to handle the 'input' event. 13 | 14 | ## Exercise 02 - Fetch 15 | 16 | Fetch all books from the API of Ice and Fire and append them to the DOM. Use jQuery to rewrite this exercise; you will need to make the HTTP request, create elements in the DOM, append elements, and style those elements. 17 | 18 | screenshot of the starting file with a spinner gif 19 | screenshot of completed exercise, with a list of all game of thrones books 20 | -------------------------------------------------------------------------------- /jquery/solutions/01-dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | jQuery DOM Exercise 7 | 8 | 9 | 10 | 11 | 12 | 13 |
      14 |

      15 |
      16 |

      Click Event

      17 | 18 | 19 | 20 |
      Output
      21 |
      22 |
      23 |
      24 |

      Input Event

      25 | 26 | 27 |
      Output
      28 |
      29 |
      30 |
      31 | 32 | 33 | -------------------------------------------------------------------------------- /jquery/solutions/01-dom.js: -------------------------------------------------------------------------------- 1 | $(document).ready(() => { 2 | // Exercise #1: 3 | // When the user clicks the 'copy' button, copy the user input to the output area 4 | // Fetch JavaScript objects representing specific elements in the DOM 5 | // Add an event listener on the target element 6 | // Callback function to handle event 7 | $('#copy').on('click', (event) => { 8 | console.log('Click event', event); 9 | $('#output1').text($('#userInput1').val()); 10 | }); 11 | 12 | // Exercise #2: 13 | // When the user enters input text, copy the user input to the output area 14 | // Fetch JavaScript objects representing specific elements in the DOM 15 | // Add an event listener on the target element 16 | // Callback function to handle event 17 | $('#userInput2').on('input', (event) => { 18 | console.log('Input event', event); 19 | $('#output2').text($('#userInput2').val()); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /jquery/solutions/02-ajax.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Exercise 02 - Ajax 7 | 11 | 12 | 13 | 14 | 15 | 16 |
      17 |

      Game of Thrones Books

      18 |
      19 | gif of a loading element 25 |
      26 |
      27 | 28 | 29 | -------------------------------------------------------------------------------- /jquery/solutions/02-ajax.js: -------------------------------------------------------------------------------- 1 | $(document).ready(() => { 2 | const url = 'https://anapioficeandfire.com/api/books/'; 3 | 4 | const addBookToDOM = (item) => { 5 | $('#books').append( 6 | $('
      ') 7 | .css({ 8 | display: 'flex', 9 | flexDirection: 'column', 10 | alignItems: 'center', 11 | marginTop: '20px', 12 | }) 13 | .append($('

      ').text(item.name)) 14 | .append($('

      ').text(item.authors[0])) 15 | .append($('

      ').text(item.released.substr(0, 4))) 16 | .append($('

      ').text(`${item.numberOfPages} pages`)) 17 | ); 18 | }; 19 | 20 | const fetchData = (url) => { 21 | $.ajax({ 22 | type: 'GET', 23 | url: url, 24 | success: (data) => { 25 | console.log(data); 26 | 27 | data.forEach((item) => { 28 | addBookToDOM(item); 29 | }); 30 | }, 31 | error: (error) => { 32 | console.log(error); 33 | $('#books') 34 | .append('

      ') 35 | .text(`An error occurred. Please try again.`); 36 | }, 37 | complete: () => { 38 | $('#loading').remove(); 39 | }, 40 | }); 41 | }; 42 | 43 | fetchData(url); 44 | }); 45 | -------------------------------------------------------------------------------- /node/examples/01-hello-world.js: -------------------------------------------------------------------------------- 1 | const http = require('http'); 2 | const port = 5001; 3 | 4 | // create the server object 5 | const server = http.createServer((req, res) => { 6 | // set the response status and the response headers 7 | res.writeHead(200, { 'Content-Type': 'text/plain' }); 8 | 9 | // write a response to the client 10 | res.write('Hello World, Node!'); 11 | 12 | // end the response 13 | res.end(); 14 | }); 15 | 16 | // set the server to listen on port 5000 17 | server.listen(port, () => { 18 | console.log(`Server running at http://localhost:${port}`); 19 | }); 20 | -------------------------------------------------------------------------------- /node/examples/02-response.js: -------------------------------------------------------------------------------- 1 | const http = require('http'); 2 | const port = process.env.PORT || 5001; 3 | 4 | const server = http.createServer((req, res) => { 5 | res.writeHead(200, { 'Content-Type': 'text/html' }); 6 | res.write('

      Hello World, Node!

      '); 7 | res.end(); 8 | }); 9 | 10 | server.listen(port, () => { 11 | console.log(`Server running at http://localhost:${port}`); 12 | }); 13 | -------------------------------------------------------------------------------- /node/examples/03-routing.js: -------------------------------------------------------------------------------- 1 | const http = require('http'); 2 | const data = require('./characters'); 3 | const port = process.env.PORT || 5001; 4 | 5 | const server = http.createServer((req, res) => { 6 | // console.log(characters); 7 | 8 | // main route 9 | if (req.method === 'GET' && req.url === '/') { 10 | console.log(`${req.method} - ${req.url}`); 11 | res.writeHead(200, { 'Content-Type': 'text/html' }); 12 | res.write('

      Hello! This is the main page

      '); 13 | res.end(); 14 | } 15 | 16 | // new route --> /about 17 | else if (req.method === 'GET' && req.url === '/about') { 18 | console.log(`${req.method} - ${req.url}`); 19 | res.writeHead(200, { 'Content-Type': 'text/html' }); 20 | res.write('

      This is the about page

      '); 21 | res.end(); 22 | } 23 | 24 | // new route --> /contact 25 | else if (req.method === 'GET' && req.url === '/contact') { 26 | console.log(`${req.method} - ${req.url}`); 27 | res.writeHead(200, { 'Content-Type': 'text/html' }); 28 | res.write('

      This is the contact page

      '); 29 | res.end(); 30 | } 31 | 32 | // new route --> /data 33 | else if (req.method === 'GET' && req.url === '/data') { 34 | console.log(`${req.method} - ${req.url}`); 35 | res.writeHead(200, { 'Content-Type': 'application/json' }); 36 | res.write(JSON.stringify(data)); 37 | res.end(); 38 | } 39 | 40 | // new route --> handle 404 41 | else { 42 | console.log(`${req.method} - ${req.url}`); 43 | res.writeHead(404, { 'Content-Type': 'text/html' }); 44 | res.write('

      404: Page not found

      '); 45 | res.end(); 46 | } 47 | }); 48 | 49 | server.listen(port, () => { 50 | console.log(`Server running at http://localhost:${port}`); 51 | }); 52 | -------------------------------------------------------------------------------- /node/examples/04-buffer-data.js: -------------------------------------------------------------------------------- 1 | const http = require('http'); 2 | const fs = require('fs'); 3 | const port = process.env.PORT || 5001; 4 | 5 | const server = http.createServer((req, res) => { 6 | if (req.url === '/readfile') { 7 | fs.readFile('lorem.txt', (err, data) => { 8 | if (err) { 9 | console.log(err); 10 | res.writeHead(404, 'Not Found'); 11 | res.write('404: File Not Found!'); 12 | res.end(); 13 | return; 14 | } 15 | console.log('\n====== data buffer: ======\n', data); 16 | // console.log('\n====== data toJSON: ======\n', data.toJSON()); 17 | // console.log('\n====== data toString: ======\n', data.toString()); 18 | 19 | res.writeHead(200, { 'Content-Type': 'text/html' }); 20 | res.write('

      Reading buffer...

      '); 21 | res.write(data.toString()); 22 | res.end(); 23 | }); 24 | } else { 25 | res.writeHead(404, { 'Content-Type': 'text/html' }); 26 | res.write('

      404: Page not found

      '); 27 | res.end(); 28 | } 29 | }); 30 | 31 | server.listen(port, () => { 32 | console.log(`Server running at http://localhost:${port}`); 33 | }); 34 | -------------------------------------------------------------------------------- /node/examples/05-streams.js: -------------------------------------------------------------------------------- 1 | const http = require('http'); 2 | const fs = require('fs'); 3 | const port = process.env.PORT || 5001; 4 | 5 | const server = http.createServer((req, res) => { 6 | const readable = fs.createReadStream('lorem.txt'); 7 | const writeable = fs.createWriteStream('out.txt'); 8 | readable.pipe(writeable); 9 | readable.pipe(res); 10 | }); 11 | 12 | server.listen(port, () => { 13 | console.log(`Server running at http://localhost:${port}`); 14 | }); 15 | -------------------------------------------------------------------------------- /node/examples/06-post-data.js: -------------------------------------------------------------------------------- 1 | // example adapted from the Nodejs.org docs 2 | const http = require('http'); 3 | const port = process.env.PORT || 5001; 4 | 5 | const postHTML = `Post Example 6 |
      7 | 8 |
      9 | 10 |
      11 | 12 |
      `; 13 | 14 | const server = http.createServer((req, res) => { 15 | let body = ''; 16 | req.on('data', (chunk) => { 17 | body += chunk; 18 | console.log('on data: ' + body); 19 | }); 20 | req.on('end', () => { 21 | console.log('on end: ' + body); 22 | res.writeHead(200); 23 | res.end(postHTML); 24 | }); 25 | }); 26 | 27 | server.listen(port, () => { 28 | console.log(`Server running at http://localhost:${port}`); 29 | }); 30 | -------------------------------------------------------------------------------- /node/examples/characters.js: -------------------------------------------------------------------------------- 1 | const characters = [ 2 | { 3 | id: 1, 4 | name: 'Luke Skywalker', 5 | height: '172', 6 | eye_color: 'blue', 7 | birth_year: '19BBY', 8 | gender: 'male', 9 | }, 10 | { 11 | id: 2, 12 | name: 'C-3PO', 13 | height: '167', 14 | eye_color: 'yellow', 15 | birth_year: '112BBY', 16 | gender: 'n/a', 17 | }, 18 | { 19 | id: 3, 20 | name: 'R2-D2', 21 | height: '96', 22 | eye_color: 'red', 23 | birth_year: '33BBY', 24 | gender: 'n/a', 25 | }, 26 | { 27 | id: 4, 28 | name: 'Darth Vader', 29 | height: '202', 30 | eye_color: 'yellow', 31 | birth_year: '41.9BBY', 32 | gender: 'male', 33 | }, 34 | { 35 | id: 5, 36 | name: 'Leia Organa', 37 | height: '150', 38 | eye_color: 'brown', 39 | birth_year: '19BBY', 40 | gender: 'female', 41 | }, 42 | { 43 | id: 6, 44 | name: 'Owen Lars', 45 | height: '178', 46 | eye_color: 'blue', 47 | birth_year: '52BBY', 48 | gender: 'male', 49 | }, 50 | { 51 | id: 7, 52 | name: 'Beru Whitesun lars', 53 | height: '165', 54 | eye_color: 'blue', 55 | birth_year: '47BBY', 56 | gender: 'female', 57 | }, 58 | { 59 | id: 8, 60 | name: 'R5-D4', 61 | height: '97', 62 | eye_color: 'red', 63 | birth_year: 'unknown', 64 | gender: 'n/a', 65 | }, 66 | { 67 | id: 9, 68 | name: 'Biggs Darklighter', 69 | height: '183', 70 | eye_color: 'brown', 71 | birth_year: '24BBY', 72 | gender: 'male', 73 | }, 74 | { 75 | id: 10, 76 | name: 'Obi-Wan Kenobi', 77 | height: '182', 78 | eye_color: 'blue-gray', 79 | birth_year: '57BBY', 80 | gender: 'male', 81 | }, 82 | { 83 | id: 11, 84 | name: 'Anakin Skywalker', 85 | height: '188', 86 | eye_color: 'blue', 87 | birth_year: '41.9BBY', 88 | gender: 'male', 89 | }, 90 | { 91 | id: 12, 92 | name: 'Wilhuff Tarkin', 93 | height: '180', 94 | eye_color: 'blue', 95 | birth_year: '64BBY', 96 | gender: 'male', 97 | }, 98 | { 99 | id: 13, 100 | name: 'Chewbacca', 101 | height: '228', 102 | eye_color: 'blue', 103 | birth_year: '200BBY', 104 | gender: 'male', 105 | }, 106 | { 107 | id: 14, 108 | name: 'Han Solo', 109 | height: '180', 110 | eye_color: 'brown', 111 | birth_year: '29BBY', 112 | gender: 'male', 113 | }, 114 | { 115 | id: 15, 116 | name: 'Greedo', 117 | height: '173', 118 | eye_color: 'black', 119 | birth_year: '44BBY', 120 | gender: 'male', 121 | }, 122 | { 123 | id: 16, 124 | name: 'Jabba Desilijic Tiure', 125 | height: '175', 126 | eye_color: 'orange', 127 | birth_year: '600BBY', 128 | gender: 'hermaphrodite', 129 | }, 130 | { 131 | id: 17, 132 | name: 'Wedge Antilles', 133 | height: '170', 134 | eye_color: 'hazel', 135 | birth_year: '21BBY', 136 | gender: 'male', 137 | }, 138 | { 139 | id: 18, 140 | name: 'Jek Tono Porkins', 141 | height: '180', 142 | eye_color: 'blue', 143 | birth_year: 'unknown', 144 | gender: 'male', 145 | }, 146 | { 147 | id: 19, 148 | name: 'Yoda', 149 | height: '66', 150 | eye_color: 'brown', 151 | birth_year: '896BBY', 152 | gender: 'male', 153 | }, 154 | { 155 | id: 20, 156 | name: 'Palpatine', 157 | height: '170', 158 | eye_color: 'yellow', 159 | birth_year: '82BBY', 160 | gender: 'male', 161 | }, 162 | ]; 163 | 164 | module.exports = characters; 165 | -------------------------------------------------------------------------------- /node/examples/lorem.txt: -------------------------------------------------------------------------------- 1 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 2 | esse eaque consequatur repellendus deserunt itaque harum, neque 3 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 4 | eos accusantium? 5 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 6 | esse eaque consequatur repellendus deserunt itaque harum, neque 7 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 8 | eos accusantium? 9 | 10 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 11 | esse eaque consequatur repellendus deserunt itaque harum, neque 12 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 13 | eos accusantium? 14 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 15 | esse eaque consequatur repellendus deserunt itaque harum, neque 16 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 17 | eos accusantium? 18 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 19 | esse eaque consequatur repellendus deserunt itaque harum, neque 20 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 21 | eos accusantium? 22 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 23 | esse eaque consequatur repellendus deserunt itaque harum, neque 24 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 25 | eos accusantium? 26 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 27 | esse eaque consequatur repellendus deserunt itaque harum, neque 28 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 29 | eos accusantium? 30 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 31 | esse eaque consequatur repellendus deserunt itaque harum, neque 32 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 33 | eos accusantium? 34 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 35 | esse eaque consequatur repellendus deserunt itaque harum, neque 36 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 37 | eos accusantium? 38 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 39 | esse eaque consequatur repellendus deserunt itaque harum, neque 40 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 41 | eos accusantium? 42 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 43 | esse eaque consequatur repellendus deserunt itaque harum, neque 44 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 45 | eos accusantium? 46 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut expedita 47 | esse eaque consequatur repellendus deserunt itaque harum, neque 48 | deleniti vitae incidunt possimus vero. Et repellendus nobis non iste 49 | eos accusantium? -------------------------------------------------------------------------------- /sass/examples/01-hello/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sass 01 - Hello 8 | 9 | 10 | 11 |
      12 |
      13 |

      Card Title

      14 |
      15 |

      16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur fugit 17 | nulla dolore labore corrupti repudiandae temporibus eaque sint, amet 18 | exercitationem iusto recusandae laborum! Ipsa, cumque aliquid culpa 19 | corrupti nobis eos? 20 |

      21 |
      22 |
      23 |

      Card Title

      24 |
      25 |

      26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur fugit 27 | nulla dolore labore corrupti repudiandae temporibus eaque sint, amet 28 | exercitationem iusto recusandae laborum! Ipsa, cumque aliquid culpa 29 | corrupti nobis eos? 30 |

      31 |
      32 |
      33 | 34 | 35 | -------------------------------------------------------------------------------- /sass/examples/01-hello/styles.css: -------------------------------------------------------------------------------- 1 | .main { 2 | margin: 0 auto; 3 | width: 62vw; 4 | font-family: Helvetica, sans-serif; 5 | } 6 | 7 | .card { 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | display: inline-block; 11 | padding: 10px; 12 | width: 30vw; 13 | background-color: purple; 14 | color: #fefefe; 15 | } 16 | 17 | .card h1 { 18 | font-size: 2em; 19 | } 20 | 21 | .card .box { 22 | width: 100%; 23 | height: 20vh; 24 | background-color: #1a001a; 25 | } 26 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /sass/examples/01-hello/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAMA,AAAA,KAAK,CAAC;EACJ,MAAM,EAAE,MAAM;EACd,KAAK,EAAE,IAAI;EACX,WAAW,EATD,SAAS,EAAE,UAAU;CAUhC;;AAED,AAAA,KAAK,CAAC;EACJ,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,YAAY;EACrB,OAAO,EAXC,IAAI;EAYZ,KAAK,EAAE,IAAI;EACX,gBAAgB,EAfP,MAAM;EAgBf,KAAK,EAjBM,OAAO;CA4BnB;;AAjBD,AAQE,KARG,CAQH,EAAE,CAAC;EACD,SAAS,EAAE,GAAG;CACf;;AAVH,AAYE,KAZG,CAYD,IAAI,CAAC;EACL,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAxBC,OAAsB;CAyBxC", 4 | "sources": [ 5 | "styles.scss" 6 | ], 7 | "names": [], 8 | "file": "styles.css" 9 | } -------------------------------------------------------------------------------- /sass/examples/01-hello/styles.scss: -------------------------------------------------------------------------------- 1 | $font-face: Helvetica, sans-serif; 2 | $main-color: #fefefe; 3 | $bg-color: purple; 4 | $secondary-bg-color: darken($bg-color, 20%); 5 | $padding: 10px; 6 | 7 | .main { 8 | margin: 0 auto; 9 | width: 62vw; 10 | font-family: $font-face; 11 | } 12 | 13 | .card { 14 | box-sizing: border-box; 15 | display: inline-block; 16 | padding: $padding; 17 | width: 30vw; 18 | background-color: $bg-color; 19 | color: $main-color; 20 | 21 | h1 { 22 | font-size: 2em; 23 | } 24 | 25 | & .box { 26 | width: 100%; 27 | height: 20vh; 28 | background-color: $secondary-bg-color; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /sass/examples/02-partials/_colors.scss: -------------------------------------------------------------------------------- 1 | $main-color: purple; 2 | $main-color-50: darken($main-color, 50%); 3 | $bg-color: magenta; 4 | $bg-color-50: lighten($bg-color, 50%); 5 | -------------------------------------------------------------------------------- /sass/examples/02-partials/_fonts.scss: -------------------------------------------------------------------------------- 1 | $font-family: Helvetica, sans-serif; 2 | $font-size: 1em; 3 | $padding: 0.8em; 4 | -------------------------------------------------------------------------------- /sass/examples/02-partials/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sass 02 - Partials 8 | 9 | 10 | 11 |
      12 |
      13 |

      Card Title

      14 |
      15 |

      16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur fugit 17 | nulla dolore labore corrupti repudiandae temporibus eaque sint, amet 18 | exercitationem iusto recusandae laborum! Ipsa, cumque aliquid culpa 19 | corrupti nobis eos? 20 |

      21 |
      22 |
      23 |

      Card Title

      24 |
      25 |

      26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur fugit 27 | nulla dolore labore corrupti repudiandae temporibus eaque sint, amet 28 | exercitationem iusto recusandae laborum! Ipsa, cumque aliquid culpa 29 | corrupti nobis eos? 30 |

      31 |
      32 |
      33 | 34 | 35 | -------------------------------------------------------------------------------- /sass/examples/02-partials/styles.scss: -------------------------------------------------------------------------------- 1 | @import '_fonts'; 2 | @import '_colors'; 3 | 4 | .main { 5 | margin: 0 auto; 6 | width: 62vw; 7 | font-family: $font-face; 8 | } 9 | 10 | .card { 11 | box-sizing: border-box; 12 | display: inline-block; 13 | padding: $padding; 14 | width: 30vw; 15 | background-color: $bg-color; 16 | color: $main-color; 17 | 18 | h1 { 19 | font-size: 2em; 20 | } 21 | 22 | & .box { 23 | width: 100%; 24 | height: 20vh; 25 | background-color: $bg-color-50; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /sass/examples/03-css-import/colors.css: -------------------------------------------------------------------------------- 1 | /* 2 | import this CSS file into the style.css 3 | @import 'colors.css'; 4 | */ 5 | 6 | :root { 7 | --main-color: purple; 8 | --main-color-50: rgb(61, 8, 61); 9 | --bg-color: magenta; 10 | --bg-color-50: rgb(197, 128, 197); 11 | } 12 | -------------------------------------------------------------------------------- /sass/examples/03-css-import/fonts.css: -------------------------------------------------------------------------------- 1 | /* 2 | import this CSS file into the style.css 3 | @import 'fonts.css'; 4 | */ 5 | 6 | :root { 7 | --font-family: Helvetica, sans-serif; 8 | --font-size: 1em; 9 | --padding: 0.8em; 10 | } 11 | -------------------------------------------------------------------------------- /sass/examples/03-css-import/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sass 03 - CSS Import 8 | 9 | 10 | 11 |
      12 |
      13 |

      Card Title

      14 |
      15 |

      16 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur fugit 17 | nulla dolore labore corrupti repudiandae temporibus eaque sint, amet 18 | exercitationem iusto recusandae laborum! Ipsa, cumque aliquid culpa 19 | corrupti nobis eos? 20 |

      21 |
      22 |
      23 |

      Card Title

      24 |
      25 |

      26 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur fugit 27 | nulla dolore labore corrupti repudiandae temporibus eaque sint, amet 28 | exercitationem iusto recusandae laborum! Ipsa, cumque aliquid culpa 29 | corrupti nobis eos? 30 |

      31 |
      32 |
      33 | 34 | 35 | -------------------------------------------------------------------------------- /sass/examples/03-css-import/styles.css: -------------------------------------------------------------------------------- 1 | .main { 2 | margin: 0 auto; 3 | width: 62vw; 4 | font-family: Helvetica, sans-serif; 5 | } 6 | 7 | .card { 8 | -webkit-box-sizing: border-box; 9 | box-sizing: border-box; 10 | display: inline-block; 11 | padding: 10px; 12 | width: 30vw; 13 | background-color: purple; 14 | color: #fefefe; 15 | } 16 | 17 | .card h1 { 18 | font-size: 2em; 19 | } 20 | 21 | .card .box { 22 | width: 100%; 23 | height: 20vh; 24 | background-color: #1a001a; 25 | } 26 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /sass/examples/03-css-import/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAMA,AAAA,KAAK,CAAC;EACJ,MAAM,EAAE,MAAM;EACd,KAAK,EAAE,IAAI;EACX,WAAW,EATD,SAAS,EAAE,UAAU;CAUhC;;AAED,AAAA,KAAK,CAAC;EACJ,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,YAAY;EACrB,OAAO,EAXC,IAAI;EAYZ,KAAK,EAAE,IAAI;EACX,gBAAgB,EAfP,MAAM;EAgBf,KAAK,EAjBM,OAAO;CA4BnB;;AAjBD,AAQE,KARG,CAQH,EAAE,CAAC;EACD,SAAS,EAAE,GAAG;CACf;;AAVH,AAYE,KAZG,CAYD,IAAI,CAAC;EACL,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,gBAAgB,EAxBC,OAAsB;CAyBxC", 4 | "sources": [ 5 | "styles.scss" 6 | ], 7 | "names": [], 8 | "file": "styles.css" 9 | } -------------------------------------------------------------------------------- /sass/examples/03-css-import/styles.scss: -------------------------------------------------------------------------------- 1 | $font-face: Helvetica, sans-serif; 2 | $main-color: #fefefe; 3 | $bg-color: purple; 4 | $secondary-bg-color: darken($bg-color, 20%); 5 | $padding: 10px; 6 | 7 | .main { 8 | margin: 0 auto; 9 | width: 62vw; 10 | font-family: $font-face; 11 | } 12 | 13 | .card { 14 | box-sizing: border-box; 15 | display: inline-block; 16 | padding: $padding; 17 | width: 30vw; 18 | background-color: $bg-color; 19 | color: $main-color; 20 | 21 | h1 { 22 | font-size: 2em; 23 | } 24 | 25 | & .box { 26 | width: 100%; 27 | height: 20vh; 28 | background-color: $secondary-bg-color; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /sass/exercises/_colors.scss: -------------------------------------------------------------------------------- 1 | $main-color: green; 2 | $main-color-50: darken($main-color, 50%); 3 | $background-color: #ddd; 4 | $background-color-50: lighten($background-color, 50%); 5 | $purple: purple; 6 | $purple-50: lighten($purple, 50%); 7 | -------------------------------------------------------------------------------- /sass/exercises/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Exercise 01 - Sass 8 | 9 | 10 | 11 |
      12 |
      13 |

      Exercise 01 - Sass

      14 |
      15 | 22 |
      23 |
      24 |
      25 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur 26 | numquam ad velit. In odio laboriosam dolore quod voluptatem aliquam. 27 | Repellat voluptatem accusantium sit omnis provident natus dolores fugit 28 | exercitationem incidunt? Odio velit cumque assumenda error aspernatur 29 | libero non! Quaerat nemo iure quia veniam odio, libero repudiandae 30 | dicta. Debitis modi earum, maxime distinctio enim consequatur ut totam, 31 | molestiae, provident maiores cupiditate. Cupiditate ipsum totam fugit 32 | ratione officiis nemo expedita laboriosam labore harum beatae vero 33 | voluptatibus architecto repellat, doloremque, quasi aspernatur ab, 34 | reprehenderit esse quam ex non atque quidem! Repudiandae, maiores ullam. 35 |
      36 | 37 |
      38 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /sass/exercises/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica, sans-serif; 3 | } 4 | 5 | header { 6 | background-color: #ddd; 7 | padding: 10px; 8 | } 9 | 10 | header h1 { 11 | font-size: 21px; 12 | color: green; 13 | } 14 | /*# sourceMappingURL=styles.css.map */ -------------------------------------------------------------------------------- /sass/exercises/styles.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "AAMA,AAAA,IAAI,CAAC;EACH,WAAW,EALC,SAAS,EAAE,UAAU;CAMlC;;AAED,AAAA,MAAM,CAAC;EACL,gBAAgB,ECTC,IAAI;EDUrB,OAAO,EARC,IAAI;CAcb;;AARD,AAIE,MAJI,CAIJ,EAAE,CAAC;EACD,SAAS,EAAE,IAAgB;EAC3B,KAAK,EChBI,KAAK;CDiBf", 4 | "sources": [ 5 | "styles.scss", 6 | "_colors.scss" 7 | ], 8 | "names": [], 9 | "file": "styles.css" 10 | } -------------------------------------------------------------------------------- /sass/exercises/styles.scss: -------------------------------------------------------------------------------- 1 | @import '_colors'; 2 | 3 | $font-family: Helvetica, sans-serif; 4 | $font-size: 14px; 5 | $padding: 10px; 6 | 7 | body { 8 | font-family: $font-family; 9 | } 10 | 11 | header { 12 | background-color: $background-color; 13 | padding: $padding; 14 | 15 | h1 { 16 | font-size: $font-size * 1.5; 17 | color: $main-color; 18 | } 19 | } 20 | --------------------------------------------------------------------------------