Chapters

Lets Dive in with Some Coding in H.T.M.L.(H.T.M.L.5) and C.S.S.(C.S.S.3)

Now, you are required a BOILERPLATE HTML-Coding which you usually see in the VS-Code whenever you decide to built your very-first webpage(s). 

In the Computing-World, their are SOFTWARES-&-HARDWARES and It is my decision to provide every-points related with these concepts as-well, but here you are required to open your notepad and make three files one-by-one with the name of your choice but with the extensions that is,

  • index.html;
  • style.css, and;
  • script.js

This is the basic or I must say very-basic Project-Structure constituting only three files.

The "script.js" file is the JavaScript-File and in this file you're suppose to write coding which follow JAVASCRIPT-SPECIFICATIONS or you can say JavaScript-Standards, why that becasue when you write any code (one-liner or multiple-lines), you write something into the file and all code which you mention are the parts of that standards and those keywords have their full-definition inside that standards/specifications along-with if you go-through with-that thoroughly you might see the usage of particular keyword or how the keyword relates with another-keyword etc. You can also see the concepts of built-in libraries and old-&-new JavaScript Frameworks, built-in functions(custom-functions), built-in eventListeners and lots more and I cover these concpets in subsequent-chapters as-well.

The "style.css" file is the Cascading Style Sheet(Stylesheet) File and in this file you can write the code which provides styles to the H.T.M.L. elements. I've covered some details regarding the document of html/css previously also and for that you are required to open my HOMEPAGE(https://essenceoftoday.org) and visits the DEFINITIONS-SECTION.

The "index.html" file is the HyperText Markup File and in this file you can write the code which is the ultimate webpage-structure and without this file, it is impossible to create your webpage(s) and to develop your website(s).

Now, the boilerplate code is in next-window that is,

Lets, move ahead with the example-coding and I make sure to write points in-refrence to the coding done below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpage Title</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .viewport{
            width: 100%;
            height: 500px;
            overflow: hidden /* Hides the contents outsides the viewport-container i.e outside set width and height */;
            position: relative;
            border: 1px solid #ccc; 
        } 
        .zoom-content{            
            /* Transition for smoother zoom animation */
            transition: transform 0.1s ease-out; 
            transform-origin: 0 0 /* Ensures scaling starts from top-left */;
        }
    </style>
</head>
<body>
    <!-- All visible content goes here -->
    <div class="viewport">
        <div class="zoom-content" id="zoom-area">
            <!-- Your web page content (images, text, etc.) goes here -->
            <h1>Zoomable Content</h1>
            <p>Move your cursor over this area and use the scroll wheel to zoom.</p>
            <img src="example.jpg" alt="Example image">
        </div>   
    </div>
    <!-- <h1>Hello World!</h1> -->
    <script src="script.js"></script> 
    <script>
        const viewport = document.querySelector('.viewport');
        const zoomArea = document.querySelector('zoom-area');
        let scale = 1;
        const zoomFactor = 0.1 /* How much to zoom in/out with each scroll */
         let originX = 0;
         let originY = 0;
        
        viewport.addEventListener('wheel',(event) => { 
            /* wheel is in-built event-listener defined in JavaScript */
            /* Calculating cursor-position relative to viewport-container */ 
                    
            /* clientX, clientY are pre-defined keywords and getBoundingClientRect() is pre-defined functions associated with the event 'wheel' with left, top as another keyword which is also associated with the container viewport as-per the JavaScript-specifications and the argument 'event' is used to access keywords defined under "wheel event" with deltaY is alao a keyword */
            
            const mouseX = event.clientX - viewport.getBoundingClientRect().left;
            const mouseY = event.clientY - viewport.getBoundingClientRect().top;

            const oldScale = scale;
                    /* Determine zoom-direction and new-scale */
            if(event.deltaY < 0){
                scale += zoomFactor; //zoom-in
            }else {
                scale -= zoomFactor; //zoom-out
            }
                    // Clamp scale to reasonable limits
            scale = Math.max(0.5, Math.min(5, scale));
                    
                    // Calculate new origin and translation to keep the point under the cursor stable
            const scaleRatio = scale / oldScale;
            originX = mouseX - (mouseX - originX) * scaleRatio;
            originY = mouseY - (mouseY - originY) * scaleRatio;

                   // Apply the Transformation
                   zoomArea.style.transform = `translate(${originX}px, ${originY}px) scale(${scale})`; 
        });
    </script>
</body>
</html>

I explain everything in right-window of this webpage that is,

Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpage Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- All visible content goes here -->
    <h1>Hello World!</h1>
    <script src="script.js"></script>
</body>
</html> <!-- BOILERPLATE HTML-CODE -->

I hope you all go-through the full-coding. The code will allows a user to zoom-in or zoom-out the browser-window based on the current position of the cursor.

You see that in the same H.T.M.L. - File, you can include CSS-Coding and JavaScript-Coding also. Looking at the code, it is clear that the H.T.M.L. Part utilizing Two "<div></div>" tags that is one is parent-tag and another is child-tag. Usually, the parent-tag is regarded as the container-box or main-container inside you can fit more than one elements keeping in-mind using of those elements which best fits the screen based on the screen-resolution of your current device from mobile screens-tablet screen-desktop screens-or-more bigger-screens amongst from inline, inline-block and block-level H.T.M.L. elements. 

Now the child-divTag is holding <h1></h1>, <p></p> and <img /> tags.

Let dive-in to the CSS-Part of the coding that is, we declare "Two-Classes and One-ID" that is .viewport for parent-divTag and .zoom-content as classes & #zoom-area as ID for child-divTag. In the current-coding, you can't able to see the common-practises which the professionals used to follow-&-practise since this is an example-code, I provide that information in the subsequent-chapters of mine.

Now lets start with the CSS-Coding-Part that is,

.viewport{
            width: 100%;
            height: 500px;
            overflow: hidden /* Hides the contents outsides the viewport-container i.e outside set width and height */;
            position: relative;
            border: 1px solid #ccc; 
        }

as-per the properties used in above you see that viewport is the class declared in HTML-Part and therefore that class will be represented by '.' and the properties used inside it as under,

  • "width", it is the container-width which sets to 100% of <div></div> tag means it takes full width as-per the screen-width;
  • "height", container height sets to 500-pixels;
  • overflow: hidden means that any visible area which going outside of the main-container should not-be shown to the user for the better user-experience otherwise it looks awkward to the eyes.
  • position: relative means that the main-container's position is set to relative so-that inside that container any-other block fits as-per the desire or requirement depends upon the type of contents to render on the screen, also you can able to decide the position of the main-container as-per your will based upon the best display of the web-content on the screens.
  • border: 1px solid #ccc sets the border around the main-container whose width==1-pixels, type-of-border==solid and color-of-border==#ccc(Light-Gray-Color/Gray-80).

 

.zoom-content{            
            /* Transition for smoother zoom animation */
            transition: transform 0.1s ease-out; 
            transform-origin: 0 0 /* Ensures scaling starts from top-left */;
        }
  • .zoom-content is the class and #zoom-area is the id and sometimes both are declared inside the <div></div> and sometimes id is styled in the CSS-Part and sometimes it is called in JavaScript-Part are the need of the coder.
  • Two-properties transition and transform-origin has been used here.
  • The CSS transition property is a shorthand used to smoothly animate changes in an element's style over a specified duration, instead of the change happening instantly. It combines four individual sub-properties to control the effect.
  • Transition Sub-Properties: The transition shorthand property sets values for the following longhand properties: 
Property  Description Values
transition-property Specifies the CSS property (or properties) to which the transition effect should be applied. none, all (default), or specific property names like width, background-color, transform, etc.
transition-duration Specifies the length of time the transition takes to complete. A time value, such as 2s (2 seconds) or 500ms (500 milliseconds). The default is 0s, meaning no animation occurs.
transition-timing-function Specifies the speed curve of the transition effect. ease (default), linear, ease-in, ease-out, ease-in-out, or a custom cubic-bezier() function.
transition-delay Specifies the delay time before the transition effect starts. A time value, such as 1s (1 second) or 250ms (250 milliseconds). The default is 0s.
  • The Shorthand Syntax: Using the shorthand property is more efficient than defining each property individually. The values are typically provided in a specific order: property, duration, timing-function, and delay. 
/* Syntax: transition: property duration timing-function delay; */
.box {
  background-color: blue;
  /* Transitions the background-color over 0.5 seconds with an ease timing function */
  transition: background-color 0.5s ease;
}
.box:hover {
  background-color: green;
}

If you include two time values, the first is always the duration and the second is the delay. 

Key Concepts

  • Triggering Transitions: Transitions are activated by a change in an element's state, often caused by pseudo-classes like :hover, :focus, :active, or by JavaScript class changes.
  • Animatable Properties: Not all CSS properties can be transitioned. Only properties that can have "in-between" values (like numbers, lengths, colors, and transforms) can be animated smoothly. Properties like display cannot typically be transitioned, though modern CSS provides ways to work around this for entry/exit animations (e.g., using @starting-style and transition-behavior:allow-discrete).
  • Performance: For better performance, it is recommended to transition properties like transform and opacity as they are often hardware-accelerated.
  • Accessibility: Use the @media (prefers-reduced-motion:reduce) media query to provide a non-animated experience for users who prefer less motion in their UI. 

The CSS transition property allows you to change property values smoothly (from one state to another) over a specified duration, rather than having them occur instantaneously. It is a shorthand for four individual properties. 

Shorthand Syntax

The values are typically written in this order: 

css

transition: [property] [duration] [timing-function] [delay];

Use code with caution.

 

  • Example: transition: background-color 0.5s ease-in 1s;. 

Individual Properties

Property  Description Default
transition-property The name of the CSS property to animate (e.g., width, opacity, all). all
transition-duration How long the transition takes to complete (e.g., 2s, 500ms). 0s (no animation)
transition-timing-function Specifies the speed curve (e.g., linear, ease-in, cubic-bezier). ease
transition-delay The amount of time to wait before the transition starts. 0s

Key Features

  • Triggers: Transitions are typically triggered by state changes using pseudo-classes like :hover, :focus, or :active, or by adding/removing classes via. JavaScript.
  • Multiple Properties: You can transition multiple properties at different speeds by separating them with commas:
    transition: width 2s, height 1s, background-color 0.5s;.
  • Animatable Properties: Not all properties can transition. Generally, only those with "mid-points" (like colors, numbers, or lengths) are animatable.
  • Performance: For the smoothest animations, it is recommended to transition transform and opacity, as they are GPU-accelerated and don't trigger heavy layout recalculations. 

Common Timing Functions

  • linear: Same speed from start to end.
  • ease: Starts slow, speeds up, and ends slowly (default).
  • ease-in: Starts slow.
  • ease-out: Ends slow.
  • cubic-bezier(n,n,n,n): Custom speed curve using four values. Use https://cubic-bezier.com/ to generate these.

 

  • The CSS transform property is a powerful tool that allows you to rotate, scale, skew, or translate (move) an element in 2D or 3D space without affecting the normal document flow. This is commonly used for visual enhancements, animations, and hover effects.

Key Concepts

  • Syntax: The basic syntax is transform:function(value);.
  • Values: The property accepts one or more transform functions separated by a space, or the keyword none to apply no transformation.
  • Transform Origin: By default, transformations occur around the center of the element. The transform-origin property allows you to change this point of origin.
  • Multiple Transforms: Multiple functions can be combined in a single declaration, e.g., transform: translate(30px, 20px) rotate(20deg) scale(1.2);. The order in which the functions are listed matters. 

Common Transform Functions

The transform property uses various functions to achieve different effects: 

Function  Description Example
translate(x, y) Moves the element along the X and Y axes. transform: translate(50px, 30px);
rotate(angle) Rotates the element clockwise or counter-clockwise by a specified angle. transform: rotate(20deg);
scale(x, y) Resizes the element horizontally and/or vertically. transform: scale(1.4, 1.2);
skew(ax, ay) Skews (tilts) the element along the X and Y axes by a given angle. transform: skew(15deg, 10deg);
matrix(n,n,n,n,n,n) Defines a 2D transformation using a matrix of six values, combining all 2D functions into one. transform: matrix(1, 2, 3, 4, 5, 6);

3D Transforms

CSS also supports 3D transformations, allowing manipulation along the Z-axis. 

  • translate3d(x, y, z): Moves an element in 3D space.
  • rotateX(angle), rotateY(angle), rotateZ(angle): Rotates an element around a specific 3D axis.
  • scale3d(x, y, z): Scales an element in 3D space.
  • perspective(n): Used on the parent element to define a perspective view for its 3D transformed children, adding depth.

The CSS transform property allows you to visually manipulate elements—moving, rotating, scaling, or skewing them—without disrupting the normal document flow. It modifies the coordinate space of the visual formatting model. 

🛠️ Core Transform Functions

Function  Description Example
translate(x, y) Moves an element along the X and Y axes. transform: translate(50px, 20%);
rotate(angle) Rotates an element (deg, turn, rad, grad). transform: rotate(45deg);
scale(x, y) Resizes the width and height. transform: scale(1.5, 0.5);
skew(x, y) Tilts an element along the axes. transform: skew(15deg, 10deg);
matrix() Combines all 2D transforms into a 6-value matrix. transform: matrix(1, 0, 0, 1, 0, 0);

🧭 Key Concepts

  • Order Matters: Functions are applied from right to left (multiplied in order from left to right). For instance, rotate() translate() gives a different result than translate() rotate().
  • transform-origin: By default, transformations happen from the center (50%, 50%). You can change this to corners or specific pixels.
  • 3D Space: You can step into 3D using rotateX(), translateZ(), or scale3d(). This often requires setting a perspective on the parent element.
  • Performance: Transforms are "cheap" for browsers to animate because they often utilize the GPU, avoiding expensive layout recalculations. 

💡 Common Use Case: Centering

A classic trick to perfectly center an absolute element regardless of its size: 

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  • The last-part is the JavaScript-Coding-Part and as I said earlier, you can either link the '.js' file or write the coding inside the same H.T.M.L. Document.
  • Two types of variable-declaration you see that is, 'const' and 'let'. The let is the keyword used before those variables who stores the initial-value of that variable and at later stages stored modified-values as-well according to the program-flow and const variable declared for "<div></div>" tags 'CLASS' and 'ID'. Also, the variable 'zoomFactor' is also declared 'const' and its value remains constant through-out the program-flow from starting-to-end. Go-throught the coding point-out various constant-variables declared in that.
  • Now "viewport.addEventListener('wheel',(event) => {});" is the event-listener defined in the JavaScript-Specification and it triggers through the "<div></div> tags" as I mentioned in earlier, "wheel" is the predefined-event and event is the function-argument.
  • const mouseX = event.clientX - viewport.getBoundingClientRect().left; cursor-position relative to viewport's left-region.            
  • const mouseY = event.clientY - viewport.getBoundingClientRect().top; cursor-position relative to viewport's top-region.
  • You can use "console.log("");" to get the values of your browser's console and save the data in your worksheet.
  • Rest of the document-part is clearly understood when going through the whole-coding.

 
Select Chapter
1. Questionnaire 2. Colors Used in Computers 3. Color Interpolation Steps and Calculations 4. Gradients of Color(s) in CSS 5. Colors Hexa-decimal Codes with Names of Some 6. Overview of Media-Queries in CSS(CSS3) 7. Lets Dive in with Some Coding in H.T.M.L.(H.T.M.L.5) and C.S.S.(C.S.S.3) 8. CSS-Coding Best-Practises under '*', 'html' and 'body' Tags 9. Overview of JavaScript Syntaxes 10. Overview of CSS3 Syntaxes and Practises 11. Overview of H.T.M.L./H.T.M.L.5 Syntaxes