BUILDING AND INTERACTIVE WEBSITE OR WEB APP with (HTML, CSS and JavaScript programming language)

alibrain (61)in Teachers & Students • 13 days ago

website development made simple

Hello readers and viewers, I'll bring you a new update, I hope no one has forgotten about me, I still remain who I am. It has been a bit tough, but to God be the glory. 😊

According to my post topic above, I want to explain the basics of the programming languages below. 👇

‎HTML programming language
CSS programming language
JS commonly known as JavaScript.

‎

‎Before I continue to explain the meaning of each language, these three programming languages are core in building a website or web app. I have built 5 websites with this programming language. One of them is my best.
You don't need to click the link below, if you don't want to. 👇

https://joro-tech-costumers.pages.dev/
‎

‎lets continue.

‎

`HTML`

Hypertext Markup Language, commonly known as HTML language or code, is the fundamental structure of a program. It's just like building a house but from the foundation. So many websites or web apps use this language to structure their programs and make them unique.

General and basic HTML code.

index.html

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="heading">Hello, World!</h1>
<button id="btn">Click Me</button>
<script src="script.js"></script>
</body>
</html>

‎

`CSS`

‎Cascading Style sheets also commonly known as CSS is a programming language that helps in making you programming or program colourful and beautiful. Generally it is used to control the layout and responsiveness of a website or web app. It can be simply explained more physically in structures, just like after building your house to a certain standard, you decide to paint it in a way that looks more beautiful.

Basic CSS code.

style.css

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}

#heading {
color: #00698f;
}

button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
}

button:hover {
background-color: #3e8e41;
}

‎

`JAVASCRIPT`

‎JS, people really know it by the name JavaScript. This is a programming language that helps make everything in your website or web app interactive. Just like after building (HTML) and painting (CSS), JavaScript is the electricity in the website; it helps in making buttons click and respond.

Basic JavaScript code.

script.js

document.getElementById('btn').addEventListener('click', function() {
document.getElementById('heading').innerText = 'Button Clicked!';
});

‎

‎
If you want to write these 3 programming languages in a single HTML file code, it is written this way.

Complete: index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}

#heading {
  color: #00698f;
}

button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3e8e41;
}

</style>
</head>
<body>

<h1 id="heading">Hello, World!</h1>
<button id="btn">Click Me</button>

</body>
</html>

Note: Edit all tags from this &lt; &gt; to this <> </> respectively. For example, (&lt;/body&gt;) rewrite it to </> The space in the middle after this sign / is for body, this is a closing tag and this is an opening tag <> in between it write body. Opening tags usually comes before the closing tag.

👆 The above note are for people who are willing to share their programs on steemit blog

TAGS	MEANING	STEEMIT MARKDOWN STYLING
<></>	Opening and closing tag	< > </>

Don't worry about anything; I'll teach you more about how to use the basic tags and what each means.

Download a code editor; for me, I recommend ACODE. Go to the Play Store on Android; for iOS or iPhone, go to the App Store, search for it, and download it if you're interested.
I would love it if @bossJ26 joined my content. 😂
Thank you all for you time. © AlibrainHub

IPFS Video

^{Posted with Speem}

#steem #steemit #speem #steemvideo #educationalvideo #tech #creativewriting #nigeria