WEB CODING

A Gemini AI question returned, as part of its answer:

Over 80% of front-end job listings require proficiency in the foundational trifecta: HTML, CSS, and JavaScript.

So, to learn coding, start with the Web. Here is how: AI is brilliant for web pages. Type this into Gemini, ChatGPT, or Grok:

Prepare a web page for me saying “Hello World”, styled with a cyan background and yellow text. Make it slowly draw a 900 pixel purple bar 15 pixels high from left to right.

Gemini will give the opportunity to Preview the page. Just remember this: with any kind of coding, the devil is in the precision and detail. A single character out of place or left out can fail a page. It is called syntax and you have to get it exactly right. Good luck!

If you feel like progressing to doing some work yourself, do as follows: Copy all the text below and paste to a document in a text editor like Notepad. Be sure to save it with the file type ".html", something like “testweb.html”. It is a web page, and will not work if not correctly named.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intro to Web Coding</title>

    <style>
        body {
            background-color: purple;
            color: white;
            font-family: sans-serif;
            width: 1200px;
            margin: auto;
        }
        .underline {
            text-decoration: underline;
        }
        #yellow-bar {
            position: absolute;
            height: 15px;
            background-color: yellow;
            color: black;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 5px;
            white-space: nowrap;
        }
    </style>

</head>
<body>

    <h1>Intro to web coding</h1>

    <h2>Header two</h2>

    <h3 class="underline">Header three</h2>

    <hr>

    <div id="yellow-bar">drawing a line 0</div>

    <script>
        const bar = document.getElementById('yellow-bar');
        const barWidth = 900;
        let currentWidth = 0;
        let counter = 0;
        const speed = 10; // Adjust for drawing speed

        const drawBar = () => {
            if (currentWidth < barWidth) {
                currentWidth += speed;
                if (currentWidth > barWidth) {
                    currentWidth = barWidth;
                }
                bar.style.width = currentWidth + 'px';
                bar.style.right = '0'; // Keep the bar aligned to the right
                requestAnimationFrame(drawBar);
            }
        };

        const updateText = () => {
            bar.textContent = `drawing a line ${counter}`;
            counter++;
        };

        setInterval(updateText, 1000);
        drawBar();
    </script>

</body>
</html>

Once saved, navigate to the file, and double click on the file name. Your browser will open the page. It has a purple background, a title and two sub headers in white text, and draws a yellow bar with text “drawing a line”, and a counter incrementing every second.

HTML

The whole document, says the source code above, is an HTML document. Within it there are sections enclosed in HTML tags. Tags are things like

<style></style>

and

<script></script>.

They tell HTML what to do with the text they enclose. They almost always appear in opening and closing pairs.

CSS (Cascading Sytle Sheets)

The style tags enclose CSS to style the page: things like font colours and size, background colours, positiong, and more.

Javascript

The script tags enclose a javscript program that draws the yellow bar across the page, writes “Drawing a line” on it, and prints a counter incrementing each second from the time the page is opened. Javascript, unlike HTML and CSS, is a real programming language, in your browser. It can DO THINGS in the page.

Try this:

Delete everything including and between the script tags. Save the document, and double click it. The yellow bar and counter have vanished.
Do the same with the style opening and closing tags. The page is now black text on a white background.

There you have them: the trio of HTML, CSS and Javascript, and what they do. Go through the code (it is the page’s source code) line by line. If you understand it, and it doesn’t bore you to tears, you will possibly learn coding. If not, leave coding well alone. This is as good as it gets.

You can restore the style and script sections by copying and pasting them in from the code section above. Play with the page. Look at w3schools for examples. Change the background colour, the words. Do your thing! There are millions of free tutorials on the web teaching all three of these skills and more.