Show page

Differences

This shows you the differences between two versions of the page.

--- se:labs:01 [2025/10/05 19:29]
ion_irinel.dinu [Taiwlind]
+++ se:labs:01 [2025/10/06 20:50] (current)
ion_irinel.dinu [Animations!]
@@ Line 292: / Line 292: @@
 </code>
 As you can see, we pick an HTML tag and say what properties it should have. We define things such as the size of the font, or background color, or spacing between it and other elements.
-===== 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 ====
@@ Line 388: / Line 359: @@
 </p>
 </HTML>
 ==== The Box Model ====
@@ Line 428: / Line 401: @@
 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;}
+% {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>
-.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 {
-  from {
+  from { border-radius: 0; transform: scale(1); opacity: 1; }
-    border-radius: 0;
+% { border-radius: 100px; transform: rotate(180deg); opacity: 0; }
-    transform: scale(1);
+  to { border-radius: 0; transform: rotate(360deg); opacity: 1; }
-    opacity: 1;
-  }
-% {
-    border-radius: 100px;
-    transform: rotate(180deg);
-    opacity: 0;
-  }
 }
 </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).
@@ Line 493: / Line 475: @@
 </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.
+===== 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 =====
@@ Line 522: / 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.
-We will delve deeper into JavaScript in the lab.
+We will delve deeper into JavaScript in the next lab.
 === jQuery is not JavaScript ===
@@ Line 538: / 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 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 ======

General Information

Lectures

Labs

Resources

Assignment

Project

se/labs/01.1759681741.txt.gz · Last modified: 2025/10/05 19:29 by ion_irinel.dinu

Show page Old revisions

Media Manager Back to top