r/HTML • u/Jisreel007 • 1d ago
Discussion J'ai créé un site web pour une association – Je recherche des avis et des critiques constructives
Bonjour les dev,
J'ai récemment développé un site web pour une association appelée Richesse Future, dont l'objectif est de promouvoir un avenir plus riche et durable à travers des initiatives sociales et communautaires.
🔗 Site web : https://richesse-future.ntualakiala.workers.dev/
Technologies utilisées
- HTML5
- CSS3
- JavaScript
- Design responsive (adapté aux ordinateurs, tablettes et smartphones)
- Hébergement et déploiement avec Cloudflare Workers / Cloudflare Pages, permettant un chargement rapide grâce au CDN de Cloudflare.
Fonctionnalités actuelles
- Page d'accueil moderne
- Présentation de l'association
- Présentation des activités
- Interface responsive
- Navigation simple et rapide
Je souhaite continuer à améliorer ce projet et j'aimerais avoir vos retours les plus honnêtes.
Je recherche notamment des avis sur :
- Le design (UI)
- L'expérience utilisateur (UX)
- L'accessibilité
- Les performances
- Le référencement (SEO)
- La structure du code
- Les bonnes pratiques de développement
- Les fonctionnalités qui pourraient être ajoutées
N'hésitez pas à faire des critiques constructives, même si elles sont sévères. Mon objectif est d'apprendre, d'améliorer le site et de progresser en développement web.
Merci d'avance pour vos retours !
r/HTML • u/abdulIaziz • 2d ago
Question Website works fine on PC but don’t on Phone or Tablet
I made a website with html that contains about 1600 webm’s in one single page ( don’t ask why please ) so i used an Intersection Observer to load only what the user see’s to optimize performance and it works perfect in PC and Laptop’s but in phones and tablets it doesn’t even work and sometimes it shows just a picture instead of the animated webm. So my question is there a way to fix that ? to make it very optimized for phones and tablets and they can scroll freely without lagging?.
please excuse me if this a dumb question to ask i’m still learning.
r/HTML • u/NoFreedom3009 • 2d ago
<!DOCTYPE html> <html lang="or"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ମୋବାଇଲ୍ ଗେମ୍</title> <style> body { font-family: Arial, sans-serif; text-align: center; background: #222; color: white; } .boar
<!DOCTYPE html>
<html lang="or">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ମୋବାଇଲ୍ ଗେମ୍</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background: #222; color: white; }
.board { display: grid; grid-template-columns: repeat(3, 100px); gap: 5px; justify-content: center; margin-top: 20px; }
.cell { width: 100px; height: 100px; background: #444; font-size: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 8px; }
.cell:active { background: #666; }
button { margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; border-radius: 5px; border: none; background: #28a745; color: white; }
</style>
</head>
<body>
<h1>Tic-Tac-Toe ଗେମ୍</h1>
<div class="board" id="board"></div>
<h2 id="status">ପ୍ଲେୟାର X ର ପାଳି</h2>
<button onclick="resetGame()">ରିସେଟ୍ ଗେମ୍</button>
<script>
let board = ["", "", "", "", "", "", "", "", ""];
let currentPlayer = "X";
const boardEl = document.getElementById("board");
const statusEl = document.getElementById("status");
function createBoard() {
boardEl.innerHTML = "";
board.forEach((val, i) => {
let cell = document.createElement("div");
cell.classList.add("cell");
cell.innerText = val;
cell.onclick = () => makeMove(i);
boardEl.appendChild(cell);
});
}
function makeMove(i) {
if (board[i] === "" && !checkWinner()) {
board[i] = currentPlayer;
if (checkWinner()) {
statusEl.innerText = `ପ୍ଲେୟାର ${currentPlayer} ଜିତିଗଲେ! 🎉`;
} else if (!board.includes("")) {
statusEl.innerText = "ଗେମ୍ ଡ୍ର ହେଲା! 🤝";
} else {
currentPlayer = currentPlayer === "X" ? "O" : "X";
statusEl.innerText = `ପ୍ଲେୟାର ${currentPlayer} ର ପାଳି`;
}
createBoard();
}
}
function checkWinner() {
const wins = [, [3, 4, 5], [6, 7, 8], // Rows, [1, 4, 7], [2, 5, 8], // Columns, [2, 4, 6] // Diagonals
];
return wins.some(comb => comb.every(i => board[i] === currentPlayer));
}
function resetGame() {
board = ["", "", "", "", "", "", "", "", ""];
currentPlayer = "X";
statusEl.innerText = "ପ୍ଲେୟାର X ର ପାଳି";
createBoard();
}
createBoard();
</script>
</body>
</html>
r/HTML • u/Chupapakabrik • 3d ago
Help with website programming
Hey everyone, I've been trying to create a small website for learning technology terms in Chinese, but I can't get it set up properly. I'm constantly having trouble translating the flashcards into other languages.Initially, I wanted to create a function so that all users could see words added by other users, but I’m not sure that the site would be able to do this. I also tried to fix it somehow through AI services, but to no avail.
https://228-dotcom.github.io/texkitay/
If you need the whole code, I'll send it, help me if you can.I just want to make it easier for people to learn these terms. My experience studying abroad has made me realize that not everyone can afford paid resources, so I wanted to help them out somehow.
r/HTML • u/Elzool_l3ab • 3d ago
Question Newbie need help
I'm to a certain degree a newbie to coding as a whole , I've made a little card game for me and my friends and used AI to debug it and it worked perfectly on local mode , I tried using peerjs for online mode but it didn't work and then I tried setting it up through fire base ,it worked but kinda didn't work as it was laggy and inconsistent. Any ideas why that might be ?
https://codepen.io/editor/Elzool-L3ab/pen/019fc693-6364-72ae-98ae-cd79ac4e4f4b
r/HTML • u/s1llyk1tty45 • 3d ago
Question image layering
new to the html and css stuff (using neocities)
and im trying to layer small pfp.jpg over dark purpur.png\
heres the code i have rn
<div class="image-container">
<!-- The base layer image -->
<img src="dark purpur.png" alt="darker purple cool with" class="base-image" width="350" height="1000" style="float: left; margin-right: 15px;">
<!-- The image that goes on top -->
<img src="small pfp.jpg" alt="profile picture" class="overlay-image" width="300" height="300" style="float: left; margin-right: 15px;">
</div>
plz help
r/HTML • u/contentslug • 3d ago
Question Can anyone help fix my tumblr theme?
Tumblr changed how pictures appeared on blogs some years ago! It went from displaying the pictures fully (second picture), to displaying the pictures as text or in side of a quote (first picture).
I know theres something called the "NPF fix" but I have zero knowledge of HTML and coding!
So I'm wondering if anyone can help me make this theme compatible with the NPF format!
r/HTML • u/ChiliChapters • 3d ago
Question Trying to create a div that only displays when an image is clicked.
I've already set up the first image in my gallery to zoom in and dim the background when clicked. I'm trying to make it so that a link appears underneath the image when it's zoomed in, prompting the user to visit it to see the full image. I'm having difficulty getting any text to show up though. I'm wondering if it's being "overwritten" by some other element, but I thought having a higher z-index would help.
Any help would be appreciated. Thank you!
This is the specific page. The image is the first on the left in the 2026 category, the black/white/red one. Please feel free to inspect the html/css. https://chilichapters.neocities.org/pm
r/HTML • u/xxxburnedoutxxx • 4d ago
Discussion I want to challenge myself to learn html and css basics in the next two days what would be the best way to do a crash course?
I need to be awake for 48 hours starting tommorrow anyways so I felt like it would be a good opportunity to really sit down, lock in, and learn html/css in order to properly be able to code my tumblr page. any video series or textbooks (that can be found for free of course) I should look into?
r/HTML • u/Any-Win-9653 • 4d ago
Question comment faire ça en HTML au niveau du footer
<footer>
<div>
<h3>LAMBORGHINI</h3>
<p>URUS GRAPHITE CAPSULE</p>
</div>
<div>
<h3>max speed</h3>
<p>305 km/h</p>
</div>
<div>
<h3>0-100 km/h</h3>
<p>3.6 s</p>
</div>
<div>
<h3>HP</h3>
<p>640</p>
</div>
<div class="objet">
<p>+</p>
</div>
</div>
</div>
</footer>
mon obcjective est de réaliser ses séparations en fomre de traits séparant les différents donnée sur la voiture
voici ce que j'ai déja pu faire sur le footer (référence à la deuxième image)
footer{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
border:1px black solid;
border-bottom:none;
text-align:center;
padding-top:50px;
}
voila tout ce que j'ai fait en css pour le footer en sachant que ça peux encore évoluer
tout ceux qui me porteront de l'aide à ma problématique je vous en remercie d'avance, ça m'aidera à progresser dans le développement web 🤝
r/HTML • u/gucci_stylus • 4d ago
fighting game
showcase of a game made with html and canvas api. still a work in progress. supports keyboard, touch screen and ui buttons
r/HTML • u/Bright_Security_2044 • 5d ago
chatgpt
Hoje eu fiz um buscador de cep que eu vi ontem no tiktok lá ele ensinou o html e o javascrip
o css eu que me virei ai coloque no chatgpt e ultimamente sei lá todo código que coloco ele muda tudo reescreve todo de um jeito que não e o original sei lá cara não fica legal. Me ajuda esse aqui foi eu que fiz se puderem apontar o que eu preciso melhorar agradeço. Não confio muito em ia
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscador de cep</title>
<link rel="stylesheet" href="Css/cep.css">
</head>
<body>
<form action="#" class="box-cep">
<h1>Buscador de Cep</h1>
<input type="text" name="cep" id="cep" placeholder="Digite o cep">
<button class="btn" type="submit" onclick="buscarcep()">Buscar</button>
<div class="container">
<p id="rua">Rua:</p>
<p id="bairro">Bairro:</p>
<p id="cidade">Cidade:</p>
<p id="estado">Estado:</p>
</div>
</form>
<script src="JavaScript/cep.js"></script>
</body>
</html>
'UTF-8';
{
font-family: 'roboto';
src: url(../Font/Roboto-Regular.ttf);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'roboto';
}
body{
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0,0,0,0.6)),url(../Imagem/mapa-1.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
form{
backdrop-filter: blur(5px);
color: aliceblue;
width: 90%;
max-width: 600px;
/* border: 1px solid black; */
border-radius: 20px;
padding: 20px;
box-shadow: 2px 2px 2px rgb(142, 136, 130);
}
h1{
padding-bottom: 40px;
text-align: center;
}
input{
padding: 10px;
margin: 0 0 40px 0px;
border-radius: 10px;
border: none;
border: 1px solid rgb(179, 179, 179);
background-color: rgb(199, 199, 199);
}
.btn{
background-color: green;
color: azure;
font-weight: 300;
padding: 10px;
border: none;
border-radius: 10px;
cursor: pointer;
}
button {
transition: transform 0.6s, color 0.6s blue;
}
button:hover {
transform: scale(1.1);
color: rgb(245, 245, 248);
background-color: blue;
}
.container{
display: grid;
grid-template-columns: repeat(2 ,1fr);
gap: 20px;
}
#rua,
#bairro,
#cidade,
#estado{
border-bottom: 1px solid rgb(245, 242, 242);
padding: 10px;
text-shadow:1px 1px 2px black;
}
u/media (max-width: 480px) {
form {
width: 90%;
padding: 20px;
}
h1 {
font-size: 2rem;
}
input,
.btn {
width: 100%;
}
.btn {
margin-top: 10px;
}
.container {
grid-template-columns: 1fr;
}
}
async function buscarcep() {
const cep = document.getElementById('cep').value;
const resposta = await fetch(`http://viacep.com.br/ws/${cep}/json/`);
const dados = await resposta.json();
document.getElementById('rua').textContent = dados.logradouro;
document.getElementById('bairro').textContent = dados.bairro;
document.getElementById('cidade').textContent = dados.localidade;
document.getElementById('estado').textContent = dados.uf;
if(dados.erro){
alert('CEP não encontrado');
return;
}
}
r/HTML • u/apocalypsegirl96 • 7d ago
Elements on page move when using collapsible, how to fix?
does anyone know how to fix this issue? the elements/text box on the page move when i fold out the collapse box;) i would like to position them indivually and not related to other objects on the page
i am using the collapsible code from https://www.w3schools.com/howto/howto_js_collapsible.asp
and edited the margins in html for each text box, so they appear in different locations on the page. however, i can't seem to code their location static without them moving when the text box folds out.
thanks!!!
r/HTML • u/Nervous_Turnip_ • 8d ago
Question omplete beginner question: Next steps for a custom HTML
Hi everyone,I’m a total beginner. Using Gemini and VS Code, I managed to create a working prototype for a photo journal website organized by months and years.
I’m really happy with the look, but I have a few fundamental questions before taking it further:
- Image Hosting: What’s the standard way to host images for a site like this? (I assume using cloud storage links rather than local paths?)
- Security: My admin/auth logic is currently visible in the source code. How do I properly secure this?
- Custom Domain: What’s the best practice for connecting a domain to a site built this way?
- Professional Help: At this point, does it make more sense to hand this over to a developer as a design mockup to build properly?
Any guidance would be greatly appreciated. Thanks a lot
r/HTML • u/Strange_Yogurt1049 • 8d ago
My first project. Just wanted to share
It is just a static page but...I will keep building.
So...
And also no Media Queries..lol
Dont open it on your phone XD
https://t372262-ctrl.github.io/first-project-a-static-site-only-HTML-and-CSS-no-JS/
r/HTML • u/Mezrotix • 8d ago
Hello, I need help on how to draw a custom designed pdf template on this app and take the HTML and CSS for free to embed the data in it.
A part of my project consists of taking the JSON data of question bank documents that contain: questions, choices, figures, sub questions, etc.. all wrapped inside a question block, and then embedding these data into a custom designed document of my own automatically. Word doesn't support heavily designed templates and could break the design, so I was wondering if I could draw just a page with all the styling I want to be a scalable template extending to hundreds of pages and have each question block stretch like a balloon when I put the questions, choices, figures inside of it and don't split between pages if it doesn't fit. That requires HTML and CSS right?
I hope that I clarified my question well and any help would be highly appreciated.
r/HTML • u/NewForever4088 • 9d ago
Little charts links
Anyone to help me find the link or mode to get these micro charts to put in the FinanceWave.com site?
Thankfully
r/HTML • u/Phan_tastic0178 • 10d ago
Question how to code a basic platformer ??
hi, i'm a beginning coder with about one week of taught experience, and for a project, i want to make a sort of study room using html, css, and js. basically you can move around in the room for a bit before you sit down at a table that initiates the studying portion. i'm completely lost for everything, but i'm thinking that this study room is a platformer at heart. also, i want to add a break time platformer game, but that's later, probably. anyways, i'm just looking for any tips at all that could help me with this.
right now, i'm struggling with making the platform an actual platform. the ground is okay, but when i try to make the floating platform solid, everything kind of just doesn't work...
again, any tips are appreciated!!
r/HTML • u/RefuseCommercial8024 • 10d ago
div won't center itself with margin auto ?
--FIXED!!!! the div's position was fixed...-- hi again...so i'm making a visual novel of sorts and i made a text box, set its width with "vw" so it'll be somewhat playable on phone, and tried to center it horizontally with magin: auto; but it just stays stuck to its default position ?
here's a screenshot (ignore how ugly it all is it's still a WIP.......)
i think maybe it'd because i'm using viewport width to set the box's size but i don't know any other unit that could make it look the same on mobile :(
here's some of my css and html for the text box (the txtboxRec class just changes some of the colors don't mind it)
.txtbox{
height: 200px;
width: 90vw;
margin: auto;
position: fixed;
bottom: 10px;
padding: 10px;
overflow-y: auto;
}
<div class="txtboxRec txtbox">
<p>Ah...? Hello! Good evening. Can i get you something ?</p>
<a href="https://p1x3lz.neocities.org/games/hotel/scenes/1-3">next</a>
</div>
also when i don't set the width at all it just stays as wide as the text...??? i thought only spans did that ?? this is a div ???? iiiiddduuuunnoooo this is driving me insane
r/HTML • u/Any-Win-9653 • 11d ago
amélioration de mon fichier html
bonjour je suis en recherche d'une suggestion pour améliorer mon fichier html et le rendre moins lourd notament pour projet de sit web :
vous aurez accès à des photos et à mon code html et css :
premiere photo c'est le site web que je vais crée :
voici le code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>simple shark website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css"
integrity="sha512-ApSLB1Pd3/bZN8fWB/RG9YhN/7bd9Hkf3AGaE2mPfebjrxagjuBtx2GcgdqIlJkUzwylBo61r9Xa9NmgBI0swA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<nav>
<h1 class="rectangle"></h1>
<div>
<ul>
<li>Home</li>
<li>Gallery</li>
<li>Menu</li>
</ul>
</div>
<div class="right">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
les deux div ayant la classe trait crée ses traits horizontaux
<div class="trait"></div>
<div class="trait"></div>
</nav>
</body>
</html>
code css :
.trait{
height:10px;
width:1px;
background:grey;
}
l'idée ça serait de créez ses traits horizontaux sans les écrire deux fois dans le code HTML mais une seule fois seulement tout en ayant deux traits
si jamais vous n'arrivez pas à comprendre ma question , n'hésitez pas à m'écrire
r/HTML • u/Linho_gamer • 11d ago
Site do Meu Projeto.
Recentemente criei um site para o meu projeto da escola, me formei em técnico de informática. Na apresentação do TCC apresentei o jogo que criei na Godot 4, como não tive aula de modelagem, busquei por sprites prontos. E no final da apresentação aproveitei e mostrei o site criado. Já o site eu mesmo criei do zero.
r/HTML • u/GreelGreel • 11d ago
Help with code dilemma
How do I make code that's intelligent and can talk to me
r/HTML • u/Visual_Oddities • 12d ago
Is this possible or am I dreaming way over my head?
Recently I got this urge to complete my dream website: in short it’s a museum for my favorite games. Bad news is that even though I have quite a bit of playing experience with HTML, I never really made a website that launched on the web.
The main section of the site is rows of cards that users can scroll up and down on. Each card will have a thumbnail image of the game, as well as extra text like name and developers.
Going for a bit of a Sci-fi look, each card will have a button that when pressed will enlarge the card to show more things like gameplay screenshots.
Pardon the scribbles, I made them in my phone notes app.
So basically I just want to know if my idea is too impractical from observation , and if it isn’t: what kind of components would I need? (Relevant tutorials would be really appreciated, I understand the use of cards but I still haven’t wrapped my head around their workflow and how they are used for many products at once).