Show page

Differences

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

--- se:labs:01 [2018/10/07 22:09]
emilian.radoi
+++ se:labs:01 [2025/10/06 20:50] (current)
ion_irinel.dinu [Animations!]
@@ Line 1: / Line 1: @@
 ====== Lab 01 - Web Basics ======
+**[[https://drive.google.com/file/d/10U06eHRDn0e0qfFdGXRvgmcUkJ0TmcxG/view?usp=sharing | Brief introduction video]]**
 The web is the backbone of the internet, and the largest application platform today. This is all due to a core characteristic:
@@ Line 60: / Line 62: @@
 ===== How does rendering actually happen ? =====
-The page rendering process is broken up into multiple steps, as shown in this diagram:
+The browser goes through several steps to transform HTML and CSS code into what you see on screen.
+This process is known as the browser rendering pipeline, and it looks like this:
-{{:rendering-pipeline.png| Browser rendering pipeline}}
+{{:se:labs:rendering.png?500|}}
-[[http://dbaron.github.io/browser-rendering/|Image source]]
+[[https://webperf.tips/static/4e73c9992ce3b9177bcc80a2113b3138/906b5/BrowserRenderingPipeline01.png | Source Image]]
+Here’s what happens at each stage:
+  * //(HTML Text → DOM Tree)// → The browser parses the HTML document and builds a Document Object Model (DOM) — a structured tree that represents all elements on the page.
+  * (CSS Stylesheet Text → CSSOM) → In parallel, the browser parses all CSS rules to create the CSS Object Model (CSSOM), which defines how each element should look.
+  * Style (Render Tree) → The DOM and CSSOM are then combined into a Render Tree — a structure that contains only the visible elements and their computed styles.
+  * Layout (Geometry) → The browser calculates the position and size of each element on the page. This step is also known as reflow.
+  * Paint Pixels → Finally, the browser paints the pixels on the screen according to the layout and styles.
+The browser may repeat parts of this process when content changes (for example, if JavaScript updates the page).
+The most important stages for understanding performance are the DOM/CSSOM construction, layout, and painting — represented by the blue and purple boxes above.
-If you follow the pipeline above, you'll see that the steps are more or less as follows. We'll ignore the ''%%Script%%'' blocks for now.
-  * Parse HTML and generate the page structure tree (we call this the [[https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model|DOM]], or the Document Object Model)
-  * At the same time, parse any CSS we have and create the style structure (this is called the [[https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model|CSSOM]], a counterpart tree of the DOM that tells us how each element should look)
-  * After we have both the DOM and the CSSOM, we match the nodes in each tree and begin rendering and displaying on the screen.
-There are a few extra steps in the pipeline such as ''%%reflow%%'' / ''%%layout%%'', ''%%paint%%'' and ''%%composite%%'', but all you really need to follow in the image above are the blue and purple boxes.
 ===== Examples =====
@@ Line 208: / Line 217: @@
   * **//GET//** - Requests a resource from the server (e.g. ''%%GET /index.html%%'')
-  * **//PUT//** - Adds a new resource to the server (e.g. ''%%PUT /users/new%%'')
+  * **//POST//** - Adds a new resource to the server (e.g. ''%%POST /users/new%%'')
-  * **//POST//** - Edits a resource from the server (e.g. ''%%POST /users/ion%%'')
+  * **//PUT//** - Edits a resource from the server (e.g. ''%%PUT /users/ion%%'')
   * **//DELETE//** - Deletes a resource from the server (e.g. ''%%DELETE /users/andrei%%'')
@@ Line 283: / 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.
 ==== Classes ====
@@ Line 352: / Line 359: @@
 </p>
 </HTML>
 ==== The Box Model ====
@@ Line 357: / Line 366: @@
 CSS relies on what is called a //box model//. When we say that the HTML tags are rendered as boxes, these boxes have certain properties that define how they relate to elements around them. An easy way to view the box model is this graphic that you can find in most browser's developer tools menu:
-{{https://mdn.mozillademos.org/files/14241/box-model.png?650}}
-[[https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model|CSS Box Model on MDN]]
+{{:se:labs:box-model.png?600|}}
+[[https://firefox-source-docs.mozilla.org/_images/box-model.png | Source Image]]
 There are four basic components of a box:
@@ Line 389: / 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 454: / 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 483: / 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 495: / Line 569: @@
 [[https://guides.github.com/features/pages/|Getting started with GitHub Pages]]
-====== Task ======
+====== Tasks ======
+**Task 1**  -  Modify the //task.css// file from {{:se:labs:task1.zip|Task 1}} to make the human do something (e.g. jump).
-Create a personal page and host it using GitHub 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.
-Personal page examples:
+**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]]
-[[https://www.cosmindumitrache.com/|Example]]
+====== Feedback ======
+Please take a minute to fill in the **[[https://forms.gle/PNZYNNZFrVChLjag8 | feedback form]]** for this lab.

General Information

Lectures

Labs

Resources

Assignment

Project

se/labs/01.1538939344.txt.gz · Last modified: 2018/10/07 22:09 by emilian.radoi

Show page Old revisions

Media Manager Back to top