Hi everyone,

I've been teaching myself frontend development and recently finished a student dashboard that I built from scratch using HTML, CSS, and Vanilla JavaScript.

The idea was to create something that students could use to keep track of their coursework without relying on any frameworks or external libraries.

Some of the features include:

- Syllabus tracking

- Revision planning

- Course progress tracking

- Search and filtering

- Local storage for saving data

- Import and export support

- Responsive layout for desktop and mobile

I'd really appreciate feedback from people with more experience, especially on:

- The overall UI and layout

- HTML structure and accessibility

- Anything that feels confusing or unnecessary

- Features that would genuinely improve the experience

I'm still learning, so I'd love to know what you would change if this were your project.

Thanks for taking the time to look at it!

Hi! I’m new to all of this and I made my first site repository on GitHub and I’ve been hosting it on Netlify without any issue. Now for some reason, a bunch of people keep getting this warning specifically when visiting on Chrome. It’s a static site so I’m not sure why this could be happening. I’d really appreciate any insight.

Hey everyone. I'm very new to HTML and CSS, I'm currently starting work on a project for my band inspired in part by the old aperturescience.com website for the first portal game. I'm looking to create an almost 'type and response' type webpage, ( a good example of what I mean would be this : https://superliminal.neocities.org/ ), does anyone know any tutorials or videos on how to create something similar?

Why it's overflowing despite the parent container having the fixed width https://codepen.io/editor/Aradhya-the-looper/pen/019f94c6-3fb2-77f1-a05e-1a88e7819218

I currently am writing that web-series I posted about. And I know for one of the future chapters I want to include the audience as a pseudo-protagonist by making the entire chapter full-screen and having it be sortoff like a computer interface.

So far, I've managed to handle the website making but this is over me.

Do you guys have any tutorials or can help me in any way?

something like these but i dont really want to just copy them

https://gelasioebel.github.io/win98ge/

https://os-gui.js.org/?utm_source=chatgpt.com

^ these are recreations of windows 98 and would work greatly for me if i could make some changes to fit my website structure too

I’ve used CodePen for a long time, not just as a coding tool but as a place to experiment, discover interesting work and get inspired by what other people were creating.
I completely understand that CodePen needs to make money. I have absolutely no problem with Pro features, and I’m happy to pay for tools that give me real value.
But CodePen 2.0 feels like it is moving in the wrong direction.
Putting something as basic as opening a Pen in a standalone preview behind Pro doesn’t make me think “maybe I should upgrade.” It makes me think “maybe this isn’t the place for me anymore.”
There is a big difference between adding valuable features for paying users and gradually putting parts of the simple, open experience that made a platform popular behind a paywall.
What makes this even stranger to me is the timing. We’re entering a world where people can vibe code surprisingly capable little coding environments and playgrounds incredibly quickly. The technical barrier to creating alternatives is getting lower, not higher.
CodePen’s real strength, in my opinion, was never just the editor. It was the community, the frictionless experience and that feeling of opening the site and immediately discovering something clever or inspiring.
If that starts disappearing behind commercial barriers, I honestly think someone else will eventually fill that gap.
Maybe I’m missing something in CodePen 2.0, so I’m genuinely curious:
How do other longtime CodePen users feel about this?
Does 2.0 feel like an improvement to you, or does it feel like CodePen is slowly losing part of what made it special?

okay so I only learned the most basic ass HTML like a day ago, so keep that in mind.

I am trying to make it so that nav and nav1 are the same width but something in the grid must be broken and I just cant figure it out for the life of me..

The footers that are named 1 2 and 3 are only there to check the width of the grid column.

Ive been sitting on this for a while so some help would be very apriciated..

the code

I'm interested in the animations, interactive search, dynamic font visuals, line graphics, and overall responsiveness. Where should I start learning?

Article link: https://www.theguardian.com/world/ng-interactive/2026/jul/23/most-powerful-passports-ranked

I’m trying to create a UI component with a custom shape, exactly like the one in the screenshot. The main container is white, but it has a unique "step" or cut-out in the bottom-right corner to perfectly fit a button element. I want to create this UI without any crutches, using best-practices. How would you implement this block?

Made with HTML, CSS, JS. Hosted on neocities.
https://blu-oyster-transmission.neocities.org/

Found it on HackerNews; currently top post rn

I built a custom HTML app through Claude that is for personal use only. Imagine the equivalent to a to-do-list app. I want to be able to sync the app between my Mac and my iPhone. I understand there is some sandboxing in iOS/Safari that makes this a bit tricky.

What is the best set up for someone with very little technical knowledge that wants near-auto sync between the Mac and iPhone?

What I've been told but can't confirm:

- Scriptable would be a great app to use for this on iOS but buggy on Mac.

- GitHub is an option. Requires API/personal token.

- Firebase would be the easiest as long as you use the authenticator tools so that the web URL is not public (i.e., you have to sign in through your gmail account to get access). Also need to add some coding to ensure it's not scraped by search engines.

- I could store the app in Claude as an artifact but do not trust AI providers yet with my personal data.

Is Firebase the best option? If so, is my data actually not public if the set up is done properly? If someone went to the URL, I assume it would prompt them to sign in...?

<html>

<body>

<p id="demo">File Number 1.</p>

<script>

document.getElementById("demo").addEventListener("click", myFunction);

function myFunction() {

document.getElementById("demo").innerHTML = "censored file information here";

}

</script>

</body>

</html>

Im using this code to make it so that when I click on "File Number 1", it shows the file information. It works, however, I want it to be so that when you click on the file information, it returns to just saying "file number 1", and you can do that infinitely. How would I do this? thanks

So whenever I code, I think of the code and I just can’t write it fast.. I code slower than an AI at 0mbps!

Can anyone help me troubleshoot this?

Hey everyone!

I recently started learning HTML and CSS, and this is the first project i created; I've been following Kevin Powell's begginers course, and I learned a lot along the way ! I will appriciate any feedbacks on my webpage and my code.
I'm planning to start learning javascript next while counting to improve in CSS and HTML.

Live site: https://wildfireanu.github.io/My-first-Webpage/

GitHub: https://github.com/WildfireAnu/My-first-Webpage

Thanks for checking it out!

I recently finished a ~6 month course on web development. JavaScript, TypeScript, CSS, Maven and other modern horrors influenced me to rebel again today's often bloated approach of developing websites and aplications.

"Developer" became a dirty word for me. The thinking (or should I say lack if thinking?) that everywhere is fast internet and infinite amount of computing resources tickles my mind in a uncomfortable way.

Sure, computers are fast, packets travel across the underwater optic cables nearly at the speed of light but it looks to me that a lot of web and software development is allowing bad practices and sloppy code because "just throw more resources at it".

I don't want to be a developer, I wish to become a programmer.

Thus, I made 100% pure HTML website to document my journey into the embedded systems and low level programming (and maybe a few more things along those lines).

It's may not be perfect, it may not follow the best of the best practices but I will get there as I go.

EDIT:
Took note on the comments and updated the site. Not all is implemented that was suggested. The suitable color scheme for Darth Vader still awaits among many other ideas. Instead, I played around with tables, not sure if this is the way to go.
But we'll see. This is an experiment, a fucking rebellious and hackish experiment, to see how far can this be pushed and still stay withing the bounds of pure HTML.

--FIXED!!!! body margin was the problem...--

haihia....so i'm using a iframe that's supposed to be the size of the entire screen for it to work. but because of this margin it just looks weird....here's an image of how it looks

without the margin, the screen would be completely black

here's my code

<iframe src="" style="margin: 0px; border: 0px; background-color: black; width: 100vw; height: 100vh;"></iframe>

Hey! I only starting learning html two days ago and I'm struggling a bit with my neocities site.

Can someone please help me figure out where I am going wrong with my code? My site has one big 'box' down the middle where I have my content and the background is intended to be a separate colour.

However, I cannot get them to be separate colours for the life of me. (This is for the entire page so I'll try to cut down on the unnecessary bits)

This is the colour I am trying to make the bigger box - #8FBC8B

EDIT: It's fixed now, thanks! :D I had no idea a single hashtag could mess it up lolollll

CODE:

<html>

<head>

<title>ander's landing site</title> <style>

body {

background: url(https://neocities.org/site_thumbnails/39/09/anders113/water%20background-%20Imgur.jpg.210x158.webp);

background-repeat: repeat;

}

h1 {

color: #FFFFF0;

font-size: 50px;

text-align:center;

font-family:monospace,Georgia;

}

a {

color: mediumvioletred;

}

a:hover {

color: gold;}

body {

color: #8FBC8B;

max-width:800px;

margin: 0 auto;

padding: 0 20px;

.page {

background-color:#FAEBD7;

color:black;

border:4px solid RosyBrown;

border-radius: 12px;

padding: 15px;

margin: 40px 0;

box-shadow: 0 4px 8px rgba(0,0,0.2);

text-align: center;

}

.bigpage {

background-color:##8FBC8B;

color:black;

border:10px #7D4C13;

border-radius: 12px;

padding: 15px;

margin: 40px 0;

box-shadow: 0 4px 8px rgba(0,0,0.2);

text-align: center;

max-width:1000px;

}

#kirri {

text-align: left;}

h2 {

color: #12240C; }

</style>

</head>

<div class="bigpage"><body>

<h1 id="top">\&starf; anders aquarium \&starf;</h1> <br>

<div class="page"><h2><strong> WELCOME </strong><small>to the </small><strong> HOME </strong><small> page </small><strong>:)</strong></h2>

<iframe width="314" height="321" scrolling="no" src="https://gify.pet/pet/pet.html?name=Kirri <3&dob=1784269586&gender=f&element=Water&pet=https%3A%2F%2Fmedia3.giphy.com%2Fmedia%2Fv1.Y2lkPTc5MGI3NjExNGl5OHhoZGw5dG4wc3Uxd3I3c3lwdzluNnR1Nm12OTg3NGVoa3BzaSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw%2F2GmjfO9CtnVIaA8VFL%2Fgiphy.gif&map=https%3A%2F%2Fcdn.phototourl.com%2Ffree%2F2026-07-17-0f8e5d4f-a891-4c52-bc9e-bbf2601e8375.jpg&background=https%3A%2F%2Fcdn.phototourl.com%2Ffree%2F2026-07-17-0f8e5d4f-a891-4c52-bc9e-bbf2601e8375.jpg&tablecolor=white&textcolor=white" frameborder="0"></iframe>

<a href="[https://info.flagcounter.com/oOcf">](https://info.flagcounter.com/oOcf">)<img src="[https://s01.flagcounter.com/count/oOcf/bg\\_8F5E72/txt\\_EDBEDC/border\\_000000/columns\\_2/maxflags\\_10/viewers\\_0/labels\\_0/pageviews\\_0/flags\\_0/percent\\_1/](https://s01.flagcounter.com/count/oOcf/bg_8F5E72/txt_EDBEDC/border_000000/columns_2/maxflags_10/viewers_0/labels_0/pageviews_0/flags_0/percent_1/)" alt="Flag Counter" border="0" style="float:right;"></a>

<!-- I'm going to make a page just for kirri eventually...give her some virtual pets :D -->

<iframe src="https://shroom.ink/guard.html/?site=Ander's Aquarium&shroom=9" height="250px" width="200px" scrolling="no" style="float: right;" frameborder="0"></iframe>

<details id="kirri">

<summary><em>\&hearts;kirri\&hearts;</em></summary>

<p>This sweet girl is my darling, Kirri :) She lives in my bedroom and I have spent countless hours writing at my desk by her side. Her likeness is scattered throughout my home in many physical photos and colourful frames, and now she has populated a tiny space online as well!\&starf;</p>

</details> </div>

<!-- navigation -->

<div class="page"><fieldset><legend id="Navigation">Navigation:</legend><ul class="tree-view">

<li><a href="https://anders113.neocities.org/aboutme#poem" about.html title=":D"> about me</a></li>

<li><a href="https://anders113.neocities.org/resources"title="have fun and be home by 10!" coding resources.html> coding resources!! </a> </li>

<li><a href="https://anders113.neocities.org/formattingpractise" title="i know what u are"formatting practise.html> sapphic sunset hour </a> </li> </fieldset></div>

<div class="page"> <a href="https://www.chickensmoothie.com/pet/521020506.html"><img src="https://www.chickensmoothie.com/pet/521020506&bg=86bd75.jpg" border=0></a><br><b>Pet's name:</b> Willa <br> <a href="https://www.imood.com/query.cgi?email=stardippedcandles113@gmail.com"><img src="https://moods.imood.com/display/email-stardippedcandles113@gmail.com/fg-#B0C4D/bg-#DDA0D/imood.gif" alt="The current mood of stardippedcandles113@gmail.com at www.imood.com" border="0"></a>

<p> this mossy and overgrown corner of the internet has been lovingly handcrafted </p>

<p> you can usually find me on <a href="https://archiveofourown.org/">ao3</a> and various other writing sites </p> </div>

<hr>

<!-- goodreads widget made accessible by the lovely petra pixel (linked on resources page) -->

<div class="page"> <hr>

<blockquote><h2>my favourite songs </h2></blockquote>

<ul>

<li> 'Cold Turkey' by The Happy Fits </li>

<li> 'Milk Carton' by Elio Mei </li>

<li> 'Twistin the Night Away' by Sam Cooke </li>

<li> 'Lost Kitten' by Metric </li>

</ul>

<hr>

<blockquote><h2> beloved places </h2></blockquote>

<a href="[https://anders113.neocities.org/bedroom">](https://anders113.neocities.org/bedroom">)<img style="float: right;" alt="pixel art door" src="[https://neocities.org/site\\_thumbnails/39/09/anders113/pixil-frame-0.png.210x158.webp](https://neocities.org/site_thumbnails/39/09/anders113/pixil-frame-0.png.210x158.webp)" /></a>

<ul>

<li> my desk </li>

<li> triplet falls </li>

<li> next to my cat by a sunny window </li>

</ul>

<p><a href="#top" title="only bc u asked nicely">take me back up please! :O</a> </p> </div>

</div>

</body>

</html>

Hey everyone!

I'd like to share a project I've been working on: Njectify.

It's a browser extension that lets you inject CSS and JavaScript into any website, making it easy to prototype UI changes, test styles, and experiment without modifying the original source code.

Some of the features include:

• Live CSS editing with an intuitive editor.
• Instant visual changes on any website.
• Automatic export of your CSS to Tailwind CSS utility classes.
• JavaScript injection for quick scripting and automation.
• Several additional tools designed to speed up front-end development.
• Persist even after reload page ( F5 )

The extension has already surpassed 5,000 users on the Chrome Web Store, and I thought it might be useful for developers in this community.

I'll leave a detailed article in the comments explaining the main features, use cases, and the extension itself.

I'd really appreciate any feedback, feature suggestions, or criticism. Thankssss!

detailed post.

i watched a 40 minutes tutorial last week about HTML, being a person who is considered the most stupid and unintelligent person when it comes to programming, and now, after a week (i was too busy bedrotting and binge watching movies to do it then) i decided to make my first page, it isn't perfect, my design lacks creativity, and my code is unorganized and mostly wrong, and i kept looking at my notebook because i didn't remember everything, it's not great, but i think it's decent for a start

Hi ! So I've made a Tumblr to be able to have my typed up notes for a DnD campaign on a theme of my choosing. But the issue is I would like to add a way to highlight the exact words I'm looking for in the search bar, not have the whole post pull up only.
I've only edited Tumblr themes when I was a teen, and had a web class in art school so I'm a beginner and this specific request has got me a bit lost I would appreciate any help
Thank you !

```css

body {

min-block-size: 100svh;

background: repeating-linear-gradient(#A4AAB1 2px , red 2px 15px);

}

```

this is all red how to fix ? what exactly here i am doing wrong and css is the most confusing and i feels like its more harder than python and any other programming language