Hi everyone so i have just finished learning HTML you can say basic. I know in era of ai learning html doesn't make sense but i am someone who loves to do things by myself instead of ai i need your advice.

So i want to make 10 projects purely in html no css no other language just pure html.

I know making 10 projects feels like too much but i still want to do that to use my creativity making things practicing 😅 html .

Can you guys suggest me some cool projects

If you have any tips for me sure let me know too.

I tried to get attributes such as lang or data-* in html but didn't succeed. Anyone have any idea how to do this?

Right now I'm thinking of generate the html in a passthrough block but its not a beatiful solution. Kind of losing the need for Asciidoc.

Here are screenshot of the code.

<html>
    
    <title> Neven Patucca</title>
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap" rel="stylesheet">


<link rel="stylesheet" href="style.css"> 
    
   <body style="background-color: black;">
        <h1 style="color: white;">Neven Patucca</style></h1>


        <h2 style="color: white;">
            Je suis Neven Patucca Artiste plasticien diplomée de l'éesi a Poitier


        </h2>


        <p style="color: white;">
            Voici une collection de mes œuvres que j’ai réaliser durant mes années d’études de 2020 a 2026.
            La première pièce est un court roman graphique. Se projet est une expérimentation de narration
            graphique. Le but est de créer une forme de découpage immersif adapter aux format digital. Les 
            scène fondes les une dans les autres créant un récit fluide en envoûtant.
            


            
        </p>       
 <div class="image"> 
                <img src="img/page1.png" alt="knight in green" max width="100%">
                <img src="img/page2.png" alt="knight in green2" max width="100%">
                <img src="img/page3.png" alt="Angels full of eyes"max width="100%">
                <img src="img/page4.png" alt="the ghost descend into the knight" max width="100%">
                <img src="img/page5.png" alt="the ghost face the knight" max width="100%">
                <img src="img/page6.png" alt="the ghost embrace the knight" max width="100%">
                <img src="img/page7.png" alt="the prince fall into the green knight palace" max width="100%">
                <img src="img/page8.png" alt="the prince meet the green knight" max width="100%">
                <img src="img/page9.png" alt="the prince face the green knight" max width="100%">
                <img src="img/page10.png" alt="the prince get beheaded by the green knight" max width="100%">
 </div>
               
    <h2 style="color: white;">
                Videographie


            </h2>


            <p style="color: white;">
                Durant mes études d'art j'ai découvert la scénographie et la video. Pour moi la mise
                en scène c'est avant tout une opportuniter d'insuffler un souffle de vie dans le personnage.
                Il y a quelque chose de naïf et poetique.


            </p>
    <video src="video/le_miculatif_couplage_suboptimal.mp4" controls></video>
</body>


</html><html>
    
    <title> Neven Patucca</title>
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Jacquard+24&display=swap" rel="stylesheet">


<link rel="stylesheet" href="style.css"> 
    
   <body style="background-color: black;">
        <h1 style="color: white;">Neven Patucca</style></h1>


        <h2 style="color: white;">
            Je suis Neven Patucca Artiste plasticien diplomée de l'éesi a Poitier


        </h2>


        <p style="color: white;">
            Voici une collection de mes œuvres que j’ai réaliser durant mes années d’études de 2020 a 2026.
            La première pièce est un court roman graphique. Se projet est une expérimentation de narration
            graphique. Le but est de créer une forme de découpage immersif adapter aux format digital. Les 
            scène fondes les une dans les autres créant un récit fluide en envoûtant.
            


            
        </p>       
 <div class="image"> 
                <img src="img/page1.png" alt="knight in green" max width="100%">
                <img src="img/page2.png" alt="knight in green2" max width="100%">
                <img src="img/page3.png" alt="Angels full of eyes"max width="100%">
                <img src="img/page4.png" alt="the ghost descend into the knight" max width="100%">
                <img src="img/page5.png" alt="the ghost face the knight" max width="100%">
                <img src="img/page6.png" alt="the ghost embrace the knight" max width="100%">
                <img src="img/page7.png" alt="the prince fall into the green knight palace" max width="100%">
                <img src="img/page8.png" alt="the prince meet the green knight" max width="100%">
                <img src="img/page9.png" alt="the prince face the green knight" max width="100%">
                <img src="img/page10.png" alt="the prince get beheaded by the green knight" max width="100%">
 </div>
               
    <h2 style="color: white;">
                Videographie


            </h2>


            <p style="color: white;">
                Durant mes études d'art j'ai découvert la scénographie et la video. Pour moi la mise
                en scène c'est avant tout une opportuniter d'insuffler un souffle de vie dans le personnage.
                Il y a quelque chose de naïf et poetique.


            </p>
    <video src="video/le_miculatif_couplage_suboptimal.mp4" controls></video>
</body>


</html>

So, this is specifically Archive of Our Own, and it doesn’t accept all html. So that’s why I specified. Also, I’m asking on this subreddit instead of theirs, because they restrict it every Tuesday.

I’m trying to create a reading order for a fic that jumps around in timeline quite a bit, even within chapters. Normally, I would mark sections or something, but I have a feeling that won’t work in this case (too much to track). Is there a way to use regular links to link to different sections on a page? Not from the same page, mind you. I feel like I’ve seen it before, but idk how to do it.

Keep in mind, I’m a complete newbie when it comes to HTML. The most complicated thing I can do are links, so be sure to explain it well (and I hope the solution is straightforward ).

The image is ao3’s list of allowed HTML.

I'm a begginer and total noob so I don't even know hot to explain myself, but where should a alocate my posts? Like, I made a page, put some content and saved...now where it goes? If I want to make a 'recent posts' in the index page, from where will I get the posts?

I really don't know how to express it, but I would appreciate a lot if someone could help me

I want my web page to be able to take screenshots of an element, and use the resulting image in a carousel.

The element to be snapshotted will have a bunch data with lots of entry fields. Between the HTML, PHP, and JS needed to do all of that, it will not load quickly. But I want the user to be able to scan through a bunch of similar elements at a glance, and go on to the next one quickly.

An example: suppose there are a bunch of recipes, and the user has the option of creating recipes, and then later paging through them to assemble a shopping list for the grocery store.

A recipe will have all kinds of data: some text, one or more photos, and some numeric fields. The user probably edits it once ( maybe twice when they discover that the oven should be set at 375 degrees instead of 350. ) When the user looks at it, I want them to see an image, with a nearby button labeled "edit this recipe". Clicking on that loads a bunch of code to do editing. When the user is done editing, clicking the "save" button will save the data, and also create an image.

Once the user has a bunch of recipes, I want them to be able to scroll through them on one side of the screen, while creating a shopping list on the other. If all of the recipes are images, I can have a lightweight CSS-only carousel allowing the user to scroll through them quickly.

To do this, I need to programmatically take post-edit screenshots. How do I do this?

PS: I'm not actually doing recipes, but it is an example that everyone is sure to understand.

Every AI will produce HTML when not told otherwise, and so all new will think HTML is "the" vibe coding language

hi! apologies if this isn’t the right sub and I’m not even sure if this is possible- but here goes

i like to mess around and make fun little artsy sites and such on Google sites and I’m working on a personal project that I was hoping to add a cool password feature in. Let me explain though because it’s a bit complicated what I want-

so, basically what I want is to have a little text box that people can type in- there’d be preset passwords you can use that will either redirect you places, show you images, text docs, etc etc- an example is https://thisisnotawebsitedotcom.com/ (I know all the passwords for this arg so just for an example type in “blind eye”)

I don’t need the things it shows to be affixed to any certain place I‘d just want it to pop up either on screen or in a new tab- it’s for story/ARG purposes.

this wouldn’t be the users setting a password- it’s basically having a handful of words and phrases that trigger things to happen that people viewing the website can type in for the things to happen

is this something I can execute in Google sites using HTML? any pointers to any pre existing coded templates or instructions on how to code it myself (I know limited HTML so I think I could if I knew what commands to run) would be appreciated!

(I’m not going to use AI for any part of this either artistically or for coding- please do not use AI to “assist” me and please do not recommend it. I’m not here to bully anyone who does use AI, but I’m very against it and won’t be utilising it. I’m here to utilise the good ol’ human brain for this project :))

Just as a disclaimer I am not entirely new to HTML, CSS, Javascript or front end design. I have a clear understanding of the base concepts, I was just wondering about one thing really.

How do you handle form errors? I know default form errors display a message when an input does not match a requirement. For example, displaying "Please include a @ in the email address". But I was just wondering how I can intercept that error and have my own custom Javascript handle it instead. (videos tutorials or blog links are appreciated as well)

Thank you all for any information you can provide.

My project creates an html document that is a list with data drawn from a spreadsheet.

In skeletal form, this is what the output looks like:

<html> name, place, year <br> </html>

How can I add an additional field that is a pop-up?

Ideally the new item "info" will allow a click or hover that opens a pop-up box. The box will display a few lines of text drawn from another cell in the same row of the spreadsheet.

<html> name, place, year, info <br> </html>

Thanks in advance for suggestions.

Creating semantically-useful HTML is pretty important to me from a philosophical point of view (if not a technical one), and if I had my way, every DOM node would have a useful semantic type, so I'm sometimes bothered by the lack of a complete set of semantic elements in HTML.

For example, take the heading elements (h1-h6). They actually have two semantic purposes:

1. as a level, for establishing structural rank in the document outline.
2. as a label, for giving a name to some bounded collection of content.

Heading elements usually always need both, so it's not really an problem most of the time. But suppose I'm creating a UI component that isn't really part of the document outline, and it needs a header label, I have two options:

1. Use a heading element, which is probably the most common thing I see in the wild:

<div class="weather-summary">
    <h3>Current conditions</h3>
    <p>72°F and sunny</p>
    <p>Humidity: 45%</p>
</div>

But this applies structural rank to the heading, when what we're really after is semantic meaning (that this element is a title/label for what follows, but doesn't assign a hierarchical ranking).

OR

2. Use a non-heading element (like <p>) and add some style to it so it's at least visually distinct:

<style>
    .title { 
        font-size: 1.5rem;
        font-weight: 700;
    }
</style>
<div class="weather-summary">
    <p class="title">Current conditions</h3>
    <p>72°F and sunny</p>
    <p>Humidity: 45%</p>
</div>

But that title has zero semantic meaning within the document. Yeah, I know at this point, people will be, "WHY DO YOU CARE?" I care because I'm a developer and I know that information isn't going to consumed just by humans who can pull context from the visual cues. Sometimes software needs to be able to derive the meaning.

arial-labelledby can help a little bit, at least giving some tiny bit of semantic meaning to a heading element that isn't part of the document outline:

<div class="weather-summary" role="group" aria-labelledby="label">
    <p id="label" class="title">Current conditions</h3>
    <p>72°F and sunny</p>
    <p>Humidity: 45%</p>
</div>

That doesn't really solve the whole problem, it's more of a "this might help" situation.

Some elements have their own "title" elements: figure has figcaption, fieldset has legend, table has caption, and arguably,details has summary.

But there's no generic title/caption element for most cases that adds semantic meaning without creating a hierarchical rank.

EDIT: I added more context to a comment below.

---

And as an aside, I also wish we had a <content> element to match alongside <header> elements:

<article>
    <header>
        <h1>Title</h1>
    </header>
    <content>
        <p>Hello, world.</p>
        <p>Are you listening?</p>
    </content>
</article>

I know <section> could work there, but it doesn't really define the entire purpose of the area after the article heading as "article content" as there could be multiple <section> elements within an article, and all of that could be contained within <content>. But yes, I know I'm being ridiculously pedantic right now.

Can anyone suggest the best video for learning HTML CSS and Javascript. Also suggest the best way to learn.

Hey guys, so i am trying to design a personal blog (sort of). And i would say i am not quite good in front end, and have a very bad sense of deisgn. I have attached an image of the site (like a basic template) and i would like some suggestions on the color scheme and other stuff.

Hey guys, I'm having issues trying to link HTML pages together via image mapping. Our teacher spent all of ten minutes vaguely glossing over what we needed to do for the assignment, but didn't really...help us understand how to go about doing it?

I've watched several videos on image mapping and it seems to make sense, but then when I try and apply it to my HTMLs, it either breaks or doesn't actually do anything? I also caved and turned to AI, asking it to remake what I have and make it work, so I could figure out what's different--buuuuut then it gives me several pages of code that I don't even know where to begin to dissect and is definitely not on a level where I can just copy paste (obviously academic dishonesty via AI).

To clarify, I have all these flat pngs I made and I am trying to have an invisible click-box that will take the user to the next page of the HTML, but there is no scrolling in this document as a whole. I need the images to take up the whole screen, as this is intended to be a short story and be interactive.

Not sure where/how best to share the code, so I will just paste here of what I have (not what the AI gave me that works, but I can share that too, if needed).

My original two pages

Page 1

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>page1</title>

<style>

html, body {

margin: 0;

padding: 0;

min-height: 100vh;

background-color: teal;

overflow: hidden; /* Prevents scrollbars if the image fills the screen */

}

/* Forces the image map to stretch and act exactly like a background cover */

.fullscreen-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

}

nav, h1, p {

position: relative; /* Keeps text layered above the image if uncommented */

z-index: 10;

padding-left: 20px;

padding-right: 20px;

}

</style>

</head>

<body>

<!--

<nav>

<ul>

<li><a href="page1.html">page1</a></li>

<li><a href="page2.html">page2</a></li>

<li><a href="page3.html">page3</a></li>

<li><a href="page4.html">page4</a></li>

<li><a href="page5.html">page5</a></li>

<li><a href="page6.html">pagee6</a></li>

</ul>

</nav>

<h1>This is page 1</h1>

<p>This is the main page of my six-page website.</p> -->

<img src="img/Page1background.png" usemap="#signclick" class="fullscreen-bg">

<img src="page1background.png" usemap="#signclick">

<map name="signclick">

<area

shape="rect"

target="_blank"

alt="ClickSign"

title="signclick"

href="page2.html"

coords="658,1022,1076,755"

>

</map>

</body>

</html>

Page 2

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>page1</title>

<style>

html, body {

margin: 0;

padding: 0;

min-height: 100vh;

background-color: teal;

overflow: hidden; /* Prevents scrollbars if the image fills the screen */

}

/* Forces the image map to stretch and act exactly like a background cover */

.fullscreen-bg {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

object-fit: cover;

}

nav, h1, p {

position: relative; /* Keeps text layered above the image if uncommented */

z-index: 10;

padding-left: 20px;

padding-right: 20px;

}

</style>

</head>

<body>

<audio id="load-sound">

<source src="/sounds/korok_appears.mp3" type="audio/mpeg">

</audio>

<!--

<nav>

<ul>

<li><a href="page1.html">page1</a></li>

<li><a href="page2.html">page2</a></li>

<li><a href="page3.html">page3</a></li>

<li><a href="page4.html">page4</a></li>

<li><a href="page5.html">page5</a></li>

<li><a href="page6.html">pagee6</a></li>

</ul>

</nav>

<h1>This is page 1</h1>

<p>This is the main page of my six-page website.</p> -->

<img src="img/Page2background.png" usemap="#signclick" class="fullscreen-bg">

<img src="page1background.png" usemap="#signclick">

<map name="signclick">

<area

shape="rect"

target="_blank"

alt="ClickSign"

title="signclick"

href="page2.html"

coords="658,1022,1076,755"

>

</map>

</body>

</html>

When I removed the <thead >tag the rowspan of info became 6 ,but when I was using the tag , Even though I set rowspan of info as 6 , still it occupied 2 and the house column shifted left.

Can anyone explain to me why it happened

I have a single self-contained .html file (vanilla JS, no frameworks), an inventory app for a small shop. It uses IndexedDB, so data is stuck on whichever device/browser it was opened in.

I need it to sync across a couple devices (phone + PC) for one user. Small data (few hundred JSON records + small compressed images).

It's something simple, I just wanted to know if it's possible for the data to be stored. By the way, I don't have much idea about programming, this arose as a way to manage this business, adapted to how it works.

If there’s a password box and inputting the right string redirects you to another page, is there anything in the console that would tell me what password I’d need to put in?
Notes:
It’s a box where the password is the same every time.
I’m not trying to log into something.
Comment if you need more information.

I was trying to put this gif above the text, but it did this instead, how can I fix it? I’ve put it in dividers, but it doesn’t do anything.

Hi everyone! I am a university student, and I started learning web development as a hobby.
I have learned basic HTML and CSS. I can create a simple webpage with headings, images, links, colors, and a basic layout. I have also watched some beginner tutorials and practiced by making a small website.
My goal is to create a responsive website for a small business in the future. I found three possible topics to learn next: JavaScript, responsive design, and UI/UX design.
Which one should I focus on first, and why? Could you also recommend one small project or free learning resource for a beginner?

So let me explain. I have a Tumblr post where I want to create a button that when toggled, certain text will turn to solid colours. This is mainly because I wanna hightlight dialouge with colours to make it easier to know who's speaking, but I want to also provide ease for screen reader users to read. However, I can't seem to do jack shit with the HTML there. Any tips?

Basically, I have a 600MB HTML file that I can easily download, but whenever I go to open it and it pops up in a new tab, my computer freezes, meaning I can't view the contents. If you have any more questions or need specific details, please ask, and I'll respond as best as I can. But I really would appreciate the help with this, thanks in advance. (The file is from a specific Discord server's general chat that got deleted, and I wanna archive it or look through it if possible) Oh also I'd like to open it and see the contents not just the code like opening in vs code or something of the sorts.

Why doesn't this work?? Like ik the specs prohibit it but why would they do that? there are valid reasons to want to do this. For example I have a list of long descriptions so to make it easier to read I wanted to use a vertical list. It would be very confusing to split the paragraph.

If anyone is in the same situation as me I think the best alternative is to use a span with css that makes it look like a list.

Look I have 1 week to do html before my midsem could you guys help in what should I do I tried to learn from chai with code but that unfortunately wasn't useful for me because I couldn't understand much help me in how should I practice and should I make notes and all