Why HTML, CSS is a foundation for Web Development

By: ANAND SUNDARAMOORTHY SA

5 December 2024 at 17:39

In the vast world of web development, HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) serve as the fundamental building blocks for creating websites. Why HTML and CSS are not replaceable?

Any idea about it?

Today in the blog we did not discuss the boring history of web development. We discuss why HTML and CSS are a base for web development. Even in advanced technologies Like React JS and Angular JS, the base is HTML and CSS. Come on guys, let’s take a dive.

As a small Intro, HTML is the backbone of any webpage. It provides the structure, content, and layout for web pages by using a set of predefined tags and elements. As simple it’s a Skeleton for the Webpage.

CSS controls the visual presentation of the HTML structure. It defines how the HTML elements should be styled, such as their colors, fonts, spacing, and layout. Here CSS is simply the Skin for Webpage.

Even with the advent of advanced frameworks like React.js, Vue.js, and Angular.js. HTML and CSS remain irreplaceable because these technologies operate on top of them. Every framework and library still relies on HTML for structure and CSS for styling. For example,

Normal HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

In React:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Example</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        const App = () => {
            return (
                <div>
                    <h1>Hello, World!</h1>
                </div>
            );
        };

        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>

</html>

Here you see guys, the React is written under the HTML. Why?

In the beginning stage of web development, they start with HTML and CSS only. Then, as it continued evolving, it became base and mandatory. So, only use any frameworks in any language.

Like

Python — Flask, Django

Java — Spring, Spring Boot

JavaScript — React JS, Angular JS.

They paired/collaborated with HTML and CSS.

Finally, I think we understand, that HTML and CSS will always remain the core of web development, no matter how advanced frameworks or libraries become. These foundational technologies are irreplaceable because they provide the structure and styling necessary for any web page. While tools like React, Angular, and Vue offer enhanced functionality and interactivity, they still rely on HTML for content structure and CSS for styling. As web technologies continue to evolve, HTML and CSS will adapt, but their fundamental role in web development will never change. So, mastering these technologies is essential for every web developer, as they are the building blocks that power the internet.

VS Raj
HTML- ChessBoard
10 January 2025 at 02:57

HTML- ChessBoard

VS Raj

By: vsraj80

10 January 2025 at 02:57

<!DOCTYPE html>

<html>

<head>

<style>

html{

background-color: gray;

}

body{

width:400px;

height:400px;

margin:0 auto;

margin-top: 50px;

background-color: red;

}

.row{

width:50px;

height:50px;

float:left;

}

.color1{

width:50px;

height:50px;

background-color:white;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

.color2{

width:50px;

height:50px;

background-color:red;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Elavarasu
JAVASCRIPT
25 October 2024 at 09:56

JAVASCRIPT

Elavarasu

By: Elavarasu

25 October 2024 at 09:56

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

Chrome – V8-engine
Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

Variables declared outside any function or block have global scope.
These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

Variables declared within a function are local to that function.
They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

Elavarasu
JAVASCRIPT
25 October 2024 at 09:56

JAVASCRIPT

Elavarasu

By: Elavarasu

25 October 2024 at 09:56

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

Chrome – V8-engine
Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

Variables declared outside any function or block have global scope.
These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

Variables declared within a function are local to that function.
They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

Normal view