NEOGEOREDUX

there's a LOT of text here. if you're in a hurry / only want extremely useful stuff i'd reccomend sections 4 & 5 images are prone to not loading but all of them are clickable.

1. code ≠ good carrd

this sounds rich coming from someone who regularly uses css but you don't need pro plus or even pro standard to make a good carrd. in fact, most good carrds that use code should start out with a mindset of page structure first, css second. i often find im just using code to get around carrd's irritating margins / bounding boxes rather than to add effects.

you can also utilize carrd's own features to use them in creative ways. experiment w/ gradients, highlights etc.

here's some examples of standard carrds w/ my notes (my handwriting is sloppy sorry) 1, 2

code hardly matters because even if you have scrollbars and bouncing text, it can look fuck ugly. font, color, page structure and balance choices are all things that will come to you regardless of coding experience, and that you can lack in spite of coding experience.

take a look at this carrd i made using a friend's template. the original template worked great, but this is awful. the over-use of the same color and cluster of text and effects makes it unreadable. the font i embedded doesn't fit at all either. if the still wasn't overwhelming enough, i had two marquees (moving text) going in two different directions. compare this to the original which worked way better.

2. know the limitations

carrd is a very finnicky website - sometimes shit doesn't work or doesn't work how you'd think. for example, links won't load properly if they're in highlight markdowns. unless you do it =/=like this==

another annoying thing that i remembered to write because it JUST happened to me: if you have a text-stroke on a link, it'll disappear if you visit where it leads. fix this by also adding the text-stroke code to the link section of the style section.

some scripts also won't work in carrd due to it loading the entire carrd as one page. while you're able to mimic the appearance of a website by having "pages", they're sections. code may stop working when you switch sections or if you put them in a section that isn't home due to this.

it's also important to note that when bringing codes from other sources that they weren't intended for carrd. this is why certain scripts don't work together, or might need adjusting. if it doesn't work as a div, try making it a class instead!

3. knowledge is power

before you ask someone how they did something, get into the habit of googling it first (stackoverflow and w3schools my beloved !) and if all else fails get used to source inspecting and crtl+f-ing to find what you need. "but 17! isn't that stealing? are you promoting stealing people's hard work?" you don't own code you found on 30secondsofcode and edited. unless you've coded something complicated that can't be easily replicated, or you've written an actual script with java, you don't "own" code. it's been done millions of times before you, by the thousands of people that taught themselves html. the very nature of html and web design is to share what you've found and learned with other people.

4. accesibility / formatting

most common thing: always make sure your containers are set to "default" and not "stack" if they have columns. do this by scrolling down in appearance mobile>manual>layout>stack. this will save mobile users a lot of headache.

other stuff: you can give elements css that will only load on mobile, meaning you can hide elements that won't load properly on mobile (put display: none; in the mobile tab in style) or change how they load entirely !

desktop vs mobile (click / tap)

use em instead of px in your font-size code when possible, because em stays consistent across different aspect ratios.

THIS IS SO COOL AND USEFUL READ THIS sort of an expansion on display:none; for tricky elements on mobile, there's also code you can use to tell #div and .class in your embeds what to do on mobile too! i'll try to explain with an example.

the marquee i was using in this carrd loaded weirdly on mobile, but because it was in my <style> embed and not the element styles itself, i couldn't just use carrd's tabs to fix how it loads.

left: desktop right: mobile

allow me to introduce you to @media. the code:
"@media only screen and (max-width: 600px) {"
allows you to tell any element what to do when carrd detects them being loaded on a screen with those dimensions. 600px is the average width of a phone screen.

you can put any div/class in the @media lines to add code as you want - i was just lazy so i made the marquee not load at all. here's the example code:

making carrds look nice and readable on both platforms is difficult and frustrating, especially when you wish certain things could work both ways, but personally i find it extremely respectable.

5. neat lil tricks

1. background pixels
follow the settings below to make a looping pixel your background (works with anything thats a line/loops cleanly), can also be placed at the top of your carrd!

1. windows / simulated "tabs"
use container css (or make one in an embed if you're crazy) to simulate a "window"or 'tab"and use position: relative; + top / right / left codes to move it just over your main container. remember to be mindful of how it'll load on mobile!

CODES

no credit needed for any of these! just spread the knowledge :)
💿 draggable box
gif as text background
double border text
rainbow gradient box style thing
image blur hover everyone pretends not to have
💿 custom default cursors
💿 imported font families
element border around text + image
slidable labels/buttons + vertical version (pastebin)

if you see a code you want in any of my carrds, just ask!
or refer to tip 3 😏

CARRDS

💿 resource - great abundance of cool resources and snazzy aes
💿 yokai - first resource carrd i used and a great starting point for pixels / helpful websites / bread n' butter code
teaclub - has cool stuff most sites don't list
funhouse - love my buddy kim
💿 codes - holy grail of useful codes and cute pixels
graphics - what it says on the tin
xyz - all around good resources / lots of good pixels

WEB

mf2fm - the answer to 'where did you get X code?' 99% of the time
💿 w3schools - please fucking use it its so good (also you can share code with TryIt editor and it'll have a preview)
💿 stackoverflow - not rlly the main page itself but if you see this while googling code questions the answers are usually helpful
gifcities - great place for actual webcore gifs
💿 juunangou's temple archive - shrine to android 17
💿 lovely cyborg - shrine to android 18 (both of these sites are great examples of what real webcore should look like. also a cool look into early internet weeb culture)
💿 y2kaestheticinstitute - y2k backgrounds
y2klostandfound y2k backgrounds
backgrounds - does what it says on the tin
💿 webfinds - neat webcore stuff

ETC.

my carrd archive - has most of my carrds!
💿 did / osdd self help - immensely helpful
kriol-inglish dictionary - this one's for me idk learn my language
steamunlocked - shhhhh
💿 9anime - high quality anime / jp media