2025

(10/7)

light box

img, vids, text, gif and multimedia can exist in a lightbox
gallery can be zoomed in or out
can be animated(slow fades in)


                  <style>
                  /* Style for the overlay */
                  #lightbox {
                    display: none;
                    position: fixed;
                    z-index: 9999;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0,0,0,0.8);
                    text-align: center;
                  }
                  #lightbox img {
                    max-width: 90%;
                    max-height: 80%;
                    margin-top: 5%;
                    border-radius: 4px;
                  }
                  #lightbox span {
                    position: absolute;
                    top: 20px;
                    right: 35px;
                    color: white;
                    font-size: 40px;
                    cursor: pointer;
                    font-weight: bold;
                  }
                  </style>
                  
                  <!-- Thumbnail -->
                  <img src="/Nyu Gallery/icon/skyfall-icon.png" alt="Full image" width="250" onclick="openLightbox('/Nyu Gallery/2019/skyfall.png')" style="cursor:pointer;">
                  
                  <!-- Overlay -->
                  <div id="lightbox">
                    <span onclick="closeLightbox()">×</span>
                    <img id="lightbox-img" src="" alt="Full view">
                  </div>
                  
                  <script>
                  function openLightbox(url) {
                    document.getElementById("lightbox").style.display = "block";
                    document.getElementById("lightbox-img").src = url;
                  }
                  function closeLightbox() {
                    document.getElementById("lightbox").style.display = "none";
                  }
                  </script>

<pre>

<code>

10/8

“HTML escaping” or “HTML entity encoding.” view on MDN

It basically means converting special HTML characters like <, >, and " into their safe text equivalents (<, >, ") so the browser displays them instead of interpreting them.

Neocities’ built-in editor: Find and Replace

When you’re editing a file, press Ctrl + F (or Cmd + F on Mac) to open the find bar at the bottom. Then click the “.*” icon or “Aa” toggle (depending on your browser) to switch to “Replace” mode — or just hit Ctrl + H (Cmd + H on Mac). That opens the replace field.
You can type > in the “Find” box and < in the “Replace” box, and hit Replace All. Do the same for > → > and " → ".
If Neocities’ online editor feels clunky, just download the file, open it in a real text editor like VS Code or Notepad++, do the replacements there, and re-upload. It’s way faster when you’ve got a lot of tags to escape.

10/12

Embed

embed

iframe src="https://example.com" width="800" height="600" /iframe

hotlinking (aka stealing by embedding XD)

img src="https://example.com/image.gif" alt="Description"

10/13

bullet list

First item
Second item
Third item

<ul> hi
<li>First item </li>
<li>Second item </li>
<li>Third item</li>
If you want numbered lists instead, you’d use <ol> instead of <ul >.)

First item
Second item
Third item

<ul> hi
<li>First item</li>
<li>Second item</li>
<li>Third item>/li>
(there is literally no limit to the bullet points XD. its only the matter of whether your pc or phone can handle it >:D)

line break(<br>tag)
view on MDN

First line
Second line
Third line
just add it at the end of the line you wanna skip
First line<br>
Second line<br>
Third line
(its basically outsourcing the skip function from enter key to this tag smh)

10/18/25

HTMl

HyperText Markup Languague is the standard markup language in web dev

markup language

XML and HTML are markup language

XML(X??? M??? L???)

Used for storing and transporting data in a structured format.

element

tells the browser how to display the content.
label pieces of content("this is a heading", "this is a paragraph", "this is a link", etc.)

title

title and /title indicates the websites tab title display and when user hovering their mouse over website tabs

empty element

does not have end tag
has no sematic meaning
line break (<br>) is an empty element

anchor tag (<a>)

embed link on text <a href "url here"> text </a>

10/19

element

tags are part of an element, not the same thing

10/20

10/28

Content Delivery Network(CDN)

a network of servers spread around the world that store and deliver your files
loads stored data from from the location closest to whoever’s viewing your site
can store images, videos, sound files or scripts.
makes your content load faster and reduces the strain on your main server
very common practice in the indutry for loading large or multiple medias, scripts
reduce website load and boosting it's perfomance

11/10

accordion (yes, that is what it's called😂) pt.1

a UI component
clicking a header or label expands or collapses content below it, while the header itself stays visible.

<button class="accordion">Section 1</button>
<div class="panel"> <p>Lorem ipsum...</p> </div>

class (attribute)

not to be confused with class in javascripts or object-oriented-programming
a label to an element to target (recognize) in css or javascripts
used to identify the element, communicates to the dev working on the elemnts(Good class names make it clear what the element does, instead of leaving someone guessing)

insert mode (aka insert key)

toggle between insert and overwrite mode
insert (normal) mode: add between letters (indicated by the blinking vertical line aka insertion point cursor aka caret in terminal → I )
overwrite mode: replace the letter above the letter (indicated by blinking underline aka block cursor → ▌ or _)
only works in text editor for coding. normal text box does not recognize that function when pressing insert key

source:LibreOffice

11/11

Web dev Game👈😮

Flexbox Froggy
Grid Garden
CodeCombat

radio button

Disclosure widget(accordion EZ mode)

detail tags creates a disclosure widget or box thats available for drop down function.
summary tags show the primary text on top of drop down text. its sits inside the box you can click on

this is what summary tag shows ←

everything in the dropdown box is show here
(theres no animation for this one TwT, but it still work for now)

11/14

Ace Editor

web based code editor
program that use ace editor
- neocities
  - settings panel can be accessed by using ctrl + ,

bullet point nesting


            <ul>
          <li>Main item
            <ul>
              <li>Sub-item</li>
              <li>Another sub-item</li>
            </ul>
          </li>
        
          <li>Another main item</li>
        </ul>

11/15

New Tag Discovered: <input>!

can be used to make a basic search bar
possible attribute: id, type, placeholder

New Attributes Discovered!

id
???
type
???
placeholder
???

search bar

11/16

<div> - the content division element

compatible attribute: Global(id, class,...),
outdated attributes: align

new attributes discovered!

outdated; new websites are no longer use this
this attribute is only for <div> element

11/20

<time>

semantic date that can be read and targeted by scripts or search engine.
attributes: Global and datetime(<time> only)

project#2:this websites XD

used for writing document, blogs, or reviews
semantic(unlike div which is purely for decoration and cant be detected by SEO)

<section>

????

11/22

Character reference

view on MDN

11/23

Project #1: Nyu Archive

<br> - line break
view on WHATWG

br tag is flow content and phrasing content
use when phrasing content is expected

new terms discovered!

11/29/25

javascript: var view on MDN

declares global-scoped(across the entire file) function
always use let variable instead to declare certain function as it may declare other all the other function in the file(?)

New element discovered!

label

???

link

compatible attributes: global, rel, href

<form> view on MDN

used to make search bar function


              <form action="/search_results">
               <input type="text" placeholder="Search...">
               <button type="submit">Search7lt;/button>
              </form>

also used to label term for searching function


            <form action="/search_results">
             <input type="text" name="query" placeholder="Search...">
             <button type="submit">Search</button>
            </form>

compatible attributes: global, action

search bar

view on yt view on Altcademy(nonfunctional)


          <form action="/search_results">
            <input type="text" name="query" placeholder="Search...">
            <button type="submit">Search</button>
          </form>

input

compatible attrribute: global, name

CSS

rule

New rule discovered!

@font-face

compatible attribute: url, format

property

New property discovered!

font-family
- balsamiq sans
src
font-weight
font-style

selector

11/30

search barview on yt

CSS

New property discovered!

display

compatible value: flex, grid

flex-direction

compatible value: column

gap

compatible value: rem(0.25rem, 0.5rem,...)

font-size

compatible value: rem(0.25rem, 0.5rem,...)

grid-template-columns

compatible value: repeat

margin-top

compatible value: rem(0.25rem, 0.5rem,...)

padding

compatible value: rem(0.25rem, 0.5rem,...)

margin-bottom

compatible value: rem(0.25rem, 0.5rem,...)

selector view on MDN

target elements by tag, class, ID, attributes, or more complex patterns

function

New function discovered!

repeat()
minmax()

value

New value discovered!

keyword

Example:repeat(auto-fill)

New keyword discovered!

auto-fill
column
flex
grid
solid

child combinator

12/1

Javascript

request

New request found!

fetch()

promise

New promise found!

then

.json

12/3/25

New tag found!

compatible attributes: defer, src

use to make a preset or template (?)
does not show on website

12/24

<audio>

compatible attribute: global, id, autoplay, loop, muted

12/28/25

<button>

additional compatible attribute: onclick

JVS

<script> (View on MDN)

use to exceute jvs
can be used with JSON and WebGL's GLSL shader programming language and JSON.

function (View on MDN)

becomes a method when the function belongs to an object (View on MDN)>

For example:

    
      <button onclick="playMusic()">Play</button>
      <audio id="bgm" src="/music/music.mp3" autoplay></audio>
      <script>
      function playMusic() {
          document.getElementById("bgm").play();
      }
      </script>

document. use function getElementById("bgm"), which is the method for document. , to call for <audio id="bgm">. play() is the method for <audio id="bgm">

New function discovered!

play():plays music and video
getElementById():search for element based on id attribute(not the same thing as <label>) View on MDN

document. View on MDN

an object representing the entire webpage.

12/31/25

<link>

refer and excute the target codes.
can link CSS and JVS to html using this element.

CSS

ruleset View on MDN

strucure(anatomy) of css and identity for the parts that made up ruleset(or rules for short)

2026

1/1