I'm having trouble getting the image to look right on my website. http://localhost/ Right now it is all blurry and I've tried messing with the css width and height tags to get it to be less blurry but that is not working.
I coded it myself, with my own hands, having spent some time learning HTML/CSS. As it's intended to be a personal website, I didn't invest that much into web design. I find it cool to have my own little corner of the internet.
You could go to my Welcome post and leave a comment if you wish! :)
I know Semantic tags are better to use in html, but how do I know when to use semantic tags and when to use html elements.
I have been starting last week learning about HTML and CSS for web development. But i live in south africa which im not sure if i will be likely to succeed in still in school but i wanna make my life worth the risk.
confused with changing the template to add more pages. If “const template = 2” works with 8 pages/pngs, would replacing the 2 with 3 mean 12 pages/pngs, and so on? If someone could help that would be appreciated
https://jeremyoduber.itch.io/js-zine:arrow_left:whole the code is here, it’s a bit too long to fully paste and requires a code editor(I use notepad++) to run
I’m making a simple recipe website for school. It has 10 country flags, and when you click one it shows 4 dishes from that country. I already have working code, but it feels too long and confusing to explain in class. Also just feels wrong in how it looks. i dont get code man. I want the code to stay short, readable, and beginner-friendly maybe. Any tips on how to simplify the JavaScript without losing functionality? The javascript is already pretty sible, its mostly about the css and html
I'm making an art project where I'd like to emulate an old Geocities website in Windows 98 and have diary entries in it that tell a story. Here are the facts:
The code doesn't have run online (?). In fact, I'd prefer it didn't. I'm planning on running it as a HTML file and recording it since need it as a video anyway, so actually coding something is the alternative to emulating a website by manually animating the whole thing.
It sounds like it should be simple? I've looked into vibecoding for this but, again, as a complete layman to coding, I wouldn't really know my way around it too much in case AI suggests something stupid.
Is this too complicated for someone who knows nothing about coding?
i'm too lazy to install visual studio, so I'm using notepad++, I can just change the txt file into .html whenever I want to. I tried Base64 a week ago and it was a headache because I didn't know you can add images in HTML.
I have been starting to learn about it and been trying out my own HTML projects, next im going to start CSS since it gives better results but im still not sure which coding engine is the best to use
Here is my simple HTML. I need to give it a link
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Fonn Prints</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
:root {
--bg: #05060a;
--accent: #ff6b3d;
--text: #f5f5f7;
--muted: #9ca3af;
--radius-pill: 999px;
--shadow-soft: 0 18px 45px rgba(0,0,0,0.55);
--font-sans: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: radial-gradient(circle at top, #111827 0, #020308 55%, #000 100%);
color: var(--text);
font-family: var(--font-sans);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
text-align: center;
padding: 20px;
}
.container {
max-width: 640px;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.logo {
width: 64px;
height: 64px;
border-radius: 16px;
background: conic-gradient(from 210deg,#ff6b3d,#f97316,#22d3ee,#6366f1,#ff6b3d);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
}
.logo::after {
content: "";
position: absolute;
inset: 10px;
border-radius: 12px;
background: radial-gradient(circle at 30% 20%, #111827, #020617 70%);
opacity: 0.9;
}
h1 {
font-size: 2.4rem;
letter-spacing: -0.03em;
font-weight: 700;
}
p {
color: var(--muted);
font-size: 1rem;
line-height: 1.6;
max-width: 480px;
}
.btn {
margin-top: 10px;
padding: 12px 26px;
border-radius: var(--radius-pill);
background: radial-gradient(circle at 0 0,#f97316,#ea580c 40%,#7c2d12 100%);
color: #fff;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
box-shadow: var(--shadow-soft);
transition: 0.15s ease-out;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn:hover {
transform: translateY(-2px);
filter: brightness(1.05);
}
</style>
</head>
<body>
<div class="container">
<div class="logo"></div>
<h1>Fonn Prints</h1>
<p>
Clean, functional 3D models designed for real-world use.
Fast to print. Support-light. Always practical.
</p>
<!-- ⭐ ONLY BUTTON -->
<a class="btn" href="https://www.printables.com/@FonnPrints" target="_blank">
Browse Models ↗
</a>
</div>
</body>
</html>
Hi, I'm learning HTML and CSS and noticed something weird that doesn't make sense while doing an exercise. I am trying to create a little pagination thing. And I noticed that if I write the <a> and </a> in separate lines (as for Page #1), the underline below 1 is off centered out to the right. For page 2,3,4,5, I wrote the anchor all in one line and the underscore sits below the number perfectly.
I remember my instructor said that both one line and separate line make no difference in the display as html doesn't count line break or spaces in the code. But how come the page 1 link shows differently than the rest. I know it's subtle but i'm curious. It must be something simple I overlooked. Can someone give me a pointer? Thanks.
Here is my html code
<style>
.back-button {
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 16px;
}
.search-result {
margin-left: 4px;
margin-right: 4px;
font-size: 18px;
}
.next-button {
margin-left: 8px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 16px;
}
</style>
<button class="back-button">Back</button>
<a class="search-result" href="https://google.com">
1
</a>
<a class="search-result" href="https://google.com">2</a>
<a class="search-result" href="https://google.com">3</a>
<a class="search-result" href="https://google.com">4</a>
<a class="search-result" href="https://google.com">5</a>
<button class="next-button">Next</button><style>
.back-button {
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 16px;
}
.search-result {
margin-left: 4px;
margin-right: 4px;
font-size: 18px;
}
.next-button {
margin-left: 8px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 16px;
}
</style>
<button class="back-button">Back</button>
<a class="search-result" href="https://google.com">
1
</a>
<a class="search-result" href="https://google.com">2</a>
<a class="search-result" href="https://google.com">3</a>
<a class="search-result" href="https://google.com">4</a>
<a class="search-result" href="https://google.com">5</a>
<button class="next-button">Next</button>
And here is the display
When adding interactivity to HTML (via JS, HTMX, etc.), we usually end up connecting elements using selectors.
For example, a simple loading state:
<button
hx-get="/data"
hx-target="#result"
hx-indicator="#spinner"
>
Load Data
</button>
<div id="spinner" class="htmx-indicator">
Loading...
</div>
<div id="result"></div>
#result”#spinner while loading”This works well, but it has some properties:
I’ve been thinking about a different approach where elements don’t reference each other at all.
Instead, they react to named signals.
Something like this:
<button
on:click="send"
on="send"
get="/data"
result="response"
if:loading="spinner"
>
Load Data
</button>
<div if="spinner" style="display:none;" x-style="display:block;">
Loading...
</div>
<div render="response"></div>
Instead:
send)response)spinner)So instead of wiring elements together directly, everything is coordinated through named identifiers.
This suggests a different way to think about HTML:
Curious what people think:
Does selector-based wiring actually cause problems in practice?
Or is this just a different style without much real benefit?
So I want to make a little website where people can create their own profile. The only thing is I genuinely don’t know how to do that😂. I have it where people can make their own account but I would like for people to make their own profile as well. Any advice?
So, say I have a paragraph and I wrap the code around it to make it italicized. If I wanted to change the color, do I put that code inside the code I used for italics or wrap it around on the outside?
I have not retained this simple thing from my former life in the early 2000s unfortunately.
edit: I'm using neocities. And I think I meant CSS. Sorry 😭
https://tweek.oops.wtf/ you have my github there if you wanna check the code, im also proud of the new article i published yesterday ( https://tweekerganga.github.io/the-human-protocol/ ) its on my site there, can i have subdomains while using a subdomain? like tweek.oops.wtf/about/ and souch?
I am coding a stock market simulator with real stock data and it's going well but I am trying to add ai but its not working and dont know how to fix it, I am using groq https://console.groq.com/keys and the model
import { Groq } from 'groq-sdk';
const groq = new Groq();
const chatCompletion = await groq.chat.completions.create({
"messages": [
{
"role": "user",
"content": ""
}
],
"model": "llama-3.3-70b-versatile",
"temperature": 1,
"max_completion_tokens": 1024,
"top_p": 1,
"stream": true,
"stop": null
});
for await (const chunk of chatCompletion) {
process.stdout.write(chunk.choices[0]?.delta?.content || '');
}
here is the website https://stockplex.edgeone.app/#/auth
He creado mi primer portafolio por primera vez... se que no es la gran cosa pero me ha costado bastante. Recién estoy empezando en HTML & CSS. Disfrútenlo me ha costado hacerlo. Todavía no esta para dispositivos móviles, pero ya arreglare eso.
We want to force an emoji back into text but we are so very rusty with syntax. Please be kind and type out exactly what we'd have to put into the text box?
It should work, because the below example/tutorial page is rendered correctly with their examples.
Documentation:
https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/
Some emoji to try (page 7):
https://unicodeplus.com/version/11/7
[If anyone is interested, my next stop is to ask Notepad++ why converting / toggling Encoding *also* does this to the clipboard contents. Like a nightmare, it turns the emoji into ?? and then doesn't turn it back ... and has no undo. Yes, for all of the above, we have tried every primitive app, plug-in, and text-box we can find, and so far the only one rendering it in plain unicode is Windows Notepad*.
We will try to assist with information about encoding, but we are also making sure we didn't lose any information by messing with encoding, so apologies for that.]
*Edit: this is only from cut/paste, by the way, because the ALT codes do not work; the first "F" forgets I was holding down ALT and goes to the File menu. Bucket-brigade it is, then.
Je bosse sur un petit wiki amateur autour d’un univers inventé.
Je cherche des retours sur la navigation, la structure, la lisibilité, etc.
C’est hébergé sur alwaysdata donc ça peut mettre une seconde à charger, mais rien de méchant.
Si vous avez 2 minutes pour me dire ce qui va / ce qui ne va pas :
https://wikizgliboulou.alwaysdata.net/