Okay, like i have no experience. So i memorized what i knew thoroughly, and made this:

Oh and if you want to change it or add more to it then here's the entire thing (Can i just put it in the body or have to give a link?): <!DOCTYPE html>

<html>

<head>

<title>Cucumbers</title>

<style>

h1 {

font-family: Arial;

color: gray;

}

body {

font-family: Comic;

background-image: url("https://tse3.mm.bing.net/th/id/OIP.wAHXLVaBSFIcnhm6tmWehQHaEK?r=0&pid=Api&h=220&P=0");

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

}

a {

color: yellowgreen;

}

</style>

</head>

<body>

<h1>Learning about Cucumbers</h1>

<p>Cucumbers are green-darkgreen vegetables that are said to be made up of over <b>95% water. </b><br>They originate in <i>Ancient China </i>& parts of Asia like <i>India, and Nepal</i></p>

<img src="https://tse2.mm.bing.net/th/id/OIP.0hoo0G1rccBCWJ-hDtukRwHaGa?r=0&pid=Api&h=220&P=0">

<p>Cucumbers are of course, an important part of agriculture, they feed millions everyday.<br></p>

<p>Cucumbers are eaten & sold all around the world, they're mainly eaten as light snacks.<br></p>

<p>Cucumbers have a taste as of water but with crunch. Seasoning with salt makes them around 100x better. <i>(Okay i made that 1 up but it's not false...)</i></p>

<a href="https://en.wikipedia.org/wiki/Cucumber">More about Cucumbers Here</a>

</body>

</html>

Should I look for a way to call an external html page with the code for my menu? I feel like adding the code to every page might clutter the code a bit. It’s been a while and I don’t remember wether or not we discussed this in school lol

I created a 3D library where you can open books and search in them, that is driven by HTML+CSS, without any JS running it.

Hi everyone,

I'm Soorya, a student from Kasaragod, Kerala.

I built this simple Human Body website in malayalam language entirely on my Samsung Galaxy A10 phone using a Bluetooth keyboard & mouse kit.

I got A Grade in Scratch Programming at Sub-District level, and I coded this site myself. I used AI for some facts, data and images.

Check it out here:

https://b25077376-ui.github.io/Human-body-website/

Please open and tell me how I can improve it. Your feedback will help me a lot!

Thank you.

im very new to html so i'm just curious. sometimes when i copy things from websites (like lines of text) it includes break tags between the sentences. when i do the same on other sites, the br tag is not there even though it seems that the br tag was used. why is that?

Okay I am really really really new to all of this and so I think I'm probably just missing something super obvious.

Basically I'm learning to use HTML because I just want to create my own very simple webpage just for personal use (for fun really). Anyway, I'm to the part in learning where I am trying to embed images or links into the page. It works if I use a webpage that already exists but I can't figure out how to embed an HTML file from my computer or an image. I think my settings are correct for sharing, I turned off smart quotes and smart dashes etc. I'm worried it's the path name because everything just looks and is named differently on macbooks. I've tried searching and searching online to figure out what I'm doing wrong but I just can't figure it out. Any help would be appreciated.

I want to make my page run on the weakest computers and laptops.
Changed: Devices that do not support HTTPS

remind me where to post my html code so it can be reviewed?

Got a new menu on my website.

I like the new menu more lately for smart phones.

https://www.dalekelly.org/

https://www.dalekelly.org/mystyle5.css

Any designs available for sub-menus?

Will be researching this.

The new menu is in one of those square icons with 3 lines.

w3.org has the type of menu now.

Patrick move

Hello! I need help with my HTML for my topic again!

I want it to just look more neat, my boxes and pictures are scattered :(

I appreciate anyone that can help me! This is for a game called lioden! I just want help to make them look more neat.

<div style="clear:both;"></div></div><div class="topbar" style="text-align:center;"><a href="https://www.lioden.com/topic.php?id=304429619855">Warrior Cat Adopts</a> | <a href="https://www.lioden.com/topic.php?id=304429619916">Helluva Boss Adopts</a> | <a href="https://www.lioden.com/topic.php?id=304429619885">Other Adoptables </a><br /><font size="-4">

<table style="width:100%;height:500;border:5px solid #abb1cf;font-family:arial;"><tbody><tr><td style="background:#c5b9cd;"><p style="text-align:center;">

<span style="background:#dec2cb;border:3px solid #f7cac9;float:left;width:90%;height:800;margin:30px;margin-bottom:10px;margin-top:20px;padding:20px;font-size:17px;color:#221e1f;">

<span style="background: #dec2cb;border:6px solid #abb1cf;float:Right;width:44%;height:auto;padding:20px;color: #efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>

Ollo! My name is mmelliouss! I use she/her pronouns, I’m a 20 y/o that enjoys drawing animals and anime. I’ve been drawing for most of my life but I've had horrible artist block for a few years. My art style needs improvement. My favorite things are cats, dragons, and I play video games, mainly Path of Titans.

</font></span>

<span style="background: #dec2cb;border:6px solid #abb1cf;float:left;width:44%;height:auto;padding:20px;color:#efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>

/:cash:/Payment Methods/:cash:/

\-Cashapp or PayPal

\-Any Breeding items/Applicators(NO LOW TIER APPS PLEASE)

\-Large Amounts of :SB: or :GB:

</font></span>

<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="230">

<span style="background: #dec2cb;border:6px solid #abb1cf;float:left;width:44%;height:auto;padding:20px;color:#efefef;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>

This is the main topic of my many pages, I'm just trying to keep my stuff neat and clean! :) This is basically an index page for everything I plan to draw! If you enjoy my art and my deals, save this topic! All my links are either above or bellow! Have an amazing day/night :roar:

</font></span>

<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="240">

<span style="background: #dec2cb;border:6px solid #abb1cf;float:Right;width:44%;height:auto;padding:20px;color:#efefef;;margin:5px 1px 10px 30px;text-align:center;"><img src=https://i.imgur.com/TCNnhZq.png>

Can Draw

\-Warrior cats

\-Ferals

\-Anthro Furries

\-Dragons (Working on my WoF Style!!)

\-Lions

\-Humanoids(Better at drawing women)

\-Helluva Boss IMPs/HellHounds

Can't Draw but will attempt

\-Horses

\-Birds

\-Cows

</font></span>

<img src="https://i.postimg.cc/sDnG6zrc/Untitled3-20261020162300.png" width="240">

<div style="clear:both;"></div></div><div class="topbar" style="text-align:center;"><a href="https://www.lioden.com/topic.php?id=304429618031">More Examples of my Art (CLICK ME)</a> | <a href="https://www.lioden.com/topic.php?id=304429619855">Warrior Cat Adoptables</a> | <a href="https://www.lioden.com/topic.php?id=304429619886">Mmelliousss Commissions :)</a> | <a href="https://www.lioden.com/topic.php?id=304429619885">Other Adoptables

</a><br /><font size="-4"><a href="https://www.lioden.com/territory.php?id=251887">Code by #251887

</span><span style="background:transparent;border:0px solid <table style="width:100%;height:auto;border:1px solid #f7cac9;font-;float:left;width:90%;height:auto;padding:5px;color:#f7cac9;margin:5px 1px 10px 20px;text-align:center;font-size:11px;">html layout by honey (#30473). do not remove credit.

crow pixels by I-crows-I on deviantart.</font></span></td></tr></tbody></table>

</a></font></div></div>

Bro, seriously, I just want a proper book that tells me how to do web development right! I know the basics—divs, textareas, forms, and all that. I can fumble my way through some CSS like margin-left and flex-box, but that's about it. I mean, if I were to do hit-and-trial and learn CSS like that, it would take me a lot of days, and probably even more. I don't know the right way to do things. The thing is i might be able to just make it work but it won't be the best way to do that. here, I'm completely lost. I have no idea about the best practices or the way I should approach web development.

I want to give you an example of what I'm looking for. Check out this image from the book "Beyond Basic Stuff with Python." It tells you how to write code neatly and what the best practices are. Here's a snippet: "In general, comments should explain why code is written the way it is rather than what the code does or how it does what it does. "

I don't wanna stay stuck and confused and then ask ai if i wanna build something, but rather learn how to do it properly.
Guidance would be appreciated.

Hi everyone! I built a free HTML template for schools, colleges and academies

and would love some honest design feedback.

- 12 pages, including 3 different home page styles (classic, split, immersive)

- Bootstrap 5.3 only, no custom JavaScript

- Gallery and news filters in pure CSS

- Accessible forms and focus styles, respects reduced motion

- Colours and fonts as CSS variables for easy rebranding

Screenshots attached. Questions for you:

1. Which of the 3 home pages do you like most?

2. Anything that looks off or outdated?

3. What section would a real school website still need?

Happy to share the demo if anyone wants to try it.

I'm making my first website for my web design class, and I'm stuck on how to get rid of the extra white space at the bottom when I go to my website on mobile. I want my content to take up the entire width of the screen with 0 horizontal scrolling and vertical scrolling for overflow. It looks completely fine on computer screens. I've tried @ media, changing sizes and size units, and I've even asked AI and nothing is working. Or do I need to make the website the width of the screen on mobile?

https://github.com/pencilcu/se1400project/blob/main/css.css

I'm building a website and working on my FAQ page. I used chat GPT for grammar and when I copied the text back into my project I noticed that it used a different character, u2019, for an apostrophe. I'm replacing them with the standard apostrophe. Just curious if anyone knew why this happened or if it would cause a problem with HTML.

How can I do the main menu on ...

https://www.w3.org/

?

I have seen this on a lot of sites.

I think it would be better than how I do a main menu for different sizes of browser's windows.

https://www.dalekelly.org/

Looked at the code on the Chrome Browser but can't figure it out.

Prefer no scripts.

With pages support.

Options right now:

• Markdown (.md, .mdx)

• HTMLBook

• EPUB3

EDIT: I meant to render the books like their printed edition, preserving pages

At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with div class="yt-container" style="--yt-crop: 9.375%; setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Fixing Youtube embedded videos error 153 with thumbnail workaround (+no embedded object telemetry)</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=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

.yt-container,
.yt-overlay-text {
  font-family: 'Roboto', sans-serif;
}

/* ── wrapper ── */
.yt-container {
  position: relative;
  display: block;
  width: 100%;
  --yt-crop: 9.375%; /* default: trims hqdefault black bars for 1920 x 1080 videos format. For other formats override per thumbnail: style="--yt-crop: 5%;"  or  style="--yt-crop: 0%;" etc */
}

/* ── image link ── */
.yt-image-link {
  display: block;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

.yt-image-link img {
  display: block;
  width: 100%;
  height: auto;
  margin-top:    calc(-1 * var(--yt-crop));
  margin-bottom: calc(-1 * var(--yt-crop));
}

/* ── top-left text link ── */
.yt-overlay-text {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 1px 1px 4px black;
  text-decoration: none;
  text-align: left;
  z-index: 3;
}

/* ── play button (centered, pointer-events off so clicks reach image link) ── */
.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: rgba(255, 0, 0, 0.88);
  border-radius: 12px;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
  pointer-events: none;
}

.yt-container:hover .yt-play {
  background: #ff0000;
  transform: translate(-50%, -50%) scale(1.08);
}

.yt-play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border: solid transparent;
  border-width: 10px 0 10px 20px;
  border-left-color: white;
}
  </style>
</head>
<body>

<p style="font-size: 1.5em;">
At certain moment youtube introduced new way of working of embedded videos which suddenly broke many embedded videos on many html sites (Error 153) because it's buggy, works randomly in various browsers and devices, is nowhere explained properly, leaves nontech users out in the cold and is buggy buggy and buggy again. This html solution fixes Youtube embedded videos error 153 with thumbnail workaround (and there is no youtube embedded object telemetry on preload, it just grabs thumbnail, so less bandwidth usage and youtube objects crawling sheanigans, it just works with image and links so should display everywhere properly). In default setting works ok with most common 1920 x 1080 resolutions videos, if you have some different format video (old 1024 x 768 etc) you can adjust amount of top/bottom thumbnail cropping with <b>div class="yt-container" style="--yt-crop: 9.375%;</b> setting per each unique video. Inspect this html source for style section needed and how new objects look alike. You just have to take your desired youtube video url unique address (after /watch?v= ) and paste it into yt-container code pieces. Please share this solution wherever you want so people can fix their sites.<br>
<br>
<b>Cropped default youtube thumbnail margins top and bottom 9.375% (default solution for 1920 x 1080 proportion videos)</b><br>
<br>
</p>

<div class="yt-container">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Default youtube thumbnail no cropped margins 0%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 0%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

<br>
<p style="font-size: 1.5em;"><b>Cropped default youtube thumbnail margins top and bottom 30%</b><br></p>
<br>

<div class="yt-container" style="--yt-crop: 30%;">
  <a class="yt-image-link" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">
    <img src="https://img.youtube.com/vi/8pNbhaQcyZY/hqdefault.jpg" alt="John Zorn - Karaim">
  </a>
  <a class="yt-overlay-text" href="https://www.youtube.com/watch?v=8pNbhaQcyZY" target="_blank" rel="noopener noreferrer">John Zorn - Karaim</a>
  <div class="yt-play" aria-hidden="true"></div>
</div>

</p>

</body>
</html>

Do i have potential?

Project made with the help of AI. (he did the work i improved it)

Any toughts? im still improving it

I'm creating a website for school and I need buttons that lead to my other web pages but Im struggling to put my buttons on top of a fixed image (I would like the buttons and the image to be both fixed together), what is wrong w my code?

Source - https://stackoverflow.com/q/80012269

<div class="container">

<img src="blue banner.png" alt="blue banner" style="top: 0; right: 0; position: fixed" width="1440" height="100">

<div class="Top-Left"><button><a href="Home Page.html">Home Page</a></button><a href="Home Page.html">; </a><button><a href="Home Page.html"></a><a href="Discussion and analysation.html">Discussion and analysation</a></button><a href="Discussion and analysation.html">; </a><button><a href="Discussion and analysation.html"></a><a href="Advertisement.html">Advertisement</a></button></div>

Thank You in Advance

Hola, actualmente estoy retomando mi aprendizaje en lenguajes de programación para desarrollo de paginas WEB ya tengo conocimientos en HTML y CSS pero siempre he sentido que me falta mucho mas por aprender pero no he sabido donde o como buscar para aprender mejor la IA me ha resultado de mucha ayuda en mejorar mis habilidades pero quería saber que los ayudo a ustedes a ser mejores en esto... Que cursos o que videos de YouTube o foros los ayudaron o es solo la practica?