I know little to nothing about HTML but I decided to add on to someone's project which seemed simple enough. I let the AI feature create an addendum to the random text generator originally in the code so that it wouldn't generate the same text twice in a row, but I've got no clue if this would work or if it could be better condensed. Any pointers?

I know very little about html. I'm trying to add a small amount of html to a footer of a build it yourself website. I need to add 4 simple text hyperlinks side by side. I lay them all out with simple <a href="*url*">link text</a> side by side. After submitting, all of the links except one disappear in the html.

Any idea what could be going on? Is there something else I need to do in order to add multiple hyperlinks?

Hi guys, I’ve done a site and I want to put it ion the web. How do I proceed? From who I buy hosting? Where I Buy domain? How do I upload my web site once it is online? I have done all with php, MySQL( for database) and HTML. I tried looking on internet but it so confusing for me.

Hi!

I am currently losing my mind trying to save a Tumblr HTML in which I have changed every http error to https and yet I still cannot find a solution. Anyone that could help? :)

I genuinely don't understand how to make this table-everytime i think i got it right it turns out wrong. I don't understand i tried all the attributes i know

https://preview.redd.it/dc8hv11ggxge1.png?width=431&format=png&auto=webp&s=750a11cecc4fac249fef3de2115022f21fb6895c

Heres what i've done so far:

1 item

1 item

1 item </td>

123

123

123 </td>

1 item

1 item

1 item

123

123

123

Idk maybe there is an easier way to do this buuut Also idk if this is the correct sub D: I am making a web page to promote a fair there is gonna be in my college and the fair has a form where you can vote to choose the best project/team and i am just not able to make the result update in real time.

I made one instance where it did update but then i would delete the vote just shortly after.

Then i thinked of a way of doing with the Google spreadsheet api but i am at my limit rn.

I want the data in the spreadsheet to show as a bar graph in my page where it states the votes per team ex: "team 1 and it's has 5 votes" and do the same with the other 14 teams. But I also want this to update when a new vote is added or when a vote is deleted so it can show the correct number.

Is there a way to do it? help. I have the idea but idk what to do anymore. So i need help. As much as yall can give me

I am building a custom intranet web page that opens automatically as new tab.
However, I want to ensure that:

1. A maximum of one instance of this page is open at a time.
2. If the page is already open in another tab, the browser should switch to that tab instead of opening a new one / or close the old one.
3. If the page is not open, it should open in a new tab normally.

Due to security policy this seems very hard to archieve in modern browsers. How can I get this to work?

I am new in html so if I created a web page but I don't know which host should I take to publish website plz tell me your opinion

Hello, i need help with player

I dont really know much about codes and stuff just trying to make things work on one website.

I copied this player from someone, but i would love to change color and so it doesnt hover, but i dont know how. Can someone help me with this one?

i bought domen and host in some website and add folder to the host (main) but cant find my website in google search why?

I have started html for front-end , but I am facing some problems. I need to know that whether I should make notes for my ongoing course or not. Since I am learning it for the very first time there are too many things to remember I feel , so will it be advisable to make handwritten notes alongwith the course or should I make the notes after completing it. Also, how should I make the notes , like should I jot down most of the things being taught or are there any specific points that I should only include in my notes. It would be helpful if someone could provide some insightful pointers for my notes. Also I am using youtube for video lectures and official MDN document for reading. Thank you 🙏.

Hi ! I'm new to html and I have a bug : my software just doesn't count my div.

Here's the HTML, do you want the flexbox css ?

<!DOCTYPE html>                                                                      <html lang="en">                                                                     <head>                                                                               <meta charset="UTF-8">                                                              <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>                                                                    <link rel="stylesheet" href="flexbox.css" </head>                                   <body>                                                      <div class="container">                                   <div class="item"><button id="lose1" type="submit" onclick="alert('No')">Click</button></div>                                            <div class="item"><button id="lose2" type="submit" onclick="alert('No')">Click</button></div>                                           <div class="item"><button id="won" type="submit" onclick="alert('Yes')">Click</button></div>         </div>                    

I'm very aware that this is all the issue with my code. I'm very new to HTML and I've been learning things from YouTube and while the implementation has been decent, I clearly need to learn to scale my elements better. Or anything else that can help me keep my website presentable on different screen sizes. Sorry if that's a dumb question. Any help is appreciated!

Would anyone know how to go about styling a list like this on html & css.

I'm really confused on like everything so I'm sorry if my question isn't clear enough, butt

I have some html code, some js code and a wasi wasm module

And I want to put that into a native app that can run on the common 5 OSes, preferably serverlessly, but any workaround with the user automatically hosting their own local server similar to e.g. blazor will do too

Is there any framework or something that I can do that with

I am two weeks in to learning Html. I am pretty good at WordPress. I am trying to create a responive menu in Html. Right now, there is no header across the top and the logo and links remain on the left. I can't find good info to understand the relationship between the two, nor why there is not even a header showing. Below is the css styling code I created. .header { background-color: var(--primary-color); color: white; padding: 1rem; position: fixed; display: flex; width: 100%; height: 60px; top: 0; z-index: 1000; }

.nav { position: sticky; display: flex; justify-content: space-between; align-items: center; padding: 0 10px; background-color: var(--primary-color); width: 100%; height: 60px; }

.logo { display: flex; align-items: center; font-size: 100%; font-weight: bold; align-self: center; }

.nav-links { display: flex;
line-height: 25px; list-style: none; align-items: center; align-self: center; }

.nav-links a { display: flex; padding: 0.25rem 0.25rem; color: white; text-decoration: none; font-size: 1rem; text-transform: uppercase; transition: color 0.3s ease; cursor: pointer; }

Hello all,

I am not very familiar with html, but I was tasked with updating my organization's website. Normally, I would take my work from ArcGIS Online and embed it into our website using the auto generated html from ArcGIS and adding it to our organization's WordPress.

This is the autogenerated html from Arcgis

However, I don't like the look of a scrolling frame inside a scrolling browser. Is it possible to adjust the height of the frame such that it displays the entire contents so that I can turn off scrolling and thus use the browser's scroll?

I have tried to look for solutions on reddit, stack overflow. Some suggested height could be "100%" or "100vh" but neither of these seem to work for me, instead it makes the height about 100px.

Any help is appreciated!

Hi everyone, sorry for my English. Long story short, I did want to save a page from the web but the page has been removed. So I tried with wayback archive and I have been able to download the page completely. Given I'm on a Mac and I use Safari, the page has been saved as a webarchive. Ok. In the page (same for the one I've saved in my pc and the one "online" with the wayback site), when I choose to see al the pics of the gallery, one of the thumbnails doesn't work. So... as I was able to see the pic in different dimensions (the only one that doesn't work is when you choose to see the gallery with all the thumbnails, otherwise it's shown), and using firefox and lately safari developers menus, I've seen the dimension of the thumbnails in the gallery, and I did create an image of the missing/not working thumbnail. Given that I'll save that page in my archives only for my pleasure (it's about an estate has been sold, famous because a movie was filmed there in the '50s) I started to think how to change the code of the page to let the page charge the image I've created and not following the address of the missing thumbnail. I'm a zero with developing et similia, so... with the help of chatgpt I create the code that needs to be entered but here it comes the problem. If I save the page via Firefox I can generate a .html page, so it creates a page and a directory with all the images etc. Opening that html I can modify the code, save, and then when I reopen the missing thumbnail is correctly changed with the one I did create. The only problem is that there's some little kind problem with some dimensioning of the page, some missing or spaced icon etc. But... with firefox I can change, save and reopen and the code of the missing image is changed.

BUT, and here's the question why I ask your help... if I change the code in the webarchive format of the page, saved via firefox in a single page which contains everything, I can open the code, change it, save as "xxxx" in a NEW page (which can substitute the original if I choose the same name in the same directory, but I'm not able to save only the change in the code), but when I re-open the page the pic is missing, and the reason is... the code seem to remain unchanged. Given that I'd like to save the page (modified, of course) in the single webarchive page, where's the mistake? ps I'd like to ask you a general question not related to this also, is it possible to see an icon preview of the webarchive pages?

Thanks in advance!!! and sorry if my English is not clear.

Hi there! Let me start by saying that I have very very limited knowledge of anything HTML/CSS. I’m an assistant in an office and I’ve been tasked with keeping our website up to date. Usually this is quite easy and we use the platform CivicLive which is basically a drag and drop system but I’d like to add some visual appeal to our outdated website.

I can see very little of the HTML coding on a page but I’m hoping someone here might be able to help me figure out how to create a shadow behind an image, fade it, or magnify it when hovering the mouse to help imply that it’s a link. Essentially some sort of visual effect. Similar to www.halifax.ca.

The html I can see and edit on an image is:

<img src= “X” alt=“X” title=“X” style=“width: 491px; height: 353px;”>

X is written for privacy reasons.

Thanks to ai, I wrote an HTML code. But i couldn't find how to fix this font problem. I used Arial for font but it didn't work. Where there is damage, kanji and kanas are written. Btw, i am an amateur about html 😅. So is it smth easy to fix? Or will it take a long time? Thanks in advance.

I want to wrap the source code snippets into a <pre><code> tags in a static page. However, the <pre> preserves the extra tabs and spaces, when the static html page is formatted. How is this handled in production?

Is there some CSS/JS solution or do I simply avoid formatting the source code snippet? I would like to avoid the latter.

Hello! Me and some acquaintances run a little magazine together, Kritikpunkt.
We put a lot of effort into our content beeing nice to look at - but our website is just too slow.
I'm unsure why - lazy loading is enabled, cache isn't a problem (as far as we're aware).
Could you guys check it out and help us out?

The Website is Kritikpunkt.com

Is it possible to make it like when you cilck the upload button, it uploads to a private github folder? If not, is there anything similar

And 2, can I make a collab post here?

Im not certain if this is the right sub because my issue seems to be wih css ,but even if I put display flex and flex direction to column it always stays vertical , I've got two list and my goal is to put the two list sideway one unto the other and I've tried doing both direction , putting them into a div to turn them but it doesn't change anything

Really. my brain melts. I dont have any idea how to fix it. Im not a pro just a begginer. I maid a minesweeper and on the bottom right corner the mines are always misscalculated or there is no number at all. Can someone help me I can share the files too. You can also check it out for the bug: https://wenonx.github.io/1.0/

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Minesweeper Game</title>
    <link rel="stylesheet" href="style.css">
    <style>
        #videoContainer {
            position: fixed;
            bottom: 10px; /* Place at the bottom */
            left: 10px; /* Place at the left */
            width: 300px;
            height: 200px;
            z-index: 1000;
        }
        #videoContainer video {
            width: 100%;
            height: 100%;
        }
        #muteButton {
            position: fixed;
            bottom: 10px; /* Place at the bottom */
            left: 320px; /* Place next to the video */
            width: 40px;
            height: 40px;
            background-color: #115815;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            z-index: 1001;
        }
        #realTimeClock {
            position: fixed;
            top: 10px;
            right: 10px;
            font-size: 20px;
            color: white;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div id="videoContainer">
        <video src="racoon.mp4" autoplay muted loop></video>
    </div>

    <button id="muteButton">🔇</button>
    <div id="realTimeClock"></div>

    <header>
        <h1>Marksweeper</h1>
        <div id="timer">Time: 00:00</div>
        <div id="score">Score: 0</div>
    </header>

    <section id="game">
        <div class="grid"></div>
        <button id="restartButton" class="styled-button">Restart Game</button>
    </section>

    <aside id="gameInfo">
        <h2>Game Info</h2>
        <div id="gameResult"></div>
    </aside>

    <audio id="explosionSound" src="exp.mp3"></audio>
    <audio id="backgroundMusic" src="music.mp3" loop></audio>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const grid = document.querySelector('.grid');
            const width = 10;
            const bombAmount = 20;
            let squares = [];
            let isGameOver = false;
            let timer;
            let timeElapsed = 0;
            let gameStarted = false;
            let score = 0;
            let flags = 0;

            const explosionSound = document.getElementById('explosionSound');
            const backgroundMusic = document.getElementById('backgroundMusic');
            const muteButton = document.getElementById('muteButton');
            const realTimeClock = document.getElementById('realTimeClock');

            let isMuted = false;

            muteButton.addEventListener('click', () => {
                isMuted = !isMuted;
                backgroundMusic.muted = isMuted;
                explosionSound.muted = isMuted;
                muteButton.textContent = isMuted ? '🔊' : '🔇';
            });

            function updateClock() {
                const now = new Date();
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                const seconds = String(now.getSeconds()).padStart(2, '0');
                realTimeClock.textContent = `${hours}:${minutes}:${seconds}`;
            }

            setInterval(updateClock, 1000);
            updateClock();

            function startTimer() {
                if (gameStarted) return;
                gameStarted = true;
                clearInterval(timer);
                timeElapsed = 0;
                document.getElementById('timer').textContent = `Time: 00:00`;
                timer = setInterval(() => {
                    timeElapsed++;
                    const minutes = String(Math.floor(timeElapsed / 60)).padStart(2, '0');
                    const seconds = String(timeElapsed % 60).padStart(2, '0');
                    document.getElementById('timer').textContent = `Time: ${minutes}:${seconds}`;
                }, 1000);

                // Start background music
                backgroundMusic.play();
            }

            function stopTimer() {
                clearInterval(timer);
            }

            function resetTimer() {
                clearInterval(timer);
                timeElapsed = 0;
                document.getElementById('timer').textContent = `Time: 00:00`;
            }

            function createBoard() {
                // Create the board
                const bombsArray = Array(bombAmount).fill('bomb');
                const emptyArray = Array(width*width - bombAmount).fill('valid');
                const gameArray = emptyArray.concat(bombsArray);
                const shuffledArray = gameArray.sort(() => Math.random() - 0.5);

                for (let i = 0; i < width*width; i++) {
                    const square = document.createElement('div');
                    square.setAttribute('id', i);
                    square.classList.add(shuffledArray[i]);
                    grid.appendChild(square);
                    squares.push(square);

                    // Normal click
                    square.addEventListener('click', function(e) {
                        startTimer();
                        click(square);
                    });

                    // Ctrl and left click
                    square.oncontextmenu = function(e) {
                        e.preventDefault();
                        addFlag(square);
                    }
                }

                // Add numbers
                for (let i = 0; i < squares.length; i++) {
                    let total = 0;
                    const isLeftEdge = (i % width === 0);
                    const isRightEdge = (i % width === width - 1);

                    if (squares[i].classList.contains('valid')) {
                        if (i > 0 && !isLeftEdge && squares[i - 1].classList.contains('bomb')) total++;
                        if (i > 9 && !isRightEdge && squares[i + 1 - width].classList.contains('bomb')) total++;
                        if (i > 10 && squares[i - width].classList.contains('bomb')) total++;
                        if (i > 11 && !isLeftEdge && squares[i - 1 - width].classList.contains('bomb')) total++;
                        if (i < 98 && !isRightEdge && squares[i + 1].classList.contains('bomb')) total++;
                        if (i < 90 && !isLeftEdge && squares[i - 1 + width].classList.contains('bomb')) total++;
                        if (i < 88 && !isRightEdge && squares[i + 1 + width].classList.contains('bomb')) total++;
                        if (i < 89 && squares[i + width].classList.contains('bomb')) total++;
                        squares[i].setAttribute('data', total);
                    }
                }
            }
            
            createBoard();

            // Add Flag with right click
            function addFlag(square) {
                if (isGameOver) return;
                if (!square.classList.contains('checked') && (flags < bombAmount)) {
                    if (!square.classList.contains('flag')) {
                        square.classList.add('flag');
                        square.innerHTML = ' 🚩';
                        flags++;
                        checkForWin();
                    } else {
                        square.classList.remove('flag');
                        square.innerHTML = '';
                        flags--;
                    }
                }
            }

            // Click on square actions
            function click(square) {
                let currentId = square.id;
                if (isGameOver) return;
                if (square.classList.contains('checked') || square.classList.contains('flag')) return;
                if (square.classList.contains('bomb')) {
                    gameOver(square);
                } else {
                    let total = square.getAttribute('data');
                    if (total != 0) {
                        square.classList.add('checked');
                        square.innerHTML = total;
                        score++;
                        document.getElementById('score').textContent = `Score: ${score}`;
                        return;
                    }
                    checkSquare(square, currentId);
                }
                square.classList.add('checked');
                if (!square.classList.contains('bomb')) {
                    score++;
                    document.getElementById('score').textContent = `Score: ${score}`;
                }
            }

            // Check neighboring squares once square is clicked
            function checkSquare(square, currentId) {
                const isLeftEdge = (currentId % width === 0);
                const isRightEdge = (currentId % width === width - 1);

                setTimeout(() => {
                    if (currentId > 0 && !isLeftEdge) {
                        const newId = squares[parseInt(currentId) - 1].id;
                        const newSquare = document.getElementById(newId);
                        click(newSquare);
                    }
                    if (currentId > 9 && !isRightEdge) {
                        const newId = squares[parseInt(currentId) + 1 - width].id;
                        const newSquare = document.getElementById(newId);
                        click(newSquare);
                    }
                    if (currentId > 10) {
                        const newId = squares[parseInt(currentId - width)].id;
                        const newSquare = document.getElementById(newId);
                        click(newSquare);
                    }
                    if (currentId > 11 && !isLeftEdge) {
                        const newId = squares[parseInt(currentId) - 1 - width].id;
                        const newSquare = document.getElementById(newId);
                        click(newSquare);
                    }
                    if (currentId < 98 && !isRightEdge) {
                        const newId = squares[parseInt(currentId) + 1].id;
                        const newSquare = document.getElementById(newId);
                        click(newSquare);
                    }
                    if (currentId < 90 && !isLeftEdge) {
                        const newId = squares[parseInt(currentId) - 1 + width].id;
                        const newSquare = document.getElementById(newId);
                        click(newSquare);
                    }
                    if (currentId < 88 && !isRightEdge) {
                        const newId = squares[parseInt(currentId) + 1 + width].id;
                        const newSquare = document.getElementById(newId);
                        click(newSquare);
                    }
                    if (currentId < 89) {
                        const newId = squares[parseInt(currentId) + width].id;
                        const newSquare = document.getElementById(newId);
                        click(newSquare);
                    }
                }, 10);
            }
            

            // Game over
            function gameOver(square) {
                isGameOver = true;
                stopTimer();

                // Lower background music volume and play explosion sound
                backgroundMusic.volume = 0.2;
                explosionSound.play();
                explosionSound.onended = () => {
                    backgroundMusic.volume = 1.0;
                };

                // Fade the background to red
                document.body.classList.add('red-background');

                squares.forEach(square => {
                    if (square.classList.contains('bomb')) {
                        square.innerHTML = '💣';
                    } else {
                        let total = square.getAttribute('data');
                        if (total != 0) {
                            square.innerHTML = total;
                        }
                    }
                    square.classList.add('checked');
                });

                document.getElementById('gameResult').innerHTML = `
                    <p>Game Over!</p>
                    <p>Time: ${Math.floor(timeElapsed / 60).toString().padStart(2, '0')}:${(timeElapsed % 60).toString().padStart(2, '0')}</p>
                    <p>Score: ${score}</p>
                `;
            }

            // Check for win
            function checkForWin() {
                let matches = 0;

                for (let i = 0; i < squares.length; i++) {
                    if (squares[i].classList.contains('flag') && squares[i].classList.contains('bomb')) {
                        matches++;
                    }
                    if (matches === bombAmount) {
                        stopTimer();
                        isGameOver = true;
                        document.getElementById('gameResult').innerHTML = `
                            <p>You Win!</p>
                            <p>Time: ${Math.floor(timeElapsed / 60).toString().padStart(2, '0')}:${(timeElapsed % 60).toString().padStart(2, '0')}</p>
                            <p>Score: ${score}</p>
                        `;
                    }
                }
            }

            // Restart game
            document.getElementById('restartButton').addEventListener('click', () => {
                grid.innerHTML = '';
                squares = [];
                isGameOver = false;
                gameStarted = false;
                score = 0;
                flags = 0;
                document.getElementById('score').textContent = `Score: ${score}`;
                document.getElementById('gameResult').innerHTML = '';
                resetTimer();
                createBoard();

                // Stop explosion sound
                explosionSound.pause();
                explosionSound.currentTime = 0;

                // Fade background back to original color
                document.body.classList.remove('red-background');
            });
        });
    </script>
</body>
</html>

css:

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #557449;
    margin: 0;
    padding: 0;
    transition: background-color 1s ease; /* Add transition for background color */
}

body.red-background {
    background-color: red;
}

header {
    text-align: center;
    margin: 14px 0;
    position: fixed;
    top: 0;
    width: 22%;
    background-color: #a4bb9a00;
    z-index: 1000;
}

#timer, #score {
    margin: 10px 0;
}

#game {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 150px; /* Adjust for fixed header */
}

.grid {
    display: grid;
    grid-template-columns: repeat(10, 40px);
    grid-template-rows: repeat(10, 40px);
    gap: 2px;
    background-color: #333; /* Dark grey background */
}

.grid div {
    width: 40px;
    height: 40px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    border: 1px solid black; /* Add thin black border */
}

.grid div.checked {
    background-color: #bbb;
    border: none; /* Remove border when tile is revealed */
}

.grid div.bomb {
    background-color: #ddd;
}

.styled-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #115815;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.styled-button:hover {
    background-color: #21c552;
}

#gameInfo {
    position: fixed;
    right: 10px;
    top: 350px; /* Adjust for fixed header and move down by 250px */
    width: 200px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#gameInfo h2 {
    margin-top: 0;
}

#gameResult {
    margin-top: 10px;
}

#videoContainer {
    position: fixed;
    bottom: 10px; /* Place at the bottom */
    left: 10px; /* Place at the left */
    width: 300px;
    height: 200px;
    z-index: 1000;
}

#videoContainer video {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    #videoContainer {
        width: 200px;
        height: 150px;
    }

    .grid div {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    #gameInfo {
        width: 150px;
    }
}

How do people get games (like retro bowl) on there website? Also please tell me the website of you know.

I've been looking into how to create websites/blogs or how to have them hosted, but I always find super-long guides, while I already have a model of what I'm looking for:

https://read.easypeasymethod.org/

I'm talking purely about format here, not the content.

I can't find any info on a hoster, or how they did it. Does anyone has an easy explanation for how to do a copy of this in form, just with different text?

I run a multipurpose website that over time has pretty much turned into spaghetti code. I'm not the best at html so I was wondering if I could get some feedback on how to improve the website.

Side note: I am trying to also make the website at least mostly compatible on older devices because of the website's theme.

Front-end website: https://flashworld.netlify.app/

Github page: https://github.com/flash-world/flash-world.github.io

Any help is appreciated!

Hey everyone! I'm learning HTML and created my first basic webpage. I'd love some feedback or suggestions on how to improve. Any tips for making it look better? Thanks in advance! 😊

I have searched far and wide and was unable to figure it out. I want to remove this ugly thing under the url. I used html and js for the file.