From ccbf99e8eebe842f0324e3a0d1247610669a2d58 Mon Sep 17 00:00:00 2001 From: valhead Date: Wed, 9 Jun 2021 10:16:41 -0400 Subject: [PATCH 1/5] 01-01 start files --- index.html | 14 ++++ robot.svg | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 31 +++++++ 3 files changed, 282 insertions(+) create mode 100644 index.html create mode 100644 robot.svg create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..b54e314 --- /dev/null +++ b/index.html @@ -0,0 +1,14 @@ + + + + + + 01_01_CSS_Transform_Basics + + + + + red body robot with a single wheel + + + \ No newline at end of file diff --git a/robot.svg b/robot.svg new file mode 100644 index 0000000..bca54ce --- /dev/null +++ b/robot.svg @@ -0,0 +1,237 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..2b96da6 --- /dev/null +++ b/style.css @@ -0,0 +1,31 @@ +body { + display: flex; + justify-content: center; + margin-top:3em; + background-color: #372D4D; +} + +img {width: 150px;} + +.robot { + +} + + + + + + + + + + + + + + + + + + + From 3c8e65ed0a60397a3445e22fee1d0d012c7d94cb Mon Sep 17 00:00:00 2001 From: valhead Date: Wed, 9 Jun 2021 10:34:56 -0400 Subject: [PATCH 2/5] Starting files for 01-01 --- index.html => Begin/index.html | 0 robot.svg => Begin/robot.svg | 0 style.css => Begin/style.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename index.html => Begin/index.html (100%) rename robot.svg => Begin/robot.svg (100%) rename style.css => Begin/style.css (100%) diff --git a/index.html b/Begin/index.html similarity index 100% rename from index.html rename to Begin/index.html diff --git a/robot.svg b/Begin/robot.svg similarity index 100% rename from robot.svg rename to Begin/robot.svg diff --git a/style.css b/Begin/style.css similarity index 100% rename from style.css rename to Begin/style.css From 69082253261b4b5f2dfc88e653f86f3e895924e5 Mon Sep 17 00:00:00 2001 From: smoser-LiL Date: Mon, 7 Nov 2022 17:53:01 +0000 Subject: [PATCH 3/5] Moving files using main --- .devcontainer/devcontainer.json | 13 ++++++++++++ .github/CODEOWNERS | 2 +- .github/workflows/main.yml | 14 +++++++++++++ NOTICE | 5 +---- README.md | 35 ++++++++++++++++++++++----------- 5 files changed, 52 insertions(+), 17 deletions(-) create mode 100644 .devcontainer/devcontainer.json create mode 100644 .github/workflows/main.yml diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json new file mode 100644 index 0000000..65e0849 --- /dev/null +++ b/.devcontainer/devcontainer.json @@ -0,0 +1,13 @@ +{ + "extensions": [ + "GitHub.github-vscode-theme", + "esbenp.prettier-vscode", + "dbaeumer.vscode-eslint", + "ritwickdey.LiveServer", + "stylelint.vscode-stylelint" + // Additional Extensions Here + ], + "onCreateCommand": "echo PS1='\"$ \"' >> ~/.bashrc" //Set Terminal Prompt to $ +} + +// DevContainer Reference: https://code.visualstudio.com/docs/remote/devcontainerjson-reference diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 97f37e0..04a9610 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,3 +1,3 @@ # Codeowners for these exercise files: -# * (asterisk) deotes "all files and folders" +# * (asterisk) denotes "all files and folders" # Example: * @producer @instructor diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..e71e597 --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,14 @@ +name: Copy To Branches +on: + workflow_dispatch: +jobs: + copy-to-branches: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + with: + fetch-depth: 0 + - name: Copy To Branches Action + uses: planetoftheweb/copy-to-branches@v1.2 + env: + key: main diff --git a/NOTICE b/NOTICE index 6ebd80d..4851a73 100644 --- a/NOTICE +++ b/NOTICE @@ -1,12 +1,9 @@ -Copyright 2019 LinkedIn Corporation +Copyright 2022 LinkedIn Corporation All Rights Reserved. Licensed under the LinkedIn Learning Exercise File License (the "License"). See LICENSE in the project root for license information. -ATTRIBUTIONS: -[PLEASE PROVIDE ATTRIBUTIONS OR DELETE THIS AND THE ABOVE LINE “ATTRIBUTIONS”] - Please note, this project may automatically load third party code from external repositories (for example, NPM modules, Composer packages, or other dependencies). If so, such third party code may be subject to other license terms than as set diff --git a/README.md b/README.md index 7d9f7b9..6775877 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,10 @@ -# COURSENAME -This is the repository for the LinkedIn Learning course CSS Animation. The full course is available from [LinkedIn Learning][lil-course-url]. +# CSS: Animation +This is the repository for the LinkedIn Learning course CSS: Animation. The full course is available from [LinkedIn Learning][lil-course-url]. -![course-name-alt-text][lil-thumbnail-url] +![CSS: Animation][lil-thumbnail-url] + +In recent years, web animation has grown into a powerful option for enhancing user experience on the web, and CSS animation has become a core skill for web designers and developers. In this course, Val Head leads you through the CSS animation skills you need to bring motion into your interactive projects. Val introduces CSS transforms and transitions—the foundation of most CSS animations—and shows how to keyframe simple animations and adjust their timing, fill-mode, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, optimizing animation performance, best uses for CSS animations right now, and the current level of support and performance and how we can expect that to change in the future. Val presents the lessons as a short series of building block animations—common things you might want to do with animations—then puts those techniques together in a small project of an animated infographic so you can see them all in action. -_See the readme file in the main branch for updated instructions and information._ ## Instructions This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access. @@ -11,15 +12,25 @@ This repository has branches for each of the videos in the course. You can use t The branches are structured to correspond to the videos in the course. The naming convention is `CHAPTER#_MOVIE#`. As an example, the branch named `02_03` corresponds to the second chapter and the third video in that chapter. Some branches will have a beginning and an end state. These are marked with the letters `b` for "beginning" and `e` for "end". The `b` branch contains the code as it is at the beginning of the movie. The `e` branch contains the code as it is at the end of the movie. The `main` branch holds the final state of the code when in the course. -## Installing -1. To use these exercise files, you must have the following installed: - - [list of requirements for course] -2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree. -3. [Course-specific instructions] +When switching from one exercise files branch to the next after making changes to the files, you may get a message like this: + + error: Your local changes to the following files would be overwritten by checkout: [files] + Please commit your changes or stash them before you switch branches. + Aborting + +To resolve this issue: + + Add changes to git using this command: git add . + Commit changes using this command: git commit -m "some message" + + +### Instructor -[0]: # (Replace these placeholder URLs with actual course URLs) +Val Head + -[lil-course-url]: https://www.linkedin.com/learning/ -[lil-thumbnail-url]: http:// +Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/val-head). +[lil-course-url]: https://www.linkedin.com/learning/css-animation-14153685 +[lil-thumbnail-url]: https://cdn.lynda.com/course/2882049/2882049-1627497347643-16x9.jpg From 8df93742f26b872df3fed05bec54cdb299764a89 Mon Sep 17 00:00:00 2001 From: smoser-LiL Date: Mon, 7 Nov 2022 18:09:21 +0000 Subject: [PATCH 4/5] Moving files using main --- .github/workflows/main.yml | 4 ++-- .vscode/settings.json | 28 ++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 2 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e71e597..077253a 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -1,4 +1,4 @@ -name: Copy To Branches +name: Copy To Branches SJM on: workflow_dispatch: jobs: @@ -9,6 +9,6 @@ jobs: with: fetch-depth: 0 - name: Copy To Branches Action - uses: planetoftheweb/copy-to-branches@v1.2 + uses: smoser-LiL/copy-to-branches-sjm@v1 env: key: main diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..af3e6d3 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,28 @@ +{ + "editor.bracketPairColorization.enabled": true, + "editor.cursorBlinking": "solid", + "editor.fontFamily": "ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace", + "editor.fontLigatures": false, + "editor.fontSize": 22, + "editor.formatOnPaste": true, + "editor.formatOnSave": true, + "editor.lineNumbers": "on", + "editor.matchBrackets": "always", + "editor.minimap.enabled": false, + "editor.smoothScrolling": true, + "editor.tabSize": 2, + "editor.useTabStops": true, + "emmet.triggerExpansionOnTab": true, + "explorer.openEditors.visible": 0, + "files.autoSave": "afterDelay", + "screencastMode.onlyKeyboardShortcuts": true, + "terminal.integrated.fontSize": 18, + "workbench.activityBar.visible": true, + "workbench.colorTheme": "Visual Studio Dark", + "workbench.fontAliasing": "antialiased", + "workbench.statusBar.visible": true, + "liveServer.settings.root": "/docs", + "prettier.enable": true, + "eslint.alwaysShowStatus": false, + "liveServer.settings.donotVerifyTags": true +} From 7134fc67e23b278982e7cc5c47601044ed58c000 Mon Sep 17 00:00:00 2001 From: Lindsey Lansford Date: Mon, 6 Feb 2023 15:31:43 -0700 Subject: [PATCH 5/5] Update style.css adding transforms --- Begin/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Begin/style.css b/Begin/style.css index 2b96da6..63322b2 100644 --- a/Begin/style.css +++ b/Begin/style.css @@ -8,7 +8,7 @@ body { img {width: 150px;} .robot { - + transform:translate(100px, 200px) scale(2) rotate(45deg) }