Skip to content

01 01b #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions .devcontainer/devcontainer.json
Original file line number Diff line number Diff line change
@@ -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
2 changes: 1 addition & 1 deletion .github/CODEOWNERS
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
# Codeowners for these exercise files:
# * (asterisk) deotes "all files and folders"
# * (asterisk) denotes "all files and folders"
# Example: * @producer @instructor
14 changes: 14 additions & 0 deletions .github/workflows/main.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
name: Copy To Branches SJM
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: smoser-LiL/copy-to-branches-sjm@v1
env:
key: main
28 changes: 28 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -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
}
14 changes: 14 additions & 0 deletions Begin/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>01_01_CSS_Transform_Basics</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<img src="robot.svg" alt="red body robot with a single wheel" class="robot">
</body>

</html>
237 changes: 237 additions & 0 deletions Begin/robot.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 31 additions & 0 deletions Begin/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
body {
display: flex;
justify-content: center;
margin-top:3em;
background-color: #372D4D;
}

img {width: 150px;}

.robot {
transform:translate(100px, 200px) scale(2) rotate(45deg)
}



















5 changes: 1 addition & 4 deletions NOTICE
Original file line number Diff line number Diff line change
@@ -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
Expand Down
35 changes: 23 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,36 @@
# 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.

## Branches
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