Differences
This shows you the differences between two versions of the page.
|
se:labs:01 [2025/10/05 19:29] ion_irinel.dinu [CSS] |
se:labs:01 [2025/10/06 20:50] (current) ion_irinel.dinu [Animations!] |
||
|---|---|---|---|
| Line 361: | Line 361: | ||
| - | ===== Taiwlind ===== | ||
| - | |||
| - | Tailwind CSS is a modern, utility-first CSS framework that helps developers build stylish, responsive websites without writing custom CSS. | ||
| - | Instead of defining styles in separate CSS files, you apply predefined utility classes directly to your HTML elements. | ||
| - | What makes Tailwind different? | ||
| - | Traditional CSS requires writing custom class names and defining them in a stylesheet. | ||
| - | For example: | ||
| - | <code css> | ||
| - | <button class="btn">Click me</button> | ||
| - | </code> | ||
| - | <code css> | ||
| - | .btn { | ||
| - | background-color: #1d4ed8; | ||
| - | color: white; | ||
| - | padding: 0.5rem 1rem; | ||
| - | border-radius: 0.375rem; | ||
| - | } | ||
| - | |||
| - | </code> | ||
| - | With Tailwind, the same button can be styled directly in HTML using ready-made classes: | ||
| - | <code> | ||
| - | <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"> | ||
| - | Click me | ||
| - | </button> | ||
| - | </code> | ||
| - | |||
| - | |||
| - | |||
| - | ==== Classes ==== | ||
| - | |||
| - | We've seen that, in CSS, we can apply rules to elements based on their tag. For example, this rule: | ||
| - | |||
| - | <code css> | ||
| - | div { | ||
| - | background-color: red | ||
| - | } | ||
| - | </code> | ||
| - | will make all the ''%%div%%'' elements on the page have a red background color. | ||
| - | |||
| - | But what if we want to target a specific element ? That's where the ''%%class%%'' attribute comes in - it allows us to select all elements that have that specific class. For example, given this HTML code: | ||
| - | |||
| - | <code> | ||
| - | <div> | ||
| - | <p> I am a paragraph </p> | ||
| - | <p class='red'> I have red text color </p> | ||
| - | </div> | ||
| - | </code> | ||
| - | We can make the second paragraph have the text color red by applying these CSS rules: | ||
| - | |||
| - | <code css> | ||
| - | .red { | ||
| - | color: red | ||
| - | } | ||
| - | </code> | ||
| - | This will result in something like this: | ||
| - | |||
| - | <HTML> | ||
| - | <p> | ||
| - | </HTML> | ||
| - | I am a paragraph | ||
| - | <HTML> | ||
| - | </p> | ||
| - | <p style="color: red"> | ||
| - | </HTML> | ||
| - | I have red text color | ||
| - | <HTML> | ||
| - | </p> | ||
| - | </HTML> | ||
| - | |||
| - | You can also be more explicit, and specify that a certain rule should only be applied to paragraph tags with the ''%%.red%%'' class that are under a ''%%div%%'' tag: | ||
| - | |||
| - | <code css> | ||
| - | div .red { | ||
| - | color: red; | ||
| - | } | ||
| - | </code> | ||
| - | With the following HTML, this is the result that will appear: | ||
| - | |||
| - | <code> | ||
| - | <div> | ||
| - | <p class='red'> I have red text color </p> | ||
| - | </div> | ||
| - | <p class='red'> I have red class but no red text color </p> | ||
| - | </code> | ||
| - | <code> | ||
| - | <p style="color: red"> I have red text color </p> | ||
| - | </code> | ||
| - | |||
| - | <HTML> | ||
| - | <p class="red"> | ||
| - | </HTML> | ||
| - | I have red class but no red text color | ||
| - | <HTML> | ||
| - | </p> | ||
| - | </HTML> | ||
| ==== The Box Model ==== | ==== The Box Model ==== | ||
| Line 496: | Line 401: | ||
| CSS also allows us to animate HTML elements. Let's bring back the photo above: | CSS also allows us to animate HTML elements. Let's bring back the photo above: | ||
| - | <html><img src='https://comotion.uw.edu/wp-content/uploads/2017/06/image.jpg' class='animated' /></html> | + | <html><iframe width="250" height="250" srcdoc=' |
| + | <style> | ||
| + | .box { | ||
| + | width:100px; height:100px; background:#4a90e2; | ||
| + | animation:image-animation-example 2s infinite; | ||
| + | } | ||
| + | @keyframes image-animation-example { | ||
| + | from {border-radius:0; transform:scale(1); opacity:1;} | ||
| + | 50% {border-radius:100px; transform:rotate(180deg); opacity:0;} | ||
| + | to {border-radius:0; transform:rotate(360deg); opacity:1;} | ||
| + | } | ||
| + | body {display:flex; justify-content:center; align-items:center; height:100vh; margin:0; background:#f4f4f4;} | ||
| + | </style> | ||
| + | <div class="box"></div>'></iframe> | ||
| + | </html> | ||
| - | If we take a look at the CSS applied to the image, we get a hint on how CSS animations work: | + | If we take a look at the CSS applied inside the iframe, we can understand how CSS animations work: |
| <code css> | <code css> | ||
| - | .image-css-example .animated { | + | .box { |
| - | animation-name: image-animation-example; | + | width: 100px; |
| - | animation-duration: 2s; | + | height: 100px; |
| - | animation-iteration-count: infinite; | + | background: #4a90e2; |
| + | animation: image-animation-example 2s infinite; | ||
| } | } | ||
| @keyframes image-animation-example { | @keyframes image-animation-example { | ||
| - | from { | + | from { border-radius: 0; transform: scale(1); opacity: 1; } |
| - | border-radius: 0; | + | 50% { border-radius: 100px; transform: rotate(180deg); opacity: 0; } |
| - | transform: scale(1); | + | to { border-radius: 0; transform: rotate(360deg); opacity: 1; } |
| - | opacity: 1; | + | |
| - | } | + | |
| - | + | ||
| - | 50% { | + | |
| - | border-radius: 100px; | + | |
| - | transform: rotate(180deg); | + | |
| - | opacity: 0; | + | |
| - | } | + | |
| } | } | ||
| + | |||
| </code> | </code> | ||
| - | As you can see, we use a couple of rules: | ||
| - | * ''%%animation-name%%'' - this tells the browser what animation rules to use | + | As you can see, we use a few key properties: |
| - | * ''%%animation-duration%%'' - this is evident - the duration that the animation will run for | + | * animation-name – specifies which animation sequence to apply |
| - | * ''%%animation-iteration-count%%'' - this defines the number of times the animation will repeat | + | * animation-duration – defines how long the animation lasts (2 seconds in this case) |
| + | * animation-iteration-count – controls how many times the animation repeats (here, it loops infinitely) | ||
| These three rules are the bare minimum needed in order to add an animation to a HTML element. But we still need to define how the animation will look like. We do this by using a ''%%@keyframes%%'' declaration, followed by the animation name (the one we set in the ''%%animation-name%%'' property). | These three rules are the bare minimum needed in order to add an animation to a HTML element. But we still need to define how the animation will look like. We do this by using a ''%%@keyframes%%'' declaration, followed by the animation name (the one we set in the ''%%animation-name%%'' property). | ||
| Line 561: | Line 475: | ||
| </code> | </code> | ||
| This rule takes two parameters: the first represents the horizontal distance from the top left corner, and the second represents the vertical distance from the same corner. | This rule takes two parameters: the first represents the horizontal distance from the top left corner, and the second represents the vertical distance from the same corner. | ||
| + | |||
| + | ===== Taiwlind ===== | ||
| + | |||
| + | Tailwind CSS is a modern, utility-first CSS framework that helps developers build stylish, responsive websites without writing custom CSS. | ||
| + | Instead of defining styles in separate CSS files, you apply predefined utility classes directly to your HTML elements. | ||
| + | What makes Tailwind different? | ||
| + | |||
| + | |||
| + | Traditional CSS requires writing custom class names and defining them in a stylesheet. | ||
| + | For example: | ||
| + | <code css> | ||
| + | <button class="btn">Click me</button> | ||
| + | </code> | ||
| + | <code css> | ||
| + | .btn { | ||
| + | background-color: #1d4ed8; | ||
| + | color: white; | ||
| + | padding: 0.5rem 1rem; | ||
| + | border-radius: 0.375rem; | ||
| + | } | ||
| + | </code> | ||
| + | With Tailwind, the same button can be styled directly in HTML using ready-made classes: | ||
| + | <code css> | ||
| + | <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"> | ||
| + | Click me | ||
| + | </button> | ||
| + | </code> | ||
| + | Here’s what happens: | ||
| + | * bg-blue-600 sets the background color | ||
| + | * text-white sets the text color | ||
| + | * px-4 py-2 adds horizontal and vertical padding | ||
| + | * rounded-md gives the button rounded corners | ||
| + | * hover:bg-blue-700 changes the background color when hovered | ||
| + | |||
| + | //How to use Tailwind (CDN method)// | ||
| + | To quickly use Tailwind in a project, include it via CDN in your <head> tag: | ||
| + | <code css> | ||
| + | <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> | ||
| + | </code> | ||
| + | Now we can use tailwind css classes: | ||
| + | <code css> | ||
| + | <div class="min-h-screen flex flex-col items-center justify-center bg-gray-100"> | ||
| + | <h1 class="text-4xl font-bold text-indigo-600 mb-4">Hello, Tailwind!</h1> | ||
| + | <p class="text-gray-700 text-lg">This layout was built without a single line of CSS.</p> | ||
| + | </div> | ||
| + | </code> | ||
| + | === Tailwind in 100 seconds === | ||
| + | <HTML> | ||
| + | <iframe width="560" height="315" src="https://www.youtube.com/embed/mr15Xzb1Ook?si=BbGRJ9mz_8yLkP9A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | ||
| + | </HTML> | ||
| + | |||
| + | === Why use Tailwind? === | ||
| + | Tailwind offers speed, consistency, and simplicity. It allows designers and developers to work faster, maintain cleaner projects, and focus more on building — not styling. | ||
| ===== JavaScript ===== | ===== JavaScript ===== | ||
| Line 590: | Line 557: | ||
| * Semicolons in JavaScript are optional. We recommend using something like [[https://github.com/sheerun/prettier-standard|prettier-standard]] paired with an editor such as [[https://code.visualstudio.com/|Visual Studio Code]] when developing in JavaScript. | * Semicolons in JavaScript are optional. We recommend using something like [[https://github.com/sheerun/prettier-standard|prettier-standard]] paired with an editor such as [[https://code.visualstudio.com/|Visual Studio Code]] when developing in JavaScript. | ||
| - | We will delve deeper into JavaScript in the lab. | + | We will delve deeper into JavaScript in the next lab. |
| === jQuery is not JavaScript === | === jQuery is not JavaScript === | ||
| Line 606: | Line 573: | ||
| **Task 1** - Modify the //task.css// file from {{:se:labs:task1.zip|Task 1}} to make the human do something (e.g. jump). | **Task 1** - Modify the //task.css// file from {{:se:labs:task1.zip|Task 1}} to make the human do something (e.g. jump). | ||
| - | **Task 2** - Create a personal page and host it using GitHub Pages. Here are two examples of personal pages: | + | **Task 2** - Modify the //task2.html// from {{:se:labs:task2_tailwind.zip|Task 2}} and center a box (div) on the screen using three different Tailwind approaches. |
| - | * [[https://www.cosmindumitrache.com/|Example1]] | + | |
| - | * [[https://juokaz.com/|Example2]] | + | **Task 3** - Create a personal page and host it using GitHub Pages. Here are two examples of personal pages: |
| + | * [[https://geocushen.com|Example1]] | ||
| + | * [[https://www.taniarascia.com/|Example2]] | ||
| ====== Feedback ====== | ====== Feedback ====== | ||
