├── 06-simple-blog ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 07-08-user-profile ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 14-button-component-library ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 15-16-input-component-library ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 17-basic-portfolio ├── index.html └── styles.css ├── 21-modal ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 22-23-navbar ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 25-grid-page-layout ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 26-27-image-gallery ├── after │ ├── imgs │ │ ├── img-1.jpg │ │ ├── img-10.jpg │ │ ├── img-11.jpg │ │ ├── img-12.jpg │ │ ├── img-13.jpg │ │ ├── img-14.jpg │ │ ├── img-15.jpg │ │ ├── img-16.jpg │ │ ├── img-17.jpg │ │ ├── img-18.jpg │ │ ├── img-19.jpg │ │ ├── img-2.jpg │ │ ├── img-20.jpg │ │ ├── img-3.jpg │ │ ├── img-4.jpg │ │ ├── img-5.jpg │ │ ├── img-6.jpg │ │ ├── img-7.jpg │ │ ├── img-8.jpg │ │ └── img-9.jpg │ ├── index.html │ └── styles.css └── before │ ├── imgs │ ├── img-1.jpg │ ├── img-10.jpg │ ├── img-11.jpg │ ├── img-12.jpg │ ├── img-13.jpg │ ├── img-14.jpg │ ├── img-15.jpg │ ├── img-16.jpg │ ├── img-17.jpg │ ├── img-18.jpg │ ├── img-19.jpg │ ├── img-2.jpg │ ├── img-20.jpg │ ├── img-3.jpg │ ├── img-4.jpg │ ├── img-5.jpg │ ├── img-6.jpg │ ├── img-7.jpg │ ├── img-8.jpg │ └── img-9.jpg │ └── index.html ├── 32-bootcamp-landing-page ├── after │ ├── img │ │ ├── arrow_down.svg │ │ ├── database_icon.svg │ │ ├── edit_page_icon.svg │ │ ├── header_image.jpg │ │ ├── html_icon.svg │ │ ├── node_js_icon.svg │ │ ├── react_icon.svg │ │ ├── vscode_icon.svg │ │ └── wds_logo.png │ ├── index.html │ └── styles.css └── before │ └── img │ ├── arrow_down.svg │ ├── database_icon.svg │ ├── edit_page_icon.svg │ ├── header_image.jpg │ ├── html_icon.svg │ ├── node_js_icon.svg │ ├── react_icon.svg │ ├── vscode_icon.svg │ └── wds_logo.png ├── 35-button-component-library-upgrades ├── after │ ├── index.html │ └── styles.css └── before │ ├── index.html │ └── styles.css ├── 36-37-input-component-library-upgrades ├── after │ ├── index.html │ └── styles.css └── before │ ├── index.html │ └── styles.css ├── 40-custom-checkbox ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 41-tooltip ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 48-bootcamp-pricing-upgrade ├── after │ ├── img │ │ ├── arrow_down.svg │ │ ├── database_icon.svg │ │ ├── edit_page_icon.svg │ │ ├── header_image.jpg │ │ ├── html_icon.svg │ │ ├── node_js_icon.svg │ │ ├── react_icon.svg │ │ ├── vscode_icon.svg │ │ └── wds_logo.png │ ├── index.html │ └── styles.css └── before │ ├── img │ ├── arrow_down.svg │ ├── database_icon.svg │ ├── edit_page_icon.svg │ ├── header_image.jpg │ ├── html_icon.svg │ ├── node_js_icon.svg │ ├── react_icon.svg │ ├── vscode_icon.svg │ └── wds_logo.png │ ├── index.html │ └── styles.css ├── 50-51-button-transition ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 54-advanced-button-animation ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 55-56-loading-text-animation ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html ├── 57-tooltip-animation ├── after │ ├── index.html │ └── styles.css └── before │ ├── index.html │ └── styles.css ├── 59-3d-cube ├── after │ ├── index.html │ └── styles.css └── before │ └── index.html └── 60-bootcamp-animations ├── after ├── img │ ├── arrow_down.svg │ ├── database_icon.svg │ ├── edit_page_icon.svg │ ├── header_image.jpg │ ├── html_icon.svg │ ├── node_js_icon.svg │ ├── react_icon.svg │ ├── vscode_icon.svg │ └── wds_logo.png ├── index.html └── styles.css └── before ├── img ├── arrow_down.svg ├── database_icon.svg ├── edit_page_icon.svg ├── header_image.jpg ├── html_icon.svg ├── node_js_icon.svg ├── react_icon.svg ├── vscode_icon.svg └── wds_logo.png ├── index.html └── styles.css /06-simple-blog/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Web Dev Simplified - Blog 9 | 10 | 11 |
12 |

Web Dev Simplified Blog

13 |
14 |
15 |
16 |
17 |

Semantic Versioning Explained

18 |
March 1st, 2020
19 |
Kyle Cook
20 |

An explanation of what semantic versioning is and why it is important.

21 | Read More 22 |
23 |
24 |

The Forgotten React Renderer - React Portal

25 |
February 23rd, 2020
26 |
Kyle Cook
27 |

React portal lets components be rendered outside their parent component which is incredibly useful in specific scenarios explained in depth in this article.

28 | Read More 29 |
30 |
31 |
32 | 35 | 36 | -------------------------------------------------------------------------------- /06-simple-blog/after/styles.css: -------------------------------------------------------------------------------- 1 | header, #footer { 2 | background-color: purple; 3 | } 4 | 5 | .header-text, #footer { 6 | color: white; 7 | text-align: center; 8 | } 9 | 10 | .article-title { 11 | font-family: Arial; 12 | } 13 | 14 | .article-date { 15 | font-style: italic; 16 | } 17 | 18 | .article-author, .article-date { 19 | color: grey; 20 | } -------------------------------------------------------------------------------- /06-simple-blog/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Web Dev Simplified - Blog 8 | 9 | 10 |
11 |

Web Dev Simplified Blog

12 |
13 |
14 |
15 |
16 |

Semantic Versioning Explained

17 |
March 1st, 2020
18 |
Kyle Cook
19 |

An explanation of what semantic versioning is and why it is important.

20 | Read More 21 |
22 |
23 |

The Forgotten React Renderer - React Portal

24 |
February 23rd, 2020
25 |
Kyle Cook
26 |

React portal lets components be rendered outside their parent component which is incredibly useful in specific scenarios explained in depth in this article.

27 | Read More 28 |
29 |
30 |
31 | 34 | 35 | -------------------------------------------------------------------------------- /07-08-user-profile/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | User Profile 9 | 10 | 11 |
12 |

Kyle Cook

13 |
14 |
15 |
16 |

Hobbies

17 | 22 |
23 |
24 |

Favorite Bands

25 |
    26 |
  1. Seventh Wonder
    2. 27 |
  2. Ne Obliviscaris
    3. 28 |
  3. Be'lakor
    4. 29 |
  4. Opeth
    5. 30 |
  5. Katy Perry
    6. 31 |
32 |
33 |
34 |

Favorite Languages

35 |
    36 |
  1. CSS
    2. 37 |
  2. JavaScript
    3. 38 |
  3. Ruby
    4. 39 |
40 |
41 |
42 | 43 | -------------------------------------------------------------------------------- /07-08-user-profile/after/styles.css: -------------------------------------------------------------------------------- 1 | .header-text { 2 | text-align: center; 3 | } 4 | 5 | .green-section { 6 | background-color: green; 7 | color: white; 8 | } 9 | 10 | .section-title { 11 | font-family: Arial; 12 | } 13 | 14 | .cyan { 15 | color: cyan; 16 | } 17 | 18 | .cross-off { 19 | text-decoration-line: line-through; 20 | } -------------------------------------------------------------------------------- /07-08-user-profile/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | User Profile 8 | 9 | 10 |
11 |

Kyle Cook

12 |
13 |
14 |
15 |

Hobbies

16 | 21 |
22 |
23 |

Favorite Bands

24 |
    25 |
  1. Seventh Wonder
    2. 26 |
  2. Ne Obliviscaris
    3. 27 |
  3. Be'lakor
    4. 28 |
  4. Opeth
    5. 29 |
  5. Katy Perry
    6. 30 |
31 |
32 |
33 |

Favorite Languages

34 |
    35 |
  1. CSS
    2. 36 |
  2. JavaScript
    3. 37 |
  3. Ruby
    4. 38 |
39 |
40 |
41 | 42 | -------------------------------------------------------------------------------- /14-button-component-library/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Button Library 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /14-button-component-library/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .btn { 6 | background-color: hsl(0, 0%, 90%); 7 | border: 1px solid hsl(0, 0%, 70%); 8 | outline: none; 9 | cursor: pointer; 10 | padding: .5em 1em; 11 | border-radius: .3em; 12 | } 13 | 14 | .btn:hover, .btn:focus { 15 | background-color: hsl(0, 0%, 80%); 16 | box-shadow: 0 0 5px 0 hsl(0, 0%, 70%); 17 | } 18 | 19 | .btn.btn-primary { 20 | background-color: hsl(271, 70%, 50%); 21 | border-color: hsl(271, 70%, 30%); 22 | color: white; 23 | } 24 | 25 | .btn.btn-primary:hover, .btn.btn-primary:focus { 26 | background-color: hsl(271, 70%, 40%); 27 | box-shadow: 0 0 5px 0 hsl(271, 70%, 30%); 28 | } 29 | 30 | .btn.btn-accent { 31 | background-color: hsl(200, 100%, 40%); 32 | border-color: hsl(200, 100%, 20%); 33 | color: white; 34 | } 35 | 36 | .btn.btn-accent:hover, .btn.btn-accent:focus { 37 | background-color: hsl(200, 100%, 30%); 38 | box-shadow: 0 0 5px 0 hsl(200, 100%, 20%); 39 | } 40 | 41 | .btn.btn-danger { 42 | background-color: hsl(0, 60%, 50%); 43 | border-color: hsl(0, 60%, 30%); 44 | color: white; 45 | } 46 | 47 | .btn.btn-danger:hover, .btn.btn-danger:focus { 48 | background-color: hsl(0, 60%, 40%); 49 | box-shadow: 0 0 5px 0 hsl(0, 60%, 30%); 50 | } 51 | 52 | .btn.btn-large { 53 | font-size: 1.25rem; 54 | } 55 | 56 | .btn.btn-small { 57 | font-size: .75rem; 58 | } 59 | 60 | .btn.btn-pill { 61 | border-radius: 1000000px; 62 | } 63 | 64 | .btn.btn-custom { 65 | background: linear-gradient(to right, hsl(271, 70%, 50%), hsl(200, 100%, 40%)); 66 | color: white; 67 | border-color: #222; 68 | } 69 | 70 | .btn.btn-custom:hover, .btn.btn-custom:focus { 71 | background: linear-gradient(to right, hsl(271, 70%, 40%), hsl(200, 100%, 30%)); 72 | border-color: black; 73 | box-shadow: 0 0 5px 0 black; 74 | } -------------------------------------------------------------------------------- /14-button-component-library/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Library 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /15-16-input-component-library/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Input Library 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /15-16-input-component-library/after/styles.css: -------------------------------------------------------------------------------- 1 | input { 2 | margin: .25rem; 3 | } 4 | 5 | .input { 6 | border: 1px solid #AAA; 7 | outline: none; 8 | font-size: inherit; 9 | padding: .5em; 10 | border-radius: .2em; 11 | } 12 | 13 | .input:focus { 14 | border-color: #0AF; 15 | box-shadow: 0 0 5px 0 #0AF; 16 | } 17 | 18 | .input.input-success { 19 | border-color: #27AE60; 20 | } 21 | 22 | .input.input-success:focus { 23 | border-color: #0F0; 24 | box-shadow: 0 0 5px 0 #0F0; 25 | } 26 | 27 | .input.input-error { 28 | border-color: #EB5757; 29 | } 30 | 31 | .input.input-error:focus { 32 | border-color: #F00; 33 | box-shadow: 0 0 5px 0 #F00; 34 | } 35 | 36 | .input.input-large { 37 | font-size: 1.25rem; 38 | } 39 | 40 | .input.input-small { 41 | font-size: .75rem; 42 | } 43 | 44 | .input:disabled { 45 | background-color: #EAEAEA; 46 | } -------------------------------------------------------------------------------- /15-16-input-component-library/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Input Library 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /17-basic-portfolio/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Portfolio 9 | 10 | 11 |
12 |

Kyle Cook

13 |
14 |
15 |
16 |

About Me

17 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quaerat totam impedit fugiat doloribus quia eos iste ea facilis ipsam cum placeat cumque numquam sunt vero consectetur qui tenetur voluptatibus, officia commodi quibusdam iusto beatae nam distinctio. Voluptatem nisi voluptate perferendis odio. Aperiam tenetur, eius distinctio iusto sapiente quia reiciendis repellat! Atque ipsum vel eius blanditiis veritatis nihil, cupiditate impedit doloribus esse deleniti recusandae laborum? Commodi, quae nulla. A omnis accusamus cupiditate dicta ea sit fugit facere, ipsum rerum commodi deserunt magnam similique, libero, quidem esse laboriosam laborum! Aut reiciendis voluptas voluptatum maiores autem non similique praesentium eligendi dolorum deleniti!

18 |
19 |
20 |

Skills

21 | 28 |
29 |
30 |

Projects

31 | 41 |
42 |
43 |

Contact Me

44 |
45 |
46 | 47 |
48 | 49 |
50 | 51 |
52 | 53 |
54 | 55 |
56 | 57 |
58 | 59 |
60 |
61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /17-basic-portfolio/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: Arial; 4 | line-height: 1.5; 5 | } 6 | 7 | .header { 8 | background-color: #069; 9 | color: white; 10 | text-align: center; 11 | padding: 1.5rem; 12 | } 13 | 14 | .header-title { 15 | margin: 0; 16 | } 17 | 18 | .section { 19 | padding: 1rem 2rem; 20 | } 21 | 22 | .section-accent { 23 | background-color: #069; 24 | color: white; 25 | } 26 | 27 | .section-content { 28 | padding-left: 1rem; 29 | } 30 | 31 | .skills-section { 32 | font-size: 1.2rem; 33 | font-style: italic; 34 | } 35 | 36 | .project-section, .skills-section { 37 | list-style: none; 38 | margin: 0; 39 | } 40 | 41 | .project-section { 42 | color: #777; 43 | } 44 | 45 | .project-list-item { 46 | margin-bottom: 1rem; 47 | } 48 | 49 | .project-list-item:last-child { 50 | margin: 0; 51 | } 52 | 53 | .contact-section { 54 | margin: 2rem 0; 55 | } 56 | 57 | .input { 58 | border: 1px solid #AAA; 59 | outline: none; 60 | padding: .5em; 61 | font-size: 1rem; 62 | border-radius: .2em; 63 | font-family: inherit; 64 | line-height: inherit; 65 | } 66 | 67 | .input:focus { 68 | border-color: #069; 69 | box-shadow: 0 0 5px 0 #069; 70 | } 71 | 72 | .input-no-resize { 73 | resize: none; 74 | } 75 | 76 | .btn { 77 | background-color: hsl(200, 100%, 30%); 78 | border: 1px solid hsl(200, 100%, 10%); 79 | border-radius: .3em; 80 | cursor: pointer; 81 | padding: .5em 1em; 82 | outline: none; 83 | color: white; 84 | } 85 | 86 | .btn:hover, .btn:focus { 87 | background-color: hsl(200, 100%, 20%); 88 | box-shadow: 0 0 5px 0 hsl(200, 100%, 10%); 89 | } 90 | 91 | .footer { 92 | background-color: #069; 93 | color: white; 94 | font-size: 1.25rem; 95 | padding: 1.5rem; 96 | text-align: center; 97 | } -------------------------------------------------------------------------------- /21-modal/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Modal 9 | 10 | 11 |
12 |
13 | Title 14 | 15 |
16 |
17 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto dicta ipsam aspernatur soluta. Natus ipsa quos aliquam architecto ab perspiciatis, ex ipsam similique iure accusamus delectus assumenda illo ratione 18 |
19 |
20 | 21 | 22 |
23 |
24 | 25 | -------------------------------------------------------------------------------- /21-modal/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | height: 100vh; 10 | margin: 0; 11 | background-color: #555; 12 | } 13 | 14 | .modal { 15 | height: 80vh; 16 | width: 900px; 17 | max-width: 80%; 18 | background-color: white; 19 | border-radius: 8px; 20 | display: flex; 21 | flex-direction: column; 22 | } 23 | 24 | .header { 25 | padding: 0 1rem; 26 | border-bottom: 1px solid #777; 27 | padding-bottom: .5rem; 28 | display: flex; 29 | justify-content: space-between; 30 | } 31 | 32 | .title { 33 | font-size: 1.5rem; 34 | padding-top: 1rem; 35 | } 36 | 37 | .close-button { 38 | background: none; 39 | border: none; 40 | font-size: 1.5rem; 41 | font-weight: bold; 42 | margin: 0; 43 | padding: 0; 44 | cursor: pointer; 45 | align-self: flex-start; 46 | padding-top: .5rem; 47 | } 48 | 49 | .body { 50 | flex-grow: 1; 51 | overflow: auto; 52 | padding: 1rem; 53 | } 54 | 55 | .footer { 56 | display: flex; 57 | justify-content: flex-end; 58 | padding: .5rem; 59 | border-top: 1px solid #777; 60 | } 61 | 62 | .footer .btn { 63 | margin-right: .5rem; 64 | } 65 | 66 | .footer .btn:last-child { 67 | margin-right: initial; 68 | } 69 | 70 | .btn { 71 | padding: .5em 1em; 72 | font-size: inherit; 73 | border-radius: .3em; 74 | border: none; 75 | color: white; 76 | cursor: pointer; 77 | } 78 | 79 | .btn.btn-primary { 80 | background-color: #1CA; 81 | } 82 | 83 | .btn.btn-primary:hover, 84 | .btn.btn-primary:focus { 85 | background-color: #0A8; 86 | } 87 | 88 | .btn.btn-danger { 89 | background-color: #C33; 90 | } 91 | 92 | .btn.btn-danger:hover, 93 | .btn.btn-danger:focus { 94 | background-color: #A11; 95 | } -------------------------------------------------------------------------------- /21-modal/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Modal 8 | 9 | 10 |
11 |
12 | Title 13 | 14 |
15 |
16 | LLorem ipsum dolor sit amet consectetur adipisicing elit. Architecto dicta ipsam aspernatur soluta. Natus ipsa quos aliquam architecto ab perspiciatis, ex ipsam similique iure accusamus delectus assumenda illo ratione aliquid debitis labore modi vitae. Voluptatum eum recusandae est corrupti facilis natus, doloremque voluptatibus voluptatem. Dolorum quo iure debitis corrupti provident ipsa similique ipsam, sed recusandae ratione vitae officia maiores illo consectetur fuga voluptatem adipisci magni sit distinctio dignissimos eveniet voluptas? Excepturi et veritatis consequuntur ipsum. Numquam quasi, maxime totam voluptatem vitae autem eum molestiae neque obcaecati, animi ratione officiis harum ex culpa officia tenetur quo facilis temporibus! Doloribus, eum nemo, velit tempore quasi repellendus ducimus quo quam eligendi, in dolorem rem beatae sit expedita. Sapiente hic, quae quo expedita distinctio eum ipsa corrupti, modi, sequi officia voluptates obcaecati iusto aspernatur quidem ut ullam! Delectus, at temporibus eius libero fuga neque odio exercitationem necessitatibus quidem, magni labore mollitia voluptatibus soluta voluptates nesciunt nobis quasi culpa optio. Voluptatum eaque veniam ex totam. Rem maiores dolores, perferendis optio qui ut quis unde omnis nesciunt. A, quibusdam. Beatae eos ipsa quaerat ratione. Voluptate nisi minima ducimus quibusdam quod autem inventore laboriosam modi commodi nobis ex, voluptatum quisquam saepe animi temporibus consequuntur sit neque nulla dolorum a natus itaque? Dicta porro, asperiores veritatis unde eius iste quibusdam repellendus repudiandae? Aliquid sit hic iste ut. At velit aut harum provident iste facere, esse nesciunt alias ea voluptates magnam necessitatibus aperiam. Ipsa itaque laborum, totam suscipit in ab pariatur aliquam autem ea harum debitis iusto consequatur aspernatur reprehenderit quod error. Voluptatum iusto distinctio accusamus eligendi molestias? Ducimus distinctio nisi non quasi odit saepe nobis fugit? Praesentium exercitationem qui similique numquam? Amet eos aliquam fugit beatae reiciendis quos quibusdam, explicabo asperiores officia ratione hic accusantium nihil cum veritatis. Ipsum delectus, sit rerum corrupti velit recusandae libero animi pariatur! 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | -------------------------------------------------------------------------------- /22-23-navbar/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Navbar 9 | 10 | 11 | 20 | 21 | -------------------------------------------------------------------------------- /22-23-navbar/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | } 8 | 9 | .nav { 10 | background-color: #333; 11 | color: white; 12 | display: flex; 13 | justify-content: space-between; 14 | align-items: center; 15 | padding: 0 .5rem; 16 | } 17 | 18 | .link-list { 19 | display: flex; 20 | margin: 0; 21 | list-style: none; 22 | } 23 | 24 | .link { 25 | padding: .5rem; 26 | } 27 | 28 | .link:hover { 29 | background-color: #777; 30 | } 31 | 32 | .link a { 33 | color: inherit; 34 | text-decoration: none; 35 | } -------------------------------------------------------------------------------- /22-23-navbar/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Navbar 8 | 9 | 10 | 19 | 20 | -------------------------------------------------------------------------------- /25-grid-page-layout/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Grid Page Layout 9 | 10 | 11 |
Title
12 | 19 |
20 |
21 |

Header

22 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, et reprehenderit blanditiis nulla ratione eveniet, voluptatum labore hic iste quisquam sint delectus neque deserunt quibusdam voluptatem quia enim. Vitae ratione dolorem aut nisi, rem quidem quis enim, perferendis quae hic doloribus dolor cupiditate repellat magni omnis laboriosam, nulla maxime! Iusto.

23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /25-grid-page-layout/after/styles.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | min-height: 100vh; 3 | margin: 0; 4 | display: grid; 5 | grid-template-columns: 1fr 150px; 6 | grid-template-rows: auto auto 1fr auto; 7 | grid-template-areas: 8 | "header header" 9 | "nav sidebar" 10 | "content sidebar" 11 | "footer footer"; 12 | } 13 | 14 | .header { 15 | grid-area: header; 16 | font-size: 1.5rem; 17 | background-color: #069; 18 | color: white; 19 | text-align: center; 20 | padding: 1rem; 21 | } 22 | 23 | .nav { 24 | grid-area: nav; 25 | background-color: #069; 26 | color: white; 27 | border-top: 1px solid #024; 28 | padding: .5rem; 29 | } 30 | 31 | .nav-list { 32 | display: flex; 33 | justify-content: center; 34 | margin: 0; 35 | padding: 0; 36 | list-style: none; 37 | } 38 | 39 | .nav-list li { 40 | padding: .5rem; 41 | } 42 | 43 | .sidebar { 44 | grid-area: sidebar; 45 | background-color: #024; 46 | color: white; 47 | padding: .5rem; 48 | } 49 | 50 | .content { 51 | grid-area: content; 52 | margin: 1rem; 53 | } 54 | 55 | .content h2 { 56 | margin: 0; 57 | } 58 | 59 | .footer { 60 | grid-area: footer; 61 | background-color: #069; 62 | color: white; 63 | text-align: center; 64 | padding: .5rem; 65 | } -------------------------------------------------------------------------------- /25-grid-page-layout/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid Page Layout 8 | 9 | 10 |
Title
11 | 18 |
19 |
20 |

Header

21 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, et reprehenderit blanditiis nulla ratione eveniet, voluptatum labore hic iste quisquam sint delectus neque deserunt quibusdam voluptatem quia enim. Vitae ratione dolorem aut nisi, rem quidem quis enim, perferendis quae hic doloribus dolor cupiditate repellat magni omnis laboriosam, nulla maxime! Iusto.

22 |
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-1.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-10.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-11.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-12.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-13.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-14.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-15.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-16.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-17.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-18.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-19.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-2.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-20.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-3.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-4.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-5.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-6.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-7.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-8.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/imgs/img-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/after/imgs/img-9.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Gallery 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /26-27-image-gallery/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .grid-container { 6 | display: grid; 7 | grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 8 | gap: 10px; 9 | align-items: stretch; 10 | grid-auto-rows: 200px; 11 | grid-auto-flow: dense; 12 | background-color: #333; 13 | margin: 0; 14 | padding: 10px; 15 | } 16 | 17 | img { 18 | border: 1px solid white; 19 | max-width: 100%; 20 | } 21 | 22 | .wide { 23 | grid-column: span 2; 24 | } 25 | 26 | .tall { 27 | grid-row: span 2; 28 | } 29 | -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-1.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-10.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-11.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-12.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-13.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-13.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-14.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-14.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-15.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-15.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-16.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-16.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-17.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-17.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-18.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-18.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-19.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-19.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-2.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-20.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-20.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-3.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-4.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-5.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-6.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-7.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-8.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/imgs/img-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/26-27-image-gallery/before/imgs/img-9.jpg -------------------------------------------------------------------------------- /26-27-image-gallery/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Gallery 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/arrow_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/database_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/edit_page_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/header_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/32-bootcamp-landing-page/after/img/header_image.jpg -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/html_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/node_js_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/react_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/vscode_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/img/wds_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/32-bootcamp-landing-page/after/img/wds_logo.png -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | WDS Bootcamp 9 | 10 | 11 |
12 | 20 |

WDS Bootcamp

21 | From No Stack To Full Stack 22 | Learn More 23 | Scroll Down Icon 24 |
25 |
26 |
27 |

Curriculum

28 |
29 |
30 | HTML 5 Icon 31 |

Start with the basics by learning HTML/CSS to build your first website

32 |
33 |
34 | Node JS Icon 35 |

Build interactive web applications with the world’s most popular backend

36 |
37 |
38 | Visual Studio Code Icon 39 |

Use the latest technology for editing and creating amazing web applications

40 |
41 |
42 | Database Icon 43 |

Manage application data by learning SQL and NoSQL database architecture

44 |
45 |
46 | Web Page Edit Icon 47 |

Create stunning designs by using modern design tools like Figma and Sketch

48 |
49 |
50 | React Icon 51 |

Use the most popular frontend framework to create modern PWAs

52 |
53 |
54 |
55 |
56 |

Free

57 |

That’s right. All of this amazing content is available completely for free on YouTube!

58 |
59 |
60 |

Contact

61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 |
71 |
72 |
73 |
74 | 84 | 85 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: Cambria; 8 | color: #1B2522; 9 | } 10 | 11 | .full-screen-header { 12 | height: 100vh; 13 | background-image: url('img/header_image.jpg'); 14 | background-size: cover; 15 | background-position-x: 40%; 16 | background-position-y: center; 17 | 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: center; 21 | align-items: center; 22 | 23 | color: white; 24 | position: relative; 25 | } 26 | 27 | .nav { 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | background-color: #1B2522; 32 | padding: .5rem 1rem; 33 | } 34 | 35 | .nav-top { 36 | position: fixed; 37 | top: 0; 38 | left: 0; 39 | right: 0; 40 | z-index: 1; 41 | } 42 | 43 | .logo { 44 | width: 50px; 45 | } 46 | 47 | .nav-list { 48 | margin: 0; 49 | padding: 0; 50 | display: flex; 51 | list-style-type: none; 52 | } 53 | 54 | .nav-list a { 55 | text-decoration: none; 56 | margin-left: 1rem; 57 | color: white; 58 | } 59 | 60 | .nav-list a:hover { 61 | color: #CCC; 62 | } 63 | 64 | .title { 65 | font-size: 3rem; 66 | margin: 0; 67 | } 68 | 69 | .sub-title { 70 | font-size: 1.5rem; 71 | margin-top: .3rem; 72 | margin-bottom: 1rem; 73 | } 74 | 75 | .btn { 76 | background-color: hsl(200, 100%, 50%); 77 | color: white; 78 | border-radius: 10000px; 79 | padding: .25em 1em; 80 | text-decoration: none; 81 | border: none; 82 | cursor: pointer; 83 | font-size: inherit; 84 | } 85 | 86 | .btn:hover, 87 | .btn:focus { 88 | background-color: hsl(200, 100%, 40%); 89 | } 90 | 91 | .scroll-down-icon { 92 | position: absolute; 93 | bottom: 1rem; 94 | width: 30px; 95 | } 96 | 97 | .section { 98 | padding: 2rem; 99 | } 100 | 101 | .section-title { 102 | margin: 0; 103 | margin-bottom: 2rem; 104 | font-size: 2rem; 105 | text-align: center; 106 | color: black; 107 | } 108 | 109 | .curriculum-grid { 110 | display: grid; 111 | grid-template-columns: repeat(2, minmax(auto, 450px)); 112 | justify-content: center; 113 | row-gap: 10px; 114 | column-gap: 50px; 115 | } 116 | 117 | .curriculum-grid-item { 118 | display: flex; 119 | align-items: center; 120 | } 121 | 122 | .curriculum-grid-item img { 123 | width: 50px; 124 | margin-right: 1rem; 125 | } 126 | 127 | .section-accent { 128 | background-color: #0AF; 129 | padding: 1.5rem; 130 | display: flex; 131 | flex-direction: column; 132 | align-items: center; 133 | } 134 | 135 | .free-title { 136 | color: white; 137 | margin: 0; 138 | font-size: 2.5rem; 139 | text-transform: uppercase; 140 | } 141 | 142 | .free-sub-title { 143 | color: white; 144 | max-width: 300px; 145 | } 146 | 147 | .form { 148 | max-width: 900px; 149 | margin: 0 auto; 150 | } 151 | 152 | .form label { 153 | color: black; 154 | font-weight: bold; 155 | } 156 | 157 | .form input, 158 | .form textarea { 159 | width: 100%; 160 | margin-top: .25rem; 161 | margin-bottom: .75rem; 162 | outline: none; 163 | border: 1px solid #1B2522; 164 | border-radius: .3em; 165 | padding: .5em; 166 | color: inherit; 167 | font-family: inherit; 168 | } 169 | 170 | .form textarea { 171 | resize: vertical; 172 | min-height: 75px; 173 | max-height: 200px; 174 | } 175 | 176 | .form input:focus, 177 | .form textarea:focus { 178 | border-color: #0AF; 179 | } 180 | 181 | .btn-container { 182 | text-align: end; 183 | } 184 | 185 | .btn-square { 186 | border-radius: .3em; 187 | } -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/arrow_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/database_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/edit_page_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/header_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/32-bootcamp-landing-page/before/img/header_image.jpg -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/html_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/node_js_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/react_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/vscode_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /32-bootcamp-landing-page/before/img/wds_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/32-bootcamp-landing-page/before/img/wds_logo.png -------------------------------------------------------------------------------- /35-button-component-library-upgrades/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Button Library 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /35-button-component-library-upgrades/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .btn { 6 | --background-hue: 0; 7 | --background-saturation: 0%; 8 | --initial-background-lightness: 90%; 9 | --background-lightness: var(--initial-background-lightness); 10 | --border-lightness: calc(var(--initial-background-lightness) - 20%); 11 | 12 | background-color: hsl( 13 | var(--background-hue), 14 | var(--background-saturation), 15 | var(--background-lightness) 16 | ); 17 | border: 1px solid hsl( 18 | var(--background-hue), 19 | var(--background-saturation), 20 | var(--border-lightness) 21 | ); 22 | outline: none; 23 | cursor: pointer; 24 | padding: .5em 1em; 25 | border-radius: .3em; 26 | } 27 | 28 | .btn:hover, .btn:focus { 29 | --background-lightness: calc(var(--initial-background-lightness) - 10%); 30 | box-shadow: 0 0 5px 0 hsl( 31 | var(--background-hue), 32 | var(--background-saturation), 33 | var(--border-lightness) 34 | ); 35 | } 36 | 37 | .btn.btn-primary { 38 | --background-hue: 271; 39 | --background-saturation: 70%; 40 | --initial-background-lightness: 50%; 41 | color: white; 42 | } 43 | 44 | .btn.btn-accent { 45 | --background-hue: 200; 46 | --background-saturation: 100%; 47 | --initial-background-lightness: 40%; 48 | color: white; 49 | } 50 | 51 | .btn.btn-danger { 52 | --background-hue: 0; 53 | --background-saturation: 60%; 54 | --initial-background-lightness: 50%; 55 | color: white; 56 | } 57 | 58 | .btn.btn-large { 59 | font-size: 1.25rem; 60 | } 61 | 62 | .btn.btn-small { 63 | font-size: .75rem; 64 | } 65 | 66 | .btn.btn-pill { 67 | border-radius: 1000000px; 68 | } 69 | 70 | .btn.btn-custom { 71 | background: linear-gradient(to right, hsl(271, 70%, 50%), hsl(200, 100%, 40%)); 72 | color: white; 73 | border-color: #222; 74 | } 75 | 76 | .btn.btn-custom:hover, .btn.btn-custom:focus { 77 | background: linear-gradient(to right, hsl(271, 70%, 40%), hsl(200, 100%, 30%)); 78 | border-color: black; 79 | box-shadow: 0 0 5px 0 black; 80 | } -------------------------------------------------------------------------------- /35-button-component-library-upgrades/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Button Library 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /35-button-component-library-upgrades/before/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | .btn { 6 | background-color: hsl(0, 0%, 90%); 7 | border: 1px solid hsl(0, 0%, 70%); 8 | outline: none; 9 | cursor: pointer; 10 | padding: .5em 1em; 11 | border-radius: .3em; 12 | } 13 | 14 | .btn:hover, .btn:focus { 15 | background-color: hsl(0, 0%, 80%); 16 | box-shadow: 0 0 5px 0 hsl(0, 0%, 70%); 17 | } 18 | 19 | .btn.btn-primary { 20 | background-color: hsl(271, 70%, 50%); 21 | border-color: hsl(271, 70%, 30%); 22 | color: white; 23 | } 24 | 25 | .btn.btn-primary:hover, .btn.btn-primary:focus { 26 | background-color: hsl(271, 70%, 40%); 27 | box-shadow: 0 0 5px 0 hsl(271, 70%, 30%); 28 | } 29 | 30 | .btn.btn-accent { 31 | background-color: hsl(200, 100%, 40%); 32 | border-color: hsl(200, 100%, 20%); 33 | color: white; 34 | } 35 | 36 | .btn.btn-accent:hover, .btn.btn-accent:focus { 37 | background-color: hsl(200, 100%, 30%); 38 | box-shadow: 0 0 5px 0 hsl(200, 100%, 20%); 39 | } 40 | 41 | .btn.btn-danger { 42 | background-color: hsl(0, 60%, 50%); 43 | border-color: hsl(0, 60%, 30%); 44 | color: white; 45 | } 46 | 47 | .btn.btn-danger:hover, .btn.btn-danger:focus { 48 | background-color: hsl(0, 60%, 40%); 49 | box-shadow: 0 0 5px 0 hsl(0, 60%, 30%); 50 | } 51 | 52 | .btn.btn-large { 53 | font-size: 1.25rem; 54 | } 55 | 56 | .btn.btn-small { 57 | font-size: .75rem; 58 | } 59 | 60 | .btn.btn-pill { 61 | border-radius: 1000000px; 62 | } 63 | 64 | .btn.btn-custom { 65 | background: linear-gradient(to right, hsl(271, 70%, 50%), hsl(200, 100%, 40%)); 66 | color: white; 67 | border-color: #222; 68 | } 69 | 70 | .btn.btn-custom:hover, .btn.btn-custom:focus { 71 | background: linear-gradient(to right, hsl(271, 70%, 40%), hsl(200, 100%, 30%)); 72 | border-color: black; 73 | box-shadow: 0 0 5px 0 black; 74 | } -------------------------------------------------------------------------------- /36-37-input-component-library-upgrades/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Input Library 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /36-37-input-component-library-upgrades/after/styles.css: -------------------------------------------------------------------------------- 1 | input { 2 | margin: .25rem; 3 | } 4 | 5 | .input { 6 | --border-color: #AAA; 7 | 8 | border: 1px solid var(--border-color); 9 | outline: none; 10 | font-size: inherit; 11 | padding: .5em; 12 | border-radius: .2em; 13 | } 14 | 15 | .input:focus { 16 | --border-color: #0AF; 17 | box-shadow: 0 0 5px 0 var(--border-color); 18 | } 19 | 20 | .input.input-success { 21 | --border-color: #27AE60; 22 | } 23 | 24 | .input.input-success:focus { 25 | --border-color: #0F0; 26 | } 27 | 28 | .input.input-error { 29 | --border-color: #EB5757; 30 | } 31 | 32 | .input.input-error:focus { 33 | --border-color: #F00; 34 | } 35 | 36 | .input.input-large { 37 | font-size: 1.25rem; 38 | } 39 | 40 | .input.input-small { 41 | font-size: .75rem; 42 | } 43 | 44 | .input:disabled { 45 | background-color: #EAEAEA; 46 | } -------------------------------------------------------------------------------- /36-37-input-component-library-upgrades/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Input Library 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /36-37-input-component-library-upgrades/before/styles.css: -------------------------------------------------------------------------------- 1 | input { 2 | margin: .25rem; 3 | } 4 | 5 | .input { 6 | border: 1px solid #AAA; 7 | outline: none; 8 | font-size: inherit; 9 | padding: .5em; 10 | border-radius: .2em; 11 | } 12 | 13 | .input:focus { 14 | border-color: #0AF; 15 | box-shadow: 0 0 5px 0 #0AF; 16 | } 17 | 18 | .input.input-success { 19 | border-color: #27AE60; 20 | } 21 | 22 | .input.input-success:focus { 23 | border-color: #0F0; 24 | box-shadow: 0 0 5px 0 #0F0; 25 | } 26 | 27 | .input.input-error { 28 | border-color: #EB5757; 29 | } 30 | 31 | .input.input-error:focus { 32 | border-color: #F00; 33 | box-shadow: 0 0 5px 0 #F00; 34 | } 35 | 36 | .input.input-large { 37 | font-size: 1.25rem; 38 | } 39 | 40 | .input.input-small { 41 | font-size: .75rem; 42 | } 43 | 44 | .input:disabled { 45 | background-color: #EAEAEA; 46 | } -------------------------------------------------------------------------------- /40-custom-checkbox/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Custom Checkbox 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /40-custom-checkbox/after/styles.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box; 3 | } 4 | 5 | .custom-checkbox + label { 6 | display: flex; 7 | align-items: center; 8 | cursor: pointer; 9 | } 10 | 11 | .custom-checkbox { 12 | position: absolute; 13 | left: -9999px; 14 | opacity: 0; 15 | } 16 | 17 | .custom-checkbox + label::before { 18 | content: ''; 19 | width: 1.1em; 20 | height: 1.1em; 21 | margin-right: .5em; 22 | border-radius: .15em; 23 | border: .05em solid black; 24 | } 25 | 26 | .custom-checkbox + label:hover::before { 27 | background-color: #0AF; 28 | } 29 | 30 | .custom-checkbox:focus + label::before { 31 | box-shadow: 0 0 20px 0 black; 32 | } 33 | 34 | .custom-checkbox:checked + label::before { 35 | content: '✔'; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | background-color: #069; 40 | color: white; 41 | } 42 | 43 | .custom-checkbox:disabled + label { 44 | color: #AAA; 45 | cursor: not-allowed; 46 | } 47 | 48 | .custom-checkbox:disabled + label::before { 49 | background-color: #CCC; 50 | border-color: #999; 51 | } -------------------------------------------------------------------------------- /40-custom-checkbox/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Custom Checkbox 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /41-tooltip/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltips 8 | 9 | 10 | 11 | Hover me for more information 12 | 13 | -------------------------------------------------------------------------------- /41-tooltip/after/styles.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box 3 | } 4 | 5 | body { 6 | margin-top: 100px; 7 | } 8 | 9 | [data-tooltip] { 10 | position: relative; 11 | } 12 | 13 | [data-tooltip]::before, 14 | [data-tooltip]::after { 15 | --tooltip-color: #333; 16 | --arrow-size: .5rem; 17 | 18 | position: absolute; 19 | left: 50%; 20 | transform: translate(-50%, var(--translate-y)); 21 | } 22 | 23 | [data-tooltip]:hover::before { 24 | --translate-y: calc(-100% - var(--arrow-size)); 25 | 26 | content: attr(data-tooltip); 27 | background-color: var(--tooltip-color); 28 | color: white; 29 | padding: .5em; 30 | border-radius: .3em; 31 | width: max-content; 32 | max-width: 100%; 33 | text-align: center; 34 | } 35 | 36 | [data-tooltip]:hover::after { 37 | --translate-y: calc(-1 * var(--arrow-size)); 38 | 39 | content: ''; 40 | border: var(--arrow-size) solid transparent; 41 | border-top-color: var(--tooltip-color); 42 | } -------------------------------------------------------------------------------- /41-tooltip/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltips 8 | 9 | 10 | Hover me for more information 11 | 12 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/arrow_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/database_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/edit_page_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/header_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/48-bootcamp-pricing-upgrade/after/img/header_image.jpg -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/html_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/node_js_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/react_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/vscode_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/img/wds_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/48-bootcamp-pricing-upgrade/after/img/wds_logo.png -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | WDS Bootcamp 10 | 11 | 12 |
13 | 21 |

WDS Bootcamp

22 | From No Stack To Full Stack 23 | Learn More 24 | Scroll Down Icon 25 |
26 |
27 |
28 |

Curriculum

29 |
30 |
31 | HTML 5 Icon 32 |

Start with the basics by learning HTML/CSS to build your first website

33 |
34 |
35 | Node JS Icon 36 |

Build interactive web applications with the world’s most popular backend

37 |
38 |
39 | Visual Studio Code Icon 40 |

Use the latest technology for editing and creating amazing web applications

41 |
42 |
43 | Database Icon 44 |

Manage application data by learning SQL and NoSQL database architecture

45 |
46 |
47 | Web Page Edit Icon 48 |

Create stunning designs by using modern design tools like Figma and Sketch

49 |
50 |
51 | React Icon 52 |

Use the most popular frontend framework to create modern PWAs

53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
Basic
61 |
$10
62 |
63 |
64 |
4 Videos Per Month
65 |
1 Project Based Video Per Month
66 |
Weekly Live Streams
67 |
24/7 Email Support
68 |
24/7 Phone Support
69 |
1 Project Code Review Per Month
70 |
71 |
72 |
73 |
74 |
Preferred
75 |
$25
76 |
77 |
78 |
6 Videos Per Month
79 |
2 Project Based Video Per Month
80 |
Weekly Live Streams
81 |
24/7 Email Support
82 |
24/7 Phone Support
83 |
1 Project Code Review Per Month
84 |
85 |
86 |
87 |
88 |
Pro
89 |
$50
90 |
91 |
92 |
8 Videos Per Month
93 |
4 Project Based Video Per Month
94 |
Weekly Live Streams
95 |
24/7 Email Support
96 |
24/7 Phone Support
97 |
1 Project Code Review Per Month
98 |
99 |
100 |
101 |
102 |
103 |

Contact

104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 |
112 | 113 |
114 |
115 |
116 |
117 | 127 | 128 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: Montserrat, sans-serif; 8 | color: #1B2522; 9 | } 10 | 11 | .full-screen-header { 12 | height: 100vh; 13 | background-image: url('img/header_image.jpg'); 14 | background-size: cover; 15 | background-position-x: 40%; 16 | background-position-y: center; 17 | 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: center; 21 | align-items: center; 22 | 23 | color: white; 24 | position: relative; 25 | } 26 | 27 | .nav { 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | background-color: #1B2522; 32 | padding: .5rem 1rem; 33 | } 34 | 35 | .nav-top { 36 | position: fixed; 37 | top: 0; 38 | left: 0; 39 | right: 0; 40 | z-index: 1; 41 | } 42 | 43 | .logo { 44 | width: 50px; 45 | } 46 | 47 | .nav-list { 48 | margin: 0; 49 | padding: 0; 50 | display: flex; 51 | list-style-type: none; 52 | } 53 | 54 | .nav-list a { 55 | text-decoration: none; 56 | margin-left: 1rem; 57 | color: white; 58 | } 59 | 60 | .nav-list a:hover { 61 | color: #CCC; 62 | } 63 | 64 | .title { 65 | font-size: 3rem; 66 | margin: 0; 67 | } 68 | 69 | .sub-title { 70 | font-size: 1.5rem; 71 | margin-top: .3rem; 72 | margin-bottom: 1rem; 73 | } 74 | 75 | .btn { 76 | background-color: hsl(200, 100%, 50%); 77 | color: white; 78 | border-radius: 10000px; 79 | padding: .25em 1em; 80 | text-decoration: none; 81 | border: none; 82 | cursor: pointer; 83 | font-size: inherit; 84 | } 85 | 86 | .btn:hover, 87 | .btn:focus { 88 | background-color: hsl(200, 100%, 40%); 89 | } 90 | 91 | .scroll-down-icon { 92 | position: absolute; 93 | bottom: 1rem; 94 | width: 30px; 95 | } 96 | 97 | .section { 98 | padding: 2rem; 99 | } 100 | 101 | .section-title { 102 | margin: 0; 103 | margin-bottom: 2rem; 104 | font-size: 2rem; 105 | text-align: center; 106 | color: black; 107 | } 108 | 109 | .curriculum-grid { 110 | display: grid; 111 | grid-template-columns: repeat(2, minmax(auto, 450px)); 112 | justify-content: center; 113 | row-gap: 10px; 114 | column-gap: 50px; 115 | } 116 | 117 | .curriculum-grid-item { 118 | display: flex; 119 | align-items: center; 120 | } 121 | 122 | .curriculum-grid-item img { 123 | width: 50px; 124 | margin-right: 1rem; 125 | } 126 | 127 | .section-accent { 128 | background-color: #0AF; 129 | } 130 | 131 | .form { 132 | max-width: 900px; 133 | margin: 0 auto; 134 | } 135 | 136 | .form label { 137 | color: black; 138 | font-weight: bold; 139 | } 140 | 141 | .form input, 142 | .form textarea { 143 | width: 100%; 144 | margin-top: .25rem; 145 | margin-bottom: .75rem; 146 | outline: none; 147 | border: 1px solid #1B2522; 148 | border-radius: .3em; 149 | padding: .5em; 150 | color: inherit; 151 | font-family: inherit; 152 | } 153 | 154 | .form textarea { 155 | resize: vertical; 156 | min-height: 75px; 157 | max-height: 200px; 158 | } 159 | 160 | .form input:focus, 161 | .form textarea:focus { 162 | border-color: #0AF; 163 | } 164 | 165 | .btn-container { 166 | text-align: end; 167 | } 168 | 169 | .btn-square { 170 | border-radius: .3em; 171 | } 172 | 173 | 174 | 175 | 176 | .pricing-cards-container { 177 | display: flex; 178 | justify-content: center; 179 | } 180 | 181 | .pricing-card { 182 | padding: 1rem; 183 | background-color: #DCF4FF; 184 | border: 1px solid black; 185 | border-radius: .3em; 186 | margin: 1rem 0; 187 | } 188 | 189 | .pricing-card.accent { 190 | background-color: white; 191 | margin: 0; 192 | } 193 | 194 | .pricing-card:first-child { 195 | border-top-right-radius: 0; 196 | border-bottom-right-radius: 0; 197 | border-right: none; 198 | } 199 | 200 | .pricing-card:last-child { 201 | border-top-left-radius: 0; 202 | border-bottom-left-radius: 0; 203 | border-left: none; 204 | } 205 | 206 | .price-header { 207 | text-align: center; 208 | margin-bottom: 1.5rem; 209 | } 210 | 211 | .plan-name { 212 | font-size: 1.5rem; 213 | margin-bottom: .5rem; 214 | } 215 | 216 | .plan-price { 217 | font-size: 2rem; 218 | font-weight: bold; 219 | } 220 | 221 | .plan-price::after { 222 | content: '/mo'; 223 | font-size: .75rem; 224 | color: #777; 225 | } 226 | 227 | .feature { 228 | margin-bottom: .5rem; 229 | } 230 | 231 | .feature.inactive { 232 | color: #777; 233 | text-decoration: line-through; 234 | } 235 | 236 | .feature:last-child { 237 | margin-bottom: 0; 238 | } 239 | 240 | @media (max-width: 700px) { 241 | .curriculum-grid { 242 | grid-template-columns: minmax(auto, 450px); 243 | row-gap: 30px; 244 | } 245 | 246 | .full-screen-header { 247 | background-position-x: 65%; 248 | } 249 | 250 | .pricing-cards-container { 251 | flex-wrap: wrap; 252 | } 253 | 254 | .pricing-card, 255 | .pricing-card.accent { 256 | width: 100%; 257 | margin: 0; 258 | margin-bottom: 1rem; 259 | } 260 | 261 | .pricing-card:first-child, 262 | .pricing-card:last-child { 263 | border-radius: .3em; 264 | border-right: 1px solid black; 265 | border-left: 1px solid black; 266 | } 267 | 268 | .pricing-card:last-child { 269 | margin-bottom: 0; 270 | } 271 | 272 | .feature { 273 | text-align: center; 274 | } 275 | 276 | .feature.inactive { 277 | display: none; 278 | } 279 | } -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/arrow_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/database_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/edit_page_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/header_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/48-bootcamp-pricing-upgrade/before/img/header_image.jpg -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/html_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/node_js_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/react_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/vscode_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/img/wds_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/48-bootcamp-pricing-upgrade/before/img/wds_logo.png -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | WDS Bootcamp 9 | 10 | 11 |
12 | 20 |

WDS Bootcamp

21 | From No Stack To Full Stack 22 | Learn More 23 | Scroll Down Icon 24 |
25 |
26 |
27 |

Curriculum

28 |
29 |
30 | HTML 5 Icon 31 |

Start with the basics by learning HTML/CSS to build your first website

32 |
33 |
34 | Node JS Icon 35 |

Build interactive web applications with the world’s most popular backend

36 |
37 |
38 | Visual Studio Code Icon 39 |

Use the latest technology for editing and creating amazing web applications

40 |
41 |
42 | Database Icon 43 |

Manage application data by learning SQL and NoSQL database architecture

44 |
45 |
46 | Web Page Edit Icon 47 |

Create stunning designs by using modern design tools like Figma and Sketch

48 |
49 |
50 | React Icon 51 |

Use the most popular frontend framework to create modern PWAs

52 |
53 |
54 |
55 |
56 |

Free

57 |

That’s right. All of this amazing content is available completely for free on YouTube!

58 |
59 |
60 |

Contact

61 |
62 | 63 | 64 | 65 | 66 | 67 | 68 |
69 | 70 |
71 |
72 |
73 |
74 | 84 | 85 | -------------------------------------------------------------------------------- /48-bootcamp-pricing-upgrade/before/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: Cambria; 8 | color: #1B2522; 9 | } 10 | 11 | .full-screen-header { 12 | height: 100vh; 13 | background-image: url('img/header_image.jpg'); 14 | background-size: cover; 15 | background-position-x: 40%; 16 | background-position-y: center; 17 | 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: center; 21 | align-items: center; 22 | 23 | color: white; 24 | position: relative; 25 | } 26 | 27 | .nav { 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | background-color: #1B2522; 32 | padding: .5rem 1rem; 33 | } 34 | 35 | .nav-top { 36 | position: fixed; 37 | top: 0; 38 | left: 0; 39 | right: 0; 40 | z-index: 1; 41 | } 42 | 43 | .logo { 44 | width: 50px; 45 | } 46 | 47 | .nav-list { 48 | margin: 0; 49 | padding: 0; 50 | display: flex; 51 | list-style-type: none; 52 | } 53 | 54 | .nav-list a { 55 | text-decoration: none; 56 | margin-left: 1rem; 57 | color: white; 58 | } 59 | 60 | .nav-list a:hover { 61 | color: #CCC; 62 | } 63 | 64 | .title { 65 | font-size: 3rem; 66 | margin: 0; 67 | } 68 | 69 | .sub-title { 70 | font-size: 1.5rem; 71 | margin-top: .3rem; 72 | margin-bottom: 1rem; 73 | } 74 | 75 | .btn { 76 | background-color: hsl(200, 100%, 50%); 77 | color: white; 78 | border-radius: 10000px; 79 | padding: .25em 1em; 80 | text-decoration: none; 81 | border: none; 82 | cursor: pointer; 83 | font-size: inherit; 84 | } 85 | 86 | .btn:hover, 87 | .btn:focus { 88 | background-color: hsl(200, 100%, 40%); 89 | } 90 | 91 | .scroll-down-icon { 92 | position: absolute; 93 | bottom: 1rem; 94 | width: 30px; 95 | } 96 | 97 | .section { 98 | padding: 2rem; 99 | } 100 | 101 | .section-title { 102 | margin: 0; 103 | margin-bottom: 2rem; 104 | font-size: 2rem; 105 | text-align: center; 106 | color: black; 107 | } 108 | 109 | .curriculum-grid { 110 | display: grid; 111 | grid-template-columns: repeat(2, minmax(auto, 450px)); 112 | justify-content: center; 113 | row-gap: 10px; 114 | column-gap: 50px; 115 | } 116 | 117 | .curriculum-grid-item { 118 | display: flex; 119 | align-items: center; 120 | } 121 | 122 | .curriculum-grid-item img { 123 | width: 50px; 124 | margin-right: 1rem; 125 | } 126 | 127 | .section-accent { 128 | background-color: #0AF; 129 | padding: 1.5rem; 130 | display: flex; 131 | flex-direction: column; 132 | align-items: center; 133 | } 134 | 135 | .free-title { 136 | color: white; 137 | margin: 0; 138 | font-size: 2.5rem; 139 | text-transform: uppercase; 140 | } 141 | 142 | .free-sub-title { 143 | color: white; 144 | max-width: 300px; 145 | } 146 | 147 | .form { 148 | max-width: 900px; 149 | margin: 0 auto; 150 | } 151 | 152 | .form label { 153 | color: black; 154 | font-weight: bold; 155 | } 156 | 157 | .form input, 158 | .form textarea { 159 | width: 100%; 160 | margin-top: .25rem; 161 | margin-bottom: .75rem; 162 | outline: none; 163 | border: 1px solid #1B2522; 164 | border-radius: .3em; 165 | padding: .5em; 166 | color: inherit; 167 | font-family: inherit; 168 | } 169 | 170 | .form textarea { 171 | resize: vertical; 172 | min-height: 75px; 173 | max-height: 200px; 174 | } 175 | 176 | .form input:focus, 177 | .form textarea:focus { 178 | border-color: #0AF; 179 | } 180 | 181 | .btn-container { 182 | text-align: end; 183 | } 184 | 185 | .btn-square { 186 | border-radius: .3em; 187 | } -------------------------------------------------------------------------------- /50-51-button-transition/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Button Animations 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /50-51-button-transition/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | min-height: 100vh; 11 | flex-direction: column; 12 | } 13 | 14 | .btn { 15 | margin: 1rem; 16 | background-color: hsl(200, 100%, 50%); 17 | border: none; 18 | outline: none; 19 | color: white; 20 | padding: .5em 1em; 21 | border-radius: .3em; 22 | cursor: pointer; 23 | } 24 | 25 | .btn-hide { 26 | opacity: .7; 27 | transition: opacity 500ms; 28 | } 29 | 30 | .btn-hide:hover { 31 | opacity: 1; 32 | } 33 | 34 | .btn-hide:focus { 35 | opacity: 0; 36 | } 37 | 38 | .btn-color { 39 | transition-property: background-color, color; 40 | transition-duration: 500ms; 41 | } 42 | 43 | .btn-color:focus { 44 | color: #333; 45 | background-color: hsl(20, 100%, 50%); 46 | } -------------------------------------------------------------------------------- /50-51-button-transition/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Animations 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /54-advanced-button-animation/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Blink Grow 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /54-advanced-button-animation/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | min-height: 100vh; 10 | margin: 0; 11 | overflow: hidden; 12 | } 13 | 14 | .btn { 15 | color: white; 16 | background-color: hsl(200, 100%, 50%); 17 | border: none; 18 | outline: none; 19 | padding: .5em 1em; 20 | border-radius: .3em; 21 | cursor: pointer; 22 | } 23 | 24 | .btn:hover { 25 | animation: blink 500ms ease-in-out infinite, grow 1s ease-in-out infinite; 26 | } 27 | 28 | .btn:focus { 29 | animation: fly-away 500ms ease-in-out forwards; 30 | } 31 | 32 | @keyframes blink { 33 | 0% { 34 | opacity: 1; 35 | } 36 | 37 | 50% { 38 | opacity: .75; 39 | } 40 | 41 | 100% { 42 | opacity: 1; 43 | } 44 | } 45 | 46 | @keyframes grow { 47 | 0% { 48 | transform: scale(1); 49 | } 50 | 51 | 50% { 52 | transform: scale(1.1); 53 | } 54 | 55 | 100% { 56 | transform: scale(1); 57 | } 58 | } 59 | 60 | @keyframes fly-away { 61 | 33% { 62 | transform: translate(100px, 50px) rotate(30deg) scale(.9); 63 | } 64 | 65 | 66% { 66 | transform: translate(0, 25px) rotate(90deg) scale(.75); 67 | } 68 | 69 | 100% { 70 | transform: translate(-100px, -75px) rotate(200deg) scale(.25); 71 | } 72 | } -------------------------------------------------------------------------------- /54-advanced-button-animation/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Button Blink Grow 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /55-56-loading-text-animation/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loading Animation 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /55-56-loading-text-animation/after/styles.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | min-height: 100vh; 10 | margin: 0; 11 | } 12 | 13 | .btn { 14 | background-color: hsl(200, 100%, 50%); 15 | border: none; 16 | outline: none; 17 | color: white; 18 | padding: .5em 1em; 19 | border-radius: .3em; 20 | cursor: pointer; 21 | position: relative; 22 | } 23 | 24 | .btn-load:focus::after { 25 | --default-transform: translateY(200%); 26 | 27 | content: 'Loading'; 28 | position: absolute; 29 | color: black; 30 | transform: var(--default-transform); 31 | transform-origin: center; 32 | left: 0; 33 | bottom: 0; 34 | animation: loading 2s linear forwards; 35 | } 36 | 37 | @keyframes loading { 38 | 0% { 39 | opacity: 1; 40 | } 41 | 42 | 10% { 43 | content: 'Loading.'; 44 | } 45 | 46 | 20% { 47 | content: 'Loading..'; 48 | } 49 | 50 | 25% { 51 | transform: var(--default-transform) rotate(30deg); 52 | } 53 | 54 | 30% { 55 | content: 'Loading...'; 56 | } 57 | 58 | 40% { 59 | content: 'Loading..'; 60 | } 61 | 62 | 50% { 63 | content: 'Loading.'; 64 | opacity: .6; 65 | transform: var(--default-transform) rotate(0); 66 | } 67 | 68 | 60% { 69 | content: 'Loading'; 70 | } 71 | 72 | 70% { 73 | content: 'Loading.'; 74 | } 75 | 76 | 75% { 77 | transform: var(--default-transform) rotate(-30deg); 78 | } 79 | 80 | 80% { 81 | content: 'Loading..'; 82 | } 83 | 84 | 90% { 85 | content: 'Loading...'; 86 | } 87 | 88 | 100% { 89 | content: 'Loaded'; 90 | opacity: 1; 91 | transform: var(--default-transform) rotate(0); 92 | } 93 | } -------------------------------------------------------------------------------- /55-56-loading-text-animation/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Loading Animation 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /57-tooltip-animation/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltips 8 | 9 | 10 | 11 | Hover me for more information 12 | 13 | -------------------------------------------------------------------------------- /57-tooltip-animation/after/styles.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box 3 | } 4 | 5 | body { 6 | margin-top: 100px; 7 | } 8 | 9 | [data-tooltip] { 10 | position: relative; 11 | } 12 | 13 | [data-tooltip]::before, 14 | [data-tooltip]::after { 15 | --tooltip-color: #333; 16 | --arrow-size: .5rem; 17 | --scale: 0; 18 | 19 | position: absolute; 20 | left: 50%; 21 | transform: translate(-50%, var(--translate-y)) scale(var(--scale)); 22 | 23 | transition: transform 100ms; 24 | transition-timing-function: linear; 25 | } 26 | 27 | [data-tooltip]:hover::before, 28 | [data-tooltip]:hover::after { 29 | --scale: 1; 30 | 31 | transition-timing-function: cubic-bezier(0.25, 0.1, 0.45, 1.93); 32 | } 33 | 34 | [data-tooltip]::before { 35 | --translate-y: calc(-100% - var(--arrow-size)); 36 | 37 | content: attr(data-tooltip); 38 | background-color: var(--tooltip-color); 39 | color: white; 40 | padding: .5em; 41 | border-radius: .3em; 42 | width: max-content; 43 | max-width: 100%; 44 | text-align: center; 45 | 46 | transform-origin: bottom center; 47 | } 48 | 49 | [data-tooltip]::after { 50 | --translate-y: calc(-1 * var(--arrow-size)); 51 | 52 | content: ''; 53 | border: var(--arrow-size) solid transparent; 54 | border-top-color: var(--tooltip-color); 55 | 56 | transform-origin: top center; 57 | } -------------------------------------------------------------------------------- /57-tooltip-animation/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Tooltips 8 | 9 | 10 | 11 | Hover me for more information 12 | 13 | -------------------------------------------------------------------------------- /57-tooltip-animation/before/styles.css: -------------------------------------------------------------------------------- 1 | *, *::before, *::after { 2 | box-sizing: border-box 3 | } 4 | 5 | body { 6 | margin-top: 100px; 7 | } 8 | 9 | [data-tooltip] { 10 | position: relative; 11 | } 12 | 13 | [data-tooltip]::before, 14 | [data-tooltip]::after { 15 | --tooltip-color: #333; 16 | --arrow-size: .5rem; 17 | 18 | position: absolute; 19 | left: 50%; 20 | transform: translate(-50%, var(--translate-y)); 21 | } 22 | 23 | [data-tooltip]:hover::before { 24 | --translate-y: calc(-100% - var(--arrow-size)); 25 | 26 | content: attr(data-tooltip); 27 | background-color: var(--tooltip-color); 28 | color: white; 29 | padding: .5em; 30 | border-radius: .3em; 31 | width: max-content; 32 | max-width: 100%; 33 | text-align: center; 34 | } 35 | 36 | [data-tooltip]:hover::after { 37 | --translate-y: calc(-1 * var(--arrow-size)); 38 | 39 | content: ''; 40 | border: var(--arrow-size) solid transparent; 41 | border-top-color: var(--tooltip-color); 42 | } -------------------------------------------------------------------------------- /59-3d-cube/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cube 9 | 10 | 11 |
12 |
Front
13 |
Left
14 |
Right
15 |
Back
16 |
Top
17 |
Bottom
18 |
19 | 20 | -------------------------------------------------------------------------------- /59-3d-cube/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | min-height: 100vh; 10 | margin: 0; 11 | perspective: 400px; 12 | } 13 | 14 | .cube { 15 | display: flex; 16 | justify-content: center; 17 | align-items: center; 18 | transform-style: preserve-3d; 19 | } 20 | 21 | .cube:hover { 22 | animation: spin 5s linear infinite; 23 | } 24 | 25 | .side { 26 | --size: 75px; 27 | 28 | display: flex; 29 | justify-content: center; 30 | align-items: center; 31 | width: var(--size); 32 | height: var(--size); 33 | position: absolute; 34 | background-color: hsla(200, 100%, 50%, .5); 35 | border: 1px solid hsla(200, 100%, 10%, .5); 36 | transform: rotateY(var(--rotate-y, 0)) rotateX(var(--rotate-x, 0)) translateZ(calc(var(--size) / 2)); 37 | } 38 | 39 | .right { 40 | --rotate-y: 90deg; 41 | } 42 | 43 | .left { 44 | --rotate-y: -90deg; 45 | } 46 | 47 | .top { 48 | --rotate-x: 90deg; 49 | } 50 | 51 | .bottom { 52 | --rotate-x: -90deg; 53 | } 54 | 55 | .back { 56 | --rotate-y: 180deg; 57 | } 58 | 59 | @keyframes spin { 60 | 0% { 61 | transform: rotateX(0) rotateY(0); 62 | } 63 | 64 | 100% { 65 | transform: rotateX(360deg) rotateY(360deg); 66 | } 67 | } -------------------------------------------------------------------------------- /59-3d-cube/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Cube 8 | 9 | 10 |
11 |
Front
12 |
Left
13 |
Right
14 |
Back
15 |
Top
16 |
Bottom
17 |
18 | 19 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/arrow_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/database_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/edit_page_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/header_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/60-bootcamp-animations/after/img/header_image.jpg -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/html_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/node_js_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/react_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/vscode_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/img/wds_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/60-bootcamp-animations/after/img/wds_logo.png -------------------------------------------------------------------------------- /60-bootcamp-animations/after/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | WDS Bootcamp 10 | 11 | 12 |
13 | 21 |

WDS Bootcamp

22 | From No Stack To Full Stack 23 | Learn More 24 | Scroll Down Icon 25 |
26 |
27 |
28 |

Curriculum

29 |
30 |
31 | HTML 5 Icon 32 |

Start with the basics by learning HTML/CSS to build your first website

33 |
34 |
35 | Node JS Icon 36 |

Build interactive web applications with the world’s most popular backend

37 |
38 |
39 | Visual Studio Code Icon 40 |

Use the latest technology for editing and creating amazing web applications

41 |
42 |
43 | Database Icon 44 |

Manage application data by learning SQL and NoSQL database architecture

45 |
46 |
47 | Web Page Edit Icon 48 |

Create stunning designs by using modern design tools like Figma and Sketch

49 |
50 |
51 | React Icon 52 |

Use the most popular frontend framework to create modern PWAs

53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
Basic
61 |
$10
62 |
63 |
64 |
4 Videos Per Month
65 |
1 Project Based Video Per Month
66 |
Weekly Live Streams
67 |
24/7 Email Support
68 |
24/7 Phone Support
69 |
1 Project Code Review Per Month
70 |
71 |
72 |
73 |
74 |
Preferred
75 |
$25
76 |
77 |
78 |
6 Videos Per Month
79 |
2 Project Based Video Per Month
80 |
Weekly Live Streams
81 |
24/7 Email Support
82 |
24/7 Phone Support
83 |
1 Project Code Review Per Month
84 |
85 |
86 |
87 |
88 |
Pro
89 |
$50
90 |
91 |
92 |
8 Videos Per Month
93 |
4 Project Based Video Per Month
94 |
Weekly Live Streams
95 |
24/7 Email Support
96 |
24/7 Phone Support
97 |
1 Project Code Review Per Month
98 |
99 |
100 |
101 |
102 |
103 |

Contact

104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 |
112 | 113 |
114 |
115 |
116 |
117 | 127 | 128 | -------------------------------------------------------------------------------- /60-bootcamp-animations/after/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: Montserrat, sans-serif; 8 | color: #1B2522; 9 | 10 | --title-duration: 500ms; 11 | --sub-title-duration: 500ms; 12 | --nav-duration: 200ms; 13 | --btn-grow-duration: 200ms; 14 | --scroll-down-duration: 200ms; 15 | 16 | --sub-title-delay: calc(var(--title-duration) - 200ms); 17 | --nav-delay: calc(var(--sub-title-delay) + var(--sub-title-duration)); 18 | --btn-grow-delay: var(--nav-delay); 19 | --scroll-down-delay: var(--nav-delay); 20 | } 21 | 22 | .full-screen-header { 23 | height: 100vh; 24 | background-image: url('img/header_image.jpg'); 25 | background-size: cover; 26 | background-position-x: 40%; 27 | background-position-y: center; 28 | 29 | display: flex; 30 | flex-direction: column; 31 | justify-content: center; 32 | align-items: center; 33 | 34 | color: white; 35 | position: relative; 36 | overflow: hidden; 37 | } 38 | 39 | .nav { 40 | display: flex; 41 | justify-content: space-between; 42 | align-items: center; 43 | background-color: #1B2522; 44 | padding: .5rem 1rem; 45 | } 46 | 47 | .nav-top { 48 | position: fixed; 49 | top: 0; 50 | left: 0; 51 | right: 0; 52 | z-index: 1; 53 | 54 | animation: nav-enter var(--nav-duration) var(--nav-delay) backwards; 55 | } 56 | 57 | .logo { 58 | width: 50px; 59 | } 60 | 61 | .nav-list { 62 | margin: 0; 63 | padding: 0; 64 | display: flex; 65 | list-style-type: none; 66 | } 67 | 68 | .nav-list a { 69 | text-decoration: none; 70 | margin-left: 1rem; 71 | color: white; 72 | 73 | transition: color 100ms; 74 | } 75 | 76 | .nav-list a:hover { 77 | color: #CCC; 78 | } 79 | 80 | .title { 81 | font-size: 3rem; 82 | margin: 0; 83 | 84 | animation: title-enter var(--title-duration); 85 | } 86 | 87 | .sub-title { 88 | font-size: 1.5rem; 89 | margin-top: .3rem; 90 | margin-bottom: 1rem; 91 | 92 | animation: sub-title-enter var(--sub-title-duration) var(--sub-title-delay) backwards; 93 | } 94 | 95 | .btn { 96 | background-color: hsl(200, 100%, 50%); 97 | color: white; 98 | border-radius: 10000px; 99 | padding: .25em 1em; 100 | text-decoration: none; 101 | border: none; 102 | cursor: pointer; 103 | font-size: inherit; 104 | 105 | transition: 100ms; 106 | } 107 | 108 | .btn:hover, 109 | .btn:focus { 110 | background-color: hsl(200, 100%, 40%); 111 | } 112 | 113 | .scroll-down-icon { 114 | position: absolute; 115 | bottom: 1rem; 116 | width: 30px; 117 | 118 | animation: 119 | scroll-down-bounce calc(var(--scroll-down-duration) + var(--scroll-down-delay)) 1s alternate infinite linear, 120 | scroll-down-enter var(--scroll-down-duration) var(--scroll-down-delay) backwards; 121 | } 122 | 123 | .section { 124 | padding: 2rem; 125 | } 126 | 127 | .section-title { 128 | margin: 0; 129 | margin-bottom: 2rem; 130 | font-size: 2rem; 131 | text-align: center; 132 | color: black; 133 | } 134 | 135 | .curriculum-grid { 136 | display: grid; 137 | grid-template-columns: repeat(2, minmax(auto, 450px)); 138 | justify-content: center; 139 | row-gap: 10px; 140 | column-gap: 50px; 141 | } 142 | 143 | .curriculum-grid-item { 144 | display: flex; 145 | align-items: center; 146 | } 147 | 148 | .curriculum-grid-item:hover img { 149 | animation: shake 100ms; 150 | } 151 | 152 | .curriculum-grid-item img { 153 | width: 50px; 154 | margin-right: 1rem; 155 | } 156 | 157 | .section-accent { 158 | background-color: #0AF; 159 | } 160 | 161 | .form { 162 | max-width: 900px; 163 | margin: 0 auto; 164 | } 165 | 166 | .form label { 167 | color: black; 168 | font-weight: bold; 169 | } 170 | 171 | .form input, 172 | .form textarea { 173 | width: 100%; 174 | margin-top: .25rem; 175 | margin-bottom: .75rem; 176 | outline: none; 177 | border: 1px solid #1B2522; 178 | border-radius: .3em; 179 | padding: .5em; 180 | color: inherit; 181 | font-family: inherit; 182 | 183 | transition: border-color 100ms; 184 | } 185 | 186 | .form textarea { 187 | resize: vertical; 188 | min-height: 75px; 189 | max-height: 200px; 190 | } 191 | 192 | .form input:focus, 193 | .form textarea:focus { 194 | border-color: #0AF; 195 | } 196 | 197 | .btn-container { 198 | text-align: end; 199 | } 200 | 201 | .btn-square { 202 | border-radius: .3em; 203 | } 204 | 205 | 206 | 207 | 208 | .pricing-cards-container { 209 | display: flex; 210 | justify-content: center; 211 | } 212 | 213 | .pricing-card { 214 | padding: 1rem; 215 | background-color: #DCF4FF; 216 | border: 1px solid black; 217 | border-radius: .3em; 218 | margin: 1rem 0; 219 | 220 | transition: transform 100ms; 221 | } 222 | 223 | .pricing-card:hover { 224 | transform: scale(1.05); 225 | } 226 | 227 | .pricing-card.accent { 228 | background-color: white; 229 | margin: 0; 230 | } 231 | 232 | .pricing-card:first-child { 233 | border-top-right-radius: 0; 234 | border-bottom-right-radius: 0; 235 | border-right: none; 236 | transform-origin: right; 237 | } 238 | 239 | .pricing-card:last-child { 240 | border-top-left-radius: 0; 241 | border-bottom-left-radius: 0; 242 | border-left: none; 243 | transform-origin: left; 244 | } 245 | 246 | .price-header { 247 | text-align: center; 248 | margin-bottom: 1.5rem; 249 | } 250 | 251 | .plan-name { 252 | font-size: 1.5rem; 253 | margin-bottom: .5rem; 254 | } 255 | 256 | .plan-price { 257 | font-size: 2rem; 258 | font-weight: bold; 259 | } 260 | 261 | .plan-price::after { 262 | content: '/mo'; 263 | font-size: .75rem; 264 | color: #777; 265 | } 266 | 267 | .feature { 268 | margin-bottom: .5rem; 269 | } 270 | 271 | .feature.inactive { 272 | color: #777; 273 | text-decoration: line-through; 274 | } 275 | 276 | .feature:last-child { 277 | margin-bottom: 0; 278 | } 279 | 280 | 281 | .btn-grow { 282 | animation: btn-grow-enter var(--btn-grow-duration) var(--btn-grow-delay) backwards; 283 | } 284 | 285 | .btn-grow:hover { 286 | transform: scale(1.1); 287 | box-shadow: 0 2px 5px 1px black; 288 | } 289 | 290 | 291 | @keyframes scroll-down-bounce { 292 | from { 293 | transform: translateY(0); 294 | } 295 | 296 | to { 297 | transform: translateY(-10px); 298 | } 299 | } 300 | 301 | @keyframes shake { 302 | 25% { 303 | transform: rotate(5deg); 304 | } 305 | 306 | 75% { 307 | transform: rotate(-5deg); 308 | } 309 | } 310 | 311 | @keyframes title-enter { 312 | from { 313 | transform: translateX(-100vw); 314 | } 315 | } 316 | 317 | @keyframes sub-title-enter { 318 | from { 319 | transform: translateX(100vw); 320 | } 321 | } 322 | 323 | @keyframes nav-enter { 324 | from { 325 | transform: translateY(-100%); 326 | } 327 | } 328 | 329 | @keyframes btn-grow-enter { 330 | from { 331 | transform: scale(0); 332 | } 333 | } 334 | 335 | @keyframes scroll-down-enter { 336 | from { 337 | transform: scale(0) rotate(180deg); 338 | } 339 | } 340 | 341 | @media (max-width: 700px) { 342 | .curriculum-grid { 343 | grid-template-columns: minmax(auto, 450px); 344 | row-gap: 30px; 345 | } 346 | 347 | .full-screen-header { 348 | background-position-x: 65%; 349 | } 350 | 351 | .pricing-cards-container { 352 | flex-wrap: wrap; 353 | } 354 | 355 | .pricing-card, 356 | .pricing-card.accent { 357 | width: 100%; 358 | margin: 0; 359 | margin-bottom: 1rem; 360 | } 361 | 362 | .pricing-card:first-child, 363 | .pricing-card:last-child { 364 | border-radius: .3em; 365 | border-right: 1px solid black; 366 | border-left: 1px solid black; 367 | transform-origin: center; 368 | } 369 | 370 | .pricing-card:last-child { 371 | margin-bottom: 0; 372 | } 373 | 374 | .feature { 375 | text-align: center; 376 | } 377 | 378 | .feature.inactive { 379 | display: none; 380 | } 381 | } -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/arrow_down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/database_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/edit_page_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/header_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/60-bootcamp-animations/before/img/header_image.jpg -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/html_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/node_js_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/react_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/vscode_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /60-bootcamp-animations/before/img/wds_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Learn-CSS-Today/7b47930cc3d6d7f6f97cfd654e80407a76cf7d12/60-bootcamp-animations/before/img/wds_logo.png -------------------------------------------------------------------------------- /60-bootcamp-animations/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | WDS Bootcamp 10 | 11 | 12 |
13 | 21 |

WDS Bootcamp

22 | From No Stack To Full Stack 23 | Learn More 24 | Scroll Down Icon 25 |
26 |
27 |
28 |

Curriculum

29 |
30 |
31 | HTML 5 Icon 32 |

Start with the basics by learning HTML/CSS to build your first website

33 |
34 |
35 | Node JS Icon 36 |

Build interactive web applications with the world’s most popular backend

37 |
38 |
39 | Visual Studio Code Icon 40 |

Use the latest technology for editing and creating amazing web applications

41 |
42 |
43 | Database Icon 44 |

Manage application data by learning SQL and NoSQL database architecture

45 |
46 |
47 | Web Page Edit Icon 48 |

Create stunning designs by using modern design tools like Figma and Sketch

49 |
50 |
51 | React Icon 52 |

Use the most popular frontend framework to create modern PWAs

53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
Basic
61 |
$10
62 |
63 |
64 |
4 Videos Per Month
65 |
1 Project Based Video Per Month
66 |
Weekly Live Streams
67 |
24/7 Email Support
68 |
24/7 Phone Support
69 |
1 Project Code Review Per Month
70 |
71 |
72 |
73 |
74 |
Preferred
75 |
$25
76 |
77 |
78 |
6 Videos Per Month
79 |
2 Project Based Video Per Month
80 |
Weekly Live Streams
81 |
24/7 Email Support
82 |
24/7 Phone Support
83 |
1 Project Code Review Per Month
84 |
85 |
86 |
87 |
88 |
Pro
89 |
$50
90 |
91 |
92 |
8 Videos Per Month
93 |
4 Project Based Video Per Month
94 |
Weekly Live Streams
95 |
24/7 Email Support
96 |
24/7 Phone Support
97 |
1 Project Code Review Per Month
98 |
99 |
100 |
101 |
102 |
103 |

Contact

104 |
105 | 106 | 107 | 108 | 109 | 110 | 111 |
112 | 113 |
114 |
115 |
116 |
117 | 127 | 128 | -------------------------------------------------------------------------------- /60-bootcamp-animations/before/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | font-family: Montserrat, sans-serif; 8 | color: #1B2522; 9 | } 10 | 11 | .full-screen-header { 12 | height: 100vh; 13 | background-image: url('img/header_image.jpg'); 14 | background-size: cover; 15 | background-position-x: 40%; 16 | background-position-y: center; 17 | 18 | display: flex; 19 | flex-direction: column; 20 | justify-content: center; 21 | align-items: center; 22 | 23 | color: white; 24 | position: relative; 25 | } 26 | 27 | .nav { 28 | display: flex; 29 | justify-content: space-between; 30 | align-items: center; 31 | background-color: #1B2522; 32 | padding: .5rem 1rem; 33 | } 34 | 35 | .nav-top { 36 | position: fixed; 37 | top: 0; 38 | left: 0; 39 | right: 0; 40 | z-index: 1; 41 | } 42 | 43 | .logo { 44 | width: 50px; 45 | } 46 | 47 | .nav-list { 48 | margin: 0; 49 | padding: 0; 50 | display: flex; 51 | list-style-type: none; 52 | } 53 | 54 | .nav-list a { 55 | text-decoration: none; 56 | margin-left: 1rem; 57 | color: white; 58 | } 59 | 60 | .nav-list a:hover { 61 | color: #CCC; 62 | } 63 | 64 | .title { 65 | font-size: 3rem; 66 | margin: 0; 67 | } 68 | 69 | .sub-title { 70 | font-size: 1.5rem; 71 | margin-top: .3rem; 72 | margin-bottom: 1rem; 73 | } 74 | 75 | .btn { 76 | background-color: hsl(200, 100%, 50%); 77 | color: white; 78 | border-radius: 10000px; 79 | padding: .25em 1em; 80 | text-decoration: none; 81 | border: none; 82 | cursor: pointer; 83 | font-size: inherit; 84 | } 85 | 86 | .btn:hover, 87 | .btn:focus { 88 | background-color: hsl(200, 100%, 40%); 89 | } 90 | 91 | .scroll-down-icon { 92 | position: absolute; 93 | bottom: 1rem; 94 | width: 30px; 95 | } 96 | 97 | .section { 98 | padding: 2rem; 99 | } 100 | 101 | .section-title { 102 | margin: 0; 103 | margin-bottom: 2rem; 104 | font-size: 2rem; 105 | text-align: center; 106 | color: black; 107 | } 108 | 109 | .curriculum-grid { 110 | display: grid; 111 | grid-template-columns: repeat(2, minmax(auto, 450px)); 112 | justify-content: center; 113 | row-gap: 10px; 114 | column-gap: 50px; 115 | } 116 | 117 | .curriculum-grid-item { 118 | display: flex; 119 | align-items: center; 120 | } 121 | 122 | .curriculum-grid-item img { 123 | width: 50px; 124 | margin-right: 1rem; 125 | } 126 | 127 | .section-accent { 128 | background-color: #0AF; 129 | } 130 | 131 | .form { 132 | max-width: 900px; 133 | margin: 0 auto; 134 | } 135 | 136 | .form label { 137 | color: black; 138 | font-weight: bold; 139 | } 140 | 141 | .form input, 142 | .form textarea { 143 | width: 100%; 144 | margin-top: .25rem; 145 | margin-bottom: .75rem; 146 | outline: none; 147 | border: 1px solid #1B2522; 148 | border-radius: .3em; 149 | padding: .5em; 150 | color: inherit; 151 | font-family: inherit; 152 | } 153 | 154 | .form textarea { 155 | resize: vertical; 156 | min-height: 75px; 157 | max-height: 200px; 158 | } 159 | 160 | .form input:focus, 161 | .form textarea:focus { 162 | border-color: #0AF; 163 | } 164 | 165 | .btn-container { 166 | text-align: end; 167 | } 168 | 169 | .btn-square { 170 | border-radius: .3em; 171 | } 172 | 173 | 174 | 175 | 176 | .pricing-cards-container { 177 | display: flex; 178 | justify-content: center; 179 | } 180 | 181 | .pricing-card { 182 | padding: 1rem; 183 | background-color: #DCF4FF; 184 | border: 1px solid black; 185 | border-radius: .3em; 186 | margin: 1rem 0; 187 | } 188 | 189 | .pricing-card.accent { 190 | background-color: white; 191 | margin: 0; 192 | } 193 | 194 | .pricing-card:first-child { 195 | border-top-right-radius: 0; 196 | border-bottom-right-radius: 0; 197 | border-right: none; 198 | } 199 | 200 | .pricing-card:last-child { 201 | border-top-left-radius: 0; 202 | border-bottom-left-radius: 0; 203 | border-left: none; 204 | } 205 | 206 | .price-header { 207 | text-align: center; 208 | margin-bottom: 1.5rem; 209 | } 210 | 211 | .plan-name { 212 | font-size: 1.5rem; 213 | margin-bottom: .5rem; 214 | } 215 | 216 | .plan-price { 217 | font-size: 2rem; 218 | font-weight: bold; 219 | } 220 | 221 | .plan-price::after { 222 | content: '/mo'; 223 | font-size: .75rem; 224 | color: #777; 225 | } 226 | 227 | .feature { 228 | margin-bottom: .5rem; 229 | } 230 | 231 | .feature.inactive { 232 | color: #777; 233 | text-decoration: line-through; 234 | } 235 | 236 | .feature:last-child { 237 | margin-bottom: 0; 238 | } 239 | 240 | @media (max-width: 700px) { 241 | .curriculum-grid { 242 | grid-template-columns: minmax(auto, 450px); 243 | row-gap: 30px; 244 | } 245 | 246 | .full-screen-header { 247 | background-position-x: 65%; 248 | } 249 | 250 | .pricing-cards-container { 251 | flex-wrap: wrap; 252 | } 253 | 254 | .pricing-card, 255 | .pricing-card.accent { 256 | width: 100%; 257 | margin: 0; 258 | margin-bottom: 1rem; 259 | } 260 | 261 | .pricing-card:first-child, 262 | .pricing-card:last-child { 263 | border-radius: .3em; 264 | border-right: 1px solid black; 265 | border-left: 1px solid black; 266 | } 267 | 268 | .pricing-card:last-child { 269 | margin-bottom: 0; 270 | } 271 | 272 | .feature { 273 | text-align: center; 274 | } 275 | 276 | .feature.inactive { 277 | display: none; 278 | } 279 | } --------------------------------------------------------------------------------