Some thoughts and building a welcoming page with HTML, CSS & JS.

vidder (61)in Steem Africa • 4 years ago

I see that I am getting more engagements on my posts that are related to coding. And I am thinking about creating some cool Tutoring works. Many people that are checking may not really know much about coding and I think they need to understand the basic and the building blocks so that they won't miss things on their journey to code.

I developed the zeal to code years ago, but I could not get the right materials and advice for beginners. All I hear then was just "go online and pick any Javascript Tutorials" I downloaded many and it seems they were doing magics. I watched them several times and got tired. Until I found someone that took me through the process to be a full stack developer.

Coding is a long journey. I have been coding for a while and I focus on more in front-end development. I do stuff with Nodes but I find more fun on the User interfaces. I like working with Vanilla JS, Angular and Vue. And of cause, the building blocks must not be ignored, Html and CSS.

I like to do something in the process to teach real beginners something from HTML, CSS AND JAVASCRIPT. I may reach something with Firebase and some libraries. But, it will be something that the people that wish to learn to code would get from.

So, for today, I will share some codes on some fun stuff do. It is a simple UI with some JavaScript that greet site visitors.

Shot 0010.png

Texts in the input column will show on the UI to great the User. Check through the images and codes to see how it works.
Shot 0009.png

_HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Greeting</title>
</head>
<body>
    
    <div class="all">
    <h1>Welcome to my website</h1>
    <h2>Glad to see you here.</h2>
    <h2>What is your name?</h2>
    <input id="username" type="text">
    <button id="submit">Submit</button>
    </div>

    <script src="app.js"></script>
</body>
</html>

_CSS

body {
    background: #e2803e;
}

.all {
    text-align: center;
    padding-top: 20%;
    color: #fff;
}

_JS

let button = document.getElementById('submit');
button.onclick = userGreeting;

function userGreeting(){
    let greeting = document.getElementsByTagName('h1')[0];
    let input = document.getElementById('username').value;
    greeting.innerHTML = `Hello ${input} Welcome To My Website`;
}

I would like to know your view in the comment section. If you wish to see something that you could pick up some coding skills from, let me know on the comment section. Two positive comments are enough to make me start doing it.

Thank you. Have a great day!

#codeonsteem #steemit #devs