├── .gitignore ├── week-3 ├── 25-shirt-size │ ├── styles.css │ ├── index.html │ └── readme.md ├── 29-combined-skills │ ├── styles.css │ ├── contact.html │ ├── index.html │ ├── about.html │ └── readme.md ├── 28-git-conflict │ ├── styles.css │ ├── index.html │ └── readme.md ├── 19-search │ ├── index.html │ └── readme.md ├── 21-buttons │ ├── readme.md │ └── index.html ├── 20-labels │ ├── index.html │ └── readme.md ├── 23-comments │ ├── readme.md │ └── index.html ├── 24-dietary │ ├── index.html │ └── readme.md ├── 26-checkout-groups │ ├── readme.md │ └── index.html ├── 22-checkout │ ├── readme.md │ └── index.html └── 27-attributes │ ├── readme.md │ └── index.html ├── .vscode ├── settings.json └── extensions.json ├── week-1 ├── 6-css-properties │ ├── styles.css │ ├── readme.md │ └── index.html ├── 5-css-selectors │ ├── message-backgrounds.css │ ├── readme.md │ └── index.html ├── 8-advanced-selectors │ ├── styles.css │ ├── readme.md │ └── index.html ├── 3-semantic-html │ ├── html.jpg │ ├── readme.md │ └── index.html ├── 9-git-branch │ ├── styles.css │ ├── index.html │ └── readme.md ├── 7-css-box │ ├── styles.css │ ├── readme.md │ └── index.html ├── 4-links-scripts │ ├── js │ │ └── convertUrls.js │ ├── readme.md │ ├── index.html │ └── css │ │ └── missing-styles.css ├── 1-parent-child │ ├── readme.md │ └── index.html └── 2-html-attributes │ ├── readme.md │ └── index.html ├── week-2 ├── 11-flexbox │ ├── flexbox.css │ ├── readme.md │ └── index.html ├── 10-media-queries │ ├── columns.css │ ├── readme.md │ └── index.html ├── 17-nav-menu │ ├── styles.css │ ├── readme.md │ └── index.html ├── 13-align-items │ ├── flexbox.css │ ├── readme.md │ └── index.html ├── 14-order │ ├── flexbox.css │ ├── readme.md │ └── index.html ├── 15-align-self │ ├── flexbox.css │ ├── readme.md │ └── index.html ├── 16-more-flexbox │ ├── flexbox.css │ ├── readme.md │ └── index.html ├── 18-git-merge │ ├── styles.css │ ├── index.html │ └── readme.md └── 12-justify-content │ ├── flexbox.css │ ├── readme.md │ └── index.html ├── css ├── result.css ├── week1-conflicting-styles.css ├── message-css-selectors.css ├── week1-pagination.css ├── message.css ├── message-child-selectors.css ├── week2-media-queries.css ├── week2.css ├── week2-nav-menu.css ├── week1.css ├── week3-forms.css ├── combined-skills.css └── normalize.css ├── images ├── 7 │ └── countries.png ├── 8 │ └── solution.png ├── 9 │ └── github-branches.png ├── 11 │ ├── example-row.png │ ├── solution-1.png │ ├── solution-2.png │ ├── solution-3.png │ └── example-column.png ├── 12 │ ├── solution-1.png │ ├── solution-2.png │ ├── solution-3.png │ ├── solution-4.png │ ├── example-space.png │ └── example-space-column.png ├── 13 │ ├── solution-1.png │ ├── solution-2.png │ ├── solution-3.png │ ├── solution-4.png │ ├── example-align-row.png │ └── example-align-column.png ├── 14 │ ├── solution-1.png │ ├── solution-2.png │ ├── solution-3.png │ └── googling-flexbox.png ├── 15 │ ├── example.png │ ├── solution-1.png │ ├── solution-2.png │ ├── solution-3.png │ └── solution-4.png ├── 16 │ ├── solution-1.png │ ├── solution-2.png │ ├── solution-3.png │ ├── solution-4.png │ └── solution-5.png ├── 17 │ └── solution.gif ├── 18 │ ├── pull-request-0.png │ ├── pull-request-1.png │ ├── pull-request-2.png │ └── pull-request-3.png ├── 22 │ ├── shirts.jpg │ └── solution.png ├── 23 │ └── solution.png ├── 24 │ ├── solution-1.png │ └── solution-2.png ├── 25 │ ├── solution-1.png │ └── solution-2.png ├── 26 │ └── solution.png ├── 27 │ ├── solution-delivery.png │ └── solution-required.gif ├── 3-main.png ├── 29-hero.jpg ├── 29-item-1.jpg ├── 29-item-2.jpg ├── 29-item-3.jpg ├── 3-header.png ├── fork-clone.png ├── fork-editor.png ├── fork-start.png ├── sample-logo.png ├── fork-copy-url.png ├── 29-solution-hero.png ├── 29-solution-text.png ├── fork-open-readme.gif ├── 29-initial-nav-menu.png ├── 29-solution-email.png ├── 29-solution-header.png ├── 29-solution-heart.png ├── 29-solution-label.gif ├── 29-solution-radio.png ├── 29-solution-views.png ├── fork-user-account.png ├── 29-solution-nav-menu.png ├── 29-solution-required.gif └── search.svg ├── .prettierrc.js ├── package.json ├── js └── 3-result.js └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /week-3/25-shirt-size/styles.css: -------------------------------------------------------------------------------- 1 | /* Add your CSS below */ 2 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.formatOnSave": true 3 | } 4 | -------------------------------------------------------------------------------- /week-1/6-css-properties/styles.css: -------------------------------------------------------------------------------- 1 | /* Add your CSS code below */ 2 | -------------------------------------------------------------------------------- /week-2/11-flexbox/flexbox.css: -------------------------------------------------------------------------------- 1 | /* Add your own CSS code below */ 2 | -------------------------------------------------------------------------------- /week-2/10-media-queries/columns.css: -------------------------------------------------------------------------------- 1 | /* Add your own CSS code below */ 2 | -------------------------------------------------------------------------------- /week-3/29-combined-skills/styles.css: -------------------------------------------------------------------------------- 1 | /* Add your own CSS code below */ 2 | -------------------------------------------------------------------------------- /week-1/5-css-selectors/message-backgrounds.css: -------------------------------------------------------------------------------- 1 | /* Add your CSS code below */ 2 | -------------------------------------------------------------------------------- /week-2/17-nav-menu/styles.css: -------------------------------------------------------------------------------- 1 | /* Write your media queries and flexbox CSS below */ 2 | -------------------------------------------------------------------------------- /week-1/8-advanced-selectors/styles.css: -------------------------------------------------------------------------------- 1 | /* Try different box model properties below */ 2 | -------------------------------------------------------------------------------- /css/result.css: -------------------------------------------------------------------------------- 1 | .result { 2 | padding: 1rem; 3 | border-top: 1px solid rgba(0, 0, 0, 0.2); 4 | } 5 | -------------------------------------------------------------------------------- /images/3-main.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/3-main.png -------------------------------------------------------------------------------- /images/22/shirts.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/22/shirts.jpg -------------------------------------------------------------------------------- /images/29-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-hero.jpg -------------------------------------------------------------------------------- /images/29-item-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-item-1.jpg -------------------------------------------------------------------------------- /images/29-item-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-item-2.jpg -------------------------------------------------------------------------------- /images/29-item-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-item-3.jpg -------------------------------------------------------------------------------- /images/3-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/3-header.png -------------------------------------------------------------------------------- /images/15/example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/15/example.png -------------------------------------------------------------------------------- /images/17/solution.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/17/solution.gif -------------------------------------------------------------------------------- /images/22/solution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/22/solution.png -------------------------------------------------------------------------------- /images/23/solution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/23/solution.png -------------------------------------------------------------------------------- /images/26/solution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/26/solution.png -------------------------------------------------------------------------------- /images/7/countries.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/7/countries.png -------------------------------------------------------------------------------- /images/8/solution.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/8/solution.png -------------------------------------------------------------------------------- /images/fork-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/fork-clone.png -------------------------------------------------------------------------------- /images/fork-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/fork-editor.png -------------------------------------------------------------------------------- /images/fork-start.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/fork-start.png -------------------------------------------------------------------------------- /images/sample-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/sample-logo.png -------------------------------------------------------------------------------- /week-2/13-align-items/flexbox.css: -------------------------------------------------------------------------------- 1 | .countries { 2 | display: flex; 3 | } 4 | /* Add your own CSS code below */ 5 | -------------------------------------------------------------------------------- /week-2/14-order/flexbox.css: -------------------------------------------------------------------------------- 1 | .countries { 2 | display: flex; 3 | } 4 | 5 | /* Add your own CSS code below */ 6 | -------------------------------------------------------------------------------- /images/11/example-row.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/11/example-row.png -------------------------------------------------------------------------------- /images/11/solution-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/11/solution-1.png -------------------------------------------------------------------------------- /images/11/solution-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/11/solution-2.png -------------------------------------------------------------------------------- /images/11/solution-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/11/solution-3.png -------------------------------------------------------------------------------- /images/12/solution-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/12/solution-1.png -------------------------------------------------------------------------------- /images/12/solution-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/12/solution-2.png -------------------------------------------------------------------------------- /images/12/solution-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/12/solution-3.png -------------------------------------------------------------------------------- /images/12/solution-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/12/solution-4.png -------------------------------------------------------------------------------- /images/13/solution-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/13/solution-1.png -------------------------------------------------------------------------------- /images/13/solution-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/13/solution-2.png -------------------------------------------------------------------------------- /images/13/solution-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/13/solution-3.png -------------------------------------------------------------------------------- /images/13/solution-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/13/solution-4.png -------------------------------------------------------------------------------- /images/14/solution-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/14/solution-1.png -------------------------------------------------------------------------------- /images/14/solution-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/14/solution-2.png -------------------------------------------------------------------------------- /images/14/solution-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/14/solution-3.png -------------------------------------------------------------------------------- /images/15/solution-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/15/solution-1.png -------------------------------------------------------------------------------- /images/15/solution-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/15/solution-2.png -------------------------------------------------------------------------------- /images/15/solution-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/15/solution-3.png -------------------------------------------------------------------------------- /images/15/solution-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/15/solution-4.png -------------------------------------------------------------------------------- /images/16/solution-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/16/solution-1.png -------------------------------------------------------------------------------- /images/16/solution-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/16/solution-2.png -------------------------------------------------------------------------------- /images/16/solution-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/16/solution-3.png -------------------------------------------------------------------------------- /images/16/solution-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/16/solution-4.png -------------------------------------------------------------------------------- /images/16/solution-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/16/solution-5.png -------------------------------------------------------------------------------- /images/24/solution-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/24/solution-1.png -------------------------------------------------------------------------------- /images/24/solution-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/24/solution-2.png -------------------------------------------------------------------------------- /images/25/solution-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/25/solution-1.png -------------------------------------------------------------------------------- /images/25/solution-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/25/solution-2.png -------------------------------------------------------------------------------- /images/fork-copy-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/fork-copy-url.png -------------------------------------------------------------------------------- /week-2/15-align-self/flexbox.css: -------------------------------------------------------------------------------- 1 | .countries { 2 | display: flex; 3 | } 4 | 5 | /* Add your own CSS code below */ 6 | -------------------------------------------------------------------------------- /week-2/16-more-flexbox/flexbox.css: -------------------------------------------------------------------------------- 1 | .countries { 2 | display: flex; 3 | } 4 | 5 | /* Add your own CSS code below */ 6 | -------------------------------------------------------------------------------- /images/12/example-space.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/12/example-space.png -------------------------------------------------------------------------------- /images/29-solution-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-hero.png -------------------------------------------------------------------------------- /images/29-solution-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-text.png -------------------------------------------------------------------------------- /images/fork-open-readme.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/fork-open-readme.gif -------------------------------------------------------------------------------- /images/11/example-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/11/example-column.png -------------------------------------------------------------------------------- /images/14/googling-flexbox.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/14/googling-flexbox.png -------------------------------------------------------------------------------- /images/18/pull-request-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/18/pull-request-0.png -------------------------------------------------------------------------------- /images/18/pull-request-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/18/pull-request-1.png -------------------------------------------------------------------------------- /images/18/pull-request-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/18/pull-request-2.png -------------------------------------------------------------------------------- /images/18/pull-request-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/18/pull-request-3.png -------------------------------------------------------------------------------- /images/29-initial-nav-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-initial-nav-menu.png -------------------------------------------------------------------------------- /images/29-solution-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-email.png -------------------------------------------------------------------------------- /images/29-solution-header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-header.png -------------------------------------------------------------------------------- /images/29-solution-heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-heart.png -------------------------------------------------------------------------------- /images/29-solution-label.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-label.gif -------------------------------------------------------------------------------- /images/29-solution-radio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-radio.png -------------------------------------------------------------------------------- /images/29-solution-views.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-views.png -------------------------------------------------------------------------------- /images/9/github-branches.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/9/github-branches.png -------------------------------------------------------------------------------- /images/fork-user-account.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/fork-user-account.png -------------------------------------------------------------------------------- /images/13/example-align-row.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/13/example-align-row.png -------------------------------------------------------------------------------- /images/27/solution-delivery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/27/solution-delivery.png -------------------------------------------------------------------------------- /images/27/solution-required.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/27/solution-required.gif -------------------------------------------------------------------------------- /images/29-solution-nav-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-nav-menu.png -------------------------------------------------------------------------------- /images/29-solution-required.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/29-solution-required.gif -------------------------------------------------------------------------------- /week-1/3-semantic-html/html.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/week-1/3-semantic-html/html.jpg -------------------------------------------------------------------------------- /css/week1-conflicting-styles.css: -------------------------------------------------------------------------------- 1 | /** Conflicting styles that require advanced CSS selectors to override */ 2 | p { 3 | color: #000; 4 | } 5 | -------------------------------------------------------------------------------- /images/12/example-space-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/12/example-space-column.png -------------------------------------------------------------------------------- /images/13/example-align-column.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/html-css-git-exercises/HEAD/images/13/example-align-column.png -------------------------------------------------------------------------------- /week-1/9-git-branch/styles.css: -------------------------------------------------------------------------------- 1 | /* Add your own CSS code below */ 2 | .link { 3 | color: #4491db; 4 | font-weight: 700; 5 | text-decoration: none; 6 | } 7 | -------------------------------------------------------------------------------- /week-2/18-git-merge/styles.css: -------------------------------------------------------------------------------- 1 | /* Add your own CSS code below */ 2 | .link { 3 | color: #4491db; 4 | font-weight: 700; 5 | text-decoration: none; 6 | } 7 | -------------------------------------------------------------------------------- /week-3/28-git-conflict/styles.css: -------------------------------------------------------------------------------- 1 | /* Add your own CSS code below */ 2 | .link { 3 | color: orangered; 4 | font-weight: 700; 5 | text-decoration: none; 6 | } 7 | -------------------------------------------------------------------------------- /week-1/7-css-box/styles.css: -------------------------------------------------------------------------------- 1 | /* Try different box model properties below */ 2 | .pages__page { 3 | border: 1px solid #4491db; 4 | border-radius: 4px; 5 | background: #fff; 6 | } 7 | -------------------------------------------------------------------------------- /week-2/16-more-flexbox/readme.md: -------------------------------------------------------------------------------- 1 | # Flexbox Practice 2 | 3 | You know what to do by now. Use any of the flexbox properties you have learned so far to solve as many of the exercises as you can. 4 | -------------------------------------------------------------------------------- /week-2/12-justify-content/flexbox.css: -------------------------------------------------------------------------------- 1 | .countries { 2 | display: flex; 3 | } 4 | 5 | .countries--second .country { 6 | padding: 0.5em; 7 | } 8 | 9 | /* Add your own CSS code below */ 10 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | printWidth: 100, 3 | tabWidth: 2, 4 | semicolons: true, 5 | singleQuote: false, 6 | trailingComma: false, 7 | bracketSpacing: true, 8 | jsxBracketSameLine: true, 9 | arrowParens: "always" 10 | }; 11 | -------------------------------------------------------------------------------- /css/message-css-selectors.css: -------------------------------------------------------------------------------- 1 | /* Message styling that targets all child elements of .messages */ 2 | .messages > * { 3 | margin: 1rem 3rem 1rem 1rem; 4 | padding: 0.5rem; 5 | font-size: 14px; 6 | line-height: 1.8em; 7 | border-radius: 2px; 8 | box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); 9 | } 10 | -------------------------------------------------------------------------------- /css/week1-pagination.css: -------------------------------------------------------------------------------- 1 | .countries { 2 | margin: 0; 3 | padding: 1rem; 4 | list-style: none; 5 | border-bottom: 1px solid #bbb; 6 | } 7 | 8 | .country { 9 | margin: 1px 0; 10 | background: #fff; 11 | border: 1px solid rgba(0, 0, 0, 0.2); 12 | } 13 | 14 | .pages { 15 | margin-left: 0.5rem; 16 | } 17 | 18 | .pages__page { 19 | text-decoration: none; 20 | } 21 | 22 | .pages__showing { 23 | display: inline-block; 24 | padding: 1rem; 25 | } 26 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations. 3 | // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp 4 | 5 | // List of extensions which should be recommended for users of this workspace. 6 | "recommendations": ["esbenp.prettier-vscode"], 7 | // List of extensions recommended by VS Code that should not be recommended for users of this workspace. 8 | "unwantedRecommendations": [] 9 | } 10 | -------------------------------------------------------------------------------- /images/search.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /week-3/19-search/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 19 - Search Form - HTML, CSS and Git Exercises 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |

Delete this line and add your form.

15 |
16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /css/message.css: -------------------------------------------------------------------------------- 1 | /* Message styling that is easier to override */ 2 | .message { 3 | margin: 1rem 3rem 1rem 1rem; 4 | padding: 0.5rem; 5 | font-size: 14px; 6 | line-height: 1.8em; 7 | border-radius: 2px; 8 | background: #fff; 9 | box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); 10 | } 11 | 12 | .message__author { 13 | font-size: 12px; 14 | font-weight: 700; 15 | color: rgba(0, 0, 0, 0.6); 16 | } 17 | 18 | .message__content { 19 | margin: 0; 20 | } 21 | 22 | .message__time { 23 | display: block; 24 | font-size: 12px; 25 | color: rgba(0, 0, 0, 0.6); 26 | text-align: right; 27 | } 28 | -------------------------------------------------------------------------------- /css/message-child-selectors.css: -------------------------------------------------------------------------------- 1 | /* Message styling that requires parent-child structure */ 2 | .message { 3 | margin: 1rem 3rem 1rem 1rem; 4 | padding: 0.5rem; 5 | font-size: 14px; 6 | line-height: 1.8em; 7 | border-radius: 2px; 8 | background: #fff; 9 | box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); 10 | } 11 | 12 | .message > .message__author { 13 | font-size: 12px; 14 | font-weight: 700; 15 | color: rgba(0, 0, 0, 0.6); 16 | } 17 | 18 | .message > .message__content { 19 | margin: 0; 20 | } 21 | 22 | .message > .message__time { 23 | display: block; 24 | font-size: 12px; 25 | color: rgba(0, 0, 0, 0.6); 26 | text-align: right; 27 | } 28 | -------------------------------------------------------------------------------- /week-3/21-buttons/readme.md: -------------------------------------------------------------------------------- 1 | # Form Buttons 2 | 3 | Forms can be submitted by hitting the `Enter` key. But not everyone knows this. Users expect to see a submit button, so you should make the search form more user-friendly. 4 | 5 | In this exercise, you will add a submit button to the search form. Follow the steps below to add the button. 6 | 7 | 1. Add a ` 68 | 69 | 70 | 71 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /week-3/27-attributes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 27 - Field Attributes - HTML, CSS and Git Exercises 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

Your Shopping Basket

16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 30 | 31 | 32 | 33 | 34 |
ProductSizeUnitsPrice
25 |
26 | CodeYourFuture t-shirts in black 27 |

CodeYourFuture t-shirt, black

28 |
29 | 		Medium1£10.00
35 |
36 | 37 |
38 |

Checkout

39 |
40 | 41 |
42 | Billing Address 43 |

44 | 45 | 46 |

47 |

48 | 49 | 50 |

51 |

52 | 53 | 54 |

55 |

56 | 57 | 58 |

59 |
60 |
61 | Delivery Address 62 |

63 | 64 | 65 |

66 |

67 | 68 | 69 |

70 |

71 | 72 | 77 |

78 |

79 | 80 | 81 |

82 |

83 | 84 | 85 |

86 |
87 | Delivery Options 88 | 97 |
98 |
99 | 100 | 101 |
102 |
103 |
104 |
105 | 106 | 107 | -------------------------------------------------------------------------------- /css/combined-skills.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | font-size: 16px; 4 | background: #fff; 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | } 10 | 11 | a { 12 | color: #0870c8; 13 | font-weight: 700; 14 | } 15 | 16 | a:hover, 17 | a:focus { 18 | color: #3497ec; 19 | } 20 | 21 | .site-wrapper { 22 | max-width: 80rem; 23 | margin: 0 auto; 24 | background: #fff; 25 | box-shadow: none; 26 | } 27 | 28 | .site-header { 29 | padding-top: 0.5rem; 30 | padding-bottom: 0.5rem; 31 | } 32 | 33 | .site-header__title, 34 | .main-nav { 35 | padding: 0.5rem; 36 | } 37 | 38 | .site-header__title { 39 | margin: 0 0.5rem; 40 | background: #0870c8; 41 | color: #fff; 42 | text-align: center; 43 | font-size: 2rem; 44 | font-weight: 300; 45 | letter-spacing: 5px; 46 | } 47 | 48 | .main-nav__list { 49 | margin: 0; 50 | padding: 0; 51 | list-style: none; 52 | min-width: 240px; 53 | } 54 | 55 | .main-nav__list-item a { 56 | display: inline-block; 57 | padding: 0.25rem 0; 58 | text-transform: uppercase; 59 | text-decoration: none; 60 | } 61 | 62 | .site-search { 63 | position: relative; 64 | margin: 0.5rem; 65 | } 66 | 67 | .site-search label, 68 | .site-search button { 69 | position: absolute; 70 | left: -9999px; 71 | } 72 | 73 | .site-search svg { 74 | position: absolute; 75 | top: 50%; 76 | left: 0.75rem; 77 | transform: translateY(-50%); 78 | color: #0870c8; 79 | width: 16px; 80 | height: 16px; 81 | } 82 | 83 | .site-search .site-search__input { 84 | display: block; 85 | padding: 0.5em 1em 0.5em 2rem; 86 | border: 4px solid #0870c8; 87 | width: auto; 88 | max-width: none; 89 | } 90 | 91 | main { 92 | padding: 0.5rem; 93 | } 94 | 95 | .hero__image, 96 | .item__image { 97 | display: block; 98 | max-width: 100%; 99 | height: auto; 100 | } 101 | 102 | .hero__title, 103 | .item__title { 104 | font-weight: 600; 105 | } 106 | 107 | .hero__author, 108 | .item__author { 109 | font-style: italic; 110 | } 111 | 112 | .hero__author span, 113 | .item__author span { 114 | font-style: normal; 115 | font-weight: 600; 116 | } 117 | 118 | .items, 119 | .item + .item { 120 | margin-top: 3rem; 121 | } 122 | 123 | .views { 124 | margin-top: 3rem; 125 | padding: 0.5rem 0; 126 | } 127 | 128 | .views__title { 129 | margin: 0; 130 | font-weight: 400; 131 | font-size: 1rem; 132 | font-style: italic; 133 | } 134 | 135 | .view-list { 136 | margin: 0; 137 | padding: 0; 138 | list-style: none; 139 | } 140 | 141 | .view-list__item, 142 | .views__all { 143 | display: block; 144 | padding: 0.25rem 0; 145 | text-transform: uppercase; 146 | text-decoration: none; 147 | } 148 | 149 | .contact-form { 150 | max-width: 30em; 151 | } 152 | 153 | .contact-form__field + .contact-form__field { 154 | margin-top: 1rem; 155 | } 156 | 157 | footer { 158 | margin-top: 2rem; 159 | padding-top: 2rem; 160 | padding-bottom: 2rem; 161 | text-align: center; 162 | } 163 | 164 | footer svg { 165 | width: 12px; 166 | height: 12px; 167 | } 168 | 169 | footer p:last-child { 170 | margin-top: 2rem; 171 | font-size: 0.9rem; 172 | color: rgba(0, 0, 0, 0.64); 173 | } 174 | 175 | footer p:last-child a { 176 | color: rgba(0, 0, 0, 0.64); 177 | font-weight: 400; 178 | } 179 | 180 | @media (min-width: 768px) { 181 | .site-header__title { 182 | font-size: 3rem; 183 | } 184 | 185 | .hero { 186 | position: relative; 187 | overflow: hidden; 188 | padding: 10vw; 189 | background: #000; 190 | color: rgba(255, 255, 255, 0.9); 191 | } 192 | 193 | .hero__image { 194 | position: absolute; 195 | top: 0; 196 | left: 0; 197 | opacity: 0.7; 198 | } 199 | 200 | .hero__title, 201 | .hero__author, 202 | .hero__time { 203 | position: relative; 204 | } 205 | 206 | .hero__title { 207 | max-width: 15em; 208 | font-size: 2rem; 209 | font-weight: 300; 210 | text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); 211 | } 212 | 213 | .items { 214 | margin-top: 1rem; 215 | display: flex; 216 | justify-content: space-around; 217 | } 218 | 219 | .item { 220 | width: 100%; 221 | } 222 | 223 | .item + .item { 224 | margin-top: 0; 225 | margin-left: 1.5rem; 226 | } 227 | 228 | .views { 229 | border-bottom: 1px solid rgba(0, 0, 0, 0.2); 230 | } 231 | } 232 | 233 | @media (min-width: 80rem) { 234 | .hero { 235 | padding: 130px; 236 | } 237 | } 238 | -------------------------------------------------------------------------------- /week-1/9-git-branch/readme.md: -------------------------------------------------------------------------------- 1 | # Git Branches 2 | 3 | Git allows you to keep multiple versions of your code and quickly switch between versions. It calls each version a "branch". Follow the instructions below to learn about branching. 4 | 5 | Let's pretend you work for a company running a messaging application. Your boss is thinking about changing the colour of the links in messages. She can't decide whether to change them to red or green, so she asks you to show her what it would look like in each colour. 6 | 7 | In this case, we use branches to create copies of our messages. In one version we will change the links to red. In another version we will change the links to green. Then we can switch between them to show her both versions. 8 | 9 | First, open the terminal in your code editor. _The terminal is where you entered `npm run 9` to run this exercise._ 10 | 11 | Check which branch you are currently in by entering the following command into your terminal: 12 | 13 | ``` 14 | git branch 15 | ``` 16 | 17 | You should see the following printed to the terminal, which tells you that you currently have one branch, the `master` branch: 18 | 19 | ``` 20 | * master 21 | ``` 22 | 23 | Enter the following command into your terminal to create a new branch: 24 | 25 | ``` 26 | git checkout -b red_links 27 | ``` 28 | 29 | Enter `git branch` to see if the branch was created. You should see the following: 30 | 31 | ``` 32 | master 33 | * red_links 34 | ``` 35 | 36 | This means that you have two branches and you are currently editing the `red_links` branch. 37 | 38 | Now edit the `style.css` file to turn the links in your messages red. Then add and commit the files. 39 | 40 | _Hint: If you tried to `git push` you may have received an error. Don't worry, we'll cover this later. Continue following the instructions below._ 41 | 42 | You can now switch between your `master` branch, where the links are blue, and your `red_links` branch, where your links are red. Enter this command to switch to the `master` branch: 43 | 44 | ``` 45 | git checkout master 46 | ``` 47 | 48 | Now look in your browser. Your links should be blue. _Hint: You may need to run your `npm run 9` command if you stopped it._ 49 | 50 | Use this command to switch to your `red_links` branch: 51 | 52 | ``` 53 | git checkout red_links 54 | ``` 55 | 56 | Now check your browser to make sure the links are red. Try switching back and forth between your two branches a few times to see how it works. 57 | 58 | _Hint: Don't copy/paste the commands in this exercise. You will learn more by typing them out. It's ok if it takes you a little longer!_ 59 | 60 | Next you'll need to create a new branch for changing the link colour to green. 61 | 62 | Enter the following command to make sure you are on the `master` branch: 63 | 64 | ``` 65 | git checkout master 66 | ``` 67 | 68 | Now check out a new branch for your green links. You learned how to create a new branch above. Use the same command, but use the branch name `green_links` instead. 69 | 70 | When you have created a new branch, enter the following command: 71 | 72 | ``` 73 | git branch 74 | ``` 75 | 76 | You should see the following: 77 | 78 | ``` 79 | * green_links 80 | master 81 | red_links 82 | ``` 83 | 84 | This means you have three branches and you are currently on the `green_links` branch. _Hint: If you don't see `*` next to `green_links`, you have made a mistake. Fix this before moving forward!_ 85 | 86 | Edit the `style.css` file to turn the links in your messages green. Then add and commit the files. 87 | 88 | You can now switch between all three branches: `master`, `green_links`, and `red_links`. Each time you switch, check your browser to see that the links have changed to the right colour. 89 | 90 | To complete this exercise, you will need to push both branches. Normally, you would switch to the branch and push like this: 91 | 92 | ``` 93 | git checkout red_links 94 | git push 95 | ``` 96 | 97 | If you try to do that, you will receive an error message. When you have a _new_ branch, you have to add extra information to the `push` command: 98 | 99 | ``` 100 | git checkout red_links 101 | git push -u origin red_links 102 | ``` 103 | 104 | _Hint: You only have to use this extra information the first time you push a new branch. After that, you can push to your branch with just `git push`._ 105 | 106 | Using this technique, try to successfully push your `green_links` branch. 107 | 108 | When you have successfully pushed both branches, you should see them in your GitHub repository. You can find them by clicking on the **Branch** button. Here's an example of what it should look like: 109 | 110 | ![Screenshot of branches list in GitHub](/images/9/github-branches.png) 111 | -------------------------------------------------------------------------------- /week-2/16-more-flexbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 - Combined Flexbox Exercises - HTML, CSS and Git Exercises 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |

Exercises

18 |

19 | Make the items below look like the images in the Solutions box. 20 |

21 |
22 |
23 |
24 |
25 |
26 |

First

27 |
    28 |
  • 1. Brazil
    • 29 |
  • 2. Croatia
    • 30 |
  • 3. Ethiopia
    • 31 |
  • 4. Laos
    • 32 |
  • 5. Uganda
    • 33 |
34 |
35 |
36 |

Solution

37 | 38 |
39 |
40 |
41 |
42 |

Second

43 |
    44 |
  • 1. Brazil
    • 45 |
  • 2. Croatia
    • 46 |
  • 3. Ethiopia
    • 47 |
  • 4. Laos
    • 48 |
  • 5. Uganda
    • 49 |
50 |
51 |
52 |

Solution

53 | 54 |
55 |
56 |
57 |
58 |

Third

59 |
    60 |
  • 1. Brazil
    • 61 |
  • 2. Croatia
    • 62 |
  • 3. Ethiopia
    • 63 |
  • 4. Laos
    • 64 |
  • 5. Uganda
    • 65 |
66 |
67 |
68 |

Solution

69 | 70 |
71 |
72 |
73 |
74 |

Fourth

75 |
    76 |
  • 1. Brazil
    • 77 |
  • 2. Croatia
    • 78 |
  • 3. Ethiopia
    • 79 |
  • 4. Laos
    • 80 |
  • 5. Uganda
    • 81 |
82 |
83 |
84 |

Solution

85 | 86 |
87 |
88 |
89 |
90 |

Fifth

91 |
    92 |
  • 1. Brazil
    • 93 |
  • 2. Croatia
    • 94 |
  • 3. Ethiopia
    • 95 |
  • 4. Laos
    • 96 |
  • 5. Uganda
    • 97 |
98 |
99 |
100 |

Solution

101 | 102 |
103 |
104 |
105 | 106 | 107 | -------------------------------------------------------------------------------- /week-3/28-git-conflict/readme.md: -------------------------------------------------------------------------------- 1 | # Git Merge Conflict 2 | 3 | In this exercise you will learn how to work with two branches that have "diverged". Branches diverge when one branch has a commit that doesn't exist in the other branch. In some cases, git can not merge them and you have a "merge conflict". 4 | 5 | Follow the instructions below to create a merge conflict and then learn how to solve the problem. 6 | 7 | > _Hint: There are many ways this exercise can cause problems if you don't follow the steps precisely. If you are confused at any time, ask a mentor for help._ 8 | 9 | In [exercise 15](/week-2/15-git-merge) you created and merged a pull request to change the links to `orangered`. But your boss is still not happy. She wants to try a purple colour (`fuchsia`). 10 | 11 | First, make sure you are on the `master` branch: 12 | 13 | ``` 14 | git checkout master 15 | git branch 16 | ``` 17 | 18 | You should see the following printed to the terminal, which tells you that you are currently on the `master` branch: 19 | 20 | ``` 21 | green_links 22 | * master 23 | orange_links 24 | red_links 25 | ``` 26 | 27 | Create a new branch for changing the link colour to `fuchsia`: 28 | 29 | ``` 30 | git checkout -b purple_links 31 | ``` 32 | 33 | Now edit the `style.css` file and change the colour of the links in your messages to `fuchsia`. Check to see if the links have changed to a purple colour. If they have, then add and commit your changes. 34 | 35 | Before you can show your boss the purple colour, she calls you into her office. Customers of your messaging service are complaining about the orange links. Some say it is too bright and hard to read. She wants you to put aside your work on the purple links and set the links back to the original colour (`#4491db`) in the `master` branch immediately. 36 | 37 | Make sure you are on the `master` branch: 38 | 39 | ``` 40 | git checkout master 41 | ``` 42 | 43 | > _Hint: Run `git branch` in the terminal to make sure you're on the correct branch._ 44 | 45 | Edit the `style.css` file and change the colour of the links in your messages to `#ff00ea`. Check to see if the links have changed to a purple colour. If they have, then add and commit your changes. 46 | 47 | Phew! You have restored the blue links and customers have stopped complaining. The next day your boss decides she wants to launch the purple links. You can do this by merging your `purple_links` branch into master. 48 | 49 | In [exercise 15](/week-2/15-git-merge) you merged a branch into `master` using GitHub. This time we'll do the same thing on the command line. 50 | 51 | Check out the `master` branch: 52 | 53 | ``` 54 | git checkout master 55 | ``` 56 | 57 | > _Hint: Don't forget to run `git branch` in the terminal to make sure you're on the correct branch._ 58 | 59 | Now you can merge the `purple_links` branch into `master` with the following command: 60 | 61 | ``` 62 | git merge purple_links 63 | ``` 64 | 65 | When you try to do this, you will get a message telling you that there is a merge conflict. 66 | 67 | ``` 68 | Auto-merging week-3/20-git-conflict/styles.css 69 | CONFLICT (content): Merge conflict in week-3/20-git-conflict/styles.css 70 | Automatic merge failed; fix conflicts and then commit the result. 71 | ``` 72 | 73 | This tells you that there is a merge conflict in the file `week-3/20-git-conflict/styles.css`. If you open the file you will find that lines have been added to the file. 74 | 75 | ``` 76 | /* Add your own CSS code below */ 77 | .link { 78 | <<<<<<< HEAD 79 | color: #4491db; 80 | ======= 81 | color: fuchsia; 82 | >>>>>>> purple_links 83 | font-weight: 700; 84 | text-decoration: none; 85 | } 86 | ``` 87 | 88 | Why did this happen? When git tried to merge the `purple_links` branch into `master` it found two commits: the commit where you changed the links to blue and the commit where you changed the links to purple. 89 | 90 | Since these commits change the same line of code, git doesn't know which one is correct. You have to tell it the correct code. To do this, edit the file to remove the added lines and the blue colour property, so that only the purple colour remains: 91 | 92 | ``` 93 | /* Add your own CSS code below */ 94 | .link { 95 | color: fuchsia; 96 | font-weight: 700; 97 | text-decoration: none; 98 | } 99 | ``` 100 | 101 | Test the changes in your browser. If the links have been changed to a purple colour, you've resolved the merge conflict. Now you need to add and commit the files to complete the merge. Run the following commands: 102 | 103 | ``` 104 | git add week-3/20-git-conflict/styles.css 105 | git commit -m "Merge purple_links branch" 106 | ``` 107 | 108 | Way to go! You've now resolved a merge conflict. Merge conflicts are one of the most challenging things you will deal with. If you made it through, give yourself a pat on the back. 109 | -------------------------------------------------------------------------------- /week-3/29-combined-skills/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 29 - Combined Skills - HTML, CSS and Git Exercises 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

C.Y.F

16 |
17 | 28 |
29 |
30 | 33 | 34 | 48 | 49 |
50 |
51 | 52 |
53 |
54 | 55 |

56 | Duis aute irure dolor in reprehenderit in voluptate velit 57 |

58 |

By Nostrud Fugiat

59 |

60 | 61 |

62 |
63 |
64 |

View:

65 | Most Popular 66 | Most Recent 67 | View All 68 |
69 |
70 |
71 | 72 |

73 | Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore 74 |

75 |

By Aliquip Occaecat

76 |

77 | 78 |

79 |
80 |
81 | 82 |

83 | Sunt in culpa qui officia deserunt mollit anim 84 |

85 |

By Laboris Nisit

86 |

87 | 88 |

89 |
90 |
91 | 92 |

93 | Voluptate velit esse cillum dolore eu fugiat nulla pariaturt 94 |

95 |

By Minim Veniam

96 |

97 | 98 |

99 |
100 |
101 |
102 | 103 | 127 |
128 | 129 | 130 | -------------------------------------------------------------------------------- /week-3/29-combined-skills/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 29 - Combined Skills - HTML, CSS and Git Exercises 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |

C.Y.F

16 |
17 | 28 |
29 |
30 | 33 | 34 | 48 | 49 |
50 |
51 | 52 |
53 |
54 |

About C.Y.F

55 |

56 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 57 | incididunt ut labore et dolore magna aliqua. Suspendisse sed nisi lacus sed viverra 58 | tellus in hac habitasse. Amet cursus sit amet dictum sit amet justo. Feugiat nibh sed 59 | pulvinar proin gravida hendrerit lectus a. Consectetur libero id faucibus nisl. Lectus 60 | quam id leo in vitae turpis massa. Ultricies tristique nulla aliquet enim tortor at 61 | auctor urna. Bibendum neque egestas congue quisque egestas diam. Egestas fringilla 62 | phasellus faucibus scelerisque eleifend donec pretium. Non tellus orci ac auctor augue 63 | mauris. In aliquam sem fringilla ut. Cras tincidunt lobortis feugiat vivamus at augue. 64 | Posuere sollicitudin aliquam ultrices sagittis orci a. Commodo sed egestas egestas 65 | fringilla phasellus faucibus scelerisque. Vulputate ut pharetra sit amet aliquam. 66 |

67 | 68 |

69 | Mi quis hendrerit dolor magna eget est lorem. Porttitor massa id neque aliquam 70 | vestibulum morbi. Tortor at risus viverra adipiscing at in tellus integer feugiat. Enim 71 | ut tellus elementum sagittis vitae et leo duis. Vitae ultricies leo integer malesuada 72 | nunc vel risus commodo viverra. Maecenas ultricies mi eget mauris pharetra et ultrices 73 | neque. Facilisis sed odio morbi quis. Egestas erat imperdiet sed euismod. Consequat 74 | interdum varius sit amet mattis vulputate enim. Porttitor eget dolor morbi non arcu 75 | risus. Luctus accumsan tortor posuere ac ut consequat semper. Eget felis eget nunc 76 | lobortis mattis aliquam faucibus purus in. Sollicitudin tempor id eu nisl nunc. 77 |

78 | 79 |

80 | Ut morbi tincidunt augue interdum velit euismod. Aliquet sagittis id consectetur purus 81 | ut faucibus pulvinar elementum integer. Nulla facilisi nullam vehicula ipsum. Metus 82 | vulputate eu scelerisque felis imperdiet. At imperdiet dui accumsan sit amet nulla 83 | facilisi morbi. Gravida arcu ac tortor dignissim convallis. Leo duis ut diam quam nulla 84 | porttitor massa. Posuere lorem ipsum dolor sit amet. Neque ornare aenean euismod 85 | elementum nisi quis. In fermentum posuere urna nec tincidunt praesent semper feugiat 86 | nibh. Orci ac auctor augue mauris. Arcu ac tortor dignissim convallis aenean et tortor 87 | at risus. Sed turpis tincidunt id aliquet risus feugiat in. Pharetra diam sit amet nisl 88 | suscipit adipiscing. Aliquet eget sit amet tellus cras adipiscing enim. Nulla pharetra 89 | diam sit amet. Eget mauris pharetra et ultrices neque ornare. Volutpat maecenas volutpat 90 | blandit aliquam etiam erat. Id volutpat lacus laoreet non curabitur gravida arcu ac 91 | tortor. 92 |

93 | 94 |

95 | Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida cum. Mattis rhoncus 96 | urna neque viverra justo. Nunc consequat interdum varius sit. In hendrerit gravida 97 | rutrum quisque non tellus. Porta nibh venenatis cras sed felis. Malesuada pellentesque 98 | elit eget gravida cum sociis natoque. A erat nam at lectus. Congue nisi vitae suscipit 99 | tellus. Sed arcu non odio euismod lacinia at quis. Molestie a iaculis at erat 100 | pellentesque adipiscing commodo. Curabitur gravida arcu ac tortor dignissim convallis. 101 | Ut diam quam nulla porttitor massa id neque. Ipsum faucibus vitae aliquet nec. Gravida 102 | dictum fusce ut placerat orci nulla pellentesque dignissim enim. Faucibus pulvinar 103 | elementum integer enim neque volutpat ac tincidunt vitae. Id consectetur purus ut 104 | faucibus pulvinar elementum integer enim neque. Facilisis magna etiam tempor orci eu 105 | lobortis elementum nibh tellus. Ullamcorper a lacus vestibulum sed arcu non. Venenatis a 106 | condimentum vitae sapien. 107 |

108 | 109 |

110 | Curabitur gravida arcu ac tortor dignissim convallis aenean. Sit amet purus gravida quis 111 | blandit turpis. Mattis nunc sed blandit libero volutpat. Mattis ullamcorper velit sed 112 | ullamcorper morbi. Urna et pharetra pharetra massa massa ultricies mi quis. Est lorem 113 | ipsum dolor sit amet. Viverra aliquet eget sit amet. Nunc non blandit massa enim. 114 | Volutpat consequat mauris nunc congue. Justo donec enim diam vulputate. In nibh mauris 115 | cursus mattis molestie a iaculis at erat. Tortor consequat id porta nibh. 116 |

117 |
118 |
119 | 120 | 144 |
145 | 146 | 147 | -------------------------------------------------------------------------------- /week-3/29-combined-skills/readme.md: -------------------------------------------------------------------------------- 1 | # Combined Skills 2 | 3 | There are many problems to solve on a real website. Sometimes a simple change can be difficult because it is hard to find which part of the code you need to change. 4 | 5 | In this exercise, you will work on many different problems on the same website. When you fix one problem you will need to make sure you have not broken a different part of the site. 6 | 7 | Everything you do in this exercise will be something you _know how to do_, but it will probably take you longer to do it. Tasks that seemed simple in a previous exercise will seem more challenging. 8 | 9 | To complete this exercise, follow the steps in each section below. When you complete a section, check the site to make sure it looks like you expect. 10 | 11 | _To complete these exercises you should only modify `about.html`, `contact.html`, `index.html` and `styles.css`._ 12 | 13 | ## 1. Made with ♥ 14 | 15 | At the bottom of the website, you will find the text "Built with ♥ for CodeYourFuture". It would be fun to make the ♥ appear in red (`#c85308`). 16 | 17 | To complete this exercise, follow the steps below. 18 | 19 | 1. Read [this documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span) about the `` tag. 20 | 2. Use a `` tag to make the ♥ -- and only the ♥ -- appear in red (`#c85308`). 21 | 22 | When you have done this, the text should look like the image below. 23 | 24 | ![Screenshot of the red heart solution](/images/29-solution-heart.png) 25 | 26 | ## 2. Semantic HTML 27 | 28 | A few semantic tags are missing from the HTML files in this exercise. To complete this exercise, follow the steps below. 29 | 30 | 1. Use the `