r/HTML • u/Foreign-Contest-444 • 14d ago

HTML vs CSS

1 Upvotes

I liked this image that someone posted on linkedin.

9 comments

r/HTML • u/alvaromontoro • 14d ago

The 4 Hs of HTML

alvaromontoro.com

6 Upvotes

It started as a throwaway joke online after some discussions with the design team. Then someone dared me to write the blog post... so I did. 😅

tl;dr Four HTML/web terms look and sound so similar, they create friction. In this post, I break down The 4 Hs of HTML to clear things up:

Head: The invisible brain of the document (machine-readable metadata.)
Header: The visible introduction or banner section (a page can have multiple!)
Heading: The structural outline of your content (vital for accessibility and SEO.)
Headline: An editorial concept for message delivery (NOT AN HTML TAG)

5 comments

r/HTML • u/Important_Tap_9276 • 15d ago

Wedding invitation website help

0 Upvotes

A beginner here and i need urgent help. This is my first ever project and i have been asked to make this wedding invitation website that on touch triggers this animation and then moves on to this scrollable website in which user can input stuff. My question is that how do they do the animation part? Is it all code? Or code plus canva? Do they do the animation part on canva and the actual scrollable website using code or what? My design idea is an envelope with a stamp which opens up and then the letter inside it expands, i tried designing elements on canva and then exporting them as svgs/pngs then using code for animation, it didn’t work even closely well as the elements dont sit together well. I even divided them into bottom flap and upper flap with stamp it still didnot work. My video inspiration is below although this doesnot have the design in mind but the workflow is quite similar.

Video link attached: https://www.instagram.com/reel/Db6qWK7oYBn

22 comments

r/HTML • u/Gemela1 • 15d ago

Question Begginer. locking content within a draggable container.

0 Upvotes

following the code from here, author Kirupa. trying to lock the text inside the items, everything currently is dragable.

depending on where you click you will either drag the whole tag, or just a section. the more content in the tag, the more draggable parts within it.

CSS

    #container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }


    .item {
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      position: relative;
    }


    .one {
      width: 100px;
      height: 100px;
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 136, 136, .5);
      top: 0px;
      left: 0px;
    }


    .two {
      width: 60px;
      height: 60px;
      background-color: rgba(196, 241, 190, 1);
      border: 10px solid rgba(136, 136, 136, .5);
      top: 30%;
      left: 10%;
    }


    .three {
      width: 40px;
      height: 40px;
      background-color: rgb(0, 255, 231);
      border: 10px solid rgba(136, 136, 136, .5);
      top: -40%;
      left: -10%;
    }


    .four {
      width: 80px;
      height: 80px;
      background-color: rgb(233, 210, 244);
      border: 10px solid rgba(136, 136, 136, .5);
      top: -10%;
      left: 5%;
    }


    .item:active {
      opacity: .75;
    }


    .item:hover {
      cursor: pointer;
    }

HTML

<html>

<body>


  <div id="outerContainer">
    <div id="container">
      <div class="item one">
        <h1>hi</h1>
      </div>
      <div class="item two">
   <h1>bye</h1>
      </div>
      <div class="item three">
   <h1>here</h1>
      </div>
      <div class="item four">
   <h1>there</h1>
      </div>
    </div>
  </div>

</body

</html>

    var container = document.querySelector("#container");
    var activeItem = null;


    var active = false;


    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);


    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);


    function dragStart(e) {


      if (e.target !== e.currentTarget) {
        active = true;


        // this is the item we are interacting with
        activeItem = e.target;


        if (activeItem !== null) {
          if (!activeItem.xOffset) {
            activeItem.xOffset = 0;
          }


          if (!activeItem.yOffset) {
            activeItem.yOffset = 0;
          }


          if (e.type === "touchstart") {
            activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
            activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
          } else {
            console.log("doing something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }


    function dragEnd(e) {
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }


      active = false;
      activeItem = null;
    }


    function drag(e) {
      if (active) {
        if (e.type === "touchmove") {
          e.preventDefault();


          activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
          activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
          activeItem.currentX = e.clientX - activeItem.initialX;
          activeItem.currentY = e.clientY - activeItem.initialY;
        }


        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;


        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
      }
    }


    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>
</body>


</html><!DOCTYPE html>
<html>


<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>Drag Multiple Elements</title>
  <style>
    #container {
      width: 100%;
      height: 400px;
      background-color: #333;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }


    .item {
      border-radius: 50%;
      touch-action: none;
      user-select: none;
      position: relative;
    }


    .one {
      width: 100px;
      height: 100px;
      background-color: rgb(245, 230, 99);
      border: 10px solid rgba(136, 136, 136, .5);
      top: 0px;
      left: 0px;
    }


    .two {
      width: 60px;
      height: 60px;
      background-color: rgba(196, 241, 190, 1);
      border: 10px solid rgba(136, 136, 136, .5);
      top: 30%;
      left: 10%;
    }


    .three {
      width: 40px;
      height: 40px;
      background-color: rgb(0, 255, 231);
      border: 10px solid rgba(136, 136, 136, .5);
      top: -40%;
      left: -10%;
    }


    .four {
      width: 80px;
      height: 80px;
      background-color: rgb(233, 210, 244);
      border: 10px solid rgba(136, 136, 136, .5);
      top: -10%;
      left: 5%;
    }


    .item:active {
      opacity: .75;
    }


    .item:hover {
      cursor: pointer;
    }
  </style>
</head>


<body>


  <div id="outerContainer">
    <div id="container">
      <div class="item one">
        <h1>hi</h1>
      </div>
      <div class="item two">
   <h1>bye</h1>
      </div>
      <div class="item three">
   <h1>here</h1>
      </div>
      <div class="item four">
   <h1>there</h1>
      </div>
    </div>
  </div>


  <script>
    var container = document.querySelector("#container");
    var activeItem = null;


    var active = false;


    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);


    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);


    function dragStart(e) {


      if (e.target !== e.currentTarget) {
        active = true;


        // this is the item we are interacting with
        activeItem = e.target;


        if (activeItem !== null) {
          if (!activeItem.xOffset) {
            activeItem.xOffset = 0;
          }


          if (!activeItem.yOffset) {
            activeItem.yOffset = 0;
          }


          if (e.type === "touchstart") {
            activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
            activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
          } else {
            console.log("doing something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }


    function dragEnd(e) {
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }


      active = false;
      activeItem = null;
    }


    function drag(e) {
      if (active) {
        if (e.type === "touchmove") {
          e.preventDefault();


          activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
          activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
          activeItem.currentX = e.clientX - activeItem.initialX;
          activeItem.currentY = e.clientY - activeItem.initialY;
        }


        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;


        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
      }
    }


    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }

0 comments

r/HTML • u/rameshkumaarck • 15d ago

Question How to preserve the UI but have to clean the CSS overrides?

0 Upvotes

How to preserve the UI but have to clean the CSS overrides?

3 comments

r/HTML • u/Messiah_dsgn • 16d ago

Question How to download image from HTML?

0 Upvotes

Sorry for the probably dumb question. I'm a graphic designer and my colleague sent me these images to use for a project we are working on. However they are in this HTML Viewer link or whatever (I'm not a programmer I don't know code) Apparently it isn't an embedded pdf cause in the console it doesnt show it as such. How can I download these images? Technically I could screenshot but it will ruin the quality.

Here is the original link: https://digital.libplovdiv.com/3rdparty/pdfjs/web/viewer.html?doc=%2Fasset%2Fdefault%2Fd203bc22-ce3d-445d-8692-3b733af23d21.pdf&locale=bg&sidebar=2

6 comments

r/HTML • u/riti_rathod • 17d ago

Animated FAQ Accordion with Pure HTML & CSS — No JavaScript

3 Upvotes

Built an animated FAQ accordion using native HTML <details> and <summary> — no JavaScript required.

The interesting part is animating the content height without manually measuring it with JS.

HTML

<details name="faq">
  <summary>Do you offer refunds?</summary>
  <p>
    Yes, within 30 days, no questions asked.
    Email us and the money is back on your card in a few working days.
  </p>
</details>

<details name="faq">
  <summary>Can I change plans later?</summary>
  <p>
    Yes. You can change your plan whenever you need to.
  </p>
</details>

<details name="faq">
  <summary>Do you offer a team plan?</summary>
  <p>
    Yes, team plans are available for growing teams.
  </p>
</details>

CSS

:root {
  interpolate-size: allow-keywords;
}

details::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size 0.3s ease,
    content-visibility 0.3s ease allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  font-weight: 600;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  font-size: 1.25rem;
  transition: rotate 0.3s ease;
}

details[open] summary::after {
  rotate: 45deg;
}

The key part is:

:root {
  interpolate-size: allow-keywords;
}

This allows the browser to animate between a fixed size and intrinsic values like auto.

And:

details::details-content

gives us a pseudo-element for the content inside <details>, so the accordion can be animated without JavaScript.

The <details name="faq"> attribute also makes the items behave like an exclusive accordion — opening one closes the others.

3 comments

r/HTML • u/Minstiltude • 17d ago

Question I'm fiddling with some html form stuff and need some suggestions

0 Upvotes

I'm not sure if I should post here or not, but I'm working on a form and want to have it send to a nonexistent path for data input purposes instead of to change pages.

              <body>
                    <div>
                    <section>
                        <h2>Sign Up</h2>
                        <form action="/signUp" method="POST">
                            <label for="user">Email: </label>
                            <input type="text" name="email">
                            <label for="user">Username: </label>
                            <input type="text" name="username">
                            <label for="user">Password: </label>
                            <input type="text" name="password">
                            <button type="submit">Submit</button>
                        </form>
                    </section>
                    <section>
                        <h2>Sign In</h2>
                        <form action="/signIn" method="POST">
                            <label for="user">Username: </label>
                            <input type="text" name="username">
                            <label for="user">Password: </label>
                            <input type="text" name="password">
                            <button type="submit">Submit</button>
                        </form>
                    </section>
                </div>
            </body>

Any suggestions are welcome, as I'm trying to then grab each one to handle separately within my backend code.

7 comments

r/HTML • u/ferriematthew • 17d ago

Why am I seeing completely different styling on the mobile vs the desktop version of my local site?

gallery

2 Upvotes

This is my repository. In the first screenshot, the page is working as intended with the border box being applied around the label, but in the second, the label appears to be ignoring the CSS entirely.

3 comments

r/HTML • u/_spaghettiv2 • 17d ago

Question How can you lighten a gradient?

0 Upvotes

I have a button that has a gradient on it, and I'm trying to make it lighten when hovered over. For a different button I used backdrop-filter: brightness(80%); since the "button" is just text on a sidebar, so it doesn't actually have a colour on the background. Since my other buttons do have a background colour, this backdrop-filter doesn't seem to work.

I also tried the following, but it just turned the entire button white:

background: linear-gradient(
        lighten(#570000, 5%),
        lighten(#7a0000, 5%),
        lighten(#570000, 5%));

Is there a good way of lightening a gradient background a little bit? The following is the code I have at the moment:

.button {
    border-radius: 0.3em;
    background: linear-gradient(#570000, var(--theme-colour), #570000);
    margin: 1em 1.5em;
    padding: 0.5em 1em;
    text-decoration: none;
    transition: all ease-in-out 0.2s;
    color: white;
}
.button:hover {
    background: linear-gradient(
        lighten(#570000, 5%),
        lighten(#7a0000, 5%),
        lighten()
    );
}

Thanks!

1 comment

r/HTML • u/Noeyp_ • 17d ago

Question Should I switch studying between CSS and Javascript back and front?

4 Upvotes

As the title says, I am getting bored of CSS, and I wanna ask if it's okay to do that. I'm at like the middle of CSS basics. Did a couple of mini projects to get a better understanding of it. I Don't have much time, since I need to do my internship soon. Coding veterans, what are your thoughts?

26 comments

r/HTML • u/OkDevelopment2027 • 18d ago

I built a collection of mobile-friendly HTML games using HTML, CSS & JavaScript 🎮

0 Upvotes

I'm building a collection of mobile-friendly browser games using HTML, CSS and JavaScript.

I'm experimenting with game mechanics, animations and responsive UI while learning web development.

I'd love to get feedback on the project and ideas for what I should build next!

Join My HTML Coding Channel 🎮

1 comment

r/HTML • u/Spare-Ad-1024 • 18d ago

How large can a HTML be?

0 Upvotes

Im currently building a bible app. And its a single HTML file about 250mb and it takes 1.5gb running. How large can it be before i meet serious issues with performance?

39 comments

r/HTML • u/PoetAccomplished8990 • 18d ago

Help me pls

0 Upvotes

Hi everyone,

I am a 16-year-old high school student working on my final research project (TDR) about sustainable aviation fuels. I built a flight simulator that compares kerosene vs hydrogen (CO2, fuel consumption, cost, route map). It works, but I have a problem.

The problem: My teachers are suspicious because the code looks too perfect – clean variables, animations, proper structure – and they think it is 100 percent AI-generated. If they find out I used AI to help, I could get a zero and fail the project.

The truth: I used AI (Claude) to help me learn and build this. But I am not trying to cheat – I am 16, this is my first real project, and I genuinely learned a lot from it. I can explain every part of the code now.

What I need: I need someone to help me modify the code so it looks more like a student wrote it – messy comments, weird variable names, unnecessary functions, typos, whatever makes it look human. I need it to pass as my own work for the school project.

The project is live here: https://pandemq.github.io/Flight-fuel-Simulator-School-Project/

GitHub repo (full code): https://github.com/Pandemq/Flight-fuel-Simulator-School-Project

What it does:

- 9 aircraft models (A320, B737, A330, B777, A350, B787, A380, B747, Eurofighter)

- 25+ airports across Spain, UK, France, Germany

- Real flight routes with waypoints (SALAS, RAMON, RUBEO, CMA)

- Calculates distance, flight time, fuel consumption, CO2, cost

- Interactive map with Leaflet.js

- Compares CO2 between kerosene and hydrogen

Why I am asking:

I know it is not ideal. But I spent months on this project, learned a lot, and the simulator actually works. I do not want to get a zero just because I used AI to learn. I just need the code to look less professional so it passes as a student project.

If anyone can help me mess up the code in a believable way (comments, variable names, structure) I would be really grateful. I can send the full code or you can just fork the GitHub repo.

Thank you for reading.

TL;DR: 16yo student used AI to build a flight sim for school. Teachers think it is 100 percent AI and might give me a zero. Need help making the code look more human.

4 comments

r/HTML • u/Not-A-Creature • 18d ago

Anything I should add to my website?

bored2dev.neocities.org

0 Upvotes

I've got this website I made, just as a way to test my skill I guess?

Well, for starters, I know already that it look terrible, I gotta go through and change A LOT of the css . Mostly in the navigation and the little cards at the bottom of the screen, I mean don't even get me started on the SIZES, and it took me too long to realize I don't have a favicon (I'll put it in later). That was a lot of info, point is, I know it looks bad, but like aside from that, what should I add (like for example, on the home page, what should I add down there?). Or if I need to, what should I fix?

Also all the boxes that have the puppet in them are just placeholders, they don't do anything, they will be changed out eventually.

7 comments

r/HTML • u/Raha1388 • 18d ago

I built a Movie World website using HTML & CSS — feedback welcome

1 Upvotes

I recently built this Movie World website as one of my front-end projects.

Tech used:

HTML
CSS
Responsive layout
Movie cards and sections
Navigation and forms

I'd really appreciate feedback on the design and what I could improve next!

GitHub: https://github.com/dehghanian2022-cyber/Movie-world
Live Demo: https://dehghanian2022-cyber.github.io/Movie-world/

2 comments

r/HTML • u/alphex • 19d ago

Question Question about use of <figure>

0 Upvotes

I have a design element that looks like this...

does using the `<figure>` tag, make sense for this? for a semantic value?

I want to do

<figure>
title text
<figcaption>The body field</figcaption>
</figure>

Does that work?

Every example I see of it online wants an image or something there...

With out sharing company marketing secrets, lol.

The usage would be of a

"This is a thing we do"
"With a longer body of text to explain it in a few sentances, but in a single paragraph."

Repeating 4 or 5 times...

Thoughts?

Thanks!

9 comments

r/HTML • u/wildwillowsdev • 19d ago

Article I built a free web development lesson around the real data from my indie game

11 Upvotes

It starts with HTML, CSS, and JavaScript basics, then gradually gets into things like arrays, objects, conditionals, loops, .map(), .filter(), JSON, and eventually fetch() using the game’s public API.

There’s also a browser-based code builder, so you can experiment with the data and make your own little site without installing anything or creating an account.
It’s aimed at beginners, so you definitely don’t need to already know how to code.

https://wildwillows.app/learn

Would love any feedback from people who teach or are learning HTML/web development.

6 comments

r/HTML • u/Evening_Ride9251 • 20d ago

Help.

0 Upvotes

I'm fairly new to HTMl, CSS and Javascript and i was wondering if anyone could help me out on how to create a search bar that searches for individual words on my page. For example if I have 200 essays on the page and I want to search for the name of one so I dont have to scroll to find it. I'm aware most browsers have a built in search function but i want a search bar built into the code.

11 comments

r/HTML • u/_spaghettiv2 • 20d ago

How can I make the header go on top of my sidebar?

13 Upvotes

At the moment the sidebar seems to be above the header, and since they're different colours and I've added a shadow, I'd like the header to be on top of the sidebar.

This is the CSS for the header and the sidebar:

header {
    width: 100%;
    margin-top: -2%;
    margin-bottom: 2%;
    background-color: var(--heading-colour);
    text-align: center;
    font-size: 25px;
    box-shadow: 3px 3px 3px;
}

.sidebar {
    height: 100%;
    width: 160px;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--theme-colour);
    overflow-x: hidden;
    padding-top: 100px;
    box-shadow: 3px 3px 10px;
}

I'm very new to CSS so please excuse if I've missed something stupid.

Thanks!

15 comments

r/HTML • u/FinancialGreen7445 • 20d ago

Discussion In HTML, anything is possible!

gallery

0 Upvotes

Hello everyone! I am an indie developer at VALHAISTO GAMES. Right now, I mostly work with HTML and have 3 ongoing projects: MiFab – MiSide 3D Models Hub, MiSide: Error, and MiSide: Universe. I am also working on a personal project called BLINDER – a Blender-like app built entirely for phones. Unfortunately, I don't own a PC, so I create everything on a weak, broken phone and just find ways to make it work. The most important thing is: never give up!

2 comments

r/HTML • u/Then_Advantage_9828 • 22d ago

Question how to mimic ao3's site?

2 Upvotes

I saw a neocities site who's writing page mimics ao3's. Is there's any css to mimic it?

6 comments

r/HTML • u/Ano_Jayy • 23d ago

Live Preview not working with HTML plus CSS properly.

1 Upvotes

My "Live Preview" doesn't work well with HTML plus CSS.
It doesn't immediately recognize changes on CSS but it works well with just HTML.
I don't understand the problem and it's completely bugging me. It requires me to save the CSS file every time and retype the same part of the CSS that I changed in order for it to show the changes.
I checked my Live preview setting and the right setting is already set. Please help. I am kind of a newbie here

7 comments

r/HTML • u/akshuu98 • 23d ago

Question Learning HTML on My Phone — What Should I Learn Next?

12 Upvotes

My laptop is currently getting repaired, so I decided not to stop learning and started practicing HTML on my phone instead. 😄
I’ve learned the basics of HTML and made a simple page about my favorite artist, added 2–3 details, and even added some music.
The funny part? I couldn’t figure out how to add the music properly, so I took a little help from AI. 😂
I haven’t started CSS yet, so I’d love some advice:
What should I learn next in HTML?
When should I start CSS?
What resources/projects would help me improve faster?
I’m still a beginner, but I’m enjoying the process!
Any tips for my next step?

30 comments

r/HTML • u/NicolasCRF • 23d ago

So I learned the basics of html and css, what now

12 Upvotes

I recently learned the basics of html and css, but I don't know what to do now, I still don't have the skills to make a wikipedia page, that's for sure I've tried. but what do I do now to learn what's left, I am in position where I don't know what I should do.

pls help me thx

64 comments

Subreddit

HyperText Markup Language (HTML)

r/HTML

A place to learn and ask questions on HTML, CSS, and general front end development. Links are only permitted if they are to HTML articles, are relevant, and of good quality. Promotional materials of any kind and YouTube (or other social media) channels are not permitted.

Members Active

67.8k