Login

r/HTML

▲ 2 r/HTML

Do you build HTML emails from scratch every time, or do you have a shortcut?

Hey everyone!

I make HTML emails now and then — team updates, small newsletters, that kind of thing. And every time, I feel like I'm starting from zero. The writing part is quick, but getting the layout to actually look right (and not break in Outlook or gmail...) always takes way longer than I expect.

I'm curious how others handle this. Do you keep a base file and reuse it, and how do you structure it? Copy from an old email? Use a tool? I feel like I keep rebuilding the same thing over and over and there must be a smarter way...

reddit.com
u/OryaAdvisory2026 — 9 hours ago
▲ 0 r/HTML

Using vw for responsiveness didn't fix issues on smaller-height screens. What should I use instead?

Is there a recommended way to structure a simple card layout?

My card has a parent div with two child divs. The first child contains an image with a height of 40vh. The second child is split into two more divs: one for the title and description, and another that only contains an arrow icon.

The problem is that on some devices, the title and description overlap. I'm wondering if this is a layout issue on my end or if there's a better way to structure responsive cards to avoid problems like this.

How would you build a layout like this to ensure it works consistently across different screen sizes?

reddit.com
u/Bombastic_hit — 11 hours ago
▲ 0 r/HTML

How do i view an HTML file on pc?

Im new in this field.I got an HTML file that is locked but the webpage comes out as blank when i click on the file.I know the password,but cant even open the file to type it. It works on phone tho.

reddit.com
u/kuttar_pasa — 1 day ago
▲ 14 r/HTML+1 crossposts

Grid layout isn't working help

<body>


 <div class="grid-contaner">
   <div class="Item"style="grid-area":box-1></div>
   <div class="Item"style="grid-area":box-2></div>
   <div class="Item"style="grid-area":box-3></div>
   <div class="Item"style="grid-area":box-4></div>
   <div class="Item"style="grid-area":box-5></div>
 </div>
</body>

 <div class="grid-contaner">
   <div class="Item"style="grid-area":box-1></div>
   <div class="Item"style="grid-area":box-2></div>
   <div class="Item"style="grid-area":box-3></div>
   <div class="Item"style="grid-area":box-4></div>
   <div class="Item"style="grid-area":box-5></div>
 </div>


</body>


}body {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2%;
}


.grid-contaner {    
    display: grid;
    grid-template-columns: 200px 200px 200px 200px;
    grid-template-rows: 200px 200px;
    grid-auto-rows: 300px;
    gap: 2em;
    grid-template-areas: 
    "box-1 box-2 box-2 box-3"
    "box-1 box-4 box-5 box-5";
}




.Item {


 padding: 2em;    
 color: black;
 background-color: chartreuse;
 text-align: center;
 font-size: 2rem;
 border-color: gold;


}
u/Apprehensive_Ink — 2 days ago
▲ 27 r/HTML+1 crossposts

If HTML had a version 6, what native elements would you want most?

Living standard I know… but does it really live. If HTML had a version 6, what native elements would you want most?

reddit.com
u/html67 — 3 days ago
▲ 134 r/HTML

My first HTML code and my first web page.

I am still learning if there are any mistakes and any improvements that I need to make. Feel free to say.

u/Zestyclose_Set3040 — 4 days ago
▲ 0 r/HTML

Ayuda con html

andaba aprendiendo html con neocities y queria conectar un html local con el online y no funciona, espero que se me entienda soy nuevo en esto, y mientras aprendia a base de la pagina html dog en el apartado de enlaces, me explicaban que "El destino del enlace se define en elhref atributo de la etiqueta. El enlace puede ser absoluto, como “http://www.htmldog.com”,, o puede ser relativo a la página actual, Entonces, si, por ejemplo, tuvieras otro archivo llamado “flyingmoss.html” en el mismo directorio, entonces la línea de código sería simplemente<a href="flyingmoss.html">The miracle of moss in flight</a> o algo así." intente hacer lo que me decia el tutorial pero no me resulta, algun consejo? espero me hayan entendido el problema.

reddit.com
u/Disastrous-Role-1302 — 5 days ago
▲ 1 r/HTML

Beginner coder would like some help

I started coding literally 2 days ago, and am very confused.

I was trying to move a text into a certain place in the corner of the screen, and got it roughly where i wanted it. I then copied the code onto a subsite where i had more stuff thinking it would work without issue. Instead, it somehow interacted with an image i had centered by pushing it to the right. any idea how i can fix this? let me know if more information is needed

u/dameychamberlain — 5 days ago
▲ 0 r/HTML

Creating an HTML Site from a PDF manually?

Hello! I'm currently working on writing a book, and the way I'd like to share it by making it it's own website you can read it from. I'd like to keep the formatting from the pages in my pdf, so I'd like it to either be scrollable pages or something like a flip book or a "click to next page" function, aswell as a nav that can take the user to a specific chapter or page/allow them to bookmark it. The only solutions I find for this online is converters that make customizability (ie background colors, adjusting page size etc) really complicated, so I'd like to attempt to do it manually with HTML/CSS (or/and JavaScript if I have to.)

Does any one have any tips for how to go about doing something like this? I'm intermediate in making HTML/CSS sites, so coding isn't a problem for me, it's just embedding the pdf that I'm struggling with!

Thank you!

reddit.com
u/HotDiscipline5212 — 5 days ago
▲ 11 r/HTML

I have made the Infinite Craft Background (HTML + CSS + JS)

https://preview.redd.it/tr11luzyqvah1.png?width=3360&format=png&auto=webp&s=5b17a98a8a02668c8580c867d90ec5c17e8b8461

Ive made it with Html Css and Javascript and it has interactivity. For example if you left click you push all of the dots away and with the right click it pulls them to the mouse for middle clicking I haven't implemented anything yet, but heres the Video and Code:

Oh and the link to the website: https://pinbug.github.io/

index.html:

sds<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infinite Craft Background</title>
</head>
<body>
    <link rel="stylesheet" href="style.css">
    <canvas id="canv"></canvas>
    <h1 style="position: absolute; top: 50%; left: 25%; color: white; z-index: 10; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;">Infinite Craft Background</h1>   
    <script src="script.js"></script>
</body>
</html>

style.css:

body {
    margin: 0;
    overflow-x: hidden;
    height: 200vh;
    background: #111;
}
#canv {
    display: block;
    position: fixed;
    top: -10%;
    left: -10%;
    filter: saturate(1.5) contrast(1.2) blur(0rem);
}

script.js:

const canvas = document.getElementById("canv");
const ctx = canvas.getContext("2d");


function resize() {
    canvas.width = window.innerWidth * 1.2;
    canvas.height = window.innerHeight * 1.2;
}
resize();
window.addEventListener("resize", resize);


const mouse = {
    x: 0,
    y: 0,
    inside: false,
    left: false,
    right: false,
    middle: false
};


window.addEventListener("mousedown", e => {
    if (e.button === 0) mouse.left = true;
    if (e.button === 1) mouse.middle = true;
    if (e.button === 2) mouse.right = true;
});


window.addEventListener("mouseup", e => {
    if (e.button === 0) mouse.left = false;
    if (e.button === 1) mouse.middle = false;
    if (e.button === 2) mouse.right = false;
});


window.addEventListener("mousemove", e => {
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    mouse.inside = true;
});


document.addEventListener("mouseleave", () => {
    mouse.inside = false;
});


let lastScrollY = window.scrollY;
let scrollDelta = 0;


const dots = [];




for (let i = 0; i < canvas.width / 2; i++) {
    const timer = 120 + Math.random() * 100;


    const vx = (Math.random() - 0.5) * 2;
    const vy = (Math.random() - 0.5) * 2;


    dots.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,


        vx,
        vy,


        startVx: vx,
        startVy: vy,


        targetVx: (Math.random() - 0.5) * 2,
        targetVy: (Math.random() - 0.5) * 2,


        timer,
        timerMax: timer
    });
}


function balancePressure(dots, radius = 100) {
    const result = [];


    const r2 = radius * radius;


    for (let i = 0; i < dots.length; i++) {
        let vx = 0;
        let vy = 0;


        const a = dots[i];


        for (let j = 0; j < dots.length; j++) {
            if (i === j) continue;


            const b = dots[j];


            const dx = a.x - b.x;
            const dy = a.y - b.y;
            const dist2 = dx * dx + dy * dy;


            if (dist2 >= r2 || dist2 === 0) continue;


            const dist = Math.sqrt(dist2);


            const force = (radius - dist) / radius;


            vx += dx / dist * force;
            vy += dy / dist * force;
        }


        result.push({
            x: vx,
            y: vy
        });
    }


    return result;
}


function update() {
    if (!mouse.left && !mouse.right && !mouse.middle) {
        balancePressure(dots, 90).forEach((force, i) => {
                force.x *= 0.5;
                force.y *= 0.5;
                dots[i].vx += force.x;
                dots[i].vy += force.y;


                dots[i].x += dots[i].vx;
                dots[i].y += dots[i].vy;


                dots[i].vx *= 0.9;
                dots[i].vy *= 0.9;


                if (dots[i].x < 0) { dots[i].x = 0; dots[i].vx *= -1; }
                if (dots[i].x > canv.width) { dots[i].x = canv.width; dots[i].vx *= -1; }
                if (dots[i].y < 0) { dots[i].y = 0; dots[i].vy *= -1; }
                if (dots[i].y > canv.height) { dots[i].y = canv.height; dots[i].vy *= -1; }
            });
    }
    for (const d of dots) {


        d.timer--;
        d.vx *= 0.9;
        d.vy *= 0.9;
        if (d.timer <= 0) {
            d.timer = 120 + Math.random() * 100;
            d.timerMax = d.timer;


            d.startVx = d.baseVx ?? d.vx;
            d.startVy = d.baseVy ?? d.vy;


            d.targetVx = (Math.random() - 0.5) * 2;
            d.targetVy = (Math.random() - 0.5) * 2;
        }


        const t = 1 - d.timer / d.timerMax;


        d.baseVx = d.startVx + (d.targetVx - d.startVx) * t;
        d.baseVy = d.startVy + (d.targetVy - d.startVy) * t;


        d.vx += (d.baseVx - d.vx) * 0.03;
        d.vy += (d.baseVy - d.vy) * 0.03;


        if (mouse.inside) {
            let radius = canvas.width * 0.1;
            if (mouse.left) {
                radius *= 2.5;
            }
            else if (mouse.right) {
                radius *= 0.75;
            }
            const dx = d.x - mouse.x - radius / Math.PI;
            const dy = d.y - mouse.y - radius / Math.PI;
            const distSq = dx * dx + dy * dy;


            if (distSq > 0 && distSq < radius * radius) {
                const dist = Math.sqrt(distSq);
                const force = (1 - dist / radius) * 0.8;


                d.vx += (dx / dist) * force;
                d.vy += (dy / dist) * force;
            }
        }


        d.vx += (Math.random() - 0.5) * 0.05;
        d.vy += (Math.random() - 0.5) * 0.05;
    }


    const repelRadius = 40;
    const repelRadiusSq = repelRadius * repelRadius;
    const repelStrength = 0.08;


    for (let i = 0; i < dots.length; i++) {
        const a = dots[i];


        for (let j = i + 1; j < dots.length; j++) {
            const b = dots[j];


            const dx = b.x - a.x;
            const dy = b.y - a.y;


            const distSq = dx * dx + dy * dy;


            if (distSq > 0 && distSq < repelRadiusSq) {
                const dist = Math.sqrt(distSq);


                const force = (1 - dist / repelRadius) * repelStrength;


                const nx = dx / dist;
                const ny = dy / dist;


                a.vx -= nx * force;
                a.vy -= ny * force;


                b.vx += nx * force;
                b.vy += ny * force;
            }
        }
    }


    for (const d of dots) {


        d.x += d.vx;
        d.y += d.vy;


        if (d.x < 0) {
            d.x = canvas.width;
        }


        if (d.x > canvas.width) {
            d.x = d.x - canvas.width;
        }


        if (d.y < 0) {
            d.y = 0;
            d.vy *= -1;
        }


        if (d.y > canvas.height) {
            d.y = canvas.height;
            d.vy *= -1;
        }
        d.y += -scrollDelta;
        if (d.y > canvas.height) {
            d.y = d.y - canvas.height; 
        }
        else if (d.y < 0) {
            d.y = d.y + canvas.height; 
        }
    }
}
function draw() {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    ctx.strokeStyle = "#66ccff";
    
    for (let i = 0; i < dots.length; i++) {
        for (let j = i + 1; j < dots.length; j++) {
            const dx = dots[i].x - dots[j].x;
            const dy = dots[i].y - dots[j].y;
            const dist = Math.hypot(dx,dy); 
            const maxdist = 120;


            if (dist < maxdist) {
                ctx.globalAlpha = 1 - dist / maxdist;
                ctx.lineWidth = 2;
                ctx.beginPath();
                ctx.moveTo(dots[i].x, dots[i].y);
                ctx.lineTo(dots[j].x, dots[j].y);
                ctx.stroke();
            }
        }
    }
    ctx.globalAlpha = 1;
    ctx.fillStyle = "white";
    for (const d of dots) {
        ctx.beginPath();
        ctx.fillStyle = "#66ccff";
        ctx.arc(d.x, d.y, 2, 0, Math.PI * 2);
        ctx.fill();
    }
}
function loop() {
    scrollDelta = window.scrollY - lastScrollY;
    lastScrollY = window.scrollY;
    update();
    draw();
    requestAnimationFrame(loop);
}
loop();
reddit.com
u/LegitimateTeach6702 — 5 days ago
▲ 3 r/HTML

Hello coding community

im new to coding due to school, and i took an interest in it, are there any tips for it? I do know how to make like a button or text and images and stuff, but is there a way to connect css to my html? It didnt work for me and idk what to do

reddit.com
u/Eggmannical — 5 days ago
▲ 2 r/HTML

Why is my float property not working 😭

I am trying to place the text at the bottom next to the image and I am not sure why it isn‘t working 😭. Any ideas will most definitely be appreciated.

Also, if you are wondering about the weird subject matter it’s from a coding book that I own which is my best asset to learn html XD.

u/Bi_Idiotandapotato — 6 days ago
▲ 9 r/HTML+1 crossposts

What are some ways I could learn html efficiently I don't care about speed I just want to learn it good speed is a bonus.

You could recommend textbook PDFs or anything.

reddit.com
u/Wonderful-Pie9017 — 6 days ago
▲ 0 r/HTML

Can someone help me with this code. It actually pisses me off...

I want the dropdown that opens to collapse to a button when I click anywhere on the screen except for "sphere". I don't want it to work when the dropdown is already in button form. It's kinda like when u have multiple windows on screen and clicking on one closes the other [unless it's pinned].

MY BIGGEST PROBLEM: I can't disable clicks for either state, so help... I can explain more in the comments..

CODE

// → split text into spans

const h1 = document.querySelector("[data-splittext]");

if (h1) {

const letters = [...h1.textContent.trim()];

h1.innerHTML = letters

.map((char, i) =&gt; \<span style="--i:${i / (letters.length + 1)};">${char}</span>`)`

.join("");

}

// → slideVars setup

import { slideVars } from "https://esm.sh/@codepen/slidevars";

slideVars.init({

"--radius": { type: "slider", min: 1, max: 80, default: 25, unit: "vmin" },

"--spinDuration": { type: "slider", min: 1, max: 100, default: 25, unit: "s" },

"--speedYMod": { type: "slider", min: -10, max: 10, default: -3, unit: "" },

"--speedXMod": { type: "slider", min: -10, max: 10, default: 1, unit: "" },

"--speedZMod": { type: "slider", min: -10, max: 10, default: 0, unit: "" },

"--perspective": { type: "slider", min: 100, max: 2000, default: 1000, unit: "px" },

"--blur": { type: "slider", min: 0, max: 100, default: 8, unit: "px" },

"--c-black": { type: "color", default: "#202116" },

"--c-white": { type: "color", default: "#fff" }

});

// → panel refs

const clickTarget = document.querySelector("dialog");

const settingsPanel =

document.querySelector("slide-vars") ||

document.querySelector(".slidevars-container") ||

document.querySelector("slidevars-panel");

// → panel toggle / positioning

document.addEventListener("click", (event) =&gt; {

if (!settingsPanel) return;

if (settingsPanel.contains(event.target)) return;

if (!clickTarget || !clickTarget.contains(event.target)) return;

event.stopPropagation();

event.preventDefault();

const isHidden = settingsPanel.style.display === "none";

const isActive = settingsPanel.classList.contains("is-active");

if (isHidden) {

settingsPanel.style.setProperty("top", \${event.clientY}px`, "important");`

settingsPanel.style.setProperty("left", \${event.clientX}px`, "important");`

settingsPanel.style.display = "block";

settingsPanel.classList.add("is-active");

settingsPanel.open?.();

return;

}

if (isActive) {

destructPanel();

return;

}

settingsPanel.style.setProperty("top", \${event.clientY}px`, "important");`

settingsPanel.style.setProperty("left", \${event.clientX}px`, "important");`

settingsPanel.style.setProperty("right", "unset", "important");

settingsPanel.style.setProperty("bottom", "unset", "important");

settingsPanel.classList.add("is-active");

settingsPanel.open?.();

});

// → dragging

let isDragging = false;

let didDrag = false;

let startX, startY, initialLeft, initialTop;

if (settingsPanel) {

settingsPanel.addEventListener("mousedown", (e) =&gt; {

if (["INPUT", "SELECT", "BUTTON"].includes(e.target.tagName)) return;

isDragging = true;

didDrag = false;

startX = e.clientX;

startY = e.clientY;

const rect = settingsPanel.getBoundingClientRect();

initialLeft = rect.left;

initialTop = rect.top;

settingsPanel.style.cursor = "grabbing";

e.preventDefault();

});

window.addEventListener("mousemove", (e) =&gt; {

if (!isDragging) return;

didDrag = true;

const dx = e.clientX - startX;

const dy = e.clientY - startY;

settingsPanel.style.setProperty("left", \${initialLeft + dx}px`, "important");`

settingsPanel.style.setProperty("top", \${initialTop + dy}px`, "important");`

});

window.addEventListener("mouseup", () =&gt; {

if (!isDragging) return;

isDragging = false;

settingsPanel.style.cursor = "grab";

if (didDrag) {

const root = settingsPanel.shadowRoot;

const toggleBtn = root?.querySelector(".toggle-button");

toggleBtn?.click();

}

didDrag = false;

});

settingsPanel.addEventListener("dblclick", (e) =&gt; {

if (didDrag) return;

e.stopPropagation();

destructPanel();

});

}

// → collapse animation

function destructPanel() {

if (!settingsPanel) return;

settingsPanel.classList.remove("is-active");

settingsPanel.classList.remove("slidevars-unfold");

settingsPanel.classList.add("slidevars-fold");

setTimeout(() =&gt; {

settingsPanel.style.display = "none";

settingsPanel.classList.remove("slidevars-fold");

}, 350);

}

// → customize toggle button

customElements.whenDefined("slide-vars").then(() =&gt; {

const el = document.querySelector("slide-vars");

if (!el) return;

const root = el.shadowRoot;

if (!root) return;

const btn = root.querySelector(".toggle-button");

if (!btn) return;

btn.style.background = "#a83030";

btn.style.borderRadius = "50%";

btn.style.setProperty("mask", "none", "important");

btn.style.setProperty("-webkit-mask", "none", "important");

const oldLogo = btn.querySelector("slidevars-logo");

oldLogo?.remove();

const fontLink = document.createElement("link");

fontLink.rel = "stylesheet";

fontLink.href = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined";

root.appendChild(fontLink);

const icon = document.createElement("span");

icon.textContent = "sync";

icon.style.fontFamily = "Material Symbols Outlined";

icon.style.fontSize = "28px";

icon.style.fontVariationSettings = "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 36'";

icon.style.setProperty("color", "#06c943", "important");

icon.style.position = "absolute";

icon.style.left = "50%";

icon.style.top = "50%";

icon.style.transform = "translate(-50%, -50%)";

icon.style.pointerEvents = "none";

btn.appendChild(icon);

});

reddit.com
u/Dizzy_Blackberry7874 — 7 days ago
▲ 0 r/HTML

How doI fix my drop-down menu?

Hello everyone. I'm a total beginner at coding, and I'm currently making this "website" (if you could even call it that) just to get started, if you will. Ive found that no matter what I do, I cannot get the drop-down menu that I tried to code to work and I've got no one else to ask about this, so I thought I'd try my luck here. I'd really appreciate if anyone could tell me what I did wrong and how I could fix it. Thanks a lot in advance!

u/Realistic_Ride_5884 — 7 days ago
▲ 3 r/HTML

How can I use text files in HTML/JS as a condition trigger?

EDIT: Solved, I just had to edit the HTML directly, I was overcomplicating it a lot!

From what I've read, it doesn't look like it's possible to use local files in JS, but I don't know how else to do what I'm trying to do.

I have a block of text which needs to change depending on a condition. There are three possible outcomes, and I have already written a python program which writes to three files, setting the correct outcome to True. I'm sure this is the most convoluted way of doing it, but I'm brand new to HTML and I'm already comfortable in Python.

The condition which needs to influence the text isn't decided by the user, it just updates weekly based on external data which I'll have to find a way of downloading automatically or just do it manually every week, but I'm just stuck on this bit, because I don't know how to get the data I need into the website. I probably could rewrite the Python code in JS, but it's connected to a spreadsheet and I'm not confident enough in JS for that.

I get why I can't generally use files in JS but I just need to use the data in an if condition.

I'm open to hearing any alternative ways of doing the whole thing, even if I have to start over.

reddit.com
u/gabekkd — 8 days ago
▲ 6 r/HTML+1 crossposts

Can anyone recommend some good offline sources to learn HTML, CSS and JS eventually?

I'm going to be travelling most of summer and would love to be able to work on learning and potentially small projects while flying/travelling without WiFi. I'm wanting to learn more front end stuff, I have an idea for a final project of a website but understand that there is a long road to be able to get there and could use some good places to learn of get support while learning without paying for a full-blown course.

Otherwise I am very open to general recommendations also as I'm not totally sure what I'm doing. For reference I can already code pretty solidly in python and have for a few years (on and off) so don't need a complete back to basics course.

reddit.com
u/Unfair_Reception_886 — 8 days ago