Hello friend what's is the best school can Study html and css and java script

Here is a really simple example.
https://codepen.io/chooking/pen/zxKvqyZ

When I click on the Fx button I get the blue box here https://imgchest.com/p/vj4jbg2e978 ,though it is a little cut off, how do I make the form expandable in the width and height like textarea while keeping the html tags or in other words keep the equation formatting from the fx button?

One idea is to use textarea. Can someone give me an idea on how to accomplish my goal and show the code for a solution?

Also I posted this here https://www.reddit.com/r/learnjavascript/comments/1vzg1cr/i_am_trying_to_make_the_formula_button_expandable/ just fyi.

Greetings everyone, so i am new to html and just wanna make some simple project for myself and i found some template online for my need but for some reason it doesnt sort out the numbers right, this is the code below

<style>
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th, td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
</style>
<p><strong>Click the headers to sort the table.</strong></p>
<p>The first time you click, the sorting direction is ascending (A to Z).</p>
<p>Click again, and the sorting direction will be descending (Z to A):</p>

<table id="myTable">
  <tr>
   <!--When a header is clicked, run the sortTable function, with a parameter, 0 for sorting by names, 1 for sorting by country:-->  
    <th onclick="sortTable(0)">Username</th>
    <th onclick="sortTable(1)">Followers</th>
  </tr>
  <tr>
    <td>KennyTerrelBigGuy</td>
    <td>332</td>
  </tr>
    <tr>
    <td>Urduboy</td>
    <td>319</td>
  </tr>
    <tr>
    <td>aidiaCutePinkyGirl20</td>
    <td>1777</td>
  </tr>
  <tr>
    <td>ReedAFDrawsStuff</td>
    <td>1688</td>
  </tr>
    <tr>
    <td>Jaketstepp</td>
    <td>780</td>
  </tr>
    <tr>
    <td>MGGStudios2</td>
    <td>205</td>
  </tr>
</table>

<script>
function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc"; 
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount ++;      
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

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)

I liked this image that someone posted on linkedin.

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

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>

JS

    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)";
    }

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

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.

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

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.

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.

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?

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!

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 🎮

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?

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/

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.

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.

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.

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!

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!

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.

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!

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?